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

.site-header{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:transparent;

    transition:
        background .45s ease,
        padding .45s ease,
        box-shadow .45s ease,
        backdrop-filter .45s ease;

    padding:0;
}

.site-header.scrolled{

    background:rgba(255,255,255,.90);

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

    box-shadow:0 10px 40px rgba(0,0,0,.06);

}


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

.header-wrapper{

    display:grid;

    grid-template-columns:220px 1fr 60px;

    align-items:center;

    height:92px;

    transition:.4s ease;

}

.site-header.scrolled .header-wrapper{

    height:76px;

}


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

.site-logo{

    display:flex;

    align-items:center;

}

.site-logo a{

    display:flex;

    align-items:center;

}

.site-logo img{

    height:44px;

    display:block;

    transition:.35s ease;

}

.logo-dark{

    display:none;

}

.site-header.scrolled .logo-light{

    display:none;

}

.site-header.scrolled .logo-dark{

    display:block;

}


/*==================================================
    NAVIGATION
==================================================*/

.main-navigation{

    display:flex;

    justify-content:center;

}

.main-menu{

    display:flex;

    align-items:center;

    gap:56px;

}

.main-menu li{

    position:relative;

}

.main-menu li a{

    position:relative;

    color:#fff;

    font-size:13px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s ease;

}

.site-header.scrolled .main-menu li a{

    color:#111;

}


/* underline animation */

.main-menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:1px;

    background:#164A97;

    transition:.35s ease;

}

.main-menu li:hover>a::after,
.main-menu .current-menu-item>a::after{

    width:100%;

}

.main-menu li:hover>a{

    color:#164A97;

}


/*==================================================
    RIGHT
==================================================*/

.header-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}


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

.mobile-toggle{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.20);

    background:transparent;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.35s ease;

}

.site-header.scrolled .mobile-toggle{

    border-color:#d9d9d9;

}

.mobile-toggle:hover{

    background:#164A97;

    border-color:#164A97;

}

.mobile-toggle span{

    width:20px;

    height:2px;

    background:#fff;

    margin:3px 0;

    transition:.35s ease;

}

.site-header.scrolled .mobile-toggle span{

    background:#111;

}

.mobile-toggle:hover span{

    background:#fff;

}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1200px){

.main-menu{

    gap:38px;

}

}

@media(max-width:991px){

.header-wrapper{

    grid-template-columns:1fr auto;

}

.main-navigation{

    display:none;

}

.mobile-toggle{

    display:flex;

}

.site-logo img{

    height:40px;

}

}

@media(max-width:767px){

.header-wrapper{

    height:80px;

}

.site-header.scrolled .header-wrapper{

    height:70px;

}

.site-logo img{

    height:36px;

}

.mobile-toggle{

    width:44px;

    height:44px;

}

}