/* =========================================================
   GEO HERB – Real sliding hero slider
   (swipe/drag, parallax layers, progress bar, slide counter)
   Is file ko style.css ke BAAD load karna hai.
   ========================================================= */

.hero-slider-dynamic{
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  cursor:grab;
}
.hero-slider-dynamic.is-dragging{cursor:grabbing}
.hero-slider-dynamic:focus-visible{outline:3px solid #b9e97e;outline-offset:-3px}
.hero-slider-dynamic img{-webkit-user-drag:none;user-drag:none}

/* Track: saari slides ek hi cell mein stack, JS inko translateX se chalata hai */
.hero-slider-dynamic .dynamic-slides{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}
.hero-slider-dynamic .dynamic-slides .dynamic-slide,
.hero-slider-dynamic .dynamic-slides .dynamic-slide.active{
  grid-area:1/1;
  display:grid!important;
  min-width:0;
  animation:none!important;      /* purana fade/slideIn band – ab real slide hai */
  will-change:transform;
  backface-visibility:hidden;
}

/* Poore slider ka ek hi full background color – slide badalne par bhi wahi rahega */
/* Theme ke mutabik: soft sage-green gradient + product ke peeche halka gold glow.
   Dark-green text (#173d2b) is par clearly readable rehta hai. */
.hero-slider-dynamic{
  background:
    radial-gradient(circle at 78% 48%,rgba(230,198,108,.38) 0%,rgba(230,198,108,0) 52%),
    linear-gradient(115deg,#f1f7ea 0%,#dcebd3 52%,#c9dfc3 100%)!important;
}
/* Halo ko thoda cream/white rakha taaki sage background par product ubhar kar dikhe */
.hero-slider-dynamic .dynamic-slide-media::before{
  background:radial-gradient(circle at 35% 30%,#fffdf0 0,#f6f3d6 55%,#e9ecc4 100%)!important;
  box-shadow:0 18px 45px rgba(36,84,59,.16);
}
.hero-slider-dynamic .dynamic-slides,
.hero-slider-dynamic .dynamic-slides .dynamic-slide,
.hero-slider-dynamic .dynamic-slides .dynamic-slide.active{background:transparent!important}

/* Image wala white box hata diya – isi se image "alag se rakhi" lagti thi.
   (style.css mein purana rule tha: .hero-slider-dynamic .dynamic-slide img{background:#fff!important}
    jo PNG ke transparent hisse ko bhi safed rectangle bana deta tha) */
.hero-slider-dynamic .dynamic-slide .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide .dynamic-slide-media img{background:transparent!important}

/* ---------- Parallax layers (--p = slide ka offset, --a = |offset|) ---------- */
.hero-slider-dynamic .dynamic-slide-media{
  transform:translate3d(calc(var(--p,0) * -45px),0,0) scale(calc(1 - var(--a,0) * .1));
  opacity:calc(1 - var(--a,0) * .75);
}
.hero-slider-dynamic .dynamic-slide-media::before{
  transform:translate3d(calc(var(--p,0) * -90px),0,0) scale(calc(1 + var(--a,0) * .25));
}
.hero-slider-dynamic .dynamic-slide-content{
  transform:translate3d(calc(var(--p,0) * 80px),0,0);
  opacity:calc(1 - var(--a,0) * 1.5);
}

/* Product ke peeche bada halo – product slide ke background mein "tika" hua lage */
@media(min-width:801px){
  .hero-slider-dynamic .dynamic-slide-media::before{width:500px;height:500px}
}

/* ---------- Progress bar + counter ---------- */
.dynamic-slider-progress{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(36,84,59,.10);z-index:6;pointer-events:none;
}
.dynamic-slider-progress span{
  display:block;width:100%;height:100%;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#20a94b,#e6c66c);
}
.dynamic-slider-count{
  position:absolute;right:28px;bottom:18px;z-index:6;
  display:flex;align-items:baseline;gap:5px;
  font-variant-numeric:tabular-nums;color:#24543b;pointer-events:none;
}
.dynamic-slider-count b{font-size:26px;font-weight:900;line-height:1;letter-spacing:-.5px}
.dynamic-slider-count span{font-size:13px;font-weight:700;opacity:.55}

@media(max-width:800px){
  .dynamic-slider-count{right:16px;bottom:14px}
  .dynamic-slider-count b{font-size:18px}
  .dynamic-slider-count span{font-size:11px}
  .dynamic-slider-progress{height:3px}
}

/* =========================================================
   EXTRA ANIMATIONS (glow + leaves + sparkles + halo + ripple)
   Sab kuch transform/opacity par chalta hai, isliye smooth rehta hai.
   ========================================================= */

/* ---------- Background FX layer (slides ke peeche) ---------- */
.dynamic-slider-fx{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.dynamic-slider-fx .fx-glow{
  position:absolute;border-radius:50%;will-change:transform;
}
.dynamic-slider-fx .fx-glow-a{
  width:560px;height:560px;left:-9%;top:-34%;
  background:radial-gradient(circle,rgba(255,255,255,.70) 0%,rgba(255,255,255,0) 66%);
  animation:gsGlowA 14s ease-in-out infinite alternate;
}
.dynamic-slider-fx .fx-glow-b{
  width:620px;height:620px;right:-8%;bottom:-42%;
  background:radial-gradient(circle,rgba(230,198,108,.50) 0%,rgba(230,198,108,0) 66%);
  animation:gsGlowB 17s ease-in-out infinite alternate;
}

/* Floating herbal leaves */
.dynamic-slider-fx .fx-leaf{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,#9bd684 0%,#3f8a57 100%);
  opacity:.30;rotate:var(--r);
  animation:gsLeaf var(--d,10s) ease-in-out var(--t,0s) infinite alternate;
  will-change:transform;
}
.dynamic-slider-fx .fx-leaf::after{
  content:"";position:absolute;left:50%;top:50%;width:135%;height:1px;
  background:rgba(255,255,255,.55);transform:translate(-50%,-50%) rotate(45deg);
}

/* Gold sparkles */
.dynamic-slider-fx .fx-spark{
  position:absolute;left:var(--x);top:var(--y);
  width:7px;height:7px;border-radius:50%;
  background:#e6c66c;box-shadow:0 0 10px 3px rgba(230,198,108,.65);
  opacity:0;animation:gsSpark 3.6s ease-in-out var(--t,0s) infinite;
}

@keyframes gsGlowA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(120px,50px,0) scale(1.18)}
}
@keyframes gsGlowB{
  from{transform:translate3d(0,0,0) scale(1.05)}
  to{transform:translate3d(-130px,-40px,0) scale(.92)}
}
@keyframes gsLeaf{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(16px,-20px,0) rotate(14deg)}
  100%{transform:translate3d(-12px,-34px,0) rotate(-12deg)}
}
@keyframes gsSpark{
  0%,100%{opacity:0;transform:scale(.3)}
  50%{opacity:1;transform:scale(1.1)}
}

/* ---------- Product ke peeche halo: breathing + gold ripple ---------- */
.hero-slider-dynamic .dynamic-slide.active .dynamic-slide-media::before{
  animation:gsHalo 6s ease-in-out infinite,gsRipple 3.4s ease-out infinite;
}
@keyframes gsHalo{
  0%,100%{scale:1}
  50%{scale:1.07}
}
@keyframes gsRipple{
  0%{box-shadow:0 18px 45px rgba(36,84,59,.16),0 0 0 0 rgba(201,163,93,.38)}
  100%{box-shadow:0 18px 45px rgba(36,84,59,.16),0 0 0 46px rgba(201,163,93,0)}
}

/* ---------- Progress bar: chalta hua gradient ---------- */
.dynamic-slider-progress span{
  background:linear-gradient(90deg,#20a94b,#e6c66c,#20a94b);
  background-size:200% 100%;
  animation:gsBar 2.4s linear infinite;
}
@keyframes gsBar{from{background-position:0 0}to{background-position:-200% 0}}

/* ---------- Discount badge pulse ---------- */
.hero-slider-dynamic .dynamic-slide.active .dynamic-discount{
  display:inline-block;animation:gsPulse 1.9s ease-in-out 1.3s infinite;
}
@keyframes gsPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* ---------- Badge par shine sweep ---------- */
.hero-slider-dynamic .dynamic-badge{position:relative;overflow:hidden}
.hero-slider-dynamic .dynamic-badge::after{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:gsBadgeShine 4s ease-in-out 1s infinite;
}
@keyframes gsBadgeShine{0%,55%{left:-70%}85%,100%{left:140%}}

/* ---------- Mobile: halka rakho ---------- */
@media(max-width:800px){
  .dynamic-slider-fx .fx-glow-a{width:320px;height:320px}
  .dynamic-slider-fx .fx-glow-b{width:360px;height:360px}
  .dynamic-slider-fx .fx-hide-m{display:none}
}

/* ---------- Jinko motion pasand nahi (OS setting) ---------- */
@media(prefers-reduced-motion:reduce){
  .dynamic-slider-fx,
  .dynamic-slider-fx *,
  .hero-slider-dynamic .dynamic-slide-media::before,
  .hero-slider-dynamic .dynamic-badge::after,
  .dynamic-slider-progress span{animation:none!important}
  .dynamic-slider-fx .fx-spark{opacity:.6}
}

/* Final first-slide presentation: rectangular premium showcase, never circular. */
.hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media{
  border-radius:36px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#f7fbf3 0%,#eef5e7 58%,#e7eedc 100%)!important;
  border:1px solid rgba(201,163,93,.42)!important;
  box-shadow:0 22px 55px rgba(36,84,59,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media::before{
  display:block!important;
  width:auto!important;height:34%!important;
  inset:auto 12% 12% 12%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse,rgba(36,84,59,.16),transparent 68%)!important;
  box-shadow:none!important;
  transform:none!important;
}
.hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media img{
  width:94%!important;height:94%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;border-radius:28px!important;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.16))!important;
}
@media(max-width:800px){
 .hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media{border-radius:26px!important}
 .hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media img{width:94%!important;height:94%!important}
}
@media(max-width:480px){.hero-slider-dynamic .dynamic-slide:first-child .dynamic-slide-media{border-radius:22px!important}}


/* ===== FINAL: SAME VISUAL STRUCTURE FOR SLIDES 1–3 =====
   Keep the existing layout/animations; only add a subtle herbal backdrop. */
.hero-slider-dynamic{
  background:
    linear-gradient(90deg,rgba(243,249,235,.92),rgba(223,238,211,.84)),
    url("ayurvedic-wellness.jpg") center/cover no-repeat !important;
}
.hero-slider-dynamic::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.55),transparent 32%),
    radial-gradient(circle at 88% 78%,rgba(92,135,72,.16),transparent 34%);
}
.hero-slider-dynamic .dynamic-slides{position:relative;z-index:1;}
.hero-slider-dynamic .dynamic-slide{
  background:transparent !important;
}
.hero-slider-dynamic .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide-content{
  position:relative;
  z-index:2;
}
.hero-slider-dynamic .dynamic-slide-media img{
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
}


