/* AppVerra responsive fixes: loaded after every other stylesheet on every page. */

/* The off-canvas side menu and decorative shapes sit outside the viewport by design;
   clip them instead of letting the page scroll sideways. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

img,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* The floating side menu needs hover; on touch-sized screens it only covers content. */
@media (max-width: 1199.98px) {
    .side-menu {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Process tabs: grid cells may shrink below their icon width. */
    .process-tabs .tabs .tabs-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .process-tabs .tabs .tabs-icons-wrapper {
        min-width: 0;
    }

    .process-tabs .tabs .tabs-icons-wrapper span {
        overflow-wrap: anywhere;
    }

    /* Tech stack rows on case studies. */
    .neuro-nights-tech .tech-img-box {
        flex-wrap: wrap;
        margin-right: 0;
        gap: 12px;
    }

    .neuro-nights-tech .tech-img-box img {
        width: 96px;
    }

    /* Cost calculator step bar. */
    .wizard > .steps > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .wizard > .steps > ul > li {
        float: none;
        width: auto;
        flex: 1 1 calc(50% - 6px);
    }

    /* Long headings and words never force a wider page. */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    a {
        overflow-wrap: break-word;
    }

    /* Decorative shapes on the digital marketing page. */
    .bg-shape:before,
    .bg-shape:after {
        max-width: 40vw;
    }
}

/* Industry pages: the two-image strip is a .row with no .container, so its gutters overhang the page. */
section.service > .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    /* Some case-study images carry fixed pixel widths. */
    .img-fluid {
        max-width: 100% !important;
    }

    /* Tickerwise: stack the Problem and Solution boxes. */
    .all-traders-problem-box-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .all-traders-problem-box {
        width: 100%;
    }

    /* Tag and feature lists inside headings wrap instead of overflowing. */
    .common-heading ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Timeline spine between feature cards: brand colour on desktop, hidden once the cards stack. */
.central-line {
    background-color: var(--first-color) !important;
}

@media (max-width: 991.98px) {
    .central-line {
        display: none !important;
    }
}