/* =========================
   RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Outfit',sans-serif;
background:#f5f7fb;
overflow-x:hidden;
color:#0f172a;
}



/* =========================
   BACKGROUND GLOW
========================= */

body::before{
content:"";
position:fixed;
top:-200px;
right:-200px;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(212,175,55,.10),
transparent 70%
);

filter:blur(20px);

z-index:-1;
}

/* =========================
   TOPBAR
========================= */

.topbar{
background:#0f172a;
border-bottom:1px solid rgba(255,255,255,.06);

position:relative;
overflow:hidden;

z-index:1001;
}

.topbar::before{
content:"";
position:absolute;
top:0;
left:-50%;

width:40%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(212,175,55,.22),
transparent
);

animation:shine 5s linear infinite;
}

@keyframes shine{

0%{
left:-50%;
}

100%{
left:120%;
}

}

.topbar-inner{
width:min(1280px,92%);
margin:auto;

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

padding:12px 0;

gap:15px;

position:relative;
z-index:2;
}

.topbar-left,
.topbar-right{
display:flex;
gap:26px;
flex-wrap:wrap;
}

.topbar span{
font-size:12px;
font-weight:500;

color:#cbd5e1;

display:flex;
align-items:center;
gap:8px;
}

.topbar i{
color:#d4af37;
}

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

header{
position:sticky;
top:0;
 height:auto;
z-index:1000;

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

backdrop-filter:blur(18px);

border-bottom:
1px solid rgba(15,23,42,.06);

transition:.4s ease;
}



header.scrolled{
    background: #ffffff;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.navbar{
width:min(1280px,92%);
margin:auto;

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

padding:18px 0;

transition:.35s ease;
}

header.scrolled .navbar{
padding:14px 0;
}

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

.logo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-decoration:none;
}

/* FIXED BOX = header control yahi se hoga */
.logo-box{
    width: 220px;   /* increase width instead of height */
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.logo-inner video{
    max-height: 72px;
    transform: scale(1.25); /* THIS makes logo bigger visually */
    transform-origin: left center;
    object-fit: contain;
}
.logo-inner{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}




header.scrolled .logo-inner video{
    max-height: 90px;
    filter: none;
}
/* =========================
   NAVIGATION
========================= */

nav{
display:flex;
align-items:center;
gap:12px;
}

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

.nav-link{
position:relative;

padding:14px 18px;

text-decoration:none;

font-size:14px;
font-weight:600;

display:flex;
align-items:center;
gap:8px;

overflow:hidden;

color:#0f172a;

transition:
transform .35s cubic-bezier(.23,1,.32,1),
color .3s ease;
}

.nav-link::before{
content:"";

position:absolute;
left:50%;
top:50%;

width:0;
height:0;

transform:translate(-50%,-50%);

background:
radial-gradient(
circle,
rgba(212,175,55,.18),
transparent 70%
);

transition:
.45s cubic-bezier(.23,1,.32,1);

z-index:-1;
}

.nav-link::after{
content:"";

position:absolute;
left:50%;
bottom:7px;

width:0;
height:2px;

transform:translateX(-50%);

background:
linear-gradient(
90deg,
transparent,
#d4af37,
transparent
);

transition:
.45s cubic-bezier(.23,1,.32,1);
}

.nav-link-text{
background:
linear-gradient(
90deg,
#0f172a,

#0f172a
);

background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

transition:.4s ease;
}

.nav-link:hover .nav-link-text{
background-position:right center;
}

.nav-link:hover::before{
width:180%;
height:260%;
}

.nav-link:hover::after{
width:75%;
}

.nav-link:hover{
transform:translateY(-3px);
}

/* =========================
   DROPDOWN
========================= */

.dropdown{
position:relative;
}

.dropdown-btn{
background:none;
border:none;
cursor:pointer;

font-family:inherit;
}

.dropdown-btn i{
font-size:11px;
color:#d4af37;

transition:.35s ease;
}

.dropdown.active .dropdown-btn i{
transform:rotate(180deg);
}

.dropdown-menu{
position:absolute;

top:72px;
left:0;

width:280px;

padding:14px;

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

backdrop-filter:blur(26px);

border:
1px solid rgba(255,255,255,.8);

box-shadow:
0 25px 70px rgba(15,23,42,.12);

opacity:0;
visibility:hidden;

transform:
perspective(1200px)
rotateX(-12deg)
translateY(20px);

transform-origin:top;

transition:
.45s cubic-bezier(.23,1,.32,1);

z-index:100;
}

.dropdown.active .dropdown-menu{
opacity:1;
visibility:visible;

transform:
perspective(1200px)
rotateX(0)
translateY(0);
}

.dropdown-menu a{
position:relative;

text-decoration:none;

padding:16px 18px;

display:flex;
align-items:center;
gap:12px;

font-size:14px;
font-weight:600;

color:#0f172a;

overflow:hidden;

transition:
transform .35s cubic-bezier(.23,1,.32,1),
background .3s ease;

margin-bottom:8px;
}

.dropdown-menu a:last-child{
margin-bottom:0;
}

.dropdown-menu a::before{
content:"";

position:absolute;
left:0;
top:0;

width:3px;
height:100%;

background:
linear-gradient(
180deg,
#d4af37,
#0f172a
);

transform:scaleY(0);

transition:.35s ease;
}

.dropdown-menu a:hover::before{
transform:scaleY(1);
}

.dropdown-menu a:hover{
background:#fff;

transform:translateX(8px);
}

.dropdown-menu a i{
color:#d4af37;
}

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

.cta{
position:relative;

padding:16px 28px;

text-decoration:none;

font-size:13px;
font-weight:800;

letter-spacing:.6px;

overflow:hidden;

color:#0f172a;

background:
linear-gradient(
135deg,
#d4af37,
#ffe08a,
#d4af37
);

background-size:200% 200%;

animation:gradientMove 4s ease infinite;

box-shadow:
0 18px 40px rgba(212,175,55,.25);

transition:
transform .4s cubic-bezier(.23,1,.32,1),
box-shadow .4s ease;
}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* BUTTON SHINE */

.cta::before{
content:"";

position:absolute;
top:0;
left:-120%;

width:60%;
height:100%;

transform:skewX(-25deg);

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.85),
transparent
);

