body {
  background-color: #f1eee3;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  
}
h1 {
    /* font-family: "PT Serif", serif; */
    font-family: "Montserrat", sans-serif;
    color: #b98a43;
    text-shadow: 2px 2px 3px lightgray;
}
h2 {
    font-family: "Montserrat", sans-serif;
    /* font-family: "PT Serif", serif; */
    color: black;
    text-shadow: 2px 2px 3px lightgray;
}

 .email {
    text-decoration: none;
    color: black;
}
.email:hover {
    text-decoration: underline;
}
.background-wrapper {
        position: relative;
        height: 100%; /* Or whatever height you need */
    }

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        background-image: url(images/nav_back.jpg);
        background-size: cover;
        background-position: center;
        opacity: 100; /* Start fully transparent */
        animation: fadeInBackground 4s ease-out forwards; 
    }

    .foreground-content {
        position: relative; /* Ensure it stacks above the background */
        z-index: 1; /* Ensure it stacks above the background */
        width: 75%;

    }

    @keyframes fadeInBackground {
        0% {
            opacity: 100%;
        }
        /* 50% {
            opacity: 75%;
        } */
        100% {
            opacity: 50%;
        }

    }

.navbar-nav {
    padding-bottom: 140px;
}



.nav-item {
    background-color: #879a84;
    
}

.nav-link {
    color: whitesmoke;
}

.animatebg {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(135deg, #ff6596, #60bef8, #d88cff);
    background-size: 200% 150%;
    animation: bganimate 10s infinite linear;
}
@keyframes bganimate{
    0% {
        background-position: 0 85%;
    }
    50% {
        background-position: 100% 20%
    }
    100% {
        background-position: 0% 85%;
    }
}

    @keyframes fade-in-on-scroll {
        0% { 
            opacity: 0;
            transform: translateY(100px); 
        
        }
        50% {
            opacity: 20%;
            transform: translateY(50px); 

        }
        100% { 
            opacity: 100%;
            transform: translateY(0); 
        }
    }

     .fadebottom {
        animation: fade-in-on-scroll;
        animation-duration: auto;
        animation-timeline: view(); /* or scroll(root block) */
        animation-range: entry 0% cover 50%; /* Adjust range as needed */
    }
i {
    font-size: 2rem;
    color: black;
}
.card-header i {
    font-size: 1.5rem;
    color: #d0ab5a;
}
.card .card-header {
    background-color: #cbd2b98e;
}
.card-body {
    min-height: 175px;
}
.footer {
    display: flex;
    background-color: #879a84;
    min-height: 50px;
    color: whitesmoke;
    padding: 20px 50px 10px;
}
.footer a {
    color:whitesmoke;
}

/* .test {
    position:absolute; right: 0;
    padding-right: 30px;
    padding-top: 100px;
} */
.accordion-button:not(.collapsed) {
    background-color: #879a84;
    color: whitesmoke;
    
}
.accordion-button:focus {
    border-color: #879a84;
    box-shadow:none;
}


/* Tablet View */
@media (max-width: 768px) {
    
     .footer {
        display: block;
        text-align: center;
    }

    .navbar-nav {
    position: absolute; right: 0;
    z-index: 2;
    padding-bottom: 0px;
    }

    .background-image {
    background-image: url(images/nav_sm_back.jpg);
    }

    .foreground-content {
        width: 100%;
    }

    
}