.bg-produklist{
  background-image: url('../images/home/produklist.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-attachment: fixed; /* Parallax effect */
}
#list-produk li:hover{
  background-color: #ece0b9;
}
#list-produk li{
  background-color: #ffba00;
  font-weight: 500;
  border-radius: 25px;
  border-color: #00004E;
}

/* Gaya dasar untuk list-group-item */
.list-group-item {
  position: relative; /* Untuk membuat posisi pseudo-elemen relatif terhadap item */
  padding-right: 30px; /* Beri ruang untuk panah */
  transition: all 0.3s ease;
}

/* Pseudo-elemen panah */
.list-group-item::after {
  content: "→"; /* Panah */
  position: absolute;
  right: 10px; /* Jarak dari sisi kanan */
  top: 50%; /* Posisikan di tengah vertikal */
  transform: translateY(-50%);
  opacity: 0; /* Sembunyikan secara default */
  transition: all 0.3s ease;
  font-size: 2rem; /* Ukuran panah */
  color: #000; /* Warna panah */
}

/* Tampilkan panah saat hover */
.list-group-item:hover::after {
  opacity: 1; /* Tampilkan panah */
  right: 15px; /* Gerakkan panah sedikit ke kanan */
  color: #00004E; /* Warna panah saat hover (opsional) */
}

#list-produk ul{
  width: 15vw;
}
.btn-product{
  font-size: 1.2rem;
  font-weight: 500;
  background-color: #b5d6d1;
}
.btn-product:hover{
  background-color: #ffba00;
}

.btn-product-active{
  background-color: #ffba00;
}

.btn-download {
  display: inline-block;
  border-radius: 4px;
  background-color: #ffba00;
  border: none;
  color: #FFFFFF;
  text-align: center;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: 500;
}

.btn-download span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-download span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-download:hover span {
  padding-right: 25px;
}

.btn-download:hover span:after {
  opacity: 1;
  right: 0;
}
.sectionproduk {
  display: none;
}
.sectionproduk.active {
  display: block;
}

.box-partner-text{
background-color: #4f4f4ff0;
width: 50vw;
height: 40vh;
}

.box-partner-text h2{
  font-size: medium;
  color: white;
  text-align: justify;
  margin: 40px;
}

.card-text {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Spasi antar baris */
}
.card-text-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-text-item span {
  display: inline-block;
}
.card-text-item .value {
  font-weight: bold;
  text-align: right;
}
.image-container {
    position: relative; /* Posisi relatif untuk teks overlay */
    display: inline-block;
  }

  #temukan-kami img {
    margin: 0 30px; /* Jarak horizontal antar gambar */
  }
  #lokasi-dayasakti{
    background-color: rgb(233, 242, 255);
  }

  #lokasi-dayasakti p{
    color:rgb(51, 100, 133);
  }

.network-font1{
    font-size: 1.4rem;
color: black;
font-weight: 600;
}

.network-font2{
    color: rgb(13, 13, 131);
    font-weight: 400;
}

.card-img{
  padding: 20px;
 background-color: rgba(255, 255, 255, 0.49);
 box-shadow: 3px 3px 10px 0px #888888;
}
.box-about{
  width: 50%;
  padding:50px;
  align-items: center;
  background-color: #ffffffd6;
}
.core img{
  width: 100%;
}
.box-shield{
    margin:10px;
    align-items: center;
    background-color: #ffffff79;
}

.kontak{
  display: flex;
  justify-content: center;
  text-align: center;
}

.tx-area{
  width: 100%;
}

.box-shield:hover{
    background-color: rgba(127, 161, 255, 0.403);
}

.height-65{
  height: 65vh;
}
.text-inner-img{
    position: absolute; /* Menempatkan teks di atas gambar */
  top: 50%; /* Menempatkan teks di tengah secara vertikal */
  left: 50%; /* Menempatkan teks di tengah secara horizontal */
  transform: translate(-50%, -50%); /* Menyesuaikan posisi agar tepat di tengah */
  color: white; /* Warna teks */
  font-weight: 500;
  letter-spacing: 3px;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.7); /* Background transparan (50%) */
  padding: 5px ; /* Memberikan jarak di sekitar teks */
  border-radius: 5px; /* Opsional: untuk memberi sudut melengkung pada background */
  text-align: center; /* Menyelaraskan teks di tengah */
}
/* Gaya gambar */
.zoom-image {
    height: auto; /* Menjaga rasio aspek gambar */
    transition: transform 0.3s ease; /* Animasi zoom saat hover */
  }
  
  /* Efek zoom saat gambar di-hover */
  .zoom-image:hover {
    transform: scale(1.1); /* Zoom gambar 1.2x dari ukuran asli */
  }
/* Menyeting ukuran slider */
.swiper-container {
    width: 100%;
    height: 70vh; /* Sesuaikan tinggi slider sesuai kebutuhan */
    position: relative; /* Membuat container menjadi relative untuk positioning pagination */
  }
  
  /* Membuat slide berisi gambar */
  .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Tombol navigasi kiri dan kanan */
.swiper-button-prev,
.swiper-button-next {
  color: white;  /* Mengatur warna panah */
  font-size: 30px;  /* Ukuran panah */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /* Memposisikan panah di tengah vertikal */
  z-index: 10;
}
  
  /* Menyusun gambar agar berada di atas */
  .swiper-slide img {
    width: 100%;
    height: auto;  /* Menjaga rasio gambar tetap proporsional */
    display: block; /* Menghindari spasi di bawah gambar */
  }
  
  /* Posisi teks di tengah gambar */
  .slide-content {
    position: absolute;
    width: 40vw;
    height: 12vh;
    top: 50%;  /* Mengatur teks di tengah secara vertikal */
    left: 50%; /* Mengatur teks di tengah secara horizontal */
    transform: translate(-50%, -50%); /* Menempatkan teks di posisi tengah */
    background: rgba(0, 0, 0, 0.8);  /* Latar belakang kotak samar */
    padding: 20px;
    border-radius: 8px; /* Agar kotak terlihat lebih smooth */
    color: white;
    text-align: center;
  }
  .indented {
    text-indent: 30px; /* Jarak indentasi */
    line-height: 1.6; /* Jarak antar baris */
  }
  .slide-content h2 {
    margin: 0;
    font-size: 1.3rem;
    color: #fff;
  }
  
  /* Membuat pagination di dalam slider */
  .swiper-pagination {
    position: absolute;
    bottom: 20px; /* Menempatkan pagination di bawah gambar */
    left: 50%;
    z-index: 10; /* Agar pagination muncul di atas elemen lainnya */
    color: white;
  }

  /* Ganti warna pagination aktif */
.swiper-pagination-bullet-active {
    background-color: #ffba00;  /* Ganti warna sesuai keinginan */
  }
  
  .logo-partner {
   max-width: 100%;
   
}

.logo-partner img {
    max-width: 100%;
    height: auto; /* Pertahankan proporsi gambar */
}



        .button-maps {
            padding: 10px 20px;
            margin-bottom: 10px;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            border: 2px solid #333;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
        }

        .button-maps:hover {
            background-color: #d0d0d0;
        }

       .button-maps.active {
            background-color: #333;
            color: white;
            cursor: default;
        }

        .button-maps.active:hover {
            background-color: #333;
        }

        /* Gaya untuk tampilan peta */
        .map-container {
            flex-grow: 1;
        }
        .map-container iframe {
         height: 100vh;
      }