/* ============================================================
   LANDING
   ============================================================ */

.Landing {
  background-position: center center;
  background-size: 100vw auto;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  height: 100dvh;
  width: 100dvw;
}

/* ============================================================
   TITLE
   ============================================================ */

.Landing .Title {
  position: absolute;
  width: 100vw;
  height: 100px;
  top: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Landing .Title .Text {
  font-size: 8vh;
  font-weight: 900;
  text-align: center;
  display: none;
  margin-bottom: 7vh;
  background-size: 40vh 20vh;
  background-position: top center;
  color: var(--ThemeColor-);
  opacity: 0;
  animation: 1s ease-in-out 0.5s forwards TextAnimeStart;
}

.RangeFirstBackground  .Title .FirstText  { display: flex; }
.RangeSecondBackground .Title .SecondText { display: flex; }
.RangeThirdBackground  .Title .ThirdText  { display: flex; }
.RangeFourthBackground .Title .FourthText { display: flex; }
.RangeFifthBackground  .Title .FifthText  { display: flex; }
.RangeSixthBackground  .Title .SixthText  { display: flex; }

@keyframes TextAnimeStart {
  from { opacity: 0; transform: translateY(2vh); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SLIDER
   ============================================================ */

.Slider {
  position: absolute;
  top: 95%;
  width: auto;
  height: 50px;
  justify-content: center;
  z-index: 1000;
}

.Slider .Changer {
  width: 30px;
  height: 6px;
  background-color: #0d0d0d;
  border-radius: 4px;
  margin: 0 5px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

/* ============================================================
   AREA
   ============================================================ */

   
.Landing .control {
position: absolute;
}

.Landing .control .Area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   ITEMS — hero product cluster
   ============================================================ */

.Landing .Area .Items {
  width: 30vh;
  height: 60vh;
  top: 58%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1000;
}

.Landing .Area .Items .Box {
  position: absolute;
  top: 50%;
  background-repeat: no-repeat;
  opacity: 0;
}

/* Entry animation — one per range so keyframe names stay distinct */
.RangeFirstBackground  .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani1; }
.RangeSecondBackground .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani2; }
.RangeThirdBackground  .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani3; }
.RangeFourthBackground .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani4; }
.RangeFifthBackground  .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani5; }
.RangeSixthBackground  .Area .Items { opacity: 0; transform: translate(-50%, -40%); animation: 1s ease-in-out alternate forwards ItemsBoxcartani5; }

@keyframes ItemsBoxcartani1 { to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ItemsBoxcartani2 { to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ItemsBoxcartani3 { to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ItemsBoxcartani4 { to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ItemsBoxcartani5 { to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ItemsBoxcartani6 { to { opacity: 1; transform: translate(-50%, -50%); } }

@keyframes addin1  { from { opacity: 0; } to { opacity: 1; } }
@keyframes addin6  { from { opacity: 0; } to { opacity: 1; } }
@keyframes addin11 { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   RANGE 1 — Plain Spices
   ============================================================ */

.RangeFirstBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/PlainRange/R2.webp);
  left: 10%; top: 79%; height: 55%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.2s alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse PRF1ANI;
}
.RangeFirstBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/PlainRange/R1.webp);
  top: 35%; height: 135%; width: 230%;
  animation: 0.7s ease-in-out alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse PRF2ANI;
}
.RangeFirstBackground .Area .Items .Box:nth-child(3) {
  background-image: url(/img/range/PlainRange/R5.webp);
  left: 100%; top: 70%; height: 30%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate PRF3ANI;
}
.RangeFirstBackground .Area .Items .Box:nth-child(4) {
  background-image: url(/img/range/PlainRange/R3.webp);
  left: 40%; top: 40%; height: 50%; width: 150%; z-index: -1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate PRF4ANI;
}
.RangeFirstBackground .Area .Items .Box:nth-child(5) {
  left: 0; top: 10%; height: 40%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate PRF5ANI;
}

@keyframes PRF1ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }   100% { transform: translate(-55%, -50%) rotate(3deg); } }
@keyframes PRF2ANI { 0% { transform: translate(-50%, -47%) rotate(-2deg); }  100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes PRF3ANI { 0% { transform: translate(-50%, -50%) rotate(-10deg); } 100% { transform: translate(-45%, -50%) rotate(-7deg); } }
@keyframes PRF4ANI { 0% { transform: translate(-50%, -47%) rotate(0deg); }   100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes PRF5ANI { 0% { transform: translate(-50%, -50%) rotate(-20deg); } 100% { transform: translate(-45%, -50%) rotate(-23deg); } }
@keyframes PRF6ANI { 0% { transform: translate(-50%, -20%) rotate(-20deg); } 100% { transform: translate(-60%, -30%) rotate(-23deg); } }

/* ============================================================
   RANGE 2 — Desserts
   ============================================================ */

.RangeSecondBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/DessertRange/R1.webp);
  left: 10%; top: 85%; height: 23%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.2s alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse DRF1ANI;
}
.RangeSecondBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/DessertRange/R4.webp);
  top: 35%; height: 135%; width: 230%;
  animation: 0.7s ease-in-out alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse DRF2ANI;
}
.RangeSecondBackground .Area .Items .Box:nth-child(3),
.RangeSecondBackground .Area .Items .Box:nth-child(4) {
  background-image: url(/img/range/DessertRange/R5.webp);
  z-index: 1;
  background-size: auto 100%;
  background-position: center center;
}
.RangeSecondBackground .Area .Items .Box:nth-child(3) {
  left: 85%; top: 85%; height: 10%; width: 90%;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate DRF3ANI;
}
.RangeSecondBackground .Area .Items .Box:nth-child(4) {
  left: 120%; top: 30%; height: 15%; width: 90%;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate DRF4ANI;
}
.RangeSecondBackground .Area .Items .Box:nth-child(5),
.RangeSecondBackground .Area .Items .Box:nth-child(6) {
  background-image: url(/img/range/DessertRange/R6.webp);
  width: 90%;
}
.RangeSecondBackground .Area .Items .Box:nth-child(5) {
  left: 130%; top: 48%; height: 10%; z-index: 1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate DRF5ANI;
}
.RangeSecondBackground .Area .Items .Box:nth-child(6) {
  left: 0; top: 10%; height: 15%; z-index: -1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate DRF6ANI;
}

