.hamburger-line{
    @apply w-[30px] h-[2px] my-2 block bg-white
}

.navbar-fixed{
    @apply fixed z-[9999] bg-[#751514];
    backdrop-filter : blur(5px);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.hamburger-active > span:nth-child(1){
    @apply rotate-45;
}

.hamburger-active > span:nth-child(2){
    @apply scale-0;
}

.hamburger-active > span:nth-child(3){
    @apply -rotate-45;
}

.swiper-container {
    width: 100%;
    height: auto;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Pastikan gambar tidak melampaui batas kontainer */
  .slide-image {
    max-width: 100%; /* Membuat gambar tidak melampaui lebar slide */
    height: auto; /* Menjaga rasio gambar */
    object-fit: cover; /* Mengontrol cara gambar ditampilkan */
  }

  /* Flexbox untuk gambar */
  .flex {
    flex-wrap: wrap;
  }

.stroke {
  -webkit-text-stroke: 2px white; /* Stroke untuk browser berbasis WebKit */
  color: transparent; /* Warna teks diatur transparan agar hanya strokenya yang terlihat */
  text-shadow: 2px 2px 0 #000; /* Tambahkan shadow untuk efek tambahan */
}

.stroke2 {
  -webkit-text-stroke: 2px ; /* Stroke untuk browser berbasis WebKit */
  color: transparent; /* Warna teks diatur transparan agar hanya strokenya yang terlihat */
  text-shadow: 2px 2px 0 #000; /* Tambahkan shadow untuk efek tambahan */
}

.neon-text {
  text-shadow: 
    0 0 2px rgba(255, 0, 0, 0.7),  /* Cahaya dekat, lebih halus */
    0 0 5px rgba(255, 0, 0, 0.5),  /* Cahaya sedang, lebih transparan */
    0 0 10px rgba(255, 0, 0, 0.3); /* Cahaya luar, sangat tipis */
}

/* setting text swiper */
    /* Menyusun teks deskripsi di atas gambar */
    .description {
      font-size: 1rem;
      font-weight: 500;
      text-align: center;
  }

  /* Mengatur swiper-slide agar elemen di dalamnya berada di tengah */
  .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

/* gambar cursor */
.cursor-icon {
  display: inline-block; /* Pastikan elemen bisa diatur ukuran */
  width: 24px; /* Atur lebar sesuai kebutuhan */
  height: 24px; /* Atur tinggi sesuai kebutuhan */
  background-size: contain; /* Pastikan gambar sesuai dengan ukuran span */
  background-repeat: no-repeat; /* Hindari pengulangan gambar */
  background-position: center; /* Pusatkan gambar dalam span */
}


/* testing animaate css */
@keyframes swipeUp {
  0% {
      transform: translateY(30px);
      opacity: 0; /* Mulai dari transparan */
  }
  100% {
      transform: translateY(0);
      opacity: 1; /* Akhirnya menjadi terlihat */
  }
}

.animated-text {
  animation: swipeUp 2.0s ease forwards; /* Durasi 0.8 detik, ease-in-out */
}

/* Tambahan untuk mengatur delay pada setiap elemen */
.animated-text:nth-child(1) {
  animation-delay: 0.16s; /* Delay untuk h2 */
}

.animated-text:nth-child(2) {
  animation-delay: 0.0s; /* Delay untuk h1 */
}

.animated-text:nth-child(3) {
  animation-delay: 0.0s; /* Delay untuk p */
}

/* Kontainer utama slider */
.card-slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Kontainer gambar */
.card-slider__img {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Rasio aspek 16:9 */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f3f3f3; /* Warna latar belakang jika gambar tidak menutupi seluruh kontainer */
}

/* Gambar dalam slider */
.card-slider__img .slider-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

/* Pengaturan tinggi gambar pada layar yang lebih besar */
@media (max-width: 767px) {
  .card-slider__img {
      padding-bottom: 85%;
  }
}

@media (min-width: 1024px) {
  .card-slider__img {
      padding-bottom: 55%;
  }
}

/* Mengatur elemen konten slider */
.card-slider__content {
  padding: 15px;
  text-align: left;
}