transition:.8s ease;
}

.cta:hover::before{
left:170%;
}

.cta:hover{
transform:translateY(-5px) scale(1.02);

box-shadow:
0 25px 50px rgba(212,175,55,.35);
}

.mobile-nav .cta{
    width:100%;
    max-width:320px;   /* prevents “too long” look */
    align-self:flex-start;

    margin-top:10px;
    margin-bottom:20px;

    text-align:center;
}

/* =========================
   TOGGLE
========================= */

.menu-toggle{
display:none;

width:56px;
height:56px;

border:none;

background:
linear-gradient(
135deg,
#ffffff,
#f8fafc
);

cursor:pointer;

position:relative;

overflow:hidden;

box-shadow:
0 10px 30px rgba(15,23,42,.08);

transition:.4s ease;

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

/* GLOW */

.menu-toggle::before{
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(212,175,55,.18),
transparent
);

opacity:0;

transition:.35s ease;
}

.menu-toggle:hover::before{
opacity:1;
}

.menu-toggle:hover{
transform:rotate(8deg) scale(1.05);
}

.menu-toggle span{
position:absolute;

width:24px;
height:2px;

background:#0f172a;

transition:.35s ease;
}

.menu-toggle span:nth-child(1){
transform:translateY(-8px);
}

.menu-toggle span:nth-child(2){
transform:translateY(0);
}

.menu-toggle span:nth-child(3){
transform:translateY(8px);
}

/* ACTIVE */

.menu-toggle.active{
background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);
}

.menu-toggle.active span{
background:#d4af37;
}

.menu-toggle.active span:nth-child(1){
transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg);
}

/* =========================
   OVERLAY
========================= */

.overlay{
position:fixed;
inset:0;

background:
rgba(15,23,42,.55);

backdrop-filter:blur(5px);

opacity:0;
visibility:hidden;

transition:.35s ease;

z-index:998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

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

.mobile-nav{
position:fixed;
top:0;
right:0;

width:380px;
max-width:100%;

height:100dvh;
padding:100px 20px 40px;

overflow-x:hidden;


display:flex;
flex-direction:column;
gap:12px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.92),
rgba(255,255,255,.98)
);

backdrop-filter:blur(24px);

