/* NAVBAR */

header{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid #f2f2f2;
}

.navbar{
height:74px;
display:flex;
justify-content:space-between;
align-items:center;
}

/* LOGO */

.logo img{
height:28px;
display:block;
}

/* NAV LINKS */

.nav-links{
display:flex;
align-items:center;
gap:34px;
}

.nav-links a{
font-size:14px;
font-weight:500;
color:#111;
transition:.3s;
position:relative;
}

.nav-links a:hover{
opacity:.65;
}

/* ACTIVE LINK */

.nav-links a.active::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:100%;
height:1px;
background:#111;
}

/* DROPDOWN STYLE */

.nav-item{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}

/* RIGHT NAV ICONS */

.nav-icons{
display:flex;
align-items:center;
gap:20px;
}

.nav-icons img{
width:18px;
height:18px;
opacity:.8;
transition:.3s;
cursor:pointer;
}

.nav-icons img:hover{
opacity:1;
}

/* MOBILE MENU */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

.navbar{
height:68px;
}

.logo img{
height:24px;
}

.menu-toggle{
display:block;
z-index:1001;
}

.nav-links{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:#fff;
flex-direction:column;
align-items:flex-start;
padding:110px 35px;
gap:28px;
transition:.35s ease;
box-shadow:-5px 0 30px rgba(0,0,0,.08);
z-index:1000;
}

.nav-links.active{
right:0;
}

.nav-links a{
font-size:18px;
}

.nav-icons{
display:none;
}

}