#header .container {
  max-width: 100%;
  padding: 0px 55px;
}

#products-banner-section {
  margin-top: 100px;
}

#products-banner-section img {
  object-fit: cover;
}

#products-banner-section .wrapper .box {
  position: relative;
  width: 25%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  aspect-ratio: 16/20;
  transition: background-size 0.5s ease-in-out;
  overflow: hidden;
}

#products-banner-section .wrapper .overlay {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #00000030;
}

#products-banner-section .wrapper .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease-in-out;
  transform: scale(1);
}

#products-banner-section .wrapper .box:hover::before {
  transform: scale(1.1);
}

#products-banner-section .wrapper .box:hover {
  background-size: 120%;
}

#products-banner-section .wrapper .box:first-child::before {
  background-image: url("../images/products-banana.png");
}

#products-banner-section .wrapper .box:nth-child(2)::before {
  background-image: url("../images/products-carrot.png");
}

#products-banner-section .wrapper .box:nth-child(3)::before {
  background-image: url("../images/products-kiwi.png");
}

#products-banner-section .wrapper .box:last-child::before {
  background-image: url("../images/products-watermelon.png");
}

#products-banner-section h6 {
  position: absolute;
  text-align: center;
  font-size: 48px;
  font-family: "Denton Test Bold";
  top: 50%;
  transform: translate(0%, -50%);
  color: #ffffff;
  width: 100%;
  text-align: center;
}

#products h1 {
  padding: 36px 10px 54px 10px;
}

#products .content {
  background-color: #f1f1f1;
}

#products .wrapper {
  padding: 68px 0px 46px 0px;
  max-width: 1356px;
  margin: auto;
}

#products .content {
  background-color: #f1f1f1;
}

#products .flip-card .image {
  padding: 30px 16px 0px 16px;
}

#products .flip-card .image img {
  aspect-ratio: 1.63;
  object-fit: inherit;
}

.flip-card {
  background-color: transparent;
  width: 33.33%;
  height: 409px;
  perspective: 1000px;
  padding: 0px 34px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  border-radius: 15px;
}

.flip-card:focus {
  outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  height: 100%;
  width: 100%;
}

.flip-card-front {
  background: #ffffff;
  z-index: 2;
  border-radius: 15px;
  box-shadow: 2px 4px 11.9px 0px #00000029;
}

.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  border-radius: 16px;
  width: 99%;
  left: 1px;
  height: 99.6%;
  top:1px;
}

#products .flip-card:first-child .flip-card-back {
  background-color: #c21d38;
}
/* #products .flip-card:nth-child(3) .flip-card-back {
  background-color: #6b84b3;
}
#products .flip-card:nth-child(2) .flip-card-back,
#products .flip-card:last-child .flip-card-back {
  background-color: #959553;
}
#products .flip-card:nth-child(4) .flip-card-back {
  background-color: #fcb94d;
} */
h3 {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #fff;
}

#products .flip-card:not(:last-child) {
  margin-bottom: 74px;
}





#products .wrapper .box {
  padding: 0px 34px;
  width: 33.33%;
}

#products .flip-card p {
  font-size: 36px;
  font-weight: 700;
  color: #000000;
  line-height: 105%;
  font-family: "Denton Test Bold";
  text-align: center;
  padding: 42px 10px 54px 10px;
}

#products .flip-card img {
  object-fit: cover;
}

#products .flip-card .top-image img {
  max-width: 213px;
  aspect-ratio: 1.63;
  object-fit: inherit;
  width: 100%;
}

#products .flip-card .texts {
  padding: 0px 16px 16px 21px;
}

#products .flip-card .top-image {
  padding: 10px 10px 0px 10px;
}

#products .flip-card .texts h4 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 105%;
  padding-top: 21px;
}

#products .flip-card .texts p {
  padding: 21px 0px 10px 0px;
}

#products .flip-card .texts h5 {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  line-height: 105%;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#products .apple-golden .flip-card-back {
  background-color: #eccc3c;
}

#products .apple-green .flip-card-back {
  background-color: #97b527;
}
#products .apple-royal-gala .flip-card-back {
  background-color: #c21d38;
}

#products .grapes-black .flip-card-back {
  background-color: #798bc8;
}

