* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.Manforce-category-banner{
  min-height: 220px;
  padding-top: 130px !important;

}
/* Dotted Condoms */
.card-Dotted-img1{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius:  20px 20px 0px 0px ;

}
.card-Dotted-img1:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img2{
  background-image: url(../img/CARD-2A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius:  20px 20px 0px 0px ;

}
.card-Dotted-img2:hover {
  background-image: url(../img/CARD-2B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img3{
  background-image: url(../img/CARD-3A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius:  20px 20px 0px 0px ;

}
.card-Dotted-img3:hover {
  background-image: url(../img/CARD-3B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img4{
  background-image: url(../img/card-4a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Dotted-img4:hover {
  background-image: url(../img/card-4b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img5{
  background-image: url(../img/card-5a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img5:hover {
  background-image: url(../img/card-5b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;

}
.card-Dotted-img6{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img6:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img7{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img7:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img8{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img8:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img9{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img9:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Dotted-img10{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Dotted-img10:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}

/* Lubricated  */
.card-Lubricated-img1{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Lubricated-img1:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img2{
  background-image: url(../img/CARD-2A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Lubricated-img2:hover {
  background-image: url(../img/CARD-2B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img3{
  background-image: url(../img/CARD-3A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Lubricated-img3:hover {
  background-image: url(../img/CARD-3B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img4{
  background-image: url(../img/card-4a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Lubricated-img4:hover {
  background-image: url(../img/card-4b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img5{
  background-image: url(../img/card-5a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img5:hover {
  background-image: url(../img/card-5b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;

}
.card-Lubricated-img6{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img6:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img7{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img7:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img8{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img8:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img9{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img9:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img10{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img10:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Lubricated-img11{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Lubricated-img11:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
/* Ribbed */
.card-Ribbed-img1{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Ribbed-img1:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
/* Flavoured */
.card-Flavoured-img1{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img1:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img2{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img2:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img3{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img3:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img4{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img4:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img5{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img5:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img6{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img6:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img7{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img7:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img8{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img8:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img9{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img9:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img10{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img10:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img11{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img11:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img12{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img12:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img13{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img13:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-Flavoured-img14{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-Flavoured-img14:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
/* Ultra Thin*/
.card-Ultra-img1{
  background-image: url(../img/card-6a.webp);
  height: 300px;
  background-size: cover;
  background-position: center;

}
.card-Ultra-img1:hover {
  background-image: url(../img/card-6b.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}

/* More For You  */

.card-you-img1{
  background-image: url(../img/Best\ Sellers-CARD-1A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-you-img1:hover {
  background-image: url(../img/Best\ Sellers-CARD-1B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-you-img2{
  background-image: url(../img/CARD-2A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-you-img2:hover {
  background-image: url(../img/CARD-2B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.card-you-img3{
  background-image: url(../img/CARD-3A.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
}
.card-you-img3:hover {
  background-image: url(../img/CARD-2B.webp);
  height: 300px;
  background-size: cover;
  background-position: center;
  transform:rotatey(180deg);
  border-radius:  20px 20px 0px 0px ;
  transition: all 2s;
}
.addtocart-btn{
  background-color: #157347;
  width:100%;
  border: none;
}