/* ==========================================================================
   About Us page — theme
   Reuses the same modern re-skin as Procurement-Sourcing-Intelligence.php
   (Poppins, green/orange brand palette, card + shadow language, and the
   .breadcrumb_section flex fix for Bootstrap 5) via @import — same pattern
   as css/market-entry-strategy.css and css/market-assessment.css.

   Everything below is what's actually specific to this page: the Vision /
   Mission / Value cards, the "See Our Services" secondary button (this page
   is the only one with two breadcrumb buttons — Consulting pages only have
   "Get In Touch", so there's no shared style for it to inherit), and this
   page's own content spacing.

   The previous version of this file (~1460 lines) was mostly dead weight
   copy-pasted from an unrelated report-description page template —
   .tabtop/.rep_less/.usp_name/.related_reports/#desk_purchase_rpt/the
   custom Bootstrap-3-era .modal overrides, etc. — none of which exist
   anywhere in this page's markup. Removed rather than carried forward.
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

/* ---------- Page content spacing ---------- */
.rep_content {
    padding: 40px 0 60px;
}

.t_div {
    margin-bottom: 40px;
}

/* ---------- Intro row: balance text column vs. image column ----------
   .col-md-6/.col-md-6 in the markup already splits the row evenly; the
   shared .hexo-top rule from procurement-sourcing-intelligence.css caps the
   image at max-width:220px though, which read as tiny next to a full-height
   text column. Scoped to .top-img-col (this page only, via @import order)
   so the shared rule still applies as-is everywhere else it's used. */
.top-img-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-img-col .hexo-top {
    width: 100% !important;
    max-width: 320px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

/* Text column to match: smaller type + tighter padding than the shared
   procurement-sourcing-intelligence.css defaults (16px / 22px 26px), so the
   block reads proportionate to the now-smaller image next to it. */
.t_div .top-content p {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
}
.t_div .top-sub-heading h2 {
    font-size: 22px;
    margin: 0 0 16px;
}

/* ---------- "See Our Services" secondary button ----------
   Consulting pages only ever have one breadcrumb button ("Get In Touch"),
   so procurement-sourcing-intelligence.css has nothing to reuse here —
   styled as a plain, quiet secondary pill next to the orange primary CTA. */

/* This page is the only one with two breadcrumb buttons — lay them out in a
   row with a gap, and let them wrap onto two lines on small screens instead
   of overflowing the breadcrumb row. */
.breadcrumb_section .touch-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.servicesTop, .servicesTop:hover, .servicesTop:focus,
.servicesTopOld, .servicesTopOld:hover, .servicesTopOld:focus {
    background: #fff;
    color: #17484a;
    border: 1px solid #d7dfe0;
    border-radius: 30px;
    padding: 10px 22px !important;
    margin: 0 !important;
    top: auto !important;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.servicesTop:hover, .servicesTopOld:hover {
    background: #f3f6f6;
    border-color: #17484a;
}

/* ---------- Vision / Mission / Value ----------
   Card content flows normally (icon, then heading, then quote) instead of
   an absolutely-positioned badge overlapping the box — that positioning
   was fragile and kept landing on top of the text. */
.lower-content {
    margin-top: 40px;
}

.lower-content .row {
    display: flex;
    flex-wrap: wrap;
}
.lower-content .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

.low-box {
    width: 100%;
    border: none;
    background-color: #f8fafc;
    padding: 36px 32px 32px;
    font-weight: normal;
    border-radius: 12px;
    border-top: 4px solid #17484a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.low-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.low-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #17484a;
    color: #fff;
    font-size: 24px;
}

.low-box h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #17484a;
    margin: 0 0 14px;
}

.low-box p {
    font-size: 16px;
    line-height: 1.6;
    color: #46545c;
    margin: 0;
}

.learn-more-div {
    /* .row is display:flex in Bootstrap 5, which ignores text-align on its
       own flex items — justify-content is what actually centers the button
       inside the row. */
    text-align: center;
    justify-content: center;
    padding: 40px 0 10px;
}

.learnMoreBtn {
    /* Bootstrap 5's `.row > *` gives every direct row child width:100%
       whether or not it has a .col-* class — that's what was stretching
       this into a full-width bar. Override back down to content size,
       sized to match the breadcrumb's "Get In Touch" chip
       (padding:10px 24px, font-size:15px). */
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #17484a;
    color: #ffffff;
    padding: 10px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.learnMoreBtn:hover {
    background: #123638;
    color: #fff;
    transform: translateY(-1px);
}