/* =====================================================================
   AK Software Solutions — Responsive & overflow guards
   Additive only. Does NOT restyle the design — it just prevents
   horizontal scrolling / overflow and keeps media inside its container.
   Loaded last so these safety rules always win.
   ===================================================================== */

/* Prevent any element from pushing the page wider than the viewport
   (e.g. stray 100vw widths, wide tables, absolutely-positioned art). */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Predictable box model everywhere (padding/border never overflow). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Media never overflows its container; keeps aspect ratio -> less CLS. */
img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
    height: auto;
}

/* Wide tables scroll inside their own box instead of the whole page. */
.table-responsive,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Long words / URLs wrap instead of forcing horizontal scroll on mobile. */
p,
li,
a,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* =====================================================================
   FIX: content missing / blank cards on mobile.
   The AOS animation library is only initialised above 768px
   (see master layout JS). aos.css sets every [data-aos] element to
   opacity:0 and shifts it with transform; on mobile AOS never runs to
   reveal them, so all animated text/cards stay invisible.
   Force every animated element to its final, visible state on <=768px
   so mobile shows exactly the same content as desktop (just without the
   scroll animation, which is better for mobile performance anyway).
   ===================================================================== */
@media (max-width: 768px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        /* CRITICAL: aos.css sets pointer-events:none until an element is
           animated in. AOS never runs on mobile, so without this the whole
           element (and its links/buttons) stays un-clickable. */
        pointer-events: auto !important;
    }
}

/* =====================================================================
   Make the whole service card clickable (Bootstrap stretched-link needs
   a positioned ancestor). The "Explore More" link stretches to cover the
   entire card, so a tap/click anywhere on the card opens the service.
   ===================================================================== */
.services-section {
    position: relative;
    cursor: pointer;
}

/* =====================================================================
   Mobile/tablet navbar order:
   Logo on the left, then the "Contact Us" button, then the hamburger
   menu on the far right (menu appears to the RIGHT of Contact Us).
   Only applies below the lg breakpoint (992px) where the menu collapses;
   desktop layout is untouched.
   ===================================================================== */
@media (max-width: 991.98px) {
    .navbar > .container {
        flex-wrap: wrap;
    }
    .navbar .navbar-brand {
        order: 1;
        margin-right: auto;      /* pushes Contact + menu to the right */
    }
    .navbar .d-flex {
        order: 2;
        margin-right: 0.5rem;    /* small gap before the menu button */
    }
    .navbar .navbar-toggler {
        order: 3;
    }
    .navbar #navbarSupportedContent {
        order: 4;
        flex-basis: 100%;        /* dropdown opens as a full-width row */
    }
}