@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,900;1,400&display=swap");
html, body {
  height: 100%;
}

body {
  background: linear-gradient(to left, #7275a4, #4a4872, #302d4a);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.pricing-table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 768px;
}

.pricing-table {
  display: flex;
  width: 800px;
  height: 450px;
}
.pricing-table .standard, .pricing-table .plus {
  transition: 0.3s all ease;
}
.pricing-table .standard::after, .pricing-table .plus::after {
  position: absolute;
  width: 150px;
  height: 20px;
  content: "";
  bottom: 69px;
  left: 22%;
  background: red;
  box-shadow: -3px 3px 10px #0f0f0f;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
}
.pricing-table .standard:hover, .pricing-table .plus:hover {
  transform: scale(1.2);
  box-shadow: 0 0 24px 10px rgba(15, 15, 15, 0.5);
  z-index: 11;
}
.pricing-table .standard, .pricing-table .plus, .pricing-table .ultimate {
  flex: 1;
  height: 100%;
  color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  border-radius: 12px;
}
.pricing-table .standard h2, .pricing-table .plus h2, .pricing-table .ultimate h2 {
  text-align: center;
  position: relative;
}
.pricing-table .standard h2::after, .pricing-table .plus h2::after, .pricing-table .ultimate h2::after {
  width: 20px;
  height: 3px;
  background-color: rgb(240, 240, 240);
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.pricing-table .standard h4, .pricing-table .plus h4, .pricing-table .ultimate h4 {
  text-align: center;
}
.pricing-table .standard h4, .pricing-table .standard ul, .pricing-table .plus h4, .pricing-table .plus ul, .pricing-table .ultimate h4, .pricing-table .ultimate ul {
  font-family: "Nunito", sans-serif;
}
.pricing-table .standard h4 b, .pricing-table .standard ul b, .pricing-table .plus h4 b, .pricing-table .plus ul b, .pricing-table .ultimate h4 b, .pricing-table .ultimate ul b {
  font-weight: 900;
}
.pricing-table .standard .price, .pricing-table .plus .price, .pricing-table .ultimate .price {
  position: absolute;
  color: rgba(210, 210, 210, 0.15);
  width: 100%;
  font-size: 125px;
  font-weight: 900;
  text-align: center;
}
.pricing-table .standard .price .span1, .pricing-table .plus .price .span1, .pricing-table .ultimate .price .span1 {
  font-size: 30px;
  position: absolute;
  top: 9px;
  left: 3px;
}
.pricing-table .standard .price .span2, .pricing-table .plus .price .span2, .pricing-table .ultimate .price .span2 {
  font-size: 30px;
  position: absolute;
  top: 15px;
  right: 3px;
}
.pricing-table .standard {
  background: linear-gradient(135deg, #5464bf, #6a99ca, #6eb0be);
}
.pricing-table .standard::after {
  content: "Rp100rb/bln/komp";
}
.pricing-table .standard h4 {
  margin: 0 10px;
}
.pricing-table .plus {
  background: linear-gradient(135deg, #fa90a3, #d589d2, #bb8ae6);
}
.pricing-table .plus::after {
  content: "Rp200rb/bln/komp";
}
.pricing-table .plus .lines {
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  height: 100px;
  background-image: url(../img/lines.png);
  background-size: cover;
}
.pricing-table .plus h4 #jitu_standard {
  text-shadow: 0 0 10px #0f0f0f;
}
.pricing-table .ultimate {
  background: linear-gradient(135deg, #ca689e, #de8ca1, #dbbc88);
  transform: scale(1.1);
  z-index: 10;
  box-shadow: 0 0 24px 10px rgba(15, 15, 15, 0.5);
}
.pricing-table .ultimate::after {
  position: absolute;
  width: 150px;
  height: 20px;
  bottom: 39px;
  left: 22%;
  background: red;
  box-shadow: -3px 3px 10px #0f0f0f;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  content: "Rp300rb/bln/komp";
}
.pricing-table .ultimate h4 {
  margin: 0 10px;
}
.pricing-table .ultimate .req_demo {
  position: relative;
  top: 28px;
  z-index: 12;
}
.pricing-table .ultimate .waves {
  position: absolute;
  content: "";
  bottom: 0;
  border-radius: 12px;
  width: 100%;
  height: 176px;
  background-image: url(../img/waves.png);
  background-size: cover;
}
.pricing-table .req_demo {
  display: flex;
  justify-content: center;
  transition: 0.3s all ease;
}
.pricing-table .req_demo:hover {
  transform: scale(1.2);
}
.pricing-table .req_demo:hover i {
  margin: 0 0 0 40px;
}
.pricing-table .req_demo button {
  width: 80%;
  padding: 15px;
  border-radius: 25px;
  border: none;
  color: rgb(160, 158, 158);
  font-size: 16px;
  box-shadow: 0 8px 12px 3px rgba(15, 15, 15, 0.2);
}
.pricing-table .req_demo button i {
  margin: 0 0 0 10px;
  transition: 0.3s all ease;
}

.desc-pricing-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.desc-pricing {
  width: 60%;
  border-radius: 2em;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  padding: 0 20px;
  margin-bottom: 50px;
}
.desc-pricing h2 {
  letter-spacing: 5px;
  color: red;
  text-align: center;
}
.desc-pricing #hanya_dengan {
  display: flex;
  flex-direction: column;
  margin-top: -25px;
}
.desc-pricing #hanya_dengan p {
  align-self: center;
  text-align: center;
}
.desc-pricing #hanya_dengan span {
  font-size: 13px;
  align-self: self-end;
  margin-top: -15px;
}

/*# sourceMappingURL=pricing.css.map */