#products .banana .flip-card-back {
  background-color: #beaa2b;
}
#products .banana-green .flip-card-back {
  background-color: #8ab13c;
}
#products .blackberry .flip-card-back {
  background-color: #6e717b;
}
#products .blueberry .flip-card-back {
  background-color: #5b7cb0;
}
#products .coconut-tender .flip-card-back {
  background-color: #89bb37;
}
#products .dragon-fruit .flip-card-back {
  background-color: #ff6898;
}
#products .figs .flip-card-back {
  background-color: #6e849c;
}
#products .grape-fruit .flip-card-back {
  background-color: #ffb202;
}
#products .grapes-green .flip-card-back {
  background-color: #c4d839;
}
#products .grapes-black .flip-card-back {
  background-color: #798bc8;
}

#products .guava .flip-card-back {
  background-color: #ccda6a;
}
#products .avocado-hass .flip-card-back {
  background-color: #68686e;
}
#products .kivi-green .flip-card-back {
  background-color: #bd956a;
}
#products .kumquat .flip-card-back {
  background-color: #f9bd4a;
}
#products .longans .flip-card-back {
  background-color: #eca769;
}
#products .mandarin .flip-card-back {
  background-color: #ffbb37;
}
#products .mango .flip-card-back {
  background-color: #f5c664;
}
#products .mango-alphonso .flip-card-back {
  background-color: #fed654;
}
#products .mangosteen .flip-card-back {
  background-color: #d6676a;
}
#products .melon-honeydew .flip-card-back {
  background-color: #dac85a;
}
#products .melon-rock .flip-card-back {
  background-color: #fed278;
}
#products .nectarine .flip-card-back {
  background-color: #fe946e;
}
#products .orange-navel .flip-card-back {
  background-color: #faab61;
}
#products .orange-valencia .flip-card-back {
  background-color: #ffad36;
}
#products .papaya-ripe .flip-card-back {
  background-color: #fec500;
}
#products .passion-fruit .flip-card-back {
  background-color: #cf75cb;
}
#products .peaches .flip-card-back {
  background-color: #ec7f70;
}
#products .pear .flip-card-back {
  background-color: #cade59;
}
#products .pineapple .flip-card-back {
  background-color: #e5a963;
}
#products .pineapple-baby .flip-card-back {
  background-color: #fbdc46;
}
#products .plums-black .flip-card-back {
  background-color: #bb859e;
}
#products .pomegranate .flip-card-back {
  background-color: #c87180;
}
#products .rambuttan .flip-card-back {
  background-color: #f0794c;
}
#products .respberry .flip-card-back {
  background-color: #f28b95;
}

/*--------------------------------------------------------------*/

#products .red-currant .flip-card-back {
  background-color: #f04557;
}
#products .strawberry .flip-card-back {
  background-color: #f8665c;
}
#products .watermelon-red .flip-card-back {
  background-color: #c8c671;
}
#products .watermelon-yellow .flip-card-back {
  background-color: #97aa43;
}
#products .alfalfa-sprouts .flip-card-back {
  background-color: #aec479;
}
#products .artichokes .flip-card-back {
  background-color: #a3c264;
}
#products .asparagus .flip-card-back {
  background-color: #a0b43c;
}
#products .atrsina-cress .flip-card-back {
  background-color: #95ac36;
}
#products .baby-artichoke .flip-card-back {
  background-color: #a9b16b;
}
#products .baby-broccoli .flip-card-back {
  background-color: #86a869;
}
#products .basil-pot .flip-card-back {
  background-color: #a7cc62;
}
#products .beans-gawar .flip-card-back {
  background-color: #81a92c;
}
#products .beans-green .flip-card-back {
  background-color: #b1d640;
}
#products .brocco-cress .flip-card-back {
  background-color: #89a633;
}
#products .broccoli .flip-card-back {
  background-color: #78b95c;
}
#products .butternut .flip-card-back {
  background-color: #f2caa6;
}
#products .beetroot-chioggia .flip-card-back {
  background-color: #da97a8;
}
#products .cabbage-chinese .flip-card-back {
  background-color: #a2c477;
}

