/* ========================================= */
/* EXTREME TIGHT PHONES (Max 400px)          */
/* For iPhone SE, small Androids, etc.       */
/* ========================================= */

@media screen and (max-width: 400px) {
    
    /* 1. Global Typography & Spacing */
    .section-padding { padding: 40px 15px !important; }
    .section-title { font-size: 1.4rem !important; margin-bottom: 25px !important; }
    
    header.glass { padding: 10px 15px !important; }
    .nav-logo { transform: scale(1.8) !important; } 

    /* 2. Hero Section */
    .hero h2 { font-size: 2rem !important; }
    .hero p { font-size: 0.95rem !important; }
    .hero-logo { max-width: 150px !important; }

    /* ========================================= */
    /* 🚨 3. TIGHTER & SMALLER BUTTONS 🚨        */
    /* ========================================= */
    /* Shrinks the global buttons for a tighter, premium feel */
    .cta-button, .social-btn, .search-bar button, .glass-btn, .star-btn, 
    .whatsapp-btn, .facebook-btn, .instagram-btn, .maps-btn, .city-btn {
        padding: 10px 15px !important; 
        font-size: 0.85rem !important; 
        border-radius: 4px !important;
    }

    /* Made the width slightly smaller so they don't stretch edge-to-edge */
    .hero-buttons .cta-button { 
        width: 90% !important; 
        max-width: 230px !important; 
    }

    /* ========================================= */
    /* 🚨 4. OVERRIDE DESKTOP 16:9 FOR TEXT 🚨   */
    /* ========================================= */
    .about-box, .description-box { 
        aspect-ratio: auto !important; 
        height: auto !important;
        
        /* 🚨 THE CENTERING FIX: 100% respects the padding perfectly 🚨 */
        width: 100% !important;
        margin: 0 auto 30px auto !important; 
        padding: 30px 15px !important; 
        box-sizing: border-box !important;
    }
    
    .about-box p { 
        font-size: 0.9rem !important; 
        line-height: 1.5 !important; 
        text-align: center !important;
    }

    /* ========================================= */
    /* 🚨 5. SHOWCASE BUTTONS (OUTSIDE BOX) 🚨   */
    /* ========================================= */
    .property-showcase-box { 
        aspect-ratio: auto !important;
        height: 220px !important; 
        
        /* 🚨 THE CENTERING FIX 🚨 */
        width: 100% !important;
        padding: 20px !important;
        margin: 0 auto 140px auto !important; 
        box-sizing: border-box !important;
        
        overflow: visible !important;   
    }
    
    .showcase-buttons { 
        position: absolute !important; 
        bottom: -110px !important; 
        left: 0 !important;
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; 
        gap: 8px !important;
        width: 100% !important;
    }}