product1.css

html{
  scroll-behavior: smooth;
}

body {
  background-color: #111;
}

.section-p1{
  padding: 40px 80px;
}
.main-banner{
  padding: 30px 40px;
}
.img_main{
  padding: 40px 80px;
}

.nav-bar{
display: flex;
justify-content: space-between;
}

/* search */
.search {
  display: flex;
  align-items: center;
  background-color: gray;
  padding: 10px 20px;
  border-radius: 10px;
  transform: translate(-80%, 10%);
}

.searchInput {
  border: none;
  background-color: transparent;
}

.searchInput::placeholder {
  color: lightgray;
}


.h1-main{
  font-size: 50px;
  color: rgb(255, 255, 255);
  font-family: Helvetica;
}
.cart1{
  padding: 40px 40px;
}

#product1{
  text-align: center;
}

#product1 .pro-container{
  display: flex;
  /* justify-content: space-between ; */
  padding-top: 20px;
  flex-wrap: wrap;
}

#product1 .pro{
  width: 21%;
  background-color: #222629;
  color: rgb(158, 149, 149);
  min-width: 250px;
  padding: 10px 12px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 10px;
  cursor: pointer;
  margin: 15px 0;
  transition: 0.2s ease;
  position: relative;
  margin-top: 20px;
}

#product1 .pro:hover{
  box-shadow: 20px 20px 20px rgb(37, 39, 47);
}

#product1 .pro img{
  width: 100%;
  border-radius: 20px;
}

#product1 .pro .des{
  text-align: start;
  padding: 0px 0;
}

#product1 .pro .des span{
  color: aliceblue;
  font-size: 20px;
}

#product1 .pro .cart{
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  background-color: white;
  font-weight: 500;
  color: rgb(0, 131, 87);
  border-color: 3px solid #222629;
  position: absolute;
  bottom: 20px;
  right: 10px;
}

.banner img{
  height: 80%;
  width: 100%;
}
.banner{
  height: 600px;
  margin-bottom: 0%;
  padding-bottom: 0%;
}
.img_main{
  display: flex;
}

.img1 img{
  height: 500px;
  width: 600px;
}

.img1{
      flex: 1;
      background-color: black;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
}
.button{
  border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
.button1{
  background-color: #848789;
}
.button2{
  background-color: #848484;
}

/* .navBottom{
display: flex;
align-items: center;
justify-content: center;
} */
.menuItem {
  margin-right: 50px;
  cursor: pointer;
  color: lightgray;
  font-weight: 400;
}


footer {
  display: flex;
}

.footerLeft {
  flex: 2;
  display: flex;
  justify-content: space-between;
  padding: 50px;
}

.fMenuTitle {
  font-size: 16px;
}

.fList {
  padding: 0;
  list-style: none;
}

.fListItem {
  margin-bottom: 10px;
  color: gray;
  cursor: pointer;
}

.footerRight {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fInput {
  padding: 5px;
}

.fButton {
  padding: 5px;
  background-color: black;
  color: white;
}

.fIcons{
  display: flex;
}

.fIcon{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.copyright{
  font-weight: 300;
  font-size: 14px;
}

@media screen and (max-width:480px) 
{
  footer{
      flex-direction: column;
      align-items: center;
    }
  
    .footerLeft{
      padding: 20px;
      width: 90%;
    }
  
    .footerRight{
      padding: 20px;
      width: 90%;
      align-items: center;
      background-color: whitesmoke;
    }
  
    .payment{
      width: 90%;
      padding: 20px;
    }
  }
  /* clothing */
  .clothing{
      background-image: url('https://i.postimg.cc/kGWjdgZ2/coming-soon.png');
      background-position: 0px -100px;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 10px 10px;
      margin-bottom: 50px;
  }

  .clothing_button-div{
      display: flex;
      position: absolute;
      justify-content: center;
      align-items: end;
      width: 100%;
      height: 300px;
      bottom: 0;
  }
  
  /* .clothing_button {
      transition-duration: 0.4s;
      font-size: 54px;
      background-color: pink;
      border-radius: 14px;
      text-align: center; 
      margin-bottom: 30px;
      padding: 20px 20px;
    } */

    .clothing_button  {
      border-radius: 4px;
      background-color: pink;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 28px;
      padding: 20px;
      width: 200px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    
    .clothing_button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.clothing_button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.clothing_button:hover span {
  padding-right: 25px;
}

.clothing_button:hover span:after {
  opacity: 1;
  right: 0;
}

.clothing_button:hover {
      background-color: rgb(255, 81, 110); /* Green */
      color: white;
      box-shadow: 0 12px 16px 0 rgba(41, 3, 34, 0.979),0 17px 50px 0 rgba(255, 31, 31, 0.19);
    } 

    /* cart */
    .cart-page{
      margin: 80px auto;
    }
    table{
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      border-collapse: collapse;
    }
    .cart-info{
      display: flex;
      flex-wrap: wrap;
    }
    th{
      width: 50px;
      text-align: left;
      padding: 20px;
      color: #FFFFFF;
      background-color: #ff523b;
      font-weight: normal;
    }
    td{
      padding: 10px 5px;
    }

    td input{
      width: 40px;
      height: 30px;
      padding: 5px;
    }
    td a{
      color: #ff523b;
      font-size: 15px;
    }
    td img{
      width: 80px;
      height: 80px;
      margin-right: 10px;
      
    }





    /* hamburger menu */
#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 25px;
  left: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
  bottom: 10px;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: goldenrod;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
  z-index: 1;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 250px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #222629;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition-duration: .25s;
  z-index: 1;
}
.menu__item {
  display: block;
  letter-spacing: 1px;
  padding: 12px 24px;
  color:  rgb(158, 149, 149);
  font-family: 'old standard TT' ,sans-serif;
  font-size: 25px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}