/* About Us page styles - scoped to .bootstrp-iso wrapper.
   Original styles from C:\Users\lenovo\Downloads\custom mhs 2\custom mhs\assets\style.css
   adapted with .bootstrp-iso prefix so site-wide elements (footer, header) are unaffected.
*/

.bootstrp-iso {
    --primary-color: #183861;
    --secondary-color: #2f6f8f;
    --accent-color: #b83232;
    --warm-accent: #d69e2e;
    --light-bg: #f4f7f9;
    --line-color: #d8e3ed;
    --dark-text: #1d2733;
    --muted-text: #1C1C1E;
    --card-bg: #ffffff;
    --brand: #1d75bb;
    --brand-deep: #155f9a;
    --blue-60: #1d75bb;
    --soft-blue: #e3effa;
    --panel-blue: #edf4fc;
    --navy: #15233b;
    --check-green: #22a06b;
    --font-xs: 13px;
    --font-sm: 15px;
    --font-base: 14px;
    --font-md: 16px;
    --section-heading-size: 32px;
    --section-heading-color: #1a1a1a;
    --card-heading-size: 16px;
    --card-heading-color: #1a1a1a;
    --card-heading-weight: 600;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --section-py: 56px;
    --section-py-sm: 40px;
    --container-max: 1190px;
    --grid-gap: 20px;
    --card-px: 24px;
    --card-py: 24px;
    color: var(--dark-text);
    font-size: var(--font-base);
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

.bootstrp-iso img,
.bootstrp-iso svg {
    max-width: 100%;
}

.bootstrp-iso h1,
.bootstrp-iso h2,
.bootstrp-iso h3,
.bootstrp-iso h4,
.bootstrp-iso h5,
.bootstrp-iso h6 {
    margin-top: 0;
    line-height: 1.3;
}

/* .faq-title is listed alongside .section-title in every rule below, not
   given its own values. The FAQ heading then tracks the other section
   headings on this page automatically at every breakpoint - copying the
   numbers would let the two drift apart the next time one is tuned.

   It is deliberately NOT scoped to .bootstrp-iso: the FAQ block sits
   OUTSIDE that wrapper on purpose (see the comment in about_us.twig) so
   the accordion keeps its original site styling. about-us.css is linked
   by about_us.twig alone, so the unscoped selector cannot leak. The class
   name matches the site convention - information.twig uses .faq-title for
   the same heading on Price Match and Website Security. */
.bootstrp-iso .section-title,
.bootstrp-iso .cta-title,
.faq-title {
    font-size: var(--section-heading-size);
    font-weight: 700;
    color: var(--section-heading-color);
    line-height: 1.3;
}

.bootstrp-iso .text-brand {
    color: var(--brand) !important;
}

.bootstrp-iso p {
    color: var(--muted-text);
    font-size: var(--font-base);
    font-weight: var(--weight-regular);
    line-height: 1.6;
    margin-bottom: 16px;
}

.bootstrp-iso p:last-child {
    margin-bottom: 0;
}

.bootstrp-iso .container,
.bootstrp-iso .container-lg {
    max-width: var(--container-max);
}

.bootstrp-iso .page-section {
    padding: var(--section-py) 0;
}

.bootstrp-iso .page-section-sm {
    padding: var(--section-py-sm) 0;
}

.bootstrp-iso .section-title,
.faq-title {
    margin-bottom: 12px;
}

.bootstrp-iso .section-subtitle {
    color: var(--muted-text);
    font-size: var(--font-base);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}

.bootstrp-iso .section-heading {
    margin-bottom: 32px;
}

.bootstrp-iso .section-heading .section-title {
    margin-bottom: 12px;
}

/* ===== HERO ===== */
.bootstrp-iso .hero-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 20px 32px;
}

.bootstrp-iso .hero-card {
    background: white;
    border: 1px solid var(--line-color);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(24, 56, 97, 0.1);
    overflow: hidden;
}

