/* infrastructure/retrofit.php */

/* Retrofit Solutions - Introduction Section Mobile Styles */
    @media (max-width: 768px) {
        .module-overview-area {
            padding: 15px 0 !important;
        }

        .module-intro {
            padding: 30px 20px !important;
            border-radius: 15px !important;
        }

        .intro-header h3 {
            font-size: 24px !important;
            margin-bottom: 20px !important;
        }

        .module-intro div[style*="font-size: 18px"] {
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

        .module-intro p {
            margin-bottom: 20px !important;
        }
    }

    @media (max-width: 480px) {
        .module-intro {
            padding: 25px 15px !important;
            border-radius: 12px !important;
        }

        .intro-header h3 {
            font-size: 22px !important;
            margin-bottom: 15px !important;
        }

        .module-intro div[style*="font-size: 18px"] {
            font-size: 15px !important;
        }

        .module-intro p {
            margin-bottom: 18px !important;
        }
    }

    /* Retrofit Solutions - CTA Section Mobile Styles */
    @media (max-width: 768px) {
        .retrofit-cta-section {
            height: 40vh !important;
            background-position: center center !important;
        }

        .cta-content {
            max-width: 90% !important;
            padding: 0 20px !important;
            margin: 0 15px !important;
        }

        .cta-content h3 {
            font-size: 32px !important;
            margin-bottom: 20px !important;
            line-height: 1.1 !important;
        }

        .cta-content p {
            font-size: 18px !important;
            margin-bottom: 35px !important;
            max-width: 100% !important;
        }

        .cta-content div[style*="display: flex"] {
            flex-direction: column !important;
            gap: 15px !important;
            align-items: center !important;
        }

        .cta-content a {
            padding: 15px 25px !important;
            font-size: 16px !important;
            width: 80% !important;
            max-width: 280px !important;
            justify-content: center !important;
        }
    }

    @media (max-width: 480px) {
        .retrofit-cta-section {
            height: 35vh !important;
        }

        .cta-content {
            padding: 0 15px !important;
            margin: 0 10px !important;
        }

        .cta-content h3 {
            font-size: 28px !important;
            margin-bottom: 15px !important;
        }

        .cta-content p {
            font-size: 16px !important;
            margin-bottom: 30px !important;
        }

        .cta-content a {
            padding: 14px 20px !important;
            font-size: 15px !important;
            width: 90% !important;
            max-width: 250px !important;
        }
    }

    /* Retrofit Solutions - Final Detailed Services Section Mobile Styles */
    @media (max-width: 768px) {
        .retrofit-services-detailed {
            padding: 50px 0 !important;
        }

        .section-header {
            margin-bottom: 50px !important;
            padding: 0 20px !important;
        }

        .section-header h3 {
            font-size: 28px !important;
            margin-bottom: 20px !important;
        }

        .section-header p {
            font-size: 16px !important;
        }

        /* Energy Efficiency Category */
        .retrofit-category {
            margin-bottom: 40px !important;
        }

        .category-header h4 {
            font-size: 24px !important;
            margin-bottom: 15px !important;
        }

        .category-header i {
            font-size: 24px !important;
            margin-right: 12px !important;
        }

        .category-header p {
            font-size: 15px !important;
        }

        /* Service items grid */
        .service-item {
            padding: 25px !important;
            margin-bottom: 15px !important;
            border-radius: 10px !important;
        }

        .service-item h6 {
            font-size: 16px !important;
            margin-bottom: 12px !important;
        }

        .service-item p {
            font-size: 14px !important;
        }

        /* Process flow section */
        .process-flow {
            flex-direction: column !important;
            gap: 20px !important;
        }

        .process-step {
            min-width: 100% !important;
            text-align: center !important;
        }

        .process-step div[style*="width: 60px"] {
            width: 50px !important;
            height: 50px !important;
            font-size: 20px !important;
            margin-bottom: 15px !important;
        }

        .process-step h6 {
            font-size: 16px !important;
            margin-bottom: 12px !important;
        }

        .process-step p {
            font-size: 14px !important;
        }

        /* System upgrades grid */
        .system-upgrades {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }

        .upgrade-item {
            padding: 20px !important;
            flex-direction: column !important;
            text-align: center !important;
            gap: 15px !important;
        }

        .upgrade-item i {
            font-size: 32px !important;
            margin-top: 0 !important;
        }

        .upgrade-item h6 {
            font-size: 16px !important;
            margin-bottom: 10px !important;
        }

        .upgrade-item p {
            font-size: 14px !important;
        }

        /* Background sections */
        .retrofit-category[style*="background: white"] {
            padding: 35px 20px !important;
            border-radius: 15px !important;
        }

        .retrofit-category[style*="background: rgba"] {
            padding: 40px 20px !important;
            border-radius: 15px !important;
        }

        /* Results section */
        .results-section {
            padding: 40px 25px !important;
            border-radius: 15px !important;
        }

        .results-section h4 {
            font-size: 26px !important;
            margin-bottom: 25px !important;
        }

        .results-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 25px !important;
            margin-bottom: 30px !important;
        }

        .result-item div[style*="font-size: 48px"] {
            font-size: 36px !important;
            margin-bottom: 8px !important;
        }

        .result-item p {
            font-size: 13px !important;
        }

        .results-section a {
            padding: 15px 35px !important;
            font-size: 16px !important;
        }
    }

    @media (max-width: 480px) {
        .retrofit-services-detailed {
            padding: 40px 0 !important;
        }

        .section-header {
            margin-bottom: 40px !important;
            padding: 0 15px !important;
        }

        .section-header h3 {
            font-size: 26px !important;
        }

        .category-header h4 {
            font-size: 22px !important;
        }

        .service-item {
            padding: 20px !important;
        }

        .service-item h6 {
            font-size: 15px !important;
        }

        .service-item p {
            font-size: 13px !important;
        }

        .process-step div[style*="width: 60px"] {
            width: 45px !important;
            height: 45px !important;
            font-size: 18px !important;
        }

        .upgrade-item {
            padding: 18px !important;
        }

        .upgrade-item i {
            font-size: 28px !important;
        }

        .upgrade-item h6 {
            font-size: 15px !important;
        }

        .upgrade-item p {
            font-size: 13px !important;
        }

        .retrofit-category[style*="background: white"] {
            padding: 30px 15px !important;
        }

        .retrofit-category[style*="background: rgba"] {
            padding: 35px 15px !important;
        }

        .results-section {
            padding: 35px 20px !important;
        }

        .results-section h4 {
            font-size: 24px !important;
        }

        .results-grid {
            grid-template-columns: 1fr !important;
            gap: 20px !important;
        }

        .result-item div[style*="font-size: 48px"] {
            font-size: 32px !important;
        }

        .results-section a {
            padding: 14px 30px !important;
            font-size: 15px !important;
        }
    }