/* Hide body initially until maintenance check completes */
        body:not(.maintenance-checked) {
            visibility: hidden;
        }
        
        /* Hide map view button on small screens */
        @media (max-width: 768px) {
            .map-view-btn {
                display: none !important;
            }
        }

/* Prevent scrolling when calendar is open */
        body.calendar-open,
        html.calendar-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
        }
        
        /* Additional scroll prevention for calendar popup */
        .calendar-popup {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 10002 !important;
        }
        
        .calendar-loading-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.92);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px;
            text-align: center;
            font-weight: 600;
            color: #2d5a2d;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        
        .calendar-loading-overlay i {
            font-size: 2.2rem;
        }
        
        .calendar-loading-overlay.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }
        
        /* Calendar warning banner styles */
        .calendar-warning-banner {
            animation: slideInBanner 0.3s ease-out;
        }
        
        @keyframes slideInBanner {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        
        .calendar-day {
            padding: 0;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease;
            font-size: 0.9em;
            height: 44px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0e0e0;
            background: white;
            color: #2d5a2d !important;
            position: relative;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }
        
        /* Make Saturday column dates flush with right side */
        .calendar-days .calendar-day:nth-child(7n) {
            padding: 0;
            margin-right: 0;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            height: 44px;
            width: 100%;
        }
        
        /* Make Saturday weekday header flush with right side */
        .calendar-weekdays div:nth-child(7) {
            padding: 8px 4px 8px 8px;
            margin-right: 0;
            border-radius: 4px;
        }
        
        
        @media (max-width: 768px) {
            .calendar-day {
                height: 44px !important;
                width: 100% !important;
                padding: 0 !important;
                font-size: 0.9em !important;
                font-weight: 500 !important;
                border-radius: 4px !important;
                margin: 0 !important;
                box-shadow: none !important;
                transition: all 0.2s ease !important;
                outline: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                border: 1px solid #e0e0e0 !important;
                box-sizing: border-box !important;
            }
            
            .calendar-day:focus {
                outline: 2px solid #2d5a2d !important;
                outline-offset: 1px !important;
                box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
                transform: scale(1.02) !important;
            }
            
            .calendar-day:active {
                transform: scale(0.95) !important;
                background: #e8f5e8 !important;
            }
            
            .calendar-day:hover:not(.disabled):not(.unavailable) {
                background: #f0f8f0 !important;
                transform: scale(1.01) !important;
            }
            
            /* Mobile touch enhancements while keeping desktop appearance */
            .calendar-day {
                min-width: 44px !important; /* Ensure adequate touch target width */
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }
            
            /* Mobile-specific selected and in-range styles */
            .calendar-day.selected {
                background: #2d5a2d !important;
                color: white !important;
                border: 2px solid #1a4d1a !important;
            }
            
            .calendar-day.selected:hover:not(.unavailable) {
                color: black !important;
            }
            
            .calendar-day.in-range {
                background: #1a4d1a !important;
                color: white !important;
                border: 1px solid #0f3d0f !important;
            }
            
            .calendar-day.in-range:hover:not(.unavailable) {
                color: black !important;
            }
        }
        
        
        
        .calendar-day.disabled {
            color: #ccc;
            cursor: not-allowed;
            background: white;
        }
        
        .calendar-day.unavailable {
            background: #000000 !important;
            color: white !important;
            cursor: not-allowed !important;
        }
        
        /* Prevent hover effects on unavailable dates */
        .calendar-day.unavailable:hover {
            background: #000000 !important;
            color: white !important;
            transform: none !important;
            cursor: not-allowed !important;
            pointer-events: auto !important; /* Allow cursor but prevent visual changes */
        }
        
        .calendar-day.unavailable.selected {
            background: #000000 !important;
            color: white !important;
        }
        
        .calendar-day.unavailable.in-range {
            background: #000000 !important;
            color: white !important;
        }
        
        .calendar-day.unavailable.today {
            background: #000000 !important;
            color: white !important;
            border: 2px solid #333333 !important;
        }
        
        .calendar-day.invalid-range-hover {
            background: #ffebee !important;
            border-color: #f44336 !important;
            color: #d32f2f !important;
        }
        
        .calendar-day.selected {
            background: #2d5a2d !important;
            color: white !important;
            font-weight: 600;
            border: 2px solid #1a4d1a !important;
        }
        
        .calendar-day.selected:hover:not(.unavailable) {
            color: black !important;
        }
        
        .calendar-day.selected i {
            color: white !important;
        }
        
        .calendar-day.selected * {
            color: white !important;
        }
        
        .calendar-day.selected:hover:not(.unavailable) i {
            color: black !important;
        }
        
        .calendar-day.selected:hover:not(.unavailable) * {
            color: black !important;
        }
        
        .calendar-day.in-range {
            background: #1a4d1a !important;
            color: white !important;
            border: 1px solid #0f3d0f !important;
        }
        
        .calendar-day.in-range:hover:not(.unavailable) {
            color: black !important;
        }
        
        .calendar-day.today {
            border: 2px solid #2d5a2d;
        }
        
        .calendar-day.invalid-range {
            background: #ffebee !important;
            color: #c62828 !important;
            border: 1px solid #ffcdd2 !important;
        }
        
        .calendar-day.invalid-range.selected {
            background: #ffcdd2 !important;
            color: #c62828 !important;
        }
        
        /* Date range preview styles */
        .calendar-day.preview-range {
            background: #1a4d1a !important;
            color: white !important;
            border: 2px solid #0f3d0f !important;
            position: relative;
        }
        
        .calendar-day.preview-range:hover:not(.unavailable) {
            color: black !important;
        }
        
        .calendar-day.preview-range::before {
            display: none;
        }
        
        .calendar-day.preview-invalid-range {
            background: #ffebee !important;
            color: #d32f2f !important;
            border: 1px solid #ffcdd2 !important;
            position: relative;
        }
        
        .calendar-day.preview-invalid-range::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(211, 47, 47, 0.1) 50%, transparent 70%);
            pointer-events: none;
        }
        
        /* Ensure preview styles work with existing states */
        .calendar-day.preview-range.disabled {
            background: #0f3d0f !important;
            color: white !important;
            opacity: 0.6;
        }
        
        .calendar-day.preview-invalid-range.disabled {
            background: #ffebee !important;
            color: #d32f2f !important;
            opacity: 0.6;
        }
        
        /* Days helper text styling */
        .days-helper {
            transition: all 0.3s ease;
        }
        
        /* Configure button attention-grabbing styles */
        .package-btn.configure-button-appear {
            position: relative;
            overflow: visible;
            z-index: 10;
        }
        
        /* Entrance animation for configure button */
        @keyframes configureButtonEntrance {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }
            50% {
                opacity: 0.8;
                transform: translateY(-5px) scale(1.05);
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);
            }
        }
        
        /* Pulse animation for configure button */
        @keyframes configureButtonPulse {
            0% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 15px rgba(76, 175, 80, 0.1);
                transform: scale(1.02);
            }
            100% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
                transform: scale(1);
            }
        }
        
        /* Enhanced configure button styling */
        .package-btn.configure-button-appear {
            background: linear-gradient(135deg, #4CAF50, #2c5530) !important;
            border: 2px solid #4CAF50 !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative !important;
        }
        
        /* Date button attention-grabbing styles */
        .date-picker-button.date-button-appear {
            position: relative;
            overflow: visible;
            z-index: 10;
        }
        
        /* Entrance animation for date button */
        @keyframes dateButtonEntrance {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }
            50% {
                opacity: 0.8;
                transform: translateY(-5px) scale(1.05);
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);
            }
        }
        
        /* Pulse animation for date button */
        @keyframes dateButtonPulse {
            0% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 15px rgba(76, 175, 80, 0.1);
                transform: scale(1.02);
            }
            100% {
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
                transform: scale(1);
            }
        }
        
        /* Enhanced date button styling */
        .date-picker-button.date-button-appear {
            background: linear-gradient(135deg, #4CAF50, #2c5530) !important;
            border: 2px solid #4CAF50 !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative !important;
        }
        
        
        .days-helper.warning {
            color: #ff6b6b !important;
            font-weight: 600;
            background: rgba(255, 107, 107, 0.1);
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid rgba(255, 107, 107, 0.3);
        }

        /* Lazy loading styles for hero images */
        .hero-slideshow .slide.lazy-load {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: opacity 0.5s ease-in-out;
        }

        .hero-slideshow .slide.lazy-load:not(.loaded) {
            opacity: 0.3;
        }

        .hero-slideshow .slide.lazy-load.loaded {
            opacity: 1;
        }
        
        /* Mobile-specific improvements */
        @media (max-width: 768px) {
            /* Enhanced preview styles for mobile */
            .calendar-day.preview-range {
                background: #1a4d1a !important;
                color: white !important;
                border: 2px solid #0f3d0f !important;
                transform: scale(1.02) !important;
                box-shadow: 0 2px 8px rgba(26, 77, 26, 0.4) !important;
            }
            
            .calendar-day.preview-range:hover:not(.unavailable) {
                color: black !important;
            }
            
            .calendar-day.preview-invalid-range {
                background: #ffebee !important;
                color: #d32f2f !important;
                border: 2px solid #ffcdd2 !important;
                transform: scale(1.02) !important;
                box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3) !important;
            }
            
            /* Make preview more visible on mobile */
            .calendar-day.preview-range::before {
                display: none;
            }
            
            .calendar-day.preview-invalid-range::before {
                background: linear-gradient(45deg, transparent 20%, rgba(211, 47, 47, 0.2) 50%, transparent 80%);
            }
            
            /* Enhanced date selection status for mobile */
            .date-selection-status {
                font-size: 1rem !important;
                padding: 15px !important;
                margin: 15px 0 !important;
                border-radius: 8px !important;
                min-height: 50px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            /* Mobile touch feedback */
            .calendar-day:active {
                transform: scale(0.95) !important;
                transition: transform 0.1s ease !important;
            }
            
            /* Prevent text selection on mobile during touch interactions */
            .calendar-day {
                -webkit-user-select: none !important;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
                user-select: none !important;
                -webkit-touch-callout: none !important;
            }
            
            /* Enhanced touch target size for better mobile interaction */
            .calendar-day {
                min-height: 50px !important;
                min-width: 50px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            /* Mobile configure button enhancements */
            .package-btn.configure-button-appear {
                font-size: 1.1rem !important;
                padding: 18px 20px !important;
                min-height: 56px !important;
                border-radius: 30px !important;
                box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4) !important;
            }
            
            
            /* Mobile pulse animation adjustments */
            @keyframes configureButtonPulse {
                0% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 0 rgba(76, 175, 80, 0.7);
                    transform: scale(1);
                }
                50% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 20px rgba(76, 175, 80, 0.1);
                    transform: scale(1.03);
                }
                100% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 0 rgba(76, 175, 80, 0.7);
                    transform: scale(1);
                }
            }
            
            /* Mobile date button enhancements */
            .date-picker-button.date-button-appear {
                font-size: 1.1rem !important;
                padding: 18px 20px !important;
                min-height: 56px !important;
                border-radius: 30px !important;
                box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4) !important;
            }
            
            /* Mobile date button pulse animation adjustments */
            @keyframes dateButtonPulse {
                0% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 0 rgba(76, 175, 80, 0.7);
                    transform: scale(1);
                }
                50% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 20px rgba(76, 175, 80, 0.1);
                    transform: scale(1.03);
                }
                100% {
                    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4), 0 0 0 0 rgba(76, 175, 80, 0.7);
                    transform: scale(1);
                }
            }
            
            /* Prevent horizontal scrolling */
            body, html {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100vw !important;
            }
            
            /* Mobile cookie banner positioning - make it visible in viewport */
            .cookie-banner {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: auto !important;
                z-index: 10001 !important;
                background: linear-gradient(135deg, #2c5530 0%, #1a4d1a 100%) !important;
                color: white !important;
                padding: 15px !important;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
                animation: slideDown 0.5s ease-out !important;
                display: none !important;
                visibility: hidden !important;
                width: 100vw !important;
                max-width: 100vw !important;
                box-sizing: border-box !important;
                -webkit-transform: translateZ(0) !important;
                transform: translateZ(0) !important;
                -webkit-backface-visibility: hidden !important;
                backface-visibility: hidden !important;
            }
            
            @keyframes slideDown {
                from {
                    transform: translateY(-100%) !important;
                    opacity: 0 !important;
                }
                to {
                    transform: translateY(0) !important;
                    opacity: 1 !important;
                }
            }
            
            .cookie-banner.active {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                animation: slideDown 0.5s ease-out !important;
            }
            
            .cookie-content {
                flex-direction: column !important;
                text-align: center !important;
                gap: 15px !important;
                max-width: 100% !important;
            }
            
            .cookie-text h4 {
                font-size: 1.1rem !important;
                margin-bottom: 8px !important;
            }
            
            .cookie-text p {
                font-size: 0.9rem !important;
                line-height: 1.4 !important;
                margin-bottom: 15px !important;
            }
            
            .cookie-buttons {
                width: 100% !important;
                justify-content: center !important;
                gap: 10px !important;
                flex-wrap: wrap !important;
            }
            
            .cookie-accept,
            .cookie-reject {
                flex: 1 !important;
                min-width: 120px !important;
                max-width: 150px !important;
                padding: 12px 16px !important;
                font-size: 0.9rem !important;
                min-height: 44px !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
                border: none !important;
                border-radius: 8px !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
                position: relative !important;
                z-index: 10 !important;
                pointer-events: auto !important;
                user-select: none !important;
                -webkit-user-select: none !important;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
            }
            
            .cookie-accept {
                background: #4CAF50 !important;
                color: white !important;
            }
            
            .cookie-accept:hover {
                background: #45a049 !important;
                transform: translateY(-1px) !important;
            }
            
            .cookie-accept:active {
                transform: translateY(0) !important;
            }
            
            .cookie-reject {
                background: rgba(255, 255, 255, 0.2) !important;
                color: white !important;
                border: 1px solid rgba(255, 255, 255, 0.3) !important;
            }
            
            .cookie-reject:hover {
                background: rgba(255, 255, 255, 0.3) !important;
                transform: translateY(-1px) !important;
            }
            
            .cookie-reject:active {
                transform: translateY(0) !important;
            }
            
            /* Add padding to body when cookie banner is visible */
            body.cookie-banner-visible {
                padding-top: 120px !important;
            }
            
            /* Adjust navbar position when cookie banner is visible */
            .navbar.cookie-banner-visible {
                top: 120px !important;
            }
            
            /* Container adjustments */
            .container {
                padding: 0 15px !important;
                max-width: 100% !important;
            }
            
            /* Navigation improvements */
            .navbar {
                padding: 0 !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
            }
            
            .nav-container {
                height: 70px !important;
                padding: 0 15px !important;
            }
            
            .nav-logo h2 {
                font-size: 1.2rem !important;
                margin-left: 8px !important;
            }
            
            .nav-logo .logo-image {
                width: 40px !important;
                height: 40px !important;
            }
            
            .hamburger {
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                width: 44px !important;
                height: 44px !important;
                cursor: pointer !important;
                z-index: 1001 !important;
                visibility: visible !important;
                opacity: 1 !important;
                position: relative !important;
            }
            
            .hamburger span {
                width: 25px !important;
                height: 3px !important;
                background: #2d5a2d !important;
                margin: 3px 0 !important;
                transition: all 0.3s ease !important;
                border-radius: 2px !important;
            }
            
            .nav-menu {
                position: fixed !important;
                top: 70px !important;
                left: -100% !important;
                width: 100% !important;
                height: calc(100vh - 70px) !important;
                background: white !important;
                flex-direction: column !important;
                justify-content: flex-start !important;
                align-items: center !important;
                padding: 20px 0 !important;
                transition: left 0.3s ease !important;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
                z-index: 999 !important;
                display: flex !important;
            }
            
            .nav-menu.active {
                left: 0 !important;
            }
            
            .nav-link, .nav-login-btn {
                display: block !important;
                padding: 15px 20px !important;
                margin: 5px 0 !important;
                text-align: center !important;
                width: 90% !important;
                min-height: 44px !important;
                min-width: 44px !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
                border-radius: 8px !important;
                transition: all 0.3s ease !important;
            }
            
            .nav-link:hover, .nav-login-btn:hover {
                background: #f0f8f0 !important;
                transform: none !important;
            }
            
            /* Hero section mobile improvements */
            .hero {
                height: 100vh !important;
                padding-top: 70px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                position: relative !important;
                width: 100vw !important;
                overflow: hidden !important;
            }
            
            .hero-content {
                padding: 20px !important;
                margin: 0 auto !important;
                width: calc(100% - 40px) !important;
                max-width: 400px !important;
                text-align: center !important;
                position: relative !important;
                z-index: 2 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            .hero-content h1 {
                font-size: 2rem !important;
                line-height: 1.2 !important;
                margin-bottom: 15px !important;
            }
            
            .hero-content h2 {
                font-size: 1.3rem !important;
                margin-bottom: 20px !important;
            }
            
            .cta-button {
                min-height: 48px !important;
                min-width: 200px !important;
                font-size: 1.1em !important;
                padding: 12px 24px !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }
            
            /* Slideshow controls mobile improvements */
            .slideshow-controls {
                position: absolute !important;
                bottom: 20px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                gap: 15px !important;
                z-index: 3 !important;
            }
            
            .prev-slide, .next-slide {
                width: 44px !important;
                height: 44px !important;
                border-radius: 50% !important;
                background: rgba(45, 90, 45, 0.8) !important;
                color: white !important;
                border: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }
            
            /* Places section mobile improvements */
            #places {
                padding: 40px 0 !important;
            }
            
            #places .packages-slideshow {
                padding: 0 15px !important;
                margin: 0 !important;
            }
            
            #places .tours-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                padding: 0 !important;
            }
            
            #places .package-card {
                min-height: 200px !important;
                padding: 15px !important;
                border-radius: 12px !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
            }
            
            #places .package-card img {
                width: 100% !important;
                height: 150px !important;
                object-fit: cover !important;
                border-radius: 8px !important;
                margin-bottom: 15px !important;
                display: block !important;
                background: #f0f0f0 !important;
                border: 2px solid #2d5a2d !important;
                opacity: 1 !important;
                visibility: visible !important;
                position: relative !important;
            }
            
            /* Force images to be visible on mobile */
            #places .package-card img[src*="Pictures/"] {
                background: linear-gradient(45deg, #e8f5e8 25%, transparent 25%), 
                           linear-gradient(-45deg, #e8f5e8 25%, transparent 25%), 
                           linear-gradient(45deg, transparent 75%, #e8f5e8 75%), 
                           linear-gradient(-45deg, transparent 75%, #e8f5e8 75%) !important;
                background-size: 20px 20px !important;
                background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
                min-height: 150px !important;
            }
            
            /* Add text overlay for debugging */
            #places .package-card img::after {
                content: 'Image Loading...' !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                background: rgba(45, 90, 45, 0.8) !important;
                color: white !important;
                padding: 8px 12px !important;
                border-radius: 4px !important;
                font-size: 12px !important;
                z-index: 10 !important;
            }
            
            /* Hide text overlay when image loads */
            #places .package-card img[complete="true"]::after {
                display: none !important;
            }
            
            #places .tour-info h3 {
                font-size: 1.3rem !important;
                margin-bottom: 8px !important;
                color: #2d5a2d !important;
            }
            
            #places .tour-info p {
                font-size: 0.9rem !important;
                line-height: 1.4 !important;
                color: #666 !important;
            }
            
            /* Packages section mobile improvements */
            #packages {
                padding: 60px 0 !important;
            }
            
            #packages .packages-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                padding: 0 15px !important;
            }
            
            .package-card {
                margin-bottom: 20px !important;
                padding: 20px !important;
                border-radius: 12px !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
            }
            
            .package-header h3 {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }
            
            .package-description {
                font-size: 0.95rem !important;
                line-height: 1.4 !important;
            }
            
            /* Location categories mobile layout */
            .location-categories {
                display: flex !important;
                flex-direction: column !important;
                gap: 15px !important;
                margin: 20px 0 !important;
            }
            
            .location-category {
                border: 1px solid #e0e0e0 !important;
                border-radius: 8px !important;
                padding: 15px !important;
                background: #f9f9f9 !important;
            }
            
            .location-option {
                display: flex !important;
                align-items: center !important;
                margin-bottom: 8px !important;
                font-weight: 600 !important;
                color: #2d5a2d !important;
                font-size: 0.95rem !important;
            }
            
            .sub-activities {
                margin-left: 60px !important;
                margin-top: 8px !important;
            }
            
            .activity-option {
                display: flex !important;
                align-items: center !important;
                margin-bottom: 6px !important;
                font-size: 0.9rem !important;
            }
            
            /* Participants and date selectors mobile improvements */
            .package-participants-selector,
            .package-date-picker {
                margin: 15px 0 !important;
                padding: 15px !important;
                background: #f8f9fa !important;
                border-radius: 8px !important;
            }
            
            .package-participants-selector select,
            .package-date-picker button {
                width: auto !important;
                min-width: auto !important;
                padding: 12px 15px !important;
                font-size: 1rem !important;
                min-height: 44px !important;
                border: 1px solid #ddd !important;
                border-radius: 6px !important;
                background: white !important;
            }
            
            .package-date-picker .date-picker-button {
                background: #4CAF50 !important;
                color: white !important;
                border: none !important;
            }
            
            .package-btn {
                width: 100% !important;
                padding: 15px !important;
                font-size: 1rem !important;
                min-height: 48px !important;
                margin: 10px 0 !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }
            
            /* Calendar popup mobile improvements */
            .calendar-popup {
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                background: white !important;
                z-index: 10004 !important;
                overflow: hidden !important;
            }
            
            .calendar-container {
                width: 95vw !important;
                max-width: 420px !important;
                margin: 0 auto !important;
                border-radius: 16px !important;
                max-height: 95vh !important;
                max-height: 95dvh !important;
                overflow-y: auto !important;
                position: relative !important;
                transform: scale(1) !important;
                animation: mobileCalendarSlideIn 0.3s ease-out !important;
                box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(76, 175, 80, 0.1) !important;
                outline: none !important;
                transition: outline 0.2s ease !important;
                display: flex !important;
                flex-direction: column !important;
                padding: 25px !important;
                background: white !important;
                border: 1px solid rgba(76, 175, 80, 0.2) !important;
            }
            
            .calendar-container:focus {
                outline: 3px solid #2d5a2d !important;
                outline-offset: 2px !important;
                box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 3px rgba(45, 90, 45, 0.3) !important;
            }
            
            @keyframes mobileCalendarSlideIn {
                from {
                    opacity: 0;
                    transform: scale(0.9) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }
            
            .calendar-navigation button {
                min-height: 50px !important;
                min-width: 50px !important;
                padding: 15px !important;
                font-size: 1.1em !important;
                border-radius: 10px !important;
                background: #2d5a2d !important;
                color: white !important;
                border: none !important;
                box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
                transition: all 0.3s ease !important;
            }
            
            /* Enhanced mobile button interactions */
            
            .calendar-nav-btn:hover {
                background: #1a4d1a !important;
                color: white !important;
                transform: scale(1.05) !important;
                box-shadow: 0 4px 12px rgba(45, 90, 45, 0.4) !important;
            }
            
            .calendar-nav-btn:active {
                background: #0f3d0f !important;
                color: white !important;
                transform: scale(0.95) !important;
            }
            
            .calendar-action-btn:hover:not(:disabled) {
                background: #1a4d1a !important;
                color: white !important;
                transform: translateY(-2px) !important;
                box-shadow: 0 6px 20px rgba(45, 90, 45, 0.4) !important;
            }
            
            .calendar-action-btn:active:not(:disabled) {
                color: white !important;
                transform: translateY(0) !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
            }
            
            .calendar-action-btn:first-child:hover {
                background: #1a4d1a !important;
                color: white !important;
                border-color: #1a4d1a !important;
            }
            
            .calendar-action-btn:disabled {
                cursor: not-allowed !important;
                opacity: 0.6 !important;
            }
            
            .calendar-actions {
                margin-top: auto !important;
                padding: 15px 20px !important;
                background: white !important;
                border-top: 1px solid #eee !important;
                border-radius: 0 0 12px 12px !important;
                position: sticky !important;
                bottom: 0 !important;
                z-index: 10 !important;
            }
            
            /* Enhanced mobile calendar grid */
            .calendar-weekdays {
                gap: 1px !important;
                margin-bottom: 15px !important;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
                border-radius: 8px !important;
                padding: 8px !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
            }
            
            
            .calendar-weekdays div {
                padding: 12px 8px !important;
                font-size: 0.9em !important;
                font-weight: 600 !important;
                text-align: center !important;
                border-radius: 6px !important;
                background: rgba(76, 175, 80, 0.1) !important;
                color: #2d5a2d !important;
            }
            
            .calendar-days {
                gap: 1px !important;
                min-height: 300px !important;
                max-height: none !important;
                overflow: visible !important;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
            }
            
            /* Make Saturday column dates flush with right side on mobile */
            .calendar-days .calendar-day:nth-child(7n) {
                padding: 0 !important;
                margin-right: 0 !important;
                border-radius: 4px !important;
                border: 1px solid #e0e0e0 !important;
                height: 44px !important;
                width: 100% !important;
            }
            
            /* Make Saturday weekday header flush with right side on mobile */
            .calendar-weekdays div:nth-child(7) {
                padding: 8px 4px 8px 8px !important;
                margin-right: 0 !important;
                border-radius: 4px !important;
            }
            
            
            /* Hide instructions on mobile for space efficiency */
            .calendar-instructions {
                display: none !important;
            }
            
            /* Better mobile date selection status */
            .date-selection-status {
                padding: 15px !important;
                margin-top: 20px !important;
                font-size: 1em !important;
                min-height: 28px !important;
                border-radius: 10px !important;
                background: #f8f9fa !important;
                border: 1px solid #e9ecef !important;
                font-weight: 500 !important;
            }
            
            /* Mobile calendar header improvements */
            .calendar-header {
                padding: 25px !important;
                margin-bottom: 30px !important;
            }
            
            .calendar-header h3 {
                font-size: 1.1em !important;
                line-height: 1.4 !important;
                font-weight: 600 !important;
            }
            
            .calendar-actions button {
                min-height: 50px !important;
                padding: 15px 25px !important;
                font-size: 1.1rem !important;
                font-weight: 600 !important;
                border-radius: 10px !important;
                transition: all 0.3s ease !important;
            }
            
            .calendar-actions button:first-child {
                background: transparent !important;
                color: #2d5a2d !important;
                border: 2px solid #2d5a2d !important;
            }
            
            .calendar-actions button:last-child {
                background: #2d5a2d !important;
                color: white !important;
                border: none !important;
                box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
            }
            
            /* Mobile-specific accessibility improvements */
            .calendar-container:focus-within {
                outline: 3px solid #2d5a2d !important;
                outline-offset: 2px !important;
            }
            
            /* Better mobile scrolling */
            .calendar-days {
                -webkit-overflow-scrolling: touch !important;
                scroll-behavior: smooth !important;
            }
            
            /* Mobile landscape orientation improvements */
            @media (max-width: 768px) and (orientation: landscape) {
                .calendar-container {
                    max-height: 90vh !important;
                    max-height: 90dvh !important;
                }
                
                .calendar-days {
                    min-height: 180px !important;
                }
                
                .calendar-header {
                    padding: 15px !important;
                    margin-bottom: 15px !important;
                }
                
                .calendar-instructions {
                    padding: 10px !important;
                    margin-bottom: 15px !important;
                    font-size: 0.85em !important;
                }
            }
            
            /* Prevent body scroll when calendar is open */
            body.calendar-open,
            html.calendar-open {
                overflow: hidden !important;
            }
            
            /* Very small screens (phones in portrait) */
            @media (max-width: 480px) {
                .calendar-container {
                    width: 98vw !important;
                    max-width: 380px !important;
                    padding: 15px !important;
                    max-height: 98vh !important;
                    max-height: 98dvh !important;
                }
                
                /* Ensure grid works perfectly on very small screens */
                .calendar-weekdays,
                .calendar-days {
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
                    gap: 1px !important;
                }
                
                .calendar-weekdays {
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
                    border-radius: 8px !important;
                    padding: 8px !important;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
                }
                
                .calendar-weekdays div {
                    background: rgba(76, 175, 80, 0.1) !important;
                    border-radius: 6px !important;
                    color: #2d5a2d !important;
                }
                
                .calendar-day {
                    height: 44px !important;
                    width: 100% !important;
                    padding: 0 !important;
                    font-size: 0.9em !important;
                    border-radius: 4px !important;
                    border: 1px solid #e0e0e0 !important;
                    box-sizing: border-box !important;
                }
                
                .calendar-header h3 {
                    font-size: 1.15em !important;
                }
                
                .calendar-navigation button {
                    min-height: 55px !important;
                    min-width: 55px !important;
                    font-size: 1.3em !important;
                    background: #2d5a2d !important;
                    color: white !important;
                    border: none !important;
                    box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
                }
                
                .calendar-actions {
                    padding: 15px 18px !important;
                    gap: 12px !important;
                }
                
                .calendar-actions button {
                    padding: 12px 20px !important;
                    font-size: 1.05em !important;
                    min-height: 55px !important;
                    transition: all 0.3s ease !important;
                }
                
                .calendar-actions button:first-child {
                    background: transparent !important;
                    color: #2d5a2d !important;
                    border: 2px solid #2d5a2d !important;
                }
                
                .calendar-actions button:last-child {
                    background: #2d5a2d !important;
                    color: white !important;
                    border: none !important;
                    box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
                }
                
                
            }
            
            /* Mobile calendar animations */
            @keyframes mobileCalendarSlideIn {
                from {
                    opacity: 0;
                    transform: scale(0.9) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }
            
            @keyframes mobileCalendarSlideOut {
                from {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
                to {
                    opacity: 0;
                    transform: scale(0.9) translateY(-20px);
                }
            }
            
            /* Enhanced mobile touch feedback */
            .calendar-day:active {
                transform: scale(0.95) !important;
                transition: transform 0.1s ease !important;
            }
            
            /* Mobile button press animations */
            .calendar-nav-btn:active,
            .calendar-action-btn:active {
                transform: scale(0.95) !important;
                transition: transform 0.1s ease !important;
            }
            
            /* Form improvements for mobile */
            .form-group input,
            .form-group select,
            .form-group textarea {
                font-size: 16px !important; /* Prevents zoom on iOS */
                padding: 12px 15px !important;
                min-height: 44px !important;
                border: 1px solid #ddd !important;
                border-radius: 6px !important;
                width: 100% !important;
            }
            
            /* Modal improvements for mobile */
            .modal-content {
                width: 95% !important;
                max-width: 500px !important;
                margin: 20px auto !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
                border-radius: 12px !important;
            }
            
            /* Blog section mobile improvements */
            .blog-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
            
            .blog-card {
                margin-bottom: 0 !important;
            }
            
            .blog-card img {
                height: 200px !important;
                object-fit: cover !important;
            }
            
            /* About section mobile improvements */
            .about-content {
                flex-direction: column !important;
                gap: 30px !important;
            }
            
            .about-text {
                text-align: center !important;
            }
            
            .features {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
            
            /* Contact section mobile improvements */
            .contact {
                padding: 50px 0 !important;
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
            }
            
            .contact .section-title {
                font-size: 2.2rem !important;
                margin-bottom: 2.5rem !important;
                text-align: center !important;
                color: #2d5a2d !important;
                font-weight: 700 !important;
            }
            
            .contact-content {
                flex-direction: column !important;
                gap: 2rem !important;
                padding: 0 15px !important;
                max-width: 100% !important;
            }
            
            .contact-info {
                display: flex !important;
                flex-direction: column !important;
                gap: 1.5rem !important;
                margin-bottom: 2rem !important;
                width: 100% !important;
            }
            
            .contact-item {
                display: flex !important;
                align-items: center !important;
                gap: 1rem !important;
                background: white !important;
                padding: 1.5rem !important;
                border-radius: 15px !important;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
                width: 100% !important;
                box-sizing: border-box !important;
                transition: transform 0.3s ease, box-shadow 0.3s ease !important;
                border: 1px solid #e9ecef !important;
            }
            
            .contact-item:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
            }
            
            .contact-item i {
                font-size: 1.8rem !important;
                color: #4CAF50 !important;
                min-width: 40px !important;
                text-align: center !important;
                flex-shrink: 0 !important;
            }
            
            .contact-item h3 {
                font-size: 1.2rem !important;
                font-weight: 600 !important;
                color: #2c5530 !important;
                margin-bottom: 0.5rem !important;
            }
            
            .contact-item p {
                color: #666 !important;
                font-size: 0.95rem !important;
                margin: 0 !important;
                line-height: 1.4 !important;
            }
            
            .contact-item a {
                color: #666 !important;
                text-decoration: none !important;
                transition: color 0.3s ease !important;
                word-break: break-all !important;
            }
            
            .contact-item a:hover {
                color: #4CAF50 !important;
            }
            
            .contact-form {
                background: white !important;
                padding: 1.5rem !important;
                border-radius: 20px !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
                width: 100% !important;
                box-sizing: border-box !important;
                border: 2px solid #2d5a2d !important;
            }
            
            .contact-form .form-group {
                margin-bottom: 1.5rem !important;
            }
            
            .contact-form input,
            .contact-form textarea {
                width: 100% !important;
                padding: 12px 15px !important;
                border: 2px solid #e1e5e9 !important;
                border-radius: 10px !important;
                font-size: 16px !important; /* Prevents zoom on iOS */
                transition: all 0.3s ease !important;
                font-family: 'Poppins', sans-serif !important;
                box-sizing: border-box !important;
                background: #f8f9fa !important;
                color: #333 !important;
                min-height: 48px !important; /* Touch target size */
            }
            
            .contact-form textarea {
                min-height: 120px !important;
                resize: vertical !important;
            }
            
            .contact-form input::placeholder,
            .contact-form textarea::placeholder {
                color: #999 !important;
                font-style: italic !important;
                transition: color 0.3s ease !important;
            }
            
            .contact-form input:focus::placeholder,
            .contact-form textarea:focus::placeholder {
                color: #666 !important;
            }
            
            .contact-form input:focus,
            .contact-form textarea:focus {
                outline: none !important;
                border-color: #2d5a2d !important;
                box-shadow: 0 0 0 3px rgba(45, 90, 45, 0.1) !important;
                background: white !important;
            }
            
            .contact-form button {
                width: 100% !important;
                padding: 15px !important;
                background: linear-gradient(135deg, #2d5a2d, #1a4d1a) !important;
                color: white !important;
                border: none !important;
                border-radius: 50px !important;
                font-weight: 600 !important;
                font-size: 1.1rem !important;
                cursor: pointer !important;
                transition: all 0.3s ease !important;
                min-height: 48px !important; /* Touch target size */
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
                position: relative !important;
                overflow: hidden !important;
                font-family: 'Poppins', sans-serif !important;
            }
            
            .contact-form button::before {
                content: '' !important;
                position: absolute !important;
                top: 0 !important;
                left: -100% !important;
                width: 100% !important;
                height: 100% !important;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
                transition: left 0.5s !important;
            }
            
            .contact-form button:hover::before {
                left: 100% !important;
            }
            
            .contact-form button:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 8px 25px rgba(45, 90, 45, 0.3) !important;
                background: linear-gradient(135deg, #1a4d1a, #2d5a2d) !important;
            }
            
            .contact-form button:active {
                transform: translateY(0) !important;
            }
            
            .contact-form button.loading {
                opacity: 0.7 !important;
                cursor: not-allowed !important;
                background: linear-gradient(135deg, #6c757d, #5a6268) !important;
            }
            
            .contact-form button.loading::before {
                display: none !important;
            }
            
            .contact-status {
                margin-top: 1rem !important;
                padding: 15px 20px !important;
                border-radius: 12px !important;
                font-weight: 500 !important;
                text-align: center !important;
                display: none !important;
                font-family: 'Poppins', sans-serif !important;
                transition: all 0.3s ease !important;
                font-size: 0.95rem !important;
                line-height: 1.4 !important;
                position: relative !important;
                z-index: 10 !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
                border: 2px solid transparent !important;
                animation: slideInFromBottom 0.3s ease-out !important;
            }
            
            @keyframes slideInFromBottom {
                from {
                    opacity: 0 !important;
                    transform: translateY(20px) !important;
                }
                to {
                    opacity: 1 !important;
                    transform: translateY(0) !important;
                }
            }
            
            .contact-status.success {
                background: linear-gradient(135deg, #d4edda, #c3e6cb) !important;
                color: #155724 !important;
                border-color: #c3e6cb !important;
                box-shadow: 0 4px 15px rgba(21, 87, 36, 0.2) !important;
            }
            
            .contact-status.success::before {
                content: '✓' !important;
                position: absolute !important;
                left: 15px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                font-size: 1.2rem !important;
                font-weight: bold !important;
                color: #155724 !important;
            }
            
            .contact-status.error {
                background: linear-gradient(135deg, #f8d7da, #f5c6cb) !important;
                color: #721c24 !important;
                border-color: #f5c6cb !important;
                box-shadow: 0 4px 15px rgba(114, 28, 36, 0.2) !important;
            }
            
            .contact-status.error::before {
                content: '⚠' !important;
                position: absolute !important;
                left: 15px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                font-size: 1.2rem !important;
                font-weight: bold !important;
                color: #721c24 !important;
            }
            
            .contact-status.loading {
                background: linear-gradient(135deg, #d1ecf1, #bee5eb) !important;
                color: #0c5460 !important;
                border-color: #bee5eb !important;
                box-shadow: 0 4px 15px rgba(12, 84, 96, 0.2) !important;
            }
            
            .contact-status.loading::before {
                content: '⏳' !important;
                position: absolute !important;
                left: 15px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                font-size: 1.2rem !important;
                animation: pulse 1.5s infinite !important;
            }
            
            @keyframes pulse {
                0%, 100% {
                    opacity: 1 !important;
                }
                50% {
                    opacity: 0.5 !important;
                }
            }
            
            /* Ensure status messages are visible and properly positioned on mobile */
            .contact-form {
                position: relative !important;
            }
            
            .contact-status.show {
                display: block !important;
                animation: slideInFromBottom 0.3s ease-out !important;
            }
            
            /* Footer mobile improvements */
            .footer-content {
                grid-template-columns: 1fr !important;
                text-align: center !important;
                gap: 20px !important;
            }
            
            .social-links {
                justify-content: center !important;
            }
            
            /* Button improvements */
            .submit-btn {
                width: 100% !important;
                min-height: 48px !important;
                font-size: 1rem !important;
                padding: 15px !important;
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }
        }
        
        @media (max-width: 480px) {
            /* Extra small screens */
            .container {
                padding: 0 10px !important;
            }
            
            /* Mobile cookie banner positioning for small screens */
            .cookie-banner {
                padding: 12px !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: auto !important;
                z-index: 10001 !important;
            }
            
            .cookie-content {
                gap: 12px !important;
            }
            
            .cookie-text h4 {
                font-size: 1rem !important;
                margin-bottom: 6px !important;
            }
            
            .cookie-text p {
                font-size: 0.85rem !important;
                line-height: 1.3 !important;
                margin-bottom: 12px !important;
            }
            
            .cookie-buttons {
                gap: 8px !important;
            }
            
            .cookie-accept,
            .cookie-reject {
                padding: 10px 14px !important;
                font-size: 0.85rem !important;
                min-width: 100px !important;
                min-height: 42px !important;
            }
            
            /* Adjust padding for smaller screens */
            body.cookie-banner-visible {
                padding-top: 100px !important;
            }
            
            .navbar.cookie-banner-visible {
                top: 100px !important;
            }
            
            .nav-container {
                padding: 0 10px !important;
            }
            
            .nav-logo h2 {
                font-size: 1rem !important;
                margin-left: 5px !important;
            }
            
            .nav-logo .logo-image {
                width: 35px !important;
                height: 35px !important;
            }
            
            .hero-content {
                padding: 15px !important;
                margin: 5px !important;
                max-width: 350px !important;
            }
            
            .hero-content h1 {
                font-size: 1.8rem !important;
                line-height: 1.1 !important;
            }
            
            .hero-content h2 {
                font-size: 1.1rem !important;
            }
            
            .cta-button {
                min-width: 180px !important;
                font-size: 1rem !important;
                padding: 10px 20px !important;
            }
            
            .package-card {
                padding: 15px !important;
                margin-bottom: 15px !important;
            }
            
            .package-header h3 {
                font-size: 1.2rem !important;
            }
            
            .package-description {
                font-size: 0.9rem !important;
            }
            
            .location-category {
                padding: 12px !important;
            }
            
            .location-option {
                font-size: 0.9rem !important;
            }
            
            .sub-activities {
                margin-left: 60px !important;
            }
            
            .activity-option {
                font-size: 0.85rem !important;
            }
            
            .package-participants-selector,
            .package-date-picker {
                padding: 12px !important;
            }
            
            .package-btn {
                padding: 12px !important;
                font-size: 0.95rem !important;
            }
            
            .blog-card img {
                height: 180px !important;
            }
            
            .blog-card h3 {
                font-size: 1.1rem !important;
            }
            
            .blog-card p {
                font-size: 0.9rem !important;
            }
            
            /* Contact section extra small mobile improvements */
            .contact {
                padding: 40px 0 !important;
            }
            
            .contact .section-title {
                font-size: 1.8rem !important;
                margin-bottom: 2rem !important;
            }
            
            .contact-content {
                padding: 0 10px !important;
                gap: 1.5rem !important;
            }
            
            .contact-info {
                gap: 1rem !important;
                margin-bottom: 1.5rem !important;
            }
            
            .contact-item {
                padding: 1.2rem !important;
                gap: 0.8rem !important;
                border-radius: 12px !important;
            }
            
            .contact-item i {
                font-size: 1.5rem !important;
                min-width: 35px !important;
            }
            
            .contact-item h3 {
                font-size: 1.1rem !important;
                margin-bottom: 0.3rem !important;
            }
            
            .contact-item p {
                font-size: 0.9rem !important;
                line-height: 1.3 !important;
            }
            
            .contact-form {
                padding: 1.2rem !important;
                border-radius: 15px !important;
            }
            
            .contact-form .form-group {
                margin-bottom: 1.2rem !important;
            }
            
            .contact-form input,
            .contact-form textarea {
                padding: 10px 12px !important;
                font-size: 16px !important;
                border-radius: 8px !important;
                min-height: 44px !important;
            }
            
            .contact-form textarea {
                min-height: 100px !important;
            }
            
            .contact-form button {
                padding: 12px 20px !important;
                font-size: 1rem !important;
                min-height: 44px !important;
                border-radius: 25px !important;
            }
            
            .contact-status {
                padding: 12px 15px !important;
                font-size: 0.9rem !important;
                margin-top: 1rem !important;
                border-radius: 10px !important;
                position: relative !important;
                z-index: 10 !important;
                box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
                animation: slideInFromBottom 0.3s ease-out !important;
            }
            
            .contact-status.success::before,
            .contact-status.error::before,
            .contact-status.loading::before {
                left: 12px !important;
                font-size: 1.1rem !important;
            }
        }
        
        /* Landscape mobile improvements */
        @media (max-width: 768px) and (orientation: landscape) {
            .hero {
                min-height: 100vh !important;
                padding-top: 60px !important;
            }
            
            .hero-content {
                padding: 15px !important;
                max-width: 500px !important;
            }
            
            .hero-content h1 {
                font-size: 1.8rem !important;
                margin-bottom: 10px !important;
            }
            
            .hero-content h2 {
                font-size: 1.2rem !important;
                margin-bottom: 15px !important;
            }
            
            .cta-button {
                min-height: 44px !important;
                padding: 10px 20px !important;
            }
            
            .nav-container {
                height: 60px !important;
            }
            
            .nav-menu {
                top: 60px !important;
                height: calc(100vh - 60px) !important;
            }
            
            /* Contact section landscape improvements */
            .contact {
                padding: 40px 0 !important;
            }
            
            .contact .section-title {
                font-size: 2rem !important;
                margin-bottom: 2rem !important;
            }
            
            .contact-content {
                gap: 1.5rem !important;
                padding: 0 20px !important;
            }
            
            .contact-info {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 1rem !important;
                margin-bottom: 1.5rem !important;
            }
            
            .contact-item {
                padding: 1.2rem !important;
                gap: 0.8rem !important;
            }
            
            .contact-item i {
                font-size: 1.6rem !important;
                min-width: 35px !important;
            }
            
            .contact-item h3 {
                font-size: 1.1rem !important;
            }
            
            .contact-item p {
                font-size: 0.9rem !important;
            }
            
            .contact-form {
                padding: 1.2rem !important;
            }
            
            .contact-form .form-group {
                margin-bottom: 1.2rem !important;
            }
            
            .contact-form input,
            .contact-form textarea {
                padding: 10px 12px !important;
                min-height: 44px !important;
            }
            
            .contact-form textarea {
                min-height: 100px !important;
            }
            
            .contact-form button {
                padding: 12px 20px !important;
                min-height: 44px !important;
            }
        }
        
        /* Very small screens (320px and below) */
        @media (max-width: 320px) {
            .container {
                padding: 0 5px !important;
            }
            
            /* Mobile cookie banner positioning for very small screens */
            .cookie-banner {
                padding: 10px !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: auto !important;
                z-index: 10001 !important;
            }
            
            .cookie-text h4 {
                font-size: 0.95rem !important;
            }
            
            .cookie-text p {
                font-size: 0.8rem !important;
                line-height: 1.3 !important;
            }
            
            .cookie-accept,
            .cookie-reject {
                padding: 8px 12px !important;
                font-size: 0.8rem !important;
                min-width: 90px !important;
                min-height: 40px !important;
            }
            
            /* Adjust padding for very small screens */
            body.cookie-banner-visible {
                padding-top: 90px !important;
            }
            
            .navbar.cookie-banner-visible {
                top: 90px !important;
            }
            
            .nav-container {
                padding: 0 5px !important;
            }
            
            .nav-logo h2 {
                font-size: 0.9rem !important;
                margin-left: 3px !important;
            }
            
            .nav-logo .logo-image {
                width: 30px !important;
                height: 30px !important;
            }
            
            .hero-content {
                padding: 10px !important;
                margin: 5px !important;
                max-width: 300px !important;
            }
            
            .hero-content h1 {
                font-size: 1.6rem !important;
            }
            
            .hero-content h2 {
                font-size: 1rem !important;
            }
            
            .cta-button {
                min-width: 160px !important;
                font-size: 0.95rem !important;
                padding: 8px 16px !important;
            }
            
            .package-card {
                padding: 10px !important;
            }
            
            .package-header h3 {
                font-size: 1.1rem !important;
            }
            
            .package-description {
                font-size: 0.85rem !important;
            }
            
            .location-category {
                padding: 8px !important;
            }
            
            .location-option {
                font-size: 0.85rem !important;
            }
            
            .activity-option {
                font-size: 0.8rem !important;
            }
            
            .blog-card img {
                height: 160px !important;
            }
            
            .blog-card h3 {
                font-size: 1rem !important;
            }
            
            .blog-card p {
                font-size: 0.85rem !important;
            }
            
            /* Contact section very small screen improvements */
            .contact {
                padding: 30px 0 !important;
            }
            
            .contact .section-title {
                font-size: 1.6rem !important;
                margin-bottom: 1.5rem !important;
            }
            
            .contact-content {
                padding: 0 5px !important;
                gap: 1rem !important;
            }
            
            .contact-info {
                gap: 0.8rem !important;
                margin-bottom: 1rem !important;
            }
            
            .contact-item {
                padding: 1rem !important;
                gap: 0.6rem !important;
                border-radius: 10px !important;
            }
            
            .contact-item i {
                font-size: 1.3rem !important;
                min-width: 30px !important;
            }
            
            .contact-item h3 {
                font-size: 1rem !important;
                margin-bottom: 0.2rem !important;
            }
            
            .contact-item p {
                font-size: 0.85rem !important;
                line-height: 1.2 !important;
            }
            
            .contact-form {
                padding: 1rem !important;
                border-radius: 12px !important;
            }
            
            .contact-form .form-group {
                margin-bottom: 1rem !important;
            }
            
            .contact-form input,
            .contact-form textarea {
                padding: 8px 10px !important;
                font-size: 16px !important;
                border-radius: 6px !important;
                min-height: 40px !important;
            }
            
            .contact-form textarea {
                min-height: 80px !important;
            }
            
            .contact-form button {
                padding: 10px 16px !important;
                font-size: 0.95rem !important;
                min-height: 40px !important;
                border-radius: 20px !important;
            }
            
            .contact-status {
                padding: 10px 12px !important;
                font-size: 0.85rem !important;
                margin-top: 1rem !important;
                border-radius: 8px !important;
                position: relative !important;
                z-index: 10 !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
                animation: slideInFromBottom 0.3s ease-out !important;
            }
            
            .contact-status.success::before,
            .contact-status.error::before,
            .contact-status.loading::before {
                left: 10px !important;
                font-size: 1rem !important;
            }
        }
        
        /* Touch device improvements */
        @media (hover: none) and (pointer: coarse) {
            .package-card:hover,
            .blog-card:hover,
            .nav-link:hover {
                transform: none !important;
            }
            
            /* Disable all hover effects for package cards on mobile */
            .packages-slideshow .package-card:hover,
            #packages .package-card:hover,
            #places .package-card:hover,
            #tours.packages .package-card:hover {
                transform: none !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
                border-color: #e9ecef !important;
            }
            
            .packages-slideshow .package-card:hover .package-image img,
            #packages .package-card:hover .package-image img,
            #places .package-card:hover .package-image img,
            #tours.packages .package-card:hover .package-image img,
            .packages-slideshow .package-card:hover img,
            #packages .package-card:hover img,
            #places .package-card:hover img,
            #tours.packages .package-card:hover img {
                transform: none !important;
            }
        }
        
        /* Additional mobile hover disable for broader device support */
        @media (max-width: 768px) {
            .packages-slideshow .package-card:hover,
            #packages .package-card:hover,
            #places .package-card:hover,
            #tours.packages .package-card:hover {
                transform: none !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
                border-color: #e9ecef !important;
            }
            
            .packages-slideshow .package-card:hover .package-image img,
            #packages .package-card:hover .package-image img,
            #places .package-card:hover .package-image img,
            #tours.packages .package-card:hover .package-image img,
            .packages-slideshow .package-card:hover img,
            #packages .package-card:hover img,
            #places .package-card:hover img,
            #tours.packages .package-card:hover img {
                transform: none !important;
            }
        }
        
        /* Touch device active states */
        @media (hover: none) and (pointer: coarse) {
            .package-card:active,
            .blog-card:active {
                transform: scale(0.98) !important;
                transition: transform 0.1s ease !important;
            }
            
            .nav-link:active,
            .nav-login-btn:active,
            .cta-button:active,
            .package-btn:active {
                background: #e8f5e8 !important;
                transform: scale(0.98) !important;
                transition: all 0.1s ease !important;
            }
            
            /* Touch feedback for interactive location and activity names */
            .location-name:active,
            .activity-name:active {
                background: rgba(45, 90, 45, 0.1) !important;
                color: #2d5a2d !important;
                transform: scale(0.98) !important;
                transition: all 0.1s ease !important;
                border-radius: 4px !important;
                padding: 2px 4px !important;
                margin: -2px -4px !important;
            }
            
            /* Make location and activity names more obviously interactive on mobile */
            .location-name,
            .activity-name {
                cursor: pointer !important;
                position: relative !important;
                display: inline-block !important;
                padding: 2px 4px !important;
                margin: -2px -4px !important;
                border-radius: 4px !important;
                transition: all 0.2s ease !important;
                -webkit-tap-highlight-color: rgba(45, 90, 45, 0.2) !important;
            }
        }
        
        /* Mobile performance optimizations */
        @media (max-width: 768px) {
            /* Reduce animations on mobile for better performance */
            * {
                -webkit-transform: translateZ(0) !important;
                transform: translateZ(0) !important;
            }
            
            /* Optimize images for mobile */
            img {
                max-width: 100% !important;
                height: auto !important;
                -webkit-user-select: none !important;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
                user-select: none !important;
            }
            
            /* Improve scrolling performance */
            .hero-slideshow,
            .packages-slideshow,
            .places-slideshow {
                -webkit-overflow-scrolling: touch !important;
            }
            
            /* Optimize text rendering */
            body, html {
                -webkit-font-smoothing: antialiased !important;
                -moz-osx-font-smoothing: grayscale !important;
                text-rendering: optimizeLegibility !important;
            }
            
            /* Improve button interactions */
            button, .btn, .cta-button, .package-btn, .submit-btn {
                -webkit-tap-highlight-color: transparent !important;
                -webkit-touch-callout: none !important;
                -webkit-user-select: none !important;
                -khtml-user-select: none !important;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
                user-select: none !important;
            }
            
            /* Improve form interactions */
            input, select, textarea {
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                appearance: none !important;
                border-radius: 6px !important;
            }
            
            /* Improve touch interactions for location and activity names */
            .location-name,
            .activity-name {
                cursor: pointer !important;
                position: relative !important;
                display: inline-block !important;
                padding: 2px 4px !important;
                margin: -2px -4px !important;
                border-radius: 4px !important;
                transition: all 0.2s ease !important;
                -webkit-tap-highlight-color: rgba(45, 90, 45, 0.2) !important;
                touch-action: manipulation !important;
            }
            
            .location-name:active,
            .activity-name:active {
                background: rgba(45, 90, 45, 0.1) !important;
                color: #2d5a2d !important;
                transform: scale(0.98) !important;
                transition: all 0.1s ease !important;
            }
            
            /* Hide default checkbox and create custom one for mobile */
            .location-option input[type="checkbox"],
            .activity-option input[type="checkbox"] {
                appearance: none !important;
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                width: 20px !important;
                height: 20px !important;
                border: 2px solid #ddd !important;
                border-radius: 4px !important;
                background: white !important;
                position: relative !important;
                cursor: pointer !important;
                margin-right: 8px !important;
                flex-shrink: 0 !important;
            }
            
            /* Custom checkbox checked state for mobile */
            .location-option input[type="checkbox"]:checked,
            .activity-option input[type="checkbox"]:checked {
                background-color: #2d5a2d !important;
                border-color: #2d5a2d !important;
                transform: scale(1.1) !important;
                box-shadow: 0 2px 8px rgba(45, 90, 45, 0.3) !important;
            }
            
            /* Custom checkmark for mobile checkboxes */
            .location-option input[type="checkbox"]:checked::after,
            .activity-option input[type="checkbox"]:checked::after {
                content: '✓' !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                color: white !important;
                font-weight: bold !important;
                font-size: 14px !important;
                line-height: 1 !important;
                pointer-events: none !important;
            }
            
            /* Ensure checkboxes are clickable */
            .location-option input[type="checkbox"],
            .activity-option input[type="checkbox"] {
                pointer-events: auto !important;
                cursor: pointer !important;
                z-index: 1 !important;
            }
            
            /* Enhanced checked state visibility for mobile */
            .location-option:has(input[type="checkbox"]:checked),
            .activity-option:has(input[type="checkbox"]:checked) {
                background: rgba(45, 90, 45, 0.1) !important;
                border: 2px solid #2d5a2d !important;
                box-shadow: 0 2px 8px rgba(45, 90, 45, 0.2) !important;
            }
            
            /* Update text color for checked items on mobile */
            .location-option:has(input[type="checkbox"]:checked) .location-name,
            .activity-option:has(input[type="checkbox"]:checked) .activity-name {
                color: #2d5a2d !important;
                font-weight: 600 !important;
            }
            
            /* Update info icon to checkmark for checked items on mobile - REMOVED */
            /* .location-option:has(input[type="checkbox"]:checked) .location-name::after,
            .activity-option:has(input[type="checkbox"]:checked) .activity-name::after {
                content: ' ✓' !important;
                opacity: 1 !important;
                font-size: 1em !important;
                font-weight: bold !important;
                color: #2d5a2d !important;
            } */
            
            /* Ensure proper alignment of checkbox and text on mobile */
            .location-option,
            .activity-option {
                display: flex !important;
                align-items: center !important;
                min-height: 44px !important;
                padding: 8px 12px !important;
                margin: 4px 0 !important;
                border-radius: 8px !important;
                border: 1px solid #e0e0e0 !important;
                background: white !important;
                transition: all 0.2s ease !important;
            }
            
            /* Touch-friendly checkbox sizing for mobile */
            .location-option input[type="checkbox"],
            .activity-option input[type="checkbox"] {
                min-width: 20px !important;
                min-height: 20px !important;
                width: 20px !important;
                height: 20px !important;
            }
            
            /* Custom select styling for mobile */
            select {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
                background-repeat: no-repeat !important;
                background-position: right 12px center !important;
                background-size: 16px !important;
                padding-right: 40px !important;
            }
        }
        
        /* High DPI display optimizations */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .nav-logo .logo-image,
            .hero-content img,
            .package-card img,
            .blog-card img {
                image-rendering: -webkit-optimize-contrast !important;
                image-rendering: crisp-edges !important;
            }
        }
        
        /* Calendar open state - prevent scrolling */
        body.calendar-open {
            overflow: hidden !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        /* Also prevent scrolling on html element */
        html.calendar-open {
            overflow: hidden !important;
            height: 100% !important;
        }
        
        /* Force white theme for calendar in all modes */
        @media (prefers-color-scheme: dark) {
            .calendar-popup {
                background: white !important;
            }
            
            .calendar-container {
                background: white !important;
                color: #2d5a2d !important;
            }
            
            .calendar-day {
                background: white !important;
                color: #2d5a2d !important;
                border-color: #e0e0e0 !important;
            }
            
            .calendar-day:hover:not(.unavailable) {
                background: #f8f9fa !important;
            }
            
            .calendar-header {
                background: linear-gradient(135deg, #2c5530 0%, #4CAF50 100%) !important;
            }
            
            .calendar-header h3 {
                color: white !important;
            }
            
        }

        /* About Section Slideshow Styles */
        .about-image {
            position: relative;
            width: 100%;
            height: 400px; /* Set a fixed height for the slideshow */
            display: block !important;
        }

        .about-slideshow {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            display: block !important;
        }

        .about-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
            display: block !important;
        }

        .about-slide.active {
            opacity: 1 !important;
            display: block !important;
        }

        .about-slide img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 20px !important;
            display: block !important;
        }

        /* Override any conflicting styles - only hide direct img children, not slideshow images */
        .about-image > img {
            display: none !important; /* Hide direct img children of about-image, not slideshow images */
        }

        /* What's Included Section Styles */
        .whats-included {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .included-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 40px;
        }

        .included-item {
            background: white;
            padding: 30px 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 2px solid transparent;
        }

        .included-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            border-color: #4caf50;
        }

        .included-icon {
            font-size: 3em;
            color: #4caf50;
            margin-bottom: 20px;
        }

        .included-item h3 {
            color: #2d5a2d;
            font-size: 1.4em;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .included-item p {
            color: #666;
            line-height: 1.6;
            font-size: 1em;
        }

        /* Mobile responsiveness for What's Included section */
        @media (max-width: 768px) {
            .included-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 0 15px;
            }
            
            .included-item {
                padding: 25px 20px;
            }
            
            .included-icon {
                font-size: 2.5em;
            }
        }

        /* Transportation Section Styles */
        .transportation {
            padding: 80px 0;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

        .transportation-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 50px;
            align-items: center;
            margin-top: 40px;
        }

        .transportation-image {
            text-align: center;
            position: relative;
        }

        .transportation-slideshow {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .slideshow-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 60%; /* Flexible aspect ratio */
            overflow: hidden;
            background: #f8f9fa;
        }

        .transportation-slideshow .slide {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transform: translateX(100%);
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            opacity: 0;
            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
            z-index: 1;
            display: block;
        }

        .transportation-slideshow .slide.active {
            opacity: 1;
            transform: translateX(0);
            z-index: 2;
        }

        .transportation-slideshow .slide.prev {
            transform: translateX(-100%);
            opacity: 0;
            z-index: 0;
        }

        .transportation-text h3 {
            color: #2d5a2d;
            font-size: 1.8em;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .transportation-text p {
            color: #666;
            line-height: 1.8;
            font-size: 1.05em;
            margin-bottom: 20px;
        }

        .transportation-features {
            list-style: none;
            padding: 0;
            margin-top: 25px;
        }

        .transportation-features li {
            color: #555;
            font-size: 1em;
            line-height: 1.8;
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .transportation-features li i {
            color: #4caf50;
            font-size: 1.2em;
            margin-top: 3px;
            flex-shrink: 0;
        }

        /* Mobile responsiveness for Transportation section */
        @media (max-width: 768px) {
            .transportation-content {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 0 15px;
            }

            .transportation-text h3 {
                font-size: 1.5em;
            }

            .transportation-text p {
                font-size: 1em;
            }

            /* Ensure transportation slideshow is visible on mobile */
            .transportation-image {
                display: block !important;
                visibility: visible !important;
                width: 100% !important;
                margin: 0 auto !important;
            }

            .transportation-slideshow {
                display: block !important;
                visibility: visible !important;
                width: 100% !important;
                max-width: 100% !important;
                min-height: 300px !important;
                position: relative !important;
            }

            .slideshow-container {
                display: block !important;
                visibility: visible !important;
                width: 100% !important;
                height: 60vw !important;
                min-height: 250px !important;
                max-height: 400px !important;
                padding-bottom: 0 !important;
                position: relative !important;
                overflow: hidden !important;
                background: #f8f9fa !important;
            }

            .transportation-slideshow .slide {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: auto !important;
                height: auto !important;
                max-width: 95% !important;
                max-height: 95% !important;
                object-fit: contain !important;
                z-index: 1 !important;
                margin: auto !important;
                opacity: 0 !important;
                visibility: hidden !important;
                display: block !important;
                transform: translateX(100%) !important;
                pointer-events: none !important;
            }

            .transportation-slideshow .slide.active {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
                transform: translateX(0) !important;
                z-index: 2 !important;
                pointer-events: auto !important;
            }

            .transportation-slideshow .slide.prev {
                opacity: 0 !important;
                visibility: hidden !important;
                transform: translateX(-100%) !important;
                z-index: 0 !important;
                pointer-events: none !important;
            }

            /* Ensure Toyota Hiace image is visible on mobile when active */
            .transportation-slideshow img.slide.active[src*="ToyotaHiace"] {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
                transform: translateX(0) !important;
                z-index: 2 !important;
            }
        }

        /* Travel Concierge Section Styles */
        .travel-concierge {
            padding: 100px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            position: relative;
        }

        .concierge-subtitle {
            text-align: center;
            font-size: 1.3em;
            color: #4caf50;
            font-weight: 500;
            margin: -15px 0 50px 0;
            letter-spacing: 0.5px;
        }

        .concierge-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .concierge-text {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .concierge-main-text {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border-left: 5px solid #4caf50;
        }

        .concierge-intro {
            font-size: 1.15em;
            color: #333;
            line-height: 1.8;
            margin: 0;
            font-weight: 400;
        }

        .concierge-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .concierge-feature {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .concierge-feature:hover {
            transform: translateX(5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
            border-color: #4caf50;
        }

        .concierge-feature-icon {
            font-size: 2em;
            color: #4caf50;
            flex-shrink: 0;
            margin-top: 3px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1f8f4;
            border-radius: 50%;
        }

        .concierge-feature-text {
            flex: 1;
        }

        .concierge-feature-text h3 {
            color: #2d5a2d;
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 10px;
            margin-top: 0;
        }

        .concierge-feature-text p {
            color: #555;
            line-height: 1.7;
            font-size: 1em;
            margin: 0;
        }

        .concierge-highlight {
            background: linear-gradient(135deg, #2d5a2d 0%, #4caf50 100%);
            color: white;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(45, 90, 45, 0.2);
            position: relative;
            margin-top: 10px;
        }

        .concierge-highlight i {
            font-size: 2em;
            color: rgba(255, 255, 255, 0.3);
            position: absolute;
            top: 20px;
            left: 25px;
        }

        .concierge-highlight p {
            font-size: 1.15em;
            line-height: 1.8;
            margin: 0;
            padding-left: 40px;
            font-weight: 400;
            font-style: italic;
        }

        /* Mobile responsiveness for Travel Concierge section */
        @media (max-width: 768px) {
            .travel-concierge {
                padding: 60px 0;
            }

            .concierge-subtitle {
                font-size: 1.1em;
                margin: -10px 0 40px 0;
                padding: 0 20px;
            }

            .concierge-main-text {
                padding: 25px 20px;
            }

            .concierge-intro {
                font-size: 1.05em;
            }

            .concierge-features {
                gap: 15px;
            }

            .concierge-feature {
                padding: 20px;
                gap: 15px;
            }

            .concierge-feature-icon {
                font-size: 1.8em;
                width: 45px;
                height: 45px;
            }

            .concierge-feature-text h3 {
                font-size: 1.2em;
            }

            .concierge-feature-text p {
                font-size: 0.95em;
            }

            .concierge-highlight {
                padding: 25px 20px;
            }

            .concierge-highlight i {
                font-size: 1.5em;
                top: 15px;
                left: 20px;
            }

            .concierge-highlight p {
                font-size: 1em;
                padding-left: 35px;
            }
        }

        /* Provinces Section Styles */
        .provinces {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        }

        .provinces-content {
            display: flex;
            flex-direction: column;
            gap: 40px;
            margin-top: 40px;
        }

        .provinces-map {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
        }

        .provinces-map-image {
            width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            object-fit: contain;
        }

        .provinces-descriptions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        .province-item {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-left: 4px solid #4CAF50;
        }

        .province-item:hover {
            transform: translateX(5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .province-item h3 {
            color: #2d5a2d;
            font-size: 1.5em;
            font-weight: 600;
            margin-bottom: 10px;
            margin-top: 0;
        }

        .province-item p {
            color: #555;
            line-height: 1.7;
            font-size: 1em;
            margin: 8px 0;
        }

        .province-item p:first-of-type {
            margin-top: 0;
        }

        .province-item strong {
            color: #2d5a2d;
        }

        /* Mobile responsiveness for Provinces section */
        @media (max-width: 768px) {
            .provinces {
                padding: 60px 0;
            }

            .provinces-content {
                gap: 30px;
            }

            .provinces-map {
                max-width: 100%;
            }

            .provinces-descriptions {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .province-item {
                padding: 20px;
            }

            .province-item h3 {
                font-size: 1.3em;
            }

            .province-item p {
                font-size: 0.95em;
            }
        }

        /* Survey Section Styles */
        .survey {
            padding: 40px 0;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

        .survey-intro {
            text-align: center;
            font-size: 0.95em;
            color: #666;
            margin-bottom: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .survey-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .survey-question-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 18px;
            align-items: start;
        }

        .survey-form {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #e9ecef;
        }

        .survey-form .form-group {
            margin-bottom: 18px;
        }

        .survey-form label {
            display: block;
            font-weight: 600;
            color: #2d5a2d;
            margin-bottom: 6px;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .required {
            color: #ff6b6b;
        }

        /* Remove required indicators from survey since all questions are optional */
        .survey-form .required {
            display: none;
        }

        /* Rating Stars */
        .rating-container {
            margin-top: 10px;
        }

        .rating-stars {
            display: flex;
            gap: 5px;
            direction: rtl;
            justify-content: flex-start;
        }

        .rating-stars input[type="radio"] {
            display: none;
        }

        .rating-stars .star-label {
            font-size: 2.5em;
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s ease, transform 0.2s ease;
            user-select: none;
        }

        .rating-stars .star-label:hover,
        .rating-stars .star-label:hover ~ .star-label {
            color: #ffd700;
            transform: scale(1.1);
        }

        .rating-stars input[type="radio"]:checked ~ .star-label,
        .rating-stars input[type="radio"]:checked ~ .star-label ~ .star-label {
            color: #ffd700;
        }

        .rating-text {
            margin-top: 10px;
            font-size: 1em;
            color: #2d5a2d;
            font-weight: 500;
        }

        /* Checkbox and Radio Styles */
        .checkbox-group,
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 6px;
        }

        .checkbox-label,
        .radio-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: 400;
            color: #333;
            padding: 6px 8px;
            border-radius: 6px;
            transition: background 0.2s ease;
            font-size: 0.9em;
            line-height: 1.4;
            gap: 8px;
        }

        .checkbox-label:hover,
        .radio-label:hover {
            background: #f8f9fa;
        }

        .checkbox-label input[type="checkbox"],
        .radio-label input[type="radio"] {
            margin-right: 8px;
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            cursor: pointer;
            flex-shrink: 0;
            opacity: 1 !important;
            display: inline-block !important;
            visibility: visible !important;
            appearance: checkbox;
            -webkit-appearance: checkbox;
            -moz-appearance: checkbox;
            border: 2px solid #666 !important;
            background-color: white !important;
            position: relative;
            clip: auto !important;
            clip-path: none !important;
        }

        .checkbox-label input[type="checkbox"]:checked,
        .radio-label input[type="radio"]:checked {
            opacity: 1 !important;
            background-color: #2d5a2d !important;
            border-color: #2d5a2d !important;
        }

        /* Show checkmark inside checked survey checkboxes */
        .survey-form .checkbox-label input[type="checkbox"]:checked::after {
            content: '✓' !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            color: white !important;
            font-size: 14px !important;
            font-weight: bold !important;
            line-height: 1 !important;
            pointer-events: none !important;
        }

        /* Ensure checkboxes are always visible */
        .survey-form .checkbox-label input[type="checkbox"],
        .survey-form .radio-label input[type="radio"] {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 18px !important;
            height: 18px !important;
            position: relative !important;
        }

        .checkmark,
        .radio-custom {
            display: none;
        }

        /* Textarea, Input, and Select Styles */
        .survey-form textarea,
        .survey-form input[type="text"],
        .survey-form input[type="email"],
        .survey-form select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e1e5e9;
            border-radius: 6px;
            font-size: 0.9em;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            box-sizing: border-box;
            background: #f8f9fa;
            color: #333;
        }

        .survey-form select {
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
            padding-right: 40px;
        }

        .survey-form select:focus {
            outline: none;
            border-color: #2d5a2d;
            box-shadow: 0 0 0 3px rgba(45, 90, 45, 0.1);
            background: white;
        }

        .survey-form textarea:focus,
        .survey-form input:focus {
            outline: none;
            border-color: #2d5a2d;
            box-shadow: 0 0 0 3px rgba(45, 90, 45, 0.1);
            background: white;
        }

        .survey-form textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .optional-info {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 2px solid #e9ecef;
        }

        .optional-info h3,
        .contact-info h3 {
            color: #2d5a2d;
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        .optional-badge {
            font-size: 0.85em;
            font-weight: 400;
            color: #666;
            font-style: italic;
        }

        .contact-info-note {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 15px;
            font-style: italic;
        }

        .contact-fields {
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .contact-fields .form-row {
            margin-top: 10px;
        }

        /* Survey Submit Button */
        .survey-submit-btn {
            width: 100%;
            padding: 12px 24px;
            background: linear-gradient(135deg, #2d5a2d, #1a4d1a);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            min-height: 44px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            margin-top: 10px;
        }

        .survey-submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(45, 90, 45, 0.25);
            background: linear-gradient(135deg, #1a4d1a, #2d5a2d);
        }

        .survey-submit-btn:active {
            transform: translateY(0);
        }

        .survey-submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        /* Survey Status Messages */
        .survey-status {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-weight: 500;
            text-align: center;
            font-size: 0.9em;
            animation: slideInFromBottom 0.3s ease-out;
        }

        .survey-status.success {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            border: 2px solid #c3e6cb;
            box-shadow: 0 4px 15px rgba(21, 87, 36, 0.2);
        }

        .survey-status.error {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
            border: 2px solid #f5c6cb;
            box-shadow: 0 4px 15px rgba(114, 28, 36, 0.2);
        }

        .chart-group {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #e9ecef;
            min-height: 200px;
        }

        .chart-title {
            font-weight: 600;
            color: #2d5a2d;
            margin-bottom: 15px;
            font-size: 0.95em;
        }

        .chart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        /* Pie Chart Styles */
        .pie-chart-svg {
            width: 100%;
            max-width: 200px;
            height: auto;
        }

        .pie-slice {
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .pie-slice:hover {
            opacity: 0.8;
        }

        .pie-percentage-label {
            pointer-events: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .pie-chart-legend {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            max-width: 300px;
        }

        .pie-legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 4px 0;
            font-size: 0.85em;
        }

        .pie-legend-color {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            flex-shrink: 0;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .pie-legend-label {
            flex: 1;
            color: #333;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pie-legend-value {
            color: #666;
            font-weight: 600;
            min-width: 60px;
            text-align: right;
        }

        .chart-no-data {
            text-align: center;
            color: #999;
            font-style: italic;
            padding: 20px;
            font-size: 0.9em;
        }

        /* Mobile responsiveness for Survey section */
        @media (max-width: 1200px) {
            .survey-question-wrapper {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .chart-group {
                order: -1;
            }
        }

        @media (max-width: 768px) {
            .survey {
                padding: 30px 0;
            }

            .survey-container {
                padding: 0 15px;
            }

            .survey-form {
                padding: 20px 15px;
            }

            .survey-question-wrapper {
                gap: 15px;
            }

            .chart-group {
                padding: 15px;
            }

            .pie-chart-legend {
                max-width: 100%;
            }

            .pie-legend-label {
                font-size: 0.8em;
            }

            .survey-form .form-group {
                margin-bottom: 15px;
            }

            .rating-stars .star-label {
                font-size: 2em;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .survey-form textarea,
            .survey-form input[type="text"],
            .survey-form input[type="email"],
            .survey-form select {
                font-size: 16px; /* Prevents zoom on iOS */
                min-height: 44px;
                padding: 10px 12px;
            }

            .survey-form textarea {
                min-height: 80px;
            }

            .survey-submit-btn {
                padding: 12px 20px;
                font-size: 1em;
                min-height: 44px;
            }

            .checkbox-group,
            .radio-group {
                gap: 5px;
            }

            .checkbox-label,
            .radio-label {
                padding: 5px 6px;
                font-size: 0.85em;
            }
        }

        /* Package Tabs Styles */
        .packages-tabs-container {
            margin-top: 30px;
        }

        .package-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 0;
        }

        .package-tab {
            padding: 12px 24px;
            background: #f8f9fa;
            border: 2px solid transparent;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-weight: 500;
            color: #666;
            transition: all 0.3s ease;
            position: relative;
            bottom: -2px;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
        }

        .package-tab:hover {
            background: #e9ecef;
            color: #2d5a2d;
        }

        .package-tab.active {
            background: white;
            border-color: #2d5a2d;
            border-bottom-color: white;
            color: #2d5a2d;
            font-weight: 600;
            z-index: 1;
        }

        .packages-content {
            position: relative;
            min-height: 400px;
        }

        #packages .packages-grid {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 30px !important;
        }

        #packages .packages-grid .package-card {
            display: none !important;
        }

        #packages .packages-grid .package-card.active {
            display: block !important;
        }

        /* Mobile responsiveness for Package Tabs */
        @media (max-width: 768px) {
            .package-tabs {
                gap: 8px;
                margin-bottom: 20px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                padding: 0 15px;
                justify-content: flex-start;
            }

            .package-tabs::-webkit-scrollbar {
                display: none;
            }

            .package-tab {
                padding: 10px 18px;
                font-size: 0.9em;
                min-height: 44px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .packages-content {
                min-height: 300px;
            }
        }

/* Reduce spacing above participants and dates in package cards */
        .package-card .package-bottom-container,
        #packages .package-bottom-container,
        .packages .package-bottom-container,
        .package-bottom-container { 
            margin-top: 0 !important; /* prevent pushing controls to bottom */
            gap: 0.35rem !important;
            display: flex !important;
            flex-direction: row !important; /* Override column from styles.css */
            flex-wrap: wrap !important;
            align-items: flex-start !important;
        }
        
        /* Display participants selector and date picker side-by-side */
        .package-bottom-container .package-participants-selector,
        .package-bottom-container .package-date-picker,
        #packages .package-participants-selector,
        #packages .package-date-picker,
        .packages .package-participants-selector,
        .packages .package-date-picker,
        .package-card .package-participants-selector,
        .package-card .package-date-picker {
            flex: 0 0 auto !important;
            margin-right: 1rem !important;
            margin-top: 4px !important;
            margin-bottom: 6px !important;
            padding-top: 8px !important;
        }

        #packages .package-participants-selector label,
        #packages .package-date-picker label,
        .packages .package-participants-selector label,
        .packages .package-date-picker label,
        .package-card .package-participants-selector label,
        .package-card .package-date-picker label {
            margin-top: 0 !important;
            margin-bottom: 6px !important;
        }

        /* Tighten related section margins so controls sit closer */
        #packages .package-card .location-categories {
            margin-bottom: 0.35rem !important;
        }
        #packages .package-card .location-category {
            margin-bottom: 0.25rem !important;
        }

        /* Mobile-specific overrides to beat mobile rules in styles.css */
        @media (max-width: 768px) {
            .package-card .package-bottom-container,
            #packages .package-bottom-container,
            .packages .package-bottom-container,
            .package-bottom-container {
                flex-direction: column !important;
            }
            .package-bottom-container .package-participants-selector,
            .package-bottom-container .package-date-picker,
            #packages .package-participants-selector,
            #packages .package-date-picker,
            .packages .package-participants-selector,
            .packages .package-date-picker,
            .package-card .package-participants-selector,
            .package-card .package-date-picker {
                margin: 0.35rem auto !important;
                padding-top: 8px !important;
                margin-right: 0 !important;
                width: 100% !important;
            }
            #packages .package-card .location-categories {
                margin-bottom: 0.5rem !important;
            }
        }

        /* Costa Rica Map Modal Styles */
        .map-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .map-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalFadeIn 0.3s ease-out;
        }

        .map-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 30px 20px;
            border-bottom: 1px solid #eee;
        }

        .map-modal-header h3 {
            margin: 0;
            color: #2c5530;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .map-modal-close {
            background: none;
            border: none;
            font-size: 2rem;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .map-modal-close:hover {
            background: #f5f5f5;
            color: #333;
        }

        .map-modal-body {
            padding: 25px 30px;
        }

        .map-view-btn:hover {
            background: #1e3d1e !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(45, 90, 45, 0.3);
        }

        .map-view-btn:active {
            transform: translateY(0);
        }

        @media (max-width: 768px) {
            .map-modal {
                padding: 10px;
            }

            .map-modal-content {
                max-width: 100%;
                max-height: 95vh;
            }

            .map-modal-header,
            .map-modal-body {
                padding: 20px;
            }

            .map-modal-header h3 {
                font-size: 1.3rem;
            }

            .map-modal-body {
                padding: 20px;
            }

            #costaRicaMap {
                height: 400px !important;
            }

            .map-modal-close {
                width: 36px;
                height: 36px;
                font-size: 1.8rem;
            }
        }

        /* Image Popup Styles */
        .image-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .image-popup-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .image-popup-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .image-popup-overlay.show .image-popup-content {
            transform: scale(1);
        }

        .image-popup-close {
            position: absolute;
            top: 10px;
            right: 15px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #666;
            font-size: 28px;
            color: #333;
            cursor: pointer;
            z-index: 10001;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
            font-weight: bold;
            line-height: 1;
        }

        .image-popup-close:hover {
            background: #f0f0f0;
            color: #000;
            border-color: #333;
            transform: scale(1.1);
        }

        .image-popup-close:active {
            transform: scale(0.95);
        }

        .image-popup-image {
            max-width: 100%;
            max-height: 70vh;
            width: auto;
            height: auto;
            border-radius: 8px;
            display: block;
            margin: 0 auto;
        }

        .image-popup-title {
            margin-top: 15px;
            font-size: 1.2rem;
            font-weight: 600;
            color: #2d5a2d;
            text-align: center;
        }

        .image-popup-description {
            margin-top: 10px;
            font-size: 0.95rem;
            color: #666;
            text-align: center;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .image-popup-content {
                max-width: 95vw;
                padding: 15px;
            }

            .image-popup-close {
                top: 5px;
                right: 10px;
                width: 36px;
                height: 36px;
                font-size: 24px;
            }

            .image-popup-image {
                max-height: 60vh;
            }
        }

        /* Security Score Banner */
        .security-score-banner {
            background: linear-gradient(135deg, #0f1f0f 0%, #1f3a1f 100%);
            color: #e8ffe8;
            padding: 30px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .security-score-banner .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .security-score-content {
            text-align: center;
            max-width: 720px;
        }

        .security-score-title {
            display: block;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #9be29b;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .security-score-value {
            font-size: 2.25rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }

        .security-score-description {
            margin-top: 10px;
            font-size: 0.95rem;
            color: #d6f5d6;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .security-score-banner {
                padding: 25px 15px;
            }

            .security-score-value {
                font-size: 1.8rem;
            }

            .security-score-description {
                font-size: 0.9rem;
            }
        }

/* Toucan Puzzle Game Styles */
.toucan-puzzle-section {
    padding: 60px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.puzzle-intro {
    max-width: 600px;
    margin: 0 auto 30px;
    color: #555;
    font-size: 1.1em;
}

.puzzle-game-container {
    max-width: 400px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.puzzle-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.puzzle-btn {
    background-color: #2d5a2d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.puzzle-btn:hover {
    background-color: #1a4d1a;
}

.puzzle-status {
    font-weight: 600;
    color: #2d5a2d;
}

.puzzle-board {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    background-color: #ddd;
    border: 2px solid #2d5a2d;
    border-radius: 8px;
    overflow: hidden;
}

.puzzle-tile {
    width: 100px;
    height: 100px;
    position: absolute;
    background-size: 300px 300px;
    background-repeat: no-repeat;
    background-color: #ddd;
    border: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    transition: top 0.2s ease, left 0.2s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0; /* Hide numbers if we add them for debugging */
}

.puzzle-tile.empty {
    background: transparent;
    border: none;
    cursor: default;
}

.puzzle-tile:hover:not(.empty) {
    filter: brightness(1.1);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.puzzle-win-message {
    margin-top: 20px;
    animation: fadeIn 0.5s ease;
}

.puzzle-win-message h3 {
    color: #2d5a2d;
    margin-bottom: 10px;
}

.puzzle-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #666;
    gap: 10px;
}

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

/* Mobile Responsiveness for Puzzle */
@media (max-width: 480px) {
    .puzzle-game-container {
        padding: 15px;
        max-width: 340px;
    }
    
    .puzzle-board {
        width: 270px;
        height: 270px;
    }
    
    .puzzle-tile {
        width: 90px;
        height: 90px;
        background-size: 270px 270px;
    }
}

/* Skeleton Loader Styles */
.skeleton-loader {
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

.skeleton-tabs-loader {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.skeleton-tab {
    width: 120px;
    height: 40px;
    background-color: #e0e0e0;
    border-radius: 20px;
}

.skeleton-card-loader {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.skeleton-card-header {
    height: 40px;
    width: 40%;
    background-color: #e0e0e0;
    margin-bottom: 20px;
    border-radius: 4px;
}

.skeleton-card-image {
    width: 100%;
    height: 400px;
    background-color: #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.skeleton-card-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeleton-line {
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 4px;
    width: 100%;
}

.skeleton-line.short {
    width: 60%;
}

/* Mobile adjustments for skeleton loader */
@media (max-width: 768px) {
    .skeleton-card-image {
        height: 250px;
    }
    
    .skeleton-tab {
        width: 100px;
        height: 35px;
    }
}