transform:translateX(100%);

transition:
transform .55s cubic-bezier(.23,1,.32,1);

z-index:999;

overflow-y:auto;
}

.mobile-nav::before{
content:"";

position:absolute;
top:-100px;
right:-100px;

width:260px;
height:260px;

background:
radial-gradient(
circle,
rgba(212,175,55,.16),
transparent 70%
);

filter:blur(10px);
}

.mobile-nav.active{
transform:translateX(0);
}

.mobile-nav a{
position:relative;

text-decoration:none;

padding:18px 20px;

font-size:16px;
font-weight:600;

color:#0f172a;

overflow:hidden;

transition:
transform .35s cubic-bezier(.23,1,.32,1),
padding-left .35s ease,
background .35s ease;
}

.mobile-nav a::after{
content:"↗";

position:absolute;
right:20px;

opacity:0;

transform:translateX(-10px);

transition:.35s ease;
}

.mobile-nav a:hover::after{
opacity:1;
transform:translateX(0);
}

.mobile-nav a:hover{
padding-left:28px;

background:
rgba(212,175,55,.08);

transform:translateX(4px);
}

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

.mobile-dropdown{
background:
rgba(255,255,255,.6);

border:
1px solid rgba(15,23,42,.06);

backdrop-filter:blur(18px);
overflow:visible;
}

.mobile-dropdown-trigger{
display:flex;
justify-content:space-between;
align-items:center;

cursor:pointer;
}

.mobile-dropdown-trigger i{
transition:.35s ease;
}

.mobile-dropdown.active .mobile-dropdown-trigger i{
transform:rotate(180deg);
}

.mobile-submenu{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .4s ease;
}
.mobile-dropdown.active .mobile-submenu{
grid-template-rows:1fr;
}

.mobile-submenu-inner{
overflow:hidden; /* yahan hidden rehne do */
padding:8px 12px 12px;
display:flex;
flex-direction:column;
gap:8px;
}



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

/* Laptop */
@media (max-width:1200px){

.navbar{
width:94%;
}

.nav-link{
padding:12px 14px;
font-size:13px;
}

.logo-box{
width:200px;
height:68px;
}

.logo-inner video{
max-height:68px;
}

.cta{
padding:14px 22px;
}

}

/* Tablet */
@media (max-width:980px){

.topbar{
display:none;
}

nav,
.desktop-cta{
display:none;
}

.menu-toggle{
display:flex;
}

.navbar{
width:94%;
padding:14px 0;
}

.logo-box{
width:180px;
height:60px;
}

.logo-inner video{
max-height:60px;
transform:scale(1.15);
}

.mobile-nav{
width:380px;
max-width:100%;
height:100dvh;
padding:100px 20px 120px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

.mobile-dropdown{
overflow:visible;
}

.mobile-submenu{
display:grid;
grid-template-rows:0fr;
transition:.4s;
}

.mobile-dropdown.active .mobile-submenu{
grid-template-rows:1fr;
}

.mobile-submenu-inner{
overflow:hidden;
}

}

/* Mobile */
@media (max-width:768px){

.navbar{
padding:12px 0;
}

.logo-box{
width:160px;
height:54px;
}

.logo-inner video{
max-height:54px;
transform:scale(1.1);
}

.menu-toggle{
width:52px;
height:52px;
}

.mobile-nav{
width:100%;
padding:100px 18px 90px;
}

.mobile-nav a{
font-size:15px;
padding:16px 18px;
}

}

/* Small Mobile */
@media (max-width:480px){

.logo-box{
width:140px;
height:48px;
}

.logo-inner video{
max-height:48px;
transform:scale(1);
}

.menu-toggle{
width:48px;
height:48px;
}

.menu-toggle span{
width:20px;
}

.mobile-nav{
padding:90px 15px 90px;
}

.mobile-nav a{
font-size:14px;
padding:14px 16px;
}

.mobile-nav .cta{
padding:15px 16px;
font-size:13px;
margin-bottom:20px;
}

}

/* Extra Small */
@media (max-width:360px){

.logo-box{
width:125px;
height:44px;
}

.logo-inner video{
max-height:44px;
}

.menu-toggle{
width:44px;
height:44px;
}

.mobile-nav a{
font-size:13px;
}

}