/* =====================================================================
   ✅ V4 ADD — header-footer-v4.css   (NAYI FILE — har page par link karo)
   ---------------------------------------------------------------------
   Sirf HEADER + MOBILE MENU + FOOTER ka style. Sab classes "v4-" se
   shuru hoti hain, isliye page ke baaki design par asar nahi padta.
   Colors: #163B21 (green) · #FDB412 (yellow) · #080A0E (black)

   V4 me kya FIX hua (neeche "V4 FIX" search karo):
     V4 FIX #1  Header ke peeche aane wali cream patti hata di
     V4 FIX #2  Footer ke rounded corners me aane wala white color fix
   ===================================================================== */
.v4-hd,.v4-drawer,.v4-ft,.v4-header-space{
  --v4-cream:#f7f5ec; --v4-cream-2:#e9e7d6; --v4-ink:#080A0E; --v4-green:#163B21;
  --v4-yellow:#FDB412; --v4-white:#fffef9; --v4-muted:#5f655d;
  --v4-display:'Bricolage Grotesque',sans-serif; --v4-body:'Instrument Sans',sans-serif;
}
.v4-hd,.v4-drawer,.v4-ft{font-family:var(--v4-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-align:left}
.v4-hd *,.v4-drawer *,.v4-ft *{box-sizing:border-box}
.v4-hd ul,.v4-drawer ul,.v4-ft ul{list-style:none;margin:0;padding:0}
.v4-hd li,.v4-drawer li,.v4-ft li{list-style:none}
.v4-hd a,.v4-drawer a,.v4-ft a{text-decoration:none}
.v4-hd button,.v4-drawer button,.v4-ft button,.v4-ft input{font-family:inherit}

/* ---------- buttons ---------- */
.v4-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 20px;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:14px;cursor:pointer;background:var(--v4-ink);color:var(--v4-cream);transition:transform .25s,box-shadow .25s}
.v4-btn:hover{transform:translateY(-3px);color:var(--v4-cream)}
.v4-arr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);font-size:13px;transition:transform .25s}
.v4-btn:hover .v4-arr{transform:rotate(45deg)}
.v4-btn-y{background:var(--v4-yellow);color:var(--v4-ink);box-shadow:0 10px 24px -10px var(--v4-yellow)}
.v4-btn-y:hover{color:var(--v4-ink)}
.v4-btn-y .v4-arr{background:rgba(8,10,14,.14)}

/* ---------- header ---------- */
.v4-hd{position:fixed;top:14px;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:0 12px}
/* ✅ V4 FIX #1 START — pehle yahan cream background + 92px patti thi (hata di).
   Ab header hero ke upar float karta hai. Agar kisi page par heading header ke
   neeche chhup jaye to :root{--v4-header-gap:90px} de do (background fir bhi transparent). */
.v4-header-space{height:var(--v4-header-gap,0px);background:transparent}
/* ✅ V4 FIX #1 END */
.v4-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1100px,100%);background:rgba(255,254,249,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(8,10,14,.1);padding:6px 8px 6px 18px;border-radius:999px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);transition:box-shadow .3s}
.v4-hd.scrolled .v4-nav{box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.v4-brand{display:flex;align-items:center}
.v4-brand img{height:46px;width:auto;display:block;mix-blend-mode:multiply}
.v4-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.v4-links>li{position:relative}
.v4-links>li>a{display:inline-flex;align-items:center;gap:6px;padding:12px 0;color:var(--v4-ink);position:relative}
.v4-links>li>a::after{content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--v4-yellow);transition:width .25s}
.v4-links>li>a:hover::after,.v4-links>li>a.is-active::after,.v4-has-sub.open>a::after{width:100%}
.v4-caret{font-size:10px;transition:transform .25s}
.v4-has-sub:hover .v4-caret,.v4-has-sub.open .v4-caret{transform:rotate(180deg)}

.v4-sub{position:absolute;top:100%;left:-16px;min-width:240px;background:var(--v4-white);border:1px solid rgba(8,10,14,.1);border-radius:22px;padding:10px;margin-top:10px;box-shadow:0 24px 40px -22px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.v4-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.v4-has-sub:hover>.v4-sub,.v4-has-sub:focus-within>.v4-sub,.v4-has-sub.open>.v4-sub{opacity:1;visibility:visible;transform:none}
.v4-sub a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:14px;color:var(--v4-ink);font-size:14px;white-space:nowrap;transition:background .2s}
.v4-sub a::after{content:"↗";font-size:12px;opacity:0;transform:translateX(-4px);transition:.2s}
.v4-sub a:hover{background:var(--v4-cream-2)}
.v4-sub a:hover::after{opacity:1;transform:none}

