/* assets/css/index.css */

/*
    This file is intended for homepage-specific styles that go beyond
    Tailwind CSS utility classes or global styles defined in global.css.
*/

/* Hero Section Animations */
.hero-title {
    animation: fadeInSlideUp 1s ease-out forwards;
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
}

.hero-subtitle {
    animation: fadeInSlideUp 1s ease-out forwards 0.3s; /* Delayed animation */
    opacity: 0;
    transform: translateY(20px);
}

.hero-cta {
    animation: fadeInSlideUp 1s ease-out forwards 0.6s; /* Further delayed animation */
    opacity: 0;
    transform: translateY(20px);
}

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

/* Tour Card Hover Overlay (handled mostly by Tailwind 'group' classes in HTML) */
/* No additional CSS needed here for the overlay as Tailwind handles it */

/* Testimonial Card Styling */
.testimonial-card {
    border: 1px solid var(--color-gray-200); /* Subtle border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-md equivalent */
}

/* Category Card Hover Effect */
.category-card img {
    transition: transform 0.5s ease-in-out; /* Smooth zoom effect on hover */
}

.category-card:hover img {
    transform: scale(1.05);
}