<footer id="footerBox" class="page-footer font-small dark-blue fixed-bottom p-2">
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="text-light footer-client">
            <?php echo strtoupper($_SESSION['client'])?>
        </div>
        <div class="text-center footer-controls" style="width:300px; padding:0px; margin-top:-15px; z-index:99999999">
            <div id="footerControls" style="margin-top:-30px;"></div>
        </div>
        <div class="d-none d-md-block text-light footer-ers">
            Engineering Reporting System
        </div>
        <div class="d-block d-md-none text-light footer-ers-small" style="width:50px;">
            E.R.S
        </div>
    </div>
</footer>

<style>
/* General footer styling */
.footer-client,
.footer-ers,
.footer-ers-small {
    margin-top: 10px;
}

.footer-controls {
    margin-top: -15px;
}

@media (max-width: 1139px),
(orientation: portrait) {

    .footer-client,
    .footer-ers,
    .footer-ers-small {
        font-size: 0.5em;
        /* Reduce font size to half */
    }

    .footer-controls {
        font-size: 0.5em;
        /* Reduce font size to half if it contains any text */
    }
}
</style>