/* ===== GEO HERB: 3 matching editable slider slots =====
   Source product image: 1056 x 1008 px (aspect ratio ~1.048:1).
   The colorful herbal backdrop follows the same image proportion so the
   product never sits inside an unrelated white box. */
.hero-slider-dynamic .dynamic-slide-media{
  aspect-ratio:1056 / 1008!important;
  height:auto!important;
  max-height:440px!important;
  min-height:0!important;
  border-radius:30px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,239,176,.72) 0,rgba(255,239,176,0) 30%),
    radial-gradient(circle at 82% 72%,rgba(117,184,113,.48) 0,rgba(117,184,113,0) 36%),
    radial-gradient(circle at 52% 48%,rgba(236,249,208,.88) 0,rgba(236,249,208,.12) 58%),
    linear-gradient(135deg,#e8f4cf 0%,#c9e6b8 48%,#9fce9d 100%)!important;
  border:1px solid rgba(77,126,68,.22)!important;
  box-shadow:0 20px 48px rgba(47,91,48,.16),inset 0 1px 0 rgba(255,255,255,.75)!important;
}
.hero-slider-dynamic .dynamic-slide-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 82%,rgba(52,91,43,.14),transparent 34%),
    linear-gradient(115deg,rgba(255,255,255,.20),transparent 42%);
}
.hero-slider-dynamic .dynamic-slide-media img{
  position:relative;z-index:1;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
  padding:4%!important;box-sizing:border-box!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.15))!important;
}
/* Same presentation for all three slides; no special first-slide styling. */
.hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media{
  border-radius:30px!important;
}
@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide-media{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1056 / 1008!important;
    max-height:none!important;
    border-radius:24px!important;
  }
  .hero-slider-dynamic .dynamic-slide-media img{padding:3%!important}
}

