body {
  width: 100%;
  margin: 0;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.flex{
  display: flex;
}

.align-center{
  align-items: center;
}

.justify-center{
  justify-content: center;
}

.w-fit{
  width: fit-content;
}

.w-100{
  width: 100%;
}
.footer a {
  color: #fff;
  transition: 0.2s ease-in;
}
a:hover {
  color: #ffffffa9;
}
/* CSS for header */

.theme-navbar {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1; /* Ensure it is above other content */
  position: absolute;
  height: 5rem;
  font-weight: normal;
  font-size: 80%;
  background-color: rgba(255, 255, 255, 0.8);
}

.navb-contents hr {
  width: 20%;
  height: 1px;
  border: none;
  background-color: #bababa;
}
.navb-contents {
  width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.navb-contents a {
  color: black; /* Default color for links */
  text-decoration: none; /* Remove underline */
  margin: 0 6px; /* Space between links */
  transition: color 0.2s ease; /* Smooth transition */
  padding: 8px 10px 8px 10px;
}

.navb-contents a:hover {
  color: #ffffff; /* Olive green color on hover */
  padding: 8px 10px 8px 10px;
  background-color: #7b8154;
  border-radius: 6px;
}

/* for animation navbar start */
.navb-contents a {
  color: black;
  text-decoration: none;
  margin: 0 6px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

.navb-contents a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #7b8154;
  z-index: -1;
  transition: height 0.3s ease;
  border-radius: 6px;
}

.navb-contents a:hover::before {
  height: 100%;
}
/* for animation navbar end */

.logo-container {
  display: flex;
  justify-content: center;
  width: 20%;
  /* padding: 0.5%; */
}
.c1 img {
  /* width: 30%; */
  height: 4.6rem;
}
.c2 img {
  margin-top: 3%;
}

.sticky-navbar {
  margin-top: -1%;
  width: 100%;
  height: 5rem;
  position: fixed; /* Keep it fixed */
  top: 0; /* Align to the top */
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8); /* Change as needed */
  /* padding: 10px; */
  display: none; /* Initially hidden */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateY(-100%); /* Initially hidden */
  transition: transform 0.5s ease; /* Smooth transition */
  font-weight: normal;
  font-size: 80%;
}

/* CSS for home.sliding-window */

.slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden; /* Hide overflow */
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Smooth transition */
}

.slide-holder {
  min-width: 100%; /* Each slide takes full width */
  /* height: 45rem; */
  position: relative; /* For positioning the text */
  overflow: hidden;
  align-content: center;
}

.slides img {
  width: 100%; /* Ensure images fill the slide */
  height: auto; /* Maintain aspect ratio */
  overflow: hidden;
  /* transform: rotateY(180deg); */
  -webkit-object-fit: cover;
}

.banner-text {
  position: absolute; /* Position text over the image */
  bottom: 27%; /* Position near the bottom */
  left: 10%; /* Adjust left margin */
  color: #333333; /* Text color */
  padding: 10px; /* Padding around text */
  z-index: 10; /* Ensure text is above the image */
}
.banner-text h1 {
  font-size: 300%;
  margin-bottom: -2%;
  margin-left: -1%;
}
.banner-text a {
  text-decoration: none;
  color: #1a5319;
  line-height: 22px;
  transition: text-decoration 0.5s ease-in;
}
.banner-text a:hover {
  text-decoration: underline;
  color: #808000;
}

