/*
Theme Name: Travil
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Travel & Booking Booking Html Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css
*/

/* Modern Destination Cards Styles */
.destination-card {
    transition: all 0.4s ease;
    overflow: hidden;
    border: none !important;
    border-radius: 0 !important;
}

.destination-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.destination-image {
    height: 280px;
    object-fit: cover;
    width: 100%;
    transition: all 0.5s ease;
    border-radius: 0 !important;
}

.destination-card:hover .destination-image {
    transform: scale(1.1);
}

.destination-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
    opacity: 0;
    transition: all 0.4s ease;
}

.destination-card:hover .destination-overlay {
    opacity: 1;
}

.destination-title {
    transform: translateY(20px);
    transition: all 0.4s ease;
    font-size: 1.25rem;
}

.destination-card:hover .destination-title {
    transform: translateY(0);
}

.destination-arrow {
    transform: translateX(30px);
    opacity: 0;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.destination-arrow:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: white !important;
}

.destination-card:hover .destination-arrow {
    transform: translateX(0);
    opacity: 1;
}

.destination-card .position-relative {
    border-radius: 0 !important;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .destination-image {
        height: 240px;
    }

    .destination-title {
        font-size: 1.1rem;
    }

    .destination-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .destination-image {
        height: 200px;
    }

    .destination-overlay .p-4 {
        padding: 1.5rem !important;
    }
}

/* Enhanced states */
.destination-card.focused,
.destination-card.touched {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.destination-card.in-view {
    animation: fadeInUp 0.8s ease forwards;
}

/* Loading state for smooth transitions */
.loading .destination-card {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* Accessibility improvements */
.destination-card:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Enhanced gradient overlay */
.destination-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center bottom,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: -1;
}

/* Smooth text animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern card shadow variations */
.destination-card {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.destination-card:hover {
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}