/* ===== FINAL: 3 HERBAL PRODUCT SLIDES ===== */
.hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media,
.hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media{
  width:100%!important;
  height:440px!important;
  max-width:100%!important;
  aspect-ratio:1056/1008!important;
  border-radius:30px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#e9f6d7 0%,#c8e6bd 50%,#dfe9a9 100%)!important;
  border:1px solid rgba(65,118,64,.24)!important;
  box-shadow:0 20px 48px rgba(47,91,48,.16)!important;
}
.hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media img,
.hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media img,
.hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  filter:none!important;
  background:transparent!important;
}
.hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media::before,
.hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media::before,
.hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media::before{
  display:none!important;
}
.hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media::after,
.hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media::after,
.hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%,rgba(48,104,56,.08))!important;
}
@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media,
  .hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media,
  .hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media{
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:1056/1008!important;border-radius:24px!important;
  }
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media img,
  .hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media img,
  .hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media img{
    width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center center!important;
    padding:0!important;background:transparent!important;
  }
}

/* FINAL HOMEPAGE 3-SLIDE OVERRIDE: all three slides occupy the same track cell. */
.hero-slider-dynamic .dynamic-slides{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:hidden!important;position:relative!important}
.hero-slider-dynamic .dynamic-slides .dynamic-slide{grid-area:1/1!important;display:grid!important;visibility:visible;min-width:0!important;will-change:transform;animation:none!important}
.hero-slider-dynamic .dynamic-slides .dynamic-slide[aria-hidden="true"]{pointer-events:none}

