* {
  padding: 0%;
  margin: 0%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  background-color: var(--background-color);
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
}
.home {
  background-color: palevioletred;
  width: 100%;
  height: 100vh;
}

/*mens page*/
.shoes{
    
    columns: 4;
   
}


.mens-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vw;
  text-transform: capitalize;
  font-weight: 500;
  margin-bottom: 3vw;
 
}
.men img{
    width: calc(90vw/4);
    height: 23vw;
    object-fit: cover;
    background: greenyellow;
}
.men{
    width: calc(90vw/4);
    height: 30vw;
    margin-bottom: 1vw;
   
    display: inline-block;
    border-radius: .5vw .5vw 1vw 1vw;
    background-color: rgb(215, 215, 215);
   
}
.men:hover{
  scale: 1.05;
  transition: 0.2s ease-in-out;
}
.desc, .desc2{
    display: flex;
    flex-direction: row;

    font-size: 1.6vw;
    text-transform: capitalize;
    justify-content: space-between;

}
.name, .label{
    display: flex;
    
    justify-content: flex-start;
    width: 70%;
    height: 4vw;
    font-weight: 600;
    font-size: 1.45vw;
    padding-left: 0.5vw;
}
.price, .discount{
    display: flex;
    justify-content: center;
    font-weight: 900;
    width: 30%;
    
   
}
.desc2{
    font-size: 1.2vw;


}
.label{
    font-size: 1.2vw;
    font-weight: 400;
    color: rgb(94, 65, 3);
}
.discount{
    text-decoration:line-through;
    color: red;
}
/*ad 1*/

.ad-1 {
  display: flex;
  flex-direction: row;
  background: linear-gradient(
    to bottom right,
    rgb(241, 241, 85),
    rgb(242, 65, 65)
  );
  justify-content: space-between;

  font-size: 4vw;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  align-items: center;

  height: 30vw;
}

.ad-1 img {
  width: 40vw;
  rotate: 10deg;
}
.img1-ad {
  margin-bottom: 0px;
}
.img2-ad {
  transform: scaleX(-1);
  rotate: 12deg;
}