@charset "UTF-8";
/* ===========================================================================
   HEADER + FOOTER

   Site ka wo hissa jo har page par ek jaisa rehta hai. Alag file isliye hai
   ki /blog/ (WordPress) ise akela load kar sake — use poori style.css ki
   zaroorat nahi, sirf header/footer ki hai.

   Compile: npx sass assets/css/header-footer.scss assets/css/header-footer.css
   =========================================================================== */
/* ---------- palette: light theme, orange accent ---------- */
/* ===========================================================================
   BASE — reset, body, links, .container aur .theme-btn.

   header-footer.scss aur style.scss dono ise lete hain, taki dono file
   apne aap me poori rahein. Rules ek jaise hain, isliye dobara aane se
   kuch bigadta nahi.
   =========================================================================== */
/* ---------- base ---------- */
*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Baloo 2", sans-serif;
  background: #ffffff;
  color: #574c45;
  line-height: 1.6;
  font-size: clamp(15px, 1.3vw, 16px);
  overflow-x: hidden;
}

a,
li,
ul,
p,
strong {
  font-family: "Baloo 2", sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-size: clamp(15px, 1.3vw, 16px);
}

::selection {
  background: #e8722a;
  color: #ffffff;
}

::-moz-selection {
  background: #e8722a;
  color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 767px) {
  .container {
    padding: 0 20px;
  }
}

/* ---------- default: outline ---------- */
.theme-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 30px;
  border: 1px solid #e8722a;
  background: transparent;
  color: #e8722a;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Baloo 2", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.theme-btn:hover {
  background: #e8722a;
  border-color: #e8722a;
  color: #ffffff;
}
.theme-btn:focus-visible {
  outline: 2px solid #c4551a;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .theme-btn {
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

/* ---------- filled variant ---------- */
.theme-btn.alt {
  border-color: #e8722a;
  background: #e8722a;
  color: #ffffff;
}
.theme-btn.alt:hover {
  background: #c4551a;
  border-color: #c4551a;
  color: #ffffff;
}

/* dark background par outline variant — accent wahan bhi chalta hai
   par white saaf padhta hai */
/* dark background par outline variant — border aur text dono white,
   warna akela orange border dark surface par ajeeb lagta hai */
.theme-btn.on-dark,
.theme-btn.is-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.theme-btn.on-dark:hover,
.theme-btn.is-light:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #c4551a;
}