.bootstrp-iso .hero-image-wrapper {
    flex: 0 0 50%;
    max-width: 45%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.bootstrp-iso .hero-image-wrapper img {
    object-fit: cover;
}

.bootstrp-iso .hero-content {
    flex: 0 0 50%;
    max-width: 55%;
    padding: 40px 40px 32px 40px;
}

.bootstrp-iso .hero-badge {
    background-color: rgba(29, 116, 183, 0.10);
    color: #1D74B7;
    font-size: var(--font-xs);
    padding: 3.2px 12px;
}

.bootstrp-iso .hero-title {
    font-size: 22px;
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    margin-bottom: 16px;
}

.bootstrp-iso .hero-text {
    font-size: var(--font-base);
    color: var(--muted-text);
    margin-bottom: 0;
    line-height: 1.6;
}

/* ===== WHY BUY ===== */
.bootstrp-iso .about-feature-card {
    background-color: rgba(29, 116, 183, 0.06);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18.4px 20px;
    box-shadow: 0 0 0 1px #F1F5F9;
    transition: all 0.5s ease;
    cursor: pointer;
}

.bootstrp-iso .about-feature-card:hover {
    background-color: #e2e8f0;
    transform: translateY(-2px);
}

.bootstrp-iso .feature-icon {
    width: 40px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(29, 116, 183, 0.10);
    color: var(--blue-60);
    font-size: 17.6px;
    flex-shrink: 0;
}

.bootstrp-iso .feature-svg-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.bootstrp-iso .feature-text {
    color: #585858;
    font-size: var(--font-md);
    line-height: 1.5;
    font-weight: var(--weight-semibold);
}

.bootstrp-iso .lead-line {
    color: var(--dark-text);
    font-size: var(--font-md);
    font-weight: var(--weight-medium);
}

.bootstrp-iso .highlight-bar {
    background-color: rgba(29, 116, 183, 0.03);
    border: 1px solid rgba(29, 116, 183, 0.30);
    border-radius: 14px;
    padding: 14.4px 20px;
    color: var(--dark-text);
    font-size: var(--font-sm);
}

.bootstrp-iso .highlight-bar .check-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== PROMISE ===== */
.bootstrp-iso .promise-section {
    background: rgba(29, 116, 183, 0.06);
}

.bootstrp-iso .promise-section .container {
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 16px;
    /* !important needed to beat global `.information .container { padding:0 !important }` */
    padding: 64px 40px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.bootstrp-iso .promise-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s ease;
    background-color: #F8FAFC;
    cursor: pointer;
}

.bootstrp-iso .promise-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.bootstrp-iso .promise-icon-box {
    width: 42px;
    height: 42px;
    background: #1D74B7;
    border-radius: 10px;
}

.bootstrp-iso .promise-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.bootstrp-iso .promise-item h5 {
    font-size: var(--card-heading-size);
    font-weight: var(--card-heading-weight);
    color: var(--card-heading-color);
    margin-bottom: 8px;
    line-height: 1.4;
}

.bootstrp-iso .promise-item p {
    margin: 0;
    font-size: var(--font-sm);
}

/* ===== CTA ===== */
.bootstrp-iso .cta-section {
    color: white;
}

/* Align CTA container width with the Why Buy / Promise sections above it.
   The global `.information .container { width:98% !important; padding:0 !important }`
   strips this container; re-assert the same max-width + padding the other
   .bootstrp-iso .container blocks get so the CTA panel lines up. */
.bootstrp-iso .cta-section .container {
    width: 100% !important;
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* padding-left: 15px !important;
    padding-right: 15px !important; */
}

.bootstrp-iso .cta-panel {
    width: 100%;
    background: url('../image/about-us/banner.png') center/cover no-repeat;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    min-height: 360px;
    overflow: hidden;
    position: relative;
}

.bootstrp-iso .cta-overlay {
    background-color: rgba(29, 116, 183, 0.70);
    inset: 0;
    position: absolute;
    z-index: 1;
}

.bootstrp-iso .cta-content {
    position: relative;
    z-index: 2;
    padding: 32px 24px;
}

.bootstrp-iso .cta-title {
    color: #fff;
    margin-bottom: 32px;
}

.bootstrp-iso .cta-section .btn {
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold) !important;
    border-radius: 1px;
}

/* ===== CATEGORY CAROUSEL ===== */
.bootstrp-iso .category-section {
    padding: var(--section-py) 0;
}

.bootstrp-iso .popular-subtitle {
    color: var(--muted-text);
    font-size: var(--font-base);
    margin: 0 0 32px;
}

.bootstrp-iso .category-card {
    background: #F1F1F2;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    min-height: 300px;
}

/* Explicit carousel slide visibility - the bootstrap-iso minified rule
   `.carousel-item.active{display:block}` is unscoped/ambiguous, so on some
   viewports active slides did not show and slides stacked vertically.
   These rules make our carousel deterministic. */
.bootstrp-iso #categoryCarousel .carousel-inner {
    overflow: hidden;
    width: 100%;
}

.bootstrp-iso #categoryCarousel .carousel-item {
    display: none !important;
    float: none !important;
    width: 100%;
}

.bootstrp-iso #categoryCarousel .carousel-item.active {
    display: block !important;
}

.bootstrp-iso #categoryCarousel .carousel-item .row {
    min-height: 300px;
}

