/* Mobile Enhancements for Finn's Farm Storage */
/* Enhanced mobile experience for all pages */

/* ========================================
   GLOBAL MOBILE IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Typography & Spacing */
    body {
        font-size: 16px;
        line-height: 1.6;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    p {
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Container & Layout */
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    section {
        padding: 3rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix any elements that might cause overflow */
    * {
        box-sizing: border-box !important;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    iframe, embed, object {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Buttons & Interactive Elements */
    .btn {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        min-height: 48px; /* iOS touch target */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-large {
        padding: 1.25rem 2rem !important;
        font-size: 1.1rem !important;
    }
    
    /* Navigation Improvements */
    .header-content {
        padding: 1rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .logo-img {
        height: 40px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    .logo-text {
        font-size: 1.2rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0 !important;
    }
    
    .main-nav {
        display: none !important;
    }
    
    .main-nav.active {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 80% !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        transition: left 0.3s ease !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    
    .main-nav.active {
        left: 0 !important;
    }
    
    .nav-menu {
        flex-direction: column !important;
        padding: 2rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-item {
        margin: 0.5rem 0 !important;
        width: 100% !important;
    }
    
    .nav-link {
        padding: 1rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        background: #f8f9fa !important;
        margin: 0.5rem 0 !important;
        border-radius: 8px !important;
    }
    
    .dropdown-menu li a {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Header CTA */
    .header-cta {
        display: none !important; /* Hide on mobile for cleaner look */
    }
    
    /* Security Banner */
    .security-banner {
        padding: 1rem 0 !important;
    }
    
    .security-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }
    
    .security-feature {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }
    
    .security-icon {
        font-size: 1.2rem !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }
}

/* ========================================
   EXTREME MOBILE TEXT FIXES
   ======================================== */

@media (max-width: 768px) {
    
    /* Force all text to be visible */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    /* Body and html fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* All headings with responsive sizing */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        padding: 0.25rem 0 !important;
        margin: 0.5rem 0 !important;
    }
    
    /* All text elements */
    p, span, div, li, a, strong, em, small {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
    }
    
    /* Specific component fixes */
    .hero-text * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .feature-item * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        font-size: 0.8rem !important;
    }
    
    .storage-card * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .location-card * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .testimonial-card * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .security-item * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .footer-section * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    /* Button text fixes */
    .btn, button {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Navigation fixes */
    .nav-link, .dropdown-menu li a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Container fixes */
    .container, .hero-content, .storage-card, .location-card, 
    .testimonial-card, .security-item, .feature-item, .footer-section {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding: 0.5rem !important;
    }
    
    /* Grid fixes */
    .hero-content, .about-content, .storage-grid, .location-grid, 
    .security-grid, .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    /* Image fixes */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Force text visibility in all scenarios */
    *::before, *::after {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 768px) {
    
    /* Fix content being cut off */
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Fix grid layouts */
    .hero-content,
    .about-content,
    .storage-grid,
    .location-grid,
    .security-grid,
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* Fix text overflow - COMPREHENSIVE */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        font-size: clamp(1rem, 4vw, 2rem) !important;
    }
    
    h1 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.25rem, 4vw, 2rem) !important; }
    h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }
    h4 { font-size: clamp(1rem, 3vw, 1.25rem) !important; }
    h5 { font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important; }
    h6 { font-size: clamp(0.8rem, 2vw, 1rem) !important; }
    
    p, li, span, div, a, button {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
    
    /* Specific text elements */
    .hero-text h1,
    .hero-text h2,
    .hero-text p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .feature-item,
    .feature-item span,
    .feature-item strong {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        font-size: 0.85rem !important;
    }
    
    .storage-card h3,
    .storage-card p,
    .storage-card li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .location-card h3,
    .location-card p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .testimonial-content,
    .testimonial-author h4,
    .testimonial-author span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .security-item h3,
    .security-item p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .footer-links a,
    .footer-section h4,
    .contact-item span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    /* Fix any text in buttons */
    .btn, button {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }
    
    /* Fix navigation text */
    .nav-link,
    .dropdown-menu li a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    
    /* Fix any remaining text elements */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Ensure text containers don't overflow */
    .container,
    .hero-content,
    .storage-card,
    .location-card,
    .testimonial-card,
    .security-item,
    .feature-item,
    .footer-section {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        overflow: visible !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Fix images and media */
    img, iframe, embed, object {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Fix cards and boxes */
    .storage-card,
    .location-card,
    .testimonial-card,
    .security-item,
    .feature-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0.5rem 0 !important;
        overflow: hidden !important;
    }
    
    /* Fix buttons */
    .btn, button {
        width: auto !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Fix navigation dropdowns */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        background: #f8f9fa !important;
        margin: 0.5rem 0 !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }
    
    .dropdown-menu li a {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix hero section */
    .hero-section {
        padding: 1rem 0 !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .hero-features {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
        overflow: visible !important;
    }
    
    .feature-item {
        padding: 0.75rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin: 0.25rem 0 !important;
        overflow: visible !important;
    }
    
    /* Fix CTA sections */
    .hero-cta,
    .cta-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .hero-cta .btn,
    .cta-buttons .btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
    }
    
    /* Fix security features */
    .security-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        text-align: center !important;
        overflow: visible !important;
    }
    
    .security-feature {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
        margin: 0.25rem 0 !important;
        overflow: visible !important;
    }
    
    /* Fix testimonials */
    .testimonial-card {
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        overflow: visible !important;
    }
    
    .testimonial-content {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix trust indicators */
    .trust-indicators {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
        overflow: visible !important;
    }
    
    .trust-item {
        text-align: center !important;
        padding: 0.5rem !important;
        overflow: visible !important;
    }
    
    /* Fix location highlights */
    .location-highlights {
        padding: 1rem 0 !important;
        overflow: visible !important;
    }
    
    .location-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        overflow: visible !important;
    }
    
    .location-card {
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }
    
    .location-image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    
    .location-content {
        padding: 1rem !important;
        overflow: visible !important;
    }
    
    /* Fix footer */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        text-align: center !important;
        overflow: visible !important;
    }
    
    .footer-section {
        margin: 1rem 0 !important;
        overflow: visible !important;
    }
    
    .footer-links {
        columns: 1 !important;
        column-gap: 0 !important;
    }
    
    .footer-links li {
        margin: 0.25rem 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix contact info */
    .contact-info {
        text-align: center !important;
        overflow: visible !important;
    }
    
    .contact-item {
        justify-content: center !important;
        margin: 0.5rem 0 !important;
        overflow: visible !important;
    }
    
    /* Fix social links */
    .social-links {
        justify-content: center !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Fix copyright */
    .footer-bottom {
        text-align: center !important;
        padding: 1rem 0 !important;
        overflow: visible !important;
    }
    
    .footer-bottom p {
        font-size: 0.8rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0.25rem 0 !important;
    }
}

/* ========================================
   PAGE-SPECIFIC MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    
    /* HERO PAGE */
    .hero-section {
        padding: 2rem 0 !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-features {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin: 2rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .feature-item {
        text-align: center !important;
        padding: 1rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .feature-icon {
        font-size: 2rem !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-cta {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-cta .btn {
        width: 100% !important;
        max-width: 300px !important;
        box-sizing: border-box !important;
    }
    
    .hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-image-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .hero-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* ABOUT PAGE */
    .about-section {
        padding: 2rem 0 !important;
    }
    
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .about-text {
        text-align: center !important;
    }
    
    .about-features {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .about-feature {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    .feature-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Video Section */
    .video-section {
        padding: 2rem 0 !important;
    }
    
    .video-container {
        position: relative !important;
        padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
        height: 0 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }
    
    .video-container iframe,
    .video-container video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
    
    /* UNITS PAGE */
    .units-header {
        padding: 2rem 0 !important;
        text-align: center !important;
    }
    
    .unit-filter {
        padding: 1rem 0 !important;
        background: #f8f9fa !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    .filter-buttons {
        display: flex !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
        padding: 0 1rem !important;
        scrollbar-width: thin !important;
    }
    
    .filter-btn {
        white-space: nowrap !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 20px !important;
        min-width: auto !important;
    }
    
    .storage-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .storage-card {
        padding: 1.5rem !important;
        border-radius: 12px !important;
    }
    
    .storage-card h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .storage-features {
        margin: 1rem 0 !important;
    }
    
    .storage-features li {
        margin-bottom: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* FIND US PAGE */
    .findus-header {
        padding: 2rem 0 !important;
        text-align: center !important;
    }
    
    .map-section {
        padding: 1rem 0 !important;
    }
    
    .map-container {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .map-wrapper {
        order: 2 !important;
    }
    
    .map-info {
        order: 1 !important;
    }
    
    .map-canvas iframe {
        height: 300px !important;
        border-radius: 8px !important;
    }
    
    .map-controls {
        display: none !important; /* Hide on mobile */
    }
    
    .map-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
    }
    
    .map-links .btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    .directions-section {
        padding: 2rem 0 !important;
    }
    
    .directions-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .direction-card {
        padding: 1.5rem !important;
        border-radius: 8px !important;
    }
    
    .direction-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* CONTACT PAGE (already optimized, but enhancements) */
    .contact-header {
        padding: 2rem 0 !important;
        text-align: center !important;
    }
    
    .contact-info-section {
        display: none !important; /* Already hidden, confirming */
    }
    
    .contact-form-section {
        padding: 1rem 0 !important;
    }
    
    .form-header {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* FOOTER */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footer-section h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .contact-info {
        text-align: center !important;
    }
    
    .contact-item {
        margin-bottom: 1.5rem !important;
        text-align: left !important;
    }
    
    .contact-details {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    .social-links {
        justify-content: center !important;
        margin-top: 1rem !important;
    }
    
    .footer-bottom {
        padding: 1.5rem 0 !important;
        text-align: center !important;
    }
    
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .copyright {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .footer-bottom-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .footer-bottom-links .btn {
        width: 100% !important;
        max-width: 250px !important;
    }
}

/* ========================================
   SMALLER MOBILE DEVICES (480px and below)
   ======================================== */

@media (max-width: 480px) {
    
    /* Enhanced small mobile experience */
    .container {
        padding: 0 0.75rem !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    .btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.95rem !important;
    }
    
    .security-features {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .feature-item {
        padding: 0.75rem !important;
    }
    
    .hero-features {
        gap: 0.75rem !important;
    }
    
    .storage-card {
        padding: 1rem !important;
    }
    
    .direction-card {
        padding: 1rem !important;
    }
    
    .map-canvas iframe {
        height: 250px !important;
    }
    
    .filter-buttons {
        padding: 0 0.75rem !important;
    }
    
    .filter-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* Mobile Menu Overlay */
@media (max-width: 768px) {
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999 !important;
    }
    
    .mobile-menu-overlay.active {
        display: block !important;
    }
    
    /* Close button for mobile menu */
    .mobile-menu-close {
        display: block !important;
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        width: 30px !important;
        height: 30px !important;
        background: none !important;
        border: none !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }
}

/* Hide mobile menu elements on desktop */
@media (min-width: 769px) {
    .mobile-menu-close {
        display: none !important;
    }
    
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ========================================
   TOUCH OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    
    /* Larger touch targets */
    .nav-link,
    .filter-btn,
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better spacing for touch */
    .storage-card,
    .direction-card,
    .about-feature {
        margin: 0.5rem 0 !important;
    }
    
    /* Prevent text selection on touch */
    .btn,
    .nav-link,
    .filter-btn {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    
    /* Reduce animations on mobile for better performance */
    .hero-section,
    .storage-card,
    .direction-card {
        transform: none !important;
        transition: none !important;
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Hide unnecessary elements on mobile */
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}