#products .capsicum-mixed .flip-card-back {
  background-color: #f3a94c;
}
#products .carrot .flip-card-back {
  background-color: #fed654;
}
#products .cauliflower .flip-card-back {
  background-color: #d6676a;
}
#products .celery .flip-card-back {
  background-color: #8dac32;
}
#products .chilli-green .flip-card-back {
  background-color: #7bb750;
}
#products .coriander .flip-card-back {
  background-color: #96bb63;
}
#products .corn-sweet .flip-card-back {
  background-color: #ddda50;
}
#products .eggplant .flip-card-back {
  background-color: #b28eb2;
}
#products .fennel .flip-card-back {
  background-color: #c9ca8c;
}
#products .garlic .flip-card-back {
  background-color: #ecbb94;
}
#products .ginger .flip-card-back {
  background-color: #d5ab77;
}
#products .jalapeno-red .flip-card-back {
  background-color: #f04956;
}
#products .lemon .flip-card-back {
  background-color: #f0cc45;
}
#products .lettuce-iceberg .flip-card-back {
  background-color: #c6df5d;
}
#products .lettuce-red .flip-card-back {
  background-color: #ac6f72;
}
#products .lemongrass .flip-card-back {
  background-color: #e8b97d;
}
#products .mint .flip-card-back {
  background-color: #8ec83e;
}
#products .mushroom-brown .flip-card-back {
  background-color: #f2c896;
}
#products .onion-red .flip-card-back {
  background-color: #fe946e;
}
#products .potato-new .flip-card-back {
  background-color: #dd982c;
}
#products .potato-sweet .flip-card-back {
  background-color: #d9b0a2;
}
#products .pumpkin-green .flip-card-back {
  background-color: #bfbe89;
}
#products .radish-red-baby .flip-card-back {
  background-color: #f35f72;
}
#products .rosemary .flip-card-back {
  background-color: #95a15f;
}
#products .shallot-banana .flip-card-back {
  background-color: #e9c0af;
}
#products .spinach .flip-card-back {
  background-color: #95a15f;
}
#products .tomato-beef .flip-card-back {
  background-color: #e57155;
}
#products .turnip .flip-card-back {
  background-color: #cd9998;
}
#products .zucchini-green .flip-card-back {
  background-color: #b9cc6b;
}
#products .honeydew-melon .flip-card-back {
  background-color: #e0ec96;
}
#products .grapes-red .flip-card-back {
  background-color: #d87574;
}
/*------------------------------------------------------------*/

#products .broccoli-floret .flip-card-back {
  background-color: #719155;
}

#products .cucumber .flip-card-back {
  background-color: #649c14;
}

#products .beetroot .flip-card-back {
  background-color: #cd232e;
}

#products .cabbage-mix .flip-card-back {
  background-color: #a155be;
}

#products .onion-red .flip-card-back {
  background-color: #ebb7cb;
}

#products .cabbage-red .flip-card-back {
  background-color: #b427a0;
}

#products .cabbage-white .flip-card-back {
  background-color: #bfbb61;
}

#products .parsley .flip-card-back {
  background-color: #cad75b;
}

#products .capsicum-orange .flip-card-back {
  background-color: #f6af0a;
}

#products .capsicum-red .flip-card-back {
  background-color: #fa6c00;
}
#products .capsicum-yellow .flip-card-back {
  background-color: #ffe54b;
}

#products .cauliflower .flip-card-back {
  background-color: #847963;
}

#products .coconut .flip-card-back {
  background-color: #b16f3e;
}

#products .garlic .flip-card-back {
  background-color: #d7b758;
}

#products .beetroot .flip-card-back {
  background-color: #de2228;
}

#products .carrot .flip-card-back {
  background-color: #fb922b;
}

#products .onion-brown .flip-card-back {
  background-color: #d2a144;
}

#products .onion-red .flip-card-back {
  background-color: #c38093;
}

#products .onion-white .flip-card-back {
  background-color: #c8c38c;
}

#products .potato .flip-card-back {
  background-color: #debd52;
}

#products .sweet-potato-orange .flip-card-back {
  background-color: #ff9c00;
}

#products .romaine-lettuce .flip-card-back {
  background-color: #6fa23d;
}

#products .green-apple .flip-card-back {
  background-color: #99ad3b;
}

#products .black-berry .flip-card-back {
  background-color: #68686e;
}




