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

.navbar{

position:sticky;
top:0;
z-index:1000;

background:rgba(255,255,255,0.9);
backdrop-filter:blur(10px);

padding:14px 0;

border-bottom:1px solid #e5e7eb;

transition:.3s;

}

/* SHADOW */

.navbar.scrolled{

box-shadow:0 8px 30px rgba(0,0,0,0.08);

}

/* FLEX */

.navbar-flex{

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

}

/* LOGO */

.logo-area img{

height:72px;
transition:.4s;

}

/* LOGO HOVER */

.logo-link:hover img{

transform:scale(1.08) rotate(-2deg);

}

/* LINKS */

.nav-links{

list-style:none;
display:flex;
align-items:center;
gap:30px;

}

/* LINK STYLE */

.nav-links li a{

text-decoration:none;
color:#111827;
font-weight:500;
font-size:15px;

position:relative;

transition:.3s;

}

/* HOVER UNDERLINE */

.nav-links li a::after{

content:"";
position:absolute;
left:0;
bottom:-6px;

width:0%;
height:2px;

background:#2563eb;

transition:.3s;

}

.nav-links li a:hover::after{

width:100%;

}

/* ACTIVE TAB */

.nav-links li a.active{

color:#2563eb;

}

.nav-links li a.active::after{

width:100%;

}

/* CTA BUTTON */

.nav-cta a{

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:white !important;

padding:9px 20px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.nav-cta a::after{

display:none;

}

.nav-cta a:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(37,99,235,0.3);

}

/* MOBILE MENU ICON */

.menu-toggle{

display:none;
font-size:24px;
cursor:pointer;

}

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

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-links{

position:absolute;

top:85px;
left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

gap:20px;

padding:30px 0;

display:none;

box-shadow:0 15px 35px rgba(0,0,0,0.08);

}

.nav-links.active{

display:flex;

}

}

/* FIX SCROLL POSITION */

section{
scroll-margin-top:110px;
}
/* =========================
TABLET
========================= */

@media(max-width:992px){

.logo-area img{
height:60px;
}

.nav-links{
gap:18px;
}

}


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

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-links{

position:absolute;
top:80px;
left:0;

width:100%;
background:white;

flex-direction:column;
align-items:center;

gap:20px;
padding:30px 0;

display:none;

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

}

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

}
@media(max-width:600px){

.logo-area img{
height:52px;
}

.nav-links{
top:75px;
}

}