/* ================================================
  PRODUCT PAGE STYLES — product.css
  ================================================ */

/* FONTS */
@font-face {
  font-family: "Allomira";
  src: url("../fonts/Allomira-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Allomira";
  src: url("../fonts/Allomira-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Allomira Black";
  src: url("../fonts/Allomira-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Allomira Light";
  src: url("../fonts/Allomira-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Allomira";
  src: url("../fonts/Allomira-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Block overflow at the very root so nothing can ever cause horizontal scroll */

* {

  box-sizing: border-box;
}

html,
body {

  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

.how-made-box {

  margin-top: -7% !important;
}

.key-benefits-box {

  margin-top: 20% !important;
}

/* ============================================================
   RESPONSIVE FONT SIZES MOVED TO: fonts-common/fonts-products.css
   ============================================================
   Specific Font Scaling for High-Resolution Displays has been
   consolidated into the fonts-common folder for better maintenance.
   ============================================================ */

/* ============================================================
   ANIMATION SYSTEM
   ============================================================ */
.animate {

  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate-scale {

  transform: scale(0.9);
}

.animate-left {

  transform: translateX(-200px);
}

.animate-right {

  transform: translateX(200px);
}

.animate-up {

  transform: translateY(100px);
}

.animate.show {

  opacity: 1;
  transform: translate(0) scale(1);
}

/* Staggered Delays */
.animate-delay-1 {

  transition-delay: 0.15s !important;
}

.animate-delay-2 {

  transition-delay: 0.3s !important;
}

.animate-delay-3 {

  transition-delay: 0.45s !important;
}

.animate-delay-4 {

  transition-delay: 0.6s !important;
}

.animate-delay-5 {

  transition-delay: 0.75s !important;
}

.animate-delay-6 {

  transition-delay: 0.9s !important;
}

.animate-delay-7 {

  transition-delay: 1.05s !important;
}

.animate-delay-8 {

  transition-delay: 1.2s !important;
}

.product-page {

  padding-top: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ================================================
  1. HERO BLUE SECTION
  ================================================ */

/* ─────────────────────────────
   HERO BLUE SECTION
───────────────────────────── */

/* ─────────────────────────────
   HERO BLUE SECTION — New Image Background
───────────────────────────── */

.hero-blue-section {

  position: relative;
  width: 100%;
  min-height: auto;
  background-color: #0a4d86;
  background-image: url("/static/images/products/products_bg_blue.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Product image wrapper */
.hero-products-img-wrapper {

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  margin-top: 110px;
}

.hero-products-img {

  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hero-content {

  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  margin-top: 0 !important;
}

/* Global Fix - Remove any left gap */
.product-page,
.hero-blue-section,
.hero-content,
.hero-text-inner {

  overflow-x: hidden;
  overflow-y: hidden;
}

/* ─────────────────────────────
    HERO PRODUCT CLUSTER (Responsive)
  ───────────────────────────── */
.hero-product-cluster {

  position: relative;
  width: 100%;
  height: clamp(400px, 50vw, 650px);
  /* Increased height for larger images */
  /* Responsive height */
  margin: 0 auto 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cluster-p {

  position: absolute;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.28));
  transition: all 0.3s ease;
}

/* Fluid widths based on viewport */
.cluster-p1 {

  width: clamp(120px, 15vw, 220px);
  left: 25%;
  bottom: 20%;
  z-index: 6;
}

.cluster-p2 {

  width: clamp(100px, 12vw, 180px);
  left: 55%;
  bottom: 18%;
  z-index: 5;
}

.cluster-p3 {

  width: clamp(80px, 10vw, 140px);
  left: 0%;
  bottom: 16%;
  z-index: 2;
}

.cluster-p4 {

  width: clamp(90px, 11vw, 160px);
  left: 10%;
  bottom: 6%;
  z-index: 8;
}

.cluster-p5 {

  width: clamp(100px, 12vw, 180px);
  left: 35%;
  bottom: 7%;
  z-index: 9;
}

.cluster-p6 {

  width: clamp(70px, 8vw, 120px);
  left: 75%;
  bottom: 10%;
  z-index: 3;
}

.hero-text {

  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-text p {

  line-height: 1.6;
  color: #ffffff;
  margin-bottom: 5px;
}

.highlight-yellow {

  color: #f1c22b;
  font-weight: 700;
}

.hero-text-inner {

  padding: 0 50px 30px;
  margin-top: -70px;
  /* Adjusted to add a little gap below the images */
  width: 100%;
  position: relative;
  z-index: 5;
}

.foundation-line {

  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 5px;
  color: #ffffff;
}

.foundation-yellow {

  font-weight: 700;
  color: #f1c22b;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

/* Global Image and Content Fixes for Responsiveness */
img {

  max-width: 100%;
  height: auto;
  display: block;
}

/* Heading Scaling */
h2 {

  max-width: 100%;
  word-wrap: break-word;
}

/* ================================================
  2. PRODUCT CATEGORY STRIP
  ================================================ */
/* ============================================================
   PRODUCT CATEGORY STRIP - RESPONSIVE SCROLLABLE VIEW
   ============================================================ */

.category-strip-wrapper {

  position: relative;
  background: #fdf3df;
  margin-top: -1px;
  /* Close any sub-pixel gap */
  margin-bottom: -1px;
  /* Close any sub-pixel gap */
  height: 380px;
  /* Good for desktop view */
  /* FIX: remove fixed height */

  /* controls vertical spacing cleanly */

}

.category-scroll-btn {

  display: flex;
  /* visible when width is small, we can hide on desktop */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  color: #005193;
}

.category-scroll-btn:active {

  background: #f1c22b;
  color: #fff;
}

.category-scroll-btn.prev {

  left: 8px;
}

.category-scroll-btn.next {

  right: 8px;
}

.product-category-strip {

  display: flex;
  align-items: stretch;
  background: transparent;
  padding: 0;
  gap: 0;
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0;
  box-shadow: none;

  /* MOBILE & TABLET SETTINGS: Enable Horizontal Scroll */
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  /* Prevent items from stacking */
  justify-content: flex-start;
  /* Align to left to start scroll */
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll for iOS */
  scroll-snap-type: x mandatory;
  /* Makes items "snap" into place */
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */

}

/* Hide scrollbar for Chrome, Safari, and Opera */
.product-category-strip::-webkit-scrollbar {

  display: none;
}

.category-item {

  /* MOBILE SETTINGS: Fixed width so they overflow and become scrollable */
  flex: 0 0 160px;
  /* Adjust this width based on your preference */
  scroll-snap-align: center;
  /* Snap to center of screen when scrolling */

  height: 215px;
  /* Fixed height — prevents yellow card from growing with multi-line labels */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 10px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  text-align: center;
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid transparent;
  background: transparent;
}

/* DESKTOP VIEW: Override back to your original layout */
@media (min-width: 992px) {

  .category-scroll-btn {

    display: none !important;
  }

  .product-category-strip {

    justify-content: center;
    /* Center the items like your desktop look */
    overflow-x: hidden;
    /* No scrolling needed on desktop */

  }

  .category-item {

    flex: 1;
    /* Distribute evenly */
    max-width: 180px;
    /* Reduced from 220px to shift alignment rightwards */
    scroll-snap-align: none;
  }
}

/* Rest of your styling remains the same */
.category-item:hover,
.category-item.active {

  background: #e8bb2e;
  border-left-color: rgba(0, 0, 0, 0.08);
}

/* Suppress transition on clones so silent jump reposition never flashes */
.category-item.clone {

  transition: none !important;
}

/* Only apply on desktop where there are no clones */
@media (min-width: 992px) {

  .category-item:last-child {

    border-right: none;
  }
}

/* On mobile/tablet clones are present — keep consistent border on all items */
@media (max-width: 991px) {

  .category-item:last-child {

    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.category-item span {

  /* Slightly smaller for mobile, keeps layout clean */
  font-weight: 400;
  color: #17324d;
  margin-top: 5px;
  transition: font-weight 0.3s ease;
  min-height: 48px;
  /* Reserve space for up to 2 lines so height is consistent */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

@media (min-width: 992px) {

  .category-item span {

    /* Original size for desktop */

  }
}

.category-item:hover span,
.category-item.active span {

  font-weight: 700;
}

.cat-img-box {

  width: 100px;
  /* Scaled for mobile */
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 5px;
}

@media (min-width: 992px) {

  .cat-img-box {

    width: 110px;
    /* Reduced to match smaller item width */
    height: 110px;
  }
}

.cat-img-box img {

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Custom Product Image Scale (Milk & Curd BIG, Ghee, Yogurt & Paneer SMALL) */
.category-item[data-product="milk"] .cat-img-box img,
.category-item[data-product="curd"] .cat-img-box img {

  transform: scale(1.15);
}

.category-item[data-product="ghee"] .cat-img-box img,
.category-item[data-product="yogurt"] .cat-img-box img,
.category-item[data-product="paneer"] .cat-img-box img {

  transform: scale(0.85);
}

/* ================================================
  3 & 4. A2 MILK OVERLAP LAYOUT
  ================================================ */
.a2-hero-blue {

  position: relative;
  background: url("../images/products/hero_background.png") no-repeat center bottom;
  background-size: cover;
  /* Full-width background banner — use min-height so mobile overrides work */
  min-height: 750px;
  height: auto;
  color: #ffffff;
  margin-top: -165px;
  overflow-x: hidden;
  z-index: 1;
}

/* ── Desktop only: shrink the blue hero background height ── */
@media (min-width: 993px) {

  .a2-hero-blue {

    min-height: 550px !important;
    background-position: center bottom !important;
  }
}

.hero-flower-decor {

  position: absolute;
  top: 50%;
  left: -2px;
  /* Slight over-extension to cover any sub-pixel gaps */
  width: 60%;
  height: 350px;
  /* background: url("/static/images/home/pattern.png") no-repeat left center; */
  background-size: contain;
  opacity: 0.7;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

/* text side */
.hero-text-col {

  position: relative;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  /* Align the text block to the right side */

}

.hero-content-box {

  max-width: 500px;
  margin-top: 120px;
  /* Decreased space from top */
  margin-left: 200px;
  /* Moved slightly more to the right */
  padding-right: 20px;
}

.hero-title {

  margin-bottom: 15px;
}

.hero-title-img {

  width: auto !important;
  height: 110px !important;
  display: block;
  object-fit: contain;
  margin-top: -15px !important;
  margin-bottom: 20px !important;
}

.hero-desc {

  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 0;
  font-weight: 500;
}

.a2-split-details {

  position: relative;
  z-index: 2;
  background: #fff6e0;
}

/* side-beige pulls up to overlap behind the blue curve on desktop only */
.side-beige {

  background: #fff6e0;
  position: relative;
  margin-top: -70px;
  /* pulls yellow section upward */
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 150px;
}

.side-white {

  background: #ffffff;
  position: relative;
  padding-top: 25px;
}

.side-content {

  padding: 60px 0;
  width: 100%;
  max-width: 500px;
}

/* Custom spacing for desktop */
@media (min-width: 992px) {

  .mt-8 {

    margin-top: 80px !important;
  }
}

.carton-overlap-wrapper {

  position: absolute;
  top: -358px;
  /* slightly lower for better fit */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  z-index: 20;
  max-width: 100%;
  overflow: visible;
}

.overlap-pack-1l {

  width: 200px;
  /* smaller */
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));
}

.overlap-pack-500ml {

  width: 200px;
  /* smaller */
  height: auto;
  margin-left: -46px;
  margin-bottom: -23px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));
}

/* ================================================
   PRODUCT-SPECIFIC SPLIT IMAGE SIZING
   (milk is the reference — 200px each)
   ================================================ */

/* A2 Bilona Ghee — round jars, make larger to fill space */
#splitProductImages[data-product="ghee"] #splitImg1 {

  width: 270px !important;
}

#splitProductImages[data-product="ghee"] #splitImg2 {

  width: 210px !important;
  margin-left: -70px !important;
  margin-bottom: -20px !important;
}

/* Desktop: reposition ghee wrapper so jars cross the blue/beige boundary */
@media (min-width: 993px) {

  #splitProductImages[data-product="ghee"] {

    top: -140px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 270px !important;
    margin-left: 20px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 220px !important;
    margin-left: -50px !important;
    margin-bottom: 0px !important;
  }
}

/* A2 Probiotic Curd — tubs, similar scale to milk */
/* A2 Probiotic Curd — 3 tubs, large cluster */
#splitProductImages[data-product="curd"] #splitImg1 {

  width: 260px !important;
}

#splitProductImages[data-product="curd"] #splitImg2 {

  width: 200px !important;
  margin-left: -90px !important;
  margin-bottom: -10px !important;
  position: relative !important;
  z-index: 10 !important;
}

#splitProductImages[data-product="curd"] #splitImg3 {

  width: 250px !important;
  margin-left: -90px !important;
  margin-bottom: 50px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Desktop: reposition curd cluster to cross the boundary */
@media (min-width: 993px) {

  #splitProductImages[data-product="curd"] {

    top: -150px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 260px !important;
    margin-left: 40px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 180px !important;
    margin-left: -110px !important;
    margin-bottom: -20px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 250px !important;
    margin-left: -95px !important;
    margin-bottom: 50px !important;
    position: relative !important;
    z-index: 5 !important;
  }
}

/* A2 Greek Yogurt — 3 cups, large cluster */
#splitProductImages[data-product="yogurt"] #splitImg1 {

  width: 250px !important;
}

#splitProductImages[data-product="yogurt"] #splitImg2 {

  width: 230px !important;
  margin-left: -40px !important;
}

#splitProductImages[data-product="yogurt"] #splitImg3 {

  width: 200px !important;
  margin-left: -290px !important;
  margin-bottom: -30px !important;
  z-index: 50 !important;
}

/* Desktop: reposition yogurt cluster to cross the boundary */
@media (min-width: 993px) {

  #splitProductImages[data-product="yogurt"] {

    top: -160px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 220px !important;
    margin-right: 0 !important;
    margin-top: -10% !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 220px !important;
    margin-left: -10px !important;
    margin-top: 2% !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 220px !important;
    margin-left: -320px !important;
    margin-bottom: -130px !important;
    z-index: 60 !important;
  }
}

/* A2 Paneer — 1 large pack centered */
#splitProductImages[data-product="paneer"] #splitImg1 {

  width: 250px !important;
}

#splitProductImages[data-product="paneer"] #splitImg2 {

  display: none !important;
}

/* Desktop: reposition paneer pack to cross the boundary */
@media (min-width: 993px) {

  #splitProductImages[data-product="paneer"] {

    top: -140px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
  }

  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 250px !important;
  }
}

