* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Amaranth", sans-serif;

   }

   body {
     margin: 0;
     background: #fff8e7;
     color: #333;
     line-height: 1.6;
     letter-spacing: 1px;
   }

   .icon {
     color: #073b1a;
   }

   header {
     display: flex;
     justify-content: center;
     background: #073b1a;
     padding: 0px 0px;
     padding-left: 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: sticky;
     top: 0;

     z-index: 1000;
     margin-block: 0px;
   }

   header h1 {
     font-size: 1.6rem;
     color: #fbedc6;
     font-weight: bold;
   }

   header h1:hover {
     cursor: pointer;
     color: #ac7c16;
   }

   nav ul {
     list-style: none;
     display: flex;
     justify-content: start;
     gap: 30px;
     margin-top: 26px !important;
     margin-right: 150px;

     /* padding-inline: 30px; */
   }

   .social-icons {
     display: flex;

   }


   nav ul li a {
     color: #fbedc6;
     padding-inline: 10px;
     padding-block: 10px;
     text-decoration: none;
     position: relative;
     background: linear-gradient(140deg, #fbedc6 0%, #fbedc6 50%, #fbedc6 100%);
     background-repeat: no-repeat;
     background-size: 100% 0rem;
     background-position: 0 100%;
     transition: background-size 0.25s ease-in;
   }

   .social-icons a {
     color: #fbedc6;
     padding-inline: 10px;
     padding-block: 6px;
     text-decoration: none;
     position: relative;
     background: linear-gradient(140deg, #fbedc6 0%, #fbedc6 50%, #fbedc6 100%);
     background-repeat: no-repeat;
     background-size: 100% 0rem;
     background-position: 0 100%;
     transition: background-size 0.25s ease-in;

   }

   #contact {
     color: #073b1a;
   }

   nav ul li a:hover,
   nav ul li a.active {
     background-size: 100% 100%;
     color: #073b1a;
     border-radius: 5px;
   }

   .social-icons a:hover {
     background-size: 100% 100%;
     color: #073b1a;
     border-radius: 5px;
   }

   @media (max-width: 768px) {
     nav ul li a {
       display: block;
       background-size: 35% 0em;
       margin-inline: 10px;
     }

     nav ul li a:hover,
     nav ul li a:focus,
     nav ul li a:active {
       background-size: 100% 100%;
       /* fill full width */
     }
   }

   .slider {
     position: relative;
     height: 100%;
     overflow: hidden;
     padding-inline: 0px !important;
     padding-top: 0px !important;
     margin-bottom: 0px !important;
     padding-bottom: 0px !important;
   }

   .fa {
     font-family: 'Open Sans', sans-serif !important;
   }

   .ic {
     font-family: 'Open Sans', sans-serif !important;

   }

   .carousel-item img {
     height: 88vh;
     object-fit: cover;
   }

   /* .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 10;
} */

   .hero-text {
     position: absolute;
     top: 35% !important;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     text-align: center;
     background: rgba(0, 0, 0, 0.5);
     padding: 10px 30px;
     border-radius: 12px;
   }

   .hero-text h2 {
     font-size: 1.6rem;
     color: #fbedc6;
     margin-inline: 0px !important;
   }

   section {
     padding: 60px 30px;
     text-align: center;
   }

   section h2 {
     font-size: 2rem;
     margin-bottom: 20px;
     color: #073b1a;
   }

   /* Products */
   .products {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;

   }

   #products {
     padding-top: 20px;
     scroll-margin-top: 85px;
   }

   #about {
     scroll-margin-top: 90px;
     padding-block: 20px;
   }

   #benefits {
     scroll-margin-top: 80px;
     padding-block: 20px;
   }

   #contact {
     scroll-margin-top: 180px;
   }

   .product-card {
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
     background: #ffffff;
   }

   .product-card img {
     width: 100%;
     display: block;
     border-radius: 5px !important;

   }


   .product-card img {
     width: 100%;
     height: 100%;
     object-fit: cover !important;
   }

   .product-footer {
     padding: 12px;
     display: flex;
     flex-direction: column;
     align-items: flex-start !important;
     /* force left */
     text-align: left !important;
     /* force text left */
     gap: 6px;
     width: 100%;
   }

   .product-footer h3,
   .product-footer p {
     margin: 0;
     text-align: left !important;
     padding: 0px !important;
     /* product name & price left */
   }

   .product-footer a.whatsapp-btn {
     align-self: flex-start !important;
     /* button left */
   }


   .product-footer h3 {
     margin: 0;
     font-size: 1rem;
   }

   .product-footer .price {
     margin: 0;
     font-size: 0.95rem;
     color: #333;
   }

   .whatsapp-order {
     display: inline-block;
     background: #073b1a;

     color: #fff;
     width: 100%;
     padding: 8px 14px;
     border-radius: 2px;
     font-size: 0.9rem;
     font-weight: 600;
     text-decoration: none;
     transition: background 0.3s ease;
     margin-inline: 0px !important;
   }

   .whatsapp-order:hover {
     background: #0f5428;
   }


   .product-card img {
     width: 100%;

     /* Fixed height for uniformity */
     object-fit: fill;
     /* Ensures bottles fit without cropping */
     padding: 10px;
     background: #ffffff;
     /* Light background to highlight bottles */
     border-radius: 10px !important;
   }

   .product-info {
     padding: 15px;
   }

   .product-info h3 {
     font-size: 1.2rem;
     color: #073b1a;
     margin-bottom: 8px;
   }

   .benefit {
     font-size: 0.9rem;
     margin-bottom: 12px;
     color: #555;
   }

   .whatsapp-btn {
     display: inline-block;
     color: #fff;
     padding: 5px 8px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     transition: 0.3s;
   }

   .whatsapp-btn:hover {
     background: #128c7e;
   }

   footer {
     background: #073b1a;
     color: #f8ebc1;
     text-align: center;
     padding: 10px;
     margin-top: 5px;
   }

   .social-icons {
     justify-content: center;
     align-items: center;
   }

   .social-icons a {
     margin: 0 10px;
     color: #fbedc6;
     font-size: 1.25rem;
     text-decoration: none;
     transition: 0.3s;
   }

   .social-icon a {
     color: #073b1a;
     font-size: 5px !important;
   }

   .social-icon a:hover {
     color: #12542b;
   }

   .order-wrapper {
     width: 100%;
     text-align: center;
   }

   .social-icons a:hover {
     color: #073b1a;
   }

   /* Responsive Nav */
   @media (max-width: 768px) {
     nav ul {
       flex-direction: column;
       display: none;
       background: #073b1a;
       position: absolute;
       top: 60px;
       right: 0;
       width: 100%;
       padding: 15px 0;
       margin-right: 0px !important;
     }

     nav ul.show {
       display: flex;
     }

     ul li {
       margin-left: 20px !important;
     }

     .carousel-control-prev,
     .carousel-control-next {
       top: -20% !important;
     }

     footer {
       margin-bottom: 65px;
     }

     h1.logo img {
       width: 120px !important;
     }


     .carousel-item img {

       object-fit: fill !important;
     }

   }

   .carousel-caption-custom {
     position: absolute;
     top: 30%;
     transform: translateY(-50%);
     color: #fff;
     z-index: 10;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
     padding: 1rem 0rem;
     width: 100%;

   }

   .carousel-caption-custom h2 {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: #ffffff !important;


   }

   .carousel-caption-custom {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: #fff;
     z-index: 10;
     text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
     padding: 1rem 2rem;
   }

   .left-text {
     left: 8%;
     text-align: left;
     max-width: 980px !important;
     width: 100% !important;
   }



   @media (max-width: 768px) {
     .carousel-caption-custom {
       top: 60%;
       padding: 0.5rem 1rem;
     }

     .carousel-caption-custom h2 {
       font-size: 1.6rem;
     }

     .left-text {
       left: 5%;
     }
   }


   .center-text {
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     top: 20%;
     color: #ffffff !important;

   }

   .left-text {
     left: 8%;
     text-align: left;
     max-width: 400px;
     top: 50%;
   }

   @media (max-width: 768px) {
     .carousel-caption-custom {
       top: 60%;
       padding: 0.5rem 1rem;
     }

     .carousel-caption-custom h2 {
       font-size: 1.8rem;
     }

     .left-text {
       left: 9.5% !important;
       text-align: center !important;
       max-width: 300px !important;
       top: 35%;
       padding-inline: 0px !important;

     }

     .center-text {
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
       top: 70%;
       color: #ffffff !important;

     }
   }

   .menu-toggle {
     cursor: pointer;
     font-size: 1.8rem;
     color: #fbedc6;
     margin-left: 20px;

   }

   /* Desktop: ≥992px */
   @media (min-width: 770px) {
     .menu-toggle {
       display: none !important;
     }
   }



   .whatsapp-icon {
     position: fixed;
     right: 15px !important;
     width: 50px !important;
     /* Set width */
     height: 45px !important;
     /* Set height */
     /* WhatsApp green color */
     font-size: 17px;
     z-index: 9999;
     display: inline-block;
     animation: zoomPulse 1.5s infinite ease-in-out;
   }

   @keyframes zoomPulse {
     0% {
       transform: scale(1);
     }

     50% {
       transform: scale(1.1);
       /* zoom in */
     }

     100% {
       transform: scale(1);
       /* back to normal */
     }
   }

   /* Flying Bee Styles */
   .bee {
     position: fixed;
     top: 50px;
     left: -20px;
     width: 60px;
     height: 60px;
     background-image: url('./img/12.png');
     background-size: contain;
     background-repeat: no-repeat;
     z-index: 9999;
     animation: flybee 15s linear infinite;
     pointer-events: none;
   }

   @keyframes flybee {
     0% {
       transform: translate(-100px, 50px) rotate(0deg);
     }

     25% {
       transform: translate(30vw, 20vh) rotate(20deg);
     }

     50% {
       transform: translate(50vw, 50vh) rotate(-20deg);
     }

     75% {
       transform: translate(80vw, 30vh) rotate(15deg);
     }

     100% {
       transform: translate(110vw, 50px) rotate(0deg);
     }
   }

   /* Logo + Text styling */
   h1.logo {
     display: flex;
     align-items: center;
     font-size: 1.5rem;
     font-weight: bold;
     /* color: #f4a300;  */
     font-family: "Merriweather", serif !important;
     gap: 10px;
     /* space between bee and text */
   }

   nav {
     font-family: 'Merriweather', serif !important;
     padding-top: 0px !important;
     padding-bottom: 0px !important;
     padding-inline: 20px;
     justify-content: space-evenly;
     align-items: center;
     display: flex;
     overflow: hidden;



   }

   h1.logo img {
     width: 140px;
     /* adjust size */
     height: auto;
     /* animation: buzz 1s infinite alternate; */
     /* bee buzzing effect */

   }

   /* Cute buzzing effect */
   @keyframes buzz {
     from {
       transform: rotate(-5deg) translateY(-2px);
     }

     to {
       transform: rotate(5deg) translateY(2px);
     }
   }

   .explore-container {
     position: absolute;
     top: 85% !important;
     left: 52%;
     transform: translate(-50%, -50%);
     text-align: center;
     font-size: 14px;
   }

   .explore {
     /* Text styling to match "Descubre más" */
     /* font-family: Arial, sans-serif;  A clean, modern font */
     font-size: 1.5em;
     /* Large, noticeable size */
     font-weight: 400;
     /* Regular weight, not too bold */
     color: #ffffff;
     /* White text color */
     text-decoration: none;
     /* Remove underline from the anchor tag */

     /* Layout for the text and the arrow */
     display: flex;
     flex-direction: column;
     /* Stack the text and arrow vertically */
     align-items: center;
     /* Center content horizontally */

     /* Spacing */
     line-height: .5;
     /* Tighter line height for the text */
   }

   .explore::after {
     /* The down arrow icon */
     content: '\23042';
     /* Unicode for a chevron-down-like character (or use '\2308' for a thicker V) */
     font-size: 1.5em;
     /* Make the arrow the same size or slightly larger than the text */
     margin-top: .5px;
     /* Space between text and arrow */
     /*font-weight: bold;  Make the arrow thicker */

     /* Ensure the arrow is also white */
     color: inherit;
     /* Inherit the white color from .explore */
   }

   /*.explore-container a {
     color: white;
   } */

   /* .explore-btn {
     display: inline-block;
     padding: 13px 30px;
     font-size: 20px;
     font-weight: bold;
     background: #ffb908;
     color: #0e2d1b;
     border-radius: 10px;
     text-decoration: none;
     transition: 0.3s ease-in-out;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   }

 */
   .explore:hover {
     color: #eceae4;
     transform: scale(1.10);
   }

   #explore {
     transform: rotate(90deg);
     /* keep rotation */
     font-weight: bold;
     display: inline-block;
     /* needed for transform/animation */
     animation: floatRightLeft 2s infinite ease-in-out;
     /* horizontal movement */
   }

   /* Animation keyframes for right-to-left movement */
   @keyframes floatRightLeft {
     0% {
       transform: rotate(90deg) translateX(0);
     }

     50% {
       transform: rotate(90deg) translateX(-10px);
     }

     /* move left */
     100% {
       transform: rotate(90deg) translateX(0);
     }

     /* back to original */
   }

   .whatsapp-icon {
     position: fixed;
     top: 80%;
     right: 25px;
     width: 60px;
     /* Set width */
     height: 50px;
     /* Set height */
     background-color: #f7eac0;
     /* WhatsApp green color */
     color: #073b1a;
     border-radius: 20%;
     /* Ensure it's round */
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 21px;
     z-index: 9999;
     text-decoration: none;
     /* animation: zoomInOut 2.5s infinite ease-in-out;
     border: 1px solid #073b1a;
     transition: 0.3s ease-in-out; */
   }

   .whatsapp-icon:hover {
     background-color: #073b1a;
     /* Darker WhatsApp green color */
     color: #f7eac0;
     border: 1px solid #073b1a;
   }

   .aura {
     text-decoration: none;
     font-family: sans-serif !important;
     letter-spacing: 0px !important;
   }

   .whatsapp-btn {
     background-color: #1ebe5d;
     /* WhatsApp green, change as you like */
     color: #f8ebc1;
     /* Text/icon color */
     /* padding: 12px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      transition: 0.3s ease; */
   }

   .whatsapp-btn:hover {
     background-color: #1ebe5d;
     /* Darker green on hover */
     color: #fff;
   }

   /* Mobile Bottom Navigation with Icons */
   .mobile-bottom-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: linear-gradient(135deg, #073b1a, #073b1a);
     display: flex;
     justify-content: space-around;
     align-items: center;
     padding: 0px 0;
     z-index: 1000;
     box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.25);
     gap: 2px;
     padding-block: -10px !important;
     margin-bottom: 0px !important;
     height: 10vh;
   }

   .mobile-bottom-nav .nav-btn {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 6px 0;
     color: #fbedc6;
     font-size: 0.75rem;
     text-decoration: none;
     transition: all 0.3s ease;

   }

   .mobile-bottom-nav .nav-btn i {
     font-size: 1.2rem;
     margin-bottom: 3px;
   }

   .mobile-bottom-nav .nav-btn:hover {
     background-color: #fbedc6;
     color: #073b1a;
     border-radius: 5px;
   }

   .mobile-bottom-nav .nav-btn:active {
     background-color: #fbedc6 !important;
     color: #073b1a;
     border-radius: 5px;
   }

   .honey-club-active {
     background-color: #fbedc6 !important;
     color: #073b1a !important;
     border-radius: 5px;
   }

   .about-active {
     background-color: #fbedc6 !important;
     color: #073b1a !important;
     border-radius: 5px;
   }

   .contact-active {
     background-color: #fbedc6 !important;
     color: #073b1a !important;
     border-radius: 5px;
   }


   @media (min-width: 768px) {
     .mobile-bottom-nav {
       display: none;
     }

   }

   .watermark {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(-30deg);
     font-size: 9rem;
     color: rgba(0, 0, 0, 0.186);
     /* Adjust opacity */
     white-space: nowrap;
     z-index: 9999;
     pointer-events: none;
     /* Don’t block clicks */
     user-select: none;
     /* Can’t select the text */
   }

   /* 3 cards */

   .feature-cards-container {
     margin-top: 20px;
     margin-inline: 0px !important;
     padding-inline: 0px !important;
     text-align: center;
     justify-content: center !important;
   }

   .feature-card {
     padding: 0rem;
     color: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }

   .feature-card h6 {
     font-size: 1rem;
     font-weight: 600;
     color: #fff;
   }

   .feature-card p {
     margin: 0;
     font-size: 0.85rem;
     color: #f1f1f1;
   }

   .card-farm {
     background-color: #ffb908;
     /* Yellow */
     color: #073b1a;
     /* Green text/icon */
   }

   .card-farm h6,
   .card-farm p,
   .card-farm i {
     color: #073b1a;
   }

   .card-organic {
     background-color: #073b1a;
     /* Green */
     color: #ffffff;
     /* White text/icon */
   }

   .card-organic h6,
   .card-organic p,
   .card-organic i {
     color: #ffffff;
   }

   .card-delivery {
     background-color: #ffb908;
     /* Yellow */
     color: #073b1a;
     /* Green text/icon */
   }

   .card-delivery h6,
   .card-delivery p,
   .card-delivery i {
     color: #073b1a;
   }

   /* Responsive */
   @media (max-width: 768px) {
     .feature-card {
       min-height: 120px;
       padding: 0.8rem;
     }

     .feature-card h6 {
       font-size: 0.9rem;
     }

     .feature-card p {
       font-size: 0.75rem;
     }

     .feature-card i {
       font-size: 20px;
       margin-bottom: 5px;
     }

     .explore-container {
       top: 85% !important;
     }

     .explore-btn {
       padding: 6px 20px !important;

     }

   }


   #product-list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-top: 20px;
   }

   .product-card a {
     text-decoration: none;
   }

   .product-card {
     background: #ffffff;
     border: 1px solid #ddd;
     border-radius: 5px;
     overflow: hidden;
     text-align: center;
     transition: transform 0.3s ease;
     background-color: #ffffff;
   }

   .product-card:hover {
     transform: translateY(-5px);
   }

   .carousel-inner img {
     width: 100% !important;
     /* full width */
     object-fit: fill !important;
     /* image fills box, cropping if necessary */

   }

   .product-card img {
     width: 100%;
     height: 300px;
     object-fit: fill;
     display: block;
     border-radius: 5px !important;
   }

   .product-card h3 {
     padding: 10px;
     font-size: 18px;
     color: #000000;

   }

   /* Mobile: 2 columns */
   @media (max-width: 768px) {
     #product-list {
       grid-template-columns: repeat(1, 1fr);
     }
   }

   #all-products {
     padding-top: 10px !important;
     padding-bottom: 0px !important;
   }

   #product-details {
     max-width: 1200px;
     margin: auto;
   }

   .product-page {
     display: flex;
     gap: 30px;
     align-items: flex-start;
   }

   .product-left {
     flex: 1;
   }

   .main-image {
     width: 100%;
     max-width: 350px;
     border-radius: 10px;
     margin-bottom: 15px;
     height: 350px;
     text-align: center;
     justify-content: center;
     align-items: center;
   }

   .sub-images img {
     width: 100%;
     max-width: 300px;
     border-radius: 10px;
     height: 50px;
     display: none;
   }

   .product-right {
     flex: 1;
     text-align: left;
   }

   .product-right h1 {
     font-size: 28px;
     margin: 0;
   }

   .price {
     font-size: 22px;
     color: green;
     margin: 10px 0;
   }

   .order-btn {
     background: #2d7a34;
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 8px;
     cursor: pointer;
     margin: 15px 0;
     font-size: 16px;
     width: 100%;
   }

   .order-btn:hover {
     background: #236027;
   }

   ul {
     list-style: none;
     padding: 0;
     padding-left: 0px !important;
     margin-left: 0px !important;
   }

   ul li {
     margin-bottom: 8px;
     margin-left: 0px !important;

   }

   /* Mobile responsive */
   @media (max-width: 768px) {
     .product-page {
       flex-direction: column;
     }


     .main-image,
     .sub-images img {
       max-width: 100%;

     }
   }

   .tabs {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
     flex-wrap: wrap;
     gap: 5px;
   }

   .tab {
     padding: 10px 9px;
     border: 3px solid #ffffff;
     background: #073b1a;
     cursor: pointer;
     flex: 1;
     text-align: center;
     border-radius: 10px;
     color: white;
     letter-spacing: 1px !important;

   }

   .tab {
     font-weight: bold;
     /* font-family: open-sans !important; */
   }

   .tab.active {
     background: #ffffff;
     border-color: #073b1a;
     color: #073b1a;
   }

   .tab:hover {
     background: #ffffff;
     border-color: #073b1a;
     color: #073b1a;
   }

   /* Mobile view: 1 column, 6 rows */
   @media (max-width: 768px) {
     .tabs {
       flex-direction: column;
       /* stack vertically */
       gap: 10px;
       /* space between rows */
     }

     .tab {
       flex: unset;
       /* remove flex:1 to take full width */
       width: 100%;
       /* full width */
     }

     #quantity {
       width: 30% !important;
     }

     #select-number {
       width: 30% !important;
     }

     .contact-section {
       padding: 20px !important;
     }

     #about p {
       padding-right: 0px !important;
     }
   }


   /* Mobile view (screen <= 768px) */
   @media (max-width: 768px) {
     label[for="quantity"] {
       display: block;
       margin-bottom: 6px;
     }

     #quantity {
       margin-left: 0 !important;
       width: 100%;
     }
   }

   .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 15px;
   }

   #quantity {
     width: 15%;
     padding: 8px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     text-align: center;

   }

   #select-number {
     width: 15%;
     text-align: center;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     padding: 8px;
   }

   /* contact  */
   .contact-section {
     margin: 30px auto;
     margin-inline: 20px !important;
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     padding: 60px;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

   }

   .contact-left,
   .contact-right {
     flex: 1 1 500px;
   }

   /* Left column: form */
   .contact-left form {
     display: flex;
     flex-direction: column;
     gap: 15px;

   }

   .contact-left input,
   .contact-left textarea {
     padding: 12px 15px;
     border-radius: 5px;
     border: 1px solid #ccc;
     font-size: 16px;
     outline: none;
     transition: 0.3s;
   }

   .contact-left input:focus,
   .contact-left textarea:focus {
     border-color: #073b1a;
   }

   .contact-left button {
     padding: 12px;
     background: #073b1a;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
     transition: 0.3s;
   }



   .contact-left button:hover {

     background: #fbedc6;
     transition: left 0.10s ease;
     color: #073b1a;

   }

   /* Right column */
   .contact-right {
     width: 100% !important;
   }

   .contact-right .map {
     width: 100%;
     height: 380px;
     /* or whatever height you want */
     border-radius: 10px;
     margin-bottom: 20px;
     overflow: hidden;
   }

   .contact-right .map iframe {
     width: 100%;
     height: 100%;
     border: 0;
   }

   .map-container {
     position: relative;
     width: 100%;
     height: 470px;
     border-radius: 10px;
     overflow: hidden;
   }

   .map-container .map {
     width: 100%;
     height: 100%;
   }

   .map-container .map iframe {
     width: 100%;
     height: 100%;
     border: 0;
   }

   /* Overlay div */
   .map-overlay {
     position: absolute;
     top: 15px;
     left: 15px;
     width: 200px;
     background: rgb(255, 255, 255);
     /* semi-transparent green */
     color: #000000;
     padding: 12px 7px;
     z-index: 2;
     text-align: left;
   }

   .map-overlay h4 {
     margin: 0 0 5px;
     font-size: 11px;
     font-family: sans-serif;
     letter-spacing: 0px;
     font-weight: bold;
   }

   .map-overlay p {
     margin: 0;
     font-size: 10px;
     color: rgba(52, 51, 51, 0.884);
     font-family: sans-serif;
     letter-spacing: 0px;
     font-weight: 520;
   }

   .contact-info {
     display: flex;
     flex-direction: column;
     gap: 15px;
     text-align: left;
   }

   .contact-info div {
     display: flex;
     align-items: center;
     font-size: 16px;
     width: 95% !important;
   }

   .contact-info div span {
     min-width: 100px;
     color: #1d6037;
   }

   /* Social media icons */
   .social-iconss {
     /* margin-top: 17px; */
     display: flex;
     gap: 20px;
   }

   .social-iconss a {
     text-decoration: none;
     font-size: 20px;
     color: #1d6037;
     transition: 0.3s;
   }

   .social-iconss a:hover {
     color: #6c63ff;
   }

   /* Responsive */
   @media (max-width: 900px) {
     .contact-section {
       flex-direction: column;
       padding: 10px !important;
     }

     .map-overlay {
       position: absolute;
       top: 8px;
       left: 10px;
       width: 200px;
       background: rgb(255, 255, 255);
       /* semi-transparent green */
       color: #000000;
       padding: 12px 7px;
       z-index: 2;
       text-align: left;
     }
   }

   .about-head {
     text-align: left;
   }

   #about p {
     background: #fdf1d3b4;
     padding: 10px 15px;
     border-left: 5px solid #1d6037;
     border-radius: 8px;
     margin: 10px 0;
     text-align: left;
   }

   #benefits p {
     background: #fdf1d3b4;
     padding: 10px 15px;
     border-left: 5px solid #1d6037;
     border-radius: 8px;
     margin: 10px 0;
     text-align: left;
     line-height: 4vh;
   }

   .exclude {
     background: none !important;
     border: none !important;
     text-align: center !important;
   }

   .contact-info i {
     font-size: 23px;
   }


   .include {
     border-left: 5px solid #1d6037;
     background: #fdf1d3b4;
     text-align: left;
     border-radius: 8px;
     padding: 10px 10px;
   }

   /* The overlay box */
   .overlay {
     position: absolute;
     top: 1%;
     /* Adjust these values for responsiveness */
     left: 0.7%;
     width: 80%;
     /* Responsive width */
     max-width: 305px;
     /* Maximum width for larger screens */
     min-height: px;
     /* Minimum height to accommodate content */
     background: rgba(255, 255, 255, 2);
     /* Semi-transparent background */
     padding: 6px;
     z-index: 1;
     /* Ensure the overlay is on top of the map */

   }

   .overlay h6 {
     font-size: 12px;
     font-weight: bold;
   }

   .maph {
     font-family: "Roboto", sans-serif;
     font-size: 14px;
   }

   .mapv {
     color: #0d6efd;
   }

   .mapv:hover {
     text-decoration: underline;
     color: #0d6efd;
   }




   /* kingbee page */
   /* Hero Section */
   .hero {
     background: url('./img/kingbee-bg-web.jpeg') no-repeat center center/cover;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
   }

   .honey-club {
     background: #ffffff;
     padding: 10px 10px;
     font-family: Arial, sans-serif;
   }

   .honey-club-container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px;
     max-width: 1200px;
     margin: auto;
     flex-wrap: wrap;
     margin-top: 30px;
   }

   /* Left Column */
   .honey-club-text {
     flex: 1;
     min-width: 300px;
   }

   .honey-club-text h2 {
     font-size: 32px;
     font-weight: bold;
     margin-bottom: 10px;
     color: #222;
   }

   .honey-club-text h3 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 15px;
     color: #444;
   }

   .honey-club-text p {
     font-size: 16px;
     line-height: 1.6;
     color: #555;
   }

   /* Right Column Table */
   .honey-club-plan {
     flex: 1;
     min-width: 300px;
   }

   .Subscription-container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px;
     max-width: 1200px;
     margin: auto;
     flex-wrap: wrap;
   }

   .texthead {
     text-align: center;
     width: 100%;
     margin-bottom: 0px !important;
     margin-top: 10px;
   }

   .honey-club-plan table {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     overflow: hidden;
   }

   .honey-club-plan thead th {
     background: #073b1a;
     color: #f8ebc1;
     text-align: center;
     padding: 15px;
     font-size: 20px;
   }

   .honey-club-plan tbody td {
     border-top: 1px solid #eee;
     padding: 12px 15px;
     text-align: center;
     font-size: 16px;
     color: #333;
   }

   /* Mobile view: stack as 2 rows */
   @media (max-width: 768px) {
     .honey-club-container {
       flex-direction: column;
       align-items: center;
       text-align: center;
     }

     .hero {
       background: url('./img/kingbee-bg-mob.jpeg') no-repeat center center/cover;
       height: 90vh !important;

     }

     .honey-club-text {
       margin-bottom: 30px;
     }

     .honey-club-plan table {
       font-size: 15px;
     }
   }

   .subscription-steps {
     background: #ffffff;
     padding: 10px 10px;
     font-family: Arial, sans-serif;
   }

   .subscription-steps .container {
     max-width: 1000px;
     margin: auto;
     text-align: center;
   }

   .subscription-steps h2 {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 40px;
     color: #222;
   }

   .steps {
     display: flex;
     flex-direction: column;
     gap: 25px;
   }

   .step {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     text-align: left;
   }

   .step .number {
     background: #073b1a;
     color: #f8ebc1;
     font-weight: bold;
     font-size: 18px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }

   .step p {
     font-size: 16px;
     line-height: 1.6;
     color: #333;
     margin: 0;
   }

   /* Responsive */
   @media (max-width: 768px) {
     .step {
       flex-direction: column;
       align-items: center;
       text-align: center;
     }

     .products {
       justify-content: center !important;
     }

     #input-box {
       width: 100% !important;
     }

     #add-to-cart-btn {
       width: 100% !important;
     }

     #make-payment-btn {
       width: 100% !important;
     }

     .order-btn {
       width: 100% !important;
     }
   }

   .subscription-details {
     text-align: center;
     padding: 10px 10px;
   }

   .subscription-details h2 {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 30px;
   }

   .products {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px;
     max-width: 1200px;
     margin: auto;
     flex-wrap: wrap;
     margin-top: 30px;
   }

   .product {
     flex: 1 1 220px;
     max-width: 250px;
     text-align: center;
   }

   .product h3 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
   }

   .product img {
     width: 160px;
     height: auto;
     margin-bottom: 10px;
     border-radius: 5px;
   }

   .product p {
     font-size: 14px;
     margin-bottom: 10px;
   }

   .product .price {
     background: #f8ebc1;
     padding: 8px;
     font-size: 14px;
     border-radius: 5px;
     color: #073b1a;
   }



   .next-preview h3 {
     text-align: left;
     margin-bottom: 20px;
   }

   .shipping-btn {
     display: block;
     /* makes the entire box clickable */
     margin: 40px auto 0 auto;
     /* centered */
     max-width: 1200px;
     padding: 15px;
     font-size: 20px;
     font-weight: bold;
     text-align: center;
     border-radius: 5px;
     background: #073b1a;
     color: #f8ebc1;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
   }

   .shipping-btn:hover {
     background: #f8ebc1;
     /* background color changes */
     color: #073b1a;
     /* text color changes */
   }


   .shippin {
     text-decoration: none;
     color: #f8ebc1;
   }

   .stepss {
     width: 40px;
     height: 40px;
     background-color: #073b1a;
     /* Green */
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 18px;
   }

   .step-text {
     display: inline-block;
     color: #ffffff;
     /* Green */
     background-color: #073b1a;
     padding-inline: 10px;
     border-radius: 5px;

   }

   .step-item {
     display: flex;
     align-items: center;

   }

   hr {
     margin-top: 0 !important;
   }

   .order-div {
     margin-bottom: 0px !important;
     padding-bottom: 0px !important;
     bottom: 0 !important;
   }

   .name {
     background-color: #073b1a;
     color: white;
     text-align: center;
     border-radius: 5px;
     padding-block: 5px;
   }

   #step-1 {
     border: 1px solid #6c746f95;
     padding: 10px;
     border-radius: 5px;
   }

   #add-to-cart-btn {
     background-color: #073b1a;
     color: white;
     width: 50%;
     margin-top: 5px !important;
     border: none;
   }

   #step-2 {
     border: 1px solid #6c746f95;
     padding: 10px;
     border-radius: 5px;
   }

   #step-3 {
     border: 1px solid #6c746f95;
     padding: 10px;
     border-radius: 5px;
   }

   #make-payment-btn {
     width: 50%;
     background-color: #073b1a;
     color: white;
     border: none;

   }

   .order-btn {
     background-color: #073b1a;
     color: white;
     border: none;

   }

   #make-payment-btn:hover {
     background-color: #185a30;
   }

   #add-to-cart-btn:hover {
     background-color: #185a30;
   }

   .order-btn:hover {
     background-color: #185a30 !important;

   }

   /* Step 3 styling */
   .payment-section {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 20px;
   }

   .payment-left img {
     width: 90%;
     border: 1px solid #ccc;
     border-radius: 10px;
   }

   .payment-right {
     text-align: left;
   }

   @media (min-width: 768px) {
     .payment-section {
       flex-direction: row;
       /* two columns */
       align-items: flex-start;
       justify-content: space-between;
     }

     .payment-left,
     .payment-right {
       width: 48%;
       text-align: left;
     }

   }

   .payment-inside-heading {
     background-color: #073b1a;
     color: white;
     border-radius: 5px;
     padding: 5px;
     width: 50%;
     text-align: center;
   }

   /* Mobile view: width 90% */
   @media (max-width: 768px) {
     .payment-inside-heading {
       width: 90%;
     }
   }

   .payment-instruction {
     margin-top: 10px;
     background: #fdf1d3b4;
     padding: 10px 15px;
     border-left: 5px solid #1d6037;
     border-radius: 8px;
     margin: 10px 0;
     text-align: left;
     font-size: 13px;
   }

   /* about page css */

   .about-page-heading {
     text-align: center;
     font-size: 2.3rem;
     color: #073b1a !important;
     margin-bottom: 20px;
     font-weight: bold;
   }

   .about-page-sub-heading {
     font-size: 1.7rem;
     color: #073b1a;
     border-left: 5px solid #073b1a;
     padding-left: 12px;
     border-radius: 4px;
     margin-top: 40px;
     margin-bottom: 15px;
   }

   .about-para {
     font-size: 1.1rem;
     color: #333;
     text-align: justify;
     margin-bottom: 20px;
   }

   .about-page-sub-heading ul {
     list-style: none;
     padding-left: 20px;
   }

   .about-page-sub-heading ul li {
     position: relative;
     padding-left: 28px;
     margin-bottom: 10px;
     font-size: 1.05rem;
   }

   .about-page-sub-heading ul li::before {
     position: absolute;
     left: 0;
     top: 0;
   }

   /* Section Styles */
   .about-section {
     border-radius: 14px;
     background: linear-gradient(180deg, #fffaf2 0%, #fff6e0 100%);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
     padding: 45px 40px;
     margin-bottom: 0px;
     transition: 0.4s ease;
     animation: fadeIn 0.8s ease;
   }

   .about-section:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
   }

   /* Divider between sections */
   .divider {
     height: 4px;
     width: 120px;
     background: linear-gradient(90deg, #e2c068, #b4871b);
     border-radius: 3px;
     margin: 30px auto;
   }

   .highlight {
     color: #073b1a;
     font-weight: 600;
   }

   .footer-note {
     text-align: center;
     font-style: italic;
     color: #5a481a;
     margin-top: 50px;
     font-size: 1.05rem;
     padding-top: 20px;
     border-top: 1px solid #e5dcb0;
   }

   .category-subtext {
     font-size: 1rem;
     color: #555;
     margin-bottom: 12px;
     font-style: italic;
   }

   /* Animation */
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(15px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* Responsive */
   @media (max-width: 768px) {
     .about-page-heading {
       font-size: 2.2rem;
     }

     .about-page-sub-heading {
       font-size: 1.3rem;
     }

     .about-para,
     .about-page-sub-heading ul li {
       font-size: 1rem;
     }

     .about-section {
       padding: 30px 20px;
     }
   }