/* ═══════════════════════════════════════════════════════════════════════════
   info-pages.css — AboutUs and ContactUs on the responsive layout.

   Both pages are simple enough that they keep one set of markup for the two
   shells, the way terms and Privacy do. The markup was written for the desktop
   sheets, so below 900px the pieces that come from newSite/style.css and
   color.css — both of which _Layout.Responsive loads with
   media="(min-width: 900px)" — are simply absent:

     · .site-container / .large-container have no padding, so the text sits
       flush against the screen edge while Bootstrap's .row still pulls its
       -12px gutter out past it;
     · body.light sets color:var(--fg-light) (#aebc80), so any text that does
       not pick its own colour comes out olive;
     · the spacing helpers (pb_80, pt_20, mb_40, mr_30) do not exist;
     · the round icon badges and the submit button get their background from
       color.css and would otherwise be invisible white-on-white.

   Everything here is inside the mobile half of the breakpoint, so the desktop
   rendering of both pages is byte-for-byte what it was on the old layout.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

    /* ── Gutters and text colour ──────────────────────────────────────── */

    .about-section,
    .highlights-style-two,
    .contact-section,
    .google-map {
        color: var(--title-color, #3a463d);
    }

    .about-section .site-container,
    .highlights-style-two .site-container,
    .contact-section .large-container,
    .google-map .large-container {
        padding-inline: 16px;
    }

    /* Cancel the gutter the row would otherwise pull back out again. */
    .about-section .site-container > .row,
    .highlights-style-two .site-container > .row {
        margin-inline: 0;
    }

    /* ── Section spacing (pb_80 / pt_20 / mb_40 are desktop-only) ──────── */

    .about-section {
        padding-block: 4px 24px;
    }

    .highlights-style-two,
    .google-map {
        padding-bottom: 24px;
    }

    .contact-section {
        padding-block: 4px 16px;
    }

    .about-section .site-container.mt-5 {
        margin-top: 16px !important;
    }

    .about-section .content-box .text-box {
        margin-bottom: 24px;
    }

    /* ── About: headings and figures ──────────────────────────────────── */

    .about-section .content-box .text-box h1 {
        font-size: 20px;
        line-height: 34px;
        font-weight: 700;
    }

    .about-section .content-box .text-box p {
        font-size: 14px;
        line-height: 30px;
        text-align: justify;
        margin-bottom: 16px;
    }

    .about-section .content-box .funfact-block {
        margin-bottom: 16px;
        padding: 14px 12px;
    }

    .about-section .content-box .funfact-block .count-outer {
        font-size: 30px;
        line-height: 36px;
        height: 36px;
    }

    .about-section .content-box .funfact-block p {
        font-size: 13px;
        line-height: 22px;
        margin: 0;
    }

    /* The photo panel is 460px of padding-top on desktop; 767px of about.css
       already brings it to 250px, which is still half a phone screen. */
    .about-section .inner-box {
        padding-top: 190px;
    }

    .about-section .inner-box .content-info {
        padding: 20px 16px;
    }

    .about-section .inner-box .content-info .single-item {
        padding: 6px 90px 6px 0;
        min-height: 72px;
        margin-bottom: 16px;
    }

    .about-section .inner-box .content-info .single-item h2 {
        left: auto;
        right: 0;
        width: 72px;
        height: 72px;
        line-height: 72px;
        font-size: 26px;
        color: var(--title-color, #3a463d);
    }

    .about-section .inner-box .content-info .single-item h3 {
        font-size: 17px;
        line-height: 28px;
    }

    /* ── About: the four highlight cards ──────────────────────────────── */

    .highlights-style-two h2 {
        font-size: 18px;
        line-height: 32px;
        font-weight: 700;
    }

    .highlights-block-two .inner-box {
        padding: 16px;
        margin-bottom: 16px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, .06);
    }

    .highlights-block-two .inner-box h4 {
        font-size: 16px;
        line-height: 28px;
        color: var(--title-color, #3a463d);
    }

    .highlights-block-two .inner-box p {
        font-size: 13px;
        line-height: 26px;
        text-align: justify;
    }

    /* color.css is a desktop sheet; without it the badge has no fill. */
    .highlights-block-two .inner-box .icon-box,
    .contact-section .info-box .single-item .icon-box {
        background: var(--main-color-one, #aaba79);
    }

    /* ── Contact ──────────────────────────────────────────────────────── */

    .contact-section .inner-container {
        padding: 20px 16px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, .06);
    }

    .contact-section .info-box {
        margin-bottom: 24px;
    }

    .contact-section .info-box .single-item {
        margin-bottom: 24px;
    }

    .contact-section .info-box .single-item h4 {
        font-size: 16px;
        line-height: 28px;
        color: var(--title-color, #3a463d);
    }

    .contact-section .info-box .single-item p,
    .contact-section .info-box .single-item p a {
        font-size: 14px;
        line-height: 26px;
        color: var(--title-color, #3a463d);
        max-width: none;
    }

    .contact-section .form-inner .form-group input[type='text'],
    .contact-section .form-inner .form-group textarea {
        font-size: 14px;
        color: var(--title-color, #3a463d);
    }

    .contact-section .form-inner .form-group label {
        font-size: 14px;
    }

    /* .theme-btn is declared in the desktop style.css and filled by color.css. */
    .contact-section .form-inner .theme-btn {
        display: inline-block;
        width: 100%;
        padding: 12px 24px;
        border: 0;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        background: var(--main-color-one, #aaba79);
    }

    /* ── Map ──────────────────────────────────────────────────────────── */

    .google-map .inner-container,
    .google-map .inner-container iframe {
        height: 300px;
        border-radius: 10px;
        overflow: hidden;
    }
}