:root{

--nav-icon-size:20px;

}


.site-header{

position:fixed;

top:0;

left:0;

right:0;

width:100%;

z-index:9999;

transition:

all .35s ease;

}


/* ======================

SCROLLED NAVBAR

====================== */

.site-header.scrolled .nav-wrapper{

padding:8px 40px;



background:

rgba(255,255,255,.16);



backdrop-filter:

blur(20px)

saturate(160%)

brightness(112%)

contrast(105%);

-webkit-backdrop-filter:

blur(20px)

saturate(160%)

brightness(112%)

contrast(105%);



border-top:

1px solid rgba(255,255,255,.92);



border-bottom:

1px solid rgba(255,255,255,.28);



box-shadow:

0 8px 32px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.90),

inset 0 -1px 0 rgba(255,255,255,.18);



transform:

translateY(0);

}




.site-header.scrolled .nav-logo img{

height:52px;

}





.site-header.scrolled .desktop-nav a{

padding:

8px 14px;

}


.nav-wrapper{

position:relative;

width:100%;

padding:8px 32px;

display:flex;

align-items:center;

justify-content:space-between;

overflow:hidden;



background:

rgba(255,255,255,.18);



backdrop-filter:

blur(24px)

saturate(180%)

brightness(115%);

-webkit-backdrop-filter:

blur(24px)

saturate(180%)

brightness(115%);



border-top:

1px solid rgba(255,255,255,.90);

border-bottom:

1px solid rgba(255,255,255,.28);



box-shadow:

0 10px 40px rgba(0,0,0,.05),

inset 0 1px rgba(255,255,255,.9),

inset 0 -1px rgba(255,255,255,.15);

}


.nav-wrapper::before{

content:"";

position:absolute;

inset:0;



background:

linear-gradient(

180deg,

rgba(255,255,255,.70),

rgba(255,255,255,.18) 22%,

rgba(255,255,255,.06) 50%,

rgba(255,255,255,.18) 78%,

rgba(255,255,255,.45)

);



mix-blend-mode:screen;

pointer-events:none;

}

.nav-wrapper::after{

content:"";

position:absolute;

top:-220%;

left:-30%;

width:26%;

height:520%;



background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.85),

transparent

);



transform:

rotate(28deg);

filter:blur(10px);

opacity:.65;



animation:

glassSweep 9s ease-in-out infinite;

pointer-events:none;

}



@keyframes glassSweep{

0%{

left:-45%;

}



45%{

left:140%;

}



100%{

left:140%;

}

}

.nav-logo img{

height:52px;

width:auto;

display:block;

object-fit:contain;

transition:

all .35s ease;

}


.site-header{

position:fixed;

top:0;

left:0;

right:0;

width:100%;

z-index:9999;



background:

transparent;



transition:

all .35s ease;

}


.nav-wrapper{

isolation:isolate;

}


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

.desktop-nav{

flex:1;

display:flex;

justify-content:center;

}

.desktop-nav ul{

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

gap:14px;

margin:0;

padding:0;

list-style:none;

width:auto;

}

.desktop-nav li{

list-style:none;

margin:0;

padding:0;

display:block;

}

.mobile-nav ul{

list-style:none;

margin:0;

padding:0;

}


.desktop-nav a{

display:flex;

align-items:center;

gap:6px;

padding:10px 16px;

font-weight:800;

color:#000;

border:1px solid transparent;

border-radius:10px;

transition:all .22s ease;

}


.desktop-nav a:hover{

border:1px solid #000;

background:transparent;

transform:scale(1.04);

}


.desktop-nav a img,
.mobile-nav a img,
.nav-login img{

filter:brightness(0);

transition:.22s;

}


.nav-actions{

display:flex;

gap:12px;

}



.nav-login{

display:flex;

align-items:center;

justify-content:center;

gap:6px;

padding:10px 18px;

min-height:44px;

background:transparent;

color:#000;

font-weight:800;

line-height:1;

border:1px solid transparent;

border-radius:10px;

transition:all .22s ease;

}

.nav-icon{

width:var(--nav-icon-size) !important;

height:var(--nav-icon-size) !important;

min-width:var(--nav-icon-size);

max-width:var(--nav-icon-size);

max-height:var(--nav-icon-size);

flex:0 0 var(--nav-icon-size);

display:block;

object-fit:contain;

object-position:center;

filter:brightness(0);

opacity:1;

transition:

all .22s ease;

}


.nav-login img{

display:block;

}


.nav-login .nav-icon{

transform:

translateY(0);

}


.nav-login:hover{

border:1px solid #000;

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

transform:scale(1.04);

}



.nav-login:hover img{

transform:scale(1.08);

}


.mobile-toggle{
    display:none;
}

.mobile-nav{
    display:none;
}

@media(max-width:992px){

.desktop-nav{
    display:none;
}

.mobile-toggle{

    display:flex;

    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    font-size:28px;

    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;

    cursor:pointer;

}

.mobile-nav{

    position:fixed;

    top:70px;
    left:0;
    right:0;

    display:none;

    flex-direction:column;

    background:#fff;

    padding:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    z-index:9998;

}

.mobile-nav.active{

    display:flex;

}

.mobile-nav a{

    padding:15px;

    border-bottom:1px solid #eee;

    color:#000;

    font-weight:700;

}

.mobile-nav a:last-child{

    border-bottom:none;

}

}
.mobile-nav a:hover{

border:

2px solid #000;

transform:

scale(1.03);

}