Ecomerse.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    background-color: antiquewhite;
    
}

/*Sub header */
.sub header {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    gap: 180px;
    background-color: white;
    padding-bottom: 10px;
     box-shadow: 0px 2px 5px  rgb(0, 0, 0,0.2);
     color: black;
    }
    .Tell {
      position: relative;
      left: 65px;
    }

.money {
    margin-top: 4px;
    position: relative;
    left: 230px;
    border: none;
   box-shadow: 3px 1px 1px  rgb(0, 0, 0,0.1);
}
.Home {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5px;
  gap: -15px;
  
}
.Home > img {
  height: 80px;
  width: 75px;
  margin-left: 10px;
}
.logo {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.span-1 {
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1;
  padding: 0;
  display: block;
}
.logo-div {
  margin-left: 75px;
  margin-top: -55px;
}
.main-header {
  width: 100%;
  
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
}

.main-nav select {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.select {
    border: none;
    font-weight: bold;
    font-size: 1rem;
    background: transparent;
}

.selects {
  margin-left: 400px;
  display: flex;
  gap: 16px;
  margin-top: -75px;
  align-items: center;
  margin-right: 40px;
  position: relative;
  left: 100px;
  font-weight: bold;
  
}
.icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -75px;
  margin-left: 340px;
  gap: 20px;
  font-size: 25px;
}
.section-1 {
    text-align: left;
    margin-top: 100px;
    
    

}
.sales-para {
    color: orangered;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 12px;
    font-size: 20px;

}
.apple-para {
    font-size: 65px;
    
}
.description-para {
    margin-top: 15px;
    font-size: 1.3rem;
}
.first-button {
    margin-top: 20px;
    background-color: #e6521f;
    color: white;
    border-radius: 20px;
    width: 185px;
    height: auto;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: background-color,0.2s;
    
}
.first-button:hover {
  background-color: green;
}

/*Section-1*/

.section-1 img {
  height: auto;
  width: 700px;
  position: relative;
  left: 43%;
  bottom: 230px;
  transform: rotate(30deg);
}
.section-1 {
  background-color: #f7f7f7;
  margin: 0;
  width: 1510px;
  height: 530px;
  margin-top: -5px;
  margin-left: -3px;
  
}
.section-container {
  position: relative;
  top: 180px;
  margin-left: 30px;
}

/*Section-2*/
.section-2 {
  text-align: center;
  max-width: 900px;
  width: 100%;
}
.section-2 h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  font-size: 2rem;
  position: relative;
  left: -200px;
  padding: 35px;
}
.section-box {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-left: 200px;
  width:1000px;
  height: auto;
  
  
}
.boX-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center; 
      transition: transform 0.2s ease-in;
    }
    .boX-item:hover{
      transform: scale(1.05);
    }

.boX-item img {
      width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
    }

 .boX-item p {
      font-size: 14px;
      color: #333;
      padding: 20px;
    }
.box-1 {
  background-color:white ;
  
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}
.box-2 {
  background-color: white;
 
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}
.box-3 {
  background-color: white;
  
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}
.box-4 {
  background-color: white;
  
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}
.box-5 {
  background-color: white;
 
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}
.box-6 {
  background-color: white;
  
  box-shadow: 0 8px 15px rgba(0, 0, 0,0.1) ;
}

/*Section-3*/
.section-3 {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 100px;
  gap: 20px;
      
}

.img-2 {
   width: 310px;
  height: auto;
  position: relative;
  top: -1px;
  left: -10px;
  bottom: -10px;
  margin-left: 150px;
  margin-top: 200px;
}
.img-1 {
  width: 430px;
  height: auto;
  position: relative;
  top: -1px;
  left: -10px;
  bottom: -10px;
  margin-left: 95px;
  margin-top: 180px;
}
.btn-1 {
  position: relative;
  bottom: 360px;
  left: 230px;
  background-color: #e6521f;
  padding: 10px;
  border-radius: 20px;
  width: 120px;
  height: 50px;
  border: none;
  color: white;
  transition: background-color,0.2s;
}
.btn-1:hover {
  background-color: green;
}
.btn-2 {
  position: relative;
  bottom: 345px;
  left: 230px;
  background-color: #e6521f;
  padding: 10px;
  border-radius: 20px;
  width: 120px;
  height: 50px;
  border: none;
  color: white;
  transition: background-color,0.2s;
}
.btn-2:hover {
  background-color: green;
}
.center-para {
  position: relative;
  bottom: 365px;
  left: 150px;
  margin-bottom: 8px;
 font-family: Arial, Helvetica, sans-serif;
}
.p-1 {
  margin-left: 28px;
}
.p-2 {
  font-size: 2rem;

}
.section-3box-1 {
  background-color: white;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  width: 600px;
  height: 430px;
  position: relative;
  right: 70px;
  transition: transform 0.2s ease-in; 
}
.section-3box-1:hover{
      transform: scale(1.05);
    }
