@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@100&display=swap');
:root{
    --orange: #ff9500;
    --white-color:#fff;
    --black-color:#333;
    --light_color:rgba(0,0,0,.3);
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'sans-serif';
  box-sizing: border-box; 
  outline: none;
  border: none; 
   transition: 2s linear;
   text-decoration: none;
  
}
html{
    font-size: 62.5%;
     /* overflow-x: hidden;  */
    scrollbar-width: normal;
    scrollbar-color: var(--black-color);
    scroll-padding-top: 7.5rem;
    scroll-behavior: smooth;
}
html::-webkit-scrollbar {
    width: 1rem;               /* width of the entire scrollbar */
  }
  
  html::-webkit-scrollbar-track {
    background: var(--white-color);        /* color of the tracking area */
  }
  
html::-webkit-scrollbar-thumb {
    background-color: var(--black-color);
    border-radius: 5rem;
  }
  body{
      background-color: #fff;
     

  }
html,body{
    max-width: 100%;
    overflow-x: hidden;
}
  header{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--white-color);
      border-bottom: .1rem solid var(--light_color);
      padding: 1.5rem 9%;
  }
  header .logo{
      text-transform: uppercase;
      font-weight: bolder;
      color: var(--black-color);
      font-size: 3rem;
      margin: 1rem;
  }
  header form{
      display: flex;
      align-items: center;
      width: 40rem;
      border-radius: 5rem;
      height: 5rem;
       background-color: #333;
      overflow: hidden;

  }
  header form input{
      width: 100%;
      height: 100%;
      background: none;
      font-size: 1.7rem ;
      color: var(--white-color);
      padding: 0 2rem;
      text-transform: none;
  }
  header form label{
      font-size: 2rem;
      padding-right: 2rem;
      color: var(--white-color);
      cursor: pointer;
  }
  header form label:hover{
      color: var(--orange);
  }
  header .icons div,
  header .icons a{
      height: 4rem;
      width: 4rem;
      font-size: 1.7rem;
      line-height: 4rem;
      background: var(--black-color) ;
      color: var(--white-color) ;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      margin-right: .7rem;
  }
  header .icons div:hover,
  header .icons a:hover{
      color: #fff;
      transform: rotate(360deg);
      background-color: var(--orange);
  }
header.active{
    position:fixed ;
    top: 0;
    left: 0;
    z-index: 100;

}
section {
    padding: 2rem 9%;
}

  /* Our main images-slideshow container */
  .swiper-wrapper{
    margin: auto;
  }

  

  .home{
    display:flex ;
    justify-content: center;
    flex-direction: column;
  }
  .content{
    float: left;
  }
  .image{
    margin: auto;
    width: 45%;
    float: right;
  }
.home .swiper-container .swiper-wrapper .slide{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    padding-top: 9rem;
    transition: display 1s;
 
}
.home .home-slider .slide .content{
    flex: 1 1 45rem;
 
}
.home .home-slider .slide .image{
    flex: 1 1 45rem;
}
.home .home-slider .slide .image img{
    width: 100%;
}
.home .home-slider .slide .content span{
    color: #ff9500;
    font-size: 2.5rem;
}
.home .home-slider .slide .content h3{
    color: black;
    font-size:7rem ;
}
.home .home-slider .slide .content p{
    color: var(--black-color);
    font-size:2.2rem;
    padding: 5rem 0;
    line-height: 1.5;
    word-wrap: break-word;
}

.btn{
    margin: 1rem 0 1rem 0;
    font-size: 1.7rem;
    color: #fff;
    background:var(--black-color);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.8rem 3rem;
    opacity: 0.8;

}

.btn:hover{
    background-color: var(--orange);
    letter-spacing: 0.1rem;
}
.pagination{
    width: 100%;
    position: relative;
    padding: 2rem;
    
}
.slider-btn{
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 8px 16px;
    margin-top: -22px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;

  }
   
/* setting the position of the previous button towards left */
 .left {
    left: 2%;
  }
   /* setting the position of the next button towards right */
  .right {
    right: 2%;
  }
   
  /* On hover, adding a background color */
  .left:hover,
  .right:hover {
    color: rgb(255, 253, 253);
    background-color: rgba(0, 0, 0, 0.8);
  
  }
  .dot-wrapper{
    /* display: block;
    top: 50rem; */
    position: relative;

  }
  .dot{
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: rgb(133, 132, 132);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    
  }
  
  .active, .dot:hover {
    background-color: #2c2c2c;
  }
section #features{
    margin: 0;
}


