body {

  font-family: "Outfit", sans-serif !important;

}



.category-icon {

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto;

}

.category-icon img {

  width: 100px;

  height: 100px;

  object-fit: contain;

  border-radius: 85px;

}

.promo-card {

  border-radius: 15px;

  overflow: hidden;

}

.promo-card .card-body {

  padding: 20px;

}

.category-label {

  text-align: center;

  margin-top: 10px;

  font-weight: 500;

}

.bg-light-green {

  background-color: #e6f3e6;

}

.text-dark-green {

  color: #0a2c0a;

}

.navbar-brand img {

  max-height: 40px;

}

.btn-shop-now {

  background-color: #ffd700;

  color: black;

}



.badge-trending {

  background-color: #ffc107;

  color: black;

}

.product-card {

  position: relative;

  text-align: center;

  border: none;

  height: 100%;



}



.product-price {

  text-decoration: line-through;

  color: #6c757d;

  margin-right: 10px;

}

.stars {

  color: #ffc107;

}



/* Ensure badge is positioned correctly */

.product-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  background-color: rgb(244, 195, 0);

  color: black;

  padding: 5px 10px;

  font-size: 12px;

  border-radius: 5px;

  z-index: 2; /* Keeps it above the images */

}



 

.product-img {

  width: 100%;

  height: 350px; /* Adjust height as needed */

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.product-img img {

  width: 100%;

  height: 100%;

  object-fit: cover; /* Ensures images fill the space proportionally */

}



/* Default image */

.product-img .main-img {

  transition: opacity 0.5s ease-in-out;

}



/* Hover image (initially hidden) */

/* .product-img .hover-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.5s ease-in-out;

} */



/* Hover effect */

/* .product-img:hover .hover-img {

  opacity: 1;

}



.product-img:hover .main-img {

  opacity: 0;

} */

.v-a a {

  font-size: 13px;

  font-weight: lighter;

}

.suc-btn {

  background: #029354;

}

.card {

  border: none !important;

}

.feature-icon img {

  width: 30px;

}

.video-container {

  position: relative;

  padding-bottom: 56.25%; /* 16:9 aspect ratio */

  height: 0;

  overflow: hidden;

}

.video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.feature {

  background-color: #eff8f2;

}

.experience h3 {

  font-weight: 400;

  color: #0a4c36;

}

.experience p {

  color: #4c4848;

}

.experience {

  text-align: center;

  width: 65%;

  justify-content: center;

  margin: 40px auto;

}

.explore-btn {

  background-color: #1d7c44;

  border: none;

  padding: 10px 20px;

  font-weight: bold;

}

.explore-btn:hover {

  background-color: #166534;

}

.subscription-container {

  background-color: #eff8f2;

}

.subscription-container {

  overflow: hidden;

}



.subscription-title {

  color: #0a4c36;

  margin-bottom: 1rem;

}



.subscription-image {

  max-height: 584.66px;

  width: 584.66px;

  object-fit: cover;

  border-radius: 8px;

}



.explore-btn {

  background-color: #0a4c36;

  border: none;

  padding: 8px 20px;

  font-weight: 500;

  transition: background-color 0.3s ease;

}



.explore-btn:hover {

  background-color: #083727;

}



@media (max-width: 991px) {

  .subscription-image {

    max-height: 450px;

  }



  .ps-lg-5 {

    padding-left: 1.5rem !important;

  }

}



@media (max-width: 767px) {

  .subscription-image {

    max-height: 350px;

  }

}



.green-banner {

  background-color: #0b4d33;

  color: white;

  padding: 10px 0;

}



.logo-text {

  color: white;

  font-weight: 500;

  font-size: 14px;

  margin-left: 12px;

}



.city-links {

  background-color: #fff;

  border-bottom: 1px solid #e5e5e5;

  padding: 8px 0;

}



.city-links a {

  color: #333;

  text-decoration: none;

  margin: 0 10px;

  font-size: 14px;

}



.footer-section {

  padding: 40px 0;

}



.footer-section h5 {

  font-weight: 600;

  font-size: 16px;

  margin-bottom: 20px;

}



.footer-links {

  list-style: none;

  padding-left: 0;

}



.footer-links li {

  margin-bottom: 12px;

}



.footer-links a {

  color: #333;

  text-decoration: none;

  font-size: 14px;

}



.newsletter-form {

  position: relative;

}



.newsletter-form input {

  border-radius: 0;

  padding: 10px;

}



.newsletter-form button {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  background: none;

  border: none;

  padding: 0 15px;

}



.social-links a {

  margin-right: 15px;

  font-size: 20px;

  color: #333;

}



.app-download img {

  height: 40px;

  margin-right: 10px;

}



.payment-icons img {

  height: 24px;

  margin-right: 10px;

}



.copyright {

  padding: 15px 0;

  border-top: 1px solid #e5e5e5;

  font-size: 14px;

}



.heart-logo {

  width: 20px;

  height: 20px;

  display: inline-block;

  vertical-align: middle;

  margin-right: 5px;

}

.green-banner {

  background-color: #0b4d33;

  color: white;

  padding: 10px 0;

}

.carousel {

  margin-bottom: 30px;

}



.carousel-inner {

  max-height: 90vh;  

  overflow: hidden;

}



.carousel-item img {

  object-fit: cover;  

  height: 100%;

}



 @media (max-width: 767px) {

  .carousel-inner {

      max-height: 50vh;  

  }

  

  .carousel-control-prev,

  .carousel-control-next {

      width: 10%;  

  }

  

  .carousel-indicators {

      margin-bottom: 0.5rem;  

  }

  

  .carousel-indicators [data-bs-target] {

      width: 8px;

      height: 8px;

      border-radius: 50%;  

  }

}

.logo-text {

  color: white;

  font-weight: 500;

  font-size: 16px;

  margin-left: 10px;

}



.city-links {

  background-color: #fff;

  border-bottom: 1px solid #e5e5e5;

  padding: 8px 0;

}



.city-links a {

  color: #333;

  text-decoration: none;

  margin: 0 10px;

  font-size: 14px;

}



.footer-section {

  padding: 40px 0;

}



.footer-section h5 {

  font-weight: 600;

  font-size: 16px;

  margin-bottom: 20px;

}



.footer-links {

  list-style: none;

  padding-left: 0;

}



.footer-links li {

  margin-bottom: 12px;

}



.footer-links a {

  color: #333;

  text-decoration: none;

  font-size: 14px;

}



.newsletter-form {

  position: relative;

}



.newsletter-form input {

  border-radius: 0;

  padding: 10px;

}



.newsletter-form button {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  background: none;

  border: none;

  padding: 0 15px;

}



.social-links a {

  margin-right: 15px;

  font-size: 20px;

  color: #333;

}



.app-download img {

  height: 40px;

  margin-right: 10px;

}



.payment-icons img {

  height: 24px;

  margin-right: 10px;

}



.copyright {

  padding: 15px 0;

  border-top: 1px solid #e5e5e5;

  font-size: 14px;

}



.heart-logo {

  width: 20px;

  height: 20px;

  display: inline-block;

  vertical-align: middle;

  margin-right: 5px;

}

.pgp-logo {

  width: 20px;

  height: 20px;

  margin-right: 5px;

}



.logo-text {

  color: white;

  font-weight: 500;

  font-size: 14px;

  font-size: clamp(12px, 2.5vw, 16px);

}



@media (max-width: 576px) {

  .mx-2 {

    margin-left: 0.25rem !important;

    margin-right: 0.25rem !important;

  }

}

.carousel-heading {

  text-align: center;

  color: #1a5336;

  font-size: 2.5rem;

  font-weight: bold;

  margin: 2rem 0;

}

.carousel-inner.hh {

  height: 100vh; /* or whatever height you want */

}



.carousel-inner.hh img {

  height: 100%;

  object-fit: cover;

}

.hh {

  height: 90vh;

}

.testimonial-carousel {

  max-width: 900px;

  margin: 0 auto;

  padding: 20px;

}



.testimonial {

  text-align: center;

  padding: 20px;

}



.testimonial-text {

  font-size: 16px;

  line-height: 1.6;

  margin-bottom: 15px;

  color: #333;

  max-width: 800px;

  margin: 0 auto 20px;

}



.testimonial-author {

  font-style: italic;

  color: #666;

}



.avatar-slider {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 30px;

  position: relative;

  height: 140px;

}



.avatar-container {

  display: flex;

  justify-content: center;

  width: 100%;

  position: relative;

  overflow: hidden;

}



.avatar {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

  margin: 0 10px;

  border: 3px solid transparent;

  opacity: 0.7;

  transition: all 0.3s ease;

  display: none;

}



.avatar.left {

  left: calc(50% - 120px);

  transform: translateX(-50%);

  display: block;

}



.avatar.active {

  left: 50%;

  transform: translateX(-50%);

  width: 120px;

  height: 120px;

  opacity: 1;

  border: 3px solid #1a5336;

  z-index: 10;

  display: block;

}



.avatar.right {

  left: calc(50% + 120px);

  transform: translateX(-50%);

  display: block;

}



.stars {

  color: #ffd700;

  font-size: 24px;

  margin-bottom: 20px;

}



.nav-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: #1a5336;

  color: white;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  z-index: 20;

  border: none;

}



