/* Package Item Hover Effect */
.package-item {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden; /* Ensures image zoom stays within bounds */
}

.package-item:hover {
    transform: translateY(-5px); /* Lifts the card slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Expands the shadow */
}

.package-item img {
    transition: transform 0.3s ease-in-out;
}

.package-item:hover img {
    transform: scale(1.05); /* Slightly zooms the image */
}

/* Book Now Button Hover Effect */
.book-now-btn {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.book-now-btn:hover {
    background-color: #0056b3; /* Darker shade of primary blue */
    color: #fff; /* Ensure text remains white or changes for contrast */
}

/* View All Packages Button Hover Effect */
.view-all-btn {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.view-all-btn:hover {
    background-color: #007bff; /* Primary blue */
    color: #fff;
    transform: translateY(-2px); /* Slight lift */
}


/* Entrance Animation for Package Items */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--animation-delay); /* Use custom property for staggered delay */
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Entrance Animation for Text */
.fade-in-text {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInText 1s ease-out forwards;
    animation-delay: 0.3s; /* Adjust as needed */
}

@keyframes fadeInText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}