/* ============================================================
   GLOBAL RESPONSIVE RULES
   Loaded on every page (via includes/navbar.php) right after
   style.css. This file was previously empty — these are the
   site-wide safety nets; page-specific breakpoints stay in each
   page's own stylesheet (services.css, contact.css, etc).
   ============================================================ */

/* Never let an image/video overflow its container */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Google Map / any fixed-height iframe should still scale on tiny screens */
iframe {
    height: auto;
    min-height: 250px;
}

/* Prevent any element with an inline/fixed width from causing
   horizontal scroll on mobile */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Tables (e.g. inside blog rich-text content) scroll horizontally
   on small screens instead of breaking layout */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    white-space: normal;
}

/* ===== Typography scale-down ===== */
@media (max-width: 992px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 576px) {
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    body { font-size: 15px; }
}

/* ===== Navbar ===== */
@media (max-width: 991px) {
    .navbar .container {
        flex-wrap: wrap;
    }
    .navbar-nav {
        text-align: center;
        padding: 12px 0;
    }
    .btn-call {
        margin: 10px auto 0 auto !important;
        display: inline-block;
    }
}

/* ===== Generic section padding safety net ===== */
@media (max-width: 768px) {
    section {
        padding-left: 16px;
        padding-right: 16px;
    }
}