:root {
  --primary: #20c997;
  --bg: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

/* UTILITY */
body {
  background-color: var(--bg);
  overflow: overlay;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightgrey;
}

::-webkit-scrollbar-corner {
  background: lightgrey;
}

.tombol {
  text-transform: uppercase;
  border-radius: 40px;
}

.tombol-contact {
  border-radius: 10px;
}

.pt-6 {
  padding-top: 4rem;
}

h3 {
  font-family: "Lato", sans-serif;
}

h2 {
  font-family: "Roboto", sans-serif;
}

.card-baik {
  font-size: 10px;
  color: rgb(64, 64, 73);
}

/* NAVBAR */

.navbar {
  padding: 20px 0;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0)
  );
  transition: all 1s ease-in-out;
}

.navbar-ex {
  padding: 0px !important;
}

.bayangan {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.fadeout {
  transition: all 1s ease-in-out;
}

.navbar-brand {
  font-family: Viga;
  font-size: 20px;
}

.logo {
  height: 17px;
  margin-top: -4px;
  margin-right: 10px;
}

/* JUMBOTRON */
.jumbotron {
  background-image: url(../img/server-bg-grad.jpg);
  background-size: cover;
  height: 700px;
  padding-top: 17rem;
  position: relative;
  transition: all 1s ease-in-out;
}

.jumbotron-ex {
  height: 500px !important;
  padding-top: 20rem !important;
  transition: all 1s ease-in-out;
}

/* flexible jumbotron */
@media (min-height: 600px) {
  .jumbotron {
    height: 600px;
    padding-top: 15rem;
  }
}
@media (min-height: 660px) {
  .jumbotron {
    height: 665px;
    padding-top: 16rem;
  }
}
@media (min-height: 740px) {
  .jumbotron {
    height: 768px;
    padding-top: 18rem;
  }
}
@media (min-height: 800px) {
  .jumbotron {
    height: 800px;
    padding-top: 19rem;
  }
}
@media (min-height: 840px) {
  .jumbotron {
    height: 850px;
    padding-top: 21rem;
  }
}
@media (min-height: 890px) {
  .jumbotron {
    height: 915px;
    padding-top: 22rem;
  }
}

.display-4 {
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  margin-bottom: 20px;
  font-size: 30px;
}

.lead {
  color: white;
  font-weight: 400;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  font-size: 15px;
}

.display-4 span {
  font-weight: 500;
}

.container {
  z-index: 1;
  position: relative;
}

/* SERVICES */
.carousel {
  padding-top: 0;
}

.carousel::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    180deg,
    rgb(0, 0, 0) 5%,
    rgba(255, 255, 255, 0) 25%
  );
  position: absolute;
  bottom: 0;
}
.carousel-caption {
  color: white;
  text-shadow: 1px 1px 3px rgb(0, 0, 0);
}
.ket-service h3 {
  color: #20c997;
}

#more {
  display: none;
}
#more1 {
  display: none;
}
#more2 {
  display: none;
}

.ket-service,
.carousel {
  font-family: "Poppins", sans-serif;
}

.deskripsi {
  font-size: 14px;
  color: rgb(64, 64, 73);
}

.c-more {
  font-size: small;
  color: rgb(143, 143, 143);
  text-decoration: none;
  cursor: pointer;
}

/* PRICING */

/*
.cont-pricing::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0, 0, 0, 0.6), rgba(0,0,0,0.8) );
    position: absolute;
    bottom: 0;
    margin-left: -12px;
}
*/

.row-depan {
  z-index: 1;
  position: relative;
}

@media (min-width: 768px) {
  .space-gauge {
    height: 20px !important;
  }
  .tag-mbps {
    padding-top: 30px;
  }
}

@media (max-width: 768px) {
  .tag-mbps {
    padding-top: 5px;
  }
}

.tag-mbps {
  margin-top: -150px;
}
/* size gauge */
.gauge {
  max-width: 200px;
  padding: 20px;
  padding-top: 3rem;
}

.space-gauge {
  height: 50px;
}

.gauge-nonpromo {
  width: 200px;
  padding: 20px;
}
.card-img-top {
  border-radius: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  background-color: white;
}

