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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:14px 0;

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

backdrop-filter:blur(20px);

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

border-bottom:1px solid rgba(10,102,194,.08);

transition:all .35s ease;

}

.header.scrolled{

padding:10px 0;

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

box-shadow:var(--shadow-sm);

}

/* NAVBAR */

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

height:78px;

}

/* LOGO */

.logo{

display:flex;

align-items:center;

}

.logo img{

height:68px;

width:auto;

transition:.35s ease;

}

.header.scrolled .logo img{

height:58px;

}

/* DESKTOP MENU */

.nav-links{

display:flex;

align-items:center;

gap:40px;

}

.nav-links a{

position:relative;

font-weight:600;

color:var(--text);

}

.nav-links a::after{

content:"";

position:absolute;

left:50%;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transform:translateX(-50%);

transition:.35s ease;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

/* MOBILE BUTTON */

.menu-toggle{

display:none;

align-items:center;

justify-content:center;

width:48px;

height:48px;

border-radius:12px;

color:var(--primary);

cursor:pointer;

}

.menu-toggle svg{

width:28px;

height:28px;

}

/* MOBILE */

@media(max-width:900px){

.menu-toggle{

display:flex;

}

.nav-links{

position:fixed;

top:90px;

left:-100%;

width:100%;

height:calc(100vh - 90px);

background:#fff;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding-top:60px;

gap:36px;

transition:.35s ease;

}

.nav-links.active{

left:0;

}

}

.header{
    transition:.35s ease;
}

.header.scrolled{
    box-shadow:0 12px 40px rgba(7,27,54,.08);
    backdrop-filter:blur(20px);
}