/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
</style>

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    /*font-family: "Poppins", serif;*/
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
}


/*body{background: #0d7645;}*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    /*font-family: "Poppins", serif;*/
    font-family: "Rubik", sans-serif;
}

.nav-item a {
       color: #020202f0;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Rubik';
    font-size: 14px;
}

.nav-item a:hover{ color:#66bf8d;}


 

.dropdown-menu {
    padding: 20px;
    background: #242424;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #fff !important;
    border-radius: 10px;
    color: #ECAF12;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    /* Adjust margin to your needs */
}

.dropdown-menu {
    display: none;
    /* Hide dropdowns by default */
}


.bussiness {
    border: 1px solid #0a7644;
    color: #0a7644;
    padding: 5px 15px;
    border-radius: 10px;
}

.user-pannle {
    background-color: #0a7644;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    font-weight: 500;
}

.cart {
    background-color: #F3F3F3;
    padding: 10px;
    color: black;
    border-radius: 10px;
}

.sup-cart {
    margin: 0px !important;
}

sup {
    top: -1.5em !important;
    background-color: #FBD2D8;
    color: black;
    padding: 3px 6px;
    border-radius: 5px;
}

.text-gredient {
    background: -webkit-linear-gradient(90deg, #ED1C3D, #ECAF12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gradient {
    background: linear-gradient(270deg, #fcbc452a, #F9E6E6, #FFD1D1, #ffffff) !important;
}

.bg-gradient p {
    line-height: 30px;
}

.same-button {
    background-color: #ED1C3D;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 20px 83px 30px 80px;
    margin:10px 0;
    display:inline-block;
}

.text-color {
    color: #084d99;
    font-weight: 700;
}

.text-red {
    color: #ED1C3D;
}

.small {
    font-size: 12.5px !important;
}

#product-slider img {
    width: 100%;
    height: 250px;
    object-fit: covre;
}

#Client-slider img {
    width: 150px;
    margin: 0 auto;
}

#event-slider img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

footer {
    /*background: linear-gradient(178deg, rgb(43 60 18), rgb(43 60 18 / 91%)), url(../../assets1/images/footer-bg.jpg);*/
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: #023065;
}

footer li a {
    text-decoration: none;
    color: white;
}


.about-banner {
    /*background-image: url("../images/breadcrumb.png");*/
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.skinncare-banner {
    background-image: url("../../herbal-vantage/breadcrumb.jpg");
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-gary {
    background-color: #666464;
}

.border-radius {
    border-radius: 20px 10px 20px 10px;
}

.border-radius .small {
    color: #666666;
    line-height: 25px;
    font-size: 13px !important;
}

select:active,
select:focus {
    outline: none;
}

.Categories-filter ul li {
    list-style: none;
    margin-top: 10px;
}

.Categories-filter ul li a {
    text-decoration: none;
    color: #666666;
}


.Categories-filter ul li a:hover{color:#ECAF12;}

.quantity {
    display: flex;
    padding: 0;
}

.quantity__minus,
.quantity__plus {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    background: #555;
    text-decoration: none;
    text-align: center;
    line-height: 23px;
}

.quantity__minus:hover,
.quantity__plus:hover {
    background: #575b71;
    color: #fff;
}

.quantity__minus {
    border-radius: 3px 0 0 3px;
}

.quantity__plus {
    border-radius: 0 3px 3px 0;
}

.quantity__input {
    width: 70px;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: center;
    border-top: 2px solid #dee0ee;
    border-bottom: 2px solid #dee0ee;
    border-left: 1px solid #dee0ee;
    border-right: 2px solid #dee0ee;
    background: #fff;
    color: #111;
}




.quantity__minus:link,
.quantity__plus:link {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity__minus:visited,
.quantity__plus:visited {
    color: #8184a1;
}

.text-size{
    font-size: 14px;
}






.accreditations ul{ padding:20px 0 0; 
list-style:none;
    overflow:auto;
    width:100%;
}navbar

.accreditations {background: #d3610d;}
.accreditations h2{font-size:30px; color:#FFF; margin-top:30px;} 

.accreditations h2 span{ font-size:20px;}


@media screen and (max-width:768px){ navbar{ padding:10px 0!important;}}

/*.products{ background:#fff;}*/



@media screen and (max-width: 767px) {
    .mobile-response {
        display: flex; /* This line ensures flex behavior */
        flex-direction: column;
    }
}




/*Our vision and mission css*/
  /* Control image sizing */
  .mission-img {
    max-height: 250px;
    object-fit: contain;
    width: 100%;
    height: auto;
  }

  /* Responsive tweaks for small devices */
  @media (max-width: 767.98px) {
    #mission-vision .row {
      flex-direction: column !important;
    }
    #mission-vision .col-md-6 {
      max-width: 100% !important;
      flex: 0 0 100% !important;
      text-align: center;
      margin-bottom: 1.5rem;
    }
  }
/*Objective & Aim*/
#objective-aim img {
  width: 100%;
  height: auto; /* keep aspect ratio */
  max-height: 350px;
  object-fit: contain;
}

#objective-aim .col-md-6 {
  padding: 15px;
}

/* On small devices stack vertically and center */
@media (max-width: 767.98px) {
  #objective-aim .row {
    flex-direction: column !important;
  }
  
  #objective-aim .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center;
  }
  
  #objective-aim h3 {
    font-size: 1.4rem;
  }
  
  #objective-aim p {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/*About page*/
.client-slide {
  gap: 1.5rem; /* spacing between image and text */
}

.client-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 300px;
}