.card-title {
  color: #9c9c9c;
  font-weight: 700;
}

.card-title.best {
  color: #20c997;
  font-weight: 700;
}

.promo {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  left: 50%;
}

.tag-promo {
  width: 90px;
  text-transform: uppercase;
  border-radius: 20px;
  background-color: #9c9c9c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
}

.tag-promo.best {
  width: 130px;
  text-transform: uppercase;
  border-radius: 20px;
  background-color: #20c997;
}

.promo-text {
  padding: 8px;
}

.tombol-paket {
  margin: 1rem;
  border-radius: 10px;
}

.card .btn-primary {
  background-color: #20c997;
  border-color: #20c997;
}

.card .btn-primary:hover {
  background-color: #04966a;
  border-color: #04966a;
}
.card-border {
  padding: 4px;
  margin: -5px;
  border-radius: 5px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.card-border-best {
  padding: 4px;
  margin: -5px;
  border-radius: 5px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.card {
  background-color: rgb(255, 255, 255);
  border: none;
}

/* .card-border-best {
    background:
    linear-gradient(90deg,#0dcaf0 50%,#dc3545 0%) top/100% 40% no-repeat,
    linear-gradient(90deg,#ffc107 50%,#dc3545 0%) top/100% 60% no-repeat,
    linear-gradient(90deg,#ffc107 60%,#20c997 0%) top/100% 100%;
    box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.801);
}*/
.card-zoom:hover {
  padding-top: 2px;
  transition: all 100ms ease-in-out;
}
.card-border:hover {
  background: #c9c9c9;
  box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.3);
  transition: all 200ms ease-in-out;
}

.card-border-best:hover {
  background: #20c997;
  box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.3);
  transition: all 200ms ease-in-out;
}

/* .best-choice { */
/* background-image: linear-gradient(to bottom, rgba(0, 102, 255, 0.5),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)); */
/* } */

.card-text {
  display: flex;
  margin-bottom: 0px;
}

.icon-list {
  color: rgb(26, 115, 232);
}

.list-card {
  padding-left: 10px;
  font-family: sans-serif;
  font-size: 14px;
}

/* COVERAGE AREA */
.scrolloff iframe {
  pointer-events: none;
}

.peta-cakupan {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
}
/* FOOTER */

.jud-pricing {
  text-shadow: 1px 1px 1px rgba(194, 194, 194, 0.7);
}

/* HP VERSION */
@media (max-width: 992px) {
  .jumbotron {
    background-position-x: center;
  }
}

/* DESKTOP VERSION */
@media (min-width: 992px) {
  /* NAVBAR */
  .nav-link {
    text-transform: uppercase;
    margin-right: 20px;
  }

  .navbar-brand,
  .nav-link {
    color: white !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  }

  .navbar-brand {
    font-size: 26px;
  }

  .logo {
    height: 22px;
    margin-top: -4px;
    margin-right: 10px;
  }

  .nav-link:hover::after {
    content: "";
    display: block;
    border-bottom: 3px solid rgb(1, 247, 255);
    width: 50%;
    margin: auto;
    padding-bottom: 5px;
    margin-bottom: -8px;
  }

  /* JUMBOTRON */
  .jumbotron {
    min-height: 620px;
  }
  .jumbotron::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      0deg,
      rgb(1, 1, 3, 1) 1%,
      rgba(255, 255, 255, 0) 15%
    );
    position: absolute;
    bottom: 0;
  }

  .display-4 {
    font-size: 62px;
  }
  .lead {
    font-size: 25px;
  }

  /* SERVICES */
  .carousel {
    padding-top: 0;
  }
  .carousel-item {
    height: 450px;
  }

  .carousel-caption {
    z-index: 1;
    margin-bottom: 0;
  }

  /* PRICING */

  .card-body {
    min-height: 14rem;
  }
  .card-title {
    text-transform: uppercase;
  }

  .tombol-kirim {
    text-align: center;
  }

  .gauge {
    width: 200px;
    padding: 20px;
    padding-top: 3rem;
  }

  .space-gauge {
    height: 40px !important;
  }
  .tag-mbps {
    padding-top: 0px;
  }
}