.nav-arrow.prev {

  left: 10px;

}



.nav-arrow.next {

  right: 10px;

}



.testimonial-content {

  opacity: 1;

  transition: opacity 0.3s ease;

}



.testimonial-content.fade {

  opacity: 0;

}



/* Responsive styles */

@media (max-width: 768px) {

  .carousel-heading {

    font-size: 2rem;

    margin: 1.5rem 0;

  }



  .avatar-slider {

    height: 120px;

  }



  .avatar {

    width: 60px;

    height: 60px;

  }



  .avatar.active {

    width: 90px;

    height: 90px;

  }



  .avatar.left {

    left: calc(50% - 80px);

  }



  .avatar.right {

    left: calc(50% + 80px);

  }



  .stars {

    font-size: 20px;

    margin-bottom: 15px;

  }



  .testimonial-text {

    font-size: 14px;

    line-height: 1.5;

  }



  .nav-arrow {

    width: 35px;

    height: 35px;

  }

}



@media (max-width: 576px) {

  .carousel-heading {

    font-size: 1.8rem;

    margin: 1rem 0;

  }



  .avatar-slider {

    height: 100px;

  }



  .avatar {

    width: 50px;

    height: 50px;

    border-width: 2px;

  }



  .avatar.active {

    width: 70px;

    height: 70px;

  }



  .avatar.left {

    left: calc(50% - 60px);

  }



  .avatar.right {

    left: calc(50% + 60px);

  }



  .testimonial-carousel {

    padding: 10px;

  }



  .testimonial {

    padding: 10px;

  }



  .stars {

    font-size: 18px;

    margin-bottom: 10px;

  }



  .testimonial-text {

    font-size: 13px;

    line-height: 1.4;

    margin-bottom: 10px;

  }



  .testimonial-author {

    font-size: 14px;

  }



  .nav-arrow {

    width: 30px;

    height: 30px;

    font-size: 12px;

  }

}

