body {
            font-family: 'Inter', sans-serif;
        }
        .custom-cursor-grab {
            cursor: grab;
        }

        .custom-cursor-grabbing {
            cursor: grabbing;
        }

        /* Initial state for the hover menu (hidden) */
        .mobile-menu-hover {
            opacity: 0;
            transform: translateX(-100%);
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            pointer-events: none;
        }

        /* State for the hover menu when visible */
        .mobile-menu-hover-visible {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }
        
        /* Enhanced glassmorphism card styling */
        .glass-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5),
                inset 0 -1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 6px 3px rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease-in-out;
            
            /* --- FIX FOR BUTTON ALIGNMENT (START) --- */
            display: flex; /* Makes the card a flex container */
            flex-direction: column; /* Stacks children vertically */
            /* --- FIX FOR BUTTON ALIGNMENT (END) --- */
        }

        .dark .glass-card {
            background: rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.3);
            box-shadow: 
                0 8px 32px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(0, 0, 0, 0.5),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1),
                inset 0 0 6px 3px rgba(0, 0, 0, 0.3);
        }

        .glass-card:hover {
            transform: scale(1.02);
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.8),
                transparent
            );
        }

        .glass-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.8),
                transparent,
                rgba(255, 255, 255, 0.3)
            );
        }

        /* Parallax Section Styling */
        .parallax-section {
            position: relative;
            overflow: hidden;
            /* min-height: 100vh; */
        }

        .parallax-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;
            background-attachment: fixed;
            background-color: rgba(0, 0, 0, 0.4);
            background-blend-mode: multiply;
        }
        
        /* Parallax images for each section */
        #about.parallax-section::before {
            background-image: url('https://placehold.co/1920x1080/EFB03D/EFB03D');
        }

        #tours.parallax-section::before {
            background-image: url('https://placehold.co/1920x1080/ED759F/ED759F');
        }
        
        #testimonials.parallax-section::before {
            background-image: url('https://placehold.co/1920x1080/7FD0D5/7FD0D5');
        }

        #prices.parallax-section::before {
            background-image: url('https://placehold.co/1920x1080/52A591/52A591');
        }

        #contact.parallax-section::before {
            background-image: url('https://placehold.co/1920x1080/F9DD4E/F9DD4E'); /*ass this back in for tst in bg colour... /fff?text=Contact+Us*/
        }
