/* carousel/ jumbotron */
.carousel-img {
  max-height: 100vh;
}
.carousel-caption {
  background-color: ;
}
/* carousel/ jumbotron end */
.vh-50 {
  height: 50vh;
}

/* about us on home  */
/* h2:after {
  content: "";
  positon: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background-color: green;
  bottom: 0;
  left: calc(50% - 25px);
} */
.title-container {
  positon: relative;
  padding-bottom: 20px;
}
.about-us-title {
  font-size: 50px;
}

.about-us-sub {
  font-size: 20px;
}
/* about us end on home*/

/*service  */
.card-icon {
  transition: 0.5s;
}
.card-icon:hover {
  color: #999999;
}
/* end service */

/* section produk */
.card-produk {
 /* Gaya lain yang mungkin Anda miliki */
  width: 100%; /* Buat gambar mengambil lebar penuh dari kontainernya */
  height: auto; /* Izinkan tinggi menyesuaikan berdasarkan rasio aspek */
  object-fit: contain; /* Skala gambar agar pas di dalam kontainer, mempertahankan rasio aspek */
}

/* section produk end */

/* gambar */
.slider-galeri {
  height: 250px;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track-galeri {
  display: flex;
  width: calc(250px * 18); /* 9 gambar * 2 (karena diduplikat) */
  animation: scroll 40s linear infinite;
}
.slide-track-galeri.reverse {
  animation: scroll-reverse 40s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9)); /* geser 9 gambar */
  }
}

@keyframes scroll-reverse {
  0% {
    transform: translateX(calc(-250px * 9));
  }
  100% {
    transform: translateX(0);
  }
}

.slide-galeri {
  width: 250px;
  height: 200px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
}

.slide-galeri img {
  width: 100%;
  height: 100%;

  object-fit: cover; /* Gambar tidak akan terpotong */
  display: block;
}

/* gambar end */

/* e-commerce */
.client img {
  margin: 10px;
  width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
}

.client img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* e-commerce end */

/* footer */
.img-footer {
  height: 60px !important;
  width: auto !important;
}

.custom-hr {
  border: none;
  height: 2000px; /* tebal garis */
  background-color: #ffffff; /* warna garis */
  width: auto;
  margin: 0 auto;
}

.icon {
  color: #ffffff;
}
.alamat {
  color: white;
  text-decoration: none;
  transition: color 0s ease;
}

/* Efek pada tautan Google Maps di footer */
/* .alamat a {
  color: #ffffffb3; /* warna putih semi-transparan default */
  /* transition: color 0.3s ease, text-decoration 0.3s ease; */
} */

.alamat a:hover {
  color: #0dcaf0; /* biru muda saat hover */
  text-decoration: underline;
}

/* footer end */

/* slider pada about */
.galeri2 {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        overflow: hidden;
        background: #212529;
        padding: 60px 0;
      }
      
      .slider-galeri2 {
        width: 100%;
        overflow: hidden;
      }
      
      .slide-track-galeri2 {
        display: flex;
        animation: scroll 30s linear infinite;
        width: calc(300px * 18); /* 18 images * 300px width */
      }
      
      .slide-galeri2 {
        flex: none;
        width: 300px;
        height: 200px;
        margin: 0 10px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
      }
      
      .slide-galeri2:hover {
        transform: translateY(-10px);
      }
      
      .slide-galeri2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      
      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(calc(-300px * 9 - 90px)); /* Move by 9 images + margins */
        }
      }
      /* Additional styles */
      .img-footer {
        width: 50px;
        height: 50px;
      }
/* slider end pada about */

/* style galeri.html */
.gallery-image-wrapper {
    height: 250px; /* Tinggi tetap untuk pembungkus gambar, sesuaikan sesuai kebutuhan */
    overflow: hidden;
}

.gallery-image-wrapper img {
    height: 100%; /* Gambar mengisi tinggi pembungkus */
    object-fit: cover; /* Mempertahankan rasio aspek dan memotong jika tidak pas */
    width: 100%; /* Gambar mengisi lebar pembungkus */
    display: block; /* Agar width:100% bekerja dengan baik */
    border-radius: 8px; /* Jika ingin sudut gambar melengkung */
    border: 1px solid #dee2e6; /* Jika ingin border pada gambar */
  }
/* style galeri.html end */

/* style artikel.html */
.spacer-navbar {
  /* margin-top: 80px; */
}
/* style artikel.html end */

/* style contact.html */
.pesan-form {
  height: 150px;
}
/* style contact.html end */