:root {
  --c-hitam-1: 0, 0, 0;
  --c-hitam-2: 10, 10, 10;
  --c-hitam-3: 40, 40, 40;
  --c-hitam-4: 60, 60, 60;
  --c-hitam-5: 80, 80, 80;
  --c-abuabu-1: 100, 100, 100;
  --c-abuabu-2: 130, 130, 130;
  --c-abuabu-3: 160, 160, 160;
  --c-abuabu-4: 200, 200, 200;
  --c-biru-1: 0, 100, 255;
  --c-biru-2: 55, 120, 240;
  --c-putih-1: 250, 250, 250;
  --cs-box-shadow-1: rgba(var(--c-hitam-3), 0.3);
  --font-size-1: 1.4em;
  --font-size-1b: 1.5em;
  --font-size-2: 1.6em;
  --font-size-3: 1.8em;
  --font-size-4: 2em;
  --font-size-5: 2.5em;
  --font-size-6: 3em;
  --font-size-7: 3.5em;
  --font-size-8: 4em;
  --font-family-1: "quicksand", sans-serif;
  --font-family-2: "raleyway", sans-serif;
  --height-header: 11.4em;
  --px-container: 8%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  border: none;
  outline: none;
  color: inherit;
  background-color: transparent;
}

.h1,
.h2,
.h3,
.h4,
.h5 {
  width: 100%;
  height: max-content;
  font-weight: 700;
  text-transform: capitalize;
  color: inherit;
  line-height: 1.6;
}

.p,
li {
  font-size: var(--font-size-1);
  color: inherit;
  line-height: 1.4;
  font-weight: 600;
}

.h1 {
  font-size: var(--font-size-6);
}

.h2 {
  font-size: var(--font-size-5);
}

.h3 {
  font-size: var(--font-size-4);
}

.h4 {
  font-size: var(--font-size-3);
}

.h5 {
  font-size: var(--font-size-2);
}

.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.button {
  width: max-content;
  height: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  text-transform: capitalize;
  border-radius: 0.25em;
}

.d-none {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font-family-1);
}

