body {
  background-color: white;
  font-family: "Roboto", sans-serif !important;
}
/*<---------------------------------- header ------------------------------------>*/
/* ====== GENERAL NAVBAR STYLING ====== */
.navbar {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  /* border-bottom: 1px solid #ddd; */
  /* Own stacking context so the navbar (and its dropdowns) always paints
     above every section below it, regardless of that section's own
     position/z-index/transform - see .navcon .navbar-nav.ms-auto below,
     which needs this to keep its dropdowns visible on laptop widths. */
  position: relative;
  z-index: 1040;
}
/* Navbar Brand Logo */
.navbar-brand img {
  height: 55px;
}
.navcon {
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 61px;
  height: auto;
  margin-top: 20px;
}
.footer-logo img{
  height: 69px !important;
}
/* Navbar Links */
.navbar-nav .nav-link {
  color: #333;
  font-weight: 600;
  padding: 8px 15px;
}
.navbar-nav .nav-link:hover {
  color: #198754;
}
/* Dropdown Menu */
.dropdown-menu {
  border-radius: 5px;
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.dropdown-item:hover {
  background-color: #198754;
  color: white;
}
/* dropdown */
/* Navbar Links */
.navbar-nav .nav-link {
  font-size: 15px !important;
  color: #333 !important;
  font-weight: bold !important;
  text-transform: capitalize !important;
  padding: 8px 10px;
  font-family: 'Roboto' !important;
  white-space: nowrap;
}
.navbar-nav .nav-link:hover {
  color: #198754;
}
.navbar-expand-lg .navbar-nav .nav-item {
  padding: 0 6px 0 0;
  flex: 0 0 auto;
}
.nav-link{
  padding: 0 !important;
}
.navbar-expand-lg .navbar-nav {
  align-items: center;
  flex-wrap: nowrap;
}
.navbar-brand {
  flex-shrink: 0;
}
.business-inquiry-link {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.business-inquiry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #22c55e;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 12px 9px 16px;
  border-radius: 999px;
  transition: background-color 0.3s ease;
}
.business-inquiry-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #22c55e;
  font-size: 16px;
}
.business-inquiry-link:hover .business-inquiry-btn {
  background-color: #16a34a;
  color: #ffffff;
}

.custom-callback-btn {
  border-radius: 18px !important;
  background-color: #57853c !important;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}
/* keep the desktop nav (and top bar) on a single row without items overlapping, on laptop screens */
@media (min-width: 992px) and (max-width: 1499px) {
  /* Bootstrap's .ms-auto (margin-left: auto !important) plus .navcon's
     justify-content: space-between together push the whole <ul> as far right
     as possible, turning into one large elastic gap between the logo and
     "Home". Desktop has room to spare for that, laptop doesn't - so it's
     reclaimed here for the nav items instead. */
  .navcon {
    justify-content: flex-start !important;
    gap: 40px;
    position: relative;
  }
  /* Break the <ul> out of .container's centered max-width so it reaches the
     true right edge of the viewport, kept off it by a 5px margin. Positioning
     it absolutely and offsetting with calc(50% - 50vw + 5px) cancels out
     .container's own width, so this lands correctly regardless of the
     container's max-width at any width in this breakpoint. */
  .navcon .navbar-nav.ms-auto {
    position: absolute;
    top: 50%;
    right: calc(50% - 50vw + 25px);
    transform: translateY(-50%);
    margin-left: 0 !important;
    z-index: 1040;
  }
  .navbar-nav .nav-link {
    font-size: 13px !important;
  }
  .navbar-expand-lg .navbar-nav .nav-item {
    padding: 0 25px 0 0;
  }
  .navbar-nav .nav-link .leaf-hover {
    display: none;
  }
  .business-inquiry-btn {
    font-size: 12px;
    padding: 8px 10px 8px 12px;
  }
  .business-inquiry-btn i {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
  .custom-callback-btn {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 8px !important;
  }
  .header-cart-btn,
  .header-login-btn {
    margin-left: 6px;
  }
  .top-bar {
    font-size: 13px;
    padding: 7px 0;
  }
  .contact-info,
  .cin-info {
    font-size: 13px;
  }
  .top-content {
    column-gap: 16px;
  }
  .social-icons {
    font-size: 19px;
  }
}
/* small-laptop screens (~1024-1199px) need extra compaction to fit the full nav on one row */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand img {
    height: 34px;
  }
  .navcon {
    gap: 6px;
    margin-top: 14px;
  }
  .navbar-expand-lg .navbar-nav .nav-item {
    padding: 0 0 0 0;
  }
  .navbar-nav .nav-link {
    font-size: 10px !important;
    padding: 6px 2px !important;
  }
  .business-inquiry-btn {
    font-size: 9px;
    padding: 4px 6px 4px 8px;
    gap: 3px;
  }
  .business-inquiry-btn i {
    width: 13px;
    height: 13px;
    font-size: 9px;
  }
  .custom-callback-btn {
    font-size: 9px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 2px !important;
  }
  .header-cart-btn,
  .header-login-btn {
    margin-left: 4px;
  }
  .header-login-btn {
    font-size: 12px;
  }
  .top-bar {
    font-size: 12px;
  }
  .contact-info,
  .cin-info {
    font-size: 12px;
  }
  .top-content {
    column-gap: 12px;
  }
  .social-icons {
    font-size: 17px;
  }
}
.custom-callback-btn:hover {
  background-color: #14672a; /* Darker green on hover */
  color: #ffffff;
}

/* Icon-only collapse/expand-on-hover is a laptop-only space-saving measure
   (screens are tight in the 992-1499px range, see the breakpoints above);
   desktop (>=1500px) has room to spare and keeps the icon + label always shown. */
@media (min-width: 992px) and (max-width: 1499px) {
  .custom-callback-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    padding-left: 10px !important;
    padding-right: 10px !important;
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
  }
  .custom-callback-btn .btn-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease;
  }
  .custom-callback-btn:hover,
  .custom-callback-btn:focus-visible,
  .call-req:focus-within .custom-callback-btn {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 8px;
  }
  .custom-callback-btn:hover .btn-text,
  .custom-callback-btn:focus-visible .btn-text,
  .call-req:focus-within .custom-callback-btn .btn-text {
    max-width: 200px;
    opacity: 1;
  }

  .business-inquiry-btn {
    padding: 9px !important;
    gap: 0;
    transition: background-color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
  }
  .business-inquiry-btn .btn-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease;
  }
  .business-inquiry-link:hover .business-inquiry-btn,
  .business-inquiry-link:focus-within .business-inquiry-btn {
    padding: 9px 12px 9px 16px !important;
    gap: 8px;
  }
  .business-inquiry-link:hover .business-inquiry-btn .btn-text,
  .business-inquiry-link:focus-within .business-inquiry-btn .btn-text {
    max-width: 200px;
    opacity: 1;
  }
}

