/* ==========================
NEXAHOST HEADER CSS
========================== */

:root{

 
--primary:#163B67;
--secondary:#F7C600;
--dark:#111827;
--light:#ffffff;
 

}

/* ==========================
NAVBAR
========================== */

#navbar{

 
position:fixed;
top:0;
left:0;
width:100%;

background:#ffffff;

z-index:9999;

border-bottom:1px solid rgba(22,59,103,.08);

transition:.35s ease;
 

}

#navbar::after{

 
content:'';

position:absolute;

left:0;
bottom:0;

width:var(--nav-progress,0%);

height:3px;

background:linear-gradient(
    90deg,
    #F7C600,
    #FFD700
);

transition:.1s linear;
 

}

.scrolled{

 
box-shadow:
0 10px 40px rgba(0,0,0,.08);
 

}

/* ==========================
WRAPPER
========================== */

.navbar-wrapper{

 
display:flex;
align-items:center;
justify-content:space-between;

height:90px;
 

}

/* ==========================
LOGO
========================== */

.logo img{

 
height:65px;
width:auto;

transition:.3s ease;
 

}

.logo img:hover{

 
transform:scale(1.03);
 

}

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

.desktop-menu{

 
display:flex;
align-items:center;

gap:40px;

list-style:none;
 

}

.desktop-menu li{

 
position:relative;
 

}

/* ==========================
NAV LINKS
========================== */

.nav-link{

 
position:relative;

text-decoration:none;

color:var(--primary);

font-size:16px;

font-weight:700;

transition:.3s;
 

}

.nav-link:hover{

 
color:var(--secondary);
 

}

.nav-link::before{

 
content:'';

position:absolute;

left:50%;
bottom:-10px;

width:0;

height:3px;

background:var(--secondary);

border-radius:50px;

transform:translateX(-50%);

transition:.35s ease;
 

}

.nav-link:hover::before{

 
width:100%;
 

}

/* ==========================
MEGA MENU
========================== */

.mega-menu{

 
position:absolute;

left:50%;
top:100%;

transform:translateX(-50%);

width:900px;

margin-top:25px;

background:#ffffff;

border-radius:24px;

padding:35px;

border:1px solid #e5e7eb;

box-shadow:
0 25px 60px rgba(0,0,0,.12);

opacity:0;

visibility:hidden;

transition:.3s ease;
 

}

.dropdown:hover .mega-menu{

 
opacity:1;

visibility:visible;

margin-top:15px;
 

}

.mega-grid{

 
display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;
 

}

.mega-grid h3{

 
color:var(--primary);

font-size:18px;

margin-bottom:15px;
 

}

.mega-grid a{

 
display:flex;

align-items:center;

gap:10px;

padding:12px 14px;

border-radius:12px;

color:#334155;

text-decoration:none;

transition:.3s;
 

}

.mega-grid a:hover{

 
background:#f8fafc;

color:var(--primary);

transform:translateX(6px);
 

}

/* ==========================
CTA BUTTON
========================== */

.cta-btn{

 
display:inline-flex;

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

text-decoration:none;

background:var(--secondary);

color:#000;

padding:14px 28px;

border-radius:999px;

font-weight:700;

transition:.3s ease;
 

}

.cta-btn:hover{

 
transform:translateY(-3px);

box-shadow:
0 15px 30px rgba(247,198,0,.35);
 

}

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

.menu-btn{

 
display:none;

background:none;

border:none;

font-size:32px;

color:var(--primary);

cursor:pointer;
 

}

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

#mobileMenu{

 
position:fixed;

top:0;
right:-100%;

width:320px;

height:100vh;

background:#ffffff;

z-index:99999;

padding:25px;

transition:.4s ease;

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

}

#mobileMenu.active{

 
right:0;
 

}

.mobile-header{

 
display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;
 

}

.mobile-header img{

 
height:55px;
 

}

#closeMenu{

 
background:none;

border:none;

font-size:35px;

color:var(--primary);

cursor:pointer;
 

}

#mobileMenu a{

 
display:block;

padding:14px 0;

text-decoration:none;

color:var(--primary);

font-weight:600;

border-bottom:
1px solid #e5e7eb;
 

}

.mobile-cta{

 
margin-top:25px;

text-align:center;

background:var(--secondary);

border-radius:999px;

color:#000 !important;
 

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:1024px){

 
.desktop-menu,
.desktop-cta{

    display:none;

}

.menu-btn{

    display:block;

}
 

}

@media(max-width:950px){

 
.mega-menu{

    display:none;

}
 

}

@media(max-width:768px){

 
.navbar-wrapper{

    height:80px;

}

.logo img{

    height:50px;

}
 

}