.product-carousel-container {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

}



.carousel-controls {

  position: absolute;

  bottom: 20px;

  right: 20px;

  z-index: 10;

  display: flex;

  gap: 10px;

}



.carousel-control-btn {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background-color: #2b9b5c;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 18px;

  cursor: pointer;

  transition: background-color 0.3s;

}



.carousel-control-btn:hover {

  background-color: #208b4e;

}



.product-image {

  width: 100%;

  height: auto;

  border-radius: 4px;

}

.social-share-container {

  display: flex;

  align-items: center;

  gap: 18px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,

    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

}



.social-share-container {

  display: flex;

  flex-wrap: wrap;

   gap: 10px;

}



.share-link {

  display: flex;

  align-items: center;

  gap: 5px;

  text-decoration: none;

  font-size: 14px;

  padding: 8px 12px;

  border-radius: 5px;

  transition: background 0.3s;

}



.share-link i {

  font-size: 18px;

}



@media (max-width: 576px) {

  .social-share-container {

      flex-direction: column;

      align-items: center;

  }

}

.underline {

  text-decoration: underline;

}



.bp-card img {

height: 100%;

object-fit: cover;

}

.bp-card{

  height: 360px;

  border-radius: 20px;

}

 .ko {

  height: 80vh;

  }

 .ko img {

  height: 100%;

  object-fit: fill;

  width: 100%;

  }