.bootstrp-iso #categoryCarousel .carousel-item .row > div {
    display: flex !important;
}

.bootstrp-iso .category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.bootstrp-iso .category-image {
    color: #1d75bb;
    height: 200px;
}

.bootstrp-iso .category-image img {
    display: block;
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.bootstrp-iso .category-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bootstrp-iso .category-body h5 {
    font-size: 18px;
    color: #207CBB;
    line-height: 1.4;
    margin: 0 0 10px;
    font-weight: var(--weight-bold);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 50px;
}

.bootstrp-iso .category-body p {
    color: var(--muted-text);
    font-size: var(--font-sm);
    line-height: 1.5;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 68px;
}

.bootstrp-iso .category-btn {
    background: transparent;
    border: 1px solid #1d75bb;
    color: #0871b8;
    font-size: var(--font-xs);
    font-weight: var(--weight-bold);
    min-height: 38px;
    height: 38px;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin-top: auto;
    /* Long button_text (e.g. "Shop Heavy-Duty Industrial Transport Carts Buying Guide")
       stays on one line and truncates with ellipsis so all cards keep equal height. */
    padding: 0 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
    line-height: 36px;
    text-align: center;
}

.bootstrp-iso .category-btn:hover {
    background: #0871b8;
    color: #fff;
}

.bootstrp-iso .category-dots {
    gap: 8.8px;
    margin-top: 28px;
    margin-bottom: 0;
    position: static;
    width: auto;
    flex-wrap: wrap;
    row-gap: 8px;
}

.bootstrp-iso .category-dots [data-bs-target] {
    background-color: #cfd8df;
    border: 0;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    opacity: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bootstrp-iso .category-dots .active {
    background-color: #0871b8;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .bootstrp-iso {
        --section-py: 44px;
        --section-py-sm: 32px;
    }
    .bootstrp-iso .hero-image-wrapper,
    .bootstrp-iso .hero-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .bootstrp-iso .hero-image-wrapper {
        min-height: 280px;
    }
    .bootstrp-iso .hero-content {
        padding: 32px 24px;
    }
    .bootstrp-iso .cta-section .btn {
        width: 100%;
        
    }
}

@media (max-width: 767px) {
    .bootstrp-iso {
        --section-py: 36px;
        --section-py-sm: 28px;
    }
    .bootstrp-iso .hero-container {
        padding: 16px 14.4px 20px;
    }
    .bootstrp-iso .hero-content {
        padding: 21.6px 17.6px 20px;
    }
    .bootstrp-iso .promise-section .container {
        padding: 24px 20px !important;
    }
    .bootstrp-iso .cta-content {
        padding: 28px 20px;
    }
    .bootstrp-iso .cta-title br {
        display: none;
    }
    .bootstrp-iso .category-card {
        min-height: auto;
    }
    .bootstrp-iso #categoryCarousel .carousel-item .row {
        min-height: auto;
    }
    .bootstrp-iso .category-image {
        height: 150px;
    }
    .bootstrp-iso .category-image img {
        max-height: 130px;
    }
    .bootstrp-iso .section-title,
    .bootstrp-iso .cta-title,
    .faq-title {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .bootstrp-iso .hero-image-wrapper {
        min-height: 200px;
    }
    .bootstrp-iso .hero-title {
        font-size: 22px;
        text-align:left;
    }
    .bootstrp-iso .cta-panel {
        min-height: 220px;
    }
    .bootstrp-iso .cta-section .btn {
        font-size: 14px;
        padding: 8px 20px;
        width: 80%;
        
    }

    .bootstrp-iso .cta-section .container {
        padding: 1em !important;
    }

}

/* Override the global `.information .container { width: 98% !important }` rule
   (catalog/view/theme/custommhs/stylesheet/stylesheet.css:1817) so that the
   FAQ container immediately after .bootstrp-iso and the footer's Trusted-by
   client section stay centered like the new-design sections above. */
.bootstrp-iso + .container,
.bootstrp-iso ~ .clients-section > .container {
    width: 100% !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (max-width: 767px) {
    .bootstrp-iso + .container,
    .bootstrp-iso ~ .clients-section > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==================================================================
   Heading hierarchy + body text - mobile responsive audit fix.

   QA: "h2 appears larger than h1 on desktop and mobile" and
   "inconsistent paragraph font sizes".

   Before: h1 .hero-title 22px, while .section-title/.cta-title were
   32px (desktop) / 24px (<=767) and .clients-section h2 was 28px.
   The h1 lost to every h2 at every width.

   Scale below is IDENTICAL to home.twig, homecategories.twig and
   footer.twig so headings do not mismatch between pages:

       breakpoint    h1      h2
       >=768px       32px    28px
       <=767px       28px    22px
       <=480px       24px    19px

   Breakpoints are 767/480 to match the other pages, deliberately not
   this file's original 575px step.

   APPEND-ONLY, and this must stay last in the file.
   Nothing above is edited or deleted, for two reasons:
     1. bootstrap-iso.css gives .bootstrp-iso h1/h2 FLUID sizes
        (calc(1.375rem + 1.5vw) / calc(1.325rem + 0.9vw)). Removing a
        font-size from .hero-title or .section-title would drop the
        heading onto a viewport-dependent BS5 value, not a fixed one.
     2. Deleting this block restores the previous behaviour exactly.
   The earlier 575px/767px heading rules are superseded by source
   order - they are intentionally left in place, not dead by accident.
   ================================================================== */

.bootstrp-iso .hero-title {
    font-size: 32px;
}

.bootstrp-iso .section-title,
.bootstrp-iso .cta-title,
.faq-title {
    font-size: 28px;
}

/* Body copy: .promise-item p was --font-sm (15px) while every other
   paragraph on the page used --font-base (14px). Note the variable
   names are inverted in this file - --font-sm (15px) is LARGER than
   --font-base (14px) - which is what invited the drift. */
.bootstrp-iso .promise-item p {
    font-size: var(--font-base);
}

@media (max-width: 767px) {
    .bootstrp-iso .hero-title {
        font-size: 28px;
    }

    .bootstrp-iso .section-title,
    .bootstrp-iso .cta-title,
    .faq-title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .bootstrp-iso .hero-title {
        font-size: 24px;
    }

    .bootstrp-iso .section-title,
    .bootstrp-iso .cta-title,
    .faq-title {
        font-size: 19px;
    }
}

/* ------------------------------------------------------------------
   Section spacing - mobile responsive audit fix.

   This page's own sections are already consistent: every one uses
   var(--section-py) (56 / 44 / 36px). The odd one out is
   .clients-section ("Built for Manufacturers..."), which is rendered
   by footer.twig with `.section-header { margin-bottom: 50px }` - far
   too much above the fold on a phone.

   Reached via the sibling combinator because .clients-section sits
   OUTSIDE .bootstrp-iso, using the same pattern already established
   at the top of this section of the file. footer.twig is deliberately
   NOT edited - this file only loads on /about-us, so the change
   cannot reach any other page.

   Values match `.home .section-header` in home.twig exactly, so this
   shared section spaces identically on both pages.
   ------------------------------------------------------------------ */
/* Desktop: .clients-section keeps footer.twig's `10px 0 60px 0` (top-heavy
   and asymmetric) and a 50px header margin, neither of which matches this
   page's 56px --section-py rhythm. Brought into line at all widths. */
.bootstrp-iso ~ .clients-section {
    padding: 56px 0;
}

.bootstrp-iso ~ .clients-section .section-header {
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    .bootstrp-iso ~ .clients-section .section-header {
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .bootstrp-iso ~ .clients-section .section-header {
        margin-bottom: 20px;
    }
}

/* ------------------------------------------------------------------
   Section rhythm alignment - mobile responsive audit fix.

   This file originally stepped --section-py 56 -> 44 (<=991) -> 36
   (<=767) with no <=480 step, while home.twig uses 32px (<=767) and
   24px (<=480). That left About Us 4px out of step with Home and with
   no smallest-screen step at all.

   Redefined here (last in the file, so it wins) rather than editing
   the original blocks above - keeps this fix removable in one piece.
   The 991px step is intentionally left as-is: it sits above the
   audited mobile range and matches nothing on the other pages.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .bootstrp-iso {
        --section-py: 32px;
        --section-py-sm: 24px;
    }
}

@media (max-width: 480px) {
    .bootstrp-iso {
        --section-py: 24px;
        --section-py-sm: 20px;
    }
}

/* ------------------------------------------------------------------
   "Our customers choose us because we provide:" - centred on mobile.

   The <p class="lead-line"> is a SIBLING of the
   `<div class="text-center section-heading">` above it, not a child, so
   it never inherited that centring and sat left-aligned under a centred
   heading and subtitle. On desktop the cards below it are a two-column
   grid and the left edge lines up with them, so it reads as a label for
   the grid - left is correct there and is deliberately left alone.
   Below 768px the grid collapses to one column and the alignment no
   longer lines up with anything, which is what the audit flagged.

   One declaration at 767px covers every mobile width. text-align
   inherits and nothing narrower re-declares it for this element, so 575,
   480, 425 and 360 all take it - adding copies at each breakpoint would
   be dead weight, not extra coverage.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .bootstrp-iso .lead-line {
        text-align: center;
    }
}