.v4-burger{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:0;background:var(--v4-ink);cursor:pointer;flex-shrink:0}
.v4-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--v4-cream)}
.v4-burger span:nth-child(1){top:15px}.v4-burger span:nth-child(2){top:21px;right:18px}.v4-burger span:nth-child(3){top:27px}

/* ---------- mobile drawer ---------- */
.v4-drawer{position:fixed;inset:0;z-index:1100;visibility:hidden;transition:visibility 0s .45s}
.v4-drawer.open{visibility:visible;transition-delay:0s}
.v4-drawer-bg{position:absolute;inset:0;background:rgba(8,10,14,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .4s}
.v4-drawer.open .v4-drawer-bg{opacity:1}
.v4-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(390px,90%);background:var(--v4-green);color:var(--v4-cream);padding:20px 22px 30px;overflow-y:auto;border-radius:32px 0 0 32px;transform:translateX(100%);transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.v4-drawer.open .v4-drawer-panel{transform:none}
.v4-d-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.v4-d-logo{display:inline-block;background:var(--v4-cream);border-radius:16px;padding:6px 12px}
.v4-d-logo img{height:40px;width:auto;display:block;mix-blend-mode:multiply}
.v4-d-close{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;transition:transform .3s}
.v4-d-close:hover{transform:rotate(90deg)}
.v4-d-list>li{border-bottom:1px solid rgba(255,255,255,.12)}
.v4-d-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v4-d-row>a{flex:1;color:var(--v4-cream);font-family:var(--v4-display);font-size:22px;font-weight:600;letter-spacing:-.02em;padding:14px 0}
.v4-d-row>a:hover,.v4-d-row>a.is-active{color:var(--v4-yellow)}
.v4-acc{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:transform .3s,background .3s,color .3s}
.v4-d-item.open .v4-acc{transform:rotate(45deg);background:var(--v4-yellow);border-color:var(--v4-yellow);color:var(--v4-ink)}
.v4-d-sub{max-height:0;overflow:hidden;transition:max-height .4s ease}
.v4-d-item.open>.v4-d-sub{max-height:340px;padding-bottom:10px}
.v4-d-sub a{display:block;padding:9px 0 9px 14px;color:#cfd8d1;font-size:15px;border-left:2px solid rgba(253,180,18,.5);margin-left:2px}
.v4-d-sub a:hover{color:var(--v4-yellow)}
.v4-d-cta{margin:24px 0 22px}
.v4-d-cta .v4-btn{width:100%;padding:15px 20px;font-size:15px}
.v4-d-info h5{font-family:var(--v4-display);font-size:15px;font-weight:600;margin:0 0 10px;color:var(--v4-yellow);letter-spacing:0}
.v4-d-mail{display:flex;align-items:center;gap:10px;color:var(--v4-cream);font-size:14px;margin-bottom:20px}
.v4-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(253,180,18,.16);color:var(--v4-yellow);font-size:14px;flex-shrink:0}
.v4-social{display:flex;gap:10px;flex-wrap:wrap}
.v4-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);color:var(--v4-cream);font-size:15px;transition:.25s}
.v4-social a:hover{background:var(--v4-yellow);border-color:var(--v4-yellow);color:var(--v4-ink);transform:translateY(-3px)}

/* ---------- footer ---------- */
/* ✅ V4 FIX #2 START — footer ke rounded corners ke peeche body ka white color dikhta tha.
   Ab footer 40px upar CTA ke andar ghusa hai (negative margin), to corners ke peeche
   CTA ka apna green background aata hai. Padding 72 -> 112 (72 + 40) taaki content
   apni jagah par rahe. */