/* dealer-today only (detected via :has(.become-dealer-btn)): keep Call Back
   Request/Business Inquiry icon-only with expand-on-hover across the whole
   desktop nav (not just the laptop-only range below), matching Become a Dealer */
@media (min-width: 992px) {
  .navcon:has(.become-dealer-btn) .custom-callback-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
  }
  .navcon:has(.become-dealer-btn) .custom-callback-btn .btn-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease;
  }
  .navcon:has(.become-dealer-btn) .custom-callback-btn:hover,
  .navcon:has(.become-dealer-btn) .custom-callback-btn:focus-visible,
  .navcon:has(.become-dealer-btn) .call-req:focus-within .custom-callback-btn {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 8px;
  }
  .navcon:has(.become-dealer-btn) .custom-callback-btn:hover .btn-text,
  .navcon:has(.become-dealer-btn) .custom-callback-btn:focus-visible .btn-text,
  .navcon:has(.become-dealer-btn) .call-req:focus-within .custom-callback-btn .btn-text {
    max-width: 200px;
    opacity: 1;
  }

  .navcon:has(.become-dealer-btn) .business-inquiry-btn {
    padding: 9px !important;
    gap: 0;
    transition: background-color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
  }
  .navcon:has(.become-dealer-btn) .business-inquiry-btn .btn-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease;
  }
  .navcon:has(.become-dealer-btn) .business-inquiry-link:hover .business-inquiry-btn,
  .navcon:has(.become-dealer-btn) .business-inquiry-link:focus-within .business-inquiry-btn {
    padding: 9px 12px 9px 16px !important;
    gap: 8px;
  }
  .navcon:has(.become-dealer-btn) .business-inquiry-link:hover .business-inquiry-btn .btn-text,
  .navcon:has(.become-dealer-btn) .business-inquiry-link:focus-within .business-inquiry-btn .btn-text {
    max-width: 200px;
    opacity: 1;
  }
}

/* dealer-today page only: icon-only by default, label expands on hover/focus (always, not just on laptop widths) */
.become-dealer-link {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.become-dealer-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  background-color: #1B8836;
  color: #fff !important;
  border-radius: 18px;
  padding: 8px 10px !important;
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}
.become-dealer-btn i {
  color: #fff !important;
  font-size: 14px;
  line-height: 1;
}
.become-dealer-btn .btn-text {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}
.become-dealer-btn:hover,
.become-dealer-btn:focus-visible {
  background-color: #166b2b;
  color: #fff !important;
  padding: 8px 14px !important;
  gap: 8px;
}
.become-dealer-btn:hover .btn-text,
.become-dealer-btn:focus-visible .btn-text {
  max-width: 200px;
  opacity: 1;
}

.header-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: #57853c;
  color: #000 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  margin-top: -7px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-decoration: none !important;
  white-space: nowrap;
}
.header-cart-btn:hover {
  background-color: #14672a;
  transform: translateY(-1px);
  color: #000 !important;
}
.header-cart-btn i {
  color: #000 !important;
  font-size: 15px;
  line-height: 1;
}
.header-login-btn {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #000 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  margin-top: 0;
  gap: 5px;
  transition: color 0.3s ease, transform 0.2s ease;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.header-login-btn:hover {
  transform: translateY(-1px);
  color: #000 !important;
}
.header-login-btn i {
  color: #000 !important;
  font-size: 13px;
  line-height: 1;
}
/* Dropdown Menu */
.dropdown-menu {
  border-radius: 5px;
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  /* Stay in the render tree (display: block, beating template.css's own
     ".navbar .navbar-nav li > ul.dropdown-menu { display: block; }" at
     >=992px) so opacity/transform can animate on hover - but visibility:
     hidden (not opacity alone) is what actually hides it, since only
     visibility (and not opacity) also removes it from hit-testing, so the
     closed menu can't sit invisibly on top of content below and swallow
     clicks meant for that content. */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0.85) translateY(-8px);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 1050 !important;
}
/* Show on hover, and while JS keeps ".show" applied during the pointer's
   diagonal path from the (narrow) nav-link down into the (wider) menu below
   it - hover alone drops out the instant the pointer leaves the link's own
   box before reaching the menu, closing it before a real mouse can arrive. */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown.show .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1) translateY(0);
  pointer-events: auto;
  margin-top: 0;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