.features{
    margin: 5rem 0 1rem 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: rgb(224, 190, 127);
    padding: 1rem 0 0 1rem;
}
.f{
    display: flex;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 1rem; 
    align-items: center;
    justify-content: space-between;
}
.features .f .fas{
    display: flex;
    align-items: center;
    margin: 0.5rem;
    justify-content: space-around;
    background-color: #333;
    color: #fff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}
.f p{
    font-size: 1.3rem;
}
.features .fas:hover{
    color: var(--orange);
    transform: rotate(360deg);
}
.why-buy{
    margin: 2rem 0 2rem 0;
}
.why-buy h2{
    letter-spacing: 0.5rem;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 1000;
    line-height: 5rem;
    margin-bottom: 1rem;
}
.why-buy p{
    text-align: center;
    font-size: 2rem;
    line-height: 3rem;
}
 .range, .specials{
    display: flex;
    align-items: center;
    justify-content: space-around;
} 
.range-wrapper , .special-wrapper{
    display: flex;
    align-items: center;
    font-size: 1.9rem;
    text-transform: uppercase;
}
.range .r, .specials .r{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem 3rem;
    border: 0.01rem var(--black-color) solid;
    border-radius: 1.5rem;
    box-shadow: 7px 5px 20px rgb(211, 190, 152) ;
    transition: backgroundColor 1s ,color 1s;
    font-weight: 600;
}
.range .r:hover, .specials .r:hover{
    color: var(--white-color);
    background-color:rgb(240, 199, 124);

}
.image-wrapper{
    margin: 2rem 0 2rem 0 ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    
}
.image-wrapper .ri{
    position: relative;
    margin: 1rem 0 1rem 0;
    object-fit: contain;
    width: 22rem;
    height:22rem;
   text-align: center;
}
.image-wrapper .ri img{

    width: 22rem;
    height:22rem;
    box-shadow: 7px 5px 20px rgb(211, 190, 152) ;
    border-radius: 13rem;
   

    
}
.image-wrapper .ri .img-des{
    top: 17rem;
    left: 5.5rem;
    font-weight: 900;
    position:absolute;
    font-size: 1.5rem;
    width: 10rem;
    margin: 0.5rem 0 1rem 0 ;
    padding: 0.4rem 0 0.4rem 0;
    background-color: #e9c99c;
    border-radius: 20%;
    }
    .Featured-products h2{
    margin: 3rem 0 2rem 0;
    letter-spacing: 0.5rem;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 1000;
    line-height: 5rem;
    margin-bottom: 1rem;
    }
    .Featured-products p{
        text-align: center;
        font-size: 2rem;
        line-height: 3rem;
        margin-bottom: 2rem;
    }
    
    
 .features-swiper-wrapper{
    display: block;
  position: relative;
    flex-wrap: wrap;
    flex-direction: row;
    /* gap: 2.5rem; */
    text-align: center;
    align-items: center;
    justify-content:space-between;
    transition: 2s;
 
}
.features-swiperslider .features-swiper-wrapper .feature-slide{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    /* background-color: #e9c99c; */
    display: none;
    transition:  2s;
}

.feature-container img{
    
    width: 23rem;
    height: 23rem;
    margin-bottom: 0.5rem;
    border-radius: 0.7rem;
 

}
 .feature-container{
 /* display: flex; */
 margin: 3rem 0 2rem;
 width: 25rem;
 height: 36rem;
  /* border: 0.004rem solid var(--black-color); */
  border-radius: 0.7rem;
  text-align: center;
 position: relative;
  overflow: hidden;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 7px 5px 20px rgb(211, 190, 152) ;
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
  display: block;
  
  
}
 

.feature-container .icons  {
    display: flex;
    flex-flow: column;
    position: absolute;
    top: 5rem; left: 1rem;
    opacity: 0.8;
   
}
.feature-container .discount{
    /* display: flex; */
    flex-flow: column;
    position: absolute;
    top: 1rem; right: 1rem;
    border-radius: 20%;
    padding: 0.5rem;
    font-size: 1.5rem;
    /* border: 0.1rem solid black; */
    background-color: #717171;
    /* background-color: rgb(224, 190, 127); */
    color: #fff;
   
    
}
.feature-container .icons a{
    line-height: 3.5rem;
    width: 3.5rem;
    line-height: 3.5rem;
    font-size: 2rem;
    Color: var(--black-color);
    border: 0.006rem solid var(--black-color);
    background: #fff;
    margin-top: 0.5rem;
    border-radius: 1rem; 
    /* position: relative; */
   

}
.feature-container .stars{
    color:  rgb(224, 190, 127);
}

  .feature-container .content{
   margin: 0 1.5rem 0 3.7rem;
    justify-content: center;
    align-items: center;
  }
 .feature-container:hover{
    transform: scale(1.05);
} 
.feature-container :hover .icons a{
    left: 1rem;
}
footer{
    margin-top: 3rem;
    width: 100%;
    padding: 7rem 5% 2rem 5%;
    color: #ccc;
    position: absolute;
    background: linear-gradient(to right,#00093c,#2d0b00);
    line-height: 3rem;
    border-top-left-radius: 125px;
    font-size: 1.5rem;
    font-family: 'Roboto', 'sans-serif';
}
.columns{
    display: flex;
    justify-content: space-around;
    font-family: 'sans-serif';
}
.comp-desc{
    width: 40rem;
    line-height: 2rem;;
}

footer .logo{
    margin: 1rem 0 2.7rem 0;
}

footer div h3{
    margin-bottom: 2.6rem;
}
footer ul li{
    list-style: none;
    font-style: normal;
    text-decoration: none;
    color: #ccc;

}
footer ul li a{
    text-decoration: none;
    color: white;
}
footer form{
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}
form input{
    width: 100%;
    background:transparent;
    color: #ccc;
    border: 0;
    outline: none;
}
form button{
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}
form button .fas{
    font-size: 16px;
    color: #ccc;
}
.social-media-icons .fab{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #000;
    background: #fff;
    margin-right: 15px;
}
hr{
    /* width: 90%; */
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 2rem auto;
}
.copyright{
    text-align: center;
}
.col{
    position: relative;
}
.underline{
    width: 60%;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: absolute;
   
    left: 0;
   
}
.underline span{
    width:15px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}
@keyframes moving{
    0%{
        left: -20px;
    }
    100%{
        left: 100%;
    }
}
  @media (max-width: 991px) {
      html{
          font-size: 55%;
      }
      header{
          padding: 1.5rem;
      }
  }

  @media (max-width: 768px) {
    header{
        flex-flow: column;
    }
    header form{
       width: 100%;
       margin: 2rem 0;
    }
    
  
}
  @media (max-width: 750px) {

    html{
        font-size: 50%;
    }
    header{
        padding: 1.5rem;
    }
    .home .home-slider .slide .content a{
       padding:  1rem 2rem 1rem 2rem;
       font-size: 2rem;
       
    }
    .home .home-slider .slide .content{
        flex: 100%;
        
    }
    .home .home-slider .slide .content h3{
        font-size: 5.5rem;
    }

    .home .home-slider .slide .image{
        flex: 100%;
        width: 85%;
        float: left;
        margin-top: 1rem;
        /* padding: 2rem;
        background-color: #ff9500; */
      
    }
    .f p{
        font-size: 1rem;
    }
    .features .f .fas{
        width: 2.5rem;
        height: 2.5rem;
    }
   
    .r{
        width: 23%;
        font-size: 1.1rem;
        font-weight: 800;
        padding: 0.5rem;
        
    } 
    .range-availabe{
        width: 100%;
        margin: 0.5rem;
        padding: 0;
    }
    .range{
        width: 100%;
    }

    .ri{
        width: 100%;
    }
    .image-wrapper .ri .img-des{
        
        padding: 0.2rem 0 0.2rem 0;
        width: 5rem;
        font-size: 1.2rem;
        margin: 0;
        left: 20%;
        font-weight: 900;
        
    }
    .image-wrapper .ri img{
        width: 96%;
        height: 96%;
        border-radius: 45%;
        /* padding: 1rem;
        background-color: #00093c; */
    }
    #speciality{
        margin: 0.5rem;
        padding: 0.5rem;
    }

    .swiper-container{
        width: 100%;
        font-size: 1rem;
        
       
    }
    .swiper-container img{
        width: 70%;
       /* height: 90%; */
        padding: 0;
    }
    .swiper-container .btn{
        width: 100%;
        font-size: 1.2rem;
        background-color: #2d0b00;
        height:.1.5rem ;
        padding: 0.3rem;
    }
    .feature-container .discount {
        padding: 00.3rem;
        font-size: 1.2rem;
        right: 0.6rem;

    }
    .feature-container .icons a{
        left:0.6rem;
        width: 2.6rem;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1.6rem;
    }
    .feature-container i{
        width: 2.2rem;
        height: 2.2rem; 
        line-height: 2.2rem;
    
    }
    footer{
        bottom: unset;
        
    }
     .columns{
       
        flex-direction: column;
    }
  

}