* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.p1 {
   text-align: center;
   color: #FFFFFF;
   font-family: sans-serif;
   font-family: "Quicksand", sans-serif;
}
.div1 {
    
    padding: 10px 0px;
    background-color: #000000;
    font-size: 16px;
    height: 50px;
    max-width: 1950px;
    min-width: 550px;
    font-family: "Quicksand", sans-serif;

}

.fixed {
  position: fixed;
  z-index: 2;
  background-color: #FFFFFF;
  width: 1900px;
 height: 160px;
top: 10;
}
@media(max-width:822px) {
  .div2 {
   display: block;
  }
  .span1 {
    display: block;
  }
}

.div2 {
    display: flex;
    cursor: pointer;
    margin: 0px 15px;
    margin-top: 30px;
     /* max-width: 1950px;
    min-width: 300px; */
    font-family: "Quicksand", sans-serif;
}
.span1 {
    padding: 0px 15px;
    word-spacing: 15px;
    font-size: 18px;
    font-family: "Quicksand", sans-serif;
    
}
.span2 {
 margin-left: 40%;
 font-family: "Quicksand", sans-serif;
}
.span3 {
    margin-left: 34%;
    word-spacing: 15px;
    font-size: 18px;
    font-family: "Quicksand", sans-serif;
}

.fa-facebook-f:hover {
    color: #3B5998;
    font-size: 22px;
}

.fa-instagram:hover {
    color: #E8688C;
    font-size: 22px;
}

.fa-youtube:hover {
    color: #CD201F;
    font-size: 22px;
    
}

.fa-tiktok:hover {
    color: #FE2C55;
    font-size: 22px;
}




.fa-magnifying-glass:hover {
    color: #F7943D;
    font-size: 20px;
}
.fa-user:hover {
    color: #F7943D;
    font-size: 20px;
    
}

.fa-heart:hover {
    color: #F7943D;
    font-size: 20px;
}
.fa-cart-shopping:hover {
 color: #F7943D;
    font-size: 20px;
}


.div3 {
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
    color: #222222;
    font-size: 15px;
   
    font-family: "Quicksand", sans-serif;
}

.span5 {
    padding: 5px 17.5px;
    font-family: "Quicksand", sans-serif;
    
}

.span5:hover {
color: #F7943D;
font-family: "Quicksand", sans-serif;
}

.span6 {
color: #00A341;
font-family: "Quicksand", sans-serif;
}
.span6:hover {
color: #F7943D;
font-family: "Quicksand", sans-serif;
}




/*                         slides                      */


.slider {
      position: relative;
      width: 100%;
      overflow: hidden;
      border: 4px solid #fff;
      border-radius: 10px;
      margin-top: 20px;
      height: 585px;
       max-width: 1950px;
    min-width: 550px;
  
    }

    .slides {
      display: flex;
      width: 200%;
      height: 100%;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      width: 50%;
      height: 100%;
      flex-shrink: 0;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Radio buttons (hidden) */
    input[type="radio"] {
      display: none;
    }

    /* Navigation dots */
    .navigation {
      position: absolute;
      width: 100%;
      bottom: 15px;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .bar {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: black;
      cursor: pointer;
      opacity: 0.5;
      transition: 0.3s;
    }

    input#slide1:checked ~ .slides {
      transform: translateX(0%);
    }

    input#slide2:checked ~ .slides {
      transform: translateX(-50%);
    }

    input#slide1:checked ~ .navigation label[for="slide1"],
    input#slide2:checked ~ .navigation label[for="slide2"] {
      opacity: 1;
    }



.div4 {
    margin-left: 93%;
    min-width: 300px;
    font-family: "Quicksand", sans-serif;

}

.img5 {
    height: 65px;
    position: fixed;
}

.div5 {
   
    margin-top: 30px;
    font-family: "Quicksand", sans-serif;

}
.span7 {
     font-size: 24px;
    font-family: cursive;
    font-weight: 550;
    margin-left: 45%;
    font-family: "Quicksand", sans-serif;
    
}


.span8 {
    position: absolute;
    right: 78%;
    top: 100%;
    background-color:#00A341;
    padding: 10px;
    width: 65px;
    color: #FFFFFF;
    height: 33px;
    font-family: "Quicksand", sans-serif;
}

.span9 {
    position: absolute;
    right: 63%;
    top: 100%;
    background-color:#00A341;
    padding: 10px;
    width: 65px;
    color: #FFFFFF;
    height: 33px;
    font-family: "Quicksand", sans-serif;
}


