/* ===== Base ===== */
body{
  display:flex;
  flex-direction:column;
  background-color:#eeeeee;
  margin:0;
}

/* Two columns */
.Both_sides{
  display:flex;
  flex-direction:row;
  align-items:center;
  column-gap: 10px;
  row-gap: 0px;
  margin-top:10px;
}
/* Swap columns automatically in RTL */
html[dir="rtl"] .Both_sides{ 
  column-gap: 10px; 
  row-gap: 0px;
  flex-direction:row-reverse;
 }

/* ===== Left side ===== */
.left_side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  width: 50%;
  background-color:#d0f0c0;
  background:linear-gradient(360deg,hsl(100 62% 75%) 0%,hsl(101 61% 92%) 100%);
  margin-block:15px;
  margin-inline: 15px 0;          
  border-radius:10px;
  text-align:center;
}
html[dir="rtl"] .left_side{
  width: 50%;
  margin-inline: 0px 15px;
}

.left_side h1{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:transparent;
  margin-block:0 5%;
  margin-inline:0;
  padding:0;
  color:#2E7D32;
  font-size:80px;
  line-height:1.1;
  width:70%;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:645;
}
html[dir="rtl"] .left_side p{
  margin-top: 10px;
  margin-right: -185px;

}
.left_side p{
  background-color:transparent;
  justify-content:center;
  align-items:center;
  color:#7e7e7e;
  font-size:25px;
  width:55%;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 450;

}
html[dir="rtl"] .left_side span:nth-child(1){
  margin-right: -255px;
  margin-top: 0px;
  margin-bottom: 25px;
}

.left_side span:nth-child(1){
  background-color:transparent;
  margin-block:15% 0;
  margin-inline:0;
  padding:0;
  color:#2E7D32;
  font-size:80px;
  line-height:1.1;
  justify-content:center;
  align-items:center;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:645;
}
html[dir="rtl"] .left_side span:nth-child(2){
  margin-bottom: 25px;
}
.left_side span:nth-child(2){
  background-color:transparent;
  margin-inline-start:-60px;      
  padding:0;
  justify-content:center;
  align-items:center;
  color:#f6f6f6;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:645;
}
html[dir="rtl"] .left_side span:nth-child(3){
    margin-bottom: 25px;
  margin-right: -150px;
}
.left_side span:nth-child(3){
  background-color:transparent;
  margin-inline-start:-5px;
  margin-block-start:10px;
  justify-content:center;
  align-items:center;
  color:#3c3c3c;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:645;
}

/* ===== Right side ===== */
.right_side{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width: 50%;
  background-color:#f0faea;
  background:linear-gradient(360deg,hsl(100 62% 75%) 0%,hsl(101 61% 92%) 100%);
  margin-block:15px;
  margin-inline:0 15px;           
  border-radius:10px;
}
html[dir="rtl"] .right_side{
  width: 50%;
  margin-inline: 15px 0px;
}

/* ===== Buttons ===== */
.Buttons_div{
  display:flex;
  flex-direction:row;
  width: 350px;
  height: 125px;
  justify-content:center;
  align-items:center;
  column-gap:50px;
  background-color:transparent;
  margin-block-start:5%;
}
.Buttons_div button:nth-child(1){
  background-color:#2E7D32;color:#fff;border-radius:15px;font-size:22px;height:50px;border:none;padding:10px;font-weight:525;
}
.Buttons_div button:nth-child(1):hover{ background-color:hsl(123 46% 50%); outline:2px solid hsl(123 46% 45%); }
.Buttons_div button:nth-child(1):active{ background-color:hsl(123 46% 40%); outline:2px solid hsl(123 46% 45%); }

