@font-face{
font-family: "Nunito";
src: url(fonts/Nunito-Regular.ttf);
}
:root{
    --orange:#f58d3d;
    --black:#2c2c54;
    --mainSpacing: 0.1rem;
    --mainTransition: all 0.3s linear;
    --primaryColor: #f58d3d;
    --mainWhite: #fff;
    --mainBlack: #222;
    --mainGrey: #ececec;
    
}
*{
    font-family: "Nunito", sans-serif;
    margin:0; padding:0;
    box-sizing:border-box;
    outline:none; border:none;
    text-decoration:none;
    text-transform:capitalize;
    transition: all .2s linear;
     
}
*::selection{
    background:var(--orange);
    color:#fff;
}
html{
    font-size:60%;
    overflow-x:hidden;
    scroll-padding-top:6.5rem;
    scroll-behavior:smooth;
}
.header-1{
    display:flex;
    background:#eee;
    align-items: center;
    padding:1.3rem 6%;
    justify-content:space-between;
    
}
.logo{
    color:var(--black);
    font-size:3.5rem;
    font-weight:bolder;
}

.logo img{
    padding-right:.5rem;
    width:40px;
    
}
.header-1 .search-box{
    display:flex;
    height: 4rem;
}
.header-1 .search-box #search-box{
    height:100%;
    width:100%;
    padding:1rem;
    font-size:2rem;
    color:#333;
    border: .1rem solid rgba(0,0,0,.3);
    text-transform:none;
}
.header-1 .search-box label{
    height:100%;
    width:6rem;
    font-size:2rem;
    line-height:4rem;
    color:#fff;
    background:var(--orange);
    text-align:center;
    cursor:pointer;

}
.header-1 .search-box label:hover{
background:var(--black);
}
.header-2 {
    display:flex;
    background:#fff;
    align-items: center;
    padding:2rem 9%;
    justify-content:space-between;
    box-shadow:0.5rem 1rem rgba(0,0,0,.1);
    position:relative;
}
.active{
    position:fixed;
    top:0; left:0; right:0;
    z-index:10000;
}
.header-2 .navbar a{
padding: .5rem 1.5rem;
font-size: 1.8rem;
border-radius: .5rem;
color:var(--black);
}
.header-2 .navbar  a:hover{
background:var(--orange);
color:#fff;
}
 .icons .fa:hover{
    color:var(--orange);
}
.header-2 .icons i{
    font-size: 2.5rem;
    color:var(--black);
    padding-left:1rem;
}  
/* Cart no*/
.icons .fa-cart-plus{
position:relative;
}
.cart-no{
    position:absolute;
    background:var(--orange);
    color:#fff;
    padding: 0 .5rem;
    border-radius: 30%;
    top: 6px;
    right: 19.5rem;
    font-size: 1.4rem;
}

/*cart*/