.span10 {
    position: absolute;
    right: 48%;
    top: 100%;
    background-color:#00A341;
    padding: 10px;
    width: 65px;
    color: #FFFFFF;
    height: 33px;
    font-family: "Quicksand", sans-serif;
}


.span11 {
    position: absolute;
    right: 32%;
    top: 100%;
    background-color:#00A341;
    padding: 10px;
    width: 65px;
    color: #FFFFFF;
    height: 33px;
    font-family: "Quicksand", sans-serif;
}

.span12 {
    position: absolute;
    right: 18%;
    top: 100%;
    background-color:#00A341;
    padding: 10px;
    width: 65px;
    color: #FFFFFF;
    height: 33px;
    font-family: "Quicksand", sans-serif;
}




ul {
    list-style-type: none;
   cursor: grab; 
   font-family: "Quicksand", sans-serif;
}

li {
    text-align: center;
     font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     color: #222222;
     font-family: "Quicksand", sans-serif;
}



.ul1 {
    margin-left: 20%;
    font-family: "Quicksand", sans-serif;
}

.li1:hover {
color: #F7943D;
font-family: "Quicksand", sans-serif;
}
.span13 {
    color: #878787;
    font-family: "Quicksand", sans-serif;
}

.del1 {
    color:#878787;
    font-family: "Quicksand", sans-serif;
}

.span14 {
    color: #EC0101;
    font-family: "Quicksand", sans-serif;
}











.card-group {
    display:flex;
   margin-left: 7%;
}

.card-img-top {
    height: 200px;
    margin-left: 30%;
    margin-top: 19%;
}

.card-img-top:hover {
    background-color:#E5E5E5;
}

.card-text {
    font-family: "Quicksand", sans-serif;
}

.span15 {
  margin-left:43% ;
  font-size: 24px;
 font-weight: 600;
 font-family: "Quicksand", sans-serif;

}
.div6 {
    margin-top: 5%;
    font-family: "Quicksand", sans-serif;

}


.div7 {
    text-align: center;
    font-family: "Quicksand", sans-serif;
    margin-top: 30px;
   
}
.img16 {

  padding: 15px;

}

.btn1 {
    margin-left:43%;
    padding: 0px 38px;
    height: 40px;
    width: 155px;
    background-color: #222222;
    color: #fff;
    border: none;
    font-family: "Quicksand", sans-serif;
    margin-top: 10px;
}

.btn1:hover {
    background-color: #F4994B;
}


.span16 {
    margin-left: 80px;
    font-size: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 550;
    font-family: "Quicksand", sans-serif;
}

.div8 {
    display: flex;
    text-align: center;
    gap: 100px;
    margin-left: 15%;
    margin-top: 5%;
    max-width: 800px;
    min-width: 300px;
    font-family: "Quicksand", sans-serif;
 
}


.div9 {
    display: flex;
    text-align: center;
    gap: 100px;
    margin-left: 15%;
    margin-top: 5%;
    max-width: 800px;
    min-width: 300px;
    font-family: "Quicksand", sans-serif;
 
}


.div8,
.div9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: auto;
  font-family: "Quicksand", sans-serif;
 
}

.card1 {
  width: 250px;
  text-align: center;
  transition: transform 0.3s;
  font-family: "Quicksand", sans-serif;

}

.card1:hover {
  transform: scale(1.03);
 

   
}

.card1 img {
  width: 100%;
  height: auto;
  object-fit: cover;

   
}




.li1 {
  margin: 10px 0;
}




@media (max-width: 768px) {
  .div8,
  .div9 {
    flex-direction: column;
    align-items: center;
  }

  .card1 {
    width: 90%;
    max-width: 400px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .card1 {
    width: 45%;
  }
}






.card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 2rem 1rem;
}

.card {
  width: 100%;
  max-width: 280px;
  text-align: center;
  transition: transform 0.3s;
  margin-bottom: 20px;
  font-family: "Quicksand", sans-serif;
}



.card-img-top {
  width: 80%;
  height: 200px;
  object-fit: cover;
  margin: 10% auto 0 auto;
  display: block;
}

 .card-img-top:hover {
  background-color: #E5E5E5;

}

.card-text {
  padding: 1rem;
  font-family: "Quicksand", sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: grab;
  font-family: "Quicksand", sans-serif;
}

