/* infrastructure/construction.php */

/* Mobile responsive styles for IoT Integration card */
    @media (max-width: 768px) {
        .illustration-container {
            padding: 20px !important;
        }

        .illustration-container>div {
            padding: 40px 20px !important;
            border-radius: 15px !important;
        }

        /* IoT Network Visual adjustments */
        .illustration-container>div>div[style*="height: 300px"] {
            height: 250px !important;
        }

        /* Central hub icon */
        .illustration-container .fa-server {
            font-size: 45px !important;
        }

        /* Dashed circle */
        .illustration-container>div>div>div[style*="200px"] {
            width: 160px !important;
            height: 160px !important;
        }

        /* Connected device icons */
        .illustration-container .fa-thermometer-half,
        .illustration-container .fa-video,
        .illustration-container .fa-lightbulb,
        .illustration-container .fa-shield-alt {
            font-size: 24px !important;
        }

        /* Position adjustments for smaller circle */
        .illustration-container>div>div>div[style*="top: 20px"] {
            top: 35px !important;
        }

        .illustration-container>div>div>div[style*="right: 20px"] {
            right: 35px !important;
        }

        .illustration-container>div>div>div[style*="bottom: 20px"] {
            bottom: 35px !important;
        }

        .illustration-container>div>div>div[style*="left: 20px"] {
            left: 35px !important;
        }

        /* Connection lines adjustments */
        .illustration-container>div>div>div[style*="height: 80px"] {
            height: 65px !important;
        }

        .illustration-container>div>div>div[style*="width: 80px"] {
            width: 65px !important;
        }

        .illustration-container>div>div>div[style*="top: 50px"] {
            top: 65px !important;
        }

        .illustration-container>div>div>div[style*="right: 50px"] {
            right: 65px !important;
        }

        .illustration-container>div>div>div[style*="bottom: 50px"] {
            bottom: 65px !important;
        }

        .illustration-container>div>div>div[style*="left: 50px"] {
            left: 65px !important;
        }

        /* Title and description */
        .illustration-container h4 {
            font-size: 18px !important;
            margin-top: 25px !important;
        }

        .illustration-container p {
            font-size: 13px !important;
        }
    }

    @media (max-width: 480px) {
        .illustration-container {
            padding: 15px !important;
        }

        .illustration-container>div {
            padding: 30px 15px !important;
            border-radius: 12px !important;
        }

        /* Further reduce IoT network visual */
        .illustration-container>div>div[style*="height: 300px"] {
            height: 200px !important;
        }

        .illustration-container .fa-server {
            font-size: 35px !important;
        }

        .illustration-container>div>div>div[style*="200px"] {
            width: 120px !important;
            height: 120px !important;
        }

        .illustration-container .fa-thermometer-half,
        .illustration-container .fa-video,
        .illustration-container .fa-lightbulb,
        .illustration-container .fa-shield-alt {
            font-size: 20px !important;
        }

        /* Tighter positioning for very small screens */
        .illustration-container>div>div>div[style*="top: 20px"] {
            top: 40px !important;
        }

        .illustration-container>div>div>div[style*="right: 20px"] {
            right: 40px !important;
        }

        .illustration-container>div>div>div[style*="bottom: 20px"] {
            bottom: 40px !important;
        }

        .illustration-container>div>div>div[style*="left: 20px"] {
            left: 40px !important;
        }

        .illustration-container h4 {
            font-size: 16px !important;
            margin-top: 20px !important;
        }

        .illustration-container p {
            font-size: 12px !important;
        }
    }

/* Construction & Fit-out - 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;
        }
    }

    /* Construction & Fit-out - CTA Section Mobile Styles */
    @media (max-width: 768px) {
        .construction-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) {
        .construction-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;
        }
    }

    /* Construction & Fit-out - Final Detailed Services Section Mobile Styles */
    @media (max-width: 768px) {
        .construction-services-detailed {
            padding: 50px 0 !important;
        }

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

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

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

        .service-card {
            padding: 25px !important;
            margin-bottom: 20px !important;
        }

        .service-icon i {
            font-size: 36px !important;
        }

        .service-card h4 {
            font-size: 20px !important;
            margin-bottom: 15px !important;
        }

        .service-card p {
            font-size: 15px !important;
            margin-bottom: 20px !important;
        }

        .service-card ul li {
            font-size: 14px !important;
            margin-bottom: 6px !important;
            padding-left: 18px !important;
        }

        .bottom-cta {
            padding: 35px 25px !important;
            margin-top: 40px !important;
        }

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

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

        .bottom-cta a {
            padding: 14px 35px !important;
            font-size: 16px !important;
        }
    }

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

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

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

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

        .service-card h4 {
            font-size: 19px !important;
        }

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

        .service-card ul li {
            font-size: 13px !important;
        }

        .bottom-cta {
            padding: 30px 20px !important;
        }

        .bottom-cta h4 {
            font-size: 22px !important;
        }

        .bottom-cta p {
            font-size: 15px !important;
        }

        .bottom-cta a {
            padding: 13px 30px !important;
            font-size: 15px !important;
        }
    }