@keyframes DRF1ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }   100% { transform: translate(-55%, -50%) rotate(3deg); } }
@keyframes DRF2ANI { 0% { transform: translate(-50%, -47%) rotate(-2deg); }  100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes DRF3ANI { 0% { transform: translate(-50%, -50%) rotate(-20deg); } 100% { transform: translate(-45%, -50%) rotate(-23deg); } }
@keyframes DRF4ANI { 0% { transform: translate(-50%, -47%) rotate(2deg); }   100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes DRF5ANI { 0% { transform: translate(-50%, -50%) rotate(-20deg); } 100% { transform: translate(-45%, -50%) rotate(-23deg); } }
@keyframes DRF6ANI { 0% { transform: translate(-50%, -20%) rotate(-20deg); } 100% { transform: translate(-60%, -30%) rotate(-23deg); } }

/* ============================================================
   RANGE 3 — Tea Delights
   ============================================================ */

.RangeThirdBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/teadelightsRange/R3.webp);
  left: 0; top: 75%; height: 37%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.2s alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse TRF1ANI;
}
.RangeThirdBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/teadelightsRange/R1.webp);
  top: 45%; height: 115%; width: 270%;
  animation: 0.7s ease-in-out alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse TRF2ANI;
}
.RangeThirdBackground .Area .Items .Box:nth-child(3) {
  background-image: url(/img/range/teadelightsRange/R2.webp);
  left: 140%; top: 70%; height: 42%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate TRF3ANI;
}

@media (max-width: 700px) {
  .RangeThirdBackground .Area .Items .Box:nth-child(2) { height: 70%; width: 180%; }
}

@keyframes TRF1ANI { 0% { transform: translate(-60%, -42%) rotate(0deg); }  100% { transform: translate(-65%, -57%) rotate(3deg); } }
@keyframes TRF2ANI { 0% { transform: translate(-52%, -47%) rotate(2deg); }  100% { transform: translate(-52%, -50%) rotate(0deg); } }
@keyframes TRF3ANI { 0% { transform: translate(-50%, -50%) rotate(-20deg); } 100% { transform: translate(-45%, -50%) rotate(-23deg); } }

/* ============================================================
   RANGE 4 — Rice
   ============================================================ */

.RangeFourthBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/RiceRange/R1.webp);
  left: 5%; top: 80%; height: 33%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.2s alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse RRF1ANI;
}
.RangeFourthBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/RiceRange/R2.webp);
  top: 50%; height: 120%; width: 130%;
  animation: 0.7s ease-in-out alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse RRF2ANI;
}
.RangeFourthBackground .Area .Items .Box:nth-child(3) {
  background-image: url(/img/range/RiceRange/R3.webp);
  left: 120%; top: 60%; height: 50%; width: 90%; z-index: -1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin1,
             4s ease-in-out infinite alternate RRF3ANI;
}

