/* --- Mobile Layout Lockdown --- */

/* 1. Force all sections and containers to fit exactly within the screen width */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* This stops horizontal scrolling/overlap */
}

.container, 
section, 
header {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important; /* Forces padding to be INSIDE the width */
}

/* 2. Fix Grids to prevent overlapping */
.story-grid, 
.values-grid, 
.testimonial-grid, 
.visit-grid, 
.grid-2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
}

/* 3. Ensure cards don't break width */
.story-card-dark, 
.story-card-light, 
.value-card, 
.testimonial-card, 
.info-card {
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 4. Fix Hero Image/Text */
.hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-content {
    width: 100% !important;
    padding: 0 10px !important;
}