/* ==========================================================================
   Procurement / Sourcing Intelligence — page theme
   Re-skins the shared css/consulting.css template to match the site's
   newdesign theme (Poppins, green/orange brand palette, card + shadow
   language used on the home page). Visual layer only — no markup/content
   changes required; every selector below targets classes already in the
   page's HTML.
   ========================================================================== */

/* ---------- Hero / page title band ---------- */
/* The header is static, not fixed — there's no overlay to clear, so this
   just needs to be a small, consistent gap instead of the old 6–9% (and up
   to 24% on mobile) of empty space consulting.css left above the band. */
.mar_top_30 {
    margin-top: 16px !important;
}
@media (max-width: 768px) {
    .mar_top_30 {
        margin-top: 12px !important;
    }
}
.report_heading {
    background: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%);
    margin-top: 0;
    padding: 18px 30px;
    box-shadow: 0 10px 24px rgba(23, 72, 74, 0.22);
}
.report_heading h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .4px;
    text-transform: none;
    margin: 0;
}
.mob_report_heading {
    background: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%) !important;
    margin-top: 0 !important;
    padding: 14px 0 !important;
}
.mob_report_heading p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: .3px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb_section {
    padding: 18px 0;
}
ol.breadcrumb.page-breadcrumb li a span,
ol.breadcrumb.page-breadcrumb li span {
    color: #566573;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease;
}
ol.breadcrumb.page-breadcrumb li a:hover span {
    color: #17484a;
}

/* The breadcrumb row's two columns have no Bootstrap .row wrapper in the
   markup, so the grid classes don't lay out side by side. Force it here
   instead of touching the HTML: breadcrumb left, Get In Touch pinned right. */
.breadcrumb_section .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    padding-left: 40px;
    padding-right: 65px;
}
.breadcrumb_section .container-fluid > div:not(.touch-btn) {
    min-width: 0;
}
.breadcrumb_section .touch-btn {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
}
@media (max-width: 576px) {
    .breadcrumb_section .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Bootstrap 5 renamed .text-right to .text-end — this page still uses the old
   class name in a couple of places (breadcrumb + sticky bar), so it's
   currently a dead class. Restore it here rather than editing the markup. */
.text-right {
    text-align: right !important;
}

/* Get In Touch chips (breadcrumb + sticky bar) — match home page's orange CTA.
   consulting.css gives these percentage-based padding (5% 17% / 2% 8%), which
   made the button wide enough to force a line-wrap in the breadcrumb row —
   fixed px padding here instead. */
.getInTouchTop, .getInTouchTop:hover, .getInTouchTop:focus,
.getInTouchOld, .getInTouchOld:hover, .getInTouchOld:focus {
    background: #ec4b3b;
    background-image: none;
    border: none;
    border-radius: 30px;
    padding: 10px 24px !important;
    margin: 0 !important;
    top: auto !important;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    box-shadow: 0 6px 16px rgba(236, 75, 59, .3);
    transition: background .2s ease, transform .2s ease;
    display: inline-block;
}
.getInTouchTop:hover, .getInTouchOld:hover {
    background: #d33f30;
    transform: translateY(-1px);
}
.effect6, .effect6:before, .effect6:after {
    box-shadow: none !important;
}

/* ---------- Intro paragraph ---------- */
.top-content {
    background: #f8fafc;
    border: none;
    border-left: 4px solid #17484a;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}
.top-content p {
    padding: 22px 26px;
    font-size: 16px;
    line-height: 1.75;
    color: #46545c;
}
.top-sub-heading h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #17484a;
    margin: 34px 0 20px;
}

/* ---------- Section heading style (img_head) ---------- */
.img_head {
    font-family: 'Poppins', sans-serif;
    font-size: 26px !important;
    font-weight: 600;
    color: #17484a;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 30px !important;
}
.img_head::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: #ec4b3b;
}

