#header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: transparent;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease,
        box-shadow .35s ease;
}

/* ==========================================================
   HEADER SCROLL
========================================================== */

#header.scrolled {

    background: rgba(8, 22, 31, .72);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 12px 30px rgba(0,0,0,.18);

}

/* ==========================================================
   CONTAINER
========================================================== */

#header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    min-height:84px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo img{

    width:150px;

    height:auto;

    transition:transform .35s ease;

}

.logo:hover img{

    transform:scale(1.03);

}

/* ==========================================================
   NAVEGAÇÃO
========================================================== */

#nav{

    margin-left:auto;

}

.nav-list{

    display:flex;

    align-items:center;

    gap:2rem;

}

.nav-list li{

    list-style:none;

}

.nav-list a{

    position:relative;

    display:block;

    padding:.35rem 0;

    color:#ffffff;

    text-decoration:none;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.03em;

    transition:color .3s ease;

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:999px;

    background:#CFE8F3;

    transition:width .3s ease;

}

.nav-list a:hover{

    color:#CFE8F3;

}

.nav-list a:hover::after{

    width:100%;

}

/* ==========================================================
   MENU MOBILE
========================================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    padding:0;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

}

.menu-toggle span{

    display:block;

    width:26px;

    height:2px;

    margin:5px auto;

    border-radius:999px;

    background:#ffffff;

    transition:.3s ease;

}

/* ==========================================================
   MENU ABERTO
========================================================== */

.menu-toggle.active span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:900px){

    #header .container{

        min-height:74px;

    }

    .menu-toggle{

        display:flex;

    }

    #nav{

        position:fixed;

        top:74px;

        left:0;

        width:100%;

        max-height:0;

        overflow:hidden;

        background:rgba(8,22,31,.97);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        transition:max-height .35s ease;

    }

    #nav.active{

        max-height:420px;

    }

    .nav-list{

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:1rem 2rem 2rem;

    }

    .nav-list li{

        width:100%;

    }

    .nav-list a{

        width:100%;

        padding:1rem 0;

    }

}

@media (max-width:600px){

    .logo img{

        width:155px;

    }

}