.v4-ft{position:relative;z-index:2;overflow:hidden;background:var(--v4-ink);color:#c9cdc6;border-radius:40px 40px 0 0;margin-top:-40px;padding:112px 0 0}
/* ✅ V4 FIX #2 END */
.v4-ft::before,.v4-ft::after{content:"";position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
.v4-ft::before{width:340px;height:340px;background:var(--v4-green);left:-90px;top:-120px;opacity:.9}
.v4-ft::after{width:260px;height:260px;background:var(--v4-yellow);right:-80px;bottom:-130px;opacity:.16}
.v4-ft-wrap{position:relative;z-index:1;width:min(1200px,92%);margin:auto}
.v4-ft-grid{display:grid;grid-template-columns:1.5fr .8fr 1.1fr 1.4fr;gap:44px}
.v4-ft-logo{display:inline-block;background:var(--v4-cream);border-radius:18px;padding:8px 16px;margin-bottom:20px}
.v4-ft-logo img{height:52px;width:auto;display:block;mix-blend-mode:multiply}
.v4-ft-brand p{font-size:14px;color:#aeb4ab;max-width:340px;margin:0 0 22px}
.v4-ft h4{position:relative;font-family:var(--v4-display);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--v4-cream);margin:0 0 22px;padding-bottom:12px}
.v4-ft h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--v4-yellow)}
.v4-ft-links li{margin-bottom:12px}
.v4-ft-links a{display:inline-flex;align-items:center;gap:8px;color:#c9cdc6;font-size:14px;transition:color .2s,transform .2s}
.v4-ft-links a:hover{color:var(--v4-yellow);transform:translateX(4px)}
.v4-ft .v4-social a{border-color:rgba(255,255,255,.2)}
.v4-ft-mail{display:flex;align-items:center;gap:12px;color:var(--v4-cream);font-size:14px;word-break:break-word}
.v4-ft-mail:hover{color:var(--v4-yellow)}
.v4-news{display:flex;flex-direction:column;gap:12px}
.v4-news input{width:100%;padding:15px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:var(--v4-cream);font-size:14px;outline:none;transition:border .2s,background .2s}
.v4-news input::placeholder{color:#8f958c}
.v4-news input:focus{border-color:var(--v4-yellow);background:rgba(255,255,255,.1)}
.v4-news .v4-btn{width:100%;padding:14px 20px}
.v4-ft-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:56px;padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.v4-ft-bottom p{margin:0;color:#9aa097}
.v4-ft-bottom ul{display:flex;gap:26px}
.v4-ft-bottom a{color:#c9cdc6;font-weight:600}
.v4-ft-bottom a:hover{color:var(--v4-yellow)}



/* ✅ V4 FIX #3 (CSS) START — dropdown ke andar current page highlight */
.v4-sub a.is-active{background:var(--v4-cream-2);font-weight:600}
.v4-d-sub a.is-active{color:var(--v4-yellow)}
/* ✅ V4 FIX #3 (CSS) END */



/* ---------- responsive ---------- */
@media(max-width:991px){
  .v4-links,.v4-cta{display:none}
  .v4-burger{display:inline-block}
  .v4-nav{padding-right:6px}
  .v4-brand img{height:42px}
  .v4-ft-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:575px){
  .v4-ft{border-radius:30px 30px 0 0;margin-top:-30px;padding-top:86px} /* ✅ V4 FIX #2 (mobile) */
  .v4-ft-grid{grid-template-columns:1fr}
  /* About Link: ek hi line mein (height kam) */
  .v4-ft-links{display:flex;flex-wrap:wrap;gap:8px 18px}
  .v4-ft-links li{margin-bottom:0}
  .v4-ft-bottom{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.v4-hd *,.v4-drawer *,.v4-ft *{transition:none!important}}

/* footer colour guard: inner-v1.css (body.homepage5-body h4/p) must not recolour the footer */
body.homepage5-body .v4-ft h4{color:var(--v4-cream);font-family:var(--v4-display);letter-spacing:-.02em;line-height:1.2}
body.homepage5-body .v4-ft p{color:#aeb4ab}
body.homepage5-body .v4-ft .v4-ft-bottom p{color:#9aa097}
body.homepage5-body .v4-ft a{color:#c9cdc6}
body.homepage5-body .v4-ft a:hover{color:var(--v4-yellow)}
body.homepage5-body .v4-ft .v4-ft-mail{color:var(--v4-cream)}
body.homepage5-body .v4-ft .v4-btn-y{color:var(--v4-ink)}
body.homepage5-body .v4-ft .v4-social a{color:var(--v4-cream)}