@keyframes RRF1ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }  100% { transform: translate(-55%, -50%) rotate(3deg); } }
@keyframes RRF2ANI { 0% { transform: translate(-50%, -47%) rotate(2deg); }  100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes RRF3ANI { 0% { transform: translate(-60%, -30%) rotate(0deg); }  100% { transform: translate(-65%, -20%) rotate(-2deg); } }

/* ============================================================
   RANGE 5 — Recipe Mixes
   ============================================================ */

.RangeFifthBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/RecipeRange/R2.webp);
  left: 5%; top: 80%; height: 33%; width: 90%; z-index: 1;
  animation: 1s ease-in-out 0.2s alternate forwards addin11,
             4s ease-in-out infinite alternate-reverse RRMF1ANI;
}
.RangeFifthBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/RecipeRange/R1.webp);
  top: 50%; height: 84%; width: 130%;
  animation: 1s ease-in-out alternate forwards addin11,
             4s ease-in-out infinite alternate-reverse RRMF2ANI;
}
.RangeFifthBackground .Area .Items .Box:nth-child(3) {
  left: 110%; top: 68%; height: 25%; width: 30%; z-index: 1;
  animation: 1s ease-in-out 0.4s alternate forwards addin11,
             4s ease-in-out infinite alternate RRMF3ANI;
}
.RangeFifthBackground .Area .Items .Box:nth-child(4) {
  background-image: url(/img/range/RecipeRange/R4.webp);
  left: 105%; top: 35%; height: 35%; width: 70%; z-index: -1;
  animation: 1s ease-in-out 0.6s alternate forwards addin11,
             4s ease-in-out infinite alternate RRMF4ANI;
}
.RangeFifthBackground .Area .Items .Box:nth-child(5) {
  background-image: url(/img/range/RecipeRange/R5.webp);
  left: 50%; top: 50%; height: 35%; width: 70%; z-index: -1;
  animation: 1s ease-in-out 0.8s alternate forwards addin11,
             4s ease-in-out infinite alternate RRMF5ANI;
}

@keyframes RRMF1ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }  100% { transform: translate(-55%, -50%) rotate(3deg); } }
@keyframes RRMF2ANI { 0% { transform: translate(-50%, -50%) rotate(-2deg); } 100% { transform: translate(-50%, -53%) rotate(0deg); } }
@keyframes RRMF3ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }  100% { transform: translate(-45%, -50%) rotate(3deg); } }
@keyframes RRMF4ANI { 0% { transform: translate(-50%, -53%) rotate(0deg); }  100% { transform: translate(-45%, -50%) rotate(30deg); } }
@keyframes RRMF5ANI { 0% { transform: translate(-80%, -50%) rotate(-20deg) scale(1.5); } 100% { transform: translate(-100%, -50%) rotate(-30deg) scale(2); } }

/* ============================================================
   RANGE 6 — Salt
   ============================================================ */

.RangeSixthBackground .Area .Items .Box:nth-child(1) {
  background-image: url(/img/range/SaltRange/R1.webp);
  left: 65%; top: 80%; height: 40%; width: 140%; z-index: 1;
  animation: 0.7s ease-in-out 0.2s alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse SRF1ANI;
}
.RangeSixthBackground .Area .Items .Box:nth-child(2) {
  background-image: url(/img/range/SaltRange/R4.webp);
  top: 40%; height: 130%; width: 130%;
  animation: 0.7s ease-in-out alternate forwards addin1,
             4s ease-in-out infinite alternate-reverse SRF2ANI;
}
.RangeSixthBackground .Area .Items .Box:nth-child(3) {
  background-image: url(/img/range/SaltRange/R3.webp);
  left: 90%; top: 30%; height: 60%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.4s alternate forwards addin6,
             4s ease-in-out infinite alternate SRF3ANI;
}
.RangeSixthBackground .Area .Items .Box:nth-child(4) {
  background-image: url(/img/range/SaltRange/R2.webp);
  left: 10%; top: 65%; height: 15%; width: 90%; z-index: 1;
  animation: 0.7s ease-in-out 0.5s alternate forwards addin6,
             4s ease-in-out infinite alternate SRF4ANI;
}

@keyframes SRF1ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }  100% { transform: translate(-55%, -50%) rotate(3deg); } }
@keyframes SRF2ANI { 0% { transform: translate(-50%, -47%) rotate(2deg); }  100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes SRF3ANI { 0% { transform: translate(-50%, -50%) rotate(0deg); }  100% { transform: translate(-45%, -50%) rotate(-2deg); } }
@keyframes SRF4ANI { 0% { transform: translate(-45%, -50%) rotate(0deg); }  100% { transform: translate(-50%, -50%) rotate(2deg); } }

/* ============================================================
   ITEMSS — horizontal product strip
   ============================================================ */

.Landing .Area .Itemss {
  position: absolute;
  width: 30vh;
  height: 60vh;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -65%);
  z-index: 900;
}

