body{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', serif;
}


/* -------------------
Header Style 
------------------------*/
@keyframes slideDown {
    0%{
        transform: translateY(-30px);
    }
    100%{
        transform: translateY(0);
    }
}

header{
    max-width: 1100px;
    margin:0 auto;
    padding:0 50px;
  
    animation: slideDown 1s ease .0s 1;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.heading{
    display: flex;
    font-size:24px;
    margin:0;
    color: #3A3A3A;
}

nav{
    display: flex;
    font-size:16px;
}
.nav-items li{
    list-style: none;
    padding:0 20px;
}

.second-ul li{
    list-style: none;
    padding:0 10px;
}

.nav-items li a, .second-ul li a{
    color:#3A3A3A    ;
    text-decoration: none;

}
.second-ul li a:hover,
.nav-items li a:hover{
    color:#E02C6D;
}

.nav-items, .second-ul{
    display:flex;
    align-items: center;
}
/* ----------------
Top Section Style Started
-------------------*/
.top-section{
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap:70px;
max-width: 1100px;
margin:0 auto;
padding:0 50px;
align-items: center;
color:#3A3A3A;

}
.top-section h1{
margin-bottom:10px;
    font-size: 52px;
   
    font-weight:700px;  
color:#3A3A3A;
}


.top-section img{
    width:100%;
    margin-top:30px;
}
.btn{
    border-radius: 41px;
    background-color: #E02C6D;
    padding: 8px 25px;
    text-decoration: none;
    color:white;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    
}

.btn:hover{
    opacity: 0.7;
    transition: .5s ease;
}

.services{
    max-width: 1000px;
    background-color: white;
    margin:20px auto;
    padding:0 auto;
    border-radius:5px;
    padding-bottom: 20px;

}
.customer-care{
    margin-top: 100px;
    color:#3A3A3A;
  
    display: grid;
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
    
}
.customer-care h2{
    font-size: 15px;
}
.customer-care .fas{
font-size: 25px;
}

.fas:hover{
   color: #E02C6D;
}
/* -------------------
Products style 
--------------------------*/
.container{
    max-width: 1000px;
    background-color: white;
    margin:20px auto;
    padding:0 auto;
    border-radius:5px;
    padding-bottom: 50px;
    
}

.see-more{
    text-decoration: none;
    color:#E02C6D;
float: right;
margin:auto 50px;
margin-top:50px;
}
.section-title{
    margin-top:80px;
    margin-bottom:30px;
    text-align: center;
    color:#3A3A3A;
    font-weight: 600;
    font-size: 28px;
   
}
.products{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:25px;

}

.product-title{
margin-top:16px;
margin-bottom:6px;
font-size: 28px;
color:#18191F;
cursor: pointer;
}

.product-details{
    font-size: 14px;
    color:#787885;
margin-bottom: 30px;
}

.product-title:hover{
    color:#E02C6D;
}
.product-banner:hover{
    transition: .5s ease;
  opacity: 0.7;
 
  cursor:pointer;
}


.rating{
margin-top:8px;
    color:#FB8200;
font-size: 14px;
}
.rating span{
    color:#5E6366;
    font-size: 14px;
}

.price{
    font-size: 24px;

}

/*BEST SELLER WIDGET*/

.best-seller{
    margin-bottom:40px;
}
.best-products{
    max-width: 1000px;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:15px;
    margin:0 auto;
}
.best-item{
    display:flex;
   
    padding:15px;
    border-radius:20px;
}
.best-banner{
    display:flex;
    flex:1;
}
.best-banner img{
    width:100%;
    border-radius: 10px;
}
.product-text{
    flex:1;
    padding-left:10px;
    font-size: 20px;
}
.product-text h5{
font-size:14px;
}
.product-text s{
    color:rgb(255, 104, 104);
}
/* Newsletter */

.newsletter{
    background-color:#e02c6e3b;
    padding:15px;
}
.subscribe{
    text-align: center;
    max-width: 800px;
    margin:20px auto;
   
}

input{
    width:90%;
    padding: 12px;
    border: 1px solid #E02C6D;
    border-radius: 50px;
  background-color: #fcc1d611;
    box-sizing: border-box;
    margin-top: 6px;
    font-size: 14px;
    margin-bottom: 16px;
  
}
.submit-btn{
    background-color: #E02C6D;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    color:white;
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
}

/*-----------------
   footer area
------------------*/
footer{
   
    color:white;
    background-color:rgb(12, 13, 29);
    padding: 10px 30px;
    align-items: center;
}

.footer-txt{
 margin:auto;
  width: 50%;
  text-align: center;
  padding: 15px 0px;
}

.footer-icons{
   
    font-size:32px;
    color:#fff;

    margin:0 auto;
}

.fab:hover{
    color:#E02C6D;
    cursor: pointer;
}

/* Media Query For Responsiveness */

/* For Tablet View */
@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
    header{
        max-width: 100%;
    }
    .heading{
        display:flex;
        text-align:center;
  font-size: 16px;
    }
  .nav-items{
      display:none;
  }

    .top-section {
      display: grid;
      justify-content: center;
    grid-template-columns: repeat(1, 1fr);
max-width:80%;
  }
  .customer-care{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      justify-items:center;

  }

  .top-section img{
      margin-top:30px;
      width:100%;
  }
 
  .products{
   
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items:center;

    
}

.subscribe{
   
    max-width: 100%;

}
}

/* For Landscape View */
@media only screen and (min-device-width: 499px)
and (max-device-width: 766px) {
    header{
        max-width: 100%;
    }
    
    .heading{
      display:flex;
      text-align:center;
font-size: 16px;
  }
  .nav-items{
    display:none;
}
    .top-section {
      display: grid;
      justify-content: center;
    grid-template-columns: repeat(1, 1fr);
max-width:80%;
  }
  .customer-care{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items:center;

}

  .top-section img{
      margin-top:30px;
      width:100%;
  }

  .products{
   text-align: center;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items:center;
}

.subscribe{
   
    max-width: 100%;

}

} 


/* For Mobile Portrait View */
@media only screen and (min-width: 200px) and (max-width:500px){
   
   header{
       max-width: 100%;
       display:flex;
       flex-direction: column;
   }
    .heading{
      display:flex;
       font-size: 10px;
       justify-content: center;
   }
.nav-items{
    display:none;
}

    .top-section {
        display: grid;
        justify-content: center;
      grid-template-columns: repeat(1, 1fr);
     max-width:90%;
     text-align: center;
    }
    .top-section img{
        margin-top:30px;
        width:100%;
    }
    .customer-care{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items:center;
  
    }
    .products{
        text-align: center;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        justify-items:center;
    }
    .product-details{
        width:80%;
      margin:0 auto;
    }
    .best-products{
        max-width:90%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .best-banner img{
        width:100%;
        border-radius: 10px;
    }
   
    footer{
        font-size: 12px;
    }
    .footer-icons{
       
        font-size:28px;

}
}