@tailwind base;
@tailwind components;
@tailwind utilities;



@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-scroll {
  display: inline-flex;
  min-width: 200%;
  animation: scroll 25s linear infinite;
}

.slideshow {
  position: relative;  /* very important */
  width: 100%;
  height: 100%;        /* take full hero section height */
  overflow: hidden;
}

.slideshow img {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fadeEffect 35s infinite;
}

.slideshow img:nth-child(1) { animation-delay: 0s; }
.slideshow img:nth-child(2) { animation-delay: 5s; }
.slideshow img:nth-child(3) { animation-delay: 10s; }
.slideshow img:nth-child(4) { animation-delay: 15s; }
.slideshow img:nth-child(5) { animation-delay: 20s; }
.slideshow img:nth-child(6) { animation-delay: 25s; }
.slideshow img:nth-child(7) { animation-delay: 30s; }

@keyframes fadeEffect {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}


/* Smooth hover effect for tours images */
.group:hover img {
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.group:hover .p-6 {
  transform: translateY(5px) scale(1.02);
}