@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  font-family: "Poppins", sans-serif;
    font-family: "Amiri", serif;
}
html,
body{
overflow-x: hidden;
}
:root{
    --primary-color: #ffffff;
    --secondary-color:#000000;
     --tertiary-color: #95A986;
}
/* common class  */
.container{
    max-width: 1749px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
.container2{
    max-width: 1490px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
a{
    display: inline-block;
    text-decoration: none;
}
ul{
    list-style-type: none;
}
.row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.col-25{
     width: 25%;
    padding: 0 15px;
}
.col-33{
    width: 33.33%;
    padding: 0 15px;
}
.col-50{
    width: 50%;
    padding: 0 15px;
}
.col-100{
    width: 100%;
    padding: 0 15px;
}


 /* topbar part */
 .hdr-sec{

    position: absolute;
    width:100% ;
 }
 .topbar{
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-align: center;
 }
 .navbar{
    padding: 15px 0px;
    
 }

 
nav,.navbar-collapsed,
 .navbar-collapsed > ul{
    display: flex;
    align-items: center;

 }
 .navbar-collapsed{
 margin-left: auto;
 
   
 }
 .nav-logo{
    max-width: 312px;
    
 }
.nav-logo > a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-links{
    margin-left: 30px;
    color: var(--primary-color);
    font-size: 16px;
     font-family: "Poppins", sans-serif;
}
.icons{
      display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.search,
.user,
.cart{
   color: var(--primary-color);
}
.search{
    margin: 0 0 0 70px;
}
hr{
    height: 44px;
    color: #BDBDBD;
}
.search,
.user,
hr {
   margin: 0 0 0 20px;
}
.cart{
    font-size: 16px;
     font-family: "Poppins", sans-serif; 
}
.navbar-toggler{
    display: none;
}
/* banner section  */
.banner-sec {
    padding: 30px 0;
    min-height: 100vh; 
   background: url("../assets/banner\ img.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

}
.banner-box{
    position: absolute;
      top: 30%;
    left: 30%;
   
    background-color: var(--primary-color);
    max-width: 650px;
    border-radius: 16px;
}
.banner-child{
    position: relative;

}
.banner-child h1{
    color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 50px; 
    text-transform: capitalize;
    text-align: center;
    padding: 50px 0px 0px 0px;
}
.banner-child p{
    color: #5e5e5e;
    font-family: "Poppins", serif;
    font-size: 16px; 
    /* text-transform: capitalize; */
    text-align: center;
}
.banner-btn{
     text-align: center;
    margin: 0 auto;
}

.primary-btn{
    background-color: var(--tertiary-color);
    color: var(--secondary-color);
     font-family: "Poppins", serif;
    font-size: 18px; 
    border-radius:60px ;
    padding: 15px 38px;
    margin: 25px 0px 60px 0px;
}
.primary-btn:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
      transition: 0.5s linear;
    transform: translateY(2px);
}
/* product section  */
  .product-sec{
    padding: 100px 0 ;
  }
  .product-sec p{
     color: var(--tertiary-color);
    font-family:  "Poppins", sans-serif;
    font-size: 16px;
    text-transform: capitalize;
  }
  .product-sec h2{
     color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 45px;
    text-transform: capitalize;
  }
 .rating{
    color: var(--tertiary-color);
 }
 .product-details{
    color: var(--tertiary-color);
    font-family: "Amiri", serif;
    font-size: 20px;
 }
 .product-price{
     color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 30px;
 }
 /* about section  */
 .about-img{
    position: relative;
 }
  .image-1{
    max-width: 580px;
     border-bottom-right-radius: 30px;
 } 
 .image-1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .image-2{
    position: absolute;
    top: 250px;
    left: 50%;
    max-width: 326px;
     border-top-right-radius: 30px;

 }
  .image-2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .about-content h2{
      color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 45px;
    font-weight: 400;
    text-transform: capitalize;
    max-width: 330px;
    line-height: 1.2;
 }
 .about-content p{
     color: var(--tertiary-color);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    text-transform: capitalize;
    max-width: 580px;
 }
 .secondary-btn{
    background-color: var(--tertiary-color);
    color: var(--secondary-color);
    border-radius: 50px;
     font-family: "Poppins", sans-serif;
    font-size: 18px;
    padding: 16px 35px;
    margin: 30px 0px;
 }
 .secondary-btn:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
      transition: 0.5s linear;
    transform: translateY(2px);
 }
 /* offer section  */
 .offer-sec{
    padding: 130px  0px;
    /* margin: 0px 0px 0px 39px; */
 }
 .offer-sec p{
     color: var(--tertiary-color);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    text-transform: capitalize;
    margin: 0 auto;
        text-align: center;
 }
 .offer-sec h2{
       color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 45px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0 auto;
        text-align: center;
 } 
 .offer-icon {
 margin: 0 auto;
        text-align: center; 
 }
 .offer-icon1{
    width: 111px;
    height: 111px;
    border-radius: 100px;
    background-color: var(--tertiary-color);
     box-shadow: 2px 2px 20px rgb(74, 70, 70);
    margin: 0px 0px 0px 39px;
 }
 .offer-icon1 img {
  max-width: 41.5px;
    margin: 32px 35px;
 }
 .offer-content h3{
     color: #2c2c2c;
    font-family: "Amiri", serif;
    font-size: 24px;
    text-transform: capitalize;
     margin: 20px 0  0 39px ;
 }
 .offer-content p{
     color: #707070;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    text-transform: capitalize;
     margin: 0px 60px 0px 0px;
 }
 /* arrival section  */
  .arrival-sec{
    background-color: #f6f6f6;
    padding: 50px 0px;
  }
  .arrival-sec p{
     color: var(--tertiary-color);
    font-family:  "Poppins", sans-serif;
    font-size: 16px;
    text-transform: capitalize;
  }
  .arrival-sec h2{
     color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 45px;
    text-transform: capitalize;
  }
 .rating{
    color: var(--tertiary-color);
 }
 .product-details{
    color: var(--tertiary-color);
    font-family: "Amiri", serif;
    font-size: 20px;
 }
 .product-price{
     color: var(--secondary-color);
    font-family: "Amiri", serif;
    font-size: 30px;
 }
 /* footer section  */
 .footer-sec{
     padding: 50px 0px;
 }
 .footer-title{
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    font-family: "Amiri", serif;
 }
 .line{
    width: 60px;
    border: 1px solid #000000;
    margin: 15px 0px;
 }
 .footer-para{
   font-size: 14px;
    font-weight: 400;
    color: #5e5e5e;
    font-family:"Poppins", sans-serif; 
 }
 .text1{
    border-radius:60px;
    width: 300px;
    padding: 10px 0px 10px 23px;
    margin: 15px 0px;
    color: #868686;
    border: 1px solid #868686;
 }
 .footer-btn{
    background-color: #95A986;
    padding: 10px 40px;
     border-radius:60px;
     font-size: 18px;
     font-weight:400 ;
      font-family:"Poppins", sans-serif; 
     text-transform: capitalize;
 }
 .footer-btn:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
      transition: 0.5s linear;
    transform: translateY(2px);
 }
 .footer-links{
       font-size: 16px;
     font-weight:400 ;
      font-family:"Poppins", sans-serif;
      color: #5e5e5e;
 }
 .social-icons a{
    color: #000000;
    margin-right: 36px;
 }
 .social-icons a:hover{
     transition: 0.5s linear;
    transform: translateY(2px);
 }
/* navbar media section  */
@media screen and (max-width:1200px){
    .icons{
        display: none;
}
    .nav-links {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;

        
     }
    .nav-logo{
        max-width: 180px;
    }
    .navbar-toggler{
        display: block;
        margin-left: auto;
        font-size: 1.2rem;
    }
}
/* banner media section  */

@media screen and (max-width:1200px){
    .banner-box{
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
        max-width: 500px;
        left: 20%;
        /* flex-direction: column; */
    }
    .banner-child h1{
       font-size: 35px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-child p{
       font-size: 14px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-btn{
        padding: 5px 15px;
    }
}
@media screen and (max-width:758px){
    .banner-box{
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
        max-width: 400px;
        top: 27%;
        left: 25%;
        /* flex-direction: column; */
    }
 .banner-child h1{
       font-size: 30px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-child p{
       font-size: 12px;
        margin: 0 auto;
        text-align: center;
    }
    .primary-btn{
        padding: 10px 25px;
        margin: 20px 0px 50px 0px;
    }
   
}
@media screen and (max-width:576px){
    .banner-box{
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
         max-width: 330px;
         top: 27%;
        left: 14%; 
        /* flex-direction: column; */
    }
 .banner-child h1{
       font-size: 25px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-child p{
       font-size: 12px;
        margin: 0 auto;
        text-align: center;
    }
    .primary-btn{
        padding: 10px 25px;
        margin: 20px 0px 50px 0px;
    }
   
}
@media screen and (max-width:410px){
    .banner-box{
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
        max-width: 250px;
        top: 32%;
        left: 13%;
        /* flex-direction: column; */
    }
 .banner-child h1{
       font-size: 25px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-child p{
       font-size: 12px;
        margin: 0 auto;
        text-align: center;
    }
    .primary-btn{
        padding: 10px 25px;
        margin: 20px 0px 50px 0px;
    }
   
}
/* product media section  */
@media screen and (max-width:1200px){
    .product-sec p{
        margin: 0 auto;
        text-align: center;
    }
    .product-sec h2{
        margin: 0 auto;
        text-align: center;
    }
    .product-icon{
         margin: 0 auto;
        text-align: center;
    }
    
    .product-c{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
}
@media screen and (max-width:576px){
    .rating{
         margin: 0 auto;
        text-align: center;
        margin-top: 10px; 
    }
    .product-details{
         margin: 0 auto;
        text-align: center;
    margin-top: 15px;
    }
    .product-price{
          margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .product-card img{
        max-width: 270px;
        margin-top: 20px;
    }
}
/* about media section  */
@media screen and (max-width:1200px){
    .about-c{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .image-1{
        max-width: 450px;
         margin: 0 auto;
        text-align: center;
    }
    .image-2{
        top: 60%;
        left: 60%;
        max-width: 300px;
         margin: 0 auto;
        text-align: center;
    }
.about-content h2{
     margin: 0 auto;
        text-align: center;
        margin-top: 70px;
    }
.about-content p{
     margin: 0 auto;
        text-align: center;
    
    }
}
@media screen and (max-width:758px){
      .about-c{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .image-1{
        max-width: 300px;
         margin: 0 auto;
        text-align: center;
    }
    .image-2{
        top: 60%;
        max-width: 270px;
         margin: 0 auto;
        text-align: center;
    }
    .about-content h2{
     margin: 0 auto;
        text-align: center;
        margin-top: 75px;
    }
.about-content p{
     margin: 0 auto;
        text-align: center;
    
    }
}
@media screen and (max-width:576px){
      .about-c{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image-1{
        max-width: 300px;
         margin: 0 auto;
        text-align: center;
    }
    .image-2{
        top: 60%;
        left: 60%;
        max-width: 250px;
         margin: 0 auto;
        text-align: center;
    }
    .about-content h2{
     margin: 0 auto;
        text-align: center;
        margin-top: 75px;
    }
.about-content p{
     margin: 0 auto;
        text-align: center;
    
    }
}
/* offer media section  */
@media screen and (max-width:1200px){
    .offer-c{
         width: 100%;
        margin: 0 auto;
        text-align: center;
       
    }
    
    .offer-icon1 {
        margin: 0 auto;
        text-align: center;
        margin-top: 20px;
    }
    .offer-content h3{
         margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .offer-content p{
         margin: 0 auto;
        text-align: center;
    }
}
@media screen and (max-width:576px){
    .offer-sec h2{
        font-size: 30px;
    }
}
/* arrival media section  */
@media screen and (max-width:1200px){
    .arrival-sec p{
        margin: 0 auto;
        text-align: center; 
    }
    .arrival-sec h2{
        margin: 0 auto;
        text-align: center; 
        font-size: 35px;
    }

}
/* footer media section  */
@media screen and (max-width:993px){
.footer-c{
    margin: 0 auto;
    text-align: center;
      width: 100%;
}
.line{
   margin: 0 auto;
    text-align: center;
      
}
.footer-title{
     margin: 0 auto;
    text-align: center;
}
.social-icons a{
     margin: 0 auto;
    text-align: center;
    margin-top: 15px;
}
.footer-title{
    margin-top: 15px;
    font-size: 20px;
}
.footer-links{
    margin-top: 15px;
    
}
.text1{
    width: 250px;
}
.footer-btn{
    padding: 8px 40px;
}
}