/* =========================
   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);
}

/* =========================
   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:100vh;

padding:110px 24px 40px;

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);
}

.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 .45s cubic-bezier(.23,1,.32,1);
}

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

.mobile-submenu-inner{
overflow:hidden;

display:flex;
flex-direction:column;

padding:0 12px 12px;
}

/* =========================
   HERO
========================= */

.hero{
height:120vh;

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

text-align:center;

padding:40px;
}

.hero h1{
font-family:'Syne',sans-serif;

font-size:
clamp(44px,7vw,92px);

line-height:1.05;

font-weight:800;

max-width:950px;

letter-spacing:-2px;

color:#0f172a;
}

.hero h1 span{
color:#d4af37;
}

/* =========================================================
   ULTRA PREMIUM RESPONSIVE EFFECTS
   PURA OLD RESPONSIVE CSS DELETE KARKE
   YEH PASTE KARO
========================================================= */

/* =========================================================
   LARGE DEVICES
========================================================= */

@media(max-width:1200px){

.navbar{
width:min(94%,1280px);
}

nav{
gap:2px;
}

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

.logo-main{
font-size:25px;
}

.desktop-cta{
padding:14px 22px;
}

}

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

@media(max-width:980px){

/* topbar */

.topbar{
background:
linear-gradient(
90deg,
#0f172a,
#111827,
#0f172a
);
}

.topbar-inner{
justify-content:center;
text-align:center;
padding:12px 0;
gap:10px;
}

.topbar-left,
.topbar-right{
justify-content:center;
}

/* desktop hide */

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

/* navbar */

.navbar{
padding:15px 0;
}

/* =========================================
   PREMIUM TOGGLE BUTTON
========================================= */

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;

width:58px;
height:58px;

border:none;
outline:none;
cursor:pointer;

border-radius:20px;

position:relative;
overflow:hidden;

background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(240,244,250,.9)
);

backdrop-filter:blur(20px);

box-shadow:
0 10px 35px rgba(15,23,42,.10),
inset 0 1px 1px rgba(255,255,255,.8);

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

/* rotating glow */

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

position:absolute;
width:140px;
height:140px;

background:
conic-gradient(
from 0deg,
transparent,
rgba(212,175,55,.9),
transparent,
rgba(15,23,42,.2),
transparent
);

animation:toggleRotate 4s linear infinite;
}

@keyframes toggleRotate{

100%{
transform:rotate(360deg);
}

}

/* inner glass */

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

position:absolute;
inset:2px;

border-radius:18px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(248,250,252,.88)
);

backdrop-filter:blur(10px);
}

/* hover */

.menu-toggle:hover{
transform:
translateY(-4px)
scale(1.03);

box-shadow:
0 20px 45px rgba(15,23,42,.14),
0 0 25px rgba(212,175,55,.25);
}

/* hamburger */

.menu-toggle span{
position:absolute;
z-index:2;

width:24px;
height:2.5px;

border-radius:20px;

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

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

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

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

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

/* active */

.menu-toggle.active{
transform:rotate(90deg);
}

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

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

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

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

.mobile-nav{
width:430px;
max-width:100%;

padding:
105px 24px 35px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.80),
rgba(255,255,255,.96)
);

backdrop-filter:blur(26px);

border-left:
1px solid rgba(255,255,255,.7);

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

overflow-y:auto;

position:fixed;
}

/* background glow */

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

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

width:300px;
height:300px;

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

filter:blur(20px);
}

/* dark glow */

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

position:absolute;
bottom:-100px;
left:-100px;

width:250px;
height:250px;

background:
radial-gradient(
circle,
rgba(15,23,42,.08),
transparent 70%
);

filter:blur(18px);
}

/* mobile links */

.mobile-nav a{
position:relative;

padding:18px 22px;

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

border-radius:22px;

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

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

backdrop-filter:blur(14px);

overflow:hidden;

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

/* liquid hover */

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

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

width:100%;
height:100%;

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

transition:.8s ease;
}

/* arrow */

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

position:absolute;
right:22px;
top:50%;

transform:
translateY(-50%)
translateX(-10px);

opacity:0;

transition:.4s ease;
}

/* hover */

.mobile-nav a:hover::before{
left:120%;
}

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

.mobile-nav a:hover{
transform:
translateX(8px)
scale(1.02);

padding-left:30px;

background:
linear-gradient(
135deg,
rgba(212,175,55,.12),
rgba(255,255,255,.88)
);

box-shadow:
0 18px 35px rgba(15,23,42,.08);
}

/* dropdown */

.mobile-dropdown{
border-radius:24px;

overflow:hidden;

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

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

backdrop-filter:blur(14px);
}

/* trigger */

.mobile-dropdown-trigger{
padding:18px 22px;
font-size:16px;
}

/* rotate */

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

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

/* submenu animation */

.mobile-submenu{
display:grid;
grid-template-rows:0fr;

transition:
grid-template-rows .5s cubic-bezier(.23,1,.32,1);
}

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

/* submenu inner */

.mobile-submenu-inner{
overflow:hidden;
padding:0 12px 12px;
}

/* CTA */

.mobile-nav .cta{
margin-top:10px !important;

padding:18px 22px;

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

border-radius:24px;

text-align:center;

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

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

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

.mobile-nav .cta:hover{
transform:
translateY(-4px)
scale(1.03);

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

}

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

@media(max-width:768px){

.topbar{
display:none;
}

/* navbar */

.navbar{
padding:14px 0;
}

/* logo */

.logo-main{
font-size:22px;
}

.logo-sub{
font-size:8px;
letter-spacing:2px;
}

/* glow */

.logo::before{
inset:-10px;
filter:blur(14px);
}

/* hero */

.hero{
height:100vh;
padding:24px;
}

.hero h1{
font-size:48px;
line-height:1.08;
}

/* menu */

.mobile-nav{
width:100%;
padding:
95px 20px 30px;
}

/* links */

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

/* toggle */

.menu-toggle{
width:54px;
height:54px;
border-radius:18px;
}

}

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

@media(max-width:480px){

.logo-main{
font-size:19px;
}

.logo-sub{
font-size:7px;
letter-spacing:1.5px;
}

/* toggle */

.menu-toggle{
width:50px;
height:50px;
border-radius:16px;
}

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

/* menu */

.mobile-nav{
padding:
88px 16px 24px;
}

/* links */

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

/* hero */

.hero h1{
font-size:38px;
line-height:1.1;
}

/* button */

.mobile-nav .cta{
padding:16px 18px;
font-size:13px;
}

}

/* =========================================================
   EXTRA SMALL
========================================================= */

@media(max-width:360px){

.logo-main{
font-size:17px;
}

.hero h1{
font-size:32px;
}

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

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

}