@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,500;0,600;0,700;1,200&display=swap');

  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
  }
  :root{
    --bg-color:#e3edf7;
    --gradient-white-bg:linear-gradient(0deg,#fff 0%,#edf4fa 51%,#e5eef7 100%);
    --gradient-color-bg:rgb(102, 255, 0);
    --main-color:#000000;
    /* --font-color:#90979f; */
    --font-color:white;
    --hover-box-shadow:rgba(0,0,0,0.19)0px 10px 20px,
                       rgba(0,0,0,0.23)0px 6px 6px;     
    --gradient-white-bg2:linear-gradient(98deg,#e5eef7 0%,#fff 100%);
  }
  a{
    text-decoration: none;
    color:rgb(102, 255, 0);
  }
  body{
    font-family: 'Poppins', sans-serif;
    /* background: var(--bg-color); */
   
    
     
  }
  .heading {
    
    text-align: center; /* Center align the heading */
    font-size: 2rem;
    margin: 1px;
  }

  .heading h2 {
    position: relative; 
    display: inline-block; 
    padding-bottom: 2px; 
    

  }

  .heading h2::after {
    content: ''; /* Add pseudo-element for underline */
    position: absolute; /* Position it absolutely */
    left: 0; /* Align it to the left */
    bottom: 0; /* Align it to the bottom */
    width: 100%; /* Make it span the whole width */
    height: 3px; /* Set the height of the underline */
    background-color: #f6ff00; /* Set the color of the underline */
  }
  

  header{
    border-bottom:2px solid rgb(152, 152, 152);
    position: fixed;
    padding: 15px 8%;
    height: 77px;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.474);
    /* background: var(--gradient-white-bg); */
    z-index: 100;
    /* transition: .3s; */
   
  }
  header .logo{
    font-size: 1.7rem;
    font-weight: 700;
    animation: slideRight 1s ease forwards;
  }
  header .logo img{
    left: -20px;
    position: relative;
    top: 2px;
    width:100px ;
    height: 90px;
  }

  header span{
    background:var(--gradient-color-bg);
    -webkit-background-clip: text;
    color: transparent;
  }
  header .navlist{
    display: flex;
  }
  .navlist li{
    margin: 0 1rem;
  }
  .navlist li a{
    display: inline-flex;
    font-weight: 600;
    }
  .navlist li a:hover{
   color: rgb(255, 0, 0);
   
  }

  .right-header{
    display: flex;
    align-items: center;
    justify-content: end;
    grid-gap: .8rem;
    animation: slideNav 4s ease forwards;
  }
  .btn{
    background:rgba(106, 0, 0, 0);
    color: rgb(0, 255, 17);
    padding: 8px 10px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 100px;
    font-weight: 500;
    transition:  all .3s ease;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

  
  .btn:hover,.btn-box .d-CV:hover{
    box-shadow: rgba(255, 237, 237, 0.19)0px 2px 4px,
    rgba(255, 255, 255, 0.23)0px 6px 6px;
  }
 .menu-icon{
 position: relative;
 display: block;
 height: 30px;
 width: 30px;
 cursor: pointer;
 /* background-color: blue; */
 }

 .menu-icon .bar,
 .menu-icon::after,
 .menu-icon::before{
    content: "";
    display: none;
    width: 100%;
    height: 4px;
    border-radius: 3px;
    background: white;
    margin: 6px 0;
    transition: .4s;
 }
.menu-icon.active::before{
    transform: rotate(-45deg) translate(-6px,6px);
}
.menu-icon.active::after{
    transform: rotate(45deg)translate(-8px,-8px);
}
.menu-icon.active .bar{
    opacity: 0;
}




/* ===========>>>>>>>>>>>>  Section home design<<<<<<<<<<<========== */

section{
    padding: 70px 7%;
    
}


/* slider start */

.slider-container {
    top: 75px;
    width: 100%;
    /* margin: auto; */
    overflow: hidden;
    position: relative;
    
  }
  .slider-container img{
    
    padding-top: 20px;
      width: 100%;
      height: 80vh;
  }
  /* Style for the slides */
  .slide {
    display: none;
    width: 100%;
  }
  
  /* Style for the navigation buttons */
  .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: white;
    background-color: black;
    padding: 10px;
    border: none;
    outline: none;
  }
  
  .prev { left: 0; }
  .next { right: 0; }
  /* end slider */
  

/* =============>>>>>about <<<<<====== */
.about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background-image: url('/—Pngtree—ayurved\ ayurveda\ banner_16508151.png') ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color:rgb(37, 0, 0);
  }
  .about .about-img {
    position: relative;
    
  }
  
  .about .about-img .aboutHero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 40vw;
    height: 450px;
    border-radius: 5px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    /* border: 2px solid green; */
  }
  .about .about-content h2 {
    color: rgb(0, 0, 0);
  }
  .about .about-content h3 {
    font-size: 2rem;
    line-height: 3rem;
    margin: 0.5rem 0;
    padding-bottom: 5px;
    color: rgb(0, 0, 0);
  }
  .about .about-content p {
    color: black;
  }
  .text-box p {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1rem;
    font-weight: 500s;
  }
  .cvConttent {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    transition: 0.3s ease;
  }
  
  /* .btn-box .d-CV {
    background: var(--gradient-white-bg2);
    padding: 10px;
    border-radius: 5px;
    font-weight: 500;
    color: #000;
    box-shadow: rgb(60, 64, 67, 0.19);
  } */
  /* ============================== product filter========================  */
  
