/* ==========================================================================
   Advisory and Consulting (section landing page) — theme
   Reuses the same re-skin as Procurement-Sourcing-Intelligence.php (Poppins,
   green/orange brand palette, card + shadow language) via @import, same
   pattern as the other consulting pages. The icon-grid styling below
   (previously an inline <style> block) is kept. The client carousel now
   calls the shared newdesign/includes/procurement-trusted-clients.php
   partial (same as the other consulting pages), so this file no longer
   carries the old bespoke "Our Clients" look (.trusted_by_main, per-row
   test28/30/32/41-45 sizing) — those rules were removed since nothing in
   the markup uses those classes anymore and left in place they only ended
   up fighting the shared partial's own image sizing.
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

/* ---------- Service icon grid ---------- */
/* .icons-div had no position set, so the absolutely-positioned .icon-hover
   below escaped it and positioned against a much wider ancestor further up
   the tree — on hover it rendered ~3 cards wide, overlapping the neighbors
   instead of covering just its own card. Anchoring it to .icons-div keeps
   the hover caption confined to the one card being hovered. */
.icons-div {
    position: relative;
}
.icon-img {
    background: #fffde6;
    margin: 0 15%;
    padding: 10px;
    border-bottom: solid 5px #f07d1b;
    border-top: solid 5px #f07d1b;
}
.icon-hover {
    /* Left as "display: none" (not flex) on purpose — the hover is toggled
       via jQuery slideDown()/slideUp(), which forces the shown state back to
       "display: block" itself (its default for a <div>), so a CSS
       display:flex here would just get silently overridden every time. */
    display: none;
    background: #000000b3;
    margin: 0;
    padding: 12%;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    z-index: 2;
}
.icon-hover p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.icon-btn {
    background: #1f6c73;
    font-size: 13.5px;
    padding: 3%;
    color: #fff;
    margin: 5px 15%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
}
.icon-container {
    padding: 0 4%;
}

/* ---------- Implementation plan image ---------- */
.ma_image img {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}

/* ---------- Mobile: icon grid ---------- */
/* These columns only carry .col-md-3 (no base .col-6 / .col-12), so below
   768px Bootstrap gives them no width rule and they stack one per row —
   a very long single column of 10 icons. Force 2-per-row instead. The last
   row also has two empty spacer .col-md-3s either side (centering 2 icons
   under a 4-column desktop row) — hide those on mobile so the two real
   icons pack together into a clean final row instead of each sitting alone
   next to a blank cell. */
@media (max-width: 767px) {
    .icon-container .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        margin-top: 16px;
    }
    .icon-container .col-md-3:empty {
        display: none;
    }
    .icon-img {
        margin: 0 8%;
    }
    .icon-btn {
        margin: 5px 8%;
    }
}