.Buttons_div button:nth-child(2){
  background-color:transparent;color:#9f9f9f;border-radius:20px;font-size:21px;height:56px;border:3px solid hsl(100 62% 78%);padding:10px;
}
.Buttons_div button:nth-child(2):hover{ background-color:hsl(100 62% 60%); color:#fff; }
.Buttons_div button:nth-child(2):active{ background-color:hsl(100 62% 73%); color:#fff; }

/* ===== Pager ===== */
.Pager_button{
  height: 62px;
  width: 65px;
  margin-top: 40px;
  margin-inline: 0px;           
  justify-content:center;
  align-items:center;
  border-radius: 50%;
  background-color:#f4f4f4;
  color:#fff;
  text-align:center;
  font-size: 15px;
  border:none;
  outline:2px solid #474747;
  z-index:2;
  box-shadow:-8px 20px 20px 1px rgba(60,60,60,.25);
}
.Pager_button:hover{ background-color:hsl(0 0% 86%); }
.Pager_button:active{ background-color:hsl(0 0% 90%); }

/* Flip chevron in RTL */
html[dir="rtl"] .chevron_icon{ transform:scaleX(-1); }
.chevron_icon{
  margin-inline-start: -5px;   
  background-color:transparent;
  color:#fff;
  width: 60px;
  height: 60px;
  justify-content:center;
  align-items:center;
}

/* ===== Facts card ===== */
.Facts_div{
  position:relative; overflow:hidden;
  height:60%; width:55%;
  background-color:hsl(100 62% 98%);
  background:linear-gradient(220deg,hsl(0 0% 100%) 50%,hsl(100 62% 87%) 100%);
  display:flex; flex-direction:column; align-items:center;
  border-radius:20px; box-shadow:20px 20px 20px -10px rgba(60,60,60,.10);
  margin-top: 100px;
}

.Facts_div h4{
  background-color:transparent;color:#505050;margin-block-start:10%;
  width:200px;margin-inline-start:-100px;margin-block-end:1%;
}
.Facts_div h1{
  background-color:transparent;color:#282828;width:250px;margin-inline-start:-50px;margin-block:1% 1%;
}
.Facts_div p{
  background-color:transparent;color:#505050;width:225px;margin-inline-start:-75px;margin-block-start:1%;
}
.Facts_div ul{
  color:#505050;width:200px;margin-inline-start:-100px;margin-block-start:7%;
  line-height:1.5;font-size:18px;padding-inline-start:1.2rem; 
}

/* Carousel core */
#factsTrack{
  display:flex;height:100%;width:100%;
  transition:transform .30s ease;
}
.fact{
  display:flex;flex-direction:column;flex:0 0 100%;height:100%;align-items:center;
}
.Facts_div .fact h4{ background-color:transparent;color:#505050;margin-block-start:10%;width:200px;margin-inline-start:-100px;margin-block-end:1%;font-size:22px; }
.Facts_div .fact h1{ background-color:transparent;color:#282828;width:250px;margin-inline-start:-50px;margin-block:1% 1%; }
.Facts_div .fact p { background-color:transparent;color:#505050;width:225px;margin-inline-start:-75px;margin-block-start:20px; }
.Facts_div .fact ul{ color:#505050;width:200px;margin-inline-start:-100px;margin-block-start:20px;line-height:1.5;font-size:18px;padding-inline-start:1.2rem; }

/* Dots */
.dot_nav{
  position:absolute;
  inset-inline:0;                 
  bottom:20px;
  height:10px; display:flex; justify-content:center; align-items:center; gap:20px;
  pointer-events:auto; z-index:5;
}
.dot_nav .dot{ width:10px;height:10px;border-radius:50%;background:#dce9df; }
.dot_nav .dot-active{
  position:absolute; top:50%; inset-inline-start:-10px; /* initial; moved in JS */
  width:15px;height:15px;border-radius:50%;background:#45b976;
  box-shadow:0 4px 10px rgba(69,185,118,.25);
  transform:translateY(-50%); transition:transform .30s ease; pointer-events:none;
}

/* ===== Middle section ===== */
.Mid_sides{
  display:flex;
  width: 100%;
  margin-top:0; 
  flex-direction:row; 
  align-items:center; 
  justify-content:center; 
  column-gap: 10px;
}
html[dir="rtl"] .Mid_sides{
  column-gap: 10px;
}
.Mid_sides .left_side{ 
  display:flex; 
  flex-direction:column; 
  justify-content: center;
  align-items: start;
  width: 50%;
  background-color:hsl(100 62% 95%); margin:0; border-radius:10px;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25); font-weight:400;
  margin-inline: 15px 0px;      
}
html[dir="rtl"] .Mid_sides .left_side{
  height: 100vh;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: start;
  width: 50%;
  margin-right: 0px;
  margin-left: 0px;
  background-color:hsl(100 62% 95%); margin:0; border-radius:10px;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25); font-weight:400;
  margin-inline: 15px 0px;      
}

.Mid_sides .left_side span:nth-child(1){
  margin-top:0;  
  margin-left: 25px; 
  font-size:100px;
}
html[dir="rtl"] .Mid_sides .left_side span:nth-child(1){
  margin-top:0; 
  margin-right: 40px; 
  font-size: 100px;
}
.Mid_sides .left_side span:nth-child(2){
  font-size:80px; 
  margin-left: 55px; 
  background-color:#fff; 
  border-radius:15px; 
  margin-top:25px; 
  color:#474747;
}
html[dir="rtl"] .Mid_sides .left_side span:nth-child(2){
  font-size:80px; 
  margin-right: 125px; 
  background-color:#fff; 
  border-radius:15px; 
  margin-top:25px; 
  color:#474747;
}
.Mid_sides .left_side span:nth-child(3){ font-size:80px; margin-left: 125px; }
html[dir="rtl"]  .Mid_sides .left_side span:nth-child(3){ 
   font-size:80px;
   margin-right: 180px;
}
.Mid_sides .left_side span:nth-child(4){
  font-size:90px; 
  margin-left: 250px; 
  color:#fff; 
  background-color:#353535; 
  border-radius:15px; 
  margin-top:15px;
  padding: 2px 20px;
}
html[dir="rtl"] .Mid_sides .left_side span:nth-child(4){
  font-size:90px; 
  margin-right: 525px; 
  color:#fff;
  background-color:#353535;
  border-radius: 15px; 
  margin-top: 15px;
  padding: 2px 20px;
}
.Mid_sides .left_side span:nth-child(5){
  font-size:28px; 
  width:400px; 
  margin-top:40px; 
  color:#474747; 
  margin-left: 155px;
}
 html[dir="rtl"] .Mid_sides .left_side span:nth-child(5){
  font-size:28px; 
  width:400px; 
  margin-top:40px;
  color:#474747; 
  margin-right: 180px;
}
.Mid_sides .right_side{
  display:flex; flex-direction:column; 
  height:100vh; 
  width: 50%; 
  justify-content:center; 
  align-items:center;
  background-color:#e6ffec; 
  margin:0; 
  border-radius:10px;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25); 
  z-index:0;
  margin-inline: 0px 15px;       
}

html[dir="rtl"] .Mid_sides .right_side{
  width: 50%;
  margin-right: 0px;
  margin-left: 0px;
  margin-inline: 0px 15px;
}


/* normalize shared margins */
.Both_sides .left_side,
.Both_sides .right_side,
.Mid_sides .left_side,
.Mid_sides .right_side{
  margin-block:2px;
  box-shadow:none;
}

/* ===== Branding ===== */
#leaf_icon{ width:70px; height:70px; background-color:transparent; }

.leaf_div{
  display:flex; flex-direction:row; justify-content:center; align-items:center;
  margin-block:0; margin-inline:130px auto; 
}
.leaf_div h1{
  background-color:transparent;color:#1d5120; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:35px;font-weight:650; margin-inline-start:-10px; margin-block:0;
}

/* ===== Fact icons ===== */
.cartoon_icons-eggs{ width:100px;height:100px; margin-inline-start:190px; margin-block-start:-65px; }
html[dir="rtl"] .cartoon_icons-eggs {width:100px;height:100px; margin-inline-start: 160px; margin-block-start:-10px;}
.cartoon_icons-steak{ width:100px;height:100px; margin-inline-start:190px; margin-block: -165px 80px; }
html[dir="rtl"] .cartoon_icons-steak{ width:100px;height:100px; margin-inline-start: 125px; margin-block: -50px 50px; }
.cartoon_icons-chicken{ width:100px;height:100px; margin-inline-start:238px; margin-block: -142px 80px; }
html[dir="rtl"] .cartoon_icons-chicken{ width:100px;height:100px; margin-inline-start:200px; margin-block: -142px 80px; }
.cartoon_veggies-icon{ width:225px;height:250px; margin-inline-start:125px; margin-block-start:-130px; }
html[dir="rtl"] .cartoon_veggies-icon{ width:225px;height:250px; margin-inline-start:125px; margin-block-start:-60px; }
.cartoon_water-bottel-icon{ width:170px;height:170px; margin-inline-start:185px; margin-block-start:-130px; }
html[dir="rtl"] .cartoon_water-bottel-icon{ width:170px;height:170px; margin-inline-start:185px; margin-block-start:-25px; }
.cartoon_sleep-badge-flat-icon{ width:170px;height:170px; margin-inline-start:150px; margin-block-start:-60px; }
html[dir="rtl"] .cartoon_sleep-badge-flat-icon{ width:170px;height:170px; margin-inline-start:150px; margin-block-start:-15px; }
.cartoon_dumbbells-stopwatch-icon{ width:235px;height:235px; margin-inline-start:130px; margin-block-start:-115px; }
html[dir="rtl"] .cartoon_dumbbells-stopwatch-icon{ width:235px;height:235px; margin-inline-start:130px; margin-block-start:-40px; }
.cartoon_scale-icon{ width:250px;height:250px; margin-inline-start:110px; margin-block-start:-165px; }
html[dir="rtl"] .cartoon_scale-icon{ width:250px;height:250px; margin-inline-start:110px; margin-block-start:-65px; }
.cartoon_tracking-progress-icon{ width:250px;height:250px; margin-inline-start:115px; margin-block-start:-175px; }
html[dir="rtl"] .cartoon_tracking-progress-icon{ width:250px;height:250px; margin-inline-start:115px; margin-block-start:-65px; }

/* ===== Footer ===== */
.footer_wrapper{
  display:flex; flex-direction:column; background-color:#142637; align-items:center; border-radius:10px;
  margin:5px; 
}
.brand{ display:flex; flex-direction:row; background-color:transparent; text-align:center; justify-content:center; align-items:center; }
.brand h1{ font-size:30px;color:#fff;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-inline-start:-10px; }

.products, .resources, .company{
  height:250px; width:250px; background-color:transparent; color:white; text-align:start; /* was left */
}
.company{ color:white; }

.div_group{ display:flex; flex-direction:row; background-color:transparent; color:white; }

.start_button{ display:flex; flex-direction:column; color:white; background-color:transparent; text-align:center; }
.start_button button{
  border-radius:30px; width:300px; display:flex; flex-direction:row; justify-content:center; align-items:center; column-gap:10px; height:50px;
  margin-block:5px 25px; color:#3863fe; font-size:20px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color:#fff; font-weight:650; text-align:center; border:none;
}
.start_button button:hover{ background-color:#14212d; color:white; font-size:21px; }
.start_button a:hover{ background-color:transparent; color:#3863fe; font-size:21px; }

.arrow{ margin-block-start:3px; width:22px; height:22px; }

.copy_right{
  display:flex; flex-direction:row; column-gap:10px; row-gap:0; color:#cfcfcf; background-color:transparent;
  height:90px; width:400px; flex-wrap:wrap; font-family:Arial, Helvetica, sans-serif; font-weight:10; margin-block:30px 40px;
  text-align:center; justify-content:center; align-items:center; line-height:.01;
}
.copy_right a{ text-decoration:none; color:#cfcfcf; }
.copy_right a:hover{ color:#fff; }

/* ===== Promotion card ===== */
.right_side .Promotion_card{
  display:flex; flex-direction:column; width:65%; height:70%;
  background:linear-gradient(220deg,hsl(0 0% 100%) 50%,hsl(100 62% 87%) 100%);
  border-radius:25px;
}
.Promotion_card h1{ margin-inline-start:65px; justify-content:center; align-items:center; }
.Promotion_card h3{ 
  justify-content: center; 
  align-items: center; 
  margin-block:10px 0; 
  text-align: center;

  margin-inline-start: 40px; 
}
html[dir="rtl"] .Promotion_card h3{ 
  justify-content: center; 
  align-items: center; 
  margin-block: 10px 0; 
  padding-right: 15px;
  text-align: right;
  margin-inline-end: 40px;
}
.Promotion_card h3:nth-child(3){
  justify-content:center; align-items:center; margin-block:10px 0; margin-inline-start:40px;
  color:#fff; background-color:#474747; border-radius:15px; width:190px; padding:5px;
}
.Promotion_card h3:nth-child(4){
  color:#232323; background-color:#7c7c7c; border-radius:15px; width:190px; padding:5px;
}
.Promotion_card p{
  justify-content:center; align-items:center; margin-inline-start:40px; margin-block-start:25px; width:200px; height:100px;
}
html[dir="rtl"] .Promotion_card p{ 
width:145px;
}
.Promotion_card ul{
  justify-content:center; align-items:center; margin-inline-start:20px; margin-block-start:40px;
}
.Promotion_card #leaf_icon{ width:70px; height:70px; margin-block-end:-75px; background-color:transparent; }

/* ===== Bottom section ===== */
.Bottom_sides{
  display:flex; 
  flex-direction:row; 
  height:100vh; 
  width:100%; 
  background-color:transparent; 
  margin-top: 5px; 
  margin-bottom:5px;
  column-gap: 10px; 
  margin-inline-end:0; 
  
}
html[dir="rtl"] .Bottom_sides{
  display:flex; 
  flex-direction:row; 
  height:100vh; 
  width:100%; 
  background-color:transparent; 
  margin-top:5px; 
  column-gap: 10px; 
  margin-inline-end:0; 
  margin-bottom:5px;
}
.Bottom_sides .bottom_left{
  height:100vh; 
  width:50%; 
  background-color:#d0f0c0;
  background:linear-gradient(360deg,hsl(100 62% 77%) 0%,hsl(98 100% 98%) 100%);
  margin-top:5px; 
  background-color:black; 
  margin-inline-start:15px; 
  border-radius:10px;
}
html[dir="rtl"] .Bottom_sides .bottom_left{
  height:100vh; 
  width: 49.55%; 
  background-color:#d0f0c0;
  background:linear-gradient(360deg,hsl(100 62% 77%) 0%,hsl(98 100% 98%) 100%);
  margin-top:5px; 
  background-color:black; 
  margin-inline-start:15px; 
  border-radius:10px;
}
.Bottom_sides .bottom_right{
  display:flex; 
  flex-direction:row; 
  justify-content:center; 
  align-items:center;
  height:100vh; 
  width:50%; 
  background-color:#d0f0c0;
  background:linear-gradient(360deg,hsl(100 62% 77%) 0%,hsl(98 100% 98%) 100%);
  margin-top:5px; 
  margin-inline-end:15px; 
  border-radius:10px;
}
html[dir="rtl"] .Bottom_sides .bottom_right{
  direction: ltr;
  display:flex; 
  flex-direction:row; 
  justify-content:center; 
  align-items:center;
  height: 100vh; 
  width: 47.65%; 
  background-color:#d0f0c0;
  background:linear-gradient(360deg,hsl(100 62% 77%) 0%,hsl(98 100% 98%) 100%);
  margin-top:5px; 
  margin-inline-end: 5px; 
  margin-inline-start: 10px;
  border-radius:10px;
}

.bottom_right img{
  width:240px; height:480px; rotate:5deg; border-radius:25px; justify-content:center; align-items:center;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25);
}
.bottom_right img:nth-child(2){
  width:252px; height:504px; rotate:7deg; border-radius:25px; justify-content:center; align-items:center;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25); margin-inline-start:-75px;
}
.bottom_right img:nth-child(3){
  width:290px; height:554.5px; rotate:8deg; border-radius:25px; justify-content:center; align-items:center;
  box-shadow:20px 20px 20px -8px rgba(60,60,60,.25); margin-inline-start:-75px; margin-block-end:20px;
}

/* Bottom left text blocks */
.bottom_left{ display:flex; flex-direction:column; align-items:flex-start; }
.bottom_left span:nth-child(1){
  font-size:50px; font-weight:600; width:450px; margin-inline-start:75px; margin-block-start:25px;
}
.bottom_left span:nth-child(2){
  color:#fff; background-color:#2E7D32; font-size:37px; margin-inline-start:330px; margin-block-start:-15px;
  border-radius:25px; font-weight:580; padding:7.5px; rotate:4deg; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align:center;
}
.bottom_left span:nth-child(3){
  font-size:37px; margin-inline-start:70px; margin-block-start:10px; border-radius:25px; font-weight:580; padding:7.5px; text-align:center;
}
.bottom_left span:nth-child(4){
  font-size:35px; font-weight:580; margin-inline-start:330px; background-color:#292929; color:#fff; border-radius:25px; padding:7.5px; rotate:6deg;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align:center;
}
.bottom_left span:nth-child(5){
  font-size:37px; margin-inline-start:70px; margin-block-start:10px; border-radius:25px; font-weight:580; padding:7.5px; text-align:center;
}
.bottom_left span:nth-child(6){
  font-size:35px; font-weight:580; margin-inline-start:330px; background-color:#fff; color:#1b1b1b; border-radius:25px; padding:7.5px; rotate:4deg;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align:center;
}
.bottom_left span:nth-child(7){
  font-size:37px; margin-inline-start:70px; margin-block-start:10px; border-radius:25px; font-weight:580; padding:7.5px; text-align:center;
}
.bottom_left span:nth-child(8){
  font-size:35px; font-weight:580; margin-inline-start:260px; background-color:#fff; color:#1b1b1b; border-radius:25px; padding:7.5px; rotate:4deg;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align:center;
}
.bottom_left span:nth-child(9){
  font-size:37px; margin-inline-start:400px; margin-block-start:10px; border-radius:25px; font-weight:580; padding:7.5px; color:#fff; text-align:center;
}
.bottom_left span:nth-child(10){
  font-size:30px; margin-inline-start:40px; margin-block-start:15px; border-radius:10px; font-weight:580; padding:7.5px; background-color:#fff; text-align:center;
}

/* ===== Direction-sensitive tweaks (optional) ===== */
/* If you want the two top panels to keep “hero on reading start” automatically: */
html[dir="ltr"] .Both_sides{ flex-direction:row; }
html[dir="rtl"] .Both_sides{ flex-direction:row-reverse; }


#factsTrack {
  direction: ltr !important;
  flex-direction: row !important;
}
.fact {
  width: 100%;
}
html[dir="rtl"] .fact {
  direction: rtl; 
  text-align: right;
}

html[dir="rtl"] .Facts_div h4,
html[dir="rtl"] .Facts_div h1,
html[dir="rtl"] .Facts_div p,
html[dir="rtl"] .Facts_div ul {
  margin-inline-start: 0 !important; 
  margin-left: 0 !important;
  margin-right: 40px !important;    
  text-align: right !important;
  width: 85% !important;           
}


html[dir="rtl"] .Facts_div ul {
  padding-right: 2rem !important;
  padding-left: 0 !important;
}



html[dir="rtl"] .dot_nav {
  direction: rtl !important;
  flex-direction: row !important;
}

html[dir="rtl"] .dot_nav .dot-active {
  left: -10px !important;
  right: auto !important;             
  inset-inline-start: auto !important; 
}





      /* ===================== index_7 — MEDIA QUERIES ===================== */

/* ── Big phones / small tablets (300px–828px) ───────────────────────────── */
@media (min-width: 300px) and (max-width: 899px){

  
  .Both_sides, 
  .Mid_sides, 
  .Bottom_sides {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    column-gap: 0px;
    row-gap: 5px;
    margin-top: 1px;
    margin-bottom: 10px;
    overflow-x: hidden; 
  }
  .Both_sides{
    margin-top: 45px;
  }
  .Mid_sides{
    margin-top: -15px;
  }

  
  .left_side, 
  .right_side, 
  .Mid_sides .left_side, 
  .Mid_sides .right_side,
  .Bottom_sides .bottom_left, 
  .Bottom_sides .bottom_right {
    width: 95% !important;
    height: 100% !important;
    margin: 2.5px auto !important; 
    padding-bottom: 20px;
    border-radius: 15px;
  }
  .Mid_sides .left_side{
    margin-top: 15px !important;
  }
  .Both_sides .left_side{
     margin-top: 15px !important;
  }


  .left_side h1 {
    font-size: 45px !important; 
    width: 100% !important;
    
    
  }
  .left_side p {
    width: 90% !important;
    font-size: 18px !important;
    margin: 10px auto !important;
  }
  .left_side span:nth-child(1) {
    font-size: 45px !important;
    margin-block: 15px 5px !important;
  }
  html[dir="rtl"] .left_side span:nth-child(1) {
    margin-inline-start: -150px !important;
  }
  html[dir="rtl"] .left_side span:nth-child(3){
  margin-inline-start: -90px !important;
  }
 
  .left_side span:nth-child(2),
  .left_side span:nth-child(3) {
    margin-inline-start: 0 !important;
    font-size: 45px !important;
    margin-block: 15px 5px !important;
  }

  
  .Buttons_div {
    width: 75% !important;
    flex-direction: row; 
    height: auto !important;
    gap: 25px;
    margin-bottom: 15px;
  }
  .Buttons_div button {
    width: 135px !important;
  }


  .Facts_div {
    width: 90% !important;
    height: auto !important;
    min-height: 250px; 
    max-height: 500px;      
    padding: 20px 10px;
    margin: 20px auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }


  .fact {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .Facts_div h4, 
  .Facts_div .fact h4,
  .Facts_div h1, 
  .Facts_div .fact h1,
  .Facts_div p, 
  .Facts_div .fact p {
    width: 95% !important;
    margin: 10px auto !important; 
    margin-inline-start: auto !important; 
    text-align: center !important;
    position: static !important;
  }

  .Facts_div h1, .Facts_div .fact h1 {
    font-size: 26px !important;
    line-height: 1;
  }

  /* Fix the Bullet Points */
  .Facts_div ul, .Facts_div .fact ul {
    width: 100% !important;
    margin: 15px auto !important;
    margin-inline-start: auto !important; 
    padding-inline-start: 0 !important;    
    text-align: center !important;
    list-style-position: inside !important; 
  }


  [class*="cartoon_"] {
    margin: 5px auto !important; 
    margin-inline-start: auto !important; 
    display: block !important;
    width: 250px !important;   
    height: 250px !important;
    position: static !important;  
  }
  .cartoon_icons-eggs{
    margin: 15px auto !important; 
    margin-inline-start: auto !important; 
    display: block !important;
    width: 125px !important;     
    height: 125px !important;
    position: static !important; 
    }
    .cartoon_icons-steak{ 
    margin: -45px auto !important; 
    margin-inline-start: auto !important;
    display: block !important;
    width: 125px !important;      
    height: 125px !important;
    position: static !important;
     }
     .cartoon_icons-chicken{ 
      margin: -155px 80px !important; 
      margin-inline-start: auto !important;
      display: block !important;
      width: 125px !important;      
      height: 125px !important;
      position: static !important; 
    }
    html[dir="rtl"] .cartoon_icons-chicken{ 
      margin: -150px 50px !important;
      direction: ltr;
    }
    .cartoon_veggies-icon{
      margin: -55px 50px !important;
      width: 350px !important;
      height: 350px !important;
      display: block !important;
      position: static !important;
    }
    html[dir="rtl"] .cartoon_veggies-icon{
      margin: -55px 0px !important;
      width: 350px !important;
      height: 350px !important;
      display: block !important;
      position: static !important;
    }
    .cartoon_dumbbells-stopwatch-icon{
      margin: -50px 40px !important;
      width: 350px !important;
      height: 350px !important;
      display: block !important;
      position: static !important;
    }
    html[dir="rtl"] .cartoon_dumbbells-stopwatch-icon{
      direction: ltr;
      margin: -50px -40px !important;
      display: block !important;
      position: static !important;
    }
    html[dir="rtl"] .cartoon_water-bottel-icon{
      direction: ltr;
      margin: -5px -5px !important;
      display: block !important;
      position: static !important;
    }


  /* --- MIDDLE SECTION --- */
  .Mid_sides .left_side {
    align-items: center !important;
    text-align: center !important;
    
  }
  
   html[dir="ltr"] .Mid_sides .left_side span:nth-child(1){
    margin: 5px 0 !important; 
    font-size: 40px !important;
    width: auto !important;
    justify-content: center;
    align-items: start;
    padding: 5px 15px;
    margin-inline-start: -265px !important;
     
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(1){
    margin: 5px 0 !important; 
    font-size: 40px !important;
    width: auto !important;
    justify-content: center;
    align-items: start;
    padding: 5px 15px;
    margin-inline-start: -300px !important;
     
  }
  html[dir="ltr"]  .Mid_sides .left_side span:nth-child(2){
     margin-inline-end: 170px !important;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(2){
     margin-inline-end: 100px !important;
  }
  html[dir="ltr"] .Mid_sides .left_side span:nth-child(3){
    margin-inline-end: -75px !important;
   }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(3){
    margin-inline-end: -200px !important;
   }
  html[dir="ltr"] .Mid_sides .left_side span:nth-child(4) {
    margin-inline-start: 200px !important;
    font-size: 45px !important;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(4) {
    margin-inline-start: 575px !important;
    font-size: 45px !important;
  }
 html[dir="ltr"] .Mid_sides .left_side span:nth-child(5) {
    font-size: 18px !important;
    width: 80% !important;
    margin-inline: 0;

  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(5) {
    font-size: 18px !important;
    width: 80% !important;
    margin-inline: 0;
  }

  /* Promotion Card */
  .right_side .Promotion_card {
    width: 90% !important;
    height: auto !important;
    margin-top: 30px;
    padding-top: 40px;
  }
  .Promotion_card h1, 
  .Promotion_card h3, 
  .Promotion_card p, 
  .Promotion_card ul {
    margin-inline-start: 0 !important;
    margin: 8px auto !important;
    width: 70% !important;
  }
  .Promotion_card h1{
       padding-top: 7.5px;
  }
  .Promotion_card h3{
    width: 50% !important;
  }

  /* --- BOTTOM SECTION --- */
  .Bottom_sides .bottom_left {
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 5px;
  }
  
  /* Text Bubbles scaling */
  .bottom_left span {
    font-size: 20px !important;
    margin: 5px auto !important; 
    width: 60% !important;
    text-align: center !important;
    rotate: 0deg !important; 
  }
  
  .Bottom_sides .bottom_right {
    flex-direction: column !important; 
    height: auto !important;
    padding: 40px 0;
    overflow: hidden;
  }
  
  /* Phone Images */
  .bottom_right img, 
  .bottom_right img:nth-child(2), 
  .bottom_right img:nth-child(3) {
    width: 70% !important;
    height: auto !important;
    margin: -250px auto 0 auto !important; 
    rotate: 10deg !important;
  }
  .bottom_right img:first-child {
    margin-top: 0 !important;
  }

  /* --- FOOTER & BRANDING --- */
  .leaf_div {
    margin-inline: 0 !important;
    margin-top: 25px;
    margin-bottom: 15px;
    margin-left: 45px !important;
    align-self: flex-start;
  }
  
  .footer_wrapper {
    width: 95%;
    margin: 10px auto;
  }
  
  /* Stack footer columns */
  .div_group {
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
  }
  
  .products, .resources, .company {
    width: 50%;
    height: auto;
    text-align: center;
    align-items: center;
    margin-bottom: 5px;
  }
  .Pager_button{
  height: 62px;
  width: 65px;
  margin-inline: auto;  
  margin-top: 10px;    
  margin-bottom: 5px; 
  box-shadow: -45px 60px -45px 15px rgba(60,60,60,.15);
  justify-content:center;
  align-items:center;
  font-size: 5px;
  
  }
  .chevron_icon{
  width: 65px;
  height: 65px;
  margin-inline-start: -6px;
  
}


  .lang-ctrl{
    margin-top: -1px;
    
}
  .hero_headline span:nth-child(2){
    margin-inline-start: -35px !important;
}
}


/* ==========================================================
   IPAD LANDSCAPE & TABLET OPTIMIZATION (829px - 1366px)
   ========================================================== */

@media only screen and (min-width: 829px) and (max-width: 1366px) {

  /* --- 1. GENERAL LAYOUT SCALING --- */
  .left_side, .right_side, 
  .Mid_sides .left_side, .Mid_sides .right_side,
  .Bottom_sides .bottom_left, .Bottom_sides .bottom_right {
    /* Ensure padding so text doesn't hit edges on smaller tablets */
    padding-inline: 10px;
    box-sizing: border-box;
  }

  /* --- 2. HERO SECTION (Top Left) --- */
  .leaf_div{
    margin-inline-start: -5px;

  }
  .left_side h1 {
    font-size: 50px; 
    width: 90%;
  }
  
  .left_side p {
    font-size: 20px;
    width: 80%;
  }
  
  .left_side span:nth-child(1),
  .left_side span:nth-child(3) {
    font-size: 50px; 
  }

  /* Fix RTL Negative Margins to prevent overflow */
  html[dir="rtl"] .left_side p { 
    margin-right: -40px; 
  }
  html[dir="rtl"] .left_side span:nth-child(1) {
     margin-right: -60px; 
    }

  /* --- 3. MIDDLE SECTION (The complex text overlap) --- */
  /* We must reduce the massive pixel margins and fonts */
  
  .Mid_sides .left_side span:nth-child(1) {
    font-size: 60px;
    margin-left: 10px;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(1) { 
    margin-right: 15px; 
  }

  .Mid_sides .left_side span:nth-child(2) {
    font-size: 50px;
    margin-left: 20px;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(2) { 
    margin-right: 40px; 
  }

  .Mid_sides .left_side span:nth-child(3) {
    font-size: 50px;
    margin-left: 60px;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(3) { 
    margin-right: 80px; 
  }

  .Mid_sides .left_side span:nth-child(4) {
    font-size: 55px; 
    margin-left: 100px;
  }
  html[dir="rtl"] .Mid_sides .left_side span:nth-child(4) { 
    margin-right: 180px; 
  }

  .Mid_sides .left_side span:nth-child(5) {
    font-size: 18px;
    width: 90%;
    margin-left: 40px;
  }

  /* --- 4. BOTTOM SECTION (Phone Images) --- */
  /* Scale images down to fit the 50% width column */
    .bottom_right{
    flex-direction: column !important; 
    height: auto !important;
    padding: 5px 0;
    overflow: hidden;
  }
  .bottom_right img,
  .bottom_right img:nth-child(2),
  .bottom_right img:nth-child(3) {
    width: 50% !important;
    height: 55% !important;
    margin:-175px auto 0 auto !important; 
    rotate: 25deg !important; /* Tighten the overlap */
  }
  
  /* --- 5. BOTTOM LEFT (Text Bubbles) --- */
  /* Prevent text from breaking out of bubbles */ 
  .bottom_left {
    min-height: 100% !important;
    max-width: 85%;
  }
  .bottom_left span {
    font-size: 22px !important; 
    width: 55% !important;
    max-width: 90%;
    margin-inline: auto !important;
    margin: auto auto; 
  }
  
  /* Keep rotation but fix alignment */
  .bottom_left span:nth-child(2),
  .bottom_left span:nth-child(4),
  .bottom_left span:nth-child(6),
  .bottom_left span:nth-child(8) {
    margin-inline: auto !important;
  }

  /* --- 6. FACTS CARD --- */
  .Facts_div {
    width: 85%; 
  }
  
  /* --- 7. CARTOON ICONS --- */
  /* Center or scale icons so they don't float off screen */
  [class*="cartoon_"] {
    transform: scale(0.7); 
    margin-inline-start: 50px !important; 
  }
}


* {
  -webkit-tap-highlight-color: transparent;
}