li {

color: #222222;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 4px;
}

.ul1 {
  padding-left: 0;
  font-family: "Quicksand", sans-serif;
}


.li1:hover {
  color: #F7943D;
  font-family: "Quicksand", sans-serif;
}

.span13 {
  color: #878787;
  font-family: "Quicksand", sans-serif;
}

.del1 {
  color: #878787;
  margin-right: 5px;
  font-family: "Quicksand", sans-serif;
}

.span14 {
  color: #EC0101;
  font-family: "Quicksand", sans-serif;
 
}

/* Discount Badges */
.span8, .span9, .span10, .span11, .span12 {
  color: white;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-family: "Quicksand", sans-serif;
  margin-left: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .card-group {
    flex-direction: column;
    align-items: center;
  }
}





.videos {
    display: flex;
    margin-top: 50px;
    max-width: 100%;
    width: 100%;
text-align: center;
    height: 500px;
    gap: 20px;
    justify-content: center;
}


.video1 {
    border-radius: 16px;
}


@media( max-width: 688px) {
  .videos {
display: block;
display: flex;
  }
}





.div11 {
   text-align: center;
   margin-top: 50px;
   font-size: 24px;
   font-weight: bolder;
   font-family: "Quicksand", sans-serif;
}


.div12 {
margin-left: 15%;
font-family: "Quicksand", sans-serif;
line-height: 28px;
font-size: 12px;
color: #222222;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-top: 40px;
}

.content1 {
    background-color: #F6F6F8;
    height: 40px;
    width: 80%;
    font-family: "Quicksand", sans-serif;
}

.content2 {
    background-color: #F6F6F8;
    margin-top: 10px;
    height: 40px;
     width: 80%;
     font-family: "Quicksand", sans-serif;
}

.content3 {
    background-color: #F6F6F8;
     margin-top: 10px;
     height: 40px;
     font-family: "Quicksand", sans-serif;
      width: 80%;
}

.span18 {
  margin-left: 88%;
font-size: 36px;
background-color: #222222;
color: #FFFFFF;
padding: 5px;
position: absolute;
right: 16%;
   font-family: "Quicksand", sans-serif;
 
}
.span19 {
  margin-left: 87.3%;
font-size: 36px;
background-color: #222222;
color: #FFFFFF;
padding: 5px;
position: absolute;
right: 16%;
   font-family: "Quicksand", sans-serif;
 
}
.span20 {
  margin-left: 88.5%;
font-size: 36px;
 background-color: #222222;
color: #FFFFFF;
padding: 5px;
position: absolute;
right: 16%;
   font-family: "Quicksand", sans-serif;

}


/* @media(max-width:636px) {
  .mainparent {
  position: absolute;
  top: 1600%;
  width: 100%;
  display: grid;
  }
} */

@media (max-width:636px) {

}






.div13 {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
 gap:6%;
 margin-top: 60px;
 font-family: "Quicksand", sans-serif;


}

@media( max-width: 644px)and(min-width:100px) {
.div13 {
  display: block;
  margin-top: 540%;
}
}









.div14 {
  margin-left: 20%;
  margin-top: 3%;
}
@media(max-width:100%) {
  .div14 {
    display: block;
    font-size: 2rem;
    text-align: center;
  }
}



 .head1{
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight:600 ;
  font-size: 29px;
  
}
.lastp {
  font-size: 12px;
  color: #000000;
    font-family: "Quicksand", sans-serif;
    margin: 0px 0px 20px;
    margin-top: 30px;
}


.lastp1 {
  margin-top: 2px;
   font-size: 12px;
  color: #000000;
    font-family: "Quicksand", sans-serif;
}


.strong1 {
  font-weight: 600;
  font-family: "Quicksand", sans-serif;
  font-size: 24px;
 
  
}
.div15 {
text-align: center;
 margin-top: 30px;
}


.marquee {
  font-family: "Quicksand", sans-serif;
   display: flex;
   margin-top: 40px;
   
}


.marqueeimg {
  height: 45px;
  margin-left: 40px;
}


.span22 {
   font-family: "Quicksand", sans-serif;
   font-size: 24px;
   font-weight: 650;
}

.div16 {
  text-align: center;
  margin-top: 50px;
}

.div17 {
  display: flex;
   height: 404px;
   margin-top: 40px;
   
}
@media(max-width:822px) {
  .div17 {
    display: block;
  }
}