@media (min-width: 1200px) and (max-width: 1399px) {
  #products .wrapper {
    max-width: 1140px;
    padding: 50px 0px 30px 0px;
  }
  .flip-card {
    padding: 0px 20px;
  }
  #products .flip-card:not(:last-child) {
    margin-bottom: 40px;
}
  #products .flip-card:first-child,
  #products .flip-card:nth-child(2),
  #products .flip-card:nth-child(3) {
    margin-bottom: 60px;
  }
  #products .flip-card .texts h4 {
    font-size: 20px;
  }
  #products .flip-card .texts p {
    padding: 18px 0px 10px 0px;
  }
  #products .flip-card p {
    font-size: 34px;
  }
  #products-banner-section h6 {
    font-size: 42px;
    line-height: 1.1;
  }
  #products .flip-card .texts {
    padding: 0px 16px 10px 21px;
  }
  #products .flip-card .texts h5 {
    -webkit-line-clamp: 7;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #products .wrapper {
    max-width: 960px;
    padding: 50px 0px 30px 0px;
  }
  #products-banner-section h6 {
    font-size: 40px;
    line-height: 1.1;
  }
  #products h1 {
    padding: 30px 10px 36px 10px;
  }
  .flip-card {
    padding: 0px 17px;
    height: 347px;
  }
  #products .flip-card:not(:last-child) {
    margin-bottom: 34px;
}
  #products .flip-card p {
    font-size: 30px;
    padding: 29px 10px 30px 10px;
  }
  #products .flip-card .top-image img {
    max-width: 174px;
  }
  #products .flip-card .texts h4 {
    font-size: 18px;
    padding-top: 16px;
  }
  #products .flip-card .texts p {
    padding: 16px 0px 10px 0px;
  }
  #products .flip-card .texts {
    padding: 0px 10px 10px 16px;
  }
  #products .flip-card:first-child,
  #products .flip-card:nth-child(2),
  #products .flip-card:nth-child(3) {
    margin-bottom: 39px;
  }
  #products .flip-card .texts h5 {
    font-size: 14px;
    -webkit-line-clamp: 7;
  }
}

@media (max-width: 991px) {
  #products-banner-section {
    margin-top: 66px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #products-banner-section h6 {
    font-size: 24px;
    line-height: 1.1;
  }
  #products h1 {
    padding: 36px 10px 30px 10px;
  }
  .flip-card {
    width: 50%;
    height: 360px;
    padding: 0px 17px;
  }
  #products .flip-card:not(:last-child) {
    margin-bottom: 34px;
}
  #products .wrapper {
    max-width: 720px;
    padding: 50px 0px 11px 0px;
  }
  #products .flip-card p {
    font-size: 30px;
    padding: 30px 10px 17px 10px;
  }
  #products .flip-card .texts h4 {
    font-size: 17px;
    padding-top: 10px;
  }
  #products .flip-card .texts {
    padding: 0px 16px 10px 16px;
}
  #products .flip-card .texts p {
    padding: 15px 0px 10px 0px;
  }
  #products .flip-card .texts h5 {
    font-size: 14px;
    -webkit-line-clamp: 7;
  }
  #products .flip-card:first-child,
  #products .flip-card:nth-child(2),
  #products .flip-card:nth-child(3),
  #products .flip-card:nth-child(4) {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  #products-banner-section h6 {
    font-size: 14px;
    line-height: 1;
  }
  #products h1 {
    padding: 36px 10px 20px 10px;
  }
  #products .wrapper {
    padding: 0px 42px 8px 42px;
    max-width: 420px;
  }
  #products .content {
    background-color: transparent;
  }
  .flip-card {
    width: 100%;
    padding: 0px 4px;
    min-height: 317px;
    height: auto;
    margin-bottom: 34px !important;
  }
  #products .flip-card .image {
    padding: 26px 8px 0px 8px;
  }

  #products .flip-card-back p {
    font-size: 27px !important;
  }

  #products .flip-card p {
    font-size: 24px;
    padding: 18px 10px 10px 10px;
  }
  #products .flip-card .top-image img {
    max-width: 180px;
  }
  #products .flip-card .texts h4 {
    font-size: 13px;
    padding-top: 9px;
  }
  #products .flip-card .texts p {
    padding: 9px 0px 10px 0px;
  }
  #products .flip-card .texts {
    padding: 0px 16px 16px 21px;
  }
  #products .flip-card .texts h5 {
    font-size: 13px;
    -webkit-line-clamp: 7;
  }
}