.container {
  position: relative;
  width: 100%;
  min-height: max-content;
  color: rgba(var(--c-hitam-2));
  background-color: rgba(var(--c-putih-1));
  margin-bottom: 8em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .button-top {
  z-index: 10;
  transition: 0.3s ease;
  position: fixed;
  bottom: 6em;
  left: 8em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  transform: translateY(300%);
  border-radius: 1em;
  overflow: hidden;
}
.container .button-top:hover i {
  opacity: 1;
}
.container .button-top.aktif {
  transform: inherit;
}
.container .button-top i {
  line-height: 1;
  font-size: 4.5em;
  color: rgba(var(--c-putih-1));
  background: rgba(var(--c-biru-2));
  opacity: 0.6;
}

.container .button-kontak {
  z-index: 4;
  width: max-content;
  height: max-content;
  position: fixed;
  bottom: 6em;
  right: 8em;
}
.container .button-kontak .button-open {
  z-index: 2;
  position: absolute;
  transition: 0.3s ease-in-out;
  font-size: var(--font-size-1);
  width: 3.8em;
  aspect-ratio: 1/1;
  border-radius: 100%;
  color: rgba(var(--c-putih-1), 0.95);
  background: rgb(37, 207, 79);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.container .button-kontak .button-open .aktif {
  transform: rotateZ(0) !important;
}
.container .button-kontak .button-open * {
  transition: 0.3s ease;
  position: absolute;
  font-size: var(--font-size-3);
}
.container .button-kontak .button-open i.i-close {
  font-size: var(--font-size-6);
  z-index: 1;
  opacity: 0;
}
.container .button-kontak .button-open i.i-open {
  z-index: 2;
}
.container .button-kontak .button-link {
  transition: 0.3s ease-in-out;
  z-index: 1;
  bottom: 0;
  right: 2.75%;
  position: absolute;
  border-radius: 100%;
  width: 5.25em;
  height: 5.25em;
  background-color: rgb(37, 207, 79);
  align-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  box-shadow: 0 0.2em 0.5em rgba(var(--c-hitam-1), 0.5);
}
.container .button-kontak .button-link img {
  width: 85%;
}
.container .button-kontak .button-link::after {
  text-wrap: nowrap;
}
.container .button-kontak .button-link:nth-of-type(1)::after {
  content: "Whatsapp Kami";
  font-size: var(--font-size-3);
  font-weight: 500;
  position: absolute;
  display: flex;
  right: 3.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0.1em 0.25em;
  background-color: rgba(var(--c-putih-1), 0.95);
  visibility: hidden;
  opacity: 0;
}
.container .button-kontak .button-link:nth-of-type(1):hover::after {
  visibility: visible;
  opacity: 0.9;
}
.container .button-kontak .button-link:nth-of-type(2)::after {
  content: "Tokopedia Kami";
  font-size: var(--font-size-3);
  font-weight: 600;
  position: absolute;
  display: flex;
  right: 3.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0.1em 0.25em;
  background-color: rgba(var(--c-putih-1), 0.95);
  visibility: hidden;
  opacity: 0;
}
.container .button-kontak .button-link:nth-of-type(2):hover::after {
  visibility: visible;
  opacity: 0.9;
}
.container .button-kontak .h3 {
  transition: opacity 0.3s ease;
  line-height: 1;
  width: max-content;
  height: max-content;
  top: 0.5em;
  right: 3em;
  padding: 0.25em 0.5em;
  font-weight: 500;
  text-wrap: nowrap;
  position: absolute;
  background-color: rgba(var(--c-putih-1), 0.95);
  border-radius: 0.5em;
  box-shadow: 0 0.15em 0.25em rgba(var(--c-hitam-1), 0.6);
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 820px) {
  .container .button-kontak {
    bottom: 5.5em;
    right: 5.5em;
  }
}
@media screen and (max-width: 450px) {
  .container .button-kontak {
    bottom: 3em;
    right: 3em;
    font-size: 110%;
  }
} /*# sourceMappingURL=style.button-kontak.css.map */

.container .main {
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 6em;
}
.container .main .content {
  padding: 2em var(--px-container) 0 var(--px-container);
}

@media screen and (max-width: 450px) {
  .container .button-top {
    left: 4.5em;
    bottom: 4.5em;
  }
  .container .button-top i {
    font-size: 5em;
  }
}
.container .header {
  display: none;
  z-index: 3;
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
  min-height: 11.4em;
  max-height: 12em;
  background-color: rgba(var(--c-putih-1), 0.95);
  box-shadow: 0 0.9em 1.5em -1.5em var(--cs-box-shadow-1);
  padding: 0 var(--px-container);
}
.container .header .logo {
  position: relative;
  display: flex;
  width: max-content;
  height: max-content;
  justify-content: center;
  align-items: center;
}
.container .header .logo .img {
  min-width: 24em;
  max-width: 24.4em;
}
.container .header .nav {
  display: flex;
  gap: 3.52em;
}
.container .header .nav .nav-link {
  transition: 0.25s ease;
  font-family: var(--font-family-2);
  font-size: 1.4em;
  font-weight: 600;
  color: rgba(var(--c-abuabu-2));
  text-transform: capitalize;
  margin-top: 3px;
}
.container .header .nav .nav-link::after {
  transition: inherit;
  content: "";
  display: block;
  border-bottom: 1px solid;
  padding-top: 3px;
  transform: scale(0);
}
.container .header .nav .nav-link:hover {
  color: rgba(var(--c-hitam-2));
}
.container .header .nav .nav-link:hover::after {
  transform: scale(0.6);
}
.container .header .nav .nav-link.aktif {
  color: rgba(var(--c-hitam-2));
  margin-top: 3px;
}
.container .header .nav .nav-link.aktif::after {
  transition: inherit;
  content: "";
  display: block;
  border-bottom: 1px solid;
  padding-top: 3px;
  transform: scale(0.6);
}
.container .header .menu {
  font-size: var(--font-size-8);
  width: max-content;
  height: max-content;
}

@media screen and (max-width: 820px) {
  .container .header .nav {
    transition: 0.4s ease;
    z-index: 4;
    position: fixed;
    top: var(--height-header);
    right: 0;
    flex-direction: column;
    gap: 1px;
    min-width: 42.5%;
    max-width: 45%;
    height: 100%;
    background-color: rgba(var(--c-putih-1), 0.95);
    box-shadow: -1em 0 1em -1em var(--cs-box-shadow-1);
  }
  .container .header .nav .nav-link {
    width: 100%;
    padding: 0.8em 1.25em;
    font-size: var(--font-size-3);
  }
  .container .header .nav .nav-link:hover {
    color: rgba(var(--c-putih-1));
    background-color: rgba(var(--c-biru-2), 0.8);
  }
  .container .header .nav .nav-link::after {
    border: none;
  }
  .container .header .nav .nav-link.aktif {
    color: rgba(var(--c-putih-1));
    background-color: rgba(var(--c-biru-2), 0.8);
  }
  .container .header .nav .nav-link.aktif::after {
    border: none;
  }
  .container .header .nav.hidden {
    transform: translateX(110%);
  }
}
@media screen and (max-width: 450px) {
  .container .header {
    width: 10%;
  }
  .container .header .nav {
    min-width: 72.5%;
    max-width: 77.5%;
  }
}
.container .main .beranda {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(var(--c-putih-1), 0.9);
  background-image: linear-gradient(75deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.75) 22%, transparent 100%), url(../img/beranda/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  gap: 1em;
  padding: var(--height-header) var(--px-container) 0 var(--px-container);
}
.container .main .beranda * {
  max-width: 55%;
}
.container .main .beranda .h1::after {
  content: "";
  display: block;
  width: 2em;
  padding-top: 0.8em;
  border-bottom: 1px solid rgba(var(--c-putih-1), 0.5);
}
.container .main .beranda .p {
  font-size: 15px;
}
.container .main .beranda .button {
  transition: 0.3s ease;
  margin-top: 1.25em;
  padding: 0.8em 1.6em;
  font-size: var(--font-size-2);
  font-weight: 600;
  background-color: rgba(var(--c-biru-1));
}
.container .main .beranda .button:hover {
  background-color: rgba(var(--c-biru-1), 0.8);
}

@media screen and (max-width: 1092.8px) and (min-height: 874.24px) {
  .container .main .content.beranda {
    min-height: 80em !important;
  }
}
@media screen and (max-width: 1092.8px) {
  .container .main .content.beranda * {
    max-width: 70%;
  }
}
@media screen and (max-width: 956.2px) {
  .container .main .content.beranda * {
    max-width: 80%;
  }
}
@media screen and (max-width: 820px) {
  .container .main .content.beranda {
    padding: var(--height-header) var(--px-container) 0 var(--px-container);
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.beranda {
    gap: 1.5em;
    min-height: 100vh;
  }
  .container .main .content.beranda * {
    max-width: 100%;
    text-align: center;
  }
  .container .main .content.beranda .h1::after {
    color: rgba(var(--c-putih-1), 0.9);
    padding-top: 1em;
    width: 100%;
    border-bottom: 3px solid;
    transform: scale(0.2);
  }
  .container .main .content.beranda .button {
    margin: 1em auto;
    font-size: var(--font-size-3);
  }
}
.container .main .content.tentang-kami {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3em;
}
.container .main .content.tentang-kami .box {
  flex: 1;
}
.container .main .content.tentang-kami .box:nth-child(1) {
  position: relative;
  height: 100%;
  width: auto;
}
.container .main .content.tentang-kami .box:nth-child(1) .img-box {
  width: 100%;
  min-height: 45em;
  max-height: 50em;
  border-radius: 0 8em 20em 0;
}
.container .main .content.tentang-kami .box:nth-child(1) .img-box img {
  width: 100%;
  height: auto;
}
.container .main .content.tentang-kami .box:nth-child(1) .label {
  position: absolute;
  top: 10%;
  right: -2.5%;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-weight: 700;
}
.container .main .content.tentang-kami .box:nth-child(1) .label .h3 {
  color: rgba(var(--c-putih-1), 1);
  line-height: 1;
  padding: 0.15em 0.5em;
  color: rgba(var(--c-putih-1), 0.9);
  background-color: rgba(var(--c-biru-1), 1);
  box-shadow: 0.2em 0.2em rgba(var(--c-hitam-1), 0.9);
}
.container .main .content.tentang-kami .box:nth-child(1) .label .h4 {
  color: rgba(var(--c-hitam-1), 0.9);
}
.container .main .content.tentang-kami .box:nth-child(2) {
  color: rgba(var(--c-hitam-1), 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3em;
}
.container .main .content.tentang-kami .box:nth-child(2) .h1 {
  color: rgba(var(--c-biru-1), 1);
}
.container .main .content.tentang-kami .box:nth-child(2) .h1::after {
  content: "";
  display: block;
  width: 2em;
  padding-top: 0.25em;
  border-bottom: 1px solid;
}
.container .main .content.tentang-kami .box:nth-child(2) .img-con {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.container .main .content.tentang-kami .box:nth-child(2) .img-con img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 820px) {
  .container .main .content.tentang-kami {
    flex-direction: column;
    gap: 0;
  }
  .container .main .content.tentang-kami .box:nth-child(1) {
    min-height: 48em;
    justify-content: center;
    align-items: center;
  }
  .container .main .content.tentang-kami .box:nth-child(1) .img-box {
    width: 100%;
    height: 50em;
    overflow: hidden;
    position: relative;
    border-radius: 0 10em 26em 0;
  }
  .container .main .content.tentang-kami .box:nth-child(1) .img-box img {
    width: 100%;
    height: auto;
    position: relative;
  }
  .container .main .content.tentang-kami .box:nth-child(2) {
    min-height: max-content;
    padding: 2em 0;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.tentang-kami .box:nth-child(1) {
    min-height: max-content;
  }
  .container .main .content.tentang-kami .box:nth-child(1) .img-box {
    border-radius: 0 6em 16em 0;
    max-height: 42em;
  }
  .container .main .content.tentang-kami .box:nth-child(1) .label .h4 {
    width: max-content;
    padding: 0.1em 0.25em;
    margin-left: auto;
    background-color: rgba(var(--c-putih-1), 0.9);
    box-shadow: 0.15em 0.15em 0;
  }
  .container .main .content.tentang-kami .box:nth-child(2) {
    min-height: max-content;
  }
}
.container .main .content.visi-misi {
  min-height: 60em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(var(--c-putih-1));
  background-image: linear-gradient(90deg, rgb(53, 134, 255) 0%, rgb(50, 85, 138) 52%, rgba(50, 85, 138, 0.5) 65%, rgba(50, 85, 138, 0) 75%), url(../img/visi-misi.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto, auto 100%;
  background-position: right bottom, right;
  height: max-content;
  gap: 1.5em;
}
.container .main .content.visi-misi * {
  width: 80%;
  flex-direction: column;
  color: rgba(var(--c-putih-2));
  gap: 1.5em;
}
.container .main .content.visi-misi .box {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.container .main .content.visi-misi .box .p,
.container .main .content.visi-misi .box li {
  line-height: 1.8;
  font-weight: 600;
}
.container .main .content.visi-misi .box b {
  font-weight: 1000 !important;
}

@media screen and (max-width: 820px) {
  .container .main .content.visi-misi * {
    width: 85%;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.visi-misi {
    background-image: linear-gradient(90deg, rgba(0, 1, 2, 0.9) 0%, rgba(9, 25, 49, 0.5) 52%, rgba(15, 31, 54, 0.25) 65%, rgba(50, 85, 138, 0) 75%), url(../img/visi-misi.jpg);
    justify-content: center;
    max-height: 120vh;
    gap: 5em;
  }
  .container .main .content.visi-misi .p,
  .container .main .content.visi-misi li {
    font-size: 1.54em;
  }
  .container .main .content.visi-misi * {
    width: 100%;
  }
  .container .main .content.visi-misi .h1:first-child {
    padding-top: 3em;
  }
  .container .main .content.visi-misi .box {
    gap: 1.5em;
  }
  .container .main .content.visi-misi .box:nth-of-type(3) {
    padding-bottom: 8em;
  }
}
.container .main .content.layanan-kami {
  width: 100%;
}
.container .main .content.layanan-kami .box-container {
  position: relative;
}
.container .main .content.layanan-kami .box-container .swiper {
  width: 92.5%;
  height: 100%;
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper {
  padding: 4em 0;
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper .swiper-slide {
  z-index: 3;
  position: relative;
  aspect-ratio: 1/1.15;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2em;
  overflow: hidden;
  box-shadow: 0 0.5em 1.5em rgba(var(--c-hitam-1), 0.75);
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper .swiper-slide img[src="assets/img/layanan/layanan-1.0.4.a.webp"] {
    object-position: left;
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper .swiper-slide .u {
  object-position: center;
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper .swiper-slide .tag {
  position: absolute;
  top: 6%;
  left: 0;
  width: max-content;
  height: max-content;
  padding: 0.2em 1em;
  display: flex;
  color: rgba(var(--c-putih-1), 1);
  background-color: rgba(var(--c-biru-1));
  box-shadow: 0.5em 0.5em 0 rgba(var(--c-hitam-1), 1);
}
.container .main .content.layanan-kami .box-container .swiper .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.container .main .content.layanan-kami .box-container .swiper-button-next,
.container .main .content.layanan-kami .box-container .swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: 0.3s ease;
  width: max-content;
  aspect-ratio: 1/1;
  font-size: 3em;
  color: rgba(var(--c-hitam-1), 0.8);
  box-shadow: 0 0.1em 0.25em rgba(var(--c-hitam-1), 0.5);
  border-radius: 100%;
  opacity: 0.7;
  background-color: rgba(var(--c-putih-1), 1);
}
.container .main .content.layanan-kami .box-container .swiper-button-next:hover,
.container .main .content.layanan-kami .box-container .swiper-button-prev:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}
.container .main .content.layanan-kami .box-container .swiper-button-next::after,
.container .main .content.layanan-kami .box-container .swiper-button-prev::after {
  content: "";
}
@media screen and (max-width: 820px) {
  .container .main .content.layanan-kami .box-container .swiper .swiper-wrapper {
    aspect-ratio: 1/0.7;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.layanan-kami .box-container .swiper .swiper-wrapper {
    aspect-ratio: 1/1.1;
  }
}
.container .main .content.produk-kami {
  display: flex;
  gap: 1.5em;
}
.container .main .content.produk-kami .wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.container .main .content.produk-kami .wrapper:nth-child(1) {
  flex: 0.45;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container {
  position: relative;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper {
  position: absolute;
  min-width: 32em;
  max-width: 34em;
  aspect-ratio: 1/1.25;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper .swiper {
  width: 100%;
  background: black;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--c-hitam-1), 0.25);
  border-radius: 18px;
  color: black;
  position: relative;
  background-color: white;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper .swiper-slide.unik {
  position: relative;
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper .swiper-slide.unik .tag {
  position: absolute;
  top: 6%;
  left: 0;
  padding: 0.2em 1.5em;
  color: white;
  box-shadow: 0.2em 0.2em 0 rgba(var(--c-hitam-1), 0.8);
  background-color: rgba(var(--c-biru-2));
}
.container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper .swiper-slide img {
  width: 100%;
  height: auto;
  object-position: center;
}

.container .main .content.produk-kami .wrapper:nth-child(2) {
  flex: 0.55;
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box {
  width: 100%;
  height: 22em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  padding: 2em;
  color: rgba(var(--c-putih-1), 0.9);
  background-color: rgba(var(--c-biru-2), 0.8);
  gap: 0.5em;
  align-items: stretch;
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box .p,
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box li {
  font-weight: 400;
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box * {
  text-align: center;
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box .img-box {
  margin: auto;
  aspect-ratio: 1/1;
  width: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background-color: rgba(var(--c-putih-1), 0.5);
}
.container .main .content.produk-kami .wrapper:nth-child(2) .box-container .box .img-box i {
  font-size: 3em;
  color: rgba(var(--c-biru-2), 0.8);
}
.container .main .content.produk-kami .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
  z-index: 10000;
}
.container .main .content.produk-kami .overlay img {
  object-fit: fill;
  height: 100%;
  width: auto;
  border-radius: 10px;
}
.container .main .content.produk-kami .overlay.active {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 820px) {
  .container .main .content.produk-kami {
    gap: 4em;
  }
  .container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper {
    min-width: 28em;
    max-width: 30em;
  }
  .container .main .content.produk-kami .wrapper:nth-child(2) .box-container {
    font-size: 80%;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.produk-kami {
    flex-direction: column;
    gap: 2em;
  }
  .container .main .content.produk-kami .wrapper {
    overflow: hidden;
    width: 100%;
    min-height: 20em;
  }
  .container .main .content.produk-kami .wrapper:nth-child(1) {
    flex: 1;
  }
  .container .main .content.produk-kami .wrapper:nth-child(1) .box-container .swiper {
    position: unset;
    min-width: 35em;
  }
  .container .main .content.produk-kami .wrapper:nth-child(2) .h2 {
    font-size: 3.125em;
  }
  .container .main .content.produk-kami .overlay img {
    width: 100%;
    height: auto;
  }
}
.container .main .content.galeri {
  flex-direction: row;
  gap: 20px;
  overflow-x: hidden;
}
.container .main .content.galeri .swiper-container .swiper-pagination {
  position: relative;
  z-index: 2;
  bottom: -10px;
}
.container .main .content.galeri .pagination-container .paginationjs .paginationjs-pages ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  font-size: 1.3em;
}

.container .main .content.galeri .pagination-container .paginationjs .paginationjs-pages ul li {
  padding: 0 8px;
}

ul li.active-page {
  background-color: rgba(var(--c-biru-2), 0.8);
  color: rgba(var(--c-putih-1));
}

.container .main .content.galeri .h1 {
  text-align: center;
  margin-bottom: 0.5em;
}
.container .main .content.galeri .img-container {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.container .main .content.galeri .img-container img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.container .main .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
  z-index: 10000;
}
.container .main .overlay img {
  object-fit: cover;
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}
.container .main .overlay.active {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 820px) {
  .container .main .content.galeri .img-container {
    gap: 10px;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.galeri .img-container {
    height: auto;
    overflow: hidden;
    grid-template-columns: repeat(2, 1fr);
  }
}
.container .main .client.content .h1 {
  text-align: center;
  margin-bottom: 0.5em;
}
.container .main .client.content .client-container {
  min-height: auto;
  max-height: 120vh;
  gap: 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
}
.container .main .client.content .client-container img {
  aspect-ratio: 1/1;
  width: 70%;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 820px) {
  .container .main .client.content .client-container img {
    width: 80%;
  }
}
@media screen and (max-width: 450px) {
  .container .main .client.content .client-container {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }
  .container .main .client.content .client-container img {
    width: 100%;
  }
}
.container .main .content.kontak .box-container {
  min-height: 35em;
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  align-items: center;
  gap: 2em;
  color: rgba(var(--c-putih-1));
  background: linear-gradient(-5deg, rgba(12, 46, 105, 0.8) 0%, rgba(46, 107, 211, 0.8) 33%, rgba(50, 120, 240, 0.8) 100%);
}
.container .main .content.kontak .box-container .box {
  display: flex;
  flex-direction: column;
}
.container .main .content.kontak .box-container .box:nth-child(1) {
  height: 100%;
}
.container .main .content.kontak .box-container .box:nth-child(1) iframe {
  min-height: 100%;
}
.container .main .content.kontak .box-container .box:nth-child(2) {
  padding: 2.5em 0;
  gap: 0.5em;
}
.container .main .content.kontak .box-container .box:nth-child(2) .button-box {
  width: 100%;
  height: max-content;
}
.container .main .content.kontak .box-container .box:nth-child(2) .button-box .button {
  padding: 0.7em 1.4em;
  font-size: 1.6em;
  background-color: rgba(var(--c-putih-1), 0.2);
}
.container .main .content.kontak .box-container .box:nth-child(2) .p::before,
.container .main .content.kontak .box-container .box:nth-child(2) li::before {
  content: "";
  display: block;
  width: 4em;
  margin-bottom: 1em;
  margin-top: 1em;
  border-top: 1px solid rgba(var(--c-putih-1), 0.5);
}
.container .main .content.kontak .box-container .box:nth-child(2) .h1,
.container .main .content.kontak .box-container .box:nth-child(2) .h2,
.container .main .content.kontak .box-container .box:nth-child(2) .h3 {
  font-weight: 700;
}
.container .main .content.kontak .box-container .box:nth-child(2) .p,
.container .main .content.kontak .box-container .box:nth-child(2) li {
  font-size: 1.6em;
  font-weight: 500;
}
.container .main .content.kontak .box-container .box:nth-child(2) .no-telp-container {
  display: flex;
  flex-direction: column;
}
.container .main .content.kontak .box-container .box:nth-child(2) .no-telp-container .no-telp {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: var(--font-size-3);
  font-weight: 500;
}
.container .main .content.kontak .box-container .box:nth-child(2) .no-telp-container .no-telp:nth-of-type(1) {
  padding-bottom: 0.1em;
}
.footer {
  font-size: 0.8em;
  padding: 0.2em;
  color: rgba(var(--c-putih-1), 0.6);
  background-color: rgba(var(--c-hitam-1), 1);
  margin-top: 10em;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .container .main .content.kontak .box-container {
    grid-template-columns: 4.5fr 5.5fr;
  }
  .container .main .content.kontak .box-container iframe {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 450px) {
  .container .main .content.kontak {
    min-height: max-content;
  }
  .container .main .content.kontak .box-container {
    grid-template-columns: 1fr;
  }
  .container .main .content.kontak .box-container .box {
    min-height: 30em;
  }
  .container .main .content.kontak .box-container .box:first-child {
    grid-row: 2;
  }
  .container .main .content.kontak .box-container .box:nth-child(2) {
    gap: 0.5em;
    padding: 2em;
    justify-content: center;
  }
  .container .main .content.kontak .box-container .box:nth-child(2) .button-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 2732px) {
  body {
    font-size: 20px;
  }
}
@media screen and (max-width: 2458.8px) {
  body {
    font-size: 18px;
  }
}
@media screen and (max-width: 2185.6px) {
  body {
    font-size: 16px;
  }
}
@media screen and (max-width: 1912.4px) {
  body {
    font-size: 14px;
  }
}
@media screen and (max-width: 1639.2px) {
  body {
    font-size: 12px;
  }
}
@media screen and (max-width: 1366px) {
  body {
    font-size: 10px;
  }
}
@media screen and (max-width: 1092.8px) {
  body {
    font-size: 8px;
  }
}
@media screen and (max-width: 820px) {
  body {
    font-size: 9px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.4;
  }
  .p,
  li {
    font-size: 1.5em;
    font-weight: 700;
  }
  .container .header,
  .container .main .content {
    padding: 0 6%;
  }
}
@media screen and (max-width: 738px) {
  body {
    font-size: 8.1px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.4;
  }
  .p,
  li {
    font-size: 1.5em;
    font-weight: 700;
  }
  .container .header,
  .container .main .content {
    padding: 0 5.28%;
  }
}
@media screen and (max-width: 656px) {
  body {
    font-size: 7.2px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.4;
  }
  .p,
  li {
    font-size: 1.5em;
    font-weight: 700;
  }
  .container .header,
  .container .main .content {
    padding: 0 4.56%;
  }
}
@media screen and (max-width: 574px) {
  body {
    font-size: 6.3px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.4;
  }
  .p,
  li {
    font-size: 1.5em;
    font-weight: 700;
  }
  .container .header,
  .container .main .content {
    padding: 0 3.84%;
  }
}
@media screen and (max-width: 492px) {
  body {
    font-size: 5.4px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.4;
  }
  .p,
  li {
    font-size: 1.5em;
    font-weight: 700;
  }
  .container .header,
  .container .main .content {
    padding: 0 3.12%;
  }
}
@media screen and (max-width: 450px) {
  body {
    font-size: 9px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.2;
  }

  .container .header {
    padding: 0 3%;
  }
}
@media screen and (max-width: 405px) {
  body {
    font-size: 8.1px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.2;
  }
  .container .header {
    padding: 0 2.7%;
  }
}
@media screen and (max-width: 360px) {
  body {
    font-size: 7.2px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.2;
  }
  .container .header {
    padding: 0 2.4%;
  }
}
@media screen and (max-width: 315px) {
  body {
    font-size: 6.3px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.2;
  }
  .container .header {
    padding: 0 2.1%;
  }
}
@media screen and (max-width: 270px) {
  body {
    font-size: 5.4px;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    line-height: 1.2;
  }
  .container .header {
    padding: 0 1.8%;
  }
} /*# sourceMappingURL=style.css.map */