.lastimg1:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.lastimg2:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.lastimg3:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.lastimg4:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.lastimg5:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.lastimg6:hover {
  transform: scale(1.03);
  cursor: pointer;
}

 

.lastimg1 {
  width: 350px;
}
 .lastimg2 {
  width: 350px;
}
 .lastimg3 {
  width: 350px;
}
 .lastimg4 {
  width: 380px;
}
 .lastimg5 {
  width: 350px;
}
 
 .lastimg6 {
  width: 350px;
}
 
















.span23 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 2px;
  border-bottom: 1px dotted;
  color: #191919;
  font-family: "Quicksand", sans-serif;
}

.span23:hover {
  color: #F4994B;
}


.div18 {
  margin-top: 30px;
  margin-left: 70px;

}

@media(max-width:822px) {
  .div18 {
    display: block;
    margin-top: 620%;
    flex-wrap: wrap;
    align-items: center;

  }
}

/*                            last cards                  */
@media(max-width:352px){
  .comment1 {
   display: block;
  }



}
.div19 {
  display: flex;
 gap: 10px;


}
.comment1 {

background-color: #F8F9FA;
font-size: 12px;
height: 200px;
width: 330px;
font-family: "Quicksand", sans-serif;
border-radius: 5px;
padding: 10px;
margin-top: 40px;

}
.img33 {
  height: 100px;
  position: absolute;
  top: 587.5%;
}

.img1div {
  height: 80px;
  border: 1px solid black;
  width: 95px;
  margin-left: 10px;
  border-color: #878787;
  margin-top: 10px;
  border-radius: 7px;
}
.right {
  vertical-align: baseline;
  margin-top: 10px;
  margin-left: 10px;
}

.s1 {
  margin-left: 50px;
}
.rightleft {
  display: flex;
}
.downdiv {
  margin-top: 10px;
  margin-left: 10px;
}

.s2 {
  font-size: 14px;
}
.s3 {
  color: #0000FF;
}
.s3:hover {
  color: #F4994B;
}


.img34 {
  height: 85px;
  margin-top: 15px;

}
.img36 {
  height: 75px;
  margin-left: 10px;
  margin-top: 25px;
}

/*                           footer                        */

@media(max-width:822px) {

.footer {
 cursor: default;
 padding: 50px 230px 0px;
 font-family: "Quicksand", sans-serif;
 background-color: #F6F6F8;
 margin-top: 60px;
 height: 530px;
}
.foot1 {
  display: flex;
}



.lastli{
  text-align: left;
   cursor: pointer;
   color: #878787;
   font-size: 14px;
   font-family: "Quicksand", sans-serif;
  
margin-top: 15px;

}

.lasts1:hover {
  color: #F4994B;
}

.li2 {
  font-size: 16px;
   font-family: "Quicksand", sans-serif;
   color: #222222;
   cursor: default;
   text-align: left;
}

.ul3 {
  margin-left: 80px;
}

.ul4 {
  margin-left: 90px;
}
.ul5 {
  margin-left: 160px;
}

.subs {
  border-radius: 46px;
  border-width: 1px;
  border-style: solid;
  border-color: #DDDDDD;
  padding: 13.8px;
  width: 100px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  position: absolute;
  top: 634%;
  left: 73.1%;
  background-color: #222222;
  color: #FFFFFF;
  font-family: "Quicksand", sans-serif;

}
input {
 height: 45px;
 width: 350px;
padding: 10px;
 border-radius: 46px;
 
 border: transparent;
 font-family: "Quicksand", sans-serif;
 margin-top: 20px;
}

.subs:hover {
  background-color: #F7943D;
}
.lastimg {
  margin-top: 40px;
}

.spancolor {
  color:#F4994B;
}
.lastp2 {
  font-size: 14px;
  font-family: "Quicksand", sans-serif;
}
.lastimage {
  margin-left: 50%;
  height: 40px;
}
.b1 {
  font-size: 20px;
  font-family: "Quicksand", sans-serif;
}
.span24 {
  margin-left: 50%;
 
}
.fa-greater-than {
  position: absolute;
  top: 581.3%;
  right: 12.6%;
}
.fa-less-than {
  position: absolute;
  top: 581.3%;
  right: 14.2%;
}
.fa-circle {
  font-size: 23px;
}

body {
  height: 100vh;
  width: 100%;
}

@media(max-width:1046px) {
  body {
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
display: block;
  }
}}