html {
      scroll-behavior: smooth; /* scroll halus */
    }
/* ANIMASI ZOOM-IN UNTUK HERO BACKGROUND */
.hero-zoom {
  background-size: 100%;
  animation: zoomHero 5s ease-in-out infinite alternate;
}

@keyframes zoomHero {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}


.hero-content {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 2s ease forwards;
  animation-delay: 0.5s; /* jeda 0.5s sebelum muncul */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-content h2 {
  text-shadow: 0 0 10px rgba(0, 255, 100, 0.8),
               0 0 20px rgba(0, 255, 100, 0.6),
               0 0 30px rgba(0, 255, 100, 0.4);
  animation: glowPulse 2s infinite alternate;
}

.hero-content p {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7),
               0 0 16px rgba(0, 200, 255, 0.5);
  animation: glowPulseText 3s infinite alternate;
}
/*animasi logo berdenyut*/
@keyframes glowPulseLogo {
  from {
    scrollbar-shadow-color: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(255, 255, 255, 0.6),
               0 0 30px rgba(255, 255, 255, 0.4);
  }
  to {
    scrollbar-shadow-color: 0 0 20px rgba(0, 255, 100, 1),
               0 0 40px rgba(0, 255, 100, 0.9),
               0 0 60px rgba(0, 255, 100, 0.7);
  }
  
}

/* Animasi glow berdenyut */
@keyframes glowPulse {
  from {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
                 0 0 15px rgb(255, 255, 255),
                 0 0 30px rgba(128, 128, 128, 0.4);
  }
  to {
    text-shadow: 0 0 20px #00ff64,
                 0 0 40px #00ff64e6,
                 0 0 60px #00ff64b3;
  }
}

@keyframes glowPulseText {
  from {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4),
                 0 0 10px rgba(0, 200, 255, 0.5);
  }
  to {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
                 0 0 30px rgba(0, 200, 255, 0.7);
  }
}

/* Animasi interaktif pada card mobil */
.services-section {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(1.2);
  opacity: 1;
}

.services-section:hover {
  transform: scale(1.2);
  z-index: 10;
}

.services-section:not(:hover) {
  transform: scale(1);
  opacity: 0.8;
}

/* Animasi pada tombol "Book Now" */
.book-now {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-now:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #22b24d;
}


/* ===== TOUR PACKAGE SECTION ===== */
#tour-packages {
  padding: 100px 0;
  background: #f9f9f9;
  overflow: hidden;
}

#tour-packages h2 {
  text-align: center;
  font-size: 2rem;
  color: #123456;
  margin-bottom: 10px;
}

#tour-packages p {
  text-align: center;
  color: #555;
  margin-bottom: 40px;
}

.swiper {
  overflow: visible;
}

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

.tour-card {
  position: relative;
  width: 350px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-card:hover {
  transform: scale(0.8);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  z-index: 5;
}

.tour-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
}

.overlay h3 {
  margin: 0;
  font-size: 1.2rem;
}

.overlay p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.price {
  font-weight: bold;
  font-size: 1rem;
  margin-top: 8px;
}