:root {
  --primary: #7b171a;      /* deep maroon like the pack */
  --primary-dark: #4d0c0f;
  --accent: #f2b544;       /* warm golden */
  --accent-soft: #fff3cc;
  --cream: #fff8ec;
  --text: #2a2a2a;
  --muted: #777;
  --card-bg: #ffffff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(circle at top, #ffe9cf 0, #fff8ec 40%, #fdf5ef 100%);
  color: var(--text);
  line-height: 1.2;
  overflow-x: hidden;
  width: 100%;
}

/* Scroll Animation Classes */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-fade {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.scroll-fade.revealed {
  opacity: 1;
}

/* Stagger animation for multiple items */
.scroll-reveal-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-stagger.revealed {
  opacity: 1;
  transform: translateY(0);
}
nav{
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(62, 20, 9, 0.897);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.02);
  width: 100%;
  padding: 0;
  margin: 0;
}
nav ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content:flex-end ;
  align-items: center;
  padding: 0;
  margin: 0;
}
nav li{
  height:60px;
}
nav a{
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #fff200;
}
nav a:hover{
  background-color: #e7a9a9;
}
nav li:first-child{
  margin-right: auto;
}
li img{
  width: 60px;
  margin-left: 15px;
}
.sidebar{
  position: fixed;
  top:0;
  right: 0;
  width: 250px;
  height: 100%;
  z-index: 999;
  background-color: rgba(62, 20, 9, 0.9);
  box-shadow: 10px  0 10px rgba(0,0,0,0.02);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start ;
}
.sidebar li{
  width: 100%;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}

