/*======================================
FRAMEWORK 10 NAVBAR
======================================*/

.nav{

position:fixed;

top:22px;

left:50%;

transform:translateX(-50%);

width:94%;

z-index:9999;

padding:18px 0;

background:var(--glass);

backdrop-filter:blur(var(--blur));

border:1px solid var(--glass-border);

border-radius:var(--radius-xl);

transition:var(--transition);

}

.nav.scrolled{

top:10px;

background:var(--glass);

}

.nav .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-family:Syne;

font-size:24px;

font-weight:700;

}

.logo img{

width:48px;

}

nav{

display:flex;

gap:38px;

}

nav a{

position:relative;

color:var(--text);

transition:.3s;

}

nav a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--secondary);

transition:.35s;

}

nav a:hover{

color:#00E5FF;

}

nav a:hover::after{

width:100%;

}

.nav-buttons{

display:flex;

gap:16px;

}

.menu{

display:none;

font-size:34px;

cursor:pointer;

}

.progress{

position:absolute;

left:0;

bottom:-1px;

height:2px;

width:0;

background:var(--gradient-primary);

}

@media(max-width:992px){

nav,

.nav-buttons{

display:none;

}

.menu{

display:block;

}

}