.site-header{
position:sticky;
top:0;
z-index:999;
background:linear-gradient(90deg,#0c1d2f,#142c45);
padding:18px 0;
}

.nav-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
}

/* LOGO */

.logo{
font-size:26px;
font-weight:700;
color:white;
text-decoration:none;
}

/* NAV */

.main-nav{
display:flex;
align-items:center;
gap:30px;
}

.nav-menu{
display:flex;
list-style:none;
gap:35px;
align-items:center;
}

.nav-menu li a{
color:white;
text-decoration:none;
font-weight:500;
font-size:16px;
position:relative;
}

.nav-menu li a::after{
content:'';
position:absolute;
bottom:-6px;
left:0;
width:0;
height:2px;
background:#ff3b3b;
transition:.3s;
}

.nav-menu li a:hover::after{
width:100%;
}

/* CTA */

.header-cta{
background:#ff3b3b;
padding:10px 20px;
border-radius:6px;
color:white;
text-decoration:none;
font-weight:600;
white-space:nowrap;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
}

.hamburger span{
width:26px;
height:3px;
background:white;
display:block;
}

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

@media(max-width:900px){

.main-nav{
gap:15px;
}

.header-cta{
font-size:14px;
padding:8px 14px;
}

/* MENU PANEL */

.nav-menu{
position:absolute;
top:72px;
left:0;
width:100%;
background:#0c1d2f;

flex-direction:column;
align-items:center;
gap:20px;

padding:30px 0;

display:none;
}

.nav-menu.active{
display:flex;
}

/* SHOW HAMBURGER */

.hamburger{
display:flex;
}

}

/* ======================
SMALL MOBILE
====================== */

@media(max-width:500px){

.logo{
font-size:20px;
}

.header-cta{
font-size:13px;
padding:8px 12px;
}

}