.wrapper{
    
    width: 100%;
    overflow-x: hidden;
}
.wrapper .container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}
.category-filter{
    margin-top: 40px;
}
.title{
    margin-bottom: 40px;
}
.title h1{
    color: #1b1919;
    text-align: center;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: 1px;
}
.filter-btns{
    text-align: center;
}
.filter-btn{
    background: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-transform: uppercase;
    display: inline-block;
    margin: 10px 30px;
    font-size: 16px;
    color: #000000;
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.filter-btn::after{
    content: "";
    position: absolute;
    top: 110%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 2px;
    width: 0;
    background-color: #555;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}
.filter-btn:hover{
    color: #555;
}
.filter-btn:hover::after{
    width: 100%;
}
/* active button */
.active-btn{
    color: #555;
}
.active-btn::after{
    width: 100%;
}
/*  */

.filter-items{
    margin-top: 40px;
}

.item-img{
    height:250px;
    position: relative;
    overflow: hidden;
}
.item-img::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(212, 203, 203, 0.1);
}
.item-img .discount{
    position: absolute;
    right: 0;
    top: 20px;
    background-color: #00ff04;
    z-index: 1;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    padding: 4px 16px;
}
.item-img img{
    padding-right: 20px;
    width: 100%;
    height: 250px;
    display: block;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    -o-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.filter-item {
    border-radius: 20px;
    padding: 5px;
    box-shadow: rgba(41, 255, 8, 0.25) 0px 25px 50px -12px;
    
}
.filter-item:hover .item-img img{
    
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
.item-info{
    text-align: center;
    padding: 14px 0;
}
.item-info p{
    font-weight: 600;
    font-size: 15px;
    margin-top: 8px;
}
.item-info .old-price{
    font-size: 14px;
    font-weight: 700;
    /* text-decoration: line-through; */
}
.item-info .new-price{
    display: inline-block;
    margin-left: 6px;
    font-weight: 600;
    color: #f53939;
}
.hotbtn{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}
.add-btn{
    border: none;
    display: inline-block;
    justify-content: center;
    margin-top: 20px;
    background:var(--gradient-color-bg);
    text-decoration: none;
    font-size: 17px;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.add-btn:hover{
    border-color: #95bf47;
    background-color: #ff0000;
    color:linear-gradient(0deg, rgba(0,0,0,0.5383403361344538) 0%, rgb(7, 255, 7) 100%);;
}


.filter-items{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.filter-item{
    /* border: 2px solid red; */
    height: 450px;
    width: 100%;
    margin-bottom: 40px;
    -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@media screen and (min-width: 768px){
    .filter-item{
        width: calc(50% - 30px);
    }
}

@media screen and (min-width: 992px){
    .filter-item{
        width: calc(33.3333% - 30px);
    }
}

@media screen and (min-width: 1200px){
    .filter-item{
        width: calc(25% - 30px);
    }
}



.service{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
    margin-bottom: -25px;
    
  }
  .image{
    /* border: 2px solid red; */
     width: 100%;
     border-radius: 20px;
  }
.image img{
  background-repeat: no-repeat;
  background-size: cover;
padding: 50px;
width: 100%;
height: 400px;
border-radius: 100px;

  }
  .information{
    /* border: 2px solid red; */
    width: 100%;
    text-align: center;
  }
  .information h1{
    font-size: 2.3rem;
    position: relative;
    display: inline-block; 
    padding-bottom: 1px; 
  }
  .information h1::after {
    content: ''; /* Add pseudo-element for underline */
    position: absolute; /* Position it absolutely */
    left: 0; /* Align it to the left */
    bottom:0; /* Align it to the bottom */
    width: 100%; /* Make it span the whole width */
    height: 3px; /* Set the height of the underline */
    background-color: #ACD146; /* Set the color of the underline */
  }
  .information p{


font-weight:600 ;

color: rgb(122, 122, 122);
line-height: 29px;
font-size: 18px;

  }

  .heading h1{
    font-size: 2.4rem;
  }
  .heading p{
   font-size: 1.5rem;
  }
.image img{
    border: 1px solid red;
  position: relative;
  width: 300px;
  height:220px;
  border-radius: 20px;
  padding: 100px;
  object-fit: cover;
}

.btn{
  align-items: center;
}

.choose{
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  
}
.close{
  
  text-align: center;
  width: 100%;
  padding: 10px;
  margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.19)0px 5px 20px,
  rgba(6, 255, 18, 0.23)0px 6px 6px;
  border-radius: 20px;
}

.close .image img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  
}
.image img{
    position: relative;
    width: 300px;
    height:220px;
    border-radius: 20px;
    padding: 10px;
    object-fit: cover;
  }
.close .intro p{
  width: 100%;
  text-align: justify;
  padding-top: 15px;
}




/* ============  Disease  section =========================== */
.card-container {
   
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center-align cards */
}

.card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    flex: 0 1 calc(25% - 20px); /* Each card takes 25% of the row minus the gap */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

.card-title {
    margin: 15px 0;
    font-size: 1.5rem;
    color: #333;
}

.card-buttons {
    display: flex;
    justify-content: space-around;
    width: 100%;
}



/* Responsive Design */
@media (max-width: 1024px) {
    .card {
        flex: 0 1 calc(33.33% - 20px); /* 3 cards per row */
    }
}

@media (max-width: 768px) {
    .card {
        flex: 0 1 100%;
    }
}

@media (max-width: 480px) {
    .card {
        flex: 0 1 100%; /* 1 card per row */
    }

  
}

/*  ============================= footer ================================= */

footer{
    background: url(/footbg.jpg); 
    background-repeat: no-repeat;
    background-blend-mode: overlay;

    background-size: cover;
    background-position: center;
    width: 100%;
    color:white;
    /* background: rgb(68, 67, 67); */
    padding: 50px 0 30px;
    font-size: 13px;
    line-height: 20px;
}
footer .row{
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
footer .col{
    flex-basis: 25%;
    padding: 10px;
}
.col:nth-child(2), .col:nth-child(3){
    flex-basis: 15%;
}
.footer_logo{
    width: 80px;
    position: relative;
    top: -18px;
    left: 0px;
    padding-bottom: 20px;
}
.footer_about{
    position: relative;
    top: -23px;
}
footer .col h3{
    width: fit-content;
    margin-bottom: 40px;
    position: relative;
}
.footer_email{
    width: fit-content;
    border-bottom: 1px solid white;
    margin: 20px 0;
}
footer .col ul li{
    list-style: none;
    margin-bottom: 12px;
}
footer .col ul li a{
    text-decoration: none;
    /* color: #fff; */
    color:white;
}
footer .col form{
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-bottom: 1px solid #fee140; */
    border-bottom: 1px solid white;
    margin-bottom: 50px;
}
.col form .icon{
    font-size: 50px;
    margin-right: 10px;
}
.col form input{
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    outline: none;
}
.social-media{
    display: flex;
    font-size: 20px;
    padding: 5px;
    width: 100%;
}
.social-media i{
    border: 2px solid rgb(4, 255, 0);
    margin: 5px;
    padding: 5px;
    border-radius: 50%;
}
.col form button{
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}

footer .col form button .icon_right{
    font-size: 16px;
    color: #ccc;
}
footer .col .social_icons .social_icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    background:#a27b5c;
    margin-right: 15px;
    padding: 5px;
    cursor: pointer;
}
hr{
    width: 90%;
    border: 0;
    border-bottom: 1px solid white;
    margin: 0px auto;
}
footer .copyright{
    text-align: center;
}
.bottom_line{
    width: 100%;
    height: 5px;
    background: #ffffff;
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 0;
    overflow: hidden;
}
.bottom_line span{
    width: 15px;
    height: 100%;
    /* background: #fee140; */
    background: #000000;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moveline 2s linear infinite;
}
@keyframes moveline{
    0%{
        left:-20px;
    }
    100%{
        left:100%;
    }
}

@media screen and (max-width: 866px) {
  .col{
    flex-basis: 110%;
    padding: 10px;
}
.bottom_line  ul{
  display: flex;
}
.footer_logo{
  top:-67;
  left: 80px;
}
.footer_about{
  top:-10px;
}

}
/* @keyframes  MoveText animation  */

@keyframes moveText{
    0%,10%,100%{
        background-position: -24rem 0;
    }
    65%,85%{
        background-position: 0rem 0;
    }
}
@keyframes moveCursorText{
    0%,10%,100%{
        width:0;
    }
    65%,78%,85%{
        width: 100%;
        opacity: 1;
    }
    75%,85%{
        opacity: 0;
    }
}
@keyframes animate{
0%{
    transform: rotate(0deg);
}
100%{
    transform:rotate(360deg) ;
}
}

@keyframes rotateText{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform:rotate(0deg) ;
    }
    }





    /* keyframe animation on page  */
    
    @keyframes slideRight{
        0%{
            transform: translateX(-100px);
            opacity: 0;
        }
        100%{
            transform: translateX(0);
            opacity: 1;
        }
    }

/* animation on home sction */
      
    @keyframes  slideLeft{
        0%{
            transform: translateX(100px);
            opacity: 0;
        }
        100%{
            transform: translateX(0);
            opacity: 1;
        }
    }
/* animation on navbar */
    @keyframes  slideNav{
        0%{
            transform: translateY(100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0);
            opacity: 1;
        }
    }
    /* animation on home sction */
     @keyframes  slideTop{
        0%{
            transform: translateY(100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0);
            opacity: 1;
        }
    }
    /* animation on home sction */
    @keyframes  slideBot{
        0%{
            transform: translateY(-100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* for img Zoom */

    @keyframes  ZoomIn{
        0%{
            transform: scale(0);
            opacity: 0;
        }
        100%{
            transform:scale(1);
            opacity: 1;
        }
    }