/* Custom Tailwind Configuration and Base Styles */
        :root {
            --color-sky-blue: #B3E0FF; /* Soft Sky Blue */
            --color-peach: #FFDAB9;   /* Gentle Peach */
            --color-mist-gray: #F5F7FA; /* Light, Airy Background */
            --color-slate-dark: #334155; /* Elegant Dark Text */
            --color-light-accent: #FFFFFF;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color-mist-gray);
            color: var(--color-slate-dark);
            scroll-behavior: smooth;
        }
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            color: var(--color-slate-dark);
        }

        /* Hero Gradient Overlay */
        .hero-gradient {
            background: linear-gradient(180deg, rgba(var(--color-sky-blue), 0.7) 0%, rgba(var(--color-light-accent), 0.3) 100%);
        }

        /* Custom Button Style */
        .btn-soft {
            background-color: var(--color-light-accent);
            border: 2px solid var(--color-sky-blue);
            color: var(--color-slate-dark);
            transition: all 0.5s ease-out;
            box-shadow: 0 4px 12px rgba(179, 224, 255, 0.4);
        }
        .btn-soft:hover {
            background-color: var(--color-sky-blue);
            color: white;
            box-shadow: 0 6px 16px rgba(179, 224, 255, 0.8);
        }

        /* Image Hover Zoom (for cards) */
        .card-image-zoom {
            transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .card-image-zoom:hover {
            transform: scale(1.05);
        }

        /* Parallax Mockup (Applies to containers with this class) */
        .parallax-bg {
            background-attachment: fixed;
            background-size: cover;
            background-position: center 0;
        }

        /* Minimal Line Icons CSS - for Travel Themes */
        .icon-minimal {
            display: inline-block;
            width: 4rem;
            height: 4rem;
            border: 2px solid var(--color-slate-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            transition: all 0.3s;
        }
        .theme-card:hover .icon-minimal {
            border-color: var(--color-sky-blue);
            background-color: white;
        }
        
        /* Lightbox transition styles */
        .lightbox {
            transition: opacity 0.3s ease-in-out;
        }
        
        /* Slow Fade Animation on Scroll Mock (Add this class on elements) */
        .fade-in-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .fade-in-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Specific CSS for destination card details */
        .destination-card-content {
            min-height: 100%; /* Ensures uniform height before expansion */
            transition: height 0.5s ease-in-out;
        }
        .destination-details {
            transition: all 0.5s ease-in-out;
            overflow: hidden;
            opacity: 0;
            max-height: 0;
            padding-top: 0;
        }
        .destination-details.visible {
            opacity: 1;
            max-height: 500px; /* Large enough to accommodate content */
            padding-top: 1.5rem;
        }