/* ============================================================
   MOBILE: REDUCE PRODUCT IMAGE SIZES (ONLY FOR MOBILE)
   ============================================================ */
@media (max-width: 576px) {

  .carton-overlap-wrapper {

    top: 0px !important;
    /* Position images better within the blue section on mobile */

  }

  /* Milk - Scale down for mobile */
  #splitProductImages[data-product="milk"] #splitImg1 {

    width: 120px !important;
  }

  #splitProductImages[data-product="milk"] #splitImg2 {

    width: 120px !important;
    margin-left: -30px !important;
    margin-bottom: -15px !important;
  }

  /* Ghee - Scale down for mobile */
  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 130px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 100px !important;
    margin-left: -35px !important;
    margin-bottom: -10px !important;
  }

  /* Curd - Scale down for mobile */
  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 140px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 110px !important;
    margin-left: -50px !important;
    margin-bottom: -10px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 100px !important;
    margin-left: -40px !important;
    margin-bottom: 5px !important;
  }

  /* Yogurt - Scale down for mobile */
  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 140px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 110px !important;
    margin-left: -50px !important;
    margin-bottom: -10px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 90px !important;
    margin-left: -40px !important;
    margin-bottom: 5px !important;
  }

  /* Paneer - Scale down for mobile */
  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 160px !important;
  }
}

