/* DASHBOARD */
.dashboard {
  height: 100%;
  background-image: url(../img/dashboard.svg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: end;
}

.dashboard .konten .server-img {
  display: none;
}

.dashboard .konten {
  margin-bottom: 10%;
  padding: 0;
}

.dashboard .konten .text-head {
  color: white;
  font-weight: bold;
  font-size: 60px;
}

.dashboard .konten .text-mid {
  color: var(--primary-color-100);
  font-size: x-large;
}

.dashboard .konten .text-buttom,
.dashboard .konten .text-buttom-mobile {
  color: white;
}

.dashboard .konten .text-buttom-mobile {
  display: none;
}

/* END DASHBOARD */

/* PELAJARI */
.pelajari-parent {
  padding: 5vh 0;
  height: auto;
}

#pelajari {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* END PELAJARI */

/* INFO */
#info {
  height: auto;
  padding: 5vh 0;
  background-color: var(--primary-color-100);
}

.info-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vh 0;
  gap: 50px;
}

.info-1 .card-img {
  filter: drop-shadow(rgba(0, 0, 0, 0.24) 0px 3px 8px);
}

.info-1 .card-konten {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.info-1 h1 {
  color: var(--primary-color-300);
  font-weight: 600;
}

.info-1 p:nth-child(1) {
  font-weight: bold;
  font-size: large;
}

.info-1 .card-footer {
  background-color: #fff;
  width: 80%;
  border-radius: 20px;
  padding: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  filter: drop-shadow(rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset);
}

.info-1 .card-footer p {
  font-weight: normal;
  text-align: center;
}

/* #info img {
  object-fit: cover;
} */
/* END INFO */

/* KEBUTUHAN */
#kebutuhan {
  padding: 30px 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
}
/* END KEBUTUHAN */

/* GALERI APLIKASI */

#galeri {
  height: auto;
  background-color: #fff;
  overflow: hidden;
  padding: 5vh 0;
  text-align: center;
}

#galeri h1 {
  margin-bottom: 3vh;
  font-weight: 600;
  color: var(--primary-color-300);
}

#galeri .card-hub {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 1px var(--primary-color-200),
    0 4px 1px var(--primary-color-100);
}

#galeri #galeri-mobile {
  display: none;
}

#galeri .card-hub p {
  margin: 0;
}

/* Memastikan kotak carousel */
#galeri .carousel {
  position: relative;
}

/* Mengatur tombol prev dan next */
/* Memastikan kotak carousel */
#galeri .carousel {
  position: relative;
}

/* Mengatur ikon prev dan next */
#galeri .carousel-control-prev-icon,
#galeri .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-color: var(--primary-color-300);
  border-radius: 10%;
}

#galeri .carousel-indicators button {
  background-color: var(--primary-color-300);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  margin: 0 5px;
  cursor: pointer;
}

#galeri .carousel-indicators .active {
  background-color: var(--primary-color-300);
}

/* Mengatur indikator (dot) */
#galeri .carousel-indicators {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

#galeri .carousel-indicators button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--primary-color-300);
  margin: 0 5px;
  cursor: pointer;
}

#galeri .carousel-indicators .active {
  background-color: var(--primary-color-300);
}

#galeri .contain {
  position: relative;
}

/* Sembunyikan gambar secara default */
#galeri .galeri-slide {
  display: none;
}

/* Tambahkan kursor pointer saat melayang di atas gambar thumbnail */
#galeri .cursor {
  cursor: pointer;
}

/* Tombol next & prev */
#galeri .prev,
#galeri .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Posisi tombol "next" di sebelah kanan */
#galeri .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Saat melayang, tambahkan warna latar belakang hitam dengan sedikit transparansi */
#galeri .prev:hover,
#galeri .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Teks nomor (1/3 dll) */
#galeri .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

#galeri .rows:after {
  content: '';
  display: table;
  clear: both;
}

/* Enam kolom berdampingan */
#galeri .column {
  float: left;
  width: calc(100% / 12);
  object-fit: cover;
}

/* Tambahkan efek transparansi untuk gambar thumbnail */
#galeri .galeri-demo {
  filter: brightness(0.7);
  padding: 0 1px;
  height: 100px;
  width: 100%;
  object-fit: cover;
}

#galeri .active,
#galeri .galeri-demo:hover {
  filter: brightness(1);
}

#galeri .galeri-slide {
  margin-bottom: 1vh;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  height: 65vh;
  width: 100%;
}

#galeri .galeri-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-hk {
  padding: 10px 20px;
}

/* END GALERI APLIKASI */

/* MEDIA QUERRY */
/* TABLET VERSION */
@media (max-width: 1024px) {
  .dashboard .konten {
    padding: 10px;
    margin-bottom: 25%;
  }

  .dashboard .konten .server-img {
    display: block;
    width: 50%;
  }

  .dashboard .konten .text-buttom {
    display: none;
  }

  .dashboard .konten .text-buttom-mobile {
    display: block;
  }

  /* PELAJARI */
  .pelajari-parent {
    padding: 4vh 0;
  }
  /* END PELAJARI */

  /* INFO */
  #info {
    padding: 2vh 0;
    width: 100%;
    overflow-x: hidden;
  }

  .info-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 3vh 0;
    /* gap: 3vh; */
    overflow: hidden;
  }

  .info-mid {
    flex-direction: column-reverse;
  }

  .info-1 .card-img {
    filter: drop-shadow(rgba(0, 0, 0, 0.24) 0px 3px 8px);
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .info-1 .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .info-1 .card-footer {
    width: 100%;
    padding: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    filter: drop-shadow(rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset);
  }

  .info-1 .card-footer p {
    font-size: smaller;
    margin: 0;
    font-weight: 600;
  }
  /* END INFO */

  #galeri {
    padding: 50px 20px;
  }

  #galeri .card-hub {
    width: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    gap: 15px;
  }

  #galeri #galeri-mobile {
    display: block;
  }

  #galeri .galeri-dekstop {
    display: none;
  }
}

/* MOBILE VERSION */
@media (max-width: 767px) {
  .dashboard .konten .server-img {
    width: 60%;
  }

  .dashboard .konten .text-head {
    font-size: 40px;
  }

  /* PELAJARI */
  #pelajari {
    height: auto;
    margin: 5vh auto;
    flex-direction: column;
    text-align: center;
    gap: 3vh;
  }

  #pelajari h3 {
    font-size: large;
  }

  .pelajari-parent {
    padding: 0;
  }
  /* END PELAJARI */

  .info-1 .card-footer p {
    font-size: small;
  }
}