/* =========================================================
   LIGHTWEIGHT MOBILE UI (MAX-WIDTH: 768px)
   ========================================================= */

/* 1. Kill Heavy Shadows, Ambient Glows, and 3D Transforms */
.hero-ambient-glow { display: none !important; }
.hero-3d-card { 
    transform: none !important; 
    transition: none !important; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}

/* 2. Transform Carousels into Native CSS Horizontal Scroll (ZERO CPU LOAD) */
.carousel-track, .carousel-track.reverse {
    animation: none !important; /* Disables continuous looping */
    overflow-x: auto !important; /* Enables native scroll */
    -webkit-overflow-scrolling: touch; /* Smooth iOS momentum scroll */
    scroll-snap-type: x mandatory; /* Snaps to cards perfectly */
    padding-bottom: 20px; /* Space for scrollbar */
    padding-left: 5%;
    gap: 15px; 
    width: 100%;
}

/* Add an elegant, subtle scrollbar for mobile visibility */
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; }

/* 3. Adjust Card Sizes for Swipeable View */
.facility-card, .activity-card { 
    min-width: 260px !important; 
    scroll-snap-align: center; /* Ensures it snaps centered on screen */
}
.facility-card img, .activity-card img { height: 160px !important; }
.facility-card h3 { font-size: 1.1rem !important; padding: 12px 10px !important; }

.topper-card { 
    min-width: 220px !important; 
    scroll-snap-align: center; 
}
.topper-card img { height: 160px !important; }
.topper-info { padding: 15px 10px !important; }
.topper-info h3 { font-size: 1rem !important; margin-bottom: 5px !important; }
.topper-info p { font-size: 0.8rem !important; margin-bottom: 2px !important; }

.testimonial-card { 
    width: 320px !important; 
    min-width: 320px !important; 
    padding: 30px 20px !important; 
    scroll-snap-align: center; 
}

/* 4. General Mobile Layout Fixes */
.section-title { font-size: 2.2rem; }
.hero-section { padding: 120px 5% 50px; }
.hero-content-left h1 { font-size: 2.8rem; margin-bottom: 15px; }
.hero-content-left p { font-size: 1.05rem; margin-bottom: 25px; }
.hero-buttons { flex-direction: column; gap: 15px; }
.btn { width: 100%; justify-content: center; }

/* Adjust floating badges so they fit on mobile images */
.floating-3d-badge { transform: translateZ(20px) !important; padding: 10px 15px; }
.badge-top-right { font-size: 0.9rem; top: -10px; right: -10px; }
.badge-bottom-left span { font-size: 0.85rem; }

/* Structural element fixes */
.custom-shape-divider-bottom svg { height: 40px; }
.vm-card { padding: 30px 20px; }
.whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 25px; }
.contact-map { min-height: 300px; }
.privacy-content .text-container { padding: 30px 20px; }
.gallery-grid { grid-template-columns: 1fr; }
.ad-popup-content { width: 95%; max-width: 350px; }
.close-video-modal { top: -40px; font-size: 30px; }
.page-header { padding: 130px 5% 60px; }
.page-header h1 { font-size: 2.8rem; }