* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.carry-bags {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/carry-hero.png) !important ;
}

.tissues-and-wipes-hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues-and-wipes-hero.png) !important ;
}

.thermal-roll-hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal-roll-hero.png) !important ;
}

#hero-section p {
  width: 70%;
}

h3 {
  font-family: "Istok Web", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 35px;
  padding: 0px 20px;
  margin-top: 5vh;
  width: 40vw;
  text-align: center;
}

h4 {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  color: #3b3b3b;
  width: 50vw;
  text-align: center;
  padding: 10px 20px;
  /* text-align: center; */
}

.products {
  min-height: 100vh;
  width: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 0px;
  margin: 10vh 0;
}

.products > div {
  width: 30%;
  height: 60vh;
}

.card-title {
  color: white !important;
  padding-right: 75%;
  font-size: 20px !important;
}

.card-desc {
  padding: 10px;
  color: rgb(255, 255, 255) !important;
  line-height: 120%;
  margin-bottom: 30px;
}

.products .card {
  transition: all 0.2s;
  background-position: center;
  background-size: cover;
}

.products .card:hover {
  scale: 1.03;
  box-shadow: 0px 0px 30px black;
}

.card-cta::after {
  content: "";
  position: absolute;
  background-color: #2979ff;
  height: 3px;
  width: 0;
  left: 0;
  bottom: -2px;
  transition: 0.3s;
}

.card-cta:hover::after {
  width: 100%;
}

.pcb {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/pcb.jpg) !important ;
}

.kpb {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/kpb.jpg) !important ;
}

.sb {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/spb.jpg) !important ;
}

.fppb {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/lb.jpg) !important ;
}

.cppb {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/cppb.jpg) !important ;
}

.pe {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/pe.jpg) !important ;
}

.kbe {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/kbe.jpg) !important ;
}

.we {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/we.jpg) !important ;
}

.ce {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/paper-bags/ce.jpg) !important ;
}

.sw {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/sw.jpg) !important ;
}

.ww {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/ww.jpg) !important ;
}

.kf {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/kf.jpg) !important ;
}

.fw {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/fw.jpg) !important ;
}

.ft {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/facial.jpg) !important ;
}

.tt {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/toilet.jpg) !important ;
}

.kt {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/kitchen.jpg) !important ;
}

.ht {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/hand.jpg) !important ;
}

.n {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/tissues/napkin.jpg) !important ;
}

.pos {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/pos.jpg) !important ;
}
.atm {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/atm.jpg) !important ;
}
.bm {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/billing.jpg) !important ;
}
.btr {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/barcode.jpg) !important ;
}
.ltr {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/label.jpg) !important ;
}
.mdtr {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/medical.jpg) !important ;
}
.ws {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/weight.jpg) !important ;
}
.ttr {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/thermal/parking.jpg) !important ;
}

@media (max-width: 768px) {
  .card {
    width: 90vw !important;
  }
  .card-desc {
    width: 250px !important;
  }
  .card-title {
    width: 150px !important;
    padding: 0;
  }
  .carry-bags h1 {
    font-size: 30px;
  }
  .carry-bags p {
    font-size: 15px;
    width: 95vw !important;
  }
  .tissues-and-wipes-hero h1 {
    font-size: 30px;
  }
  .tissues-and-wipes-hero p {
    font-size: 15px;
    width: 95vw !important;
  }
  .thermal-roll-hero h1 {
    font-size: 30px;
  }
  .thermal-roll-hero p {
    font-size: 15px;
    width: 95vw !important;
  }
  h3 {
    font-size: 25px;
    margin-top: 0vh;
    width: 100%;
  }
  h4 {
    font-size: 15px;
    margin-top: 0vh;
    width: 100%;
  }
}