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

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:110px;

    z-index:1000;

    transition:.35s ease;

}

#header.scrolled{

    background:rgba(22,17,13,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    height:110px;

    display:flex;

    align-items:center;

}

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

.navbar-logo{

    flex:0 0 220px;

    display:flex;

    align-items:center;
    
    padding-top:30px;

}

.navbar-logo img{

    width:210px;

    transition:.35s ease;

}

#header.scrolled .navbar-logo img{

    width:170px;

}

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

.navbar-menu{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:52px;
    
     margin-top:4px;

}

.navbar-menu li{

    list-style:none;

}

.navbar-menu a{

    position:relative;

    color:#fff;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.4px;

    transition:.3s;

}

.navbar-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    transform:translateX(-50%);

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:.3s;

}

.navbar-menu a:hover{

    color:var(--color-primary);

}

.navbar-menu a:hover::after{

    width:100%;

}

/* ==========================================================
   BOTÃO
========================================================== */

.navbar-button{

    flex:0 0 220px;

    display:flex;

    justify-content:center;

    align-items:center;

    width:205px;

    height:50px;

    margin-left:auto;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

}

.navbar-button:hover{

    background:var(--color-primary-light);

    transform:translateY(-2px);

}

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

.menu-toggle{

    display:none;

}