/* MOBILE FIX: Slider 1 product must stay completely above the text card.
   The source artwork has product jars extending into its lower portion; the
   old full-width contain let the lower jars sit behind .dynamic-slide-content. */
@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media img{
    width:90%!important;
    height:100%!important;
    max-width:90%!important;
    object-fit:contain!important;
    object-position:center top!important;
    margin:0 auto!important;
  }
}
@media(max-width:480px){
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media img{
    width:90%!important;
    max-width:90%!important;
    object-position:center top!important;
  }
}

/* ===== FINAL IMAGE FIT FIX =====
   Product artwork must stay completely visible inside its slider box.
   The box follows the artwork ratio so desktop and mobile never crop it. */
.hero-slider-dynamic .dynamic-slide-media{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1254 / 997!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
.hero-slider-dynamic .dynamic-slide-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  filter:none!important;
}
.hero-slider-dynamic .dynamic-slide-content{
  min-width:0!important;
  box-sizing:border-box!important;
}

@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding:12px 12px 58px!important;
    gap:10px!important;
  }
  .hero-slider-dynamic .dynamic-slide-media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1254 / 997!important;
    overflow:hidden!important;
  }
  .hero-slider-dynamic .dynamic-slide-media img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}

@media(max-width:480px){
  .hero-slider-dynamic .dynamic-slide{
    padding:8px 8px 54px!important;
    gap:8px!important;
  }
  .hero-slider-dynamic .dynamic-slide-media{
    width:100%!important;
    aspect-ratio:1254 / 997!important;
  }
}

/* ===== MOBILE FINAL FIX: KEEP PRODUCT IMAGE BOX AT THE ARTWORK RATIO =====
   Prevent grid stretching/parallax from pushing the product artwork upward.
   The banner artwork is 1254x997, so the media box keeps the same ratio. */
@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide-media{
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1254 / 997!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .hero-slider-dynamic .dynamic-slide-media img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    padding:0!important;
    margin:0!important;
    transform:none!important;
  }
  .hero-slider-dynamic .dynamic-slide-content{
    align-self:start!important;
  }
}
@media(max-width:480px){
  .hero-slider-dynamic .dynamic-slide-media{
    aspect-ratio:1254 / 997!important;
    transform:none!important;
  }
}

/* ===== MOBILE FINAL FIX: image stays INSIDE the slider box =====
   Do not force a fixed height or 100% image height. The media box now
   follows the natural aspect ratio of the actual uploaded image. */
