/* 📱 MOBILE-FIRST COMPLETE FIX - OPTIMIZED */

/* Force proper box-sizing */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container fix - prevent overflow */
.container, section, div, main, article {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Images responsive */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    section, .container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    
    .properties-grid,
    .services-grid,
    .blog-grid,
    .testimonials-grid,
    .locations-grid,
    .why-grid,
    .values-grid,
    .team-grid,
    .stats-grid,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* Mobile: Force 1 column for ALL grids */
@media (max-width: 768px) {
    /* CRITICAL: Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Add more side space on mobile - 20px */
    section, .container, div[class*="section"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Header specific - Logo left, Text center */
    .top-header, .admin-header {
        padding: 24px 20px !important;
    }
    
    .page-header {
        padding: 32px 20px !important;
        text-align: center !important;
    }
    
    .header-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .logo-section {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
        flex: 0 0 auto !important;
    }
    
    .logo-img {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
    }
    
    .logo-text {
        text-align: center !important;
        flex: 1 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .logo-text h1,
    .company-name {
        font-size: 24px !important;
        text-align: center !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        width: 100% !important;
    }
    
    .logo-text p,
    .om-sai-ram {
        font-size: 15px !important;
        letter-spacing: 3px !important;
        text-align: center !important;
        font-weight: 900 !important;
        color: #FF9933 !important;
        text-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 25px rgba(255,153,51,1), 0 0 40px rgba(255,153,51,0.6) !important;
        background: none !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 6px !important;
    }
    
    .company-tagline {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 4px !important;
        width: 100% !important;
    }
    
    /* Navbar - ONE LINE, ULTRA COMPACT, SCROLLABLE */
    .navbar {
        padding: 6px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .navbar::-webkit-scrollbar {
        display: none !important;
    }
    
    .nav-container {
        flex-direction: row !important;
        gap: 3px !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        padding: 0 8px !important;
        min-width: min-content !important;
    }
    
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        gap: 3px !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .nav-links li {
        width: auto !important;
        flex: 0 0 auto !important;
    }
    
    .nav-links a {
        display: block !important;
        padding: 6px 8px !important;
        text-align: center !important;
        font-size: 10px !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        color: white !important;
        text-decoration: none !important;
    }
    
    .nav-btn {
        display: block !important;
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
    }
    
    /* HIDE HAMBURGER - we show full navbar */
    .hamburger {
        display: none !important;
    }
    
    /* ALL GRIDS - SINGLE COLUMN */
    .properties-grid,
    .services-grid,
    .blog-grid,
    .testimonials-grid,
    .locations-grid,
    .why-grid,
    .values-grid,
    .team-grid,
    .stats-grid,
    .story-grid,
    .footer-grid,
    .about-container,
    .contact-grid,
    .form-grid,
    div[style*="grid-template-columns"],
    div[class*="-grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    /* Cards full width */
    .property-card,
    .service-card,
    .blog-card,
    .value-card,
    .stat-card,
    .testimonial-card,
    .location-card,
    .why-card,
    .team-member {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Text sizes */
    .page-header h1,
    .hero h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .section-title {
        font-size: 28px !important;
    }
    
    .about-content h2,
    .cta-content h2 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    p {
        font-size: 15px !important;
    }
    
    /* Buttons full width */
    .btn-primary,
    .submit-btn,
    .filter-btn,
    .view-details-btn,
    .hero-btns button,
    .cta-buttons button {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
    
    /* Button containers */
    .hero-btns,
    .cta-buttons,
    .button-group {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    /* Hero section */
    .hero {
        height: auto !important;
        min-height: 60vh !important;
        padding: 60px 20px !important;
    }
    
    .hero h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .hero p {
        font-size: 16px !important;
    }
    
    /* Stats */
    .stat-card {
        padding: 32px 24px !important;
    }
    
    .stat-number {
        font-size: 38px !important;
    }
    
    .stat-icon {
        font-size: 48px !important;
    }
    
    /* Property cards */
    .property-img {
        height: 220px !important;
    }
    
    .property-price {
        font-size: 24px !important;
    }
    
    .property-title {
        font-size: 18px !important;
    }
    
    /* Service cards */
    .service-card {
        padding: 32px 24px !important;
    }
    
    .service-icon {
        font-size: 52px !important;
    }
    
    /* Location cards */
    .location-card {
        height: 220px !important;
    }
    
    /* Why icons */
    .why-icon {
        width: 75px !important;
        height: 75px !important;
        font-size: 38px !important;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: 28px 24px !important;
    }
    
    /* About image */
    .about-img,
    .about-image img {
        height: 280px !important;
    }
    
    /* Forms */
    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100% !important;
        font-size: 15px !important;
    }
    
    /* Tables - make scrollable */
    .data-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    section, .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .hero h1 {
        font-size: 26px !important;
    }
    
    .section-title {
        font-size: 24px !important;
    }
    
    .property-img {
        height: 200px !important;
    }
    
    .stat-number {
        font-size: 32px !important;
    }
    
    .btn-primary,
    .submit-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}