/* Container luar: Jendela tampilan */
.slider-container {
  /* Pastikan logo sejajar horizontal */
  white-space: nowrap; 
  /* Sembunyikan logo yang bergeser keluar dari batas */
  overflow: hidden; 
  /* Sesuaikan lebar container jika perlu */
  width: 100%; 
  padding: 50px 0;
}

/* Logo Track: Elemen yang bergerak */
.logo-track {
  /* Harus berupa inline-block atau flex container untuk menampung semua logo dalam 1 baris */
  display: flex; 
  /* Terapkan animasi pergeseran */
  /* 30s = durasi (semakin besar angkanya, semakin lambat) */
  /* linear = kecepatan konstan */
  /* infinite = ulangi terus-menerus */
   animation: scroll 100s linear infinite; 
}

/* Styling untuk setiap logo di dalam track */
.logo-track img {
  height: 150px; /* Atur ketinggian logo sesuai keinginan Anda */
  margin: 0 30px; /* Memberi jarak antar logo */
  /* Pastikan gambar sejajar vertikal */
  vertical-align: middle; 
}

/* Keyframes: Definisi Animasi Pergeseran */
@keyframes scroll {
  0% {
    /* Awal: posisi X = 0 (tidak bergeser) */
    transform: translateX(0); 
  }
  100% {
    /* Akhir: posisi X = -50% */
    /* Bergeser ke kiri sebesar 50% dari total lebar track. 
       Karena kita menduplikasi logo, 50% adalah lebar 1 set logo penuh. 
       Ini membuat loop mulus.
    */
    transform: translateX(-300%); 
  }
}