.Landing .Area .Itemss .Box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) scale(2);
  width: 50%;
  height: 32%;
  opacity: 0;
  background-color: #fff;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  transition: 0.5s;
  cursor: pointer;
}

/* Active centre slot is always hidden */
.RangeFirstBackground  .Area .Itemss .Box:nth-child(5),
.RangeSecondBackground .Area .Itemss .Box:nth-child(5),
.RangeThirdBackground  .Area .Itemss .Box:nth-child(5),
.RangeFourthBackground .Area .Itemss .Box:nth-child(5),
.RangeFifthBackground  .Area .Itemss .Box:nth-child(5),
.RangeSixthBackground  .Area .Itemss .Box:nth-child(5) {
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* ── Range 1 — Plain Spices strip ── */

.RangeFirstBackground .Area .Itemss .Box:nth-child(1) { background-image: url(/img/range/PlainSpiceslanding/R4.webp); animation: 1s ease-in-out 0.8s alternate forwards Ani1_1; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/PlainSpiceslanding/R1.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani1_2; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/PlainSpiceslanding/R3.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani1_3; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/PlainSpiceslanding/R2.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani1_4; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/PlainSpiceslanding/R5.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani1_5; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/PlainSpiceslanding/R6.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani1_6; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/PlainSpiceslanding/R7.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani1_7; }
.RangeFirstBackground .Area .Itemss .Box:nth-child(9) { background-image: url(/img/range/PlainSpiceslanding/R8.webp); z-index: 1; animation: 1s ease-in-out 0.8s alternate forwards Ani1_8; }

@keyframes Ani1_1 { to { transform: translate(-520%, -50%) scale(0.80); opacity: 1; } }
@keyframes Ani1_2 { to { transform: translate(-425%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani1_3 { to { transform: translate(-325%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani1_4 { to { transform: translate(-220%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani1_5 { to { transform: translate( 120%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani1_6 { to { transform: translate( 225%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani1_7 { to { transform: translate( 325%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani1_8 { to { transform: translate( 420%, -50%) scale(0.80); opacity: 1; } }

/* ── Range 2 — Desserts strip ── */

.RangeSecondBackground .Area .Itemss .Box:nth-child(1) { background-image: url(/img/range/DessertLanding/R2.webp); animation: 1s ease-in-out 0.8s alternate forwards Ani2_1; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/DessertLanding/R8.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani2_2; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/DessertLanding/R4.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani2_3; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/DessertLanding/R1.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani2_4; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/DessertLanding/R7.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani2_5; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/DessertLanding/R5.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani2_6; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/DessertLanding/R3.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani2_7; }
.RangeSecondBackground .Area .Itemss .Box:nth-child(9) { background-image: url(/img/range/DessertLanding/R6.webp); z-index: 1; animation: 1s ease-in-out 0.8s alternate forwards Ani2_8; }

@keyframes Ani2_1 { to { transform: translate(-540%, -50%) scale(0.80); opacity: 1; } }
@keyframes Ani2_2 { to { transform: translate(-445%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani2_3 { to { transform: translate(-345%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani2_4 { to { transform: translate(-240%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani2_5 { to { transform: translate( 135%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani2_6 { to { transform: translate( 240%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani2_7 { to { transform: translate( 340%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani2_8 { to { transform: translate( 435%, -50%) scale(0.80); opacity: 1; } }

/* ── Range 3 — Tea Delights strip (no child 1 or 9) ── */

.RangeThirdBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/TeaDelightsLanding/R5.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani3_2; }
.RangeThirdBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/TeaDelightsLanding/R3.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani3_3; }
.RangeThirdBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/TeaDelightsLanding/R2.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani3_4; }
.RangeThirdBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/TeaDelightsLanding/R6.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani3_5; }
.RangeThirdBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/TeaDelightsLanding/R1.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani3_6; }
.RangeThirdBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/TeaDelightsLanding/R4.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani3_7; }

@keyframes Ani3_2 { to { transform: translate(-535%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani3_3 { to { transform: translate(-435%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani3_4 { to { transform: translate(-330%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani3_5 { to { transform: translate( 230%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani3_6 { to { transform: translate( 335%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani3_7 { to { transform: translate( 435%, -50%) scale(0.85); opacity: 1; } }

/* ── Range 4 — Rice strip ── */

.RangeFourthBackground .Area .Itemss .Box:nth-child(1) { background-image: url(/img/range/RiceLanding/R4.webp); animation: 1s ease-in-out 0.8s alternate forwards Ani4_1; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/RiceLanding/R3.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani4_2; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/RiceLanding/R2.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani4_3; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/RiceLanding/R1.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani4_4; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/RiceLanding/R5.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani4_5; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/RiceLanding/R6.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani4_6; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/RiceLanding/R7.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani4_7; }
.RangeFourthBackground .Area .Itemss .Box:nth-child(9) { background-image: url(/img/range/RiceLanding/R8.webp); z-index: 1; animation: 1s ease-in-out 0.8s alternate forwards Ani4_8; }

@keyframes Ani4_1 { to { transform: translate(-520%, -50%) scale(0.80); opacity: 1; } }
@keyframes Ani4_2 { to { transform: translate(-425%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani4_3 { to { transform: translate(-325%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani4_4 { to { transform: translate(-220%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani4_5 { to { transform: translate( 120%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani4_6 { to { transform: translate( 225%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani4_7 { to { transform: translate( 325%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani4_8 { to { transform: translate( 420%, -50%) scale(0.80); opacity: 1; } }

/* ── Range 5 — Recipe Mixes strip ── */

.RangeFifthBackground .Area .Itemss .Box:nth-child(1) { background-image: url(/img/range/RecipeMixLanding/R5.webp); animation: 1s ease-in-out 0.8s alternate forwards Ani5_1; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/RecipeMixLanding/R6.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani5_2; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/RecipeMixLanding/R7.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani5_3; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/RecipeMixLanding/R8.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani5_4; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/RecipeMixLanding/R4.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani5_5; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/RecipeMixLanding/R3.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani5_6; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/RecipeMixLanding/R2.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani5_7; }
.RangeFifthBackground .Area .Itemss .Box:nth-child(9) { background-image: url(/img/range/RecipeMixLanding/R1.webp); z-index: 1; animation: 1s ease-in-out 0.8s alternate forwards Ani5_8; }

@keyframes Ani5_1 { to { transform: translate(-520%, -50%) scale(0.80); opacity: 1; } }
@keyframes Ani5_2 { to { transform: translate(-425%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani5_3 { to { transform: translate(-325%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani5_4 { to { transform: translate(-220%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani5_5 { to { transform: translate( 120%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani5_6 { to { transform: translate( 225%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani5_7 { to { transform: translate( 325%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani5_8 { to { transform: translate( 420%, -50%) scale(0.80); opacity: 1; } }

/* ── Range 6 — Salt strip (no child 1 or 9) ── */

.RangeSixthBackground .Area .Itemss .Box:nth-child(2) { background-image: url(/img/range/SaltLanding/R1.webp); animation: 1s ease-in-out 0.6s alternate forwards Ani6_2; }
.RangeSixthBackground .Area .Itemss .Box:nth-child(3) { background-image: url(/img/range/SaltLanding/R7.webp); animation: 1s ease-in-out 0.4s alternate forwards Ani6_3; }
.RangeSixthBackground .Area .Itemss .Box:nth-child(4) { background-image: url(/img/range/SaltLanding/R4.webp); animation: 1s ease-in-out 0.2s alternate forwards Ani6_4; }
.RangeSixthBackground .Area .Itemss .Box:nth-child(6) { background-image: url(/img/range/SaltLanding/R6.webp); z-index: 4; animation: 1s ease-in-out 0.2s alternate forwards Ani6_5; }
.RangeSixthBackground .Area .Itemss .Box:nth-child(7) { background-image: url(/img/range/SaltLanding/R3.webp); z-index: 3; animation: 1s ease-in-out 0.4s alternate forwards Ani6_6; }
.RangeSixthBackground .Area .Itemss .Box:nth-child(8) { background-image: url(/img/range/SaltLanding/R2.webp); z-index: 2; animation: 1s ease-in-out 0.6s alternate forwards Ani6_7; }

@keyframes Ani6_2 { to { transform: translate(-425%, -50%) scale(0.85); opacity: 1; } }
@keyframes Ani6_3 { to { transform: translate(-325%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani6_4 { to { transform: translate(-220%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani6_5 { to { transform: translate( 120%, -50%) scale(0.95); opacity: 1; } }
@keyframes Ani6_6 { to { transform: translate( 225%, -50%) scale(0.90); opacity: 1; } }
@keyframes Ani6_7 { to { transform: translate( 325%, -50%) scale(0.85); opacity: 1; } }