/* ---------- Supply chain model cards ---------- */
.supply-chain-modal {
    background: #fff;
    border: none;
    border-top: 4px solid #38908f;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
    padding: 40px 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.supply-chain-modal:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}
.supply-chain-modal p {
    color: #1d3b3c !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 0;
}
/* Pointer arrow + cut-down-cost graphic, next to the supply-chain-modal
   cards. padding-top:NN% was a magic number only ever tuned for one exact
   viewport width — replaced with flex centering (works at any container
   height) + fluid images (width:100%, capped with max-width) so both scale
   correctly at every screen size instead of just the one breakpoint that
   had an explicit override. */
.mid-content .col-md-3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.pointer-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pointer-img img {
    width: 100%;
    height: auto;
    max-width: 40px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
}
.hexo-top {
    width: 100% !important;
    height: auto;
    max-width: 220px;
}

/* ---------- Trusted by ---------- */
.trusted_by_div {
    background: #f8fafc;
    border-radius: 14px;
    padding: 26px 2% !important;
}
.trusted_by {
    padding: 0 0 0 15%;
    color: #17484a;
    margin-top: 3rem;
}
.trusted_by p {
    font-family: 'Poppins', sans-serif;
    font-size: 17px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.trusted_by_div .owl-carousel img {
    max-height: 116px;
    width: auto;
    transition: filter .25s ease, opacity .25s ease;
}
.trusted_by_div .owl-carousel img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ---------- Tabs ---------- */
.nav-tabs-content {
    margin-top: 10px;
}
.tab-content-div {
    background: #fff;
    border-radius: 14px;
    border: 3px solid transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 22px;
    transition: border-color .25s ease;
}
/* Whole card border lights up in a color matched to whichever tab is
   currently active (Bootstrap Tab JS toggles this pane's #id + .active). */

.nav-tabs {
    border: none !important;
    background: transparent !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.nav-tabs > li {
    width: auto !important;
    flex: 1 1 20%;
    text-align: center;
}
.nav-tabs > li > a {
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    padding: 9px 9px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 150px !important;
    transition: background .2s ease, border-color .2s ease;
}
/* The 5 source icons have different aspect ratios, so forcing width alone
   left each tab box a different height (uneven "bracket" around the row).
   Fix the icon to one bounding box so every tab renders the same size. */
.nav-tabs > li > a img {
    width: 150px !important;
    height: 125px !important;
    object-fit: contain !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs > li > a.active:focus,
.nav-tabs > li > a.active:hover,
.nav-tabs > li > a:hover {
    background: #e9f3f3 !important;
    border-color: #17484a !important;
}
.nav-tabs > li > a::after {
    display: none;
}
.tab-content {
    background: #fff !important;
    border: none !important;
    border-radius: 12px;
    padding: 28px 22px;
    margin-top: 16px;
}
/* Highlight whichever .tab-pane is currently active (Bootstrap already
   toggles display:none / .active{display:block} on these) with an accent
   border + a soft fade/slide-in so switching tabs reads clearly. The accent
   color matches each tab's own hexagon icon color instead of a flat red. */
.tab-pane.active {
    border-left: 3px solid #7cc06a;
    padding-left: 18px;
    animation: psi-tab-in .3s ease;
}
#home.tab-pane.active     { border-left-color: #7cc06a; } /* spend analysis icon (green) */
#profile.tab-pane.active  { border-left-color: #4ec08f; } /* strategic category icon (teal-green) */
#messages.tab-pane.active { border-left-color: #2ba9c4; } /* supplier analysis icon (cyan) */
#settings.tab-pane.active { border-left-color: #6462b0; } /* supply chain risk icon (indigo) */
#extra.tab-pane.active    { border-left-color: #1a6e76; } /* supply market intelligence icon (dark teal) */
@keyframes psi-tab-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab_desc_head h2 {
    color: #17484a !important;
    font-weight: 600;
}
.list-style li {
    line-height: 1.9;
    color: #46545c;
}
.list-style li::marker {
    color: #ec4b3b;
}

@media all and (max-width: 600px) {
    .nav-tabs > li {
        flex: 1 1 30%;
    }
}

/* ---------- Sticky "Get In Touch" bar ---------- */
.fixedWrap {
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
}
.fixedWrapTitle {
    font-family: 'Poppins', sans-serif;
    color: #17484a;
    font-weight: 600;
}
.fixedWrapSubTitle {
    color: #7a7a7a;
}
/* The row's columns weren't vertically centered, so the button (a single
   line of text) sat pinned to the top of the bar next to the taller
   logo/title column. Center everything on the row's cross-axis instead. */
.fixedWrap .row {
    align-items: center;
}
.fixedWrap .row > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Contact modal polish ---------- */
.contactForm select.form-control {
    background: #eeeeee !important;
    height: calc(1.5em + 1.5rem + 2px);
}

/* Form validation + toast + loader — ported from newdesign/assets/css/index.css
   so the shared #contactModal component renders correctly on this page too
   (that stylesheet is currently only loaded on index.php). */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #17484a;
    border-radius: 50%;
    animation: psi-spin 1s linear infinite;
}
@keyframes psi-spin {
    to { transform: rotate(360deg); }
}
.field-error {
    display: none;
    color: #dc3545;
    font-size: .8rem;
    margin-top: 4px;
    font-weight: 500;
    animation: psi-err-in .2s ease;
}
@keyframes psi-err-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .15) !important;
}
.form-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    z-index: 99999;
    max-width: 380px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
}
.form-toast--show {
    opacity: 1;
    transform: translateY(0);
}
.form-toast--success {
    background: #1a7f4b;
}
.form-toast--error {
    background: #c0392b;
}
.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Mobile responsive fixes
   ==========================================================================
   Two systemic problems on this page break mobile layout under Bootstrap 5:

   1. .hidden-xs was a Bootstrap 3/4 utility that Bootstrap 5 dropped
      (renamed to d-none d-sm-block). It's used in the markup expecting to
      hide things below 768px but currently does nothing at all.

   2. Several grid columns only carry a .col-md-* class with no base
      .col-N / .col-12 class. In Bootstrap 3's float grid that still stacked
      full width below md; in Bootstrap 5's flexbox grid an element with only a
      .col-md-* class has NO Bootstrap width rule below 768px, so it just
      shrinks to its content size and sits side-by-side with its sibling
      instead of stacking — the "totally broken" mobile layout.
   ========================================================================== */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }

    /* Supply-chain-model: 9/3 split + the 4/4/4 card rows inside it */
    .mid-content > .col-md-9,
    .mid-content > .col-md-3,
    .mid-content .col-md-9 > .row > .col-md-4,
    .mid-content .col-md-3 > .col-md-2,
    .mid-content .col-md-3 > .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .mid-content .col-md-3 {
        margin-top: 20px;
        justify-content: center;
    }
    /* consulting.css has its own @media(max-width:425px) hacks for this
       arrow + hexagon pair (padding-left:45%, rotate(90deg) on the arrow,
       cut-down padding-left:20%) tuned for one narrow phone width only.
       Outside that width the padding-left:45% push wasn't applied, so the
       arrow lost its down-pointing rotation and reverted to the desktop
       right-pointing image between ~425px and 767px. Override here so the
       arrow stays rotated to point down everywhere in this 0–767px range,
       not just below 425px. */
    .pointer-img {
        margin-bottom: 10px;
        justify-content: center !important;
        padding: 0 !important;
    }
    .pointer-img img {
        transform: rotate(90deg) !important;
    }
    .cut-down {
        padding-left: 0 !important;
        text-align: -webkit-center;
    }

    /* Trusted by: label + logo carousel */
    .trusted_by_div > .col-md-2,
    .trusted_by_div > .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .trusted_by {
        padding: 0 0 12px 0 !important;
        text-align: center;
    }
    /* Client logos: the PHP switch sets desktop-only inline width/margin
       (up to 222px wide with 3rem margins) per logo. That overflows the
       narrow mobile carousel slot, so fall back to a small, uniform size
       for any logo without its own mobile rule below.
       !important is required to beat the inline style attribute. */
    .trusted_by_div .owl-carousel img {
        width: auto !important;
        max-width: 147px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
    }
    /* Same 5 logos as the PHP switch, scaled down to fit mobile while
       keeping each one's own relative size/spacing (not just one uniform box). */
    .trusted_by_div .owl-carousel img.logo-3a-composites {
        width: 90px !important;
        max-width: 90px !important;
        margin: 0 auto 0 3.2rem !important;
    }
    .trusted_by_div .owl-carousel img.logo-beaulieu {
        width: 152px !important;
        max-width: 142px !important;
        margin: 0px 11px 0rem !important;
    }
    .trusted_by_div .owl-carousel img.logo-aerovac {
       width: 173px !important;
        max-width: 133px !important;
        margin: 1rem 0.8rem !important;
    }
    .trusted_by_div .owl-carousel img.logo-dupont {
        width: 188px !important;
        max-width: 140px !important;
        margin: 1.2rem 0.2rem !important;
    }
    .trusted_by_div .owl-carousel img.logo-greene-tweed {
        width: 160px !important;
        max-width: 170px !important;
        margin: 0.3rem 0 !important;
    }

    /* Tabs: 150px icons / 63px padding only make sense on desktop */
    .nav-tabs > li {
        flex: 1 1 30%;
    }
    .nav-tabs > li > a {
        padding: 14px 6px !important;
        min-height: 70px;
    }
    .nav-tabs > li > a img {
        width: 100px !important;
        height: 90px !important;
    }

    .nav-tabs > li > a
    {
        min-height: 93px !important;
    }
    .tab-content-div {
        padding: 14px;
    }
    .tab-content {
        padding: 18px 14px;
    }
    .tab-pane.active {
        padding-left: 12px;
    }
    /* With .hidden-xs reviving above, each tab pane's icon column disappears
       and the text column should take the full row width. */
    .tab-pane .row > .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Contact modal: Name/Company/Email/Phone/Country/Industry pairs */
    #contactModal .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .owl-carousel{
        height: 100px !important;
    }

    .hexo-top
    {
        padding-top: 0% !important;
    }

    .mob_report_heading p {
        font-size: 28px;
        text-align: center;
        color: #fff;
        margin-bottom: 0rem !important;
    }

    /* Sticky "Get In Touch" bar: .col-xs-* is a dead BS3 class in Bootstrap 5,
       so below 576px the logo column has no width rule and grows to the
       image's natural size — wide enough that the row wraps and the button
       drops to its own line underneath (stacked instead of side-by-side).
       At 576px the col-sm-1 class kicks in and clamps that same column to
       8.3% width, so the logo suddenly shrinks to almost nothing instead.
       Force a single row with one fixed, comfortable logo size across the
       whole mobile range so logo + button always sit in line. */
    .fixedWrap .row {
        flex-wrap: nowrap !important;
        padding: 33px 28px 12px 27px;
    }
    /* Bootstrap 5 gives every direct .row child "flex-shrink:0; width:100%"
       by default (its mobile-first fallback for undecorated columns). The
       middle column's own text is already hidden by .hidden-xs, but the
       column *div* itself still claims the full row width and refuses to
       shrink — which is what was shoving the logo/button apart and off
       the row. Collapse the now-empty column instead of just its text. */
    .fixedWrap .row > div:nth-child(2) {
        display: none !important;
    }
    .fixedWrapLogo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    .fixedWrapLogo img {
        width: 90px !important;
        max-width: 90px !important;
        margin: 0 !important;
    }
    .fixedWrap .row > div:last-child {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: auto;
    }
}

.owl-carousel.owl-drag .owl-item
{
        background-color: #ffff;
}