/* infrastructure/maintenance.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;
        }
    }