/*cards design */
/* Card base */
.promo-card {
    position: relative;
    border-radius: 12px;
    padding: 40px 25px;
    text-align: center;
    overflow: hidden;
    transition: 0.3s;
}

/* Background variations */
.bg-one {
    background: #eef5f2;
}
.bg-two {
    background: #e6f1ff;
}
.bg-three {
    background: #f6efe7;
}

/* Label */
.label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #e74c3c;
}

/* Heading */
.promo-card h4 {
    font-weight: 600;
    margin: 15px 0;
}

/* Button */
.btn-custom {
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 500;
}

/* Discount badge using ::after */
/*.promo-card::after {*/
/*    content: attr(data-discount);*/
/*    position: absolute;*/
/*    right: 20px;*/
/*    bottom: 90px;*/
/*    background: #ff8c42;*/
/*    color: #fff;*/
/*    width: 60px;*/
/*    height: 60px;*/
/*    border-radius: 50%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-weight: 600;*/
/*}*/

/* Image styling */
.promo-img {
    max-width: 100%;
    margin-top: 20px;
    border-radius: 10px;
}

/* Optional decorative effect using ::before */
.promo-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: rgba(0,0,0,0.03);
    border-radius: 50%;
}




.marquee {
  overflow: hidden;
  background: #05326700;
  padding: 30px 0;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: scroll 25s linear infinite;
}

.marquee-content img {
  height: 100px;
  margin: 0 30px;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}





#objective-aim {
  background: linear-gradient(135deg, #f8fff8, #eef7ff);
  position: relative;
  overflow: hidden;
}

#objective-aim::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 128, 0, 0.08);
  border-radius: 50%;
  top: -60px;
  left: -60px;
}

#objective-aim::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(0, 123, 255, 0.08);
  border-radius: 50%;
  bottom: -80px;
  right: -80px;
}

/* Image Styling */
#objective-aim img {
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#objective-aim img:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* Text Styling */
#objective-aim h3 {
  font-weight: 700;
  font-size: 32px;
  position: relative;
  display: inline-block;
}

#objective-aim h3::after {
  content: "";
  width: 50%;
  height: 3px;
  background: #28a745;
  position: absolute;
  left: 0;
  bottom: -5px;
}

/* Paragraph */
#objective-aim p {
  color: #555;
  line-height: 1.8;
  font-size: 15px;
}

/* Button Styling */
#objective-aim .btn-primary {
  background: linear-gradient(45deg, #28a745, #175fac);
    padding: 5px 19px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#objective-aim .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Animation */
#objective-aim .row {
  animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.btn-primary{
    background: linear-gradient(45deg, #28a745, #175fac);
    border: none !important;
    padding: 10px 25px;
    border-radius: 30px;
    transition: all 0.3s ease;
}











/* ======================================================================================================================= */