/* Global reset (load first) */
:where(html, body){ margin:0 !important; padding:0 !important; } /* top gap killer */
*{ box-sizing:border-box; } /* safe sizing */
/* Base reset – global, conflict‑safe */
:where(html, body){ margin:0; padding:0; } /* top/side की default 8px margin हटेगी */
/* Navbar के आसपास कोई margin/padding न रहे */
.vip-nav{ margin:0; }
/* Demo/placeholder height हटाएँ ताकि नीचे one‑page जैसा खाली gap न बने */
#vip-main{ min-height:0 !important; }
/* Hero wrapper पर गलती से margin/padding-top हो तो हटाएँ */
.hero, .vip-hero, [data-hero]{ margin-top:0 !important; padding-top:0 !important; }
/* vip-navbar.css */
@layer vip-navbar {
:root {
/* Tune these to match your logo exactly */
--vip-blue: #2f6fcd; /* logo blue (adjust if needed) */
--vip-red: #ef3b3b; /* logo red (adjust if needed) */
--vip-primary: #0f2226; /* dark header */
--vip-primary-2: #0b191c; /* darker blend */
--vip-text: #eaf3f6;
--vip-muted: #a8c0c7;
--vip-shadow: 0 8px 28px rgba(0,0,0,.28);
--vip-radius: 14px;
}
.vip-nav {
position: sticky; top: 0; z-index: 9990;
background: linear-gradient(180deg, color-mix(in oklab, var(--vip-primary) 92%, black 8%),
var(--vip-primary-2));
color: var(--vip-text);
box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--vip-shadow);
backdrop-filter: saturate(140%) blur(8px);
background-size: 100% 300%;
background-position: 50% calc(50% + var(--vip-bg-shift, 0px));
transition: background-position .6s ease, box-shadow .4s ease;
}
.vip-nav-inner{
max-width:1200px; margin:0 auto; padding:10px 20px;
display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.vip-skip{position:absolute;left:-9999px;top:-9999px;}
.vip-skip:focus{left:16px;top:12px;background:var(--vip-blue);color:#fff;padding:8px 12px;border-radius:6px;}
/* Brand: larger logo, stacked name + tagline */
.vip-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--vip-text);}
.vip-logo{height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.vip-brand-stack{display:flex;flex-direction:column;line-height:1.05;}
.vip-brand-line1{font-weight:800;font-size:1.28rem;letter-spacing:.2px;color:var(--vip-blue);}
.vip-brand-line2{margin-top:2px;font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in oklab, var(--vip-blue) 82%, white 18%);}
.vip-burger{display:none;width:48px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));cursor:pointer;position:relative;
transition:transform .2s ease, box-shadow .2s ease;}
.vip-burger:hover{box-shadow:0 6px 16px rgba(0,0,0,.25);transform:translateY(-1px);}
.vip-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--vip-text);border-radius:2px;transition:transform .3s,opacity .2s,top .3s;}
.vip-burger span:nth-child(1){top:14px;} .vip-burger span:nth-child(2){top:21px;} .vip-burger span:nth-child(3){top:28px;}
.vip-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg);}
.vip-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.vip-burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg);}
.vip-menu{display:flex;align-items:center;justify-content:center;gap:6px;list-style:none;margin:0;padding:0 8px;}
.vip-link{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 14px;color:var(--vip-text);
text-decoration:none;font-weight:600;letter-spacing:.2px;border-radius:10px;transition:color .25s,transform .15s,background .2s;}
.vip-link:hover{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transform:translateY(-1px);}
.vip-link::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,var(--vip-blue),var(--vip-red));transition:transform .28s ease;border-radius:2px;}
.vip-link:hover::after,.vip-link[aria-current="page"]::after{transform:scaleX(1);}
.vip-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:999px;text-decoration:none;
color:#fff;font-weight:800;letter-spacing:.3px;background:linear-gradient(90deg,var(--vip-red),color-mix(in oklab,var(--vip-red) 35%, var(--vip-blue) 65%));
box-shadow:0 8px 18px rgba(239,59,59,.28);transition:transform .15s, box-shadow .2s;}
.vip-cta:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(239,59,59,.32);}
/* Hover tracker underline */
.vip-nav-underline{position:absolute;height:2px;width:0;left:0;bottom:6px;background:linear-gradient(90deg,var(--vip-blue),var(--vip-red));
border-radius:2px;transform-origin:left;transition:transform .24s, width .24s, opacity .2s;opacity:.85;pointer-events:none;}
/* Responsive */
@media (max-width:992px){ .vip-brand-line1{font-size:1.12rem;} .vip-brand-line2{font-size:.72rem;letter-spacing:.18em;} }
@media (max-width:840px){
.vip-burger{display:inline-block;}
.vip-menu{position:fixed;inset:74px 14px auto 14px;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:16px;
background:linear-gradient(180deg,rgba(12,26,28,.98),rgba(9,20,22,.98));border:1px solid rgba(255,255,255,.08);box-shadow:var(--vip-shadow);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s, transform .18s;}
.vip-burger[aria-expanded="true"] ~ .vip-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.vip-cta{display:none;}
}
@media (prefers-reduced-motion: reduce){
.vip-link,.vip-cta,.vip-burger,.vip-nav-underline{transition:none !important;}
}
}
/* vip-navbar.css */
/* 1) अपने लोगो का exact red यहाँ डालें */
:root{
--vip-red: #ef3b3b; /* logo red */
}
/* 2) Navbar brand tagline को लाल करें */
.vip-brand-line2{
color: var(--vip-red); /* uses CSS variable */
text-transform: uppercase; /* जैसा अभी है वैसा रहने दें */
letter-spacing: .22em;
}
/* navbar should not push page down */
#vnav.vnav{
position:fixed; top:0; left:0; right:0;
margin:0 !important; padding-top:0 !important;
border-top:0 !important; transform:none !important;
}
/* remove accidental top margin from navbar children */
#vnav.vnav > *{ margin-top:0 !important; }