*{
    margin: 0%;
    font-style: arial;
    border: content-box;
}
body{
    background-color: #f5f5f5;
}
header{
    position: fixed;
    top: 0%;
    z-index: 1000;
    width: 100%;
}
main{
    padding-top: 130px;
}
.nav-top{
    width: 1188;
    height: 25px;
    padding-left: 41.2px;
    padding-right: 41.2px;
    background-color: #f85606;
    color: white;
    display: flex;
    justify-content: end;
}
.nav-span{
    padding-left: 17px;
    padding-right: 17px;
}
.nav-span:hover{
    color: #e9b4a1;
}

/* Box 2*/

.navbar{
    height: 90px;
    padding-top: 11px;
    background-color: #f85606;
    display: flex;
}

/* Box 3*/

.nav-logo{
    background-image: url(Logo-image.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 39px;
    width: 200px;
    margin-left: 8rem;
}

/* Box 4*/
.search-box{
    height: 45px;
    width: 688px;
    background-color: white;
    display: flex;
    align-items: center;
}
.search-input{
    height: 19px;
    width: 650px;
    border: none;
    padding: 13px 19px 13px 19px;
    outline-style: none;
    box-shadow: none;
}
.search-icon{
    height: 45px;
    width: 45px;
    background-color: #ffe1d2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f85606;
}

/* Box 4*/

.cart{
    margin-left: 25px;
    height: 30px;
    width: 30px;
}
.cart-logo{
    font-size: 20px;
    color: white;
    
}
 /* Hero Section*/

 .hero-section{
    height: 344px;
    width: 100%;
    display: flex;
    justify-content: center;
 }
 .hero-image img {
    height: 344px;
    width: 988px;
    background-size: cover;
 }
 /* Box 2 */

 .hero-line{
    height: 140px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
 }
 .hero-linetype img {
    height: 140px;
    width: 1188px;
    border-radius: 50px;
 }

 /* Box 3*/
 .name p {
    width: 1188px;
    color: #424242;
 }
 .name{
    height: 38px;
    width: 100%;
    font-size: 22px;
    display: flex;
    justify-content: center;
 }
  /* Products Sale Box*/

  .product-box{
    height: 375px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .product-inside{
    height: 375px;
    width: 1188px;
    background-color: #ffffff;
  }

  /* Box 2 */
  .top-h{
    height: 60px;
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: center;
  }
  .top-h2{
    height: 60px;
    width: 1188px;
    background-color: #ffffff;
  }
  .top-h3{
    height: 59.2px;
    width: 105.13;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    margin-bottom: 10px;
  }
  .top-h3 p {
   height: 16.1px;
   width: 85.13px;
   color: #f57224;
   background-color: #ffffff;
   display: flex;
   justify-content: end;

  }
  /* Product Box 1*/


.product-sale-box{
    height: 290px;
    width: 1188px;
    display: flex;
}
.product-sale{
    height: 290px;
    width: 188px;
    margin-right: 12px;
}
.product-sale:hover{
    border: 1px solid #424242;
}
.product-forsale{
    height: 188px;
    width: 188px;
}
.product-price{
    font-size: 18px;
    color: #f57224;
}
.product-save{
    text-decoration:line-through;
    font-size: 12px;
    color: #9e9e9e;
}
.product-discount{
    font-size: 12px;
    color: #212121;
    margin-left: 4px;
}
.price-box{
    margin: 4px 8px 0px 8px;
}
.product-name{
    margin-bottom: 4px;
}

 /* Product Box 2*/
 
 .product-secondInside1{
    height: 590px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .product-secondName{
    height: 38px;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0px 8.4px 0px 8.4px;
    padding-top: 24px;
 }
 .product-lineName{
    height: 38px;
    width: 1188px;
    font-size: 22px;
    color: #424242;
 }
 .product-secondInside{
    height: 590px;
    width: 1188px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(189px , 1fr));
    max-width: 1188px;
    overflow: hidden;
 }

.product-secondPlace{
    height: 292.2px;
    width: 189px;
    margin: 0px 10.5px 20px 0px;
    background-color: #ffffff;
}
.product-secondSale:hover{
    border: 1px solid #424242;
}
.product-secondforsale{
    height: 188px;
    width: 188px;
}
.product-priceSecond{
    font-size: 18px;
    color: #f57224;
}
.product-secondSave{
    text-decoration:line-through;
    font-size: 12px;
    color: #9e9e9e;
}
.product-secondDiscount{
    font-size: 12px;
    color: #212121;
    margin-left: 4px;
}
.price-secondBox{
    margin: 4px 8px 0px 8px;
}
.product-nameSecond{
    margin-bottom: 4px;
}

/* Load Button*/

.loader{
    display: flex;
    justify-content: center;
}
.load-button{
    height: 40px;
    width: 1188px;
    padding-top: 24px;
    padding-bottom: 9px;
    display: flex;
    justify-content: center;
}
.load-more{
    height: 40px;
    width: 387px;
    margin: 0px 400.5px 0px 400.5px;
    color: #1a9cb8;
    font-size: 14px;
    border:1px solid  #1a9cb8;
}

/*Footer */

.footer-top{
    height: 273px;
    display: flex;
    justify-content: center;
    padding: 20px 0px 25px 0px;
}
.footer-first{
    height: 273px;
    width: 1188px;
    background-color: #f4f4f6;
    display: flex;
}
h3{
    font-size: 16px;
    height: 35px;
    width: 297px;
    color: #0f136d;
}
ul{
    list-style-type: none;
    color: #0f136d;
    padding: 0px;
}
.logos{
    height: 120px;
    width: 594px;
    display: flex;
}
.logos img{
    height: 42px;
    width: 42px;
}
.text-type{
    padding: 0px 15px 0px 15px;
}
.title{
    font-size: 16px;
    color: #f36f36;
}
.text{
    font-size: 14px;
    color: #0f136d;
    padding-top: 2px;
}
.apps{
    height: 95px;
    width: 290px;
}
.apps img{
    height: 42px;
    width: 126px;
}

/* Footer 2*/

.footer-second{
    height: 114.2px;
    padding: 20px 0px 25px 0px;
    background-color: #ffffff;
    display: flex;
}
.payments{
    height: 114px;
    width: 380.15px;
}
.text{
    height: 35.2px;
    width: 380.15px;
    font-size: 16px;
    color: #183544;
    margin-bottom: 15px;
}
.app{
    height: 64px;
    width: 360.15px;
    margin-right: 20px;
}
.app img {
    height: 28px;
    width: 46.33px;
}

.verified{
    height: 101.2px;
    width: 380.15px;
}
.appps{
    height: 51px;
    width: 380px;
}
.appps img {
    height: 41px;
    width: 73px;
}