#bar{
    font-size:2rem;
    border-radius:.3rem;
    border:.1rem solid var(--black);
    color:var(--black);
    padding:.8rem 1.5rem;
    cursor:pointer;
    display:none;
}
 .first, .second{
    padding:1rem 9%;
}
.home{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.home .image{
    flex:1 1 40rem;
    padding-top: 0.1rem;
    
}
.home .image img{
    width:80%;
    margin-left:-20px;

}
.home .content{
    flex:1 1 40rem;
}
.home .content span{
    font-size:3rem;
    color:#666;
}
.home .content h3{
    font-size: 4rem;
    color:var(--black);
}
.btn{
display:inline-block;
margin-top:1rem;
background:var(--orange);
padding:.8rem 3rem;
font-size:1.8rem; 
color:#fff;
cursor:pointer;
text-align:center;
}
.btn:hover{
    background:var(--black);
}

.banner-container{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
}
.banner-container .banner{
    flex:1 1 40rem;
    height:25rem;
    
    overflow:hidden;
    position:relative;

}
.banner-container .banner img{
    width:110%;
    height:100%;
    object-fit: cover;
}
.banner-container .banner .content{
position:absolute;
top:40%; left:4%;
transform: translateY(-50);
}
.banner-container .banner .content h3{
    font-size: 3rem;
    color:var(--black);

}
.banner-container .banner .content p{
    font-size: 2rem;
    color:#333;
    
}
.banner-container .banner img:hover{
transform: scale(1.2) rotate(-5deg);
}
.heading{
    text-align:center;
    text-transform:uppercase;
    color:var(--black);
    font-size:3rem;
    padding:2rem;
    padding-bottom:3rem;
}
.products {
    padding: 3rem 0;
     }

.box {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    /* grid-template-columns: repeat(4, 1fr); */
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem;
  }
  .img-box {
    position: relative;
    overflow: hidden;
  }
  .cart-btn {
    position: absolute;
    top: 70%;
    right: 0;
    background: var(--orange);
    border: none;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    letter-spacing: var(--mainSpacing);
    font-weight: bold;
    transition: var(--mainTransition);
    transform: translateX(101%);
    cursor: pointer;
  }
  .cart-btn:hover {
    color: var(--mainWhite);
  }
  .fa-shopping-cart {
    margin-right: 0.5rem;
  }
  .img-box:hover .cart-btn {
    transform: translateX(0);
  }
  .store-img {
    display: block;
    width: 100%;
    min-height: 12rem;
    transition: var(--mainTransition);
  }
   .size{
      width:70%;
      display:block;
      margin-left:6rem
  }
  .img-box:hover .store-img {
    opacity: 0.5;
  }
  
  .product h3{
    text-transform: capitalize;
    font-size: 1.7rem;
    font-weight: normal;

    margin-top: 1rem;
    letter-spacing: var(--mainSpacing);
    text-align: center;
  }
  
  .product h4 {
    margin-top: 0.6rem;
    letter-spacing: var(--mainSpacing);
    color: var(--primaryColor);
    text-align: center;
    font-size:1.6rem;
  }
  
/* --------------- Cart ---------------- */
.cart-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: var(--mainTransition);
    background: rgba(129, 87, 47, 0.3);
    z-index: 2;
    visibility: hidden;
  }
  .cart {
    position: fixed;
    top: 4rem;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    z-index: 3;
    background: rgb(231, 226, 221);
    padding: 1.5rem;
    transition: var(--mainTransition);
    
     /* transform: translateX(100%);   */
  }
  .showCart {
    transform: translateX(0);
  }
  .transparentBcg {
    visibility: visible;
  }
  @media screen and (min-width: 768px) {
    .cart {
      width: 30vw;
      min-width: 450px;
    }
  }
  
  .close-cart {
    font-size: 3rem;
    cursor: pointer;
  }
  .cart h2 {
    text-transform: capitalize;
    text-align: center;
    letter-spacing: var(--mainSpacing);
    margin-bottom: 0;
    margin-top:-1rem;
    font-size:2.5rem;
  }
  /*---------- Cart Item -------------------- */
  .cart-item {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 1.5rem;
    margin: 0rem 0;
  }
  .cart-item img {
    width:80%;
    height: 85%;
  }
  .cart-item h4 {
    font-size: 1.6rem;
    text-transform: capitalize;
    letter-spacing: var(--mainSpacing);
  }
  .cart-item h5 {
    margin: 0.5rem 0;
    letter-spacing: var(--mainSpacing);
    font-size:1.6rem;
  }
  .item-no {
    text-align: center;
    font-size:1.5rem;
  }
  .remove {
    color: grey;
    cursor: pointer;
    font-size:1.6rem;
  }
  
  .cart-item .fa-chevron-down{
    color: var(--primaryColor);
    cursor: pointer;
    font-size:1.8rem;
  }
  .cart-item .fa-chevron-up{
    color: var(--primaryColor);
    cursor: pointer;
    font-size:1.8rem;
  }
  /*---------- End of Cart Item -------------------- */
  
  .cart-footer {
    margin-top: 2rem;
    letter-spacing: var(--mainSpacing);
    text-align: center;
  }
  .cart-footer h3 {
    text-transform: capitalize;
    margin-bottom: 1rem;
    font-size:1.7rem;
  }
  
  /* --------------- End of Cart ---------------- */
  .deal{
    background:url(images/deal.jpg) no-repeat;
    background-position:center;
    background-size:cover;
    padding-top:7rem;
    padding-bottom: 7rem;
     }
    .deal .content{
       max-width:50rem;
     }
     .deal .content .title{
     font-size:4rem;
     color:var(--black);
     }
    