/* Dropdown Item Hover Effect */
.dropdown-item:hover {
  background-color: #198754;
  color: white;
}
/* ====== TOP BAR STYLING ====== */
.top-bar {
  align-content: center;
  background-image: -webkit-linear-gradient(rgba(50, 48, 48, 0.5), rgba(49, 45, 45, 0.164)), url(../../../images/newimage/home/banner/top-bar-bg.jpg);
  /* background-color: #2E6F40; */
  min-height: 42px;
  height: auto;
  padding: 8px 0;
  color: white;
  font-size: 16px;
}
.top-bar a {
  font-family: "Roboto", sans-serif;
  color: white;
  text-decoration: none;
  margin-left: 10px;
}
.top-content {
  row-gap: 6px;
  column-gap: 22px;
}
.cin-info {
  flex-shrink: 0;
  white-space: nowrap;
}
.contact-info {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px !important;
  white-space: nowrap;
  /* margin-right: 80px; */
}
.top-bar a:hover {
  /* text-decoration: underline; */
  color: #000000 !important;
}
.callreq-btn {
  padding: 5px !important;
  height: 32px;
  margin: 5px 0 5px 0;
}
.call-req:hover {
  color: #001408;
}
.shape-layer-bottom {
  -webkit-mask-image: url(../../../images/newimage/header/shape-layer1.webp);
  position: relative;
  height: 16px;
  background-color: #FFFFFF;
  bottom: -15px;
  z-index: 30;
}
.footer-img {
  position: relative;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  background-image: url(../../../images/newimage/footer/footer-g.png);
  /* background-size: cover;
  background-repeat: no-repeat; */
  background-position: center;
  z-index: 1;
}
.footer-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  /* Black with 50% opacity */
  z-index: 2;
}
.footer-img .container {
  position: relative;
  z-index: 3;
}
.call-btn {
  background: white !important;
  color: #1c981c !important;
  --bs-btn-padding-y: 0px;
  padding-top: 6px !important;
  padding-bottom: 5px !important;
  padding-right: 17px !important;
  padding-left: 17px !important;
  font-size: medium !important;
  border-radius: 29px !important;
  /* margin-bottom: 8px !important; */
}
.call-btn:hover {
  background: transparent !important;
  color: white !important;
  border: 2px solid white !important;
}
.shape-layer-top {
  -webkit-mask-image: url(../../../images/newimage/header/shape-layer1.webp);
  position: relative;
  height: 16px;
  background-color: #FFFFFF;
  bottom: 10px;
  z-index: 1;
  transform: scaleY(-1);
}
.shape-layer-top-gray {
  -webkit-mask-image: url(../../../images/newimage/header/dada-patti.webp);
  position: relative;
  height: 16px;
  background-color: #dadada;
  bottom: 17px;
  z-index: 1;
}
.shape-layer-top-gray-1 {
  -webkit-mask-image: url(../../../images/newimage/header/dada-patti.webp);
  position: relative;
  height: 15px;
  background-color: #dadada;
  bottom: 8px;
  z-index: 1;
  transform: scaleY(-1);
}
/* .shape-layer-top-gray {
  -webkit-mask-image: url(../../../images/newimage/header/dada-patti.webp);
  position: relative;
  height: 31px;
  background-color: #dadada;
  bottom: -74px;
  z-index: 1;
} */
.social-icons {
  font-size: 25px;
  margin-top: 3px !important;
}
/* mobile nav */
.social-iconsm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 17px;
  /* margin-left: 133px; */
  /* Default for larger screens */
}
.social-iconsm a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 20px;
  color: white;
}
.social-iconsm a:nth-child(1) {
  background: #1877f2;
}
/* Facebook */
.social-iconsm a:nth-child(2) {
  background: #ff0000;
}
/* YouTube */
.social-iconsm a:nth-child(3) {
  background: #0077b5;
}
/* LinkedIn */
.social-iconsm a:nth-child(4) {
  background: #ff0000;
}
/* twitter  */
.social-iconsm a:nth-child(5) {
  background: #1da1f2;
}
/* Instagram */
.social-iconsm a i {
  transition: transform 0.3s;
}
.social-iconsm a:hover i {
  transform: scale(1.1);
}
.callback-btn {
  background: none;
  border: 2px solid rgb(8, 8, 8);
  color: white;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.callback-btn:hover {
  background: white;
  color: black;
}
/* Achivement css */
.achievement-heading {
  font-size: 2.5rem;
  /* color: #2d871b; */
}
.achievement-subheading {
  font-size: 1.3rem;
  color: #444;
}
.achievement-card {
  transition: all 0.3s ease-in-out;
  background-color: #f8f9fa;
}
.achievement-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #66cb5775;
}
.achievement-img {
  transition: transform 0.3s ease;
}
.achievement-card:hover .achievement-img {
  transform: scale(1.05);
}
/* Achivement css */
/*<------------------------------------------------ banner section------------------------------------------------------------> */
/* Custom Banner Class */
.custom-banner {
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  /* Keeps text stacked */
  justify-content: flex-end;
  /* Pushes text to bottom */
  align-items: flex-start;
  /* Aligns text to the right */
  min-height: 83vh;
  justify-content: center;
  padding: 50px 10px;
  position: relative;
}
/* Banner Content Box */
.custom-banner-content {
  background: rgba(0, 0, 0, 0);
  /* Semi-transparent background */
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  /* Aligns text inside box to the left */
  max-width: 100%;
  margin-left: 20px;
  /* Adds space from the left edge */
}
/* Banner Headings */
.custom-banner h1 {
  font-size: 3rem;
  font-weight: bold;
  font-family: 'Playfair Display', sans-serif;
  color: #A1B127;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
/* Banner Paragraph */
.custom-banner p {
  font-size: 1rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/*<---------------- our catogerires start-----------------> */
/* Product Section */
.custom-product-section {
  background-color: #f8f9fa;
  padding: 50px 10px;
}
/* Category Heading */
.custom-category-title {
  font-size: 15px;
  color: #1B8836;
}
.custom-heading {
  color: #2f8548;
}
/* Button Styling */
.custom-btn {
  background: #1B8836;
  color: white;
  padding: 10px 25px;
  border-radius: 35px;
  border: none;
  font-size: 16px;
  transition: 0.3s;
}
.custom-btn:hover {
  background: #145f26;
}
/* our catagori  title */
.our-catagori {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1* var(--bs-gutter-y));
  margin-right: calc(-.5* var(--bs-gutter-x));
  margin-left: calc(-.5* var(--bs-gutter-x));
  flex-direction: column;
  align-items: center;
  align-content: center;
}
.gx-3 {
  display: flex;
  --bs-gutter-x: 1rem;
  flex-direction: row;
  justify-content: center;
}
/*  our catagori card */
/* Section Styling */
.new-categories-width {
  width: 95% !important;
}
.trending-products {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
/* Carousel Container */
.carousel-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Product Card */
.product-card {
  height: 254px;
  width: 220px;
  /* Set fixed width */
  background: white;
  border-radius: 30px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}
.product-card:hover {
  transform: translateY(-5px);
}
/* Product Image */
.product-card img {
  width: 60%;
  max-width: 100px;
  height: auto;
  margin: auto;
}
/* Product Title */
.product-card h4 {
  font-size: 16px;
  color: #2c2c2c;
  font-family: 'Roboto';
}
/* Read More Button */
.product-btn2 {
  background: #054e1a !important;
  color: white !important;
  border-radius: 10px;
  padding: 11px 40px 11px 40px;
  border: none;
  cursor: pointer;
  /* font-weight: bold; */
  transition: 0.3s ease;
}
.product-btn2:hover {
  background: #14661d;
}
/* Product Cards */
.custom-card {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  padding: 20px;
  background: white;
  transition: 0.3s;
}
.custom-card h4 {
  color: #214F26;
}
.custom-card:hover {
  transform: translateY(-5px);
}
/* About Section */
.custom-about-section {
  background-color: #f8f9fa;
  padding: 60px 10px;
}
/* Image Styling */
.main-img {
  width: 70%;
  height: 450px;
  border-radius: 0px;
}
.overlay-img {
  position: absolute;
  border-radius: 250px;
}
.plant-img {
  width: 30%;
  height: 190px;
  top: -16%;
  right: 5%;
}
.life-img {
  width: 38%;
  height: 241px;
  bottom: -21%;
  left: 52%;
}
.left-side {
  margin-bottom: 90px;
  display: flex;
  justify-content: flex-start;
}
/* Text Section */
.custom-text-container {
  padding-left: 30px;
}
.custom-header {
  display: flex;
  align-items: center;
}
.leaf-icon {
  width: 25px;
  height: auto;
}
.custom-subtitle {
  font-size: 1.8rem;
  color: #1B8836;
  margin-left: 10px;
}
/* Feature Boxes */
.custom-features {
  margin-top: 20px;
}
.custom-feature {
  display: flex;
  align-items: center;
  border-radius: 50px;
  margin-bottom: 15px;
}
.feature-icon img {
  width: 50px;
  height: auto;
  margin-right: 15px;
}
.feature-text h5 {
  color: #214F26;
  font-weight: 600;
}
.feature-text p {
  font-size: 14px;
  color: #5a5a5a;
}
/* imgage hover  */
/* Base state */
.left-side img {
  transition: transform 0.3s ease;
  will-change: transform;
  cursor: pointer;
}
/* Keyframes: space float motion */
@keyframes spaceFloat {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(3px, -5px) rotate(1deg);
  }
  50% {
    transform: translate(-3px, 4px) rotate(-1.5deg);
  }
  75% {
    transform: translate(2px, -2px) rotate(1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
/* On hover: trigger the float */
/* .left-side .main-img:hover,
.left-side .plant-img:hover,
.left-side .life-img:hover {
  animation: spaceFloat 3s ease-in-out infinite;
} */
/* imgage hover  */
/* read more button css */
/* === Animated Modern Button === */
.animated-button {
  /* position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 36px;
  border: 4px solid transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 6px;
  font-weight: 600;
  color: #198754;
  box-shadow: 0 0 0 2px #198754;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none; */
  /* important for <a> */
}
.animated-button svg {
  /* position: absolute;
  width: 24px;
  fill: #198754;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); */
}
.animated-button .arr-1 {
  /* right: 16px; */
}
.animated-button .arr-2 {
  /* left: -25%; */
}
.animated-button .circle {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #198754;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); */
}
.animated-button .text {
  /* position: relative;
  color: #198754;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); */
}
.animated-button:hover {
  /* box-shadow: 0 0 0 12px transparent;
  color: #fff;
  border-radius: 6px; */
}
.animated-button:hover .arr-1 {
  /* right: -25%; */
}
.animated-button:hover .arr-2 {
  /* left: 16px; */
}
.animated-button:hover .text {
  /* transform: translateX(12px);
  color: #fff; */
}
.animated-button:hover svg {
  /* fill: #fff; */
}
.animated-button:active {
  scale: 0.95;
  /* box-shadow: 0 0 0 4px #198754; */
}
.animated-button:hover .circle {
  /* width: 220px;
  height: 220px;
  opacity: 1; */
}
/* Animated Button */
.animated-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  background-color: #1B8836;
  color: #fff;
  /* Initial text color */
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}
/* Text */
.animated-button .text {
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease, color 0.4s ease;
}
/* Arrows */
.animated-button .arr-1,
.animated-button .arr-2 {
  width: 20px;
  height: 20px;
  fill: #fff;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Arrow 1 (on the left) */
.animated-button .arr-1 {
  transform: translateX(-30px);
  opacity: 0;
}
/* Arrow 2 (on the right) */
.animated-button .arr-2 {
  transform: translateX(0);
  opacity: 1;
}
/* Circle Effect */
.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease 0.2s;
  /* Added delay */
  z-index: 1;
}
/* Hover State */
.animated-button:hover {
  background-color: #145e25;
  color: #fff;
  /* Keep text white on hover */
}
/* On hover, arrow 1 moves into position */
.animated-button:hover .arr-1 {
  transform: translateX(0);
  opacity: 1;
}
/* On hover, arrow 2 moves out */
.animated-button:hover .arr-2 {
  transform: translateX(30px);
  opacity: 0;
}
/* On hover, the text moves slightly */
.animated-button:hover .text {
  transform: translateX(-10px);
  color: #fff;
  /* Keep text color white */
}
/* On hover, the circle expands */
.animated-button:hover .circle {
  width: 300%;
  height: 300%;
}
/* read more button css */
/* learn more button */
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.learn-more {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background-color: #1B8836;
  color: #fff;
  /* Initial color of text */
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(27, 136, 54, 0.3);
}
/* Hover state - Change background color */
.learn-more:hover {
  background-color: #145e25;
  box-shadow: 0 8px 24px rgba(20, 94, 37, 0.4);
}
/* The text inside the button */
.learn-more .button-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  color: #fff;
  /* Ensure text is white after hover */
}
/* The arrows */
.arrow {
  transition: all 0.4s ease;
  font-size: 24px;
  /* Increase arrow size */
}
/* Initial state of left arrow (before hover) */
.arrow-left {
  opacity: 1;
  transform: translateX(0);
}
/* Initial state of right arrow (before hover) */
.arrow-right {
  opacity: 0;
  transform: translateX(-10px);
}
/* On hover: left arrow disappears, right arrow appears */
.learn-more:hover .arrow-left {
  opacity: 0;
  transform: translateX(-10px);
}
.learn-more:hover .arrow-right {
  opacity: 1;
  transform: translateX(0);
}
/* Text color change after hover animation */
.learn-more .button-text {
  color: #fff;
  /* Ensure text is white after animation */
  transition: color 0.4s ease 0.4s;
  /* Delay the color change */
}
/* Circle animation on hover */
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: 1;
}
.learn-more:hover .circle {
  width: 300%;
  height: 300%;
}
/* learn more button */
/* progress card hover effect */
.progress-card {
  transition: all 0.3s ease-in-out;
  border-radius: 1rem;
}
.progress-card:hover {
  transform: translateY(-8px) scale(1.02);
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); */
  background-color: #f8fdf9;
  /* light greenish tone */
}
.progress-card:hover .counter {
  color: #1B8836;
  /* slightly brighter on hover */
}
.progress-card:hover h6 {
  color: #2C5730;
}
/* progress card hover effect */
/* Button */
.custom-btn {
  padding: 15px 30px !important;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
  /* background: #214F26 !important;
  color: white !important;
  padding: 12px 25px !important;
  border-radius: 50px !important;
  border: none !important;
  font-size: 16px !important;
  transition: 0.3s !important;
  box-shadow: 4px 4px 4px 3px rgba(0, 0, 0, 0.2) !important; */
}
.custom-btn:hover {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}
.custom-btn:active {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}
.custom-btn:hover {
  /* background: #1B8836 !important; */
}
/* product */
/* our product section */
.our-products-section {
  background: #f9f9f9;
}
.section-icon {
  width: 25px;
  height: 25px;
}
.section-subtitle {
  font-size: 15px;
  color: #1B8836;
  margin-left: 5px;
}
.section-title {
  color: #2C5730;
  font-weight: 600;
}
.nav-tabs .nav-link {
  color: #214F26;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  border-bottom: 3px solid #1B8836;
}
.product-card-trending {
  background: #fff;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  margin: 10px 10px 10px 12px;
  padding: 10px;
  height: 430px;
  width: 309px;
}
.owl-dots {
  display: none !important;
}
.product-card-trending h4 {
  margin-top: 7px;
}
.product-image-trending {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.category-trending {
  font-size: 15px;
  color: #888;
  /* margin: 10px 0px 10px 0px; */
}
.product-title-trending {
  color: #214F26;
  font-weight: 600;
  font-size: 15px;
  /* margin-bottom: 20px; */
  width: 100%;
  /* height: 44px; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: 16px;
  line-height: 1.4;
  max-height: 2.8em;
  font-family: 'Roboto';
}
.product-button-trending {
  background: #1B8836 !important;
  color: white !important;
  display: block;
  text-align: center;
  text-decoration: none !important;
  border: none;
  width: 90%;
  padding: 10px;
  font-weight: 600;
  border-radius: 10px;
  transition: 0.3s;
  font-size: 20px !important;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  z-index: 1;
}

.product-button-trending:hover {
  color: #000 !important;
}

.product-btn:hover {
  background: #16682b;
}
.left-banner {
  width: 23%;
  margin-top: 39px !important;
}
.right-banner {
  width: 77%;
}
.banner-image {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* OUR PRODUCT OVERLAY AND LEFT SECTION */
.shop-btn:hover {
  background: rgba(2, 95, 30) !important;
  color: white !important;
}
.banner-left {
  position: relative;
  width: 105%;
  height: 295px;
  /* background-image: url(../../../images/newimage/explorproduct/categoriesbg.webp); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Overlay for dark effect */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* Dark overlay */
  border-radius: 10px;
}
.custom-dropdown {
  width: 500px;
}
/* Content inside banner */
.banner-content {
  /* position: absolute; */
  color: #fff;
  z-index: 1;
  /* margin-top: 110px;
  margin-left: 50px; */
}
.banner-content h2 {
  /* font-size: 24px; */
  font-weight: bold;
  margin-bottom: 5px;
}
.banner-content p {
  font-size: 16px;
  margin-bottom: 15px;
}
/* Button styling */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #fff;
  /* White border */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: 0.3s;
  background: transparent;
}
/* .btn:hover a {
  background: white;
  color: rgb(9, 189, 78);
} */
/* mobile c-r-b */
.cbr {
  display: inline-block;
  padding: 10px 20px;
  border: 0.5px solid #020202;
  /* White border */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: 0.3s;
  background: transparent;
}
.cbr a {
  text-decoration: none;
  color: black;
}
.products-trending {
  background-color: white;
}
/* Custom Progress Bar */
.custom-progress {
  background-color: white;
}
.custom-progress .custom-progress-box {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}
.brands-text {
  margin-bottom: 14px;
}
/* compny-information */
.custom-company-information {
  background-color: #f8f9fa;
}
/* compny-profile-text */
.compny-text {
  font-size: 19px;
  margin-top: 36px;
}
.info-items {
  border-radius: 32px;
}
.custom-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  border: 3px solid #1B8836;
  border-radius: 30px;
}
.info-text {
  margin-top: -45px;
  background: #1B8836;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 15px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}
.info-text i {
  padding: 15px;
  color: #1B8836;
  background: #ffffff;
  border-radius: 30px;
  border: 6px solid #1B8836;
}
/* Container to position button over image */
.image-container {
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: pointer;
}
/* Circular download button positioned on image */
.download-btn {
  width: 60px;
  height: 60px;
  background-color: white;
  color: #1B8836;
  border: 5px solid #1B8836;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
.download-btn i {
  font-size: 20px;
  transition: transform 0.3s ease;
}
.download-btn:hover i {
  transform: translateY(4px);
  /* arrow moves down */
}
/* .text-white {
  margin-bottom: 19px;
} */
.mt-2 {
  margin-top: 1.8rem !important;
}
.pd-3 {
  padding: 0.2rem !important;
}
/* custom-achivment */
.custom-achievement {
  background-color: #f8f9fa;
}
.achievement-icon {
  width: 2%;
  height: 27px;
}
.achievement-title {
  font-size: 16px;
  color: #1B8836;
  padding-top: 1px;
  padding-left: 5px;
}
.achievement-heading {
  color: #2C5730;
}
.achievement-image {
  width: 100%;
  max-width: 98%;
}
.achievement-subtitle {
  color: #2C5730;
}
.achievement-btn {
  background: #2C5730;
  color: #ffffff;
  border-radius: 35px;
}
/* custom footer */
.custom-footer {
  background-color: #001408;
  color: white;
}
.social-icon {
  padding: 10px;
  margin: 0 5px;
  border-radius: 35px;
  color: #ffffff;
  text-align: center;
}
.foter-text {
  width: 300px;
}
.container-produst {
  width: 1500px;
}
/* Responsive Design */
@media (max-width: 768px) {
  .products-trending {
    padding: 20px;
  }
  .carousel-container .product-card {
    width: 85%;
    margin: 10px 0;
  }
  .custom-category img {
    width: 5%;
  }
}
/* <-----------------------------footer styling start ------------------------------------------->*/
/* Footer Icon Styling */
.footer-icon {
  width: 25px;
  /* Set the width of the image */
  height: auto;
  /* Maintain aspect ratio of the image */
  margin-right: 10px;
  /* Space between the image and text */
  vertical-align: middle;
  /* Align image with text vertically */
}
/* Style for mobile and email with image */
.footer-info-contact {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  margin-bottom: 20px;
  /* Space between lines */
}
/* Add color white to the text within the links */
.footer-contact-link {
  color: white;
  /* Light white color for text */
  text-decoration: none;
  /* Optional: remove underline if you want */
}
/* custom footer */
.custom-footer {
  background-color: #001408;
  color: white;
}
.social-icon {
  padding: 10px;
  margin: 0 5px;
  border-radius: 35px;
  color: #ffffff;
  text-align: center;
}
.foter-text {
  width: 300px;
}
.container-produst {
  width: 1500px;
}
footer h6 {
  letter-spacing: 1px;
  font-size: 16px;
  color: #ccc;
}
footer p,
footer a {
  font-size: 14px;
  color: #ddd;
}
footer a:hover {
  /* font-weight: 600; */
  text-decoration: none;
  color: #040404 !important;
  transition: color 0.3s ease;
}
/* From Uiverse.io by david-mohseni */
/* btn */
.wrapper {
  display: inline-flex;
  list-style: none;
  height: auto;
  width: 100%;
  padding-top: 13px;
  font-family: "Poppins", sans-serif;
  justify-content: left;
  padding-left: 0px;
  flex-wrap: nowrap;
}
.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px 10px 10px 0;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1da1f2;
  color: #fff;
}
.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
  background: #0a66c2;
  color: #fff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #ff0000;
  color: #fff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}
/* <-------------------------------------footer-style end----------------------------------> */
/* mobile navbar: Bootstrap's default .navbar > .container is
   justify-content: space-between, spreading the logo and the hamburger
   toggle to opposite ends of the row. Pull them together instead. This
   nav is already mobile-only (d-lg-none), so no media query is needed. */
.navbar.d-lg-none > .container {
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  gap: 2px;
}
/* Let the brand shrink (and its img scale down within it) instead of ever
   overflowing the row - a wide-aspect-ratio logo would otherwise push past
   the container and Bootstrap's inherited flex-wrap would drop it onto its
   own line. Centered via the container's justify-content: center now that
   the toggler is taken out of flow below. */
.navbar.d-lg-none .navbar-brand {
  min-width: 0;
  max-width: calc(100% - 60px);
  flex: 0 1 auto;
  overflow: hidden;
}
/* Taken out of the flex flow and pinned to the row's right edge so the
   brand above can be centered in the full row width regardless of the
   toggler's own size. */
.navbar.d-lg-none .navbar-toggler {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
/* <--------------------------------------------mobile view ----------------------------> */
/* mobile view  */
@media (max-width: 768px) {
  /*------------------------------------ header start ----------------------------------------------------- */
  /* topbar */
  .top-bar {
    display: none;
  }
  .navbar-brand img {
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 100%;
    margin-top: 8px;
  }
  .offcanvas-body {
    padding: 15px;
  }
  .offcanvas-body .nav-link {
    font-size: 16px;
    padding: 10px 0;
  }
  .offcanvas-body .login-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #000 !important;
    background: #f2f6ef;
    border: 1px solid #5d903a;
    border-radius: 10px;
    padding: 8px 14px !important;
    margin-top: 8px;
  }
  .offcanvas-body .login-nav-link i {
    color: #000 !important;
  }
  /* .social-icons {
    margin-left: 154px;
  } */
  .contact-info {
    /* margin-left: 63px; */
    font-size: 13px;
  }
  /*----------------------------------------------------- header end ----------------------------------------------------- */
  .nav {
    display: flex;
    justify-content: center;
  }
  /* our ctagories */
  .product-card {
    width: 205px;
    background: white;
    border-radius: 30px;
    padding: 20px;
    margin: 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
  }
  .product-card h4 {
    font-size: 13px !important;
  }
  .tp {
    margin-left: 7px;
  }
  /* .custom-category img {
    width: 10%;
  } */
  /* about-section */
  /* Image Styling */
  .main-img {
    width: 70%;
    height: 260px;
    border-radius: 250px;
  }
  .overlay-img {
    position: absolute;
    border-radius: 250px;
  }
  .plant-img {
    width: 32%;
    height: 119px;
    top: -31%;
    right: 4%;
  }
  .life-img {
    width: 39%;
    height: 144px;
    bottom: -20%;
    left: 53%;
  }
  .left-side {
    margin-bottom: 90px;
    display: flex;
    justify-content: flex-start;
  }
  /* product-left-side */
  .banner-left {
    position: relative;
    width: 95%;
    height: 343px;
    MARGIN-LEFT: 10PX;
    background-image: url(../../../images/newimage/home/explorproduct/categoriesbg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  @media screen and (min-width: 320px) and (max-width: 425px) {
    .footer-logo img{
      width: 383px !important;
      height: 100px !important;
    }
    .footer-links{
      justify-content: center !important;
    }
  }
  .left-banner {
    width: 95% !important;
    margin-top: -10px !important;
  }
  .right-banner {
    width: 95% !important;
  }
  /*-------------------------------------------------- custom-footer for mobile view -------------------------------------------------- */
  .footer-detail {
    text-align: center;
    margin-top: 34px;
    margin-bottom: 12px;
  }
  .sub-b {
    line-height: 16px;
    height: 39px;
  }
  .foter-text {
    text-align: justify;
  }
  .contact-us {
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  .footer-all-column {
    width: 100%;
    padding: 10px;
  }
  .policy {
    text-align: center;
  }
  .menu {
    text-align: center;
  }
  .footerd-flex {
    flex-direction: row;
    align-items: center;
  }
  .social-icon {
    display: inline-block;
    margin: 5px;
  }
  .footerd-text {
    font-size: 20px;
  }
  .fot-col {
    justify-items: center;
  }
}
/*<---------------------------------------------------- tablet view-----------------------------------------> */
@media (min-width: 440px) and (max-width: 1024px) {
  .container {
    max-width: 100%;
  }
  .navbar-brand img {
    height: 38px;
    margin-left: 21px;
  }
  /*<------------------------------  header  for tabel view  ---------------------------->*/
  .custom-banner {
    padding: 20px;
    justify-content: flex-start;
    /* Moves text to the top */
    align-items: flex-start;
    /* Aligns text to the left */
  }
  .custom-banner-content {
    max-width: 100%;
    /* Makes text box wider for better fit */
    text-align: left;
    /* Centers text inside content box */
    margin-left: 3px;
    /* Removes left margin for small screens */
    padding: 15px;
    /* Adds better spacing */
    margin-top: 260px;
  }
  .custom-banner h1 {
    font-size: 1.8rem;
    /* Slightly smaller heading */
  }
  .custom-banner p {
    font-size: 0.9rem;
    /* Slightly smaller text */
  }
  /* product */
  .custom-product-section {
    padding: 30px 5px;
  }
  .custom-category {
    text-align: center;
  }
  .custom-heading {
    font-size: 1.8rem;
  }
  .custom-btn {
    width: 100%;
    font-size: 14px;
  }
  .custom-card {
    padding: 15px;
    text-align: center;
  }
  .custom-card h4 {
    font-size: 1.2rem;
  }
  /* about-section */
  .custom-about-section {
    padding: 30px 5px;
  }
  .main-img {
    width: 65%;
    height: 240px;
  }
  .plant-img,
  .life-img {
    width: 25%;
    height: 100px;
    display: block;
    margin: 10px auto;
  }
  .custom-header {
    margin-top: 85px;
  }
  .custom-text-container {
    padding-left: 10px;
    text-align: center;
  }
  .custom-title {
    font-size: 1.8rem;
  }
  .custom-btn {
    width: 100%;
  }
  .custom-feature {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  .feature-icon img {
    width: 40px;
    margin-bottom: 10px;
  }
  /* our product */
  /* Responsive Adjustments */
  .product-header-title {
    font-size: 1.8rem;
  }
  .product-tabs-link {
    font-size: 0.9rem;
    padding: 6px 12px;
  }
  .product-card-box {
    padding: 10px;
  }
  .product-card-image {
    max-height: 150px;
  }
  .product-card-box .text-white {
    padding: 8px;
  }
  .text-white .py-3 {
    padding-right: 0px;
    padding-left: 0px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
  }
  /* custom-progress */
  .custom-progress .custom-progress-box {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
  }
  /* compny -info */
  .custom-image {
    max-height: 307px;
  }
  .com-info-text {
    font-size: 16px;
    color: #ffffff;

  }
  /*<--------------------- custom-footer for tablet view ------------------------>*/
  .footer-detail {
    text-align: center;
  }
  .contact-us {
    text-align: center;
  }
  .policy {
    text-align: center;
  }
  .menu {
    text-align: center;
  }
  .footerd-flex {
    flex-direction: row;
    align-items: center;
  }
  .social-icon {
    display: inline-block;
    margin: 5px;
  }
}
@media (min-width: 440px) and (max-width: 1024px) {
  .container {
    max-width: 95%;
  }
  .navbar-brand img {
    height: 81px;
  }
  .main-img {
    width: 96%;
    height: 439px;
    border-radius: 250px;
  }
  .plant-img {
    width: 33%;
    height: 160px;
    top: -11%;
    right: -1%;
  }
  .life-img {
    width: 38%;
    height: 191px;
    bottom: -21%;
    left: -1%;
  }
  /*  our product */
  .product-header-title {
    font-size: 1.8rem;
  }
  .product-tabs-nav .product-tabs-link {
    font-size: 1rem;
    padding: 8px 15px;
  }
  .product-col {
    width: 25%;
  }
  .product-card-title {
    font-size: 1.1rem;
  }
  .product-col .text-white {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  /* custom- progress */
  custom-progress-left {
    text-align: center;
  }
  .custom-progress .custom-progress-box {
    padding: 10px;
  }

  .custom-progress-right .row {
    justify-content: center;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    font-weight: bold !important;
    ;
    color: #333 !important;
    font-size: 13px !important;
    ;
    text-transform: uppercase;
  }
  /* compny-info */
  .custom-image {
    max-height: 200px;
  }
  .com-info-text {
    font-size: 16px;
  }
  /* custom-footer */
  .footer-detail {
    flex-direction: row;
    text-align: center;
  }
  .social-icon {
    margin: 5px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar-expand-lg .navbar-nav>li.nav-item {
    line-height: 21px;
  }
  .product-shows-data-col {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    margin: 1px;
    flex: 0 0 auto !important;
    width: 30% !important;
    margin: 14px;
    border: 1px solid lightgray;
    border-radius: 9px;
  }
  .navbar-brand img {
      height: 51px;
      width: 142px;
      margin-left: 21px;
  }
  .footer-logo img{
    width: auto;
  }
  .top-bar {
    align-content: center;
    background-image: -webkit-linear-gradient(rgba(50, 48, 48, 0.5), rgba(49, 45, 45, 0.164)), url(../../../images/newimage/home/banner/top-bar-bg.jpg);
    /* background-color: #2E6F40; */
    height: 98px;
    color: white;
    font-size: 16px;
  }
  .contact-info {
    margin-bottom: 15px;
  }
  .custom-category img {
    width: 10%;
  }
}
@media (min-width: 376px) and (max-width: 425px) {
  .achievement-icon {
    height: auto;
    width: 10%;
  }

}