/* filled variant dark par bhi bhara hua hi rehta hai */
.theme-btn.alt.on-dark,
.theme-btn.alt.is-light {
  border-color: #e8722a;
  background: #e8722a;
  color: #ffffff;
}
.theme-btn.alt.on-dark:hover,
.theme-btn.alt.is-light:hover {
  background: #c4551a;
  border-color: #c4551a;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Section separator — do sections ke beech ka ornamental divider.

   Markup:  <div class="alchemy-divider" aria-hidden="true"></div>

   Sirf sajawat hai, isliye markup me aria-hidden rehta hai. .container ke
   bahar, do <section> ke beech seedha rakhein.
   --------------------------------------------------------------------------- */
.alchemy-divider {
  width: min(80%, 420px);
  aspect-ratio: 600/176;
  margin: auto;
  background: url("../images/alchemy-divider.webp") no-repeat center/contain;
}

/* ===========================================================================
   CHROME — har page par ek jaisa rehne wala hissa:
   header + nav, footer, page curtain, to-top, WhatsApp float,
   lightbox aur thank-you modal.

   Blog (/blog/) sirf yahi file uthata hai — page content ki CSS uske
   kaam ki nahi. Isme Bootstrap ka koi class use nahi hota.
   =========================================================================== */
/* header/footer ka apna container. Bootstrap bhi `.container` define karta
   hai, isliye alag naam — chahe bootstrap.css baad me load ho, chrome par
   uska asar nahi padta. */
.hf-container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 767px) {
  .hf-container {
    padding: 0 20px;
  }
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 100px;
  display: flex;
  align-items: center;
  background: transparent;
  padding-top: 12px;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-stuck {
  height: 74px;
  padding-top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 #e9e0d9, 0 6px 24px rgba(31, 26, 23, 0.07);
}
@media (max-width: 991px) {
  .site-header {
    height: 72px;
    padding-top: 8px;
  }
  .site-header.is-stuck {
    padding-top: 0;
  }
}

.header-inner {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 767px) {
  .header-inner {
    padding: 0 20px;
  }
}

.brand {
  flex: 0 0 auto;
  display: block;
}
.brand .brand-logo {
  height: 70px;
  width: auto;
  filter: invert(1) brightness(100);
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 991px) {
  .brand .brand-logo {
    height: 55px;
  }
}

/* header solid hone pe — filter OFF */
.site-header.is-stuck .brand .brand-logo {
  height: 60px;
  filter: none;
}

/* ---------- nav ---------- */
.main-nav {
  flex: 0 0 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  list-style: none;
}
.nav-list a {
  position: relative;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* hero video ke upar white — header solid hone pe niche override */
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(31, 26, 23, 0.45);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: #e8722a;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-list a {
  /* underline aur rang sirf hover par — active page highlight nahi hota */
}
.nav-list a:hover::after {
  width: 100%;
}
.nav-list a:hover {
  color: #f7a469;
}
@media (max-width: 1199px) {
  .nav-list {
    gap: 24px;
  }
  .nav-list a {
    font-size: 13px;
  }
}

/* ---------- mobile toggle + drawer ---------- */
/* ---------- header ka Reserve Your Seat button ----------
   Ribbon shape (dono siron par V-notch) clip-path se banta hai.

   Border ka mamla: clip-path CSS border ko bhi kaat deta hai, isliye
   normal `border` kaam nahi karega. Iske bajaye ek aur parat rakhte hain —
   ::before par wahi clip-path, par 2px andar (inset), taki neeche wala
   rang ek border jaisi patli line ban kar dikhe.

   Hover par wo andar wali parat gayab ho jati hai aur button bhar jata
   hai — outline se solid me. */
.nav-cta {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  /* V-notch ke liye extra jagah, warna text kat jata hai */
  background: #e8722a;
  font-family: "Baloo 2", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e8722a;
  text-shadow: none;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
  /* andar wali parat — yahi border ka bhram deti hai.
     z-index: -1 zaroori hai: warna ye text ke upar aa jati hai
     aur button khali dikhta hai. */
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* text ko z-index dena padta hai, warna ::before uske upar aa jata hai */
.nav-cta {
  z-index: 0;
  /* hover — andar wali safed parat hat jati hai, button bhar jata hai */
}
.nav-cta:hover {
  color: #ffffff;
}
.nav-cta:hover::before {
  opacity: 0;
  transform: scaleX(0.6);
}
.nav-cta:focus-visible {
  outline: 2px solid #c4551a;
  outline-offset: 3px;
}

@media (max-width: 991px) {
  /* mobile par button header bar me hi rehta hai — nav ke bahar hai,
     isliye drawer ke saath chhupta nahi */
  .nav-cta {
    margin-left: auto;
    margin-right: 12px;
    padding: 10px 24px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 767px) {
  .nav-cta {
    padding: 9px 18px;
    font-size: 10px;
    margin-right: 10px;
  }
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(31, 26, 23, 0.35);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {
  .nav-toggle {
    display: flex;
  }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    padding: 92px 26px 40px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    box-shadow: -8px 0 40px rgba(31, 26, 23, 0.12);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100vh;
    overflow-y: auto;
    z-index: 120;
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  body:has(.main-nav.is-open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(31, 26, 23, 0.45);
    z-index: 90;
    pointer-events: none;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* sirf top-level items — dropdown ke andar ye border ajeeb lagti hai */
  }
  .nav-list > li + li {
    border-top: 1px solid #e9e0d9;
  }
  .nav-list {
    /* drawer white hai — links dark, glow hata do.
       padding sirf top-level par, dropdown ke apne rules hain */
  }
  .nav-list a {
    display: block;
    color: #1f1a17;
    text-shadow: none;
    /* desktop wali underline yahan ajeeb lagti hai */
  }
  .nav-list a::after {
    display: none;
  }
  .nav-list a:hover {
    color: #e8722a;
  }
  .nav-list > li > a {
    padding: 15px 0;
    font-size: 14px;
  }
  /* close button drawer ke andar top-right — warna wo header me
     peeche reh jata hai */
  .nav-toggle.is-open {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 130;
  }
}
/* ---------- nav dropdown ---------- */
.nav-list .has-drop {
  position: relative;
}

/* Desktop: nav items header ki poori unchai lete hain. Isse dropdown ka
   `top: 100%` thik header ke bottom par girta hai (chipka hua), aur
   toggle se panel tak jaate waqt hover bhi nahi tootta. */
@media (min-width: 992px) {
  .header-inner {
    height: 100%;
  }
  .main-nav {
    align-self: stretch;
  }
  .nav-list {
    height: 100%;
    align-items: stretch;
  }
  .nav-list > li {
    display: flex;
    align-items: center;
  }
}
/* parent sirf toggle hai — koi page nahi kholta, isliye button */
/* ye ab <a> hai — font, rang aur text-shadow .nav-list a se aa jaate hain,
   yahan sirf chevron ka layout aur open state chahiye */
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* nav links wali underline yahan ajeeb lagti hai */
}
.nav-drop-toggle::after {
  display: none;
}
.nav-drop-toggle i {
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drop-toggle:hover, .nav-drop-toggle[aria-expanded=true] {
  color: #f7a469;
}
.nav-drop-toggle[aria-expanded=true] i {
  transform: rotate(180deg);
}
@media (max-width: 1199px) {
  .nav-drop-toggle {
    font-size: 13px;
  }
}

.nav-drop {
  position: absolute;
  /* header ke andar hai par uske bahar nikalta hai — sticky bars se
     upar rehne ke liye bada z-index chahiye */
  z-index: 120;
  /* header ke bilkul neeche chipka — beech me koi gap nahi */
  top: 100%;
  left: 50%;
  min-width: 300px;
  margin-top: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 0;
  border: 1px solid #e9e0d9;
  border-top: 0;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(31, 26, 23, 0.12);
  /* band haalat — pointer-events se click bhi block ho jata hai */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drop li + li {
  margin-top: 0;
  border-top: 1px solid rgba(233, 224, 217, 0.7);
}
.nav-drop a {
  position: relative;
  display: block;
  padding: 12px 18px 12px 34px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #574c45;
  text-shadow: none;
  white-space: normal;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* bayen taraf ka chhota dot */
}
.nav-drop a::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 1.15em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(232, 114, 42, 0.4);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drop a {
  /* desktop wali underline yahan nahi chahiye */
}
.nav-drop a::after {
  display: none;
}
.nav-drop a {
  /* rang sirf hover par — current page alag se highlight nahi hota */
}
.nav-drop a:hover {
  padding-left: 38px;
  background: #fdf3ec;
  color: #e8722a;
}
.nav-drop a:hover::before {
  background: #e8722a;
  transform: scale(1.25);
}

/* desktop — hover aur keyboard focus dono se khulta hai */
@media (min-width: 992px) {
  .has-drop:hover .nav-drop,
  .has-drop:focus-within .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .has-drop:hover .nav-drop-toggle i {
    transform: rotate(180deg);
  }
}
/* mobile drawer — accordion, is-open se khulta hai */
@media (max-width: 991px) {
  .nav-drop-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 14px;
    color: #1f1a17;
    text-shadow: none;
    /* khula hone par accent — user ko pata rahe kaun sa section open hai */
  }
  .nav-drop-toggle[aria-expanded=true] {
    color: #e8722a;
  }
  .nav-drop-toggle i {
    font-size: 13px;
  }
  .nav-drop {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: block;
    max-height: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-drop::before {
    display: none;
  }
  .nav-drop li + li {
    margin-top: 0;
    border-top: 0;
  }
  .nav-drop a {
    padding: 10px 0 10px 18px;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* drawer me dot bilkul bayen kinare par */
  }
  .nav-drop a::before {
    left: 0;
  }
  .nav-drop a:hover {
    padding-left: 18px;
    background: none;
  }
  .has-drop.is-open .nav-drop {
    max-height: 400px;
    padding-bottom: 10px;
  }
}
.site-header.is-stuck .nav-list > li > a,
.site-header.is-stuck .nav-drop-toggle {
  color: #1f1a17;
  text-shadow: none;
}
.site-header.is-stuck .nav-list > li > a:hover, .site-header.is-stuck .nav-list > li > a[aria-expanded=true],
.site-header.is-stuck .nav-drop-toggle:hover,
.site-header.is-stuck .nav-drop-toggle[aria-expanded=true] {
  color: #e8722a;
}
.site-header.is-stuck .nav-toggle span {
  background: #1f1a17;
  box-shadow: none;
}

.nav-toggle.is-open span {
  background: #1f1a17;
  box-shadow: none;
}

.site-footer {
  position: relative;
  padding: 120px 0;
  padding-bottom: 0;
}

.footer-arc {
  position: relative;
  margin-top: clamp(52px, 6vw, 90px);
  padding-bottom: 0;
  background: #e8722a;
  color: #e8722a;
}

.footer-arc-top {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: clamp(52px, 6vw, 90px);
  display: block;
}

.footer-arc-inner {
  position: relative;
  margin-top: clamp(-30px, -2.6vw, -16px);
  padding-bottom: clamp(38px, 4.5vw, 58px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.2vw, 26px);
  text-align: center;
}

.footer-logo {
  display: block;
}
.footer-logo img {
  width: clamp(66px, 7vw, 88px);
  height: auto;
  display: block;
  /* logo colored hai, orange arc pe white chahiye */
  filter: invert(1) brightness(100);
}

.footer-about {
  max-width: 520px;
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* pill-shaped nav links */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.footer-nav a {
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  font-size: clamp(11px, 1.2vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-nav a:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #c4551a;
}
@media (max-width: 767px) {
  .footer-nav {
    gap: 8px;
  }
  .footer-nav a {
    padding: 9px 16px;
  }
}

.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-social a:hover {
  background: #ffffff;
  color: #c4551a;
  transform: translateY(-3px);
}

/* bottom bar — arc ke sabse neeche */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(11.5px, 1.2vw, 12.5px);
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}
@media (max-width: 767px) {
  .footer-bottom-inner {
    justify-content: center;
    text-align: center;
  }
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-bottom-links a:hover {
  color: #ffffff;
}

/* ==========================================================================
   PAGE TRANSITION — chhah panel ka curtain

   Panels screen ko chhah barabar hisson me baantte hain (ek safed, ek
   theme orange). Vishesh baat: ek-ek chhod kar panel upar se aate hain
   aur baaki neeche se — isliye ek hi disha wale curtain se zyada zinda
   lagta hai. Har panel ka apna delay/duration hai.
   ========================================================================== */
.page-curtain {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  /* jab tak transition nahi chal raha, curtain click nahi rokta */
  pointer-events: none;
}

.page-curtain-panel {
  position: relative;
  /* flex + 1px extra chaudai — sub-pixel rounding se panels ke beech
     hairline gap dikh jata tha, ye usse dhak deta hai */
  flex: 1 0 auto;
  width: calc(16.6666666667% + 1px);
  margin-right: -1px;
  /* default: screen se hata hua — page normal dikhta hai */
  transform: scaleY(0);
  background: #ffffff;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  /* ek safed, ek theme orange — baari baari */
}
.page-curtain-panel:nth-child(even) {
  background: #e8722a;
}
.page-curtain-panel {
  /* visham panel upar se latakte hain, sam neeche se uthte hain */
}
.page-curtain-panel:nth-child(odd) {
  transform-origin: top;
}
.page-curtain-panel:nth-child(even) {
  transform-origin: bottom;
}

/* ---------- jaate waqt: screen dhak lo ---------- */
html.is-changing .page-curtain-panel {
  transform: scaleY(1);
}

/* ---------- aate waqt: jis disha se aaye thay, usi me wapas ---------- */
html.is-rendering .page-curtain-panel {
  transform: scaleY(0);
}

/* ---------- pehla load: panels screen dhake hue shuru hote hain ----------
   is-intro sirf ek frame ke liye lagti hai; hatte hi upar wala default
   (scaleY(0)) laagu ho jata hai aur panels hat jaate hain. */
html.is-intro .page-curtain-panel {
  transform: scaleY(1);
  transition: none;
}

html.is-held.is-changing .page-curtain-panel {
  transform: scaleY(1);
}

.page-curtain-panel:nth-child(1),
html.is-changing .page-curtain-panel:nth-child(1),
html.is-rendering .page-curtain-panel:nth-child(1) {
  transition-delay: 0s;
  transition-duration: 0.4s;
}

.page-curtain-panel:nth-child(2),
html.is-changing .page-curtain-panel:nth-child(2),
html.is-rendering .page-curtain-panel:nth-child(2) {
  transition-delay: 0.06s;
  transition-duration: 0.46s;
}

.page-curtain-panel:nth-child(3),
html.is-changing .page-curtain-panel:nth-child(3),
html.is-rendering .page-curtain-panel:nth-child(3) {
  transition-delay: 0.13s;
  transition-duration: 0.43s;
}

.page-curtain-panel:nth-child(4),
html.is-changing .page-curtain-panel:nth-child(4),
html.is-rendering .page-curtain-panel:nth-child(4) {
  transition-delay: 0.19s;
  transition-duration: 0.5s;
}

.page-curtain-panel:nth-child(5),
html.is-changing .page-curtain-panel:nth-child(5),
html.is-rendering .page-curtain-panel:nth-child(5) {
  transition-delay: 0.27s;
  transition-duration: 0.45s;
}

.page-curtain-panel:nth-child(6),
html.is-changing .page-curtain-panel:nth-child(6),
html.is-rendering .page-curtain-panel:nth-child(6) {
  transition-delay: 0.34s;
  transition-duration: 0.52s;
}

/* content ab fade nahi hota — curtain hi transition hai */
.transition-main {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.is-changing .transition-main {
  opacity: 0;
}

.to-top {
  position: fixed;
  right: clamp(18px, 2.5vw, 34px);
  bottom: clamp(18px, 2.5vw, 34px);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top-box {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #e8722a;
  color: #ffffff;
  transform: rotate(45deg);
  border: 2px solid #fff;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.to-top-box i {
  font-size: 16px;
  line-height: 1;
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.to-top:hover .to-top-box i {
  transform: rotate(-45deg) translateY(-2px);
}
.to-top:focus-visible .to-top-box {
  outline: 2px solid #c4551a;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  .to-top {
    width: 42px;
    height: 42px;
  }
  .to-top-box i {
    font-size: 14px;
  }
}

.wa-float {
  position: fixed;
  left: clamp(18px, 2.5vw, 34px);
  bottom: clamp(18px, 2.5vw, 34px);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  /* to-top scroll par aata hai, par whatsapp hamesha dikhna chahiye */
  animation: wa-float-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wa-float-box {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  /* to-top jaisa hi tilted diamond — dono ek family ke lagen */
  background: #25d366;
  color: #ffffff;
  transform: rotate(45deg);
  border: 2px solid #ffffff;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-float-box i {
  font-size: 22px;
  line-height: 1;
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-float:hover .wa-float-box {
  background: #1eb455;
}
.wa-float:hover .wa-float-box i {
  transform: rotate(-45deg) scale(1.08);
}
.wa-float:focus-visible .wa-float-box {
  outline: 2px solid #c4551a;
  outline-offset: 4px;
}
.wa-float {
  /* hover par right se nikalta chhota label */
}
.wa-float-tip {
  position: absolute;
  /* button ab left me hai, isliye tip right taraf khulti hai */
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 6px 12px;
  border-radius: 100px;
  background: #1f1a17;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* chhota teer, bubble ko button se jodta hai — button ab
     tip ke left me hai, isliye teer bhi left taraf point karta hai */
}
.wa-float-tip::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  border: 5px solid transparent;
  border-right-color: #1f1a17;
  transform: translateY(-50%);
}
.wa-float:hover .wa-float-tip, .wa-float:focus-visible .wa-float-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 767px) {
  .wa-float {
    width: 42px;
    height: 42px;
  }
  .wa-float-box i {
    font-size: 19px;
  }
  .wa-float {
    /* touch par hover nahi hota, tip bekaar hai */
  }
  .wa-float-tip {
    display: none;
  }
}

@keyframes wa-float-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* light banner wale pages par header top se hi dark rehta hai.
   class js se lagti hai (body class nahi), warna swup ke baad
   bina refresh ke rang purane page ka hi reh jata hai */
.site-header.is-black .brand .brand-logo {
  filter: none;
}
.site-header.is-black {
  /* dropdown ke andar wale links ka apna rang hai — unhe chhodo */
}
.site-header.is-black .nav-list > li > a,
.site-header.is-black .nav-drop-toggle {
  color: #1f1a17;
  text-shadow: none;
}
.site-header.is-black .nav-list > li > a:hover, .site-header.is-black .nav-list > li > a[aria-expanded=true],
.site-header.is-black .nav-drop-toggle:hover,
.site-header.is-black .nav-drop-toggle[aria-expanded=true] {
  color: #e8722a;
}
.site-header.is-black .nav-toggle span {
  background: #1f1a17;
  box-shadow: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 1.6vw, 26px);
  padding: clamp(16px, 3vw, 44px);
  background: rgba(31, 26, 23, 0.92);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] {
  display: none;
}
.lightbox {
  /* khulte waqt halka sa uthta hua */
  animation: lb-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes lb-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lightbox-frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}
.lightbox-frame img {
  display: block;
  max-width: 100%;
  /* arrows aur caption ke liye jagah chhodo */
  max-height: calc(100vh - clamp(110px, 16vw, 190px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-cap {
  max-width: 60ch;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

/* ---------- buttons ---------- */
.lightbox-close,
.lightbox-arrow {
  display: grid;
  place-items: center;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-close:hover,
.lightbox-arrow:hover {
  background: #e8722a;
  border-color: #e8722a;
}
.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 2px solid #f7a469;
  outline-offset: 3px;
}

.lightbox-close {
  position: absolute;
  top: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  z-index: 2;
}

@media (max-width: 767px) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "frame frame" "prev  next";
    align-content: center;
    row-gap: clamp(14px, 3vw, 24px);
  }
  .lightbox-frame {
    grid-area: frame;
  }
  .lightbox-arrow.is-prev {
    grid-area: prev;
    justify-self: end;
  }
  .lightbox-arrow.is-next {
    grid-area: next;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox {
    animation: none;
  }
}
/* click karne layak image — ishaara ki ye khulti hai */
[data-zoom] {
  cursor: zoom-in;
}

/* ---------------------------------------------------------------------------
   Solid header — un pages ke liye jinke upar dark hero nahi hai.

   Root pages ka header shuru me transparent rehta hai (safed text, safed
   logo — dark hero ke upar) aur scroll par .is-stuck se solid ho jata hai.
   /blog/ me koi hero nahi hai: content seedha safed background se shuru hota
   hai. Isliye wahan header shuru se hi solid chahiye, warna safed-par-safed
   invisible rehta hai — aur position:fixed hone ki wajah se content ke upar
   chadh bhi jata hai.

   Ye class blog apni <body> par lagata hai (theme ki functions.php me
   body_class filter). Pehle yahan `.single-page` tha — wo selector kisi aur
   project ki body class thi jo WordPress kabhi emit hi nahi karta, isliye
   ye rule blog par kabhi chala hi nahi.
   --------------------------------------------------------------------------- */
.has-solid-header .site-header {
  height: 74px;
  padding-top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 #e9e0d9, 0 6px 24px rgba(31, 26, 23, 0.07);
}
.has-solid-header .site-header .brand .brand-logo {
  height: 60px;
  /* root par logo dark hero ke liye white kiya jata hai — yahan
     background safed hai, to filter hatana zaroori hai */
  filter: none;
}
.has-solid-header .site-header .nav-list > li > a,
.has-solid-header .site-header .nav-drop-toggle {
  color: #1f1a17;
  text-shadow: none;
}
.has-solid-header .site-header .nav-list > li > a:hover, .has-solid-header .site-header .nav-list > li > a[aria-expanded=true],
.has-solid-header .site-header .nav-drop-toggle:hover,
.has-solid-header .site-header .nav-drop-toggle[aria-expanded=true] {
  color: #e8722a;
}
.has-solid-header .site-header .nav-toggle span {
  background: #1f1a17;
  box-shadow: none;
}
@media (max-width: 991px) {
  .has-solid-header .site-header {
    height: 72px;
  }
}

/* ---------- thank you modal ---------- */
.thanks-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 26, 23, 0.66);
  backdrop-filter: blur(7px);
  animation: thanksFade 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.thanks-modal[hidden] {
  display: none;
}

@keyframes thanksFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.thanks-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  padding: clamp(42px, 4.6vw, 54px) clamp(26px, 3vw, 42px) clamp(30px, 3.4vw, 40px);
  border-radius: 28px;
  /* upar se halki accent roshni, neeche cream me dhalta hua */
  background: radial-gradient(120% 88% at 50% 0%, rgba(232, 114, 42, 0.1) 0%, rgba(232, 114, 42, 0) 62%), linear-gradient(180deg, #ffffff 0%, #fdf3ec 100%);
  box-shadow: 0 34px 80px rgba(31, 26, 23, 0.32);
  text-align: center;
  animation: thanksRise 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
  /* sabse upar patli accent lakeer */
}
.thanks-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e8722a, transparent);
}

@keyframes thanksRise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.94);
  }
  60% {
    transform: translateY(0) scale(1.012);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* dono upari kono me mandala — bahut halka, dheere-dheere ghoomta hua.
   Line-art hai isliye opacity thodi zyada chal jati hai.

   Itna bahar rakha hai ki beech me tick ke liye saaf jagah bache. */
.thanks-deco {
  position: absolute;
  top: -84px;
  right: -84px;
  width: 230px;
  height: 230px;
  background: url("../images/mandala-deco.webp") no-repeat center/contain;
  opacity: 0.2;
  pointer-events: none;
  animation: thanksSpin 70s linear infinite;
  /* ulti disha me ghoome, warna dono bilkul ek jaise lagte hain */
}
.thanks-deco.is-left {
  right: auto;
  left: -84px;
  animation-duration: 85s;
  animation-direction: reverse;
}
@media (max-width: 767px) {
  .thanks-deco {
    top: -66px;
    width: 176px;
    height: 176px;
    right: -66px;
  }
  .thanks-deco.is-left {
    right: auto;
    left: -66px;
  }
}

@keyframes thanksSpin {
  to {
    transform: rotate(360deg);
  }
}
.thanks-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e9e0d9;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  color: #574c45;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thanks-close:hover {
  background: #e8722a;
  border-color: #e8722a;
  color: #ffffff;
}

/* ---- tick + uske chaaro taraf failti hui lehrein ---- */
.thanks-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 20px;
  /* peeche halka peach gola */
}
.thanks-icon::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: rgba(232, 114, 42, 0.13);
}

.thanks-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(232, 114, 42, 0.5);
  opacity: 0;
  animation: thanksRipple 3s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite;
}
.thanks-ring:nth-of-type(2) {
  animation-delay: 2.5s;
}

@keyframes thanksRipple {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.55);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
.thanks-tick {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: visible;
}

.thanks-tick-ring {
  fill: none;
  stroke: #e8722a;
  stroke-width: 2;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  animation: thanksDraw 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.thanks-tick-mark {
  fill: none;
  stroke: #e8722a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: thanksDraw 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.72s forwards;
}

@keyframes thanksDraw {
  to {
    stroke-dashoffset: 0;
  }
}
/* ---- text ---- */
.thanks-eyebrow,
.thanks-title,
.thanks-text,
.thanks-actions {
  position: relative;
  animation: thanksUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.thanks-eyebrow {
  display: block;
  margin-bottom: 2px;
  font-family: "WindSong", cursive;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.3;
  color: #e8722a;
  animation-delay: 0.3s;
}

.thanks-title {
  display: block;
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  color: #1f1a17;
  animation-delay: 0.38s;
}

.thanks-text {
  max-width: 340px;
  margin: 0 auto 26px;
  font-size: 14px;
  line-height: 1.8;
  color: #574c45;
  text-wrap: pretty;
  animation-delay: 0.46s;
}

@keyframes thanksUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  animation-delay: 0.54s;
}

.thanks-btn {
  min-width: 158px;
}
@media (max-width: 767px) {
  .thanks-btn {
    flex: 1 1 100%;
  }
}

/* jinke liye motion pareshani hai — sab kuch seedha final state me */
@media (prefers-reduced-motion: reduce) {
  .thanks-modal,
  .thanks-box,
  .thanks-deco,
  .thanks-ring,
  .thanks-tick-ring,
  .thanks-tick-mark,
  .thanks-eyebrow,
  .thanks-title,
  .thanks-text,
  .thanks-actions {
    animation: none;
  }
  .thanks-tick-ring,
  .thanks-tick-mark {
    stroke-dashoffset: 0;
  }
  .thanks-ring {
    opacity: 0;
  }
}
/* motion kam chahiye to chrome ki animations bhi band */
@media (prefers-reduced-motion: reduce) {
  .page-curtain {
    display: none;
  }
  .transition-main,
  .site-header,
  .nav-toggle span,
  .to-top,
  .to-top-box,
  .to-top-box i,
  .wa-float,
  .wa-float-box,
  .wa-float-box i,
  .wa-float-tip {
    transition: none;
    animation: none;
  }
}

/*# sourceMappingURL=header-footer.css.map */