.deal .content p{
  font-size:2rem;
  font-weight:600;
  padding:1rem 0;
  color:#222;
  text-transform:none;
}
.deal .content .count-down {
  display:flex;
  padding:.5rem 0; 
  gap:1rem;
}
.deal .content .count-down .boxs{
  width:9rem;
  text-align:center;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  border: .1rem solid rgba(0,0,0,.3);
}
.deal .content .count-down .boxs h3{
  background:#fff;
  color:var(--black);
  height:7rem;
  line-height: 7rem;
  width:100%;
  font-size:5rem;
}
.deal .content .count-down .boxs span{
  background:var(--black);
  color:#fff;
  width:100%;
  padding:.5rem;
  font-size:2rem;
  display:block;
}
.contact{
  padding-bottom:3rem;
}
.contact .heading span{
  text-align:center;
  text-transform:uppercase;
  color:var(--orange);
  font-size:3rem;
  padding:1rem;
  padding-bottom:3rem;
}
.contact .row{
display:flex;
flex-wrap:wrap;
border-radius: 2rem;
border: .5rem solid rgba(0,0,0,.1);
overflow:hidden;
box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
.contact .row .img{
flex: 1 1 40rem;
}
.contact .row .img img{
  height:100%;
  width:100%;
  object-fit: cover;
  }
  .contact .row form{
    flex: 1 1 40rem;
    padding: 2rem 4rem;
  }
  .contact .row form .inputbox{
padding: 1rem o;
  }
  .contact .row form .inputbox h3{
color:var(--black);
padding: .5rem 0;
font-size: 2rem;
  }
  .contact .row form .inputbox input, .contact .row form .inputbox 
  textarea{
    width:100%;
    padding:1.5rem;
    font-size:1.5rem;
    border: .1rem solid rgba(0,0,0,.1);
    text-transform:none;
  }
  .contact .row form .inputbox textarea{
    resize:none;
    height:15rem; 
  }
.about .row{
  display:flex;
  text-align: center;
  justify-content:center;
  flex-wrap:flex;
}
.about .row .img{
  flex: 1 1 40rem;
}
.about .row .img img{
  width:100%;
border-radius:5%;    
}
.about .row .content{
  flex: 1 1 40rem;
  padding: 2rem 1rem;
}
.about .row .content h3{
  color:var(--black);
  padding: .5rem 0;
  font-size: 2rem;
}
.about .row .content p{
  color:rgb(94, 94, 94);
  padding: 1rem 0;
  font-size: 1.7rem;
}
.subscribe{
  background:url(images/update.jpg)no-repeat;
  background-size: cover;
  background-repeat: center;
  text-align:center;
  padding:5rem 2rem;
}
.subscribe h3{
  font-size:3rem;
  color:var(--black);
}
.subscribe form{
  max-width:55rem;
  display:flex;
  align-items:center;
  margin:1rem auto;
  padding:1.5rem;
  background:rgba(0,0,0, .1);
}
.subscribe form .put{
  width:100%;
  padding:.7rem 1.5rem;
  font-size:1.7rem;
  color:#333;
  text-transform:none;
}
.subscribe form .btn{
  margin-top: 0;
}
.footer{
  min-height:auto;
  padding-top:2rem;
}
.foot-box{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

}
.footer .foot-box .foot{
  margin:2rem;
  flex: 1 1 25rem;
}
.footer .foot-box .foot .logo {
height:3rem; 

}
.footer .foot-box .foot p{
  text-transform:none;
font-size:1.7rem;
padding:.5rem 0;
}
.footer .foot-box .foot p i{
padding-right: 1rem;
color:var(--black);
}
.footer .foot-box .foot h3{
font-size:2.5rem;
padding:1rem 0;
}
.footer .foot-box .foot a{
  height:5rem;
  width:5rem;
  line-height:4.8rem;
  text-align:center;
  border: .1rem solid rgba(0,0,0,.1);
  border-radius:50%;
  font-size:2rem;
  margin-right:1rem;
    }
    .footer .foot-box .foot .green{
      color:rgb(6, 190, 6);
    }
    .footer .foot-box .foot .blue{
      color:rgb(21, 161, 216);
    }
    .footer .foot-box .foot .purple{
      color:rgb(204, 32, 204);

    }
  .footer .foot-box .foot a:hover{
    background:#999;
    color:#FFF;
  }
.footer .credits{
  padding: 2rem 1rem;
  text-align:center;
  border-top:.1rem solid rgba(0,0,0,.1);
  font-size:1.8rem;
  font-weight: 500;
  text-transform:none;
}
.footer .credits span{
color:var(--black);
font-weight: 600;
}
.footer .credits p{
  text-transform:none;
}


/* Media query*/ 

@media(max-width:1200px){
    html{
        font-size:50%;
    }
   }
   @media(max-width:1025px){
    .cart-no{
        right: 18.5rem;
    }
   }
     
@media(max-width:990px){
.header-1, .header-2{
    padding:1rem;
}
.section{
    padding: 2rem;
}
.cart-no{
    top: 6px;
    right: 8.6rem;
    font-size: 1.4rem;
}
} 
@media(max-width:768px){
    #bar{
       display:initial; 
        }
        .logo img{
          display: none;
        }
        .header-1 .search-box{
         
            height: 5rem;
        }
        .header-1 .search-box label{
            width:7rem;
            font-size:2.5rem;
            line-height:5rem;
       }
       .home .image img{
        width:80%;
        margin-left:2rem;
        margin-top:-1rem;
               }     
.navbar{
    width: 200px;
    background: #eee;
    height:60vh;
    top: 41px;
    transition:0.5s;
    position:absolute; 
    transition: 0.5s;
    margin-left:-10px;
    display:none;
}

.navbar a{
     color:var(--black);
     line-height: 20px;
     font-weight:bold;
     margin: 30px 15px;
     list-style:none;
     display:list-item;
}
.home .content{
    text-align:center; 
}
.home .content span{
  font-size:2.5rem;
}
.heading{
  font-size:2.7rem;
}
.contact .heading span{
  font-size:2.7rem;
}
.home .content h3{
    font-size:3rem;
}
section{
    padding:1rem 9%;
}
.cart-no{
    top: 3px;
    right: 8rem;
    font-size: 1.4rem;
}
.first, .second{
  padding:1rem 8%;
}
.box {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    /* grid-template-columns: repeat(4, 1fr); */
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem;
  }
  .size{
    width:90%;
    display:block;
    margin-left:2rem
}

.cart-btn{
    font-size:1.5rem;
    border-radius:7%;
}
.deal{
  background-position:left;
}
.deal .content{
max-width:100%;
text-align:center;
}
.deal .content .count-down{
  justify-content: center;
}
.subscribe h3{
  font-size:2.2rem;
  }
  .footer .foot-box .foot p{
    font-size:1.9rem;
  }
 .logo{
   margin-bottom:-1.3rem;
   font-size:2.5rem;
 }
 .deal .content .title{
   font-size:3.4rem;
 }
}
@media(max-width:450px){
    html{
        font-size:45%;
    }
    .header-1{
        flex-flow:column;
    }
    .header-1 .search-box{
        width:100%;
        margin-top:2rem;
    }
    .logo img{
        padding-right:.3rem;
        width:25px;
        
    }
    .deal .content .count-down .boxs h3{
      font-size:4rem;
    }
    .deal .content .count-down .boxs span{
      font-size:1.7rem;
    }
}