/*==================main section===================*/
.hero-sec{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 45px;
}
.vipa-span{
  margin-top: 15px;
  font-size: 19px;
  gap: 3rem;
}
.vipa-name{
  font-size: 110px;
  margin-bottom: 20px;
  color: #4d0c0f;
}
.vipa-dis{
  font-size: 40px;
  margin-bottom: 15px;
  color: black;
}
.vipa-dis-tamil{
  font-size: 30px;
  margin-bottom: 10px;
  color: #000000;
}
.vipa-button {
  display: inline-block;
  color: #f2b544;
  background-color: #000000;
  text-decoration: none;
  padding: 20px 25px;
  font-size: 17px;
  font-weight: 450;
  border: none;
  border-radius: 30px;
  margin-top: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.vipa-button :hover{
  background-color: white;
  color: black;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.vipa-button :active{
  transform: translateY(0);
}
.vipa-button-1 {
  display: inline-block;
  color: black;
  background-color: white;
  text-decoration: none;
  padding: 20px 25px;
  font-size: 17px;
  font-weight: 450;
  border: none;
  border-radius: 30px;
  margin-top: 10px;
  margin-left: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.vipa-button-1:hover{
  background-color: black;
  color: #f2b544;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.vipa-button-1:active{
  transform: translateY(0);
}
.hero-sec-2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.hero-sec-2 img{
  width: 440px;
  height: 300px;
  border-radius:25px;
}
.green-dot{
  color: green;
  font-size: 20px;
}
.yellow-dot{
  color:#f9d47a;
  font-size: 20px;
}
.img1{
  margin-bottom: 15px;
}


.social-icons {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin: 25px 0 0 0;
  padding: 0;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}
.social-icons a:hover {
  transform: scale(1.15);
  opacity: 1;
}
.social-icons svg {
  width: 100%;
  height: 100%;
}

/*=================== HEALTH BENEFITS=========================*/
.health-benefits{
  text-align: center;
  margin-top: 50px;
  font-size: 58px;
  font-weight: 800;
}
.health-dis{
  text-align: center;
  font-size: 35px;
  color: #4d0c0f;
  font-weight: 400;
  margin-top: 25px;
}
.flex-4{
  display: flex;
  flex-direction: row;
  flex-grow: 3;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}
.grid-1{
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  gap: 1.4rem;;
  background-color: #cd787d;
  width: 350px;
  border-radius: 25px;
  text-align: left;
}
.grid-1 img{
  width: 70px;
  color: #f8f8f8a9;
  padding-left: 14px;
  padding-top: 10px;
  
}
.grid-1 h6 {
  padding-left: 10px;
  font-size: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}
.grid-1 p{
  padding-left: 10px;
  padding-bottom: 50px;
  font-size: 19px;
  color: white;
}
.flex-6{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3rem;
  margin-top: 39px;
}
.flex-5{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.flex-5 h3{
  font-size: 38px;
  font-weight: 900;
}
.orange-color{
  color:#eb0510;
}
.flex-5 p{
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
/*XXXXXXXXXXXXXXXXXXX Health BENEFITS XXXXXXXXXXXXXXXXXXXx*/
.flex-7{
  text-align: center;
  margin-top: 60px;
}
.Natural{
  font-size: 58px;
  font-weight: 800;
}
.Natural-dis{
  font-size: 35px;
  color: #4d0c0f;
  font-weight: 400;
  margin-top: 25px;
}
.ing-pic img{
  width: 90px;
  clip-path: circle(40%);
  height: 130px;
  display: block;
  margin: auto;
  margin-top: 30px;
}
.ing-pic p{
  margin-bottom: 30px;
}
.flex-ing{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 50px 140px;
}
.ing-pic{
  width: 210px;
  background-color: rgba(230, 239, 202, 0.663);
  text-align: center;
  border-radius: 25px;
}
.ing-name{
  margin-top: 12px;
  font-size: 28px;
  font-weight: 600;
  color: #862125db;
}
.ing-pic p{
  font-size: 20px;
}
/*XXXXXXXXXXXXXXXXXXXX INGREDIENTS XXXXXXXXXXXXXXXXXXXXXX*/
.recipe-flex{
  text-align: center;
}
.recipe-flex h2{
  font-size: 58px;
  font-weight: 800;
}
.recipe-flex-eng{
  font-size: 35px;
  color: #4d0c0f;
  font-weight: 400;
  margin-top: 25px;
}
.recipe-flex-tam{
  font-size: 25px;
  margin-top: 15px;
}
.flex-8{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-evenly;
  margin: 50px 20px;
}

.recipe-flex-1 img{
  width: 300px;
  height: 220px;
  border-radius: 25px 25px 0px 0px;
}
.recipe-flex-1{
  background-color: rgb(236, 226, 226);
  border-radius: 10px;
  width: 300px;
  margin-right: 2px;
}
.recipe-name{
  font-size: 25px;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 15px;
  margin-left: 15px;
}
.recipe-name-tam{
  font-size: 20px;
  margin-left: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}
.recipe-process{
  margin-left: 15px;
  font-size: 18px;
  font-weight: 500;
}
.recipe-process-2{
  margin-left: 20px;
  margin-top: 8px;
  font-size: 16px;
}
.recipe-process-3{
  margin-left: 15px;
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 15px;
}
.recipe-process-4{
  font-size: 16px;
  margin-left: 22px;
  margin-bottom: 30px;
}



/* Product info */
.info-list {
  list-style: none;
  font-size: 0.9rem;
  color: #555;
}

.info-list li + li {
  margin-top: 0.3rem;
}

.label {
  font-weight: 600;
  color: var(--primary-dark);
}


:root{
  --card-bg: #fff;
  --muted:#9aa3a0;
  --line:#e9e9e9;
  --accent: #00a760; /* green used for price/badge */
  --accent-dark:#008c4d;
  --heading:#222;
  --card-radius:14px;
  --container-bg:#f6fbf7; /* page background similar to screenshot */
}

.wrap{
  max-width:1100px;
  margin:48px auto;
  padding:0 20px;
}

.section-title{
  text-align:center;
  margin-bottom:28px;
  font-size: 58px;
  font-weight: 800;
  color:var(--heading);
  letter-spacing:-0.4px;
}
.section-dis{
  font-size: 35px;
  color: #4d0c0f;
  font-weight: 400;
  margin-top: 25px;
  text-align: center;
  margin-bottom: 30px;
}

.cards {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
  align-items:start;
}

/* Card */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding:22px;
  box-shadow: 0 2px 12px rgba(15,20,15,0.04);
  border: 1px solid rgba(0,0,0,0.02);
}

.card .heading {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:700;
  margin-bottom:14px;
}

.icon-wrap {
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#f3fff5;
  color:var(--accent-dark);
  font-size:18px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
}

/* row inside card */
.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  margin:0 10px; /* <-- this creates the gap so the line does not touch card corners */
}

/* allow row content to align left inside margin area */
.row .left {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.muted { color:var(--muted); font-size:14px; }
.value { font-weight:700; color:#222; }

/* sizes buttons */
.sizes { display:flex; gap:8px; align-items:center; }
.size-btn {
  padding:6px 10px;
  border-radius:14px;
  border:1px solid #e3e3e3;
  background:#f5f5f5;
  font-size:13px;
  cursor:pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.size-btn:hover {
  background-color:#e8e8e8;
  border-color:#d0d0d0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.size-btn.active {
  background:var(--accent);
  color:#fff;
  border-color:rgba(0,0,0,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.size-btn.active:hover {
  background:var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.price { color:var(--accent); font-weight:800; font-size:18px; display:inline-flex; align-items:center; gap:8px; }

/* special small badge */
.small-badge {
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  background:#eaf7ee;
  color:var(--accent-dark);
  font-weight:700;
  border:1px solid rgba(0,0,0,0.03);
}

/* manufacturer details adjustments */
.manufacturer .company {
  font-weight:700;
  margin-bottom:6px;
}
.manufacturer .address { color:var(--muted); font-size:14px; line-height:1.4; }

.best-before {
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-weight:700;
}
.best-before .calendar {
  width:36px;
  height:36px;
  border-radius:8px;
  background:#f3fff5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-dark);
  font-size:18px;
}

/* remove border for last row(s) */
.row.no-border { border-bottom:none; margin-bottom:0; padding-bottom:0; }




@media(max-width:1200px){
  .vipa-name{
    font-size:80px ;
  }
  .vipa-dis{
    font-size:28px ;
  }
  .vipa-dis-tamil{
    font-size: 22px;
  }
  .hero-sec-2 img{
    width: 410px ;
    height: 270px;
  }
  .vipa-button,.vipa-button-1 {
    font-size: 15px;
  }
}
/* responsive */
@media(max-width:990px){
  .hero-sec{
    display: flex;
    flex-direction: column;
  }
  .hero-sec-1{
    align-items: center;
    text-align: center;
  }
  .social-icons{
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
  }
  .hero-sec-2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .img1{
    margin-right: 15px;
    margin-bottom: 0px;
    align-items: center;
  }
  .img2{
    
    align-items: center;
  }
  .vipa-name{
    font-size: 70px;
  }
  .vipa-dis{
    font-size: 26px;
  }
  .vipa-button,.vipa-button-1{
    margin-bottom: 20px;
    font-size: 13px;
  }
}




@media (max-width:860px){
  .cards { grid-template-columns: 1fr; }
  .wrap {
    padding:0 14px;
    
  }
}
/*Senders Details*/
.Talk-to-me{
  font-size: 58px;
  font-weight: 800;
  text-align: center;
}
.Talk-to-me-dis{
  font-size: 35px;
  color: #4d0c0f;
  font-weight: 400;
  margin-top: 25px;
  text-align: center;
}

.lets-connect{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 100px;
  justify-content: center;
  margin-bottom: 90px;
  margin-top: 20px;
}
.lets-connect-first{
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 350px;
  margin-top: 50px;
  background-color: #ffffff;
  border-radius: 15px;
}
.lets-connect-first h4{
  color: black;
  text-align: left;
  font-size: 25px;
  padding-top: 30px;
  padding-left: 30px;
  font-weight: 600;
  margin-bottom: 14px;
}
.connect{
  width: 45px;
  background-color:#bed7cd;
  margin-right: 20px;
  border-radius: 20px ;
  display: inline-block;
  margin-left: 29px;
}
.mail-flex p{
  color: black;
  font-size: 1rem;
  font-weight: 500;
}
.mail-flex span{
  margin-left: 20px;
}
.mail-flex a,p{
  margin-left: 5px;
}
.mail-flex strong{
  color: black;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.contact-flex p{
  color: black;
  font-size: 1rem;
  font-weight: 500;
}
.contact-flex span{
  margin-left: 20px;
}
.contact-flex a,p{
  margin-left: 5px;
}
.contact-flex strong{
  color: black;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.location-flex p{
  color: black;
  font-size: 1rem;
  font-weight: 500;
}
.location-flex strong{
  color: black;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.location-flex span{
  margin-left: 20px;
}
.location-flex a,p{
  margin-left: 5px;
}
.mail-flex ,.contact-flex,.location-flex{
  display:flex;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: left;
}
.lets-connect-second{
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 500px;
  margin-top: 50px;
  background-color: white;
  border-radius: 15px;
  padding-bottom: 30px;
}
.lets-connect-second h4{
  color: #fff;
  text-align: left;
  font-size: 25px;
  padding-top: 30px;
  padding-left: 30px;
  font-weight: 600;
}
.lets-connect-second form{
  display: flex;
  flex-direction: column;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
}
.lets-connect-second input,
.lets-connect-second textarea{
  background-color: rgb(205, 167, 167);
  border: 1px solid rgb(247, 152, 152);
  border-radius: 8px;
  color: black;
  font-size: 16px;
  margin-bottom: 15px;
  padding: 10px;
}
.lets-connect-second button{
  background-color: rgb(205, 167, 167);
  border: none;
  border-radius: 8px;
  color: #1f1717;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  transition: background-color 0.3s ease;
} 
.lets-connect-second button:hover{
  background-color: #000000;
  color: white;
}
.lets-connect-second textarea{
  resize: vertical;
  min-height: 100px;
}
.lets-connect-second input::placeholder,
.lets-connect-second textarea::placeholder{
  color: white;
}
.lets-connect-second label{
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.lets-connect-second p{
  color: black;
  font-size: 16px;
  margin-top: 10px;
  text-align: left;
  margin-bottom: 12px;
  font-weight: 500;
}
.mail-flex a{
  color:rgb(247, 55, 55);
  text-decoration: none;
  margin-right: 20px;
}
.contact-flex a{
  color:rgb(247, 55, 55);
  text-decoration: none;
}
/*=============CONTACT ENDS HERE+====================*/

/*================== footer flex ===============*/
.footer{
  background-color: white;
  margin: auto;
}
.footer-flex{
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  border-bottom: 1px solid rgb(127, 125, 125);
  margin-bottom: 50px;
  margin: 10px 30px;
}
.footer-flex-1{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 40px;
}
.footer-flex-1 h6{
  font-size: 32px;
  color: #4d0c0f;
  text-align: center;
}
.footer-flex-2{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 50px;
}
.footer-flex-2 p{
  font-size: 17px;
}
.footer-flex-3{
  text-align: center;
  padding-bottom: 50px;
}

.floating-book {
  position: fixed;
  bottom: 30px;
  right: 24px;
  width: 62px;
  height: 62px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.floating-book:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}
.floating-book,
.floating-book:hover,
.floating-book:focus,
.floating-book:active {
  text-decoration: none;
}


/* Subtle pulse to attract attention */
@keyframes whatsappPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 18px rgba(64, 145, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.floating-book {
  animation: whatsappPulse 2.5s infinite;
}

/* ===== Floating Instagram Button ===== */
.floating-instagram {
  position: fixed;
  bottom: 128px;
  right: 24px;
  width: 62px;
  height: 62px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.floating-instagram:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}
.floating-instagram,
.floating-instagram:hover,
.floating-instagram:focus,
.floating-instagram:active {
  text-decoration: none;
}

/* Instagram pulse animation */
@keyframes instagramPulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 48, 108, 0.6); }
  70% { box-shadow: 0 0 0 18px rgba(225, 48, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 48, 108, 0); }
}

.floating-instagram {
  animation: instagramPulse 2.5s infinite;
}



/* Fix for elements shifting right at ~770px */
@media (max-width: 900px) {
  .flex-ing {
    margin: 50px 40px;
  }
  .lets-connect {
    gap: 50px;
  }
}
@media (max-width:880px){
  .hideOnMobile{
    display: none;
  }
  .menu-button{
    display: block;
  }
}
@media (max-width: 850px) {
  .flex-ing {
    margin: 50px 20px;
  }
  .lets-connect {
    gap: 30px;
    flex-wrap: wrap;
  }
  .lets-connect-first,
  .lets-connect-second {
    width: 100%;
    max-width: 100%;
  }
  .hero-sec-2 {
    display: flex;
    flex-direction: column;
    
  }
  .img1{
    margin-right: 0px;
    margin-bottom: 12px;
  }
}
/* ====== Mobile adjustments - paste at the END of style.css ====== */
@media (max-width: 768px) {

  
  .flex-1 { 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 8px;
  }

  /* hero image sizing */
  .hero-img { width: 84%; max-width: 360px; margin: 6px auto 0; }
  .hero-img img { width:100%; height:auto; border-radius: 12px; }

  /* dots row center */
  .dots-to-connect { padding-left: 0 !important; text-align:center; margin-top:10px; }
  .flex-2 { display:inline-block; }

  /* BENEFITS: scale headings and make cards full width */
  .health-benefits { font-size: 1.6rem; margin-top:20px; }
  .health-dis { font-size: 1rem; margin-bottom: 8px; }

  .flex-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
    justify-items: center;
  }
  .grid-1 { width: 100%; max-width: 480px; margin-top: 12px; border-radius: 16px; padding-bottom: 20px; }

  .flex-6 { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .flex-5 h3 { font-size: 1.25rem; }

  /* INGREDIENTS: wrap, remove huge margins */
  .flex-ing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 12px;
    justify-items: center;
  }
  .ing-pic { width: 100%; max-width: 220px; padding: 12px; border-radius: 12px; }
  .ing-pic img { width: 90px; height:90px; object-fit:cover; border-radius: 50%; }

  /* RECIPES: cards stack and scale */
  .flex-8 { 
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 18px 12px;
  }
  .recipe-flex-1 { width: 100%; max-width: 640px; margin: 0 auto; }
  .recipe-flex-1 img { width:100%; height:auto; object-fit:cover; border-radius: 12px; }

  /* PRODUCT CARDS and CONTACT: single column */
  .cards { grid-template-columns: 1fr; gap: 14px; padding: 8px; }
  .wrap { padding: 12px; }

  .lets-connect {
    flex-direction: column;
    gap: 12px;
    margin: 18px 12px 40px;
    align-items: center;
  }
  .lets-connect-first, .lets-connect-second {
    width: 100%;
    max-width: 640px;
    margin-top: 8px;
    padding: 14px;
  }
  .lets-connect-second form { padding: 0; }

  /* Footer and small text adjustments */
  .footer { padding: 18px 12px 40px; }
  .section-title, .Natural, .recipe-flex h2 { font-size: 1.6rem; }
  .Natural-dis, .section-dis, .recipe-flex-eng { font-size: 1rem; }

  /* small accessibility tweaks */
  input, textarea, button { font-size: 1rem; }
}