header {
    position: fixed;
    width: 100%;
    height: 100px;
    padding: 28px 8%;
    top: 0;
    left: 0;
    transition: background-color 0.4s ease-in-out;
    z-index: 10;
}

header.scroll_header {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu.mobile-menu-scroll_header .line1, 
.mobile-menu.mobile-menu-scroll_header .line2,
.mobile-menu.mobile-menu-scroll_header .line3 {
    background-color: #1d1d1d;
}

#logo, .mobile-menu {
    position: relative;
    z-index: 10;
}

#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo {
    position: relative;
    width: 150px;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 50px;
    z-index: 9;
}

.nav-item a {
    text-decoration: none;
    color: #1d1d1d;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
    color: #466088;
    transition: color 0.3s ease-in-out;
}

.mobile-menu {
    position: relative;
    display: none;
    cursor: pointer;
}

.mobile-menu div {
    width: 32px;
    height: 4px;
    background-color: #ffffff;
    margin: 8px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Estilo para o índice selecionado no Header */
.nav-links .nav-item a.active-header-indices {
    color: #466088 !important; 
    position: relative;
    transition: color 0.4s ease-in-out; /* Suaviza a troca da cor do texto */
}

.nav-links .nav-item a.active-header-indices::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px; /* Um pouco mais grossa para destacar */
    bottom: -5px; /* Ajustado para não ficar colado na letra */
    left: 0;
    background-color: #f59e0b; /* Mesma cor do hover para harmonia */
    border-radius: 10px;
    animation: slideIn 0.3s ease-out forwards;
    transition: all 0.4s ease-in-out;
}

/* Keyframe para a linha não aparecer do nada */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 999px) {
    .nav-links {
        position: absolute;
        top: 100px;
        width: 100%;
        gap: 28px;
        right: 0;
        padding: 20px;
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.98);
        border-radius: 0px 0px 20px 20px;
        flex-direction: column;
        justify-content: space-around;
        transform: translateY(-150%);
        transition: none !important; 
    }

    .nav-links li {
        opacity: 0;
    }

    .mobile-menu {
        display: block;
    }

    .nav-links.transition-active {
        transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out !important;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        -webkit-box-shadow: 1px 9px 8px -2px rgba(0,0,0,0.1); 
        box-shadow: 1px 9px 8px -2px rgba(0,0,0,0.1);
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-menu.active .line1 {
        transform: rotate(-45deg) translate(-10px, 8.5px);
        background-color: #1d1d1d;
    }

    .mobile-menu.active .line2 {
        opacity: 0;
    }                   
    
    .mobile-menu.active .line3 {
        transform: rotate(45deg) translate(-8px, -6.5px);
        background-color: #1d1d1d;

    }

    header.menu-open {
        background-color: #ffffff;
    }
}