.left-padding {

  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right-padding {

  margin-right: auto;
  padding-left: 80px;
  /* Reduced to provide more space for text to fit on one line */

}

.why-heading-box {

  margin-top: 120px;
  margin-bottom: 20px;
  /* Further reduced bottom gap */
  display: flex;
  justify-content: center;
  width: 100%;
}

.heading-inner {

  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
}

.sub-label {

  font-weight: 400;
  display: block;
  margin-bottom: 8px;
  color: #000000;
  line-height: 1.2;
  margin-left: 0 !important;
}

.side-title {

  font-weight: 900;
  display: block;
  color: #005495;
  margin: 0;
  line-height: 1;
  letter-spacing: -1px;
}

.side-desc {

  font-weight: 400;
  line-height: 1.7;
  color: #2f2f2f;
  max-width: none;
}

.color-blue {

  font-weight: 900;
  color: #005495;
  margin-bottom: 20px;
  margin-left: 0;
}

.blue-icon-circle {

  width: 110px;
  height: 110px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
}

.blue-icon-circle img {

  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-feature-list {

  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.icon-feature-list li {

  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* Minimum vertical spacing */

}

.feature-text {

  margin-left: 30px;
  /* Clear horizontal gap as per design */

}

.feature-text div {

  display: block;
  font-weight: 600;
  line-height: 1.4;
  color: #17324d;
}

.benefits-dots-side-title li {

  font-weight: 400;
  line-height: 2;
  color: #2f2f2f;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.benefits-dots-side-title li::before {

  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  /* Align with the first line of text */
  width: 12px;
  height: 12px;
  border: 2px solid #e8bb2e;
  /* Golden/yellow border */
  border-radius: 50%;
  background: transparent;
}

/* ================================================
  5. DELIVERY & SUBSCRIPTION
  ================================================ */
.delivery-section {

  position: relative;
  background: url("../images/products/creambg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  padding: 120px 0 0;
  overflow: hidden;
  margin-bottom: 0 !important;
}

.delivery-content {

  position: relative;
  z-index: 2;
}

.delivery-text {

  padding-left: 20px;
  /* More left margin for balanced positioning */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.delivery-text h2 {

  /* Reduced from 69px to match reference */
  font-weight: 900;
  color: var(--blue-deep, #014b90);
  margin-bottom: 15px;
  /* Tighter spacing below heading */
  text-align: left;
}

.delivery-text p {

  font-weight: 400;
  /* Reduced from 27px for better proportions */
  line-height: 1.6;
  max-width: 440px;
  /* Narrower width for shorter line length */
  margin-bottom: 40px;
  /* Larger gap before the button */
  color: #2f2f2f;
  text-align: left;
}

.delivery-image {

  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 40px;
}

.delivery-bg-pattern {

  position: absolute;
  bottom: -20px;
  right: 0;
  width: 420px;
  height: 220px;
  background: url("/static/images/home/pattern.png") no-repeat center;
  background-size: contain;
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}

.delivery-photo {

  position: relative;
  z-index: 2;
  max-width: 360px;
  margin-right: 120px;
}

.btn-blue-subscribe {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 999px;
  background-color: #e8bb2e !important;
  /* Force background color to golden yellow initially */
  color: #17324d !important;
  font-weight: 600;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-blue-subscribe:hover,
.btn-blue-subscribe:active,
.btn-blue-subscribe:focus {

  transform: translateY(-3px);
  background-color: #014b90 !important;
  /* Change background color to blue on hover/click */
  color: #ffffff !important;
  /* Change text color to white on hover/click */

}

.bottom-wave-white-app {

  position: relative;
  z-index: 1;
  margin-top: 40px;
  /* reduce from 80px */
  margin-bottom: 0;
  height: 160px;
  overflow: hidden;
  line-height: 0;
  display: block;
}

.bottom-wave-white-app svg {

  display: block;
  width: 100%;
  height: 160px;
}

/* ================================================
  6. APP PROMO SECTION
  ================================================ */
/* ================================
APP PROMO RESPONSIVE FIX
Only replace your existing app section CSS with this
================================ */

/* SECTION */
.app-promo-section {

  background: white;
  margin-top: 60px !important;
  padding-top: 70px !important;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* MAIN CONTENT */
.app-promo-content {

  margin-top: -1800px;
  position: relative;
  z-index: 5;
  align-items: center;
}

/* PHONE WRAPPER */
.app-phones-wrapper {

  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 5;
}

/* PHONES CONTAINER */
.phones-container {

  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

/* LEFT PHONE */
.phone-img-left {

  width: 320px;
  max-width: 42vw;
  margin-right: -110px;
  margin-left: 20px;
  position: relative;
  z-index: 1;
  transform: translateY(150px);
}

/* RIGHT PHONE */
.phone-img-right {

  width: 360px;
  max-width: 44vw;
  position: relative;
  z-index: 2;
  transform: translateY(130px);
}

/* PHONE IMAGE */
.phone-img-v {

  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}

/* TEXT */
.app-promo-text {

  padding-left: 40px;
}

.app-sub {

  color: #3a4d5e;
  font-weight: 300;
  margin-bottom: 5px;
}

.app-promo-text h2 {

  font-weight: 900;
  color: #045da8;
  line-height: 1.1;
  margin-bottom: 15px;
}

.app-desc {

  font-weight: 400;
  line-height: 1.6;
  color: #3a4d5e;
}

/* =====================================
   LAPTOP (≤ 1200px)
   ===================================== */
@media (max-width: 1200px) {

  .app-promo-content {

    margin-top: -140px;
  }

  .phone-img-left {

    width: 280px;
    margin-right: -90px;
    transform: translateY(100px);
  }

  .phone-img-right {

    width: 320px;
    transform: translateY(70px);
  }
}

/* =====================================
   TABLET (≤ 992px)
   ===================================== */
@media (max-width: 992px) {

  .app-promo-section {

    padding-top: 40px !important;
  }

  .app-promo-content {

    margin-top: 0;
    text-align: center;
  }

  .app-promo-text {

    padding-left: 0;
    margin-top: 40px;
    text-align: center;
  }

  .phones-container {

    justify-content: center;
  }

  .phone-img-left {

    width: 220px;
    margin-right: -70px;
    margin-left: 0;
    transform: translateY(40px);
  }

  .phone-img-right {

    width: 250px;
    transform: translateY(0);
  }

  .app-promo-text p {

    line-height: 1.6;
  }
}

/* =====================================
   SMALL MOBILE (≤ 480px)
   ===================================== */
@media (max-width: 480px) {

  .hero-blue-section {

    min-height: 520px;
  }

  .foundation-line {

    font-weight: 400 !important;
  }

  .product-category-strip {

    min-height: 200px;
  }

  .category-item {

    flex: 0 0 120px;
    min-width: 120px;
  }

  /* ============================================================
   CORPORATE-LEVEL RESPONSIVE DESIGN (REFINED)
   ============================================================ */

  /* 1. LARGE DESKTOP ADJUSTMENTS (Standard Corporate View) */
  @media (min-width: 1440px) {

    .side-beige {

      padding-left: 380px;
    }

    .carton-overlap-wrapper {

      left: 45%;
    }
  }

  /* 2. LAPTOP & SMALL DESKTOP (≤ 1200px) */
  @media (max-width: 1200px) {

    .side-beige {

      padding-left: 150px;
    }

    .carton-overlap-wrapper {

      left: 35%;
      top: -320px;
    }

    .overlap-pack-1l,
    .overlap-pack-500ml {

      width: 180px;
    }

    .right-padding {

      padding-left: 80px;
    }

    .left-padding {

      padding-right: 80px;
    }
  }

  /* 3. TABLET (≤ 1024px) */
  @media (max-width: 1024px) {

    .a2-hero-blue {

      background-position: center bottom !important;
      background-size: cover !important;
      padding: 20px 0 100px !important;
      /* Reduced top padding */
      min-height: auto !important;
    }

    .hero-blue-section {

      min-height: 55vh;
      /* Adjust for mobile viewports */
      display: flex;
      align-items: flex-end;
      padding-bottom: 20px;
    }

    .hero-text-inner {

      margin-bottom: 40px;
    }

    .foundation-line {

      /* margin-bottom:-40px; */

    }

    .foundation-yellow {

      /* margin-top:120px; */

    }

    .hero-text-col {

      justify-content: center;
      text-align: center;
    }

    .hero-content-box {

      margin-left: 0;
      margin-top: 40px;
      padding: 0 20px;
      text-align: center;
    }

    .hero-title-img {

      margin: 0 auto;
      width: 160px;
    }

    .hero-desc {

      max-width: 600px;
      margin: 0 auto;
    }

    .a2-split-details {

      margin-top: -5px;
      /* Slight overlap to hide sub-pixel gaps */
      background-color: #fff6e0;
      /* Match beige side */

    }

    .side-beige,
    .side-white {

      width: 100% !important;
      padding: 80px 20px !important;
      margin-top: 0 !important;
    }

    .carton-overlap-wrapper {

      position: relative;
      top: 0;
      left: 0;
      margin: -100px auto 40px;
      justify-content: center;
      width: 100%;
    }

    .overlap-pack-1l {

      width: 160px;
    }

    .overlap-pack-500ml {

      width: 160px;
      margin-left: -30px;
    }

    .side-content {

      padding: 40px 0;
      margin: 0 auto;
      text-align: center;
    }

    .why-heading-box {

      margin-top: 0;
      text-align: center;
    }

    .sub-label {

      margin: 0 auto 10px !important;
      text-align: center;
      display: block;
    }

    .side-title {

      margin: 0 auto 30px !important;
      text-align: center;
    }

    .icon-feature-list li {

      justify-content: center;
      text-align: left;
      max-width: 450px;
      margin: 0 auto 30px;
    }

    .feature-text {

      text-align: left;
    }

    .side-desc {

      margin: 0 auto;
      text-align: center;
    }

    .color-blue {

      text-align: center;
      margin: 0 auto 20px;
    }

    .benefits-dots-side-title {

      margin: 0 auto;
      max-width: 450px;
      text-align: left;
    }

    .delivery-section {

      height: auto;
      padding: 80px 0;
    }

    .delivery-photo {

      margin-right: 0;
      max-width: 220px;
    }
  }

  /* 4. MOBILE LANDSCAPE & SMALL TABLETS (≤ 768px) */
  @media (max-width: 768px) {

    .hero-products-img-wrapper {

      margin-top: 160px;
      margin-bottom: -340px;
      /* Collapse more transparent space to close the gap */
      display: block;
      /* Disable flex to prevent flexbox clipping/shifting */

    }

    .hero-products-img {

      width: 250%;
      /* Much larger size */
      max-width: none;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      /* Guarantees perfect centering for overflowing elements */

    }

    .hero-blue-section {

      min-height: 480px;
      padding-bottom: 50px;
    }

    .hero-text-inner {

      margin-top: 0;
      padding-left: 20px;
      padding-right: 20px;
    }

    .foundation-line {

      line-height: 1.6;
    }

    .product-category-strip {

      min-height: 180px;
      justify-content: flex-start;
      overflow-x: auto;
      padding: 0 15px;
      border-top-width: 15px;
      border-bottom-width: 15px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .product-category-strip::-webkit-scrollbar {

      display: none;
    }

    .category-item {

      flex: 0 0 100vw !important;
      width: 100vw !important;
      min-width: 100vw !important;
      max-width: 100vw !important;
      scroll-snap-align: center;
    }

    .cat-img-box {

      width: 80px;
      height: 80px;
    }

    .a2-hero-blue {

      padding-bottom: 200px !important;
      min-height: auto !important;
    }

    .hero-title-img {

      width: 130px;
    }

    .hero-desc {

      line-height: 1.5;
    }

    .side-beige,
    .side-white {

      padding: 60px 20px !important;
    }

    .blue-icon-circle {

      width: 70px;
      height: 70px;
    }

    .delivery-text {

      text-align: center;
      align-items: center;
    }

    .delivery-text h2 {

      text-align: center;
    }

    .delivery-text p {

      text-align: center;
      margin: 0 auto 30px;
    }

    .btn-blue-subscribe {

      align-self: center;
    }

    .delivery-image {

      justify-content: center;
      padding-right: 0;
      margin-top: 40px;
    }

    .delivery-photo {

      margin-right: 0;
    }

    .bottom-wave-white-app {

      height: 100px;
      margin-top: 20px;
    }

    .bottom-wave-white-app svg {

      height: 100px;
    }

    .app-promo-section {

      padding-top: 40px !important;
    }

    .app-phones-wrapper {

      margin-bottom: 30px;
    }
  }

  /* 5. SMALL MOBILE (≤ 480px) */
  @media (max-width: 480px) {

    .hero-blue-section {

      min-height: 520px;
      background-position: center 5%;
    }

    .a2-split-details {

      margin-top: -40px;
      z-index: -1;
    }

    .hero-blue-section {

      min-height: 55vh;
      /* Adjust for mobile viewports */
      display: flex;
      align-items: flex-end;
      padding-bottom: 20px;
    }

    .hero-text-inner {

      margin-bottom: 20px;
    }

    .foundation-line {

      /* margin-bottom:-40px; */

    }

    .foundation-yellow {

      /* margin-top:120px; */

    }

    .product-category-strip {

      min-height: 160px;
      border-top-width: 10px;
      border-bottom-width: 10px;
    }

    .category-item {

      flex: 0 0 100vw !important;
      width: 100vw !important;
      min-width: 100vw !important;
      max-width: 100vw !important;
    }

    .cat-img-box {

      width: 60px;
      height: 60px;
    }

    .category-item span {

      margin-top: 10px;
    }

    .a2-hero-blue {

      padding: 40px 15px 120px !important;
      min-height: auto !important;
    }

    .hero-title-img {

      width: 110px;
    }

    .carton-overlap-wrapper {

      margin-top: -80px;
    }

    .overlap-pack-1l,
    .overlap-pack-500ml {

      width: 130px;
    }

    .icon-feature-list li {

      margin-bottom: 20px;
    }

    .blue-icon-circle {

      width: 60px;
      height: 60px;
    }

    .feature-text {

      margin-left: 15px;
    }

    .phone-img-left {

      width: 140px;
      margin-right: -50px;
    }

    .phone-img-right {

      width: 160px;
    }
  }

  /* 6. EXTRA SMALL MOBILE (≤ 360px) */
  @media (max-width: 360px) {

    .hero-blue-section {

      /* padding: 350px 15px 40px; */
      /* Push text down below the background graphics */
      /* display: block; */
      min-height: 55vh;

      display: flex;

      padding-bottom: 20px;
    }

    .hero-text-inner {

      margin-top: 350px;
      /* Reduced from 500px to match reference height */
      margin-bottom: 40px;
    }

    .foundation-line {

      /* margin-bottom:-40px; */

    }

    .foundation-yellow {

      /* margin-top:120px; */

    }

    .hero-title-img {

      width: 100px;
    }

    .overlap-pack-1l,
    .overlap-pack-500ml {

      width: 110px;
    }
  }

  /* FIX: Ensure no horizontal overflow ever */
  .product-page,
  section,
  .container,
  .row {

    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ============================================================
   RESPONSIVE OVERRIDES (MOBILE & TABLET)
   Does not affect desktop view (993px+)
   ============================================================ */

@media (max-width: 1024px) {

  .category-strip-wrapper {

    height: auto !important;
    /* Fix excessive height on mobile */

  }

  /* 1. Hero Section: Remove fixed height */
  .hero-blue-section {

    min-height: 55vh;
    /* Adjust for mobile viewports */
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
  }

  .hero-text-inner {

    margin-bottom: 30px;
  }

  .foundation-line {

    /* Adjusted for tablet */

  }

  .foundation-yellow {

    /* Adjusted for tablet */

  }

  /* 2. Category Strip: Allow wrapping so icons don't squeeze */

  .category-item {

    flex: 0 0 75%;
    width: 75%;
    min-width: 75%;
    max-width: 75%;
    scroll-snap-align: center;
    border-right: none;
    border-bottom: none;
  }

  /* 3. A2 Hero Blue: Responsive text, anchored background */

  .a2-hero-blue {

    min-height: 350px;
    /* Slightly reduced for better mobile fit */
    background: url("../images/products/blue-background.png") no-repeat center center / cover !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    margin-top: 5% !important;
  }

  .a2-hero-blue::after {

    display: none !important;
  }

  .hero-text-col {

    justify-content: center;
    width: 100%;
  }

  .hero-content-box {

    max-width: 650px;
    margin: 0 auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 20px 30px;
    text-align: center;
    width: 100%;
  }

  .hero-title {

    margin-top: 0;
    margin-bottom: 20px;
  }

  .hero-title-img {

    width: 160px;
    /* Larger title for tablets */
    margin: 0 auto 15px;
  }

  .hero-desc {

    /* Larger text for tablets */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
  }

  /* 4. Split Layout: Stack the Beige and White sections */
  .a2-split-details .row {

    flex-direction: column;
  }

  .side-beige,
  .side-white {

    width: 100%;
    padding: 40px 20px !important;
    margin-top: 0 !important;
    /* Remove the pull-up overlap */
    text-align: center;
  }

  /* Fix the cartons: On mobile, they shouldn't float way above the section */
  .carton-overlap-wrapper {

    position: relative;
    top: 0;
    left: 0;
    justify-content: center;
    margin-bottom: 30px;
    transform: none;
  }

  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 150px;
    /* Scale down for smaller screens */

  }

  /* Content alignment fixes */
  .side-content {

    padding: 20px 0;
    margin: 0 auto;
    max-width: 100%;
  }

  .left-padding,
  .right-padding {

    padding: 0 !important;
  }

  .why-heading-box {

    margin: 0 auto 30px;
  }

  .sub-label {

    margin-right: 0;
    margin-top: 0;
  }

  .side-title {

    margin-left: 0;
  }

  .side-desc {

    margin: 0 auto;
    text-align: center;
  }

  .benefits-dots-side-title {

    margin: 0 auto;
    display: table;
    text-align: left;
  }

  /* Icon list centering */
  .icon-feature-list li {

    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .feature-text {

    margin-left: 0;
    margin-top: 10px;
  }

  /* 5. Delivery Section */
  .delivery-section {

    height: auto;
    padding: 60px 0;
  }

  .delivery-text {

    text-align: center;
    padding: 0 20px;
  }

  .delivery-text h2 {

    text-align: center;
  }

  .delivery-text p {

    text-align: center;
    margin: 0 auto 30px;
  }

  .btn-blue-subscribe {

    align-self: center;
  }

  .delivery-image {

    justify-content: center;
    margin-top: 40px;
    padding-right: 0;
  }

  .delivery-photo {

    margin-right: 0;
  }

  /* 6. App Promo Section */
  .app-promo-content {

    margin-top: 0;
    /* Reset the -180px pull up */
    flex-direction: column-reverse;
    /* Text on top of phones for mobile */

  }

  .app-promo-text {

    padding-left: 0;
    margin-bottom: 50px;
    text-align: center;
  }

  .app-phones-wrapper {

    padding-top: 50px;
  }

  .phone-img-left,
  .phone-img-right {

    transform: none;
    /* Remove the translateY that hides them on desktop */
    width: 45%;
    /* Proportionally scale */
    max-width: 200px;
  }

  .phone-img-left {

    margin-right: -40px;
    margin-left: 0;
  }
}

/* ============================================================
   TABLET RESPONSIVENESS (590px - 958px)
   ============================================================ */
@media (min-width: 580px) and (max-width: 958px) {

  .hero-blue-section {

    min-height: 85vh;
    /* Increased height to allow a larger image without cutting */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
  }

  .hero-products-img-wrapper {

    margin-top: -100px;
    /* Pull further up to maximize image presence */
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .hero-products-img {

    width: 100%;
    /* Take full width without horizontal cutting */
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    /* Significantly larger vertical presence */
    object-fit: contain;
    display: block;
    margin: 0 auto;
    position: relative;
    left: 0;
    transform: none;
    /* Remove transform to ensure no cutting */

  }

  .hero-text-inner {

    margin-top: 0 !important;
    padding: 0 40px;
    max-width: 700px;
    text-align: center;
    position: relative;
    z-index: 3;
  }

  .foundation-line {

    line-height: 1.6;
    margin-bottom: 12px;
  }

  .foundation-yellow {

    margin-top: 5px;
  }
}

/* ============================================================
   MID-MOBILE & SMALL TABLET (480px - 768px)
   ============================================================ */
@media (min-width: 480px) and (max-width: 768px) {

  .hero-blue-section {

    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Eliminates excessive empty space above */
    align-items: center;
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .hero-products-img-wrapper {

    margin-top: -40px;
    /* Slightly move upward for natural sitting */
    margin-bottom: 45px;
    /* Spacing between image and text */
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .hero-products-img {

    width: 145%;
    /* Visually dominant product scaling */
    max-width: none;
    /* Allow overflowing for prominence */
    height: auto;
    object-fit: contain;
    /* Keeping the large image centered */
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .hero-text-inner {

    margin-top: 0 !important;
    padding: 0 20px;
    max-width: 550px;
    position: relative;
    z-index: 3;
  }

  .foundation-line {

    line-height: 1.6;
  }

  .foundation-yellow {

    margin-top: 8px;
  }
}

@media (max-width: 576px) {


  /* Smaller screens / Mobile Portrait */
  .hero-blue-section {

    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
  }

  .hero-text-inner {

    margin-top: 350px;
    margin-bottom: -20px;
  }

  .category-item {

    flex: 0 0 75%;
    min-width: 75%;
  }

  .cat-img-box {

    width: 80px;
    height: 80px;
  }

  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 120px;
  }

  .benefits-dots-side-title {

    text-align: left;
    display: inline-block;
  }

  /* App section adjustments */

  .phone-img-left,
  .phone-img-right {

    width: 140px;
  }

  /* A2 Hero Blue — Mobile fix: no fixed height, compact padding */
  .a2-hero-blue {

    height: auto !important;
    min-height: 0 !important;
    background: url("../images/products/blue-background.png") no-repeat center center / cover !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 20px 250px !important;
    /* bottom padding increased to show more of the blue-background */
    margin-top: 4% !important;
    position: relative;
    overflow: hidden;
  }

  .hero-content-box {

    margin: 0 auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 10px 20px !important;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }

  .hero-title-img {

    width: 100px;
    margin: 0 auto 12px;
  }

  .hero-desc {

    line-height: 1.6;
    text-align: center;
  }

  .a2-hero-blue::after {

    display: none !important;
  }
}

@media (max-width: 485px) {

  .carton-overlap-wrapper {

    margin-top: 0px !important;
  }

  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 130px;
    height: auto;
  }

  .hero-text-inner {

    margin-top: 350px;
  }

  /* A2 Hero Blue — Extra small fix */
  .a2-hero-blue {

    height: auto !important;
    min-height: 0 !important;

    /* bottom padding = wave (150px) + 20px gap */
    margin-top: 4% !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .a2-hero-blue::after {

    display: none !important;
  }

  .hero-content-box {

    margin: 0 auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 10px 15px !important;
    text-align: center;
    max-width: 100%;
  }

  .hero-title-img {

    width: 85px;
    margin: 0 auto 10px;
  }

  .hero-desc {

    line-height: 1.5;
  }
}

@media (min-width: 1920px) {

  .hero-products-img-wrapper {

    margin-top: 140px;
  }

  .hero-text-inner {

    margin-top: -80px;
    padding: 0 80px 40px;
  }

  /* 1920x1080 Specific Fix for A2 Hero Curve */
  .a2-hero-blue {

    min-height: 720px !important;
    background-position: center bottom !important;
  }

  .hero-content-box {

    margin-top: 160px !important;
    margin-left: 280px !important;
  }

  .side-beige {

    margin-top: -180px !important;
    padding-left: 200px !important;
  }

  .carton-overlap-wrapper {

    top: -420px !important;
  }

  /* 1920x1080 Specific Fix for Delivery Section Curve */
  .delivery-section {

    min-height: 700px !important;
    background: url("../images/products/creambg.png") no-repeat center bottom / cover !important;
    padding: 100px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }

  .delivery-content {

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .delivery-text {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 80px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .delivery-image {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translate(15%, -60px) !important;
  }

  .delivery-photo {

    width: 330px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* ============================================================
   LAPTOP RESOLUTION REFINEMENT (1440px)
   ============================================================ */
@media (min-width: 1440px) and (max-width: 1919px) {

  .delivery-section {

    min-height: 600px !important;
    background: url("../images/products/creambg.png") no-repeat center bottom / cover !important;
    padding: 80px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }

  .delivery-content {

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .delivery-text {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 60px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .delivery-image {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translate(12%, -50px) !important;
  }

  .delivery-photo {

    width: 290px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* A2 Hero Section - Laptop Optimization */
  .a2-hero-blue {

    min-height: 650px !important;
    background-position: center bottom !important;
  }

  .hero-title-img {

    width: 140px !important;
    margin-bottom: 0px !important;
  }

  .hero-desc {

    line-height: 1.6 !important;
  }

  .hero-content-box {

    margin-top: 100px !important;
  }
}

/* ============================================================
   2K RESOLUTION REFINEMENT (2560px)
   ============================================================ */
@media (min-width: 2560px) and (max-width: 3839px) {

  .delivery-section {

    min-height: 950px !important;
    background: url("../images/products/creambg.png") no-repeat center bottom / cover !important;
    padding: 140px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }

  .delivery-content {

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .delivery-text {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0px !important;
    transform: translateX(-60px) !important;
    /* Move leftwarded elegantly on widescreen */
    margin: 0 !important;
  }

  .delivery-text h2 {

    margin-bottom: 35px !important;
  }

  .delivery-text p {

    line-height: 1.6 !important;
    max-width: 800px !important;
    margin-bottom: 45px !important;
  }

  .btn-blue-subscribe {

    padding: 22px 55px !important;
    border-radius: 55px !important;
  }

  .delivery-image {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translate(24%, -60px) !important;
    /* Shift rightward to sit beautifully next to widescreen background pattern */

  }

  .delivery-photo {

    width: 440px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* ============================================================
   4K RESOLUTION REFINEMENT (3840px)
   ============================================================ */
@media (min-width: 3840px) {

  .container {

    max-width: 3400px !important;
  }

  .hero-products-img-wrapper {

    margin-top: 280px !important;
  }

  .hero-text-inner {

    margin-top: -100px !important;
    padding: 0 120px 80px !important;
  }

  .foundation-line {

    line-height: 1.6 !important;
  }

  .foundation-yellow {

    margin-top: 25px !important;
  }

  /* 4K Specific Fix for A2 Hero Section */
  .a2-hero-blue {

    margin-top: -1px !important;
    /* Close any sub-pixel gaps */
    min-height: 1500px !important;
    background-position: center bottom !important;
  }

  .hero-content-box {

    margin-top: 350px !important;
    margin-left: 80px !important;
    max-width: 1400px !important;
    text-align: left !important;
  }

  .hero-title-img {

    width: 320px !important;
    margin-bottom: 50px !important;
  }

  .hero-desc {

    line-height: 1.6 !important;
    text-align: left !important;
  }

  .side-beige {

    margin-top: -420px !important;
    padding-left: 450px !important;
  }

  .carton-overlap-wrapper {

    top: -750px !important;
  }

  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 420px;
  }

  /* 4K Specific Fix for Category Strip */
  .category-strip-wrapper {

    padding: 0 !important;
    height: auto !important;
    position: relative !important;
    z-index: 20 !important;
    overflow: hidden !important;
  }

  .category-item {

    max-width: 480px !important;
    padding: 120px 40px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .cat-img-box {

    width: 280px !important;
    height: 280px !important;
    margin-bottom: 40px !important;
  }

  .category-item span {

    margin-top: 40px !important;
  }

  /* 4K Specific Fix for Split Details Section */
  .side-content {

    max-width: 1200px !important;
    padding: 200px 0 !important;
    margin-left: 5% !important;
  }

  .left-padding {

    margin-top: 15% !important;
  }

  .side-title {

    margin-bottom: 50px !important;
    font-weight: 800 !important;
  }

  .side-desc {

    line-height: 1.7 !important;
    max-width: 1000px !important;
  }

  .key-benefits-box h3 {

    margin-bottom: 40px !important;
  }

  .benefits-dots-side-title li {

    margin-bottom: 30px !important;
    padding-left: 60px !important;
    line-height: 1.6 !important;
  }

  .benefits-dots-side-title li::before {

    width: 20px !important;
    height: 20px !important;
    top: 12px !important;
    border-width: 3px !important;
  }

  /* Left Side Scaling for 4K */
  .blue-icon-circle {

    width: 140px !important;
    height: 140px !important;
  }

  .blue-icon-circle img {

    width: 70px !important;
  }

  .feature-text div {

    padding-left: 40px !important;
  }

  .icon-feature-list li {

    margin-bottom: 20px !important;
  }

  .why-heading-box {

    margin-bottom: 20px !important;
  }

  /* 4K Specific Fix for Delivery Section */
  .delivery-section {

    min-height: 1400px !important;
    background: url("../images/products/creambg.png") no-repeat center bottom / cover !important;
    padding: 200px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }

  .delivery-content {

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .delivery-text {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 180px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .delivery-text h2 {

    margin-bottom: 40px !important;
  }

  .delivery-text p {

    line-height: 1.6 !important;
    max-width: 900px !important;
    margin-bottom: 50px !important;
  }

  .btn-blue-subscribe {

    padding: 25px 70px !important;
    border-radius: 60px !important;
  }

  .delivery-image {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translate(15%, -120px) !important;
  }

  .delivery-photo {

    width: 600px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 4K Specific Fix for App Promo Section */
  .app-promo-section {

    padding-top: 250px !important;
    margin-left: 10% !important;
  }

  .app-promo-content {

    margin-top: -300px !important;
  }

  .phone-img-left {

    width: 600px !important;
    margin-right: -200px !important;
    transform: translateY(280px) !important;
  }

  .phone-img-right {

    width: 700px !important;
    transform: translateY(240px) !important;
  }

  .app-promo-text {

    padding-left: 80px !important;
  }

  .app-main-title {

    margin-bottom: 50px !important;
    font-weight: 900 !important;
  }

  .app-description {

    line-height: 1.6 !important;
  }

  .download-app-box {

    padding: 100px 120px !important;
    border-radius: 50px !important;
    margin-top: 120px !important;
  }

  .box-label {

    margin-bottom: 40px !important;
  }

  .store-btns img {

    height: 100px !important;
    margin-right: 25px !important;
  }

  .delivery-check-box h3 {

    margin-bottom: 40px !important;
  }

  .zip-input-group input {

    height: 110px !important;
    padding: 0 45px !important;
    width: 550px !important;
    border-radius: 55px 0 0 55px !important;
  }

  .btn-check-zip {

    height: 110px !important;
    padding: 0 80px !important;
    border-radius: 0 55px 55px 0 !important;
  }
}

/* =========================================
   SCROLL ANIMATION BASE
========================================= */

/* Re-standardized animation properties */
.animate {

  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.animate.show {

  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

.animate-left {

  transform: translateX(-200px);
}

.animate-left.show {

  transform: translateX(0);
}

.animate-right {

  transform: translateX(200px);
}

.animate-right.show {

  transform: translateX(0);
}

.animate-scale {

  transform: scale(0.85);
}

.animate-scale.show {

  transform: scale(1);
}

.animate-up {

  transform: translateY(100px);
}

.animate-up.show {

  transform: translateY(0);
}

/* ============================================================
   PRODUCT SLIDER SIDE-PEEK EFFECT (≤ 950px)
   ============================================================ */
@media (max-width: 950px) {

  .category-strip-wrapper {

    padding: 40px 0 30px !important;
    overflow: hidden !important;
  }

  .product-category-strip {

    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 20px 12% !important;
    /* Side-peek preview */
    gap: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-padding: 0 12% !important;
    justify-content: flex-start !important;
    background: transparent !important;
    min-height: 280px !important;
    /* Reduced height for more compact layout */

  }

  .product-category-strip::-webkit-scrollbar {

    display: none !important;
  }

  .category-item {

    flex: 0 0 78% !important;
    /* Slightly wider for better visual weight */
    width: 78% !important;
    min-width: 78% !important;
    max-width: 78% !important;
    scroll-snap-align: center !important;
    transition:
      transform 0.6s cubic-bezier(0.2, 1, 0.3, 1),
      opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1),
      background 0.4s ease !important;
    opacity: 0.45;
    transform: scale(0.9);
    /* Side-peek scale */
    background: #ffffff !important;
    border-radius: 30px !important;
    /* Softer corners */
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
    padding: 30px 20px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .category-item.active {

    opacity: 1 !important;
    transform: scale(1) !important;
    background: #e8bb2e !important;

    border-color: transparent !important;
  }

  .cat-img-box {

    width: 100px !important;
    /* Reduced images */
    height: 100px !important;
    margin-bottom: 20px !important;
    transition: transform 0.5s ease !important;
  }

  .category-item span {

    margin-top: 10px !important;
    font-weight: 800 !important;
    color: #17324d !important;
  }

  .category-item.active span {

    color: #ffffff !important;
  }

  /* Pagination Dots */
  .slider-dots-container {

    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .slider-dot {

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .slider-dot.active {

    background: #e8bb2e;
    width: 28px;
    /* Capsule shape for active dot */
    border-radius: 10px;
  }

  .category-scroll-btn {

    display: none !important;
  }
}

/* ============================================================
   TABLET & MID-MOBILE REFINEMENT (577px - 1024px)
   - Resolves layout shifts, overlaps, and height inconsistencies.
   ============================================================ */
@media (min-width: 577px) and (max-width: 1024px) {


  /* 1. Category Slider Refinement */
  .category-strip-wrapper {

    height: auto !important;
    min-height: auto !important;
    padding: clamp(40px, 6vh, 60px) 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .product-category-strip {

    min-height: clamp(300px, 45vh, 450px) !important;
    padding: 20px 15% !important;
    /* Adjusted side-peek */
    scroll-padding: 0 15% !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 40px) !important;
  }

  .category-item {

    flex: 0 0 70% !important;
    /* Slightly narrower for tablet balance */
    width: 70% !important;
    min-width: 70% !important;
    max-width: 70% !important;
    height: auto !important;
    min-height: clamp(280px, 40vh, 400px) !important;
    padding: clamp(30px, 5vh, 50px) clamp(20px, 4vw, 40px) !important;
    border-radius: 32px !important;
  }

  /* 2. A2 Blue Hero Refinement */
  .a2-hero-blue {

    height: auto !important;
    /* Increase min-height to allow more background visibility */
    min-height: clamp(400px, 60vh, 650px) !important;
    /* Significant padding for taller, premium feel */
    padding: clamp(80px, 12vh, 140px) 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    /* Premium background scaling */
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .hero-text-col {

    width: 100% !important;
    max-width: 800px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .hero-content-box {

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .hero-title-img {

    width: clamp(140px, 20vw, 220px) !important;
    margin: 0 auto 25px !important;
  }

  .hero-desc {

    line-height: 1.6 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }

  /* Remove wave overlap hacks for this range */
  .a2-hero-blue::after {

    display: none !important;
    /* Clean stack for tablets */

  }

  /* 3. Global Spacing & Flow */
  .product-page section {

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
  }

  .slider-dots-container {

    margin-top: 25px !important;
    margin-bottom: 20px !important;
  }
}

/* ============================================================
   HERO PRODUCT RESPONSIVENESS (200px - 950px)
   - Maximized focal dominance with eliminated right-side gaps.
   - Strictly targets 200px - 950px viewports.
   ============================================================ */
@media (min-width: 200px) and (max-width: 950px) {

  .hero-blue-section {

    min-height: auto !important;
    padding: clamp(40px, 6vh, 80px) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-products-img-wrapper {

    margin: 0 0 clamp(20px, 4vh, 40px) 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* High-specificity selector to override all other rules */
  .hero-products-img-wrapper .hero-products-img {

    width: clamp(650px, 140vw, 1500px) !important;
    min-width: 150vw !important;
    max-width: 180% !important;
    /* Buffer for transparent space */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    /* Center positioning */
    transform: translateX(0%) !important;
    margin: 0 auto !important;
    left: auto !important;
  }

  .hero-text-inner {

    margin: 0 !important;
    padding: 0 35px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 750px !important;
    z-index: 5 !important;
  }

  .foundation-line,
  .foundation-yellow {

    text-align: center !important;
    width: 100% !important;
  }
}

/* ============================================================
   VERTICAL POSITIONING REFINEMENT (481px - 1024px)
   - Pulls Sandal section upward for tighter visual transition.
   ============================================================ */
@media (min-width: 481px) and (max-width: 1024px) {

  .a2-split-details {

    /* Maximum safe negative margin to bridge the gap between sections */
    margin-top: -45px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .side-beige {

    /* Tightened internal spacing to support the closer section transition */
    padding-top: clamp(25px, 5vh, 45px) !important;
  }
}

/* ============================================================
   MOBILE TYPOGRAPHY REFINEMENT (≤ 600px)
   - How It's Made & Key Benefits Sections
   ============================================================ */
@media (max-width: 600px) {

  .a2-split-details {

    padding: 24px 16px !important;
  }

  /* 1. Section Headings */
  .how-made-box .side-title,
  .key-benefits-box h3 {

    /* font-size: clamp(18px, 4.5vw, 22px) !important; */
    text-align: center !important;
    margin-bottom: 24px !important;
    font-weight: 800 !important;
  }

  /* 2. Paragraph Text (How It's Made) */
  .side-desc {

    /* font-size: clamp(14px, 3.5vw, 16px) !important; */
    line-height: 1.7 !important;
    text-align: center !important;
    max-width: 92% !important;
    margin: 0 auto 32px !important;
    color: #000000 !important;
  }

  /* 3. Bullet List (Key Benefits) */
  .benefits-dots-side-title {

    display: table !important;
    /* Centers the list container */
    margin: 0 auto !important;
    text-align: left !important;
    /* Keeps text left-aligned inside container */
    max-width: 95% !important;
    padding: 0 !important;
  }

  .benefits-dots-side-title li {

    /* font-size: clamp(14px, 3.5vw, 15px) !important; */
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    padding-left: 0 !important;
    position: relative !important;
    color: #000000 !important;
  }

  /* Adjust spacing between the two main boxes */
  .key-benefits-box {

    margin-top: 32px !important;
  }

  /* Ensure the container doesn't have restrictive horizontal padding */
  .side-content {

    padding: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   IPAD PRO PORTRAIT SPECIFIC (1024px)
   ============================================================ */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {

  .hero-blue-section {

    min-height: 50vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-products-img-wrapper {

    margin-top: 60px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-products-img-wrapper .hero-products-img {

    width: 155% !important;
    min-width: 155% !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(0) !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .hero-text-inner {

    margin-top: 0 !important;
    padding: 0 40px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Slider and Dots for iPad Pro */
  .category-strip-wrapper {

    padding: 40px 0 !important;
    overflow: hidden !important;
  }

  .product-category-strip {

    display: flex !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 20px 15% !important;
    gap: 30px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .product-category-strip::-webkit-scrollbar {

    display: none !important;
  }

  .category-item {

    flex: 0 0 65% !important;
    width: 65% !important;
    min-width: 65% !important;
    max-width: 65% !important;
    scroll-snap-align: center !important;
    opacity: 0.45;
    transform: scale(0.9);
    transition: all 0.6s ease !important;
  }

  .category-item.active {

    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .slider-dots-container {

    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }

  .slider-dot {

    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
  }

  .slider-dot.active {

    background: #e8bb2e !important;
    width: 30px !important;
    border-radius: 10px !important;
  }

  /* Gap Fixes for iPad Pro */
  .a2-hero-blue {

    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .side-beige {

    margin-top: -50px !important;
  }

  .phones-container {

    margin-top: -30% !important;
  }
}

/* ============================================================
   IPAD AIR SPECIFIC (820px)
   ============================================================ */
@media only screen and (min-width: 820px) and (max-width: 820px) {

  .hero-text-inner {

    margin: 0 auto !important;
    max-width: 700px !important;
    text-align: center !important;
    padding: 0 20px !important;
  }

  .foundation-line,
  .foundation-yellow {

    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ============================================================
   IPAD AIR GAP FIX OVERRIDE
   ============================================================ */
@media only screen and (min-width: 820px) and (max-width: 820px) {

  .a2-hero-blue {

    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .side-beige {

    margin-top: -40px !important;
  }
}

/* ============================================================
   IPAD MINI SPECIFIC (768px)
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 768px) {

  .a2-hero-blue {

    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    min-height: 580px !important;
  }

  .side-beige {

    margin-top: -40px !important;
    overflow: hidden !important;
  }

  .a2-split-details {

    margin-top: -30px !important;
  }

  .side-content {

    padding-top: 0 !important;
  }

  .side-white {

    padding-top: 0 !important;
  }

  /* ── Image wrapper: tighten top margin, remove bottom gap ── */
  .hero-products-img-wrapper {

    margin-top: 70px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* ── Make the product image noticeably larger ── */
  .hero-products-img-wrapper .hero-products-img {

    width: 190% !important;
    min-width: 140% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transform: translateX(0) !important;
    margin: 0 auto !important;
    position: relative !important;
    left: auto !important;
  }

  /* ── Pull text block up, reducing gap below image ── */
  .hero-text-inner {

    margin-top: 20px !important;
    padding: 0 30px 25px !important;
    text-align: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .foundation-line,
  .foundation-yellow {

    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ============================================================
   MOBILE GAP FIX OVERRIDE
   ============================================================ */
@media (max-width: 576px) {

  .a2-hero-blue {

    margin-top: -15px !important;
    position: relative !important;
    z-index: 20 !important;
    min-height: 460px !important;
    padding: 40px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-content-box {

    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-title-img {

    width: 110px !important;
    margin: 0 auto 20px !important;
  }

  .hero-desc {

    line-height: 1.6 !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   MOBILE TEXT JUSTIFICATION
   ============================================================ */
@media (max-width: 576px) {


  .hero-desc,
  .side-desc {

    text-align: justify !important;
    text-justify: inter-word !important;
  }

  .side-desc br {

    display: none !important;
  }
}

/* ============================================================
   MOBILE OVERLAP FIX
   ============================================================ */
@media (max-width: 576px) {

  .benefits-dots-side-title li {

    padding-left: 35px !important;
  }

  .benefits-dots-side-title li::before {

    left: 5px !important;
    top: 6px !important;
  }
}

/* ============================================================
   IPAD MINI, AIR, PRO TABLET REFINEMENT (768px - 1024px)
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {


  /* 1. Category Strip Cards */
  .category-strip-wrapper {

    height: auto !important;
    padding: 40px 0 !important;
  }

  .cat-img-box {

    width: 140px !important;
    height: 140px !important;
    margin-bottom: 15px !important;
  }

  .category-item span {

    font-weight: 700 !important;
    margin-top: 15px !important;
  }

  .category-item {

    flex: 0 0 220px !important;
    /* Larger width for tablet "cards" */
    padding: 30px 15px !important;
  }

  /* 2. Feature Icons (Why Choose Section) */
  .blue-icon-circle {

    width: 130px !important;
    height: 130px !important;
  }

  .feature-text div {

    line-height: 1.4 !important;
  }

  /* 3. Text Content and Benefits */

  .side-desc {

    line-height: 1.6 !important;
  }

  .benefits-dots-side-title li {

    margin-bottom: 15px !important;
    padding-left: 45px !important;
  }

  .benefits-dots-side-title li::before {

    width: 16px !important;
    height: 16px !important;
    top: 10px !important;
    left: 10px !important;
  }

  .phone-img-left {

    margin-bottom: -10% !important;
  }
}

/* ============================================================
   IPAD PRO ONLY REFINEMENT (1024px)
   ============================================================ */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {

  .carton-overlap-wrapper {

    top: 20px !important;
  }

  /* Adjust clusters to cross the boundary perfectly on iPad Pro height */
  #splitProductImages[data-product="ghee"] {

    top: 7% !important;
    margin-left: -60% !important;
  }

  #splitProductImages[data-product="curd"] {

    top: 7% !important;
    margin-left: -60% !important;
  }

  #splitProductImages[data-product="yogurt"] {

    top: 15% !important;
    margin-left: -80% !important;
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }

  #splitProductImages[data-product="paneer"] {

    top: 0% !important;
    margin-left: -80% !important;
    padding-top: 5% !important;
    padding-bottom: -5% !important;
  }
}

/* ============================================================
   MOBILE HERO REFINEMENT (Up to 576px)
   ============================================================ */
@media (max-width: 768px) {


  /* Force image to exceed container limits */
  .hero-products-img-wrapper img.hero-products-img {

    width: 250vw !important;
    min-width: 250vw !important;
    max-width: none !important;
    height: auto !important;
    margin-left: 250% !important;
    transform: translateX(-50%) !important;
    margin-top: 5% !important;
    display: block !important;
  }

  .hero-products-img-wrapper img.hero-products-img.animate.show {

    transform: translateX(-50%) scale(1) !important;
    opacity: 1 !important;
  }

  .foundation-line br {

    display: none !important;
  }

  .hero-text-inner {

    margin-top: 20px !important;
    padding: 0 20px !important;
  }

  .foundation-line {

    line-height: 1.5 !important;
  }

  /* 6. App Promo Section - Mobile Gaps Removal */
  .app-promo-section {

    margin-top: -2% !important;
  }

  .app-promo-text {

    margin-bottom: 20px !important;
  }

  .app-promo-text .pre-title {

    margin-bottom: 5px !important;
  }

  .app-promo-text h2 {

    margin-bottom: 15px !important;
  }

  .app-promo-text p {

    margin-bottom: 0 !important;
  }

  .app-phones-wrapper {

    padding-top: 10px !important;
  }

  .phone-img-left {

    margin-bottom: -20% !important;
  }

  .phone-img-right {

    margin-bottom: -10% !important;
  }
}

/* ============================================================
   APP PROMO SECTION - DESKTOP REFINEMENT (min-width: 1200px)
   ============================================================ */
@media (min-width: 1200px) {

  .app-promo-text .pre-title {

    font-weight: 400 !important;
    margin-bottom: 8px !important;
    color: #444 !important;
  }

  .app-promo-text {

    margin-bottom: -5%;
  }

  .app-promo-text h2 {

    font-weight: 900 !important;
    line-height: 0.5 !important;
    margin-bottom: 25px !important;
    color: #045da8 !important;
  }

  .app-promo-text p.text-dark-grey {

    line-height: 1.6 !important;
    color: #3a4d5e !important;
    font-weight: 400 !important;
  }

  .pre-title {

    margin-left: 2% !important;
  }
}

/* ============================================================
   TABLET FIXES (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {


  /* Fix Key Benefits list overlap */
  .benefits-dots-side-title {

    display: block !important;
    margin: 0 auto !important;
    text-align: left !important;
    max-width: 450px !important;
  }

  .benefits-dots-side-title li {

    position: relative !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    padding-left: 25px !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .benefits-dots-side-title li::before {

    position: absolute !important;
    content: "" !important;
    top: 6px !important;
    left: 0 !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* Fix Delivery Section horizontal squeeze */
  .delivery-section {

    padding-bottom: 60px !important;
    height: auto !important;
  }

  .delivery-content {

    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }

  .delivery-text {

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .delivery-text h2 {

    text-align: center !important;
    width: 100% !important;
  }

  .delivery-text p {

    text-align: center !important;
    margin: 0 auto 30px !important;
    width: 100% !important;
    max-width: 550px !important;
  }

  .delivery-text .btn-blue-subscribe {

    display: inline-block !important;
    align-self: center !important;
    margin: 0 auto !important;
  }

  .delivery-image {

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 50px !important;
    justify-content: center !important;
    padding-right: 0 !important;
  }

  .delivery-photo {

    margin: 0 auto !important;
    max-width: 320px !important;
    width: 100% !important;
  }

  /* Fix App Promo Section spacing */
  .app-promo-section {

    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  .app-promo-content {

    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .app-promo-text {

    margin-top: 10px !important;
    margin-bottom: 20px !important;
  }

  .app-promo-text .pre-title {

    margin-top: 0 !important;
  }

  .app-promo-text p:last-child {

    margin-bottom: 0 !important;
  }
}

/* ============================================================
   2560X1440 (2K) SPECIFIC POSITION REFINEMENT
   (Moving Ghee, Curd, Yogurt, and Paneer upward)
   ============================================================ */
@media screen and (min-width: 2560px) and (max-width: 2560px) {


  /* Ghee - Scale up and keep upward position */
  #splitProductImages[data-product="ghee"] {

    top: -220px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 360px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 300px !important;
    margin-left: -70px !important;
  }

  /* Curd - Scale up and keep upward position */
  #splitProductImages[data-product="curd"] {

    top: -240px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 350px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 240px !important;
    margin-left: -140px !important;
    margin-bottom: -30px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 330px !important;
    margin-left: -130px !important;
  }

  /* Yogurt - Scale up and keep upward position */
  #splitProductImages[data-product="yogurt"] {

    top: -240px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 320px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 320px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 320px !important;
    margin-left: -480px !important;
    margin-bottom: -180px !important;
  }

  /* Paneer - Scale up and keep upward position */
  #splitProductImages[data-product="paneer"] {

    top: -220px !important;
  }

  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 340px !important;
  }
}

@media screen and (min-width: 1920px) and (max-width: 1920px) {

  /* Milk - Scale up for 4K, vertical position stays correct */

  #splitProductImages {

    margin-left: 10% !important;
  }
}

/* ============================================================
   3840X2160 (4K) SPECIFIC REFINEMENT
   (Massive scaling for Ultra HD displays)
   ============================================================ */
@media screen and (min-width: 3840px) and (max-width: 3840px) {

  /* Milk - Scale up for 4K, vertical position stays correct */

  #splitProductImages {

    margin-left: 10% !important;
  }

  /* Ghee - Massive scale and move upward */
  #splitProductImages[data-product="ghee"] {

    top: -400px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 600px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 500px !important;
    margin-left: -130px !important;
  }

  /* Curd - Massive scale and move upward */
  #splitProductImages[data-product="curd"] {

    top: -420px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 580px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 420px !important;
    margin-left: -220px !important;
    margin-bottom: -60px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 550px !important;
    margin-left: -210px !important;
  }

  /* Yogurt - Massive scale and move upward */
  #splitProductImages[data-product="yogurt"] {

    top: -420px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 520px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 520px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 520px !important;
    margin-left: -780px !important;
    margin-bottom: -320px !important;
  }

  /* Paneer - Massive scale and move upward */
  #splitProductImages[data-product="paneer"] {

    top: -400px !important;
  }

  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 580px !important;
  }
}

/* Old exact dimension overrides and default desktop margins removed for a clean, stable grid layout */

/* Old exact viewport queries removed for clean ascending cascade */

/* ============================================================
   APP PROMO SECTION - HIGH RESOLUTION POSITIONING
   (Moving content upward to remove excessive top spacing)
   ============================================================ */

/* 1280x800 */
@media screen and (min-width: 1280px) and (max-width: 1280px) {

  .app-promo-content {

    margin-top: -220px !important;
    /* Move content upward */

  }
}

/* 1440x900 */
@media screen and (min-width: 1440px) and (max-width: 1440px) {

  .app-promo-content {

    margin-top: -200px !important;
    /* Move content upward */

  }
}

/* 1920x1080 */
@media screen and (min-width: 1920px) and (max-width: 1920px) {

  .app-promo-content {

    margin-top: -220px !important;
    /* Move content upward */

  }
}

/* 2560x1440 */
@media screen and (min-width: 2560px) and (max-width: 2560px) {

  .app-promo-content {

    margin-top: -220px !important;
    /* Move content upward */

  }
}

/* 3840x2160 (4K) */
@media screen and (min-width: 3840px) and (max-width: 3840px) {

  .app-promo-content {

    margin-top: -550px !important;
    /* Move content upward */

  }
}

/* ============================================================
   APP PROMO SECTION - TABLET POSITIONING
   (Moving content upward to remove excessive top spacing)
   ============================================================ */

/* iPad Mini (768px) */
@media screen and (min-width: 768px) and (max-width: 768px) {

  .app-promo-content {

    margin-top: -60px !important;
    /* Move content upward */

  }
}

/* iPad Air (820px) */
@media screen and (min-width: 820px) and (max-width: 820px) {

  .app-promo-content {

    margin-top: -70px !important;
    /* Move content upward */

  }
}

/* iPad Pro (1024px) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {

  .app-promo-content {

    margin-top: -50px !important;
    /* Move content upward */

  }
}

/* ============================================================
   WHY CHOOSE HEADING - TABLET POSITIONING
   (Moving heading downward to create breathing room)
   ============================================================ */

/* iPad Mini (768px) */
@media screen and (min-width: 768px) and (max-width: 768px) {

  .why-heading-box {

    margin-top: 40px !important;
    /* Move downward */

  }
}

/* iPad Air (820px) */
@media screen and (min-width: 820px) and (max-width: 820px) {

  .why-heading-box {

    margin-top: 50px !important;
    /* Move downward */

  }
}

/* ============================================================
   HERO TEXT REFINEMENT - TABLET POSITIONING
   (Moving foundation text downward to create breathing room)
   ============================================================ */

/* iPad Mini (768px) */
@media screen and (min-width: 768px) and (max-width: 768px) {

  .hero-text-inner {

    margin-top: -30px !important;
    /* Move downward */

  }

  .hero-products-img-wrapper {

    margin-top: -5% !important;
  }
}

/* iPad Air (820px) */
@media screen and (min-width: 820px) and (max-width: 820px) {

  .hero-text-inner {

    margin-top: -50px !important;
    /* Move downward */

  }
}

/* iPad Pro (1024px) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {

  .hero-text-inner {

    margin-top: -60px !important;
    /* Move downward */

  }
}

/* ============================================================
   HOW IT'S MADE SECTION - TABLET POSITIONING
   (Moving section downward to create breathing room)
   ============================================================ */

/* iPad Mini (768px) */
@media screen and (min-width: 768px) and (max-width: 768px) {

  .how-made-box {

    margin-top: 80px !important;
    /* Move downward */

  }
}

@media screen and (min-width: 375px) and (max-width: 567px) {

  .row {

    overflow-y: hidden !important;
  }
}

@media screen and (max-width: 768px) {

  .animate-left {

    transform: translateX(-50px) !important;
  }

  .animate-right {

    transform: translateX(50px) !important;
  }

  .animate-up {

    transform: translateY(40px) !important;
  }
}

/* Laptop Baseline - Move curd section leftward */
@media screen and (min-width: 1280px) and (max-width: 1600px) {

  #splitProductImages[data-product="curd"] {

    left: 40% !important;
  }
}

/* ============================================================
   PRODUCT PAGE FONT SIZE COPIED FROM SIMPLE-TERMS SYSTEM
   ============================================================ */

/* 1. Mobile Devices (Max-width 767px) */
@media screen and (max-width: 767px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 250px !important;
    margin-top: -50px !important;
  }

  .hero-desc {

    margin-top: -15% !important;
  }
}

/* 2. Tab Devices (Generic) (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 250px !important;
    margin-top: -8px !important;
    margin-bottom: 12px !important;
  }
}

/* 3. iPad Mini (768x1024) */
@media screen and (width: 768px) and (height: 1024px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 250px !important;
    margin-top: -8px !important;
    margin-bottom: 12px !important;
  }

  .how-made-box {

    max-width: 70% !important;
    margin-left: 15% !important;
  }

  .key-benefits-box {

    margin-top: 10% !important;
  }
}

/* 4. iPad Air (820x1180) */
@media screen and (width: 820px) and (height: 1180px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 250px !important;
    margin-top: -10px !important;
    margin-bottom: 15px !important;
  }

  .how-made-box {

    margin-top: 10% !important;
    max-width: 70% !important;
    margin-left: 15% !important;
  }

  .key-benefits-box {

    margin-top: 10% !important;
  }
}

/* 5. iPad Pro (1024x1366) */
@media screen and (width: 1024px) and (height: 1366px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 250px !important;
    margin-top: -10px !important;
    margin-bottom: 15px !important;
  }

  .how-made-box {

    margin-top: 5% !important;
    max-width: 70% !important;
    margin-left: 15% !important;
  }

  .how-made-box h3 {

    text-align: center !important;
  }

  .key-benefits-box {

    margin-top: 10% !important;
  }
}

/* 6. Laptop Baseline (1280x800) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 80px !important;
    margin-top: -12px !important;
    margin-bottom: 35px !important;
  }

  .delivery-section {

    min-height: 550px !important;
    background: url("../images/products/creambg.png") no-repeat center bottom / cover !important;
    padding: 60px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }

  .delivery-content {

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .delivery-text {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 50px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .delivery-image {

    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translate(10%, -40px) !important;
  }

  .delivery-photo {

    width: 260px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* App Promo Section Spacing and Position Refinements for Laptop Baseline */
  .app-promo-section {

    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .app-promo-content {

    margin-top: -160px !important;
  }

  .app-promo-text {

    margin-top: 0px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    transform: translateY(40px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    transform: translateY(20px) !important;
  }
}

/* 7. Laptop Large (1440x900) */
@media screen and (min-width: 1440px) and (max-width: 1919px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 90px !important;
    margin-top: 8% !important;
    margin-bottom: 50px !important;
    margin-left: -8% !important;
  }

  .side-beige {

    margin-top: -10% !important;
  }

  .delivery-text {

    transform: translateX(clamp(-180px, -12vw, -60px));
  }

  #deliveryBtn {

    margin-top: clamp(20px, 3vw, 50px);
  }

  /* .delivery-text {
    margin-left: -50% !important;
  }

  #deliveryBtn {
    margin-top: 6% !important;
  } */

  .app-promo-section {

    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .app-promo-content {

    margin-top: -200px !important;
  }

  .app-promo-text {

    margin-top: 0px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    transform: translateY(60px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    transform: translateY(30px) !important;
  }
}

/* 8. Desktop Standard (1540px - 2559px) */
@media screen and (min-width: 1540px) and (max-width: 2559px) {


  /* .sub-label (smaller) */
  #sub-label {

    color: #000000 !important;
  }

  /* .simple-outro equivalence */

  .feature-text div {

    color: black !important;
  }

  /* No shortcuts element (+2px) */

  .hero-title-img {

    height: 110px !important;
    margin-top: -10% !important;
    margin-bottom: 60px !important;
  }

  .side-content {

    max-width: 550px !important;
  }

  #deliveryBtn {

    margin-top: clamp(20px, 3vw, 50px) !important;
  }

  /* Move splitProductImages rightward and increase image height/size */
  #splitProductImages {

    left: 48% !important;
  }

  /* Milk */
  #splitProductImages[data-product="milk"] #splitImg1 {

    width: 230px !important;
  }

  .overlap-pack-1l {

    margin-left: 2% !important;
  }

  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 230px !important;
    height: auto !important;
  }

  #splitProductImages[data-product="milk"] #splitImg2 {

    width: 230px !important;
    margin-left: -50px !important;
  }

  /* Ghee */
  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 310px !important;
    margin-top: -50px !important;
    margin-left: -50px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 250px !important;
    margin-left: -55px !important;
  }

  /* Curd */
  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 300px !important;
    margin-top: -50px !important;
    margin-left: -100px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 210px !important;
    margin-left: -125px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 290px !important;
    margin-left: -110px !important;
  }

  /* Yogurt */
  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 250px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 250px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 250px !important;
    margin-left: -360px !important;
  }

  /* Paneer */
  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 590px !important;
    margin-top: -100px !important;
  }

  /* App Promo Section Spacing and Position Refinements */
  .app-promo-section {

    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .app-promo-content {

    margin-top: -200px !important;
  }

  .app-promo-text {

    margin-top: 0px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    transform: translateY(60px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    transform: translateY(30px) !important;
  }
}

/* 9. Desktop Large (2560x1440) */
@media screen and (min-width: 2560px) and (max-width: 3839px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 145px !important;
    margin-top: -20px !important;
    margin-bottom: 25px !important;
  }

  .hero-content-box {

    max-width: 100% !important;
    margin-bottom: 40% !important;
  }

  .side-content {

    max-width: 800px !important;
  }

  #deliveryBtn {

    margin-top: 5% !important;
  }

  /* Move splitProductImages rightward and increase image height/size */
  #splitProductImages {

    left: 48% !important;
  }

  /* Milk */
  .overlap-pack-1l,
  .overlap-pack-500ml {

    width: 250px !important;
    height: auto !important;
  }

  .overlap-pack-1l {

    margin-left: 30% !important;
    margin-top: -2% !important;
  }

  #splitProductImages[data-product="milk"] #splitImg1 {

    width: 230px !important;
  }

  #splitProductImages[data-product="milk"] #splitImg2 {

    width: 230px !important;
    margin-left: -70px !important;
  }

  /* Ghee */
  #splitProductImages[data-product="ghee"] #splitImg1 {

    width: 400px !important;
    margin-top: -50px !important;
    margin-left: 150px !important;
  }

  #splitProductImages[data-product="ghee"] #splitImg2 {

    width: 330px !important;
    margin-left: -70px !important;
  }

  /* Curd */
  #splitProductImages[data-product="curd"] #splitImg1 {

    width: 390px !important;
    margin-top: -50px !important;
    margin-left: 100px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg2 {

    width: 270px !important;
    margin-left: -160px !important;
  }

  #splitProductImages[data-product="curd"] #splitImg3 {

    width: 375px !important;
    margin-left: -140px !important;
  }

  /* Yogurt */
  #splitProductImages[data-product="yogurt"] #splitImg1 {

    width: 330px !important;
    margin-top: -50px !important;
    margin-left: 100px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg2 {

    width: 330px !important;
  }

  #splitProductImages[data-product="yogurt"] #splitImg3 {

    width: 330px !important;
    margin-left: -480px !important;
  }

  /* Paneer */
  #splitProductImages[data-product="paneer"] #splitImg1 {

    width: 425px !important;
    margin-top: -50px !important;
    margin-left: 150px !important;
  }
}

/* 10. Desktop 4K (3840x2160) */
@media screen and (min-width: 3840px) {


  #sub-label {

    color: #000000 !important;
  }

  .feature-text div {

    color: black !important;
  }

  .hero-title-img {

    height: 200px !important;
    margin-top: -30px !important;
    margin-bottom: 85px !important;
    margin-left: -7% !important;
  }

  .blue-icon-circle img {

    height: 1200px !important;
    width: 1200px !important;
  }

  #deliveryBtn {

    margin-top: 5% !important;
  }
}

/* DESKTOP APP PROMO PHONES & SPACING CORRECTION */
@media screen and (min-width: 993px) {

  .app-promo-section {

    padding-bottom: 100px !important;
  }

  .app-phones-wrapper {

    display: flex !important;
    justify-content: flex-start !important;
  }

  .phones-container {

    justify-content: flex-start !important;
    margin-left: -120px !important;
  }

  .app-promo-text {

    margin-top: 60px !important;
    padding-left: 100px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    width: 420px !important;
    max-width: 40vw !important;
    height: auto !important;
    margin-right: 0px !important;
    margin-left: 10px !important;
    transform: translateY(150px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    width: 480px !important;
    max-width: 42vw !important;
    height: auto !important;
    margin-left: -12% !important;
    transform: translateY(120px) !important;
  }
}

/* LAPTOP BASELINE (1280px - 1439px) — match Desktop Standard look */
@media screen and (min-width: 1280px) and (max-width: 1439px) {

  .app-promo-section {

    padding-bottom: 100px !important;
  }

  .app-phones-wrapper {

    display: flex !important;
    justify-content: flex-start !important;
  }

  .phones-container {

    justify-content: flex-start !important;
    margin-left: -10px !important;
  }

  .app-promo-text {

    margin-top: 60px !important;
    padding-left: 100px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    width: 300px !important;
    max-width: 30vw !important;
    height: auto !important;
    margin-right: -30px !important;
    margin-left: 10px !important;
    transform: translateY(130px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    width: 350px !important;
    max-width: 32vw !important;
    margin-left: -10px !important;
    height: auto !important;
    transform: translateY(105px) !important;
  }
}

/* LAPTOP LARGE (1440px - 1919px) — match Desktop Standard look */
@media screen and (min-width: 1440px) and (max-width: 1919px) {

  .app-promo-section {

    padding-bottom: 100px !important;
  }

  .app-phones-wrapper {

    display: flex !important;
    justify-content: flex-start !important;
  }

  .phones-container {

    justify-content: flex-start !important;
    margin-left: 30px !important;
  }

  .app-promo-text {

    margin-top: 60px !important;
    padding-left: 100px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    width: 340px !important;
    max-width: 32vw !important;
    height: auto !important;
    margin-right: -35px !important;
    margin-left: 10px !important;
    transform: translateY(145px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    width: 400px !important;
    max-width: 35vw !important;
    margin-left: -10px !important;
    height: auto !important;
    transform: translateY(110px) !important;
  }
}

/* DESKTOP 4K (≥3840px) — match Desktop Standard look, scaled up */
@media screen and (min-width: 3840px) {

  .app-promo-section {

    padding-bottom: 200px !important;
  }

  .app-phones-wrapper {

    display: flex !important;
    justify-content: flex-start !important;
  }

  .phones-container {

    justify-content: flex-start !important;
    margin-left: 800px !important;
  }

  .app-promo-text {

    margin-top: 60px !important;
    padding-left: 20px !important;
  }

  .phone-img-left,
  .phone-img-left img {

    width: 400px !important;
    max-width: 38vw !important;
    height: auto !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    transform: translateY(200px) !important;
  }

  .phone-img-right,
  .phone-img-right img {

    width: 620px !important;
    max-width: 40vw !important;
    margin-left: -9% !important;
    height: auto !important;
    transform: translateY(220px) !important;
  }
}

/* ============================================================
   CUSTOM SHIFT & ENLARGEMENT FOR DELIVERY IMAGE (USER REQUEST)
   ============================================================ */

/* Desktop & Laptop Viewports (100% viewport alignment to the right) */
@media (min-width: 992px) {

  .delivery-section {

    position: relative !important;
    overflow: visible !important;
  }

  /* CRITICAL: Force grid containers to static so absolute positioning escapes them 
     and attaches to the full-width delivery-section */
  .delivery-section .container,
  .delivery-section .delivery-content {

    position: static !important;
  }

  .delivery-image {

    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    /* Span exact section height */
    width: 48vw !important;
    height: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    /* Center the image vertically */
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-90px) !important;
    z-index: 5 !important;
  }

  .delivery-photo {

    width: 100% !important;
    /* Removed min-width to ensure perfect scaling down to iPad Pro sizes without overlapping text! */
    max-width: none !important;
    height: auto !important;
    max-height: 95% !important;
    /* Guaranteed to avoid top/bottom overflow */
    object-fit: contain !important;
    object-position: right center !important;
    /* Flush right, centered vertically */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
  }
}

/* Mobile & Tablet Viewports (Proper sizing, centered, and fully responsive) */
@media (max-width: 991px) {

  .delivery-section {

    height: auto !important;
    padding: 60px 0 !important;
    position: relative !important;
  }

  .delivery-image {

    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 30px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .delivery-photo {

    width: 95% !important;
    max-width: 550px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }
}

/* iPad Pro (1024px) Delivery Section Stack Override (No Overlap & Full BG Curve) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {

  .delivery-section {

    position: relative !important;
    height: auto !important;
    padding: 80px 0 !important;
    overflow: visible !important;
  }

  .delivery-section .container,
  .delivery-section .delivery-content {

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .delivery-text {

    width: 100% !important;
    max-width: 800px !important;
    text-align: center !important;
    margin-bottom: 40px !important;
  }

  .delivery-text h2,
  .delivery-text p {

    text-align: center !important;
  }

  .btn-blue-subscribe {

    align-self: center !important;
    margin: 0 auto !important;
  }

  .delivery-image {

    position: relative !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 30px !important;
    transform: translateY(-45px) !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  .delivery-photo {

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* iPad Mini (768px) Delivery Image Shift */
@media screen and (min-width: 768px) and (max-width: 768px) {

  .delivery-image {

    transform: translateY(-35px) !important;
  }
}

/* iPad Air (820px) Delivery Image Shift */
@media screen and (min-width: 820px) and (max-width: 820px) {

  .delivery-image {

    transform: translateY(-35px) !important;
  }
}