.slider button {
  position: absolute;
  width: 5%;
  height: 5.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  font-size: 300%;
  color: #454545;
  border-radius: 20%;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* CSS for home.about-us */

.about-us {
  width: 100%;
  height: 40rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.about-banner {
  display: flex;
  width: 50%;
  justify-content: center;
}
.about-info {
  width: 42%;
  background-color: #a2a976;
  color: white;
  padding: 4%;
}
.about-info h1 {
  font-size: 300%;
}
.about-info p {
  font-size: 100%;
}
.about-us-button button {
  font-size: 100%;
  padding: 3%;
  background-color: #7b8154;
  color: white;
  border: 1px solid white;
  margin-top: 6%;
  transition: 0.5s;
  cursor: pointer;
}
.about-us-button button:hover {
  font-size: 100%;
  padding: 3%;
  background-color: #ffffff;
  color: #7b8154;
  border: 1px solid #7b8154;
  margin-top: 6%;
}
.about-banner img {
  overflow: hidden;
}

/* CSS for home.product */
.our-products {
  /* background-color: #FEF9F2; */
  padding-top: 32px;
  padding-bottom: 1%;
  margin-top: 0;
  /* height:42rem; */
}

.products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 38rem;
}

.product-header {
  text-align: center;
  font-size: 300%;
  margin-bottom: 0%;
}
.products h1 {
  text-align: center;
  margin-top: 10%;
  margin-bottom: 0;
}
.card {
  width: 20%;
  margin: 2%;
  height: 28rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-image-holder {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  padding: 2%;
}
.card-image-holder img {
  /* width:100%;
    height:18rem; */
  z-index: 1;
}

.description {
  width: 100%;
  margin-top: 100%;
  padding-top: 310px;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  height: 8rem;
  position: relative;
  color: #1a5319;
}

.card:hover .description {
  background-color: #7b8154;
  transition: 0.5s;
}

.quantity {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.quantity p {
  border: 1px solid #000000;
  padding: 5px 10px 7px 10px;
  margin: 1%;
  border-radius: 8px;
}
.card:hover .quantity p {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.card:hover .quantity span {
  color: #000;
}
.quantity span {
  border: 1px solid #000000;
  padding: 5px 10px 7px 10px;
  margin: 1%;
  border-radius: 8px;
}
.card:hover .quantity span {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.products-button {
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.products-button {
  width: 20%;
  height: 3rem;
  color: #ffffff;
  background-color: #7b8154;
  border: none;
  transition: 0.5s ease;
  margin-top: 1%;
  align-items: center;
}

.products-button:hover {
  width: 20%;
  height: 3rem;
  color: #7b8154;
  background-color: #ffffff;
  border: 1px solid #7b8154;
  align-items: center;
}
.product-div {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.benefits-button {
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.benefits-button:hover {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.benefits-button-div {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  height: 5rem;
}

.benefits-button {
  width: 20%;
  height: 3rem;
  color: #ffffff;
  background-color: #7b8154;
  border: none;
  transition: 0.5s ease;
  margin-top: 2%;
  align-items: center;
}

.benefits-button:hover {
  color: #fff;
  background-color: #000;
}

.our-product-text-div {
  display: flex;
  justify-content: center;
  text-align: justify;
}

.our-product-text {
  width: 60vw;
}

.card:hover .description h1,
.card:hover .description h3 {
  color: #ffffff;
}

/* CSS for home.benefitsNew */
/* 
.benefits-new{
    margin-top: 5%;
    display : flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.benefit-display {
    background-color:#9dae11 ;
    width:25%;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;    
    margin-left:-80%;
    z-index: 5;
    border-radius: 0 25% 0 0;
}
.benefits-new img{
    width:65%;
    height:25vh;
    margin-top: 15%;
    transition: 0.5s ease;
    margin-left:5%;
}
.benefits-new img:hover{
    width:70%;
    height:30vh;
    margin-top: 15%;
}
.benefit-display img{
    height:30vh;
}

.benefit-sec1 {
    background-color:#868d07;
    width:26%;
    position: absolute;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 0 0 0 0;
    margin-left:-40%;
    z-index: 4;      
    border-radius: 0 25% 0 0;
}

.benefit-sec2 {
    background-color:#6a760c;
    width:26%;
    position: absolute;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 3;
    border-radius: 0 25% 0 0;
}
.benefit-sec3 {
    background-color:#4b5c09 ;
    width:26%;
    position: absolute;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 40%;
    z-index: 2;
    border-radius: 0 25% 0 0;
}
.benefit-sec4 {
    background-color: #273e06 ;
    width:26%;
    position: absolute;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 80%;
    
    
/* 
.benefits-new{
    margin-top: 5%;
    display : flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.benefit-display {
    background-color:#9dae11 ;
    width:20%;
    height: 40vh;
    display : flex;
    justify-content: center;
}
.benefits-new img{
    width:80%;
    height:25vh;
    margin-top: 15%;
    transition: 0.5s ease;
    margin-left:5%;
}
.benefits-new img:hover{
    width:85%;
    height:30vh;
    margin-top: 15%;
}
.benefit-display img{
    height:30vh;
}

.benefit-sec1 {
    background-color:#868d07;
    width:20%;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
}

.benefit-sec2 {
    background-color:#6a760c;
    width:20%;
    height: 40vh;
    display : flex;
    justify-content: center;
}
.benefit-sec3 {
    background-color:#4b5c09 ;
    width:20%;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
}
.benefit-sec4 {
    background-color: #273e06 ;
    width:20%;
    height: 40vh;
    display : flex;
    justify-content: center;
    flex-wrap: wrap;
    
    
}  */
/* CSS for home.benefits */

.benefits {
  background-color: #ffffff;
  height: 55rem;
  z-index: -100;
  padding-top: 1%;
}
.benefits h1 {
  width: 100%;
  text-align: center;
  font-size: 400%;
}
.benefits-container {
  width: 100%;
  z-index: -100;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.benefits-div {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: flex;
  justify-content: center;
}
.cells {
  width: 33.333%;
  display: flex;
  flex-direction: column;
}
.sub-cell {
  display: flex;
  flex-direction: row;
  padding: 3%;
  font-size: 150%;
  margin: 5%;
  margin-bottom: 20%;
}
.sub-cell p {
  z-index: 100;
}
.sub-cell hr {
  position: absolute;
  z-index: 100;
  width: 15%;
  height: 3px;
  border: none;
  background-color: white;
}
.image-holder {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 150px; /* Set a fixed width */
  height: 150px; /* Set a fixed height to maintain aspect ratio */
  overflow: hidden; /* Hide overflow to create a circular crop */
  border-radius: 50%; /* Make the container circular */
  display: flex; /* Center the image */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.left {
  margin-left: 12%;
}
.right {
  margin-left: 45%;
}
.right hr {
  margin-left: -8%;
}

.image-holder img {
  z-index: 0;
  width: 100%; /* Make the image fill the container */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Crop the image if needed */
}

.image-holder:hover {
  width: 130px; /* Set a fixed width */
  height: 130px; /* Set a fixed height to maintain aspect ratio */
  transition: 0.5s;
}
.down-cell {
  margin-top: 80%;
  margin-left: 30%;
  font-size: 150%;
}
.down-cell hr {
  position: absolute;
  z-index: 100;
  width: 15%;
  height: 3px;
  border: none;
  background-color: white;
  margin-left: 5%;
}
.down-cell p {
  margin-left: 300%;
}

/* CSS for home.works */

.work {
  width: 100%;
  height: 35rem;
  background-color: #fef9f2;
}
.work-title {
  padding: 3%;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.work-title h1 {
  font-size: 250%;
}
.work-chart {
  width: 75%;
  display: flex;
  justify-content: space-around;
  height: 15rem;
  position: relative;
  z-index: 10;
}
.work-container {
  display: flex;
  padding: 5%;
  margin-left: -5%;
  margin-top: -3%;
  justify-content: center;
  flex-wrap: wrap;
}
.work-container hr {
  width: 50%;
  position: absolute;
  z-index: 5;
  margin-top: 8%;
}
.work-chart img {
  z-index: 10;
  width: 80px;
  height: 5rem;
  border-radius: 50%;
  padding: 15%;
}

.work-holder {
  margin: 5%;
  width: 13%;
  height: 50%;
  background-color: white;
  overflow: hidden; /* Hide overflow to create a circular crop */
  border-radius: 50%; /* Make the container circular */
  display: flex; /* Center the image */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

/* Circle animation */

.circle {
  height: 124px;
  width: 124px;
  z-index: 1000;
  position: absolute;

  .background {
    fill: transparent;
    stroke: #454545;
    transition: all 200ms ease;
  }

  .foreground {
    fill: transparent;
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    stroke: #ff6000;
    transform-origin: 50% 50%;
    transform: rotate(-270deg);
    transition: all 1000ms ease;
  }

  &:hover {
    cursor: pointer;

    .background {
      stroke: transparent;
    }

    .foreground {
      stroke-dashoffset: 0;
      transform: rotate(-90deg);
    }
  }
}

/* CSS inner HTML page */

.section-banner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.section-image-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 11rem;
  background-color: #7b8154;
  overflow: hidden;
  margin-top: 6%;
}

.section-image-holder img {
  width: 100%;
  filter: brightness(0.7);
  position: relative;
}
.section-image-holder h1 {
  z-index: 1;
  position: absolute;
  color: white;
  font-size: 250%;
  margin-top: 5%;
}

.inner-body {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
/* Know Us Page*/
.about-content-holder {
  width: 100%;
  height: 120rem;
  z-index: 10;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("/images/about-bg.jpg");
  background-size: cover;
  background-attachment: fixed;
  font-weight: normal;
}
.about-content {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.about-content hr {
  width: 70%;
  margin-top: 4%;
}
.about-vision {
  width: 60%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.about-mission {
  width: 60%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.about-founder {
  width: 60%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.about-founder-info {
  display: flex;
  width: 100%;
  flex-direction: row;
  padding: 2%;
}
.founder-info-div {
  display: flex;
  width: 50%;
  text-align: left;
  padding: 2%;
}
.about-image-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 60%;
  overflow: hidden;
  width: 15%;
  height: 14rem;
  margin-top: 8%;
  margin-bottom: 2%;
  background-color: #efc790;
}
.about-image-holder img {
  width: 75%;
}

.about-text h1 {
  font-size: 300%;
  margin-top: -0.1%;
  margin-bottom: -0.2%;
}
.about-text p {
  font-weight: normal;
}

/* Our Products Page */

.products-page-slider {
  display: flex;
  width: 100%;
  height: 80vh;
  background-color: #454545;
  overflow: hidden;
  position: relative;
}
.product-slide-cards {
  width: 25%;
  background-color: #808000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}
.s-hair-care {
  background-color: #ff6000;
}
.s-baby-care {
  background-color: red;
}
.s-edible {
  background-color: blueviolet;
}
.s-skin-care {
  background-color: greenyellow;
}

/* CSS for footer */

.footer {
  width: 100%;
  height: 24rem;
  background-color: #7b8154;
  color: #ffffff;
}

.footer-holder {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 68px;
  /* padding: 2% 5% !important; */
}

.sec1 {
  width: 35%;
  display: flex;
  flex-direction: column;
  margin-top: 2%;
}
.sec1 img {
  width: 70%;
  margin-top: 6%;
}
.sec1 h1 {
  font-size: 200%;
  margin-bottom: -1.5%;
}
.sec2 {
  padding: 3%;
  width: 25%;
  display: flex;
  flex-direction: column;
}
.sec3 {
  padding: 1%;
  padding-top: 3%;
  width: 32%;
  display: flex;
  flex-direction: column;
}

.sec3 img {
  width: 20%;
  height: 2.8rem;
  padding-bottom: 10px;
  margin: 3px;
}
.sec3 p {
  margin: 1.1%;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  padding: 1%;
  flex-direction: row;
}

.socials img {
  width: 10%;
  height: 60%;
  margin: 3%;
}

.footer-copyrights {
  margin-top: 0%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  padding-left: 0%;
}
.footer-copyrights img {
  width: 100%;
}

.footer-img-container {
  padding-top: 30px;
}
.footer-image {
  filter: brightness(0) invert(1);
}
.copyrights-hr {
  width: 60%;
  display: flex;
  align-items: center;
}
.copyrights-hr hr{
  width: 100%;
}
.footer-copyrights p {
  margin-top: 2.5%;
  margin-left: 1%;
}

.our-product-bottle-img-1 {
  height: 475px !important;
}
.our-product-bottle-img-2 {
  height: 480px !important;
  width: 124px !important;
}
.our-product-bottle-img-3 {
  height: 469px !important;
  width: 130px !important;
}

.bottle-img-1 {
  height: 552px !important;
  width: 147px !important;
}
.bottle-img-2 {
  height: 519px !important;
  width: 134px !important;
}
.bottle-img-3 {
  height: 469px !important;
  width: 140px !important;
}
.footer-copyright-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 5%;
}
.logo-holder-footer{
  width: 10%;
  padding: 0%!important;
}

/* for banner overlay start */
.banner-text {
  position: absolute;
  top: 53%;
  left: 0;
  transform: translateY(48%);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 30px 100px;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
  color: #ffffff;
}

.banner-text h1 {
  font-size: 2rem;
  margin: 0 0 10px;
}

.banner-text p {
  font-size: 1.1rem;
  line-height: 1.5;
}
.reach-us-div {
  display: flex;
  justify-content: center;
  padding: 20px 0px;
  /* align-items: center; */
}
.reach-us-add {
  padding: 0px 30px;
}
.benefits-heading {
  margin-top: 40px;
  margin-bottom: 40px;
}

.benefits-page-div {
  display: flex;
  justify-content: center;
  padding-bottom: 35px;
}

.benefits-img-div img {
  height: 390px;
  width: 390px;
  border-radius: 10px;
}

.benefits-img-div {
  width: 30%;
}

.benefits-content {
  width: 60%;
  text-align: justify;
  line-height: 1.5rem;
  padding: 0px 10px;
}

.benefits-content ol {
  padding-left: 1.1rem;
  margin: 7px 0px;
}
.benefits-content ol li {
  padding-left: 0.2rem;
  padding-bottom: 15px;
}

.find-us-on-div {
  display: flex;
}

.find-us-on-div img {
  width: 90px;
  height: 50px;
  padding-left: 5px;
}

.benefits-img {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.benefits-img.slide-in {
  opacity: 1;
  transform: translateX(0);
}

.find-us-on-div-reach {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.find-us-on-div-reach img {
  width: 90px;
  height: 50px;
  padding-left: 5px;
}

.amazon-btn {
  width: 40% !important;
  height: 4rem !important;
  margin-bottom: 5%;
}
.vid-dimensions {
  width: 60%;
  height: 40%;
}

.disclaimer-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 25rem;
}
.disclaimer-holder {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 10rem;
}
.disclaimer-holder hr {
  width: 100%;
  position: relative;
}
.disclaimer-holder button {
  position: absolute;
  width: 12%;
  color: #ffffff;
  padding: 10px 12px 10px 12px;
  background-color: #7b8154;
  border-radius: 6px;
  font-size: 15px;
  border: none;
}
.disclaimer-text {
  width: 90%;
  padding: 0 5% 0 5%;
  text-align: center;
}

.know-us-info {
  width: 90% !important;
  padding: 0 5% 0 5%;
}
/* for banner overlay end */

/* responsive mobile */

@media only screen and (max-width: 740px) {
  /*mobile navbar */

  /*     
.theme-navbar {
    margin-bottom: 5%;
    width: 90%;
    display: flex;
    justify-content: center;
    z-index: 1;
    position: relative;
    height: 10vh;
    font-weight:normal;
}

.navb-contents {
    width: 60%;
    display: flex;
    justify-content: space-around;
    margin-top: 3%;
}
.navb-contents a {
    color: black;
    text-decoration: none; 
    margin: 0 15px; 
    transition: color 0.2s ease; 
}

.navb-contents a:hover {
    color: #808000; 
}
.logo-container {
    display: flex;
    justify-content: center;
    width: 20%;
    padding: 2%;
}
.c1 img {
    width: 80%;
    height: 7vh;
}
.c2 img {
    width: 80%;
    height: 8vh;
} */

  .disclaimer-holder button {
    position: absolute;
    width: 40%;
    color: #ffffff;
    padding: 10px 12px 10px 12px;
    background-color: #7b8154;
    border-radius: 6px;
    font-size: 15px;
    border: none;
  }
  .disclaimer-section {
    height: 30rem;
  }
  .about-founder-info {
    padding: 0;
  }
  .founder-info-div {
    padding: 0;
  }

  /* Mobile footer start */

  .footer-holder {
    flex-direction: column;
    width: 92%;
  }
  .footer {
    width: 100%;
    height: 50rem;
  }
  .sec1 {
    width: 100%;
  }
  .sec2 {
    width: 100%;
  }
  .sec3 {
    width: 100%;
    padding: 2%;
  }
  .footer-copyrights {
    padding-bottom: 5%;
    background-color: #7b8154;
  }
  .footer-copyright-text{
    width: 100%;
  }
  .footer-image{
    width:5rem!important
  }

  .sec1 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
  }
  .sec2 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
    padding-left: 0;
  }
  .sec3 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
    padding: 0%;
  }

  .sec1 img {
    width: 100%;
    margin-top: 6%;
  }

  .footer-copyrights {
    width: 100%;
  }
 

  .mob-brand-logo {
    text-align: center;
  }

  /* Mobile footer end */

  .sticky-navbar {
    width: 68%;
    height: 6%;
    position: fixed; /* Keep it fixed */
    top: 0; /* Align to the top */
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Change as needed */
    padding: 10px;
    display: none; /* Initially hidden */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(-100%); /* Initially hidden */
    transition: transform 0.5s ease; /* Smooth transition */
    font-weight: normal;
  }

  /*mobile home.slider */

  .slider {
    position: relative;
    max-width: 100%;
    margin: -5%;
    overflow: hidden;
    /* height: 38vh; */
  }

  .slides {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition */
  }

  .slide-holder {
    min-width: 100%; /* Each slide takes full width */
    position: relative; /* For positioning the text */
  }

  .slides img {
    width: 100%; /* Ensure images fill the slide */
    height: auto; /* Maintain aspect ratio */
  }

  .banner-text {
    position: absolute; /* Position text over the image */
    bottom: 80%; /* Position near the bottom */
    left: 10%; /* Adjust left margin */
    color: #1a5319; /* Text color */
    padding: 10px; /* Padding around text */
    border-radius: 5px; /* Optional: rounded corners */
    z-index: 10; /* Ensure text is above the image */
  }
  .banner-text h1 {
    font-size: 300%;
  }
  .banner-text a {
    text-decoration: none;
    color: #1a5319;
    transition: text-decoration 0.5s ease-in;
  }
  .banner-text a:hover {
    text-decoration: underline;
    color: #808000;
  }

  .slider button {
    position: absolute;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    margin-left: 3.6%;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  /*mobile home.about-us */

  .about-us {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0.2%;
    margin-top: 5%;
  }
  .about-banner {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 40vh;
  }
  .about-info {
    width: 90%;
    background-color: #a2a976;
    color: white;
    padding: 8%;
  }
  .about-info h1 {
    font-size: 300%;
  }
  .about-info p {
    font-size: 100%;
  }
  .about-info button {
    font-size: 100%;
    padding: 3%;
    background-color: #7b8154;
    color: white;
    border: 1px solid white;
    margin-top: 3%;
  }
  .about-banner img {
    overflow: hidden;
  }

  /* mobile home.product */

  .products {
    display: flex;
    flex-wrap: wrap;
    width: 300%;
    height: 90vh;
  }
  .product-header {
    text-align: center;
    font-size: 150%;
  }
  .products h1 {
    text-align: center wis;
  }
  .card {
    z-index: 10;
    width: 20%;
    margin-right: 9%;
  }
  .card-image-holder {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    padding: 4%;
  }
  .card-image-holder img {
    margin-left: 50%;
  }

  .description {
    width: 110%;
    margin-top: 110%;
    padding-top: 310px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 50vh;
    z-index: -1;
    position: relative;
    color: #1a5319;
  }

  .card:hover .description {
    background-color: #7b8154;
    transition: 0.5s;
  }
  .description:hover {
    background-color: red;
  }

  .quantity {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .quantity div {
    border: 1px solid black;
    padding: 1%;
    margin: 1%;
  }

  .card:hover .quantity div {
    color: #ffffff;
  }
  /* mobile home.benefits */

  .benefits {
    background-color: #ffffff;
    height: 100vh;
    z-index: -100;
  }
  .benefits h1 {
    width: 100%;
    text-align: center;
    padding-top: 4%;
    font-size: 200%;
  }
  .benefits-container {
    width: 100%;
    z-index: -100;
    display: flex;
    flex-direction: row;
  }

  .reverse {
    display: flex;
    flex-direction: column-reverse !important;
  }
  .benefits-content {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 10px;
  }
  .benefits-img-div {
    width: 100%;
    padding: 0;
  }
  .benefits-img-div img {
    width: 100%;
    padding: 0;
    border-radius: 0;
  }

  .cells {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 60vh;
    position: absolute;
  }
  .sub-cell {
    display: flex;
    flex-direction: row;
    padding: 3%;
    font-size: 100%;
    margin: 5%;
    margin-bottom: 20%;
    z-index: 10;
  }
  .sub-cell p {
    z-index: 100;
  }
  .sub-cell hr {
    position: absolute;
    z-index: 100;
    width: 30%;
    height: 3px;
    border: none;
    background-color: olive;
  }
  .cell-right {
    width: 100%;
    margin-top: 30%;
  }
  .cell-right .up {
    margin-left: 50%;
  }
  .cell-right .down {
  }
  .cell-left {
    width: 100%;
    height: 85vh;
  }
  .cell-left down {
  }
  .cell-center img {
    width: 110%;
    margin-top: 15%;
  }
  .image-holder {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100px; /* Set a fixed width */
    height: 100px; /* Set a fixed height to maintain aspect ratio */
    overflow: hidden; /* Hide overflow to create a circular crop */
    border-radius: 50%; /* Make the container circular */
    display: flex; /* Center the image */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  .benefits-page-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 35px;
  }
  .left {
    margin-left: 15%;
  }
  .right {
    margin-left: 40%;
  }
  .right hr {
    margin-left: -8%;
  }
  .image-holder img {
    z-index: 0;
    width: 100%; /* Make the image fill the container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Crop the image if needed */
  }

  .image-holder:hover {
    width: 130px; /* Set a fixed width */
    height: 130px; /* Set a fixed height to maintain aspect ratio */
    transition: 0.5s;
  }

  .vid-dimensions {
    width: 100%;
  }
  .our-product-text {
    width: 90%;
    padding: 5% 0 5% 0;
  }

  .benefits-button {
    width: 50%;
  }

  /* .mail-link {
    text-decoration: none !important;
    color: black !important;
} */
}

/* Scroll animation styles start */
.scroll-animate {
  opacity: 0;
  width: 100%;
  transform: translateY(80px);
  transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate.delay-1 {
  transition-delay: 0.1s;
}
.scroll-animate.delay-2 {
  transition-delay: 0.2s;
}
.scroll-animate.delay-3 {
  transition-delay: 0.3s;
}
.scroll-animate.delay-4 {
  transition-delay: 0.4s;
}
.scroll-animate.delay-5 {
  transition-delay: 0.5s;
}
.scroll-animate.delay-6 {
  transition-delay: 0.6s;
}
.scroll-animate.delay-7 {
  transition-delay: 0.7s;
}
.scroll-animate.delay-8 {
  transition-delay: 0.8s;
}

.pages-heading.animate {
  animation: fadeInUp 0.8s ease-out forwards;
}

.para-design.animate {
  animation: fadeInLeft 0.6s ease-out forwards;
}
/* Scroll animation styles end */

/* Show hamburger only on mobile */
.hamburger {
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 999;
}

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  right: -250px;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  z-index: 998;
  transition: right 0.3s ease-in-out;
  padding-top: 60px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.sidebar-nav a {
  padding: 15px 0;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.footer-div-1 {
  display: flex;
  justify-content: center;
}
.footer-div-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}




/* .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
} */

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .theme-navbar,
  .sticky-navbar {
    display: none;
  }

  .hamburger {
    display: block;
  }
}

@media only screen and (min-width: 350px) and (max-width: 600px) {
  .theme-navbar,
  .sticky-navbar {
    display: none !important;
  }

  .logo-mobile {
    display: flex;
    justify-content: center;
    width: 10%;
    padding: 0.5%;
    height: 4rem;
  }
  .logo-mobile-img {
    /* height: 50px; */
    width: 70px;
    padding-left: 60px;
    padding-top: 4px;
  }

  .slider {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden; /* Hide overflow */
    /* margin-bottom: -84px !important; */
  }

  .slides {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition */
  }

  .slide-holder {
    min-width: 100%;
    height: 16rem;
    position: relative;
    overflow: hidden;
    align-content: center;
    padding-top: 70px;
  }

  .slides img {
    width: 100%; /* Ensure images fill the slide */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden;
    /* transform: rotateY(180deg); */
    -webkit-object-fit: cover;
  }

  .banner-text {
    position: absolute; /* Position text over the image */
    bottom: 17%; /* Position near the bottom */
    left: 0%; /* Adjust left margin */
    color: #ffffff; /* Text color */
    padding: 10px; /* Padding around text */
    z-index: 10; /* Ensure text is above the image */
  }
  .banner-text h1 {
    font-size: 300%;
    margin-bottom: -2%;
    margin-left: -1%;
  }
  .banner-text a {
    text-decoration: none;
    color: #1a5319;
    line-height: 22px;
    transition: text-decoration 0.5s ease-in;
  }
  .banner-text a:hover {
    text-decoration: underline;
    color: #808000;
  }

  .slider button {
    position: absolute;
    width: 5%;
    height: 5.5rem;
    top: 35%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    font-size: 300%;
    color: #454545;
    border-radius: 20%;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  /* product for mobile start */
  .products {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .card {
    width: 30%;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card-image-holder {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0%;
  }

  .card-image-holder img {
    /* width: 100%; */
    margin-left: 0%;
  }

  .description {
    width: 110%;
    margin-top: 109%;
    padding-top: 413px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 50vh;
    z-index: -1;
    position: relative;
    color: #1a5319;
  }

  .quantity {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }
  /* product for mobile end */

  .benefits-img {
    height: 350px !important;
  }

  .benefits {
    height: auto;
    padding-bottom: 20px;
  }

  .about-info {
    padding: 5%;
    margin-bottom: 13px;
  }

  .about-banner {
    width: 100% !important;
  }
  .banner-text h1 {
    font-size: 1rem;
    margin-bottom: -2%;
    margin-left: -1%;
  }

  .banner-text p {
    font-size: 0.8rem;
  }

  .logo-mobile-img {
    display: block !important;
  }

  .about-us {
    margin-top: 0px;
    margin-bottom: -20px;
  }

  .slider button {
    position: absolute;
    width: 12%;
    height: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    font-size: 198%;
    color: #454545;
    border-radius: 20%;
  }

  .about-image-holder {
    height: 11rem !important ;
  }
  .about-content-holder {
    height: 110rem !important;
  }

  /* .footer-holder{
        margin-top: -6.5rem;
    } */

  .products-button {
    margin-top: 23%;
    width: 28%;
  }

  /* Ensure header is always visible */
  header {
    position: relative;
    z-index: 1000;
  }

  .hamburger {
    padding: 20px;
    cursor: pointer;
    z-index: 1100;
  }

  .hamburger i {
    font-size: 29px;
    transition: transform 0.9s ease;
  }

  .hamburger i.rotated {
    transform: rotate(90deg);
    transition: transform 0.9s ease;
  }

  .footer-div-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  /* .dropdown-menu {
        position: absolute;
        top: 100%; 
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        align-items: center;
        z-index: 999;
        animation: slideDown 0.3s ease forwards;    
    }

    .dropdown-nav a {
        display: block;
        padding: 12px 20px;
        text-align: center;
        color: #333;
        text-decoration: none;
        width: 100%;
        transition: background 0.3s ease;
    }

    .dropdown-nav a:hover {
        background-color: #f0f0f0;
    }

    .dropdown-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    } */
  /* Slide down animation */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card-500 {
    padding-top: 50px;
  }

  .card-1000 {
    padding-top: 50px;
  }
  .card-250 {
    padding-top: 50px;
  }

  .quantity-1000 {
    margin-top: 40px;
  }
  .quantity-500 {
    margin-top: 45px;
  }
  .quantity-250 {
    margin-top: 10px;
  }

  .footer-copyrights img {
    width: 30%;
    margin: 0.1%;
    /* margin-left: 1%;  */
  }
  .footer-copyrights {
    display: block;
    margin-top: 10px;
  }
  .copyrights-hr {
   width: 90%;
   margin: 1px
  }
  
  .footer {
    width: 100%;
    height: 42rem;
  }

  .section-image-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 8rem;
    background-color: #7b8154;
    overflow: hidden;
    margin-top: 0%;
    padding-top: 70px;
  }

  .about-image-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60%;
    overflow: hidden;
    width: 47%;
    height: 7rem;
    margin-top: 8%;
    margin-bottom: 2%;
    background-color: #efc790;
  }

  .about-content-holder {
    width: 100%;
    height: 95rem;
    z-index: 10;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url(/images/about-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    font-weight: normal;
  }

  .work-title {
    padding: 0%;
  }

  /* map for mobile start */
  .reach-us-div {
    display: flex;
    flex-direction: column;
  }

  .reach-us-add,
  .map-container {
    width: 100%;
  }

  .map-container iframe {
    width: 100%;
    height: 300px;
  }
  .reach-us-add {
    padding: 0px 0px;
  }
  /* map for mobile end */

  .card {
    width: 30%;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
  }

  /* product inner page start */
  .products-page-slider {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .product-slide-cards {
    flex: 100%;
    width: 100%;
    height: 100%;
  }
  .card-product-inner {
    padding-top: 155px;
  }
  /* product inner page end */

  /* know us page style start */
  .about-founder-info {
    flex-direction: column;
    width: auto;
  }
  .founder-info-div {
    width: 100%;
    text-align: center;
  }
  /* know us page style end */

  .about-us {
    height: auto;
  }

  .footer-holder {
    padding: 2%;
  }

  .sticky-mobilemenu {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    /* position: fixed; */
    top: 0px;
    background-color: #ffffff;
  }

  /* for new menu offcanvas start */
  .mobile-menu {
    position: relative;
    z-index: 1000;
  }

  .sticky-mobilemenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 15px; */
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 1001;
    border-bottom: 1px solid #ddd;
  }

  .hamburger {
    cursor: pointer;
  }

  /* Dropdown Menu - Off-canvas */
  .dropdown-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    top: 8%;
  }

  .dropdown-menu.open {
    right: 0;
  }

  .dropdown-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding-top: 30px;
    width: 100%;
  }

  .dropdown-nav a {
    font-size: 20px;
    text-decoration: none;
    color: #333;
    padding: 8px;
  }

  .sec1 {
    width: 100%;
    padding-left: 10px;
  }

  .footer-div-1 {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .footer-div-2 {
    width: 100%;
  }

  .about-text p {
    font-weight: normal;
    text-align: justify;
    width: 75vw;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
}

@media (min-width: 1024px) {
  .logo-mobile {
    display: none !important;
  }
}

/* Show only on mobile (max 768px) */
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
}

/* Hide on desktop (min 769px) */
@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

@media only screen and (min-device-width: 360px) {
  .logo-holder-footer {
    display: flex !important;
    justify-content: center !important;
    padding-left: 5%;
  }
}
/* Tab view */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .section-banner {
    margin-top: 2rem;
  }

  .disclaimer-section {
    justify-content: flex-start;
    height: 20rem;
  }

  .benefits-page-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 35px;
    width: 100%;
  }
  .benefits-content {
    width: 90%;
    padding: 0 5% 0 5%;
  }
  .benefits-img-div {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .reverse {
    flex-direction: column-reverse;
  }
  .disclaimer-holder button {
    width: 15%;
  }

  /* Footer */
  .footer-holder {
    width: 90%;
    padding: 0 5% 0 5%;
  }
  .footer {
    width: 100%;
    height: 26rem;
  }
  .sec1 {
    width: 30%;
  }
  .sec2 {
    width: 30%;
  }
  .sec3 {
    width: 30%;
    padding: 2%;
  }
  .sec1 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
  }
  .sec2 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
    padding-left: 0;
  }
  .sec3 h1 {
    font-size: 1.5rem;
    margin-bottom: -1.5%;
    padding: 0%;
  }

  .sec1 img {
    width: 100%;
    margin-top: 6%;
  }

  .footer-copyrights {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer-copyright-text {
    width: 90%;
  }
  .copyrights-hr{
    width:100%
  }

  .mob-brand-logo {
    text-align: center;
  }

  .footer-img-container img {
    height: 2rem;
    flex-direction: column;
  }
  .footer-div-1 {
    width: 90%;
    padding: 0 5% 0 5%;
    flex-direction: column;
    justify-content: center;
  }
  .footer-div-2 {
    width: 90%;
    padding: 0 5% 0 5%;
    justify-content: center;
  }

  .logo-holder-footer{
    justify-content: center;
    width: 100%;
  }
 
 
  .footer-image {
    width: 8rem !important;
  }

  /* footer end */

  /* Home */

  /* Know us */
  .about-us {
    height: 25rem;
  }
  /* Know us end */

  /* our products */
  .description {
    margin-top: 180%;
  }
  /* our products end */

  /* Home end */

  /* Our Products */

  .section-image-holder {
    align-items: center;
  }

  .vid-dimensions {
    width: 90%;
    height: 70%;
  }

  .our-product-text {
    width: 90%;
  }

  /* Our Products End */

  /* Know Us */
  .about-image-holder {
    height: 8rem;
  }

  .inner-body-know-us {
    height: 100rem;
  }
  /* Know Us End */

  /* reach us */
  .reach-us-div {
    display: flex;
    flex-direction: column;
  }

  .amazon-btn {
    width: 30% !important;
    height: 6rem !important;
    margin-bottom: 5%;
  }

  .navb-contents hr {
    width: 5%;
    height: 1px;
    border: none;
    background-color: #bababa;
  }
  .navb-contents {
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  /* reach us end */
}