/*
Theme Name: PhytoCraft
Theme URI: https://wordpress.org/themes/twentythirteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 4.4
Tested up to: 6.8
Requires at least: 3.6
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready, block-patterns
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Variables */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* Background colors */
  --bg-primary: #046A38;
  --bg-primary-hover: #035A30;
  --bg-primary-active: #024F2A;
  --bg-white: #FFFFFF;

  /* Text colors */
  --text-white: #FFFFFF;
  --text-white-soft: #F0F7F3;
  --text-black-soft: #101820;
  --text-black: #000000;
  --text-primary: #046A38;
  --text-secondary: #FDA400;
  --text-grey-light: #4E4C46;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

h1 {
  font-size: 54px;
}

body {
  font-family: "Figtree", sans-serif;
}

/* Tropiline Light */
@font-face {
  font-family: "Tropiline";
  src: url("fonts/Tropiline-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tropiline SemiBold */
@font-face {
  font-family: "Tropiline";
  src: url("fonts/Tropiline-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Tropiline Bold */
@font-face {
  font-family: "Tropiline";
  src: url("fonts/Tropiline-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

a {
  text-decoration: none;
  color: var(--text-primary);
}

a:hover {
  color: var(--text-secondary);
}

.border-bottom {
  border-bottom: 1px solid #046A3817 !important;
}

.border-end {
  border-right: 1px solid #046A3817 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Tropiline", serif;
}

.text-black-soft {
  color: var(--text-black-soft) !important;
}

.text-white {
  color: var(--text-white) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-black {
  color: var(--text-black) !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-grey-light {
  color: var(--text-grey-light) !important;
}

.breadcrumb-item a {
  color: #549C78 !important;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #549C78 !important;
}

.btn-outline-light {
  border: 1px solid #FFFFFF;
  padding: 14px 24px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: uppercase;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;

  /* Smooth transition */
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease;
}

.btn-outline-light:hover {
  background: transparent;
  /* stays same */
  color: #ffffff;
  /* brighter text */
  border-color: #ffffff;
  /* highlighted border */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.btn-outline-dark {
  border: 1px solid #101820;
  padding: 14px 24px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  background: transparent;
  color: #101820;
  cursor: pointer;

  /* Smoothness */
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    transform 0.25s ease,
    box-shadow 0.35s ease;
}

.btn-outline-dark:hover {
  background-color: #101820;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 24, 32, 0.25);
}

.btn-primary {
  background-color: var(--bg-primary);
  border: 1px solid var(--bg-primary);
  padding: 14px 24px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  color: var(--text-white-soft);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

/* Hover */
.btn-primary:hover {
  background-color: var(--bg-primary-hover);
  border-color: var(--bg-primary-hover);
  box-shadow: 0 10px 28px rgba(4, 106, 56, 0.35);
  transform: translateY(-2px);
}

/* Active / Click */
.btn-primary:active {
  background-color: var(--bg-primary-active) !important;
  ;
  border-color: var(--bg-primary-active) !important;
  box-shadow: 0 6px 14px rgba(4, 106, 56, 0.25);
  transform: translateY(0);
  /* pressed down */
}

/* Focus (keyboard accessibility) */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(4, 106, 56, 0.45);
}

.header-nav {
  gap: 31px;
  margin-left: auto !important;
  padding-right: 2rem;
}

.dropdown-toggle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  position: absolute;
  right: -8px;
  top: 13px;
}

.show>.dropdown-toggle::before {
  transform: rotate(-135deg);
}

.dropdown-toggle::after {
  content: none !important;
}

.header-nav .nav-link {
  font-size: 15px;
  color: var(--text-black-soft);
  font-weight: 400;

}

.header-nav .nav-link.show,
.header-nav .nav-link:hover {
  font-weight: 500;
  color: var(--text-primary);

}

.header-dropdown-menu {
  background-color: var(--bg-primary);
  border: none !important;
  min-width: 250px;
}

.header-dropdown-menu .dropdown-item {
  color: white !important;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px !important;
}

.header-dropdown-menu .dropdown-item i {
  padding-right: 10px;
  font-size: 20px;
}

.header-dropdown-menu .dropdown-item:hover {
  background-color: #038948a8 !important;
}

.home-section {
  position: relative;
  background-color: #FFFBEB;
  height: 714px;
  padding-top: 44px;

  background-image:
    url(./images/topYellowLeaves.png),
    url(./images/homeAnimals.png);

  background-repeat: no-repeat, no-repeat;

  background-position:
    left top,
    right bottom;
  margin-bottom: 228px;
}

.home-section-container {
  margin-top: 100px;
}

.home-sectiom-heading {
  color: var(--text-black-soft) !important;
  font-size: 74px;
  font-weight: 400;
  line-height: 120%;
}

.home-sectiom-heading span {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.home-scroller {
  margin-top: 30px;
}

.home-carosel-card {
  position: relative;
  height: 480px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  padding: 58px;
  overflow: hidden;
}

.home-carosel-card.first-carosel-card {
  background-image: url(images/homecarosel1.jpg);
}

.home-carosel-card.second-carosel-card {
  background-image: url(images/homecarosel2.jpg);
}

.home-carosel-card.third-carosel-card {
  background-image: url(images/homecarosel3.jpg);
}

.home-carosel-card.fourth-carosel-card {
  background-image: url(images/homecarosel4.jpg);
}

.home-carosel-card.fifth-carosel-card {
  background-image: url(images/homecarosel5.jpg);
}

.breadcrumbs,
.breadcrumbs a {
  color: #FFF;
}

.breadcrumbs a:hover {
  color: var(--text-secondary);
}

.page-content {
  padding: 50px 0;
  background-image: url(images/greenleaves.png);
  background-repeat: no-repeat;
  background-position: top left;
}

.blog-image {
  height: 200px;
  background-size: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.section {
  padding: 80px 0;
}

.card {
  border: 1px solid #046A3820;
}

.card-header,
.card-footer {
  background-color: #F0F7F3;
}

.card-header {
  border-bottom: 1px solid #046A3820;
}

.card-footer {
  border-top: 1px solid #046A3820;
}

/* Gradient overlay */
.home-carosel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270.35deg, rgba(67, 100, 134, 0) 23.59%, rgba(32, 46, 61, 0.67) 63.59%, #101820 104.04%);
  border-radius: 8px;
  z-index: 1;
}

/* Keep text above overlay */
.home-carosel-card * {
  position: relative;
  z-index: 2;
}

.home-carosel-card h1 {
  font-size: 60px;
  max-width: 600px;
}

.home-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  position: absolute;
  bottom: 77px;
  left: 58px;
}

.home-carousel .owl-dot {
  background-color: #ffffff !important;
  width: 44px;
  height: 5px;
  border-radius: 40px;
  opacity: 0.3;
}

.home-carousel .owl-dot.active {
  opacity: 1;

  background-color: white !important;
}

.primary-tag {
  background-color: #FDA4001A;
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;

}

.section-heading-tag {
  border: 1px solid #046A3838;

  color: var(--text-black-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 120%;
  background-color: transparent;
  border-radius: 40px;
  padding: 8px 12px;
  text-transform: uppercase;

}

.section-heading-tag-secondary {
  border: 1px solid #FFFFFF38;
  color: var(--text-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 120%;
  background-color: transparent;
  border-radius: 40px;
  padding: 8px 14px;
  text-transform: uppercase;

}

.product-section {
  background-color: var(--text-black-soft);
  background-image:
    url("images/growthsectionbg.png"),
    url(images/productrightbg.png);

  background-repeat:
    no-repeat,
    no-repeat;

  background-position:
    left bottom,
    /* left image */
    right center;
  /* right image */
}

.product-feature {
  background: #FDA4001A;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1150px;
  color: var(--text-secondary);
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 500;

}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.product-card .img-container {
  background-color: #FFF; /* #FFFBEB */
  border: 1px solid #FFFBEB;
  padding: 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;

}

.only-us-section {
  background-color: var(--bg-primary);

  background-image:
    url("images/onlyusleftbg.png"),
    url("images/onlyusrightbg.png"),
    url("images/grassyellowbg.png");

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    left center,
    /* left image */
    right bottom,
    /* right image */
    left bottom;
  /* left bottom image */
}

.only-us-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.belief-section {
  background-color: #FFFDF5;
}

.about-discover-section {
  background-color: #FFFDF5;
  background-image: url(images/rabitgrass.png);
  background-repeat: no-repeat;
  background-position: bottom left;

}

.step-section {
  background-image: url(images/stepsectionbg.png);
  background-repeat: no-repeat;
  background-position: top right;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 0px 8px;
  position: relative;
}

.step-card img {
  width: 40px;
  height: 74px;
}

.step-card::before {
  content: "";
  background-image: url(images/stepline.svg);
  background-repeat: no-repeat;
  position: absolute;
  width: 100px;
  height: 8px;
  right: -76px;
  top: 32px;

}

.step-card:last-child::before {
  display: none;
}

.step-tag {
  background: #046A3817;
  padding: 6px 12px;
  border-radius: 40px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/**
Begin: Product Detail
*/
/* Sticky nav */
.prd-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid var(--bd);
  box-shadow: 0 2px 12px rgba(16, 25, 32, .07)
}

.prd-sticky-nav div {
  display: flex;
  overflow-x: auto;
  padding: 0 16px;
  justify-content: center;
}

.prd-sticky-nav div::-webkit-scrollbar {
  display: none
}

.prd-sticky-nav div a {
  padding: 15px 15px;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: all .15s;
  border-right: 1px solid #00000020;
}

.prd-sticky-nav div a:last-child {
  border-right: none;
}

.prd-sticky-nav div a:hover {
  color: var(--n)
}

.prd-sticky-nav div a.active {
  color: var(--g);
  border-bottom-color: var(--g)
}

/**
End: Product Detail
*/

.growth-section {
  position: relative;
  overflow: hidden;
  /* hides extra part */

  background-image: url("images/growthsectionbg.png");
  background-repeat: no-repeat;
  background-position: left bottom -26px;
  /* push image down */
}

.real-time-card {
  position: relative;
  width: 100%;

  background: linear-gradient(97.69deg,
      #003F20 -25.46%,
      #046A38 31.85%,
      #046A38 72.54%,
      #B7D86D 115.97%);

  border-radius: 8px;
  padding: 70px 60px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;

  overflow: hidden;
  /* important */
}

.real-time-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/growthcardbg.png") center / cover no-repeat;
  opacity: 0.35;
  z-index: 0;
}

.real-time-card>* {
  position: relative;
  z-index: 1;
}

.section-sm {
  padding: 40px;
  padding-bottom: 80px;
}

.trustimonials-section {
  background-color: var(--text-black-soft);
}

.trustimonials-card {
  border-radius: 8px;
  border: 1px solid #F0F7F3;
  padding: 30px;
  padding-top: 64px;
  min-height: 304px;

}

.trustimonials-card.first {
  background: url("images/testimonialsbg1.jpg") center / cover no-repeat;

}

.trustimonials-card.second {
  background: url("images/testimonialscardbg2.jpg") center / cover no-repeat;

}

.trustimonials-card.third {
  background: url("images/testimonialscardbg3.jpg") center / cover no-repeat;

}

.customer-image {
  width: 44px !important;
  height: 44px;
  border-radius: 50%;
}

.vision-section {
  background-color: #FFFAE7;
  position: relative;
  /* height: 676px; */
  padding-bottom: 282px;
}

.vision-tab {
  width: 100%;
  max-width: 886px;

}

.tab-description-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tab-description-container h4 {
  line-height: 142%;
}

.tab-button {
  color: var(--text-black-soft);
  font-size: 20px;
  font-family: "Tropiline";
  width: 200px;
  border-radius: 40px;

}

.tab-button.active:hover {
  color: var(--text-white) !important;

}

.tab-button:hover {
  color: var(--text-primary) !important;

}

.tab-button.active {
  color: var(--text-white);
  font-weight: 600;
  background-color: var(--bg-primary);
}

.commitment-point-container {
  border: 1px solid #046A3829;
  width: 100%;
  max-width: 1335px;
  border-radius: 8px;
}

.commitment-point-container ul {
  display: flex;
  padding: 0px;
  margin: 0px;

}

.commitment-point-container ul li {
  border-right: 1px solid #046A3829;
  padding: 28px 50px;
  text-align: start;
  color: var(--text-black-soft);
  position: relative;
  list-style-type: none;

}

.commitment-point-container ul li::before {
  content: "•";
  color: var(--text-black-soft);
  font-size: 30px;
  position: absolute;
  left: 27px;
  top: 20px;
}

.trust-section {
  height: 375px;
  position: relative;
  background-image: url(images/trustsectionleaves.png);
  background-repeat: no-repeat;
  background-position: left bottom;
}

.trust-card {
  width: 100%;
  max-width: 808px;
  position: absolute;
  top: -176px;
  left: 50%;
  transform: translateX(-50%);
}

.trust-description-container {
  background-color: var(--bg-primary);
  padding: 80px 38px 78px 48px;
  height: 100%;
}

.trust-description-container p {
  color: var(--text-white-soft);
  font-size: 30px;
  line-height: 140%;
  text-transform: capitalize;
}

.trust-description-container strong {
  color: var(--text-white-soft);
  font-size: 30px;
  font-weight: 800 !important;
  line-height: 140%;
  text-transform: capitalize;
}

.faq-section {
  padding-bottom: 115px;
  background-image: url(images/faqbg.png);
  background-repeat: no-repeat;
  background-position: bottom;
}

.custom-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid #046A3817;
  border-radius: 0px !important;
}

.custom-accordion .accordion-button {
  font-weight: 600;
  position: relative;
  font-size: 22px;
  color: var(--text-black-soft) !important;
  padding: 24px;
}

.custom-accordion .accordion-button::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  background-image: none;
  transform: none;
  color: var(--text-black-soft) !important;
  margin-bottom: 7px;

}

.custom-accordion .accordion-button:not(.collapsed)::after {
  content: "−";
}


.custom-accordion .accordion-button {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.custom-accordion .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background-color: #046A3820 !important;
  box-shadow: none !important;
  color: var(--text-black-soft) !important;
}

.custom-accordion .accordion-button:hover {
  background-color: transparent !important;
}

.faq-left-card {
  width: 100%;
  max-width: 500px;
}

footer {
  background-color: var(--text-black-soft);
  padding: 100px 0px 0px 0px;
}

footer a {
  color: #FFF !important;
}

footer a:hover {
  color: var(--text-secondary) !important;
}

.footer-links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-container h6 {
  color: var(--text-white);
  font-size: 18px !important;
  font-weight: 400;

}

.footer-links-container a {
  color: var(--text-white);
  font-size: 14px !important;
  font-weight: 400;
  text-decoration: none;
  line-height: 22px;
}

.footer-links-container a:hover {
  color: var(--text-secondary);
  text-decoration: underline;
  font-weight: 500;

}

.social-media-container {
  border-top: 0.5px solid #FFFFFF10;
  padding: 35px 0px;
}

.footer-left-card {
  border-right: 1px solid #FFFFFF10;
  padding-right: 15px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.trustimonials-carousel .owl-prev {
  top: 40%;
  position: absolute;
  left: -50px;

}

.trustimonials-carousel .owl-next {
  top: 40%;
  position: absolute;
  right: -50px;
}

.trustimonials-carousel .owl-prev-icon,
.trustimonials-carousel .owl-next-icon {
  background-color: white;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black-soft);
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.trustimonials-carousel .owl-prev-icon:hover,
.trustimonials-carousel .owl-next-icon:hover {
  background-color: #046A38;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(4, 106, 56, 0.3);
}

.product-sub-nav {
  position: sticky;
  top: 20px;
  /* adjust based on your header height */
  height: fit-content;
}

.product-carousel .owl-dots,
.trustimonials-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.product-carousel .owl-dot,
.trustimonials-carousel .owl-dot {
  background-color: #FFFFFF1F !important;
  width: 8px;
  height: 5px;
  border-radius: 40px;
}

.product-carousel .owl-dot {
  background-color: #25252575 !important;

}

.product-carousel .owl-dot.active,
.trustimonials-carousel .owl-dot.active {
  width: 20px;
  background-color: var(--text-secondary) !important;
}

.section-related-products {
  background-color: #FFFAE7;
  background-image: url(images/greengroupleaves1.png), url(images/greengroupleaves2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right bottom 300px;
  background-size: 200px auto, 200px auto;
}

.section-navigation {
  background-color: #FFFBEB;
  padding-top: 30px !important;
  padding-bottom: 24px !important;
}

.section-page-banner {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}

.banner-heading {
  font-size: 64px;
  font-weight: 400;
  color: var(--text-white);
}

.banner-detail {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
}

.about-belief-section {
  background-color: var(--text-black-soft);
  background-image: url(images/belifecardbg.png);
  background-repeat: no-repeat;
  background-position: right;
}

.story-section {
  background-image: url(images/greenleaves.png);
  background-repeat: no-repeat;
  background-position: top left;
}

.first-belief-card {
  width: 100%;
  max-width: 154px;
  padding-right: 20px;
}

.second-belief-card {
  border-right: 1px solid #FFFFFF17;
  border-left: 1px solid #FFFFFF17;
  width: 100%;
  max-width: 216px;
  padding: 0px 20px;
}

.third-belief-card {
  width: 100%;
  max-width: 200px;
  padding-left: 20px;
}

.dual-section {
  background-image:
    url(images/yellowgrassfull.png),
    url(images/onlyusrightbg.png),
    url(images/onlyusleftbg.png);

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    center bottom,
    right center,
    left calc(50% - 150px);

  background-size:
    auto,
    150px auto,
    200px auto;
  background-color: #FFFEFB;

}



.dual-section-heading-description {
  width: 100%;
  max-width: 872px;
  color: var(--text-grey-light);
  text-align: center;
}

.framework-card {
  border-right: 1px solid #046A3817;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 220px;
}

.vision-card-container {
  border: 1px solid #046A3817;

}

.vision-card {
  padding: 24px;
  border-right: 1px solid #046A3817;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: 220px;
}

.promise-section {
  background-color: var(--text-black-soft);
}

.promise-card {
  background-color: #FFFAE7;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.promise-card p {
  text-align: center;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 500;
  text-transform: capitalize;
}

.ethos-card {
  background-color: #F0F7F3;
  padding: 80px 0px 100px 0px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  align-items: center;

  background-image: url(images/smallcow.png), url(images/henandchilds.png);
  background-repeat: no-repeat no-repeat;
  background-position: bottom left 18px, right 70px bottom;

}

.product-nav {
  padding-top: 44px !important;
}

.product-header {
  background-color: #FFFBEB;
  height: 392px;
  background-image: url(images/greenleavesleft.png);
  background-repeat: no-repeat;
  background-position: left top;
}

.product-header .breadcrumbs {
  margin-top: 40px;
}

.product-header .section-navigation {
  background: none !important;
}

.product-header-card {
  border: 1px solid #046A3817;
  border-radius: 16px;
  padding: 48px 28px;
  background-color: #ffffff;
  background-image: url(images/productleavesright.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 120px;

}

hr {
  width: 100%;
  margin: 0px;
  border: 1px solid #046A3817
}

.product-sub-nav {
  border: 1px solid #046A3817;
  background-color: #FFFBEB;
  border-radius: 10px;
}

.product-sub-nav ul {
  padding: 0px;
}

.product-sub-nav ul li {
  list-style-type: none;
  border-bottom: 1px solid #BEBEBE80;
  padding: 20px;
}

.product-sub-nav ul li:last-of-type {
  border-bottom: none;
}

.product-sub-nav ul li a {
  font-size: 18px;
  text-decoration: none;
  color: #5D5D5D;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-sub-nav ul li a.active,
.product-sub-nav ul li a:hover {
  font-weight: 500;
  color: var(--text-primary);
}

.product-detail {
  padding-left: 50px;
}

.product-detail p,
.product-detail li {
  color: var(--text-grey-light);
}

.product-detail ul.pc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-detail ul.pc-list li {
  list-style: none;
  position: relative;
  color: var(--text-grey-light);
  font-weight: 400;
  font-size: 16px;
}

.product-detail ul.pc-list li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 3px;
  width: 20px;
  height: 20px;
  background-image: url(images/checkgreen.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

ul.boxed {
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  gap: 0;
  border: 1px solid #046A3817;
  border-right: 0;
}

ul.boxed li {
  padding: 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  border-right: 1px solid #046A3817;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

ul.boxed li h5 {
  color: var(--text-black-soft);
  font-size: 20px;
  font-weight: 600;
}

ul.boxed li p {
  margin-bottom: 0px !important;
}

.explore-product-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.section-product-header {
  padding-bottom: 80px;
  margin-top: -180px;
  /*background-image: url(images/greengroupleaves1.png), url(images/greengroupleaves2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right bottom 300px;
  background-size: 200px auto, 200px auto;*/
}

.product-main-image-wrapper img {
  width: auto;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  text-align: center;
}

.product-thumbnail-wrapper {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #FFF #FFF;
}

.product-thumbnail-wrapper::-webkit-scrollbar {
  width: 4px;
  /* thinner */
}

.product-thumbnail-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.product-thumbnail-wrapper::-webkit-scrollbar-thumb {
  background: #f1f1f1;
  border-radius: 10px;
}

.product-thumbnail-wrapper::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1;
}

.product-thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-thumb {
  height: 100px;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: 0.3s;
}

.product-thumb.active {
  border: 2px solid #198754;
  /* Bootstrap success color */
}

.explore-product-card .img-container {
  border: 1px solid #F0F7F3;
  background-color: #FFFEFB;
  padding: 24px;
  border-radius: 8px;
}

.img-container img {
  width: 100%;
  height: 400px;
  object-fit: contain;
}

.vertical-nav-btn {
  color: #046A38;
  background-color: transparent !important;
  border-radius: 50%;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 10px !important;

}

.vertical-nav-btn:hover {
  background-color: #046a3934 !important;
  color: #046A38 !important;


}

@media (min-width: 1400px) {
  .container {
    max-width: 1368px;
  }
}


@media (min-width: 1024px) {
  .border-lg-0 {
    border-bottom: 0 !important;
  }

  .border-lg-end-0 {

    border-right: 0 !important;
  }
}

@media screen and (max-width:1024px) {
  .section {
    padding: 20px 0px;
  }

  .section-sm {
    padding: 20px 0px;

  }

  .home-carousel .owl-dots {
    bottom: 20px;
    left: 17px;
  }

  .home-carousel .owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .home-section {
    margin-bottom: 0px;
    background-position: left top, right bottom;
    background-size: 100px auto, 0px auto;
    height: 570px;
  }

  .product-feature {
    flex-wrap: wrap;
    gap: 12px;
  }

  .real-time-card {
    padding: 20px 12px;
  }

  .commitment-point-container ul {
    flex-wrap: wrap;

  }

  .commitment-point-container ul li {
    border-bottom: 1px solid #046A3829;
    padding: 28px 50px;
    border-right: none;



  }

  .trust-description-container {
    padding: 16px;
    display: flex;
    align-items: center;
  }

  .trust-section {
    height: 205px;
    background-image: none;
  }

  .contact-btn {
    border-radius: 50% !important;
    padding: 12px 14px !important;
  }

  .home-section {
    padding-top: 16px;
  }

  .trust-card {
    top: 0px;
  }

  footer {
    padding: 40px 0px;
  }

  .footer-left-card {
    border-right: none;
    border-bottom: 0.5px solid #F0F7F320;
    min-height: unset;
    padding-right: 0px;
    padding-bottom: 24px;
  }


  .only-us-section {
    background-size: 50px auto, 50px auto;
  }

  .step-section {

    background-size: 150px auto;
  }

  .growth-section {
    background-image: none;
  }

  .product-section {
    background-size: 50px auto, 100px auto;
    background-position:
      left bottom,
      right calc(50% - 400px);

  }

  .header-navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFBEB;
    z-index: 1050;
    padding: 20px;
  }

  .tab-button {
    width: unset;
  }

  .about-belief-section {
    background-image: none;
  }

  .dual-section {
    background-image: none;
  }

  .framework-card {
    max-width: 200px;
    margin-top: 12px;
    border-right: none;

  }

  .ethos-card {

    background-position: bottom left, right bottom;
    padding: 40px 12px;


  }

  .product-detail-card-left {
    border-right: none;
  }

  .about-nav {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .product-nav {
    padding-top: 16px !important;
  }

  .section-product-header {
    padding-bottom: 40px;
    margin-top: -150px;
    background-image: none;
  }

  .product-header {
    background-size: 80px auto;
  }

  .product-header-card {

    background-size: 80px auto;

  }

  .product-detail-card-left {
    justify-content: space-between;
    gap: 10px;
  }

  .primary-tag img {
    width: 10px;
  }

  .home-section-container {
    margin-top: 30px;
  }

  .custom-gap-60 {
    --bs-gutter-x: 0px;
  }

  .custom-gap-50 {
    --bs-gutter-x: 0px;
  }





  .about-sectiom-heading,
  .home-sectiom-heading {
    font-size: 32px;
  }

  .home-carosel-card {
    height: 240px;
    padding: 17px;
  }

  .home-carosel-card h1 {
    font-size: 28px;
  }

  h1 {
    font-size: 22px;
  }

  .btn-outline-light {
    font-size: 12px;
    padding: 14px 14px;
  }

  .primary-tag {
    font-size: 9px;
  }

  .custom-accordion .accordion-button {
    font-size: 14px;
  }

  .fs-4 {
    font-size: 16px !important;
  }

  .trust-description-container strong,
  .trust-description-container p {
    font-size: 14px;
  }

  .promise-card p {
    font-size: 16px;
  }

  .trustimonials-carousel .owl-prev {

    left: 0px;

  }

  .trustimonials-carousel .owl-next {
    right: 0px;
  }

  .third-belief-card,
  .second-belief-card {
    border: none;
    padding: 0px;
  }

  .vision-card {
    max-width: 100%;
  }

  #dosage li {
    padding: 12px;
  }

  #dosage li h5 {
    text-align: center;
  }

  #dosage li p {
    text-align: center;

  }
}