.hero-slider-dynamic .dynamic-slide-media{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
}
.hero-slider-dynamic .dynamic-slide-media img{
  display:block!important;
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:inherit!important;
  background:transparent!important;
  filter:none!important;
  box-sizing:border-box!important;
}
@media(max-width:800px){
  .hero-slider-dynamic .dynamic-slide-media,
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media,
  .hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media,
  .hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:block!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  .hero-slider-dynamic .dynamic-slide-media img,
  .hero-slider-dynamic .dynamic-slide:nth-child(1) .dynamic-slide-media img,
  .hero-slider-dynamic .dynamic-slide:nth-child(2) .dynamic-slide-media img,
  .hero-slider-dynamic .dynamic-slide:nth-child(3) .dynamic-slide-media img{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    padding:0!important;
    margin:0!important;
  }
}

/* =========================================================
   FINAL: IMAGE + HEADING = ONE SINGLE SLIDER CARD
   - Dono (image aur text card) same top/bottom par align hote hain
   - Beech ka gap hata diya, ek hi border/shadow/rounded card
   - Image kabhi crop nahi hoti (height image ke ratio se aati hai,
     text card us height tak stretch ho jata hai)
   ========================================================= */
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide{
  align-items:stretch!important;          /* image aur text ek hi height */
  align-self:center!important;            /* choti slide poore slider mein beech mein */
  height:auto!important;                  /* slide apni natural height le, track ki nahi */
  min-height:0!important;
  column-gap:0!important;
  row-gap:0!important;
  gap:0!important;
  padding-top:34px!important;
  padding-bottom:50px!important;
}
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media,
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-content{
  align-self:stretch!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;            /* purane fixed ratio rules ko hatao */
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(201,163,93,.38)!important;
  box-shadow:0 18px 44px rgba(36,84,59,.14)!important;
}
/* Image: left half of the card */
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media{
  border-radius:28px 0 0 28px!important;
  border-right:0!important;
  background:#fff!important;
}
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media img{
  border-radius:0!important;
  height:auto!important;                  /* image apne ratio mein, crop/stretch nahi */
  max-height:none!important;
  object-fit:contain!important;
}
/* Heading/text: right half of the same card */
#home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-content{
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  border-radius:0 28px 28px 0!important;
  border-left:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}

/* Desktop: heading ek line mein rahe taaki card image ki height ke barabar rahe */
@media(min-width:801px){
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-content h1{
    font-size:clamp(32px,3.3vw,48px)!important;
    white-space:nowrap!important;
    max-width:100%!important;
  }
}

/* Desktop: image poori dikhe (crop nahi), bachi jagah card ke background se bhar jaye */
@media(min-width:801px){
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media{
    display:flex!important;
    background:linear-gradient(145deg,#fffef8,#eef6e8)!important;
  }
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media img{
    height:100%!important;
    object-fit:contain!important;           /* poori image dikhe, kuch kate nahi */
    object-position:center!important;
  }
}

@media(max-width:800px){
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide{
    align-items:start!important;
    align-self:start!important;
    padding:12px 12px 54px!important;
  }
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-media{
    border-radius:22px 22px 0 0!important;
    border-right:1px solid rgba(201,163,93,.38)!important;
    border-bottom:0!important;
  }
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-content{
    border-radius:0 0 22px 22px!important;
    border-left:1px solid rgba(201,163,93,.38)!important;
    border-top:0!important;
    align-items:center!important;
    text-align:center!important;
  }
}

/* =========================================================
   ABOUT SECTION IMAGE: poori image dikhe (mobile + desktop), crop nahi
   Image 1536x1024 hai; box ab image ke ratio ke hisaab se height leta hai.
   ========================================================= */
.about .about-art{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:auto!important;
  align-self:center;
}
.about .about-art .about-geo-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1536 / 1024;
  object-fit:contain!important;
  object-position:center!important;
}

/* Lambe heading (jaise "Shan-e-Mard Dhatuvardhak Majoon") kategi nahi – 2 line me aa jayegi */
@media(min-width:801px){
  #home.hero-slider-dynamic .dynamic-slides .dynamic-slide .dynamic-slide-content h1.long-title{
    white-space:normal!important;
    font-size:clamp(28px,2.8vw,40px)!important;
    line-height:1.15!important;
  }
}

/* Neeche wali loading/progress bar hata di */
.dynamic-slider-progress{display:none!important}