#produk .head {
  background: url(produk-h2.webp) no-repeat;
  width: 100%;
  display: table;
}

#produk .head h1 {
  font-size: 45px;
  padding: 3% 0 2%;
  text-align: right;
  width: 100%;
}

#produk .text-right {
  width: 40%;
  text-align: right;
  float: right;
  padding-bottom: 19.5%;
}

#produk .badan ul {
  display: table;
  width: 100%;
}

#produk .badan li {
  width: 33%;
  padding: 1% 1.5% 5%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
}

#produk .badan li dl {
  margin: 0 auto;
}

#produk .badan h2 p {
  margin: 0 auto;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
}

#produk .badan h2 img {
  width: 25%;
}

#produk .badan h2.listrik { color: #6d93df; }
#produk .badan h2.telco { color: #88babb; }
#produk .badan h2.voucher { color: #65df9b; }
#produk .badan h2.pdam { color: #6fc8b6; }
#produk .badan h2.finance { color: #5f77bb; }
#produk .badan h2.pajak { color: #b8ac5f; }
#produk .badan h2.tv { color: #cea176; }
#produk .badan h2.bpjs { color: #934c63; }
#produk .badan h2.travel { color: #dcd477; }
#produk .badan h2.gas { color: #8fdd56; }
#produk .badan h2.lapan { color: #8e8e8e; }
#produk .badan h2.topup { color: #65df9b; }
#produk .badan h2.lain { color: #f0195f; }
#produk .badan h2.pendidikan { color: #f89c36; padding-bottom: 2%; }

#produk .badan li dt,
#produk .badan li dd {
  text-align: center;
  margin: 0 auto;
}

#produk .badan li dt {
  padding-bottom: 3%;
}

#produk .badan .air {
  width: 100%;
  display: table;
  margin: 0 auto;
  padding-bottom: 5%;
}

#produk .badan .air dd,
#produk .badan .air dt {
  margin: 0 auto;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
}

#produk .badan .air h2 {
  width: 30%;
  margin: 0 auto;
}

#produk .badan .air dd span {
  font-size: 25px;
}

#produk .badan .air h4 {
  font-weight: bold;
  padding-top: 2%;
}

#produk .badan .air li {
  width: 25%;
  text-align: left;
  float: left;
  padding: 0.2% 0;
}

#produk .badan .air ul {
  padding: 0;
}

#produk .quote {
  background: url(produk-quote.webp) no-repeat;
  background-size: contain;
  display: table;
}

#produk .quote p {
  width: 35%;
  font-size: 50px;
  padding: 10% 0 10% 30%;
  line-height: 70px;
  font-weight: bold;
  float: right;
}

#produk .quote p i {
  font-size: 20px;
  font-weight: 100;
}

.wraper2 {
  width: 80%;
  padding: 0 10%;
}

@media screen and (max-width: 1024px) {
  .wraper2 {
    width: 90%;
    padding: 0 5%;
  }

  #produk .head {
    background: url(produk-h2-m.webp) no-repeat;
    width: 100%;
    background-size: contain;
  }

  #produk .head h1 {
    font-size: 45px;
    padding: 75% 0 2%;
    text-align: left;
    width: 100%;
  }

  #produk .text-right {
    width: 100%;
    text-align: left;
    float: none;
    padding-bottom: 5%;
  }

  #produk .badan li {
    width: 47%;
    padding: 1% 1.5% 5%;
  }

  #produk .badan h2 p {
    font-size: 30px;
    text-align: left;
    margin: 0;
  }

  #produk .badan h2 img {
    width: 50%;
  }

  #produk .badan li dt,
  #produk .badan li dd {
    text-align: left;
    margin: 0;
  }

  #produk .badan .air h2 {
    margin: 0;
  }

  #produk .badan .air dd,
  #produk .badan .air dt {
    font-size: 30px;
    text-align: left;
  }

  #produk .badan .air h2 {
    width: 47%;
  }

  #produk .badan .air li {
    width: 50%;
    text-align: left;
    float: left;
    padding: 0.2% 0;
  }

  #produk .quote p {
    width: 100%;
    font-size: 35px;
    padding: 75% 0 0 0;
    line-height: 40px;
    float: none;
    text-align: center;
  }

  #produk .quote {
    background: url(produk-quote-m.webp) no-repeat;
    background-size: contain;
    display: table;
    padding-bottom: 10%;
  }
}