/* MOBILE DARK THEME FIX - Keep all content and dark backgrounds */

@media screen and (max-width: 768px) {
    /* Remove any white backgrounds that override dark theme */
    
    /* 1. Fix navbar - keep transparent/dark */
    .navbar {
        background: rgba(26, 26, 26, 0.95) !important; /* Dark background instead of white */
        backdrop-filter: blur(10px) !important;
    }
    
    .navbar .logo span {
        color: white !important; /* White text for dark navbar */
    }
    
    .nav-toggle span {
        background: white !important; /* White hamburger lines */
    }
    
    /* 2. Fix nav menu - dark theme */
    .nav-menu {
        background: #1a1a1a !important; /* Dark background instead of white */
        border-left: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .nav-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .nav-menu a {
        color: white !important; /* White text for dark menu */
    }
    
    .nav-menu a:hover,
    .nav-menu a:active {
        background: rgba(255,255,255,0.1) !important;
    }
    
    /* 3. Ensure ALL sections are visible */
    section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 4. Show "Why Choose" section */
    .why-choose,
    .features,
    .benefits {
        display: block !important;
        visibility: visible !important;
    }
    
    .feature-grid,
    .benefit-grid,
    .why-choose-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .feature-card,
    .benefit-card,
    .why-choose-card {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 20px !important;
    }
    
    /* 5. Show CTA sections with gradients */
    .cta,
    .call-to-action,
    .cta-section {
        display: block !important;
        visibility: visible !important;
        background: inherit !important; /* Keep original gradient */
    }
    
    /* 6. Show testimonials/success stories */
    .testimonials,
    .success-stories,
    .client-success {
        display: block !important;
        visibility: visible !important;
    }
    
    .testimonial-grid,
    .success-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* 7. Show consultation form section */
    .consultation,
    .contact-section,
    .free-consultation {
        display: block !important;
        visibility: visible !important;
    }
    
    /* 8. Ensure floating shapes don't hide content */
    .floating-shapes,
    .floating-cards {
        z-index: 0 !important;
        opacity: 0.5 !important;
    }
    
    /* 9. Keep all background colors/gradients */
    body,
    .hero,
    section {
        background: inherit !important; /* Preserve original backgrounds */
    }
    
    /* 10. Fix text visibility on dark backgrounds */
    body {
        color: inherit !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: inherit !important;
    }
    
    p {
        color: inherit !important;
    }
    
    /* 11. Ensure cards are visible */
    .card,
    [class*="card"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 12. Fix any hidden elements */
    .hidden-mobile,
    .desktop-only {
        display: block !important; /* Show everything on mobile */
    }
    
    /* 13. Preserve premium sections */
    .premium-section,
    .premium-features,
    .premium-cta {
        display: block !important;
        visibility: visible !important;
    }
    
    /* 14. Fix grid layouts for mobile */
    .grid,
    [class*="grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* 15. Ensure no content is cut off */
    * {
        overflow: visible !important;
    }
    
    html, body {
        overflow-x: hidden !important; /* Only hide horizontal overflow */
    }
    
    /* 16. Fix z-index for proper layering */
    .content,
    .container,
    .section-content {
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 17. Adjust only sizing, not colors */
    .hero {
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    .hero-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 18px !important;
    }
    
    /* 18. Responsive images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 19. Button adjustments */
    .btn,
    button {
        min-height: 48px !important;
        font-size: 16px !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 12px 24px !important;
    }
    
    /* 20. Form adjustments */
    .form-group {
        margin-bottom: 20px !important;
    }
    
    input,
    textarea,
    select {
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        color: white !important;
    }
    
    input::placeholder,
    textarea::placeholder {
        color: rgba(255,255,255,0.6) !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
    .hero-title {
        font-size: 32px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
}

/* Remove any display:none overrides */
@media screen and (max-width: 768px) {
    /* Force show all sections */
    section:not(.hidden) {
        display: block !important;
    }
    
    /* Ensure no white backgrounds */
    * {
        background-color: inherit !important;
    }
    
    /* Only set specific white backgrounds where needed */
    .white-bg,
    .bg-white {
        background-color: white !important;
    }
}