/* 1. BASE STYLING (Shared by all giant text) */
        .giant-bg-text {
            position: absolute;
            z-index: 0;
            font-size: 15rem; /* Massive size for desktop */
            font-weight: 900;
            color: rgba(15, 23, 42, 0.8); /* Adjust opacity here if it's too dark */
            line-height: 1;
            white-space: nowrap;
            pointer-events: none; 
            user-select: none;
        }

        /* 2. POSITION MODIFIERS */
        .giant-bg-text.align-left {
            bottom: -2rem;
            left: -1rem;
        }

        .giant-bg-text.align-right {
            bottom: 5rem; 
            right: 1rem; /* Pins it to the right edge regardless of screen size! */
            left: auto;   /* Ensures any 'left' positioning is cleared */
        }

        /* Ensure actual content stays above the text */
        .parallax-section > div {
            position: relative;
            z-index: 10;
        }

        /* 3. MOBILE MEDIA QUERY */
        @media (max-width: 768px) {
            .giant-bg-text {
                /* Shrink the text so it doesn't blow out mobile screens */
                font-size: 6rem;
                display: none;
            }
            
            /* Adjust the positioning slightly for the smaller screen */
            .giant-bg-text.align-left {
                bottom: -1rem;
                left: -0.5rem;
            }

            .giant-bg-text.align-right {
                bottom: 2rem;
                right: -0.5rem;
            }
        }


        /* Ensure your actual content sits on top of the giant text */
        .parallax-section > div {
            position: relative;
            z-index: 10;
        }
        /* Disable parallax for mobile devices */
        @media (max-width: 768px) {
            .parallax-section::before {
                background-attachment: scroll;
            }
            
            .parallax-section {
                min-height: auto;
                padding: 4rem 0;
            }
            
            .glass-card {
                margin: 1rem 0;
                padding: 1.5rem; /* Increased padding slightly for mobile */
            }
        }
        
        /* Color Blindness Filters */
        body.protanopia { filter: url(#protanopia); }
        body.deuteranopia { filter: url(#deuteranopia); }
        body.tritanopia { filter: url(#tritanopia); }

        .interactive-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* Fixed video container styling */
        #video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            overflow: hidden;
        }

        #video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
        }

        /* Hero section specific styling */
        .hero-section {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

/* Swipeable cards container - FIXED VERSION */
.swipe-container {
    position: relative;
    overflow: hidden; /* Changed back to hidden - no native scroll */
    width: 100%;
    padding: 0 2rem;
    /* REMOVED: All scroll-snap properties that were conflicting */
    /* REMOVED: overflow-x: scroll */
}

/* Remove the scrollbar hiding rules since we're not using native scroll anymore */
/* These can be deleted from your CSS:
.swipe-container::-webkit-scrollbar {
    display: none;
}
.swipe-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
*/

.swipe-wrapper {
    display: flex;
    transition: transform 0.3s ease-out;
    gap: 1.5rem;
    padding: 1rem 0;
    /* Prevent user from accidentally selecting text while dragging */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.swipe-card {
    flex: 0 0 300px;
    max-width: 300px;
    /* REMOVED: scroll-snap-align since we're not using native scroll */
    
    display: flex;
    flex-direction: column;
}

/* Ensure videos and images don't interfere with dragging */
.swipe-card video,
.swipe-card img {
    pointer-events: none;
    user-select: none;
}

/* Rest of your swipe styles remain the same */
.swipe-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.swipe-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.swipe-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.swipe-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.swipe-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.swipe-dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.3);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .swipe-container {
        padding: 0 1rem;
    }

    .swipe-card {
        flex: 0 0 280px;
        max-width: 280px;
    }
    
    .swipe-card > div:nth-child(2) {
        padding: 1.5rem;
    }
}
        
        /* --- TESTIMONIALS SCROLL STYLES (START) --- */
        .testimonial-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            overflow-x: scroll;
            display: flex;
            /* Enable scroll snap to cleanly land on each card */
            scroll-snap-type: x mandatory;
            scroll-padding-left: 2rem; /* Matches section padding */
            -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
            padding-bottom: 1rem; /* Space for scroll bar */
        }
        
        /* Hide scrollbar visually but keep functionality */
        .testimonial-container::-webkit-scrollbar {
            display: none;
        }
        .testimonial-container {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        
        .testimonial-card {
            flex: 0 0 90%; /* On mobile, take up 90% of the container width */
            scroll-snap-align: start;
            margin-right: 1.5rem; /* Space between cards */
            max-width: 300px; /* Max width on desktop */
            min-height: 250px; /* Ensure a minimum height for all cards */
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        /* Ensures the 'Book Now' link/button is interactive on mobile */
        .tour-button {
            position: relative; /* Essential for z-index to work */
            z-index: 10; /* Set a high z-index to ensure it is above the scroll layers */
            touch-action: manipulation; /* Optional, but helps ensure fast, reliable clicks */
        }
        @media (min-width: 640px) {
            .testimonial-card {
                flex: 0 0 calc(50% - 0.75rem); /* Two cards per view on tablet/small desktop */
                max-width: 400px; 
            }
        }
        
        @media (min-width: 1024px) {
            .testimonial-card {
                flex: 0 0 calc(33.333% - 1rem); /* Three cards per view on large desktop */
                margin-right: 2rem;
                max-width: 380px; 
            }
        }
        /* --- TESTIMONIALS SCROLL STYLES (END) --- */
        /* Mobile optimizations */
        @media (max-width: 768px) {
            .hero-section {
                min-height: 100vh;
                padding: 2rem 1rem;
            }
            
            .hero-content {
                text-align: center;
                z-index: 10;
            }
            
            .hero-content h1 {
                font-size: 2.5rem;
                line-height: 1.2;
            }
            
            .hero-content p {
                font-size: 1.1rem;
                margin: 1.5rem 0;
            }
            
            .glass-card {
                padding: 0; /* Remove padding from card wrapper */
            }
            
            /* Better mobile spacing for grid layouts */
            .grid-mobile-fix {
                gap: 1.5rem;
            }
/* 
            .swipe-container {
                padding: 0 1rem;
                scroll-padding-left: 1rem; /* Adjusted for consistency */
                /* scroll-padding-right: 1rem;
            }

            .swipe-card {
                flex: 0 0 280px;
                max-width: 280px;
            } */
            
            /* Ensure inner content has padding on mobile */
            /* .swipe-card > div:nth-child(2) {
                padding: 1.5rem;
            }  */
            
        }

        /* Responsive grid improvements */
        @media (min-width: 768px) {
            .grid-mobile-fix {
                gap: 2rem;
            }
        }

        @media (min-width: 1024px) {
            .grid-mobile-fix {
                gap: 2.5rem;
            }
        }