.center-para-2 {
  position: relative;
  bottom: 365px;
  left: 105px;
  margin-bottom: 8px;
 font-family: Arial, Helvetica, sans-serif;
}
.p-3 {
  margin-left: 70px;
}
.p-4 {
  font-size: 2rem;
  margin-left: -20px;

}
.section-3box-2 {
  background-color: white;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  width: 600px;
  height: 430px;
  position: relative;
  right: 55px;
  transition: transform 0.2s ease-in; 
}
.section-3box-2:hover{
      transform: scale(1.05);
    }

    /*Section-4*/

.title-products {
  margin: 80px;
  display: flex;
  justify-content: space-between;
}
.title-products i{
  color: red;
}
.products {
  display: grid;
  grid-template-columns:repeat(6,1fr);
  display: flex;
 justify-content: center;
 gap: 25px;
 margin-left: -120px;
}
.red-dollar {
  color: red;
  font-weight: bold;
}
.small-dollar {
  font-size: 14px;
}
.product-1 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-2 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-3 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-4 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-5 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-1 img {
  width: 100px;
      height: 100px;
      margin: 38px;
      margin-bottom: 8px;
}
.product-1 {
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  transition: transform 0.2 ease-in;
}
.product-1:hover {
  transform: scale(1.05);
}
.product-2 {
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
 transition: transform 0.2 ease-in;
}
.product-2:hover {
  transform: scale(1.05);
}
.product-3 {
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
   transition: transform 0.2 ease-in;
}
.product-3:hover {
  transform: scale(1.05);
}

.product-4 {
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
   transition: transform 0.2 ease-in;
}
.product-4:hover {
  transform: scale(1.05);
}
.product-5 {
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  transition: transform 0.2 ease-in;
}
.product-5:hover {
  transform: scale(1.05);
}

.stars {
  display: flex;
  justify-content: center;
  color: #FFD93D;

}

/* Section-5 */
.section-5 {
  margin-top: 65px;
  text-align: center;
  background-color: #f7f7f7;
  max-width: 10000px;
  height: 450px;
  padding: 50px;
  overflow: hidden;
  
}
.img {
  display: inline;
  width: 250px;
  height: 520px;
  position: relative;
  top: -340px;
  left: 430px;
  
}
.section-5 button {
  background-color: red;
  color: white;
  font-size: 15px;
  width: 130px;
  height: 50px;
  text-align: center;
  border: none;
  font-weight: bold;
  border-radius: 2px;
  position: relative;
  left: -230px;
}
.section-5 h1 {
  font-size: 3rem;
  margin: 20px;
  margin-left: -420px;
}
.box-Days {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-direction: row;
  margin-top: 25px;
  margin-left: -430px;
}
.Days {
  background-color: #f7f7f7;
  width: 70px;
  height: 70px;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  border-radius: 4px;

}
.Days h3 {
  text-align: center;
  padding-top: 15px;
}
.Hrs{
  background-color: #f7f7f7;
  width: 70px;
  height: 70px;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  border-radius: 4px;

}
.Hrs h3 {
  text-align: center;
  padding-top: 15px;
}
.MINS {
  background-color: #f7f7f7;
  width: 70px;
  height: 70px;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  border-radius: 4px;

}
.MINS h3 {
  text-align: center;
  padding-top: 15px;
}
.Secs {
  background-color: #f7f7f7;
  width: 70px;
  height: 70px;
  box-shadow: 0px 8px 10px 8px rgba(0, 0, 0,0.1);
  border-radius: 4px;

}
.Secs h3 {
  text-align: center;
  padding-top: 15px;
}
.shop {
  position: relative;
  bottom: -40px;
  left: -215px;
  font-size: 22px;
  font-weight: bold;
}

/*SECTION-6 */
.popular-products-title{
  margin-left: 20px;
  margin-top: 40px;
  
}
.popular-products-titles {
 display: flex;
 justify-content: flex-end;
 gap: 15px;
 margin-top: -20px;
 font-weight: bold;
 margin-right: 35px;
}
.red-title {
  color: red;
}
.popular-products {
 display: grid;
 grid-template-columns: repeat(4,250px);
 gap: 20px;
 text-align: center;
 justify-content: center;
 margin-top: 25px;  
}
/*Section-7*/
.Blog {
  display: flex;
  margin-top: -23px;
  gap: 20px;
  margin-left: 100px;
}
.Blog img {
  width: 400px;
  height: 400px;
  margin-bottom: 15px;
}
.blog-data {
  color: #333;
}
.blog-1 p {
  margin-top: 10px;
  font-size: 20px;
}

/*Section-8*/
.Discount {
  background-color: #f7f7f7;
  overflow: hidden;
  text-align: center;
  max-width: 1200px;
  height: 370px;
  align-items: center;
  margin-left: 120px;
  margin-top: 40px;
}
.Discount img {
  width: 200px;
  height: 360px;
  
}
.discount-title {
  margin-top: 60px;
  margin-bottom: 10px;
}
.discount-title-1 {
  color: #333;
  margin-bottom: 10px;
}

/*Section-9*/
.Section-9 {
  margin-top: 45px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: space-around;
  padding: 45px;
}
.fa-regular fa-truck {
  margin: 20px;
}
.store-badge-1 {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.store-badge-2 {
  display: inline-block;
  width: 65px;
  height: 45px;
  position: relative;
  bottom: 25px;
}
.footer-top-container {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.footer-bottom-container {
  margin-top: 20px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  gap: 20px;
}