/* ==========================================================================
   MESPROSOFT DESIGN SYSTEM  (v1.0)
   One source of truth for colours, type sizes, spacing and buttons.

   - Loaded LAST so it wins over style.css / responsiveness.css.
   - Applies only to pages whose <body> has class="ds" (pilot: index.php).
     To roll out to another page: add class="ds" to its <body> and load this file
     after header.php.
   ========================================================================== */

:root {
    /* ---- Colour palette (use ONLY these) ---- */
    --ds-navy: #151f30;
    /* headings, dark backgrounds */
    --ds-text: #3b4556;
    /* body text */
    --ds-muted: #6b7484;
    /* captions, labels, secondary text */
    --ds-blue: #0762e5;
    /* primary brand / buttons / links */
    --ds-blue-dark: #0550bd;
    /* hover state */
    --ds-blue-tint: #eaf1fd;
    /* soft blue fills (labels, icon chips) */
    --ds-blue-soft: #afc8ec;
    /* light blue on dark backgrounds (footer icons) */
    --ds-red: #e31e24;
    /* logo accent only - not for text or buttons */
    --ds-line: #e3e7ee;
    /* borders, dividers */
    --ds-white: #ffffff;
    --ds-bg-soft: #f6f8fb;
    /* alternate section background */

    /* ---- Type scale (desktop) ---- */
    --ds-fs-h1: 44px;
    --ds-fs-h2: 36px;
    --ds-fs-h3-lg: 24px;
    /* featured card titles (case studies) */
    --ds-fs-h3: 20px;
    /* standard card titles */
    --ds-fs-lead: 16px;
    /* hero / intro paragraph (same as body) */
    --ds-fs-body: 16px;
    /* all normal paragraphs */
    --ds-fs-small: 15px;
    /* card descriptions, captions (body text stays 15-16px) */
    --ds-fs-label: 13px;
    /* section labels / badges */

    --ds-lh-heading: 1.25;
    --ds-lh-body: 1.65;

    /* ---- Spacing / shape ---- */
    --ds-section-y: 80px;
    --ds-radius: 8px;
    /* ALL cards and buttons */
    --ds-radius-sm: 8px;
    /* small tags / labels - same 8px everywhere */
    --ds-shadow: 0 6px 22px rgba(21, 31, 48, 0.05);
    --ds-floating-bar-h: 76px;
    /* height of the sticky contact bar (<1400px) */
}

/* ---- Breakpoints: 1399.98 (laptop) / 991.98 (tablet) / 575.98 (phone) ---- */
@media (min-width: 800px) and (max-width: 1399.98px) {
    :root {
        --ds-fs-h1: 32px;
        --ds-fs-h2: 28px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --ds-fs-h1: 32px;
        --ds-fs-h2: 28px;
        --ds-fs-h3-lg: 22px;
        --ds-section-y: 64px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --ds-section-y: 30px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --ds-fs-h1: 30px;
        --ds-fs-h2: 26px;
        --ds-fs-h3-lg: 20px;
        --ds-fs-h3: 18px;
        --ds-section-y: 30px;
    }
}

/* ==========================================================================
   0. SITE-WIDE: HEADER MENU + FOOTER  (applies on EVERY page - no body.ds needed)
   ========================================================================== */

/* ---- Menu: one text style for top links, dropdowns and the mega menu ----
   Same on desktop and in the phone menu. ("html body" + .oit-menu-mobile variants
   outrank old phone-menu rules that shrank links to 13.5px.) */
html body .oit-menu-content>ul>li>a,
html body .oit-submenu li a,
html body .oit-megamenu-item li a,
html body .oit-megamenu-item ul a,
html body .oit-menu-mobile a,
html body .oit-menu-mobile .submenu li a,
html body .oit-menu-mobile .oit-submenu li a,
html body .oit-menu-mobile .oit-megamenu-item ul li a {
    font-family: var(--oit-ff-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    /* dropdown links: same weight as body text */
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ds-text) !important;
    /* dropdown links use the body-text colour */
}

/* Desktop dropdown links: same hover as the phone menu - light-blue highlight + blue text,
   no sliding. (Replaces the old "slide right 20px and turn black" hover.) The negative margin
   keeps the link text lined up with the column headings while the highlight extends slightly. */
@media (min-width: 1200px) {

    html body .oit-menu-content .oit-submenu li a:not(.oit-btn-red):not(.pdf-btn):not(.oit-service-card)::before,
    html body .oit-menu-content .oit-submenu li a:not(.oit-btn-red):not(.pdf-btn):not(.oit-service-card)::after {
        display: none !important;
        /* no hover line/bar */
    }

    html body .oit-menu-content .oit-submenu li a:not(.oit-btn-red):not(.pdf-btn):not(.oit-service-card) {
        display: block !important;
        padding: 6px 8px !important;
        margin: 1px -8px !important;
        border-radius: var(--ds-radius) !important;
        transition: color 0.2s ease, background-color 0.2s ease !important;
    }

    html body .oit-menu-content .oit-submenu li a:not(.oit-btn-red):not(.pdf-btn):not(.oit-service-card):hover,
    html body .oit-header-menu nav ul li .submenu li:hover>a:not(.oit-btn-red):not(.pdf-btn):not(.oit-service-card) {
        padding-inline-start: 8px !important;
        color: var(--ds-blue) !important;
        background: transparent !important;
        /* hover = text colour only, no background */
    }
}

/* Top menu bar items (desktop bar + first level of the phone menu) stay brand navy */
html body .oit-menu-content>ul>li>a,
html body .oit-menu-mobile .oit-menu-content>ul>li>a,
html body .oit-menu-mobile>ul>li>a,
html body .oit-menu-mobile nav>ul>li>a {
    color: var(--ds-navy) !important;
    font-weight: 500 !important;
    /* top bar items stay medium weight */
}

html body .oit-menu-content>ul>li>a:hover,
html body .oit-submenu li a:hover,
html body .oit-megamenu-item li a:hover,
html body .oit-megamenu-item ul a:hover,
html body .oit-menu-mobile a:hover {
    color: var(--ds-blue) !important;
}

/* Buttons inside dropdowns ("Download ROI Template", "View All Products", "View All Industries"):
   white text on blue. Selector weight (2 classes) beats the link rules above (1 class). */
html body .oit-menu-content a.oit-btn-red,
html body .oit-menu-content a.oit-btn-red *,
html body .oit-menu-content a.pdf-btn,
html body .oit-menu-content a.pdf-btn *,
html body .oit-menu-mobile a.oit-btn-red,
html body .oit-menu-mobile a.oit-btn-red *,
html body .oit-menu-mobile a.pdf-btn,
html body .oit-menu-mobile a.pdf-btn * {
    color: var(--ds-white) !important;
}

html body .oit-menu-content a.oit-btn-red:hover,
html body .oit-menu-content a.pdf-btn:hover,
html body .oit-menu-mobile a.oit-btn-red:hover,
html body .oit-menu-mobile a.pdf-btn:hover {
    background-color: var(--ds-blue-dark) !important;
    color: var(--ds-white) !important;
}

/* Dropdown width rule:
   - 1-2 column dropdowns (About Us, Resources) keep their small size.
   - 3+ column mega menus (Services, Products, Industries, Explore Site Map) span the site width,
     lined up exactly with the page content (same 1280px centred column as .container). */
@media (min-width: 1200px) {
    html body .oit-menu-content .oit-submenu.oit-megamenu-wrap {
        left: 0 !important;
        right: 0 !important;
        width: min(var(--container, 1280px), 100%) !important;
        max-width: var(--container, 1280px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* columns share the extra width evenly */
    html body .oit-menu-content .oit-megamenu-wrap>.row {
        width: 100%;
    }
}

/* Group headings inside the mega menu ("Process Industries", "Digital Transformation"...) */
html body .oit-megamenu-title,
html body .oit-megamenu-title a,
html body .oit-menu-mobile .oit-megamenu-title,
html body .oit-menu-mobile .oit-megamenu-title a {
    font-family: var(--oit-ff-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ds-navy) !important;
}

/* Overview cards inside the mega menu */
html body .oit-service-card__title,
html body .oit-menu-mobile .oit-service-card__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--ds-navy) !important;
}

html body.ds main .oit-service-card__desc,
html body .oit-service-card__desc {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--ds-text) !important;
}

/* Buttons inside the menu ("View All Products", "Download ROI Template") */
html body .oit-header-area .oit-btn-red,
html body .oit-header-area .oit-btn-red span,
html body .oit-header-area .pdf-btn,
html body .oit-header-area .pdf-btn span,
html body .oit-menu-mobile .oit-btn-red,
html body .oit-menu-mobile .oit-btn-red span,
html body .oit-menu-mobile .pdf-btn,
html body .oit-menu-mobile .pdf-btn span {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ---- Footer: brand navy, white headings, soft-white links ---- */
:root {
    --ds-footer-bg: var(--ds-navy);
    --ds-footer-text: rgba(255, 255, 255, 0.72);
    --ds-footer-muted: rgba(255, 255, 255, 0.55);
    --ds-footer-line: rgba(255, 255, 255, 0.12);
}

/* Scrolling contact strip above the footer: sleek dark navy integrated with footer */
.footer-area .top-contact-bar {
    background: #0f1725 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0 !important;
}

.footer-area .sap-marquee-text {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Main footer - layout: brand + 4 link columns / contact row / copyright bar.
   Colours, font and sizes follow the Mesprosoft theme. */
/* Main footer - layout: brand + 4 link columns / contact row / copyright bar.
   Colours, font and sizes follow the Mesprosoft theme.
   Hardened with high specificity so footer never breaks on any page. */
html body .mes-footer,
html body.ds .mes-footer,
.mes-footer {
    background: var(--ds-footer-bg, #151f30) !important;
    color: var(--ds-footer-text, rgba(255, 255, 255, 0.72)) !important;
    font-family: var(--oit-ff-body) !important;
    padding: 40px 0 0 !important;
}

html body .mes-footer a,
html body.ds .mes-footer a,
.mes-footer a {
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* Row 1: brand column + 4 equal link columns, one even gap */
.mes-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 56px;
}

.mes-footer-logo img {
    display: block;
    width: 200px;
    height: auto;
    border-radius: 0 !important;
}

html body .mes-footer .mes-footer-tagline,
html body.ds .mes-footer .mes-footer-tagline,
.mes-footer-tagline {
    margin: 24px 0 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--ds-white, #ffffff) !important;
}

html body .mes-footer .mes-footer-text,
html body.ds .mes-footer .mes-footer-text,
.mes-footer-text {
    margin: 0 !important;
    max-width: 300px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ds-footer-text, rgba(255, 255, 255, 0.72)) !important;
}

.mes-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.mes-footer-social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ds-white);
    font-size: 16px;
}

.mes-footer-social a:hover {
    background: var(--ds-blue);
    color: var(--ds-white);
}

/* Titles: Must always be crisp white across all pages and inside any container */
html body .mes-footer .mes-footer-title,
html body.ds .mes-footer .mes-footer-title,
html body.ds main .mes-footer .mes-footer-title,
html body main .mes-footer-title,
body.ds main .mes-footer-title,
body.ds main .mes-footer h3,
body.ds .mes-footer-title,
.mes-footer-title {
    margin: 0 0 20px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .mes-footer .mes-footer-col ul,
html body.ds .mes-footer .mes-footer-col ul,
.mes-footer-col ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .mes-footer .mes-footer-col ul li,
html body.ds .mes-footer .mes-footer-col ul li,
html body .mes-footer .mes-footer-col li,
html body.ds .mes-footer .mes-footer-col li,
.mes-footer-col li {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    color: var(--ds-footer-text, rgba(255, 255, 255, 0.72)) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

html body .mes-footer .mes-footer-col ul li:last-child,
html body.ds .mes-footer .mes-footer-col ul li:last-child,
html body .mes-footer .mes-footer-col li:last-child,
html body.ds .mes-footer .mes-footer-col li:last-child,
.mes-footer-col li:last-child {
    margin-bottom: 0 !important;
}

html body .mes-footer .mes-footer-col a,
html body.ds .mes-footer .mes-footer-col a,
.mes-footer-col a {
    display: inline-block !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--ds-footer-text, rgba(255, 255, 255, 0.72)) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

html body .mes-footer .mes-footer-col a:hover,
html body.ds .mes-footer .mes-footer-col a:hover,
.mes-footer-col a:hover {
    color: var(--ds-white, #ffffff) !important;
    transform: translateX(3px) !important;
}

/* Row 2: contact details, evenly spaced */
.mes-footer-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: 40px;
    padding: 32px 0;
    border-top: 1px solid var(--ds-footer-line);
}

html body .mes-footer .mes-footer-contact-item,
html body.ds .mes-footer .mes-footer-contact-item,
.mes-footer-contact-item {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    color: var(--ds-white, #ffffff) !important;
    text-decoration: none !important;
}

html body .mes-footer .mes-footer-contact-item i,
html body.ds .mes-footer .mes-footer-contact-item i,
.mes-footer-contact-item i {
    margin-top: 2px !important;
    font-size: 15px !important;
    color: var(--ds-blue-soft, #7cb9f6) !important;
}

html body .mes-footer .mes-footer-contact-item span,
html body.ds .mes-footer .mes-footer-contact-item span,
.mes-footer-contact-item span {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: var(--ds-white, #ffffff) !important;
}

html body .mes-footer .mes-footer-contact-item small,
html body.ds .mes-footer .mes-footer-contact-item small,
.mes-footer-contact-item small {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--ds-footer-muted, rgba(255, 255, 255, 0.55)) !important;
}

html body .mes-footer .mes-footer-contact-item:hover span,
html body.ds .mes-footer .mes-footer-contact-item:hover span,
.mes-footer-contact-item:hover span {
    color: var(--ds-blue-soft, #7cb9f6) !important;
}

/* Row 3: copyright + legal links */
.mes-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 0 24px;
    border-top: 1px solid var(--ds-footer-line);
}

html body .mes-footer .mes-footer-bottom p,
html body.ds .mes-footer .mes-footer-bottom p,
.mes-footer-bottom p {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--ds-footer-muted, rgba(255, 255, 255, 0.55)) !important;
}

.mes-footer-legal {
    display: flex;
    gap: 28px;
}

html body .mes-footer .mes-footer-legal a,
html body.ds .mes-footer .mes-footer-legal a,
.mes-footer-legal a {
    font-size: 14px !important;
    color: var(--ds-footer-muted, rgba(255, 255, 255, 0.55)) !important;
    text-decoration: none !important;
}

html body .mes-footer .mes-footer-legal a:hover,
html body.ds .mes-footer .mes-footer-legal a:hover,
.mes-footer-legal a:hover {
    color: var(--ds-white, #ffffff) !important;
}

/* Tablet: brand on its own row, links in 4 then 2 columns, contact 2x2 */
@media (max-width: 1199.98px) {
    .mes-footer-top {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mes-footer-brand {
        grid-column: 1 / -1;
    }

    .mes-footer-text {
        max-width: 480px;
    }

    .mes-footer-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 40px;
    }
}

/* Tablet portrait: 4 link columns get too narrow - use 2 */
@media (max-width: 991.98px) {
    .mes-footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 40px;
    }
}

@media (max-width: 767.98px) {
    .mes-footer {
        padding-top: 48px;
    }

    .mes-footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        padding-bottom: 40px;
    }

    .mes-footer-contact {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 0;
    }

    .mes-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mes-footer-legal {
        flex-wrap: wrap;
        gap: 12px 24px;
    }
}

/* ==========================================================================
   1. TYPOGRAPHY
   ========================================================================== */

body.ds main h1,
body.ds .ic-hero-title {
    font-size: var(--ds-fs-h1) !important;
    font-weight: 700 !important;
    line-height: var(--ds-lh-heading) !important;
    color: var(--ds-navy) !important;
    letter-spacing: -0.01em;
}

body.ds main h2,
body.ds .oit-section-title {
    font-size: var(--ds-fs-h2) !important;
    font-weight: 600 !important;
    line-height: var(--ds-lh-heading) !important;
    color: var(--ds-navy) !important;
    letter-spacing: -0.01em;
}

/* Standard card titles: services, industries, why-choose, team, testimonials, accordions */
body.ds main h3,
body.ds main .common-title,
body.ds main .bi-choose-title,
body.ds main .ms-ind-title,
body.ds main .accordion-header,
body.ds main .accordion-button,
body.ds main .accordion-button>span {
    font-size: var(--ds-fs-h3) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--ds-navy) !important;
}

/* Featured card titles (case studies) */
body.ds main .ic-case-title {
    font-size: var(--ds-fs-h3-lg) !important;
}

/* Paragraphs (main content + the footer call-to-action band) */
body.ds main p,
body .bs-leading-area p {
    font-size: var(--ds-fs-body) !important;
    line-height: var(--ds-lh-body) !important;
    color: var(--ds-text);
}

/* Hero intro paragraph */
body.ds main .ban-p {
    font-size: var(--ds-fs-lead) !important;
    color: var(--ds-text) !important;
}

/* Testimonial quotes - same size as body text */
body.ds main .bc-testimonial-area p.mb-45 {
    font-size: var(--ds-fs-body) !important;
    font-weight: 400 !important;
}

/* Small text: card descriptions, captions (never below 14px) */
body.ds main .ms-ind-desc,
body.ds main .fc-price-features span,
body.ds main .hero-case-cta-badge {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Trust / Key figures strip: strictly uniform across index and all inner pages */
html body .trust strong,
html body.ds .trust strong,
html body .trust strong.sm,
html body.ds .trust strong.sm {
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--navy, #151f30) !important;
    letter-spacing: -0.015em !important;
}

@media (min-width: 768px) {

    html body .trust strong,
    html body.ds .trust strong,
    html body .trust strong.sm,
    html body.ds .trust strong.sm {

        font-size: 26px !important;

        white-space: nowrap !important;
    }
}

@media (max-width: 767.98px) {

    html body .trust strong,
    html body.ds .trust strong,
    html body .trust strong.sm,
    html body.ds .trust strong.sm {

        font-size: 22px !important;

        white-space: normal !important;
        word-break: break-word !important;
    }
}

html body .trust span,
html body.ds .trust span,
html body.ds main .trust span {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--muted, #64748b) !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
    display: block !important;
}

@media (max-width: 767.98px) {

    html body .trust span,
    html body.ds .trust span,
    html body.ds main .trust span {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
}

/* Small emphasised lines under titles */
body.ds main .title-below,
body.ds main .head-18 {
    font-size: var(--ds-fs-small) !important;
    font-weight: 600 !important;
}

body.ds main .title-below {
    color: var(--ds-blue) !important;
}

body.ds main .head-18 {
    color: var(--ds-navy) !important;
}

/* Section labels ("Our Services", "About Mesprosoft", "Ready to Transform..." CTA,
   the homepage hero tag "SAP Autonomous Enterprise & AI" and the inner-page hero label) -
   one style everywhere */
body .oit-section-subtitle,
body .mesprosoft-brand-text,
html body.ds .mes-s4-eyebrow,
html body .mes-s4-eyebrow,
body.ds .mes-s4-eyebrow,
.mes-s4-eyebrow,
body .jobs-eyebrow,
html body.ds .jobs-eyebrow,
html body .jobs-eyebrow,
body.ds .jobs-eyebrow,
.jobs-eyebrow,
body .mes-tag,
html body.ds .mes-tag,
html body .mes-tag,
body.ds .mes-tag,
.mes-tag {
    display: inline-block !important;
    font-size: var(--ds-fs-label, 13px) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--ds-blue, #0762e5) !important;
    background: var(--ds-blue-tint, #eaf1fd) !important;
    border-radius: var(--ds-radius-sm, 6px) !important;
    padding: 5px 14px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

/* The hero tag sits next to the SAP logo: hide the divider line, label does the job */
body .sap-partner-branding .brand-divider {
    display: none !important;
}

/* ==========================================================================
   2. COLOURS - replace stray shades with the palette
   ========================================================================== */

/* Old blue (#005baa / #0051a4) text links -> brand blue */
body main .bg-btn-blues,
body main .bg-btn-blues * {
    color: var(--ds-blue) !important;
}

body main .bg-btn-blues:hover,
body main .bg-btn-blues:hover * {
    color: var(--ds-blue-dark) !important;
}

/* Slider CTA button -> Strictly ONE Uniform Button Style Matching Header Button */
body.ds main .hero-case-cta-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--ds-blue) !important;
    border: 1px solid var(--ds-blue) !important;
    color: var(--ds-white) !important;
    border-radius: var(--ds-radius) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    box-shadow: 0 2px 8px rgba(7, 98, 229, 0.16) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

body.ds main .hero-case-cta-badge:hover,
body.ds .hero-case-item:hover .hero-case-cta-badge {
    background: var(--ds-blue-dark) !important;
    border-color: var(--ds-blue-dark) !important;
    color: var(--ds-white) !important;
    transform: translateY(0) !important;
}

html body .mes-s4-hero h1 span,
html body.ds .mes-s4-hero h1 span,
html body .mes-s4-hero h1 span.blue-colo,
html body.ds .mes-s4-hero h1 span.blue-colo,
html body .mes-s4-hero-content h1 span,
html body.ds .mes-s4-hero-content h1 span,
html body .mes-s4-cta h2 span,
html body.ds .mes-s4-cta h2 span,
html body .mes-s4-cta h2 span.blue-colo,
html body.ds .mes-s4-cta h2 span.blue-colo,
html body [data-theme="dark"] h1 span,
html body.ds [data-theme="dark"] h1 span,
html body [data-theme="dark"] h2 span,
html body.ds [data-theme="dark"] h2 span,
html body .bg-dark h1 span,
html body.ds .bg-dark h1 span,
html body .bg-dark h2 span,
html body.ds .bg-dark h2 span {
    color: #0762e5 !important;
}

body.ds main .hero-case-cta-badge i {
    color: var(--ds-white) !important;
    font-size: 14px !important;
}

/* Small tags / metric pills across website: 8px radius, brand blue tint, standard font */
html body .case-study-metric-pill,
html body.ds .case-study-metric-pill,
html body .branch-badge,
html body.ds .branch-badge,
html body .mes-roi-stats span,
html body.ds .mes-roi-stats span {
    background: #eaf1fd !important;
    color: #0762e5 !important;
    border: 1px solid rgba(7, 98, 229, 0.18) !important;
    border-radius: var(--ds-radius, 8px) !important;
    font-weight: 600 !important;
}

html body .case-study-metric-pill i,
html body.ds .case-study-metric-pill i,
html body .branch-info-item i,
html body.ds .branch-info-item i,
html body .mes-roi-icon i,
html body.ds .mes-roi-icon i,
html body .mes-roi-icon svg,
html body.ds .mes-roi-icon svg {
    color: #0762e5 !important;
    fill: #0762e5 !important;
}

html body .mes-roi-icon,
html body.ds .mes-roi-icon {
    background: #eaf1fd !important;
    color: #0762e5 !important;
    border-radius: var(--ds-radius, 8px) !important;
}

html body .mes-roi-number,
html body.ds .mes-roi-number {
    background: #0762e5 !important;
    color: #ffffff !important;
}

html body .mes-roi-note,
html body.ds .mes-roi-note {
    background: #eaf1fd !important;
    border-left: 3px solid #0762e5 !important;
}

/* Standardized text link colors across pages matching homepage */
body main .case-study-card-link,
body main .branch-info-item a {
    color: var(--ds-blue) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body main .case-study-card-link:hover,
body main .case-study-card:hover .case-study-card-link,
body main .branch-info-item a:hover {
    color: var(--ds-blue-dark) !important;
}

/* (Menu link colours live in section 0 - a catch-all "every menu link = navy" rule used to be
   here and turned the blue dropdown buttons' text navy-on-blue, i.e. invisible.) */

body.ds main .fc-price-features span {
    color: var(--ds-text) !important;
}

/* Small tags in case-study cards: 12px -> label size */
body.ds main .oit-meta-item span {
    font-size: var(--ds-fs-label) !important;
}

/* Inline SVG icons drawn in #111827 -> navy */
body.ds main svg[stroke="#111827"] {
    stroke: var(--ds-navy);
}

/* ==========================================================================
   3. SECTIONS - one vertical rhythm, alternating backgrounds
   ========================================================================== */

body.ds .hero-case-study-area,
body.ds .oit-mission-area,
body.ds .bc-about-area,
body.ds .bi-choose-area,
body.ds .ms-industries-section,
body.ds .ic-case-area,
body.ds .bs-service-area,
body.ds .fc-price-area,
body.ds .bc-testimonial-area,
body.ds .ic-choose-area,
body.ds .mes-work-process,
body.ds .bm-team-area,
body.ds .mc-funfact-area {
    padding-top: var(--ds-section-y) !important;
    padding-bottom: var(--ds-section-y) !important;
}

/* white / soft / white / soft ... */
body.ds .hero-case-study-area,
body.ds .bc-about-area,
body.ds .ic-case-area,
body.ds .fc-price-area {
    background-color: var(--ds-white) !important;
}

body.ds .oit-mission-area,
body.ds .bi-choose-area,
body.ds .bs-service-area,
body.ds .bc-testimonial-area {
    background-color: var(--ds-bg-soft) !important;
}

/* ==========================================================================
   CARDS - every card and card image uses the same 8px corner
   ========================================================================== */

body.ds .ms-ind-card,
body.ds .bs-service-card,
body.ds .mes-process-card,
body.ds .bm-team-item,
body.ds .mc-funfact-item,
body.ds .culture-career-card,
body.ds .bg-list li,
body.ds .mes-s4-benefit-card,
body.ds .conversion-card,
body.ds .why-box,
body.ds .transform-card,
body.ds .ms-support-item,
body.ds .support-feature-card,
body.ds .sc-highlight,
body.ds .sc-consulting-item,
body.ds .btp-card,
body.ds .bs-step-item,
body.ds .mes-sap-capability-main,
body.ds .mes-sap-capability-card,
body.ds .ds-cap-card,
body.ds .fc-price-card,
body.ds .bi-choose-item,
body.ds .ic-case-card,
body.ds .hero-case-item,
body.ds .hero-case-poster,
body.ds .bc-testimonial-slider-box,
body.ds .bc-about-thumb,
body.ds .bi-choose-thumb,
body.ds .bs-service-thumb,
body.ds .ic-case-thumb,
body .bs-leading-thumb,
body.ds main figure.slide,
body.ds main figure.slide img,
body.ds .bc-about-thumb img,
body.ds .bi-choose-thumb img,
body.ds .bs-service-thumb img,
body.ds .ic-case-thumb img,
body .bs-leading-thumb img,
body.ds .hero-case-poster img {
    border-radius: var(--ds-radius) !important;
}

/* Every other rounded element: 8px. ("html body.ds" adds weight so this beats
   old rules like ".bc-about-thumb.shine-circle img { border-radius: 22px !important }")
   True circles (slider dots, round icons, back-to-top) are left round on purpose. */
html body.ds [class*="thumb"],
html body.ds [class*="thumb"] img,
html body.ds [class*="-img"] img,
html body.ds .oit-dual-img-main img,
html body.ds .oit-dual-img-overlap img,
html body.ds .slide img,
html body.ds .hero-case-poster img,
html body .sap-partner-branding img,
html body.ds .bs-service-card-arrow,
html body.ds .oit-card-arrow,
html body.ds .oit-meta-item span,
html body .mes-social-item,
html body .mes-social-tooltip,
html body .dropdown-toggle-btn,
html body .oit-header-bar,
html body .oit-btn-blue,
html body .oit-btn-white,
html body .nice-select,
html body .nice-select .list,
html body .mes-lead-modal-box,
html body .mes-popup-lead-form input,
html body .mes-popup-lead-form select,
html body .mes-popup-lead-form textarea,
html body.ds .accordion-item,
html body .oit-menu-content a,
html body .oit-service-card,
html body .oit-menu-content span {
    border-radius: var(--ds-radius) !important;
}

/* Floating social bar (desktop, left edge) */
@media (min-width: 1400px) {
    html body .mes-floating-social-bar {
        border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important;
    }
}

/* Footer call-to-action band and dropdown menus: only their exposed corners */
/* "Ready to Transform" band (footer.php, every page): no corners, no border - it takes the
   background of the section above it (script.js "CTA band" sets the colour) so it reads as
   part of that section */
html body .bs-leading-wrap {
    border-radius: 0 !important;
    border: 0 !important;
}

html body .oit-submenu,
html body .oit-submenu.submenu {
    border-radius: 0 0 var(--ds-radius) var(--ds-radius) !important;
}

html body .oit-menu-content li a,
html body .oit-menu-content li span,
html body.ds [style*="border-radius"]:not([style*="50%"]) {
    border-radius: var(--ds-radius) !important;
}

/* ==========================================================================
   BOX HOVER - steady light-blue glow (no lifting, no zooming)
   ========================================================================== */

/* every card that glows on hover - add new card types here */
html body.ds .ms-ind-card,
html body.ds .fc-price-card,
html body.ds .bi-choose-item,
html body.ds .ic-case-card,
html body.ds .ds-about-item,
html body.ds .ic-choose-item,
html body.ds .ds-icon-top .bs-service-card,
html body.ds .mes-process-card,
html body.ds .bm-team-item,
html body.ds .mc-funfact-item,
html body.ds .culture-career-card,
html body.ds .bg-list li,
html body.ds .mes-s4-benefit-card,
html body.ds .conversion-card,
html body.ds .why-box,
html html body.ds .transform-card,
html body.ds .ms-support-item,
html body.ds .support-feature-card,
html body.ds .sc-highlight,
html body.ds .sc-consulting-item,
html body.ds .btp-card,
html body.ds .bs-step-item,
html body.ds .mes-sap-capability-main,
html body.ds .mes-sap-capability-card,
html body.ds .ds-cap-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body.ds .ms-ind-card:hover,
html body.ds .fc-price-card:hover,
html body.ds .bi-choose-item:hover,
html body.ds .ic-case-card:hover,
html body.ds .ds-about-item:hover,
html body.ds .ic-choose-item:hover,
html body.ds .ds-icon-top .bs-service-card:hover,
html body.ds .mes-process-card:hover,
html body.ds .bm-team-item:hover,
html body.ds .mc-funfact-item:hover,
html body.ds .culture-career-card:hover,
html body.ds .bg-list li:hover,
html body.ds .mes-s4-benefit-card:hover,
html body.ds .conversion-card:hover,
html body.ds .why-box:hover,
html body.ds .transform-card:hover,
html body.ds .ms-support-item:hover,
html body.ds .support-feature-card:hover,
html body.ds .sc-highlight:hover,
html body.ds .sc-consulting-item:hover,
html body.ds .btp-card:hover,
html body.ds .bs-step-item:hover,
html body.ds .mes-sap-capability-main:hover,
html body.ds .mes-sap-capability-card:hover,
html body.ds .ds-cap-card:hover {
    transform: none !important;
    border-color: rgba(7, 98, 229, 0.28) !important;
    box-shadow: 0 4px 16px rgba(21, 31, 48, 0.06), 0 2px 8px rgba(7, 98, 229, 0.08) !important;
}

/* Keep images inside boxes still on hover (no zoom / shine sweep) */
html body.ds .ms-ind-card:hover img,
html body.ds .fc-price-card:hover img,
html body.ds .bi-choose-item:hover img,
html body.ds .ic-case-card:hover img,
html body.ds .shine-circle:hover img {
    transform: none !important;
}

html body.ds .shine-circle::before,
html body.ds .shine-circle::after {
    display: none !important;
}

/* NO hover effect at all: "The Mesprosoft Advantage" cards and the testimonial box */
html body.ds .bs-service-card,
html body.ds .bs-service-card:hover,
html body.ds .bc-testimonial-slider-box,
html body.ds .bc-testimonial-slider-box:hover {
    transform: none !important;
    transition: none !important;
}

/* hover looks exactly like the normal state */
html body.ds .bs-service-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(56, 63, 62, 0.1) !important;
}

html body.ds .bc-testimonial-slider-box:hover {
    box-shadow: none !important;
    border-color: rgba(56, 63, 62, 0.1) !important;
}

html body.ds .bs-service-card:hover img,
html body.ds .bs-service-card:hover .bs-service-icon {
    transform: none !important;
}

/* ==========================================================================
   IMAGE ALIGNMENT IN CARDS
   ========================================================================== */

/* Our Products: same frame around the image on every screen size (card padding comes from
   BOX PADDING; was 21px on desktop, flush-left on tablet, edge-to-edge on phone) */
html body.ds .ic-case-thumb {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* images fill their frame (Our Products, The Mesprosoft Advantage) */
html body.ds .ic-case-thumb img,
html body.ds .bs-service-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* The Mesprosoft Advantage: image always fills its box and sits at the top */
html body.ds .bs-service-card {
    align-items: flex-start !important;
}

html body.ds .bs-service-thumb {
    align-self: flex-start !important;
    margin-top: 0 !important;
    overflow: hidden;
}

/* Desktop: image beside the text, fixed 200x174 box */
@media (min-width: 992px) {
    html body.ds .bs-service-thumb {
        width: 200px !important;
        height: 174px !important;
        flex-shrink: 0;
    }
}

/* Tablet / phone: cards stack (image on top) - image spans the full card width */
@media (max-width: 991.98px) {
    html body.ds .bs-service-thumb {
        width: 100% !important;
        height: 200px !important;
    }
}

/* ==========================================================================
   5. FLOATING WIDGETS - stop them covering content on phones / tablets
   Below 1400px the social bar becomes a sticky bottom bar (~76px tall).
   Everything else floats ABOVE it instead of on top of it.
   ========================================================================== */

@media (max-width: 1399.98px) {

    /* Leave room so the footer's last line isn't hidden behind the bar */
    body {
        padding-bottom: var(--ds-floating-bar-h);
    }

    body .mes-ai-launcher {
        bottom: calc(var(--ds-floating-bar-h) + 12px) !important;
        left: 16px !important;
    }

    body #zsiq_float,
    body .zsiq_floatmain {
        bottom: calc(var(--ds-floating-bar-h) + 12px) !important;
        right: 16px !important;
    }

    body .scroll-top {
        bottom: calc(var(--ds-floating-bar-h) + 72px) !important;
        right: 20px !important;
    }
}


/* ==========================================================================
   BUTTON SYSTEM - Strictly ONE Uniform Button Style Matching Header Button
   ----------------------------------------------------------------------------
   - Background: Solid Brand Blue #0762e5 (var(--ds-blue))
   - Text Color: Pure White #ffffff (var(--ds-white))
   - Border: 1px solid var(--ds-blue)
   - Border Radius: Strictly 8px (var(--ds-radius))
   - Typography: 15px font-size, 600 weight, 1.2 line-height across all buttons
   - Padding & Height: 10px 22px (min-height 44px)
   - Hover: #0550bd, elevation 0 4px 14px rgba(7, 98, 229, 0.28), translateY(-1px)
   - NO bordered/outline buttons with white backgrounds on cards or pages
   ========================================================================== */

/* ---------- Uniform Base for ALL Action Buttons Across Mesprosoft ---------- */
html body .oit-btn-teal,
html body .oit-btn-blue,
html body .oit-btn,
html body .oit-btn-red,
html body .oit-btn-white,
html body .pdf-btn,
html body .mes-s4-btn,
html body .mes-s4-btn-primary,
html body .view-all-btn,
html body .mespro-submit-btn,
html body .apply-job-btn,
html body .mes-ai-submit-btn,
html body .mes-ai-wa-btn,
html body .culture-career-btn,
html body .mes-ai-pill,
html body .btn-primary,
html body .contact-btn,
html body .bg-btn-blues,
html body .bi-choose-item a[class*="btn"],
html body .bi-choose-item a.bg-btn-blues,
html body .ic-case-card .ic-case-btn a,
html body a[class*="btn"],
html body a[class*="-btn"],
html body button[class*="btn"],
html body button[class*="-btn"],
html body button[type="submit"],
html body input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    border-radius: var(--ds-radius) !important;
    /* Strictly 8px */
    background-color: var(--ds-blue) !important;
    /* Solid Brand Blue #0762e5 */
    border: 1px solid var(--ds-blue) !important;
    color: var(--ds-white) !important;
    /* Pure White #ffffff */
    font-family: var(--oit-ff-body) !important;
    font-size: 15px !important;
    /* Strictly 15px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(7, 98, 229, 0.16) !important;
    transform: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    animation: none !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

/* Hover state for all buttons: dark blue #0550bd, white text, subtle elevation */
html body .oit-btn-teal:hover,
html body .oit-btn-blue:hover,
html body .oit-btn:hover,
html body .oit-btn-red:hover,
html body .oit-btn-white:hover,
html body .pdf-btn:hover,
html body .mes-s4-btn:hover,
html body .mes-s4-btn-primary:hover,
html body .view-all-btn:hover,
html body .mespro-submit-btn:hover,
html body .mes-ai-submit-btn:hover,
html body .mes-ai-wa-btn:hover,
html body .culture-career-btn:hover,
html body .mes-ai-pill:hover,
html body .bg-btn-blues:hover,
html body .bi-choose-item a[class*="btn"]:hover,
html body .bi-choose-item a.bg-btn-blues:hover,
html body .ic-case-card .ic-case-btn a:hover,
html body a[class*="btn"]:hover,
html body a[class*="-btn"]:hover,
html body button[class*="btn"]:hover,
html body button[class*="-btn"]:hover,
html body button[type="submit"]:hover,
html body input[type="submit"]:hover {
    background-color: var(--ds-blue-dark) !important;
    /* #0550bd */
    border-color: var(--ds-blue-dark) !important;
    color: var(--ds-white) !important;
    box-shadow: 0 4px 14px rgba(7, 98, 229, 0.28) !important;
    transform: translateY(-1px) !important;
}

/* Ensure ALL text and child elements inside any button stay pure white and 15px font size */
html body .oit-btn-teal *,
html body .oit-btn-blue *,
html body .oit-btn *,
html body .oit-btn-red *,
html body .oit-btn-white *,
html body .pdf-btn *,
html body .mes-s4-btn *,
html body .mes-s4-btn-primary *,
html body .mes-contact-action-btn *,
html body .view-all-btn *,
html body .mespro-submit-btn *,
html body .mes-ai-submit-btn *,
html body .mes-ai-wa-btn *,
html body .culture-career-btn *,
html body .mes-ai-pill *,
html body .bg-btn-blues *,
html body .bi-choose-item a[class*="btn"] *,
html body .bi-choose-item a.bg-btn-blues *,
html body .ic-case-card .ic-case-btn a *,
html body button[type="submit"] *,
html body input[type="submit"] *,
html body .oit-header-area .oit-btn-red *,
html body .oit-header-area .pdf-btn *,
html body .oit-menu-mobile .oit-btn-red *,
html body .oit-menu-mobile .pdf-btn * {
    color: var(--ds-white) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    font-family: var(--oit-ff-body) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Optional secondary outline button ONLY on dark hero banners */
html body .mes-s4-btn.mes-s4-btn-secondary,
html body .mes-ai-consultant-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: var(--ds-white) !important;
    font-size: 15px !important;
}

html body .mes-s4-btn.mes-s4-btn-secondary *,
html body .mes-ai-consultant-btn * {
    color: inherit !important;
    font-size: 15px !important;
}

html body .mes-s4-btn.mes-s4-btn-secondary:hover,
html body .mes-ai-consultant-btn:hover {
    background: var(--ds-white) !important;
    border-color: var(--ds-white) !important;
    color: var(--ds-navy) !important;
}

/* ==========================================================================
   TWO-BUTTON PAIR SYSTEM: SOLID (DARK) BUTTON & OUTLINE (BORDER) BUTTON
   - Dark button (e.g. Apply Now):
       Normal: Solid brand blue (#0762e5), border #0762e5, white text
       Hover:  Inverts to Border button: #ffffff bg, #0762e5 border & text
   - Border button (e.g. View Job Description):
       Normal: #ffffff bg, #0762e5 border & text
       Hover:  Inverts to Dark button: Solid brand blue (#0762e5), white text
   ========================================================================== */

/* 1. Outline / Border Buttons: Normal State */
html body .view-job-btn,
html body.ds .view-job-btn,
html body .mes-contact-action-btn,
html body.ds .mes-contact-action-btn,
html body .mes-s4-btn.mes-s4-btn-secondary,
html body.ds .mes-s4-btn.mes-s4-btn-secondary,
html body .btn-outline,
html body.ds .btn-outline,
html body .btn-bordered,
html body.ds .btn-bordered,
html body .btn-secondary-outline,
html body.ds .btn-secondary-outline {
    background-color: var(--ds-white, #ffffff) !important;
    border: 1.5px solid var(--ds-blue, #0762e5) !important;
    color: var(--ds-blue, #0762e5) !important;
    box-shadow: none !important;
    border-radius: var(--ds-radius, 8px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

html body .view-job-btn *,
html body.ds .view-job-btn *,
html body .mes-contact-action-btn *,
html body.ds .mes-contact-action-btn *,
html body .btn-outline *,
html body.ds .btn-outline *,
html body .btn-bordered *,
html body.ds .btn-bordered *,
html body .btn-secondary-outline *,
html body.ds .btn-secondary-outline * {
    color: var(--ds-blue, #0762e5) !important;
    transition: color 0.25s ease !important;
}

/* 2. Outline / Border Buttons: Hover State (Inverts into Dark Solid Button) */
html body .view-job-btn:hover,
html body.ds .view-job-btn:hover,
html body .mes-contact-action-btn:hover,
html body.ds .mes-contact-action-btn:hover,
html body .mes-s4-btn.mes-s4-btn-secondary:hover,
html body.ds .mes-s4-btn.mes-s4-btn-secondary:hover,
html body .btn-outline:hover,
html body.ds .btn-outline:hover,
html body .btn-bordered:hover,
html body.ds .btn-bordered:hover,
html body .btn-secondary-outline:hover,
html body.ds .btn-secondary-outline:hover {
    background-color: var(--ds-blue, #0762e5) !important;
    border-color: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(7, 98, 229, 0.28) !important;
    transform: translateY(-1px) !important;
}

html body .view-job-btn:hover *,
html body.ds .view-job-btn:hover *,
html body .mes-contact-action-btn:hover *,
html body.ds .mes-contact-action-btn:hover *,
html body .btn-outline:hover *,
html body.ds .btn-outline:hover *,
html body .btn-bordered:hover *,
html body.ds .btn-bordered:hover *,
html body .btn-secondary-outline:hover *,
html body.ds .btn-secondary-outline:hover * {
    color: #ffffff !important;
}

/* 3. Dark / Solid Buttons (Apply Now & pairs): Normal State */
html body .apply-job-btn,
html body.ds .apply-job-btn {
    background-color: var(--ds-blue, #0762e5) !important;
    border: 1.5px solid var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(7, 98, 229, 0.16) !important;
    border-radius: var(--ds-radius, 8px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

html body .apply-job-btn *,
html body.ds .apply-job-btn * {
    color: #ffffff !important;
    transition: color 0.25s ease !important;
}

/* 4. Dark / Solid Buttons: Hover State (Inverts into Outline / Border Button) */
html body .apply-job-btn:hover,
html body.ds .apply-job-btn:hover {
    background-color: #ffffff !important;
    border: 1.5px solid var(--ds-blue, #0762e5) !important;
    color: var(--ds-blue, #0762e5) !important;
    box-shadow: 0 4px 14px rgba(7, 98, 229, 0.12) !important;
    transform: translateY(-1px) !important;
}

html body .apply-job-btn:hover *,
html body.ds .apply-job-btn:hover * {
    color: var(--ds-blue, #0762e5) !important;
}

/* ---------- compact size in headers, dropdowns, and cards: MAINTAIN SAME 15px FONT SIZE ---------- */
html body .oit-btn-teal.sm-btn,
html body .oit-header-area .oit-btn-red,
html body .oit-header-area .pdf-btn,
html body .oit-menu-mobile .oit-btn-red,
html body .oit-menu-mobile .pdf-btn,
html body .apply-job-btn,
html body .view-job-btn,
html body .mes-ai-submit-btn,
html body .mes-ai-wa-btn,
html body .mes-ai-pill,
html body .mes-ai-consultant-btn {
    min-height: 42px !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ---------- text-only buttons: remove icons / arrows inside PRIMARY + SECONDARY ---------- */
html body .oit-btn-blue>i,
html body .oit-btn>i,
html body .oit-btn-white>i,
html body .pdf-btn i,
html body .pdf-btn svg,
html body .pdf-btn img,
html body .mes-s4-btn>span,
html body .mes-contact-action-btn i,
html body .mes-contact-action-btn svg,
html body .view-all-btn svg,
html body .view-all-btn i,
html body .mespro-submit-btn svg,
html body .mespro-submit-btn i,
html body .culture-career-btn i,
html body .culture-career-btn svg,
html body .mes-ai-submit-btn i,
html body .mes-ai-submit-btn svg,
html body .mes-ai-wa-btn i,
html body .mes-ai-wa-btn svg,
html body .mes-ai-consultant-btn i,
html body .mes-ai-consultant-btn svg {
    display: none !important;
}

/* old "rolling text" duplicates (.text-2 next to .text-1) */
html body .oit-btn-blue .text-1~.text-2,
html body .oit-btn .text-1~.text-2,
html body .oit-btn-white .text-1~.text-2 {
    display: none !important;
}

html body .oit-btn-blue span,
html body .oit-btn span,
html body .oit-btn-white span,
html body .pdf-btn span,
html body .view-all-btn span,
html body .mespro-submit-btn span,
html body .culture-career-btn span {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
}

/* ---------- 4. ICON buttons ---------- */
html body .nav-slide-btn,
html body .hero-case-nav-btn,
html body .arrow-prev,
html body .arrow-next,
html body .bs-service-card-arrow,
html body .mes-ai-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    color: var(--ds-navy) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

html body .nav-slide-btn:hover,
html body .hero-case-nav-btn:hover,
html body .arrow-prev:hover,
html body .arrow-next:hover,
html body .bs-service-card-arrow:hover {
    background: var(--ds-blue) !important;
    border-color: var(--ds-blue) !important;
    color: var(--ds-white) !important;
}

/* Offcanvas and Modal Close Buttons: subtle neutral, soft tint on hover */
html body .close-btn,
html body .oit-offcanvas__close-btn button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-bg-soft, #f1f5f9) !important;
    border: 1px solid var(--ds-line, #e2e8f0) !important;
    color: var(--ds-navy, #151f30) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.2s ease !important;
}

html body .close-btn:hover,
html body .close-btn:focus,
html body .close-btn:active,
html body .oit-offcanvas__close-btn button:hover,
html body .oit-offcanvas__close-btn button:focus,
html body .oit-offcanvas__close-btn button:active {
    background: var(--ds-blue-tint, #eaf2fd) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
    color: var(--ds-blue, #0762e5) !important;
}

/* chatbot close sits on the dark chat header */
html body .mes-ai-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--ds-white) !important;
}

html body .mes-ai-close-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* floating icon buttons stay round (they float over content) - brand colours only */
html body .scroll-top,
html body .mes-ai-launcher-btn {
    background: var(--ds-navy) !important;
    background-image: none !important;
    color: var(--ds-white) !important;
    border: none !important;
    border-radius: 50% !important;
}

html body .mes-ai-send-btn {
    background: var(--ds-blue) !important;
    color: var(--ds-white) !important;
    border-radius: 50% !important;
}

html body .scroll-top:hover,
html body .mes-ai-launcher-btn:hover,
html body .mes-ai-send-btn:hover {
    background: var(--ds-blue-dark) !important;
}


/* ---------- kept from the first button pass (same selectors as before) ---------- */
/* arrow icon + duplicate "rolling" text used for the old hover animation
   (.text-2 is only hidden when a .text-1 copy exists - some buttons only have .text-2) */
body .oit-btn-teal>i,
body .oit-btn-red>i,
body .oit-btn-teal .text-1~.text-2,
body .oit-btn-red .text-1~.text-2,
body .bg-btn-blues .text-1~.text-2 {
    display: none !important;
}

/* no transition / animation / movement inside buttons and text links */
body .oit-btn-teal *,
body .oit-btn-teal::before,
body .oit-btn-teal::after,
body .oit-btn-red *,
body .oit-btn-red::before,
body .oit-btn-red::after,
body .bg-btn-blues,
body .bg-btn-blues *,
body .bg-btn-blues::before,
body .bg-btn-blues::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* remaining text fully visible (no clipping from the old roll effect) */
body .oit-btn-teal span,
body .oit-btn-red span,
body .bg-btn-blues span {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
    color: inherit !important;
}

/* ---------- phones (< 768px): PRIMARY + SECONDARY full width, one line ----------
   Side padding is reduced so even the longest label ("Claim Free Consultation & Demo", ~247px)
   fits on a 320px phone. :not(.d-none) keeps phone-hidden buttons (header "Request a Demo") hidden. */
@media (max-width: 767.98px) {

    html body .oit-btn-teal:not(.d-none),
    html body .oit-btn-teal.sm-btn:not(.d-none),
    html body .oit-btn-blue:not(.d-none),
    html body .oit-btn:not(.d-none),
    html body main .oit-btn-red:not(.d-none),
    html body .footer-area .oit-btn-red:not(.d-none),
    html body .oit-btn-white:not(.d-none),
    html body .pdf-btn:not(.d-none),
    html body .mes-s4-btn:not(.d-none),
    html body section.ic-hero-area .mes-s4-btn:not(.d-none),
    html body .mes-contact-action-btn:not(.d-none),
    html body .view-all-btn:not(.d-none),
    html body .mespro-submit-btn:not(.d-none),
    html body .culture-career-btn:not(.d-none) {
        display: flex !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .bm-team-thumb img {
        width: auto;
        margin: auto;
    }

    html body .oit-btn-teal *,
    html body .mes-s4-btn *,
    html body main .oit-btn-red *,
    html body .pdf-btn * {
        white-space: nowrap !important;
    }

    /* Hero "Talk To Our Experts": the centred flex column shrank the button's wrapper to the text
       width, so "100% wide" only filled that small box - let the wrapper span the column */
    html body .ic-hero-content-inner>div {
        width: 100% !important;
        align-self: stretch !important;
    }
}

/* ==========================================================================
   BOX PADDING - every box has the SAME space on top, left, right and bottom
   ========================================================================== */
:root {
    --ds-card-pad: 24px;
    /* standard cards */
    --ds-card-pad-lg: 40px;
    /* very wide boxes (testimonial) */
}

html body .ms-ind-card,
html body .bs-service-card,
html body .bi-choose-item,
html body .ic-case-card {
    padding: var(--ds-card-pad) !important;
}

/* Industry cards: corner arrow sits on the same 24px inset */
html body .ms-ind-card .ms-ind-arrow {
    right: var(--ds-card-pad) !important;
    bottom: var(--ds-card-pad) !important;
    top: auto !important;
}

/* Business Benefits cards: header + feature list - 24px to the edges, 20px either side of the divider */
html body .fc-price-card {
    padding: 0 !important;
}

html body .fc-price-card .fc-price-head {
    padding: var(--ds-card-pad) var(--ds-card-pad) 20px !important;
}

html body .fc-price-card .fc-price-features {
    padding: 20px var(--ds-card-pad) var(--ds-card-pad) !important;
}

/* Wide testimonial box: equal 40px all round */
html body .bc-testimonial-slider-box {
    padding: var(--ds-card-pad-lg) !important;
}

/* No stray margin under the last element inside a box (keeps bottom space = top space) */
html body .ms-ind-card> :last-child,
html body .bs-service-card :last-child> :last-child,
html body .bi-choose-item> :last-child,
html body .ic-case-card> :last-child,
html body .fc-price-features> :last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    :root {
        --ds-card-pad: 20px;
        --ds-card-pad-lg: 24px;
    }
}

/* Our Products cards (homepage): even rhythm inside the card, button pinned to the bottom so the
   space under it always equals the side padding (24px), whatever the text length. */
html body.ds .ic-case-card {
    display: flex !important;
    flex-direction: column !important;
}

html body.ds .ic-case-card .ic-case-thumb {
    margin-bottom: 20px !important;
}

html body.ds .ic-case-card .ic-case-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

html body.ds .ic-case-card .ic-case-title {
    margin-bottom: 12px !important;
}

html body.ds .ic-case-card .ic-case-content>p {
    margin: 0 0 16px !important;
}

html body.ds .ic-case-card .ic-case-meta {
    margin-bottom: var(--ds-card-pad) !important;
}

html body.ds .ic-case-card .ic-case-btn {
    margin-top: auto !important;
    line-height: 0;
}

/* Our Products cards: text block lines up with the image edge (old CSS indented it 20px) */
html body.ds .ic-case-card .ic-case-content {
    padding: 0 !important;
}

/* ==========================================================================
   SECTION SPACING - the visible space above and below every section's content
   equals --ds-section-y (80px desktop / 64px tablet / 48px phone).
   Old templates left bottom margins on the LAST row of cards/columns, which
   added 25-100px of extra space under some sections. Spacing between cards now
   comes from row gaps instead, so nothing hangs below the last row.
   ========================================================================== */

/* Card grids: gap between cards via row-gap, no margin under any card */
html body.ds .bi-choose-area .row,
html body.ds .bs-service-area .row,
html body.ds .fc-price-area .row {
    row-gap: 24px;
}

html body.ds .bi-choose-area .bi-choose-item,
html body.ds .bi-choose-area .row>[class*="col"],
html body.ds .bs-service-area .bs-service-card,
html body.ds .bs-service-area .bs-service-list .row>[class*="col"],
html body.ds .fc-price-area .fc-price-card,
html body.ds .fc-price-area .row>[class*="col"] {
    margin-bottom: 0 !important;
}

/* About: three columns - spacing between them when stacked, none under the last */
html body.ds .bc-about-area .row>[class*="col"] {
    margin-bottom: 40px !important;
}

html body.ds .bc-about-area .row>[class*="col"]:last-child {
    margin-bottom: 0 !important;
}

/* columns sit side by side from 768px (col-md-4) - no margin under any of them */
@media (min-width: 768px) {
    html body.ds .bc-about-area .row>[class*="col"] {
        margin-bottom: 0 !important;
    }
}

/* last element inside a column never adds space under the section */
html body.ds .bc-about-area .bc-about-text,
html body.ds .oit-mission-area .oit-mission-dual-thumb,
html body.ds .oit-mission-area .row>[class*="col"]> :last-child {
    margin-bottom: 0 !important;
}

/* Testimonial: no extra margin under the author inside the box */
html body.ds .bc-testimonial-area .ic-testimonial-author-wrap {
    margin-bottom: 0 !important;
}

/* Case-study slider strip: no extra padding under it */
html body.ds .hero-case-study-area .hero-case-study-slider-wrap {
    padding-bottom: 0 !important;
}

/* "Ready to Transform" band (every page): same top/bottom spacing as sections */
html body .bs-leading-area {
    padding-top: var(--ds-section-y) !important;
    padding-bottom: var(--ds-section-y) !important;
}

html body .bs-leading-area .row>[class*="col"]:last-child,
html body .bs-leading-area .bs-leading-thumb {
    margin-bottom: 0 !important;
}

/* Cards whose old CSS was "height: calc(100% - 30px)" to make room for a 30px bottom margin.
   That margin is gone (cards now use row gaps), so they fill the full column height again -
   otherwise the card is 30px shorter than its content and the last line spills out. */
html body.ds .fc-price-area .fc-price-card {
    height: 100% !important;
}

html body.ds .bi-choose-area .bi-choose-item {
    height: 100% !important;
    min-height: 100% !important;
}

/* Neighbouring sections with the SAME background: no colour change marks the boundary, so
   80 + 80px reads as an empty hole. Use one section gap instead - the second section drops its
   top padding. (Rule for future pages: add .ds-same-bg-as-prev to such a section.)
   Homepage: "Industries We Serve" (white) is followed by "Our Products" (white). */
html body.ds .ms-industries-section+.ic-case-area,
html body .ds-same-bg-as-prev {
    padding-top: 0 !important;
}

/* Testimonials: two separate cards (2 per view from 992px, 1 below) instead of one big box */
html body.ds .bc-testimonial-area .bc-testimonial-slider-box {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.ds .bc-testimonial-area .bc-testimonial-active .swiper-slide {
    height: auto !important;
    /* equal-height cards in a row */
}

html body.ds .bc-testimonial-area .bc-testimonial-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--ds-card-pad) !important;
    background: var(--ds-white);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
}

html body.ds .bc-testimonial-area .bc-testimonial-quote {
    margin-bottom: 16px !important;
}

html body.ds .bc-testimonial-area .bc-testimonial-quote svg {
    width: 40px;
    height: 40px;
}

html body.ds .bc-testimonial-area .bc-testimonial-content {
    flex-grow: 1;
}

html body.ds .bc-testimonial-area .bc-testimonial-content p {
    margin: 0 0 24px !important;
}

/* ==========================================================================
   INNER PAGES - same theme as the homepage (first rolled out on Who We Are)
   ========================================================================== */

/* Section backgrounds: put ds-bg-white / ds-bg-soft on each section so they alternate */
html body.ds .ds-bg-white {
    background-color: var(--ds-white) !important;
}

html body.ds .ds-bg-soft {
    background-color: var(--ds-bg-soft) !important;
}

/* Standard section spacing (80 / 64 / 48) for any section - add .ds-section in the HTML
   (used from the Services pages on, so new section types need no CSS) */
html body.ds .ds-section {
    padding-top: var(--ds-section-y) !important;
    padding-bottom: var(--ds-section-y) !important;
}

/* Inside a .ds-section the last row never leaves extra space under the section:
   - grid cards drop their old bottom margins; rows without a Bootstrap g-/gy- gutter
     space their cards with a 24px row gap instead
   - the last paragraph inside a card / item and the last FAQ item add no margin */
html body.ds .ds-section :is(.mes-s4-benefit-card, .conversion-card, .why-box, .transform-card, .ms-support-item, .support-feature-card, .sc-consulting-item, .btp-card, .bs-step-item, .bi-choose-item, .fc-price-card, .mes-sap-capability-card, .mes-sap-capability-main) {
    margin-bottom: 0 !important;
}

html body.ds .ds-section .row:has(> [class*="col"] > :is(.mes-s4-benefit-card, .conversion-card, .why-box, .transform-card, .ms-support-item, .support-feature-card, .sc-consulting-item, .btp-card, .bs-step-item, .bi-choose-item, .fc-price-card, .mes-sap-capability-card, .mes-sap-capability-main)):not([class*=" g-"], [class^="g-"], [class*=" gy-"], [class^="gy-"]) {
    row-gap: 24px;
}

/* cards stacked directly on top of each other in one column (not a grid row): 24px between them */
html body.ds .ds-section :is(.mes-s4-benefit-card, .conversion-card, .why-box, .transform-card, .ms-support-item, .support-feature-card, .sc-consulting-item, .btp-card, .bs-step-item, .bi-choose-item, .fc-price-card, .mes-sap-capability-card, .mes-sap-capability-main)+ :is(.mes-s4-benefit-card, .conversion-card, .why-box, .transform-card, .ms-support-item, .support-feature-card, .sc-consulting-item, .btp-card, .bs-step-item, .bi-choose-item, .fc-price-card, .mes-sap-capability-card, .mes-sap-capability-main) {
    margin-top: 24px !important;
}

html body.ds .ds-section :is([class*="item"], [class*="card"])>p:last-child,
html body.ds .ds-section [class*="item"]:last-child,
html body.ds .ds-section [class*="item"]:last-child p:last-child {
    margin-bottom: 0 !important;
}

/* old "height: calc(100% - 25px)" (made room for a margin that is now gone) */
html body.ds .ds-section .mes-s4-benefit-card {
    height: 100% !important;
}

/* Last block in a text column never adds space under the section (side-by-side layout only;
   when columns stack, that margin is the gap above the image) */
@media (min-width: 992px) {
    html body.ds .oit-mission-content> :last-child {
        margin-bottom: 0 !important;
    }
}

/* ---- Dark inner-page hero (.mes-s4-hero): white text, H1 size, standard label ---- */
body.ds main .mes-s4-hero h1 {
    color: var(--ds-white) !important;
}

body.ds main .mes-s4-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* same 22px label-to-heading gap as the section labels (10px + the H2's 12px top margin);
   the hero H1 has no top margin, so the label carries all 22px */
body.ds .mes-s4-eyebrow {
    margin-bottom: 22px !important;
}

body.ds .mes-s4-feature span {
    font-size: var(--ds-fs-small) !important;
}

/* ---- About block, layout E (Who We Are): text beside the image,
        4 highlight cards in a row underneath (soft boxes on the white section) ---- */
html body.ds .ds-about-head {
    row-gap: 40px;
}

html body.ds .ds-about-head p {
    margin: 0 0 16px !important;
}

html body.ds .ds-about-head .col-lg-6> :last-child {
    margin-bottom: 0 !important;
}

html body.ds .ds-about-media {
    border-radius: var(--ds-radius);
    overflow: hidden;
}

html body.ds .ds-about-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ds-radius) !important;
}

html body.ds .ds-about-highlights {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    margin: 48px 0 0 !important;
}

html body.ds .ds-about-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 !important;
    padding: var(--ds-card-pad);
    background: var(--ds-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--ds-radius);
}

html body.ds .ds-about-item>span:last-child {
    font-size: var(--ds-fs-small);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ds-navy);
}

/* Tablet: image under the text, cards 2 x 2 */
@media (max-width: 991.98px) {
    html body.ds .ds-about-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 40px !important;
    }
}

/* Phone: cards as compact rows (icon left, text right) */
@media (max-width: 575.98px) {
    html body.ds .ds-about-head {
        row-gap: 32px;
    }

    html body.ds .ds-about-highlights {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        margin-top: 32px !important;
    }

    html body.ds .ds-about-item {
        flex-direction: row;
        align-items: center;
    }
}

/* ---- Tick list in the About block: old blue (#005baa) tick icons -> brand blue ---- */
html body.ds .oit-mission-list svg,
html body.ds .oit-mission-list ul li span svg {
    color: var(--ds-blue) !important;
}

html body.ds .oit-mission-list svg path,
html body.ds .oit-mission-list ul li span svg path {
    fill: var(--ds-blue) !important;
}

/* ---- Heading column stays in view while a long card list scrolls past (desktop only).
        Add .ds-sticky-head to the section. First used: Who We Are "Challenges We Solve". ---- */
@media (min-width: 992px) {
    html body.ds .ds-sticky-head .oit-section-box {
        position: sticky;
        top: 120px;
    }
}

/* mirrored version (.ds-cards-left): cards left, heading right — the 56px gap moves to the cards' right side */
@media (min-width: 1600px) {
    html body.ds .ds-cards-left .bs-service-list {
        margin-inline-start: 0;
        margin-inline-end: 56px;
    }
}

/* ---- Vision / Mission cards (same card as "The Mesprosoft Advantage": no hover) ---- */
html body.ds .border-line {
    background-image: none !important;
}

/* Icon-on-top cards (Who We Are Vision / Mission / Values / Principles): same 48px icon chip,
   16px gap and hover glow as the About highlight cards (.ds-about-item). Add .ds-icon-top to the section. */
html body.ds .ds-icon-top .bs-service-card {
    flex-direction: column !important;
    gap: 16px !important;
}

/* old "height: calc(100% - 25px)" made room for a margin that row-gap replaced */
html body.ds .bs-service-area .bs-service-card {
    height: 100% !important;
}

/* ---- "Our Commitment" value boxes: soft fill, 8px, equal padding, hover glow ---- */
html body.ds .ic-choose-area .row {
    row-gap: 24px;
}

html body.ds .ic-choose-item {
    border-radius: var(--ds-radius) !important;
    padding: var(--ds-card-pad) !important;
    margin-bottom: 24px !important;
    border: 1px solid transparent;
}

html body.ds .ic-choose-item:last-child {
    margin-bottom: 0 !important;
}

html body.ds .ic-choose-item>span {
    margin-bottom: 16px !important;
}

/* ---- About Us pages: How We Work (process cards), Leadership (team cards),
        Culture (value cards, boxed lists, career cards) ---- */
/* every one of these cards: 24px padding, thin theme border, no resting shadow
   (8px corners and the hover glow come from the shared CARDS / BOX HOVER lists) */
html body.ds .mes-process-card,
html body.ds .bm-team-item,
html body.ds .mc-funfact-item,
html body.ds .culture-career-card {
    padding: var(--ds-card-pad) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
}

/* Culture value cards: all four white (two used to be solid blue), navy titles;
   no bottom margin (an old phone rule added 24px - the grid gap already spaces them) */
html body.ds .mc-funfact-item {
    background: var(--ds-white) !important;
    margin-bottom: 0 !important;
}

/* text-only column (no list after it): its last paragraph adds no space under the section */
html body.ds .oit-mission-content>.oit-section-box:last-child> :last-child {
    margin-bottom: 0 !important;
}

html body.ds .mc-funfact-item h3 {
    color: var(--ds-navy) !important;
}

/* ---- Icon list (.ds-icon-list): open list, one SMALL icon chip per point, thin dividers.
        Two columns of three on tablet/desktop (fills the text column, starts at its left edge),
        one column on phones. First used: Culture "People Behind the Technology". ---- */
html body.ds .ds-icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 32px;
}

html body.ds .ds-icon-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--ds-line);
    font-size: var(--ds-fs-body);
    line-height: 1.5;
    color: var(--ds-text);
}

/* first row has no space above, last row of each column no divider */
html body.ds .ds-icon-list li:nth-child(3n + 1) {
    padding-top: 0;
}

html body.ds .ds-icon-list li:nth-child(3n) {
    padding-bottom: 0;
    border-bottom: 0;
}

html body.ds .ds-icon-chip-sm i,
html body.ds .bg-list li>span:first-child i {
    font-size: 16px !important;
    color: var(--ds-blue) !important;
}

/* always 24px between the text above and the list (old margin utilities gave 31-46px) */
html body.ds :has(+ .ds-icon-list) {
    margin-bottom: 24px !important;
}

html body.ds :has(+ .ds-icon-list)>p:last-child {
    margin-bottom: 0 !important;
}

/* one column whenever the list itself is narrow (phones, and laptops where the text column
   sits beside the image) - decided by the list's own width, not the screen width */
html body.ds :has(> .ds-icon-list) {
    container-type: inline-size;
}

@container (max-width: 559.98px) {
    html body.ds .ds-icon-list {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    html body.ds .ds-icon-list li:nth-child(n) {
        padding: 14px 0;
        border-bottom: 1px solid var(--ds-line);
    }

    html body.ds .ds-icon-list li:first-child {
        padding-top: 0;
    }

    html body.ds .ds-icon-list li:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* Heading on its own row above a text | list row (Culture "Life at Mesprosoft"): keeps the
   original 35px from heading to body text; text and list then start on the same line */
html body.ds .ds-head-row,
html body.ds .oit-mission-area .container .row>[class*="col"]>.ds-head-row {
    margin-bottom: 35px !important;
    /* beats the "last block in a column: no margin" rule */
}

html body.ds .ds-head-row> :last-child {
    margin-bottom: 0 !important;
}

/* boxed lists: an old 32px top margin (tablet/phone only) added to the normal gap above them */
html body.ds .bg-list {
    margin-top: 0 !important;
}

/* value cards now have an icon chip on top: content starts at the top, 16px icon -> title
   (same as the Vision / About cards) */
html body.ds .mc-funfact-item {
    justify-content: flex-start !important;
}

html body.ds .mc-funfact-item>.ds-icon-chip {
    margin-bottom: 16px !important;
}

html body.ds .mc-funfact-item p {
    color: var(--ds-text) !important;
}

/* Career cards: button pinned to the bottom so all three line up */
html body.ds .culture-career-card {
    display: flex !important;
    flex-direction: column !important;
}

html body.ds .culture-career-card .culture-career-btn {
    margin-top: auto !important;
}

/* icon on top of the card: 16px to the title (same as the Vision / About cards) */
html body.ds .mes-process-icon,
html body.ds .culture-career-icon {
    margin-bottom: 16px !important;
}

/* Team cards: 20px from photo to name (same as the Products cards), name in navy
   (not black link colour), role as small muted text */
html body.ds .bm-team-thumb {
    margin-bottom: 20px !important;
}

html body.ds .bm-team-info {
    margin-top: 0 !important;
}

/* old 30px bottom margin + height:100% stretched the card past its content - grid gap spaces them */
html body.ds .bm-team-item {
    margin-bottom: 0 !important;
}

/* hover = card glow only: no photo zoom, name/role keep their colours, no accent bar on process cards */
html body.ds .bm-team-item:hover .bm-team-thumb img {
    transform: none !important;
}

html body.ds .bm-team-item:hover .bm-team-title,
html body.ds .bm-team-item:hover .bm-team-title a {
    color: var(--ds-navy) !important;
}

html body.ds .bm-team-item:hover .bm-team-info span {
    color: var(--ds-muted) !important;
}

html body.ds .mes-process-card::before {
    display: none !important;
}

html body.ds .bm-team-title {
    margin: 0 0 4px !important;
}

html body.ds .bm-team-title a {
    color: inherit !important;
}

html body.ds .bm-team-info span {
    font-size: var(--ds-fs-small) !important;
    font-weight: 400 !important;
    color: var(--ds-muted) !important;
}

/* Boxed tick lists (.bg-list): same box as other cards - 8px, 24px padding, theme border,
   no lift (glow on hover); the icon uses the SMALL chip */
html body.ds .bg-list li {
    padding: var(--ds-card-pad) !important;
    gap: 16px !important;
    border-color: var(--ds-line) !important;
    box-shadow: none !important;
}

/* ---- Services pages (overview, S/4HANA Implementation + Conversion, Application Support,
        Specific Consulting, SAP BTP) ---- */
/* all their cards: white, thin theme border, 24px padding, no resting shadow
   (8px corners + hover glow come from the shared CARDS / BOX HOVER lists) */
html body.ds .mes-s4-benefit-card,
html body.ds .conversion-card,
html body.ds .why-box,
html html body.ds .transform-card,
html body.ds .ms-support-item,
html body.ds .support-feature-card,
html body.ds .sc-highlight,
html body.ds .sc-consulting-item,
html body.ds .btp-card,
html body.ds .bs-step-item {
    padding: var(--ds-card-pad) !important;
    background: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
}

/* capability cards hold an edge-to-edge image: no padding, just the frame */
html body.ds .mes-sap-capability-main,
html body.ds .mes-sap-capability-card {
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Capability card (.ds-cap-card), first used: Specific Consulting "SAP Expertise Where You Need It Most".
   Photo on top (same 16:9 crop on every card), icon chip sitting on the photo's bottom edge,
   then title, text and optional .ds-tag-list. Cards in a row share one height. */
html body.ds .ds-cap-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ds-white);
    border: 1px solid var(--ds-line);
    overflow: hidden;
}

html body.ds .ds-cap-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

html body.ds .ds-cap-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

html body.ds .ds-cap-body {
    position: relative;
    flex: 1;
    padding: 0 var(--ds-card-pad) var(--ds-card-pad);
}

html body.ds .ds-cap-body>.ds-icon-chip {
    display: flex !important;
    margin: -24px 0 16px !important;
    position: relative;
    box-shadow: 0 0 0 4px var(--ds-white);
}

html body.ds .ds-cap-body h3 {
    margin-bottom: 10px;
}

html body.ds .ds-cap-body p {
    margin-bottom: 12px;
}

html body.ds .ds-cap-body>p:last-child {
    margin-bottom: 0 !important;
}

html body.ds .ds-cap-body .ds-tag-list {
    margin-top: 16px !important;
}

/* icon on top of a card: 16px to the title */
html body.ds .mes-s4-benefit-icon,
html body.ds .btp-icon,
html body.ds .support-icon {
    margin-bottom: 16px !important;
}

/* S/4HANA Implementation "Why S/4HANA" Side-by-Side (No empty space) */
@media (min-width: 992px) {
    html body.ds section.mes-why-ser:has(.mes-s4-why-content) .row.align-items-center {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    html body.ds section.mes-why-ser:has(.mes-s4-why-content) .row.align-items-center>[class*="col-"]:first-child:not(:only-child) {
        width: auto !important;
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        margin-bottom: 0 !important;
        padding-right: 24px !important;
    }

    html body.ds section.mes-why-ser:has(.mes-s4-why-content) .row.align-items-center>[class*="col-"]:last-child:not(:only-child) {
        width: auto !important;
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
        padding-left: 12px !important;
    }

    html body.ds section.mes-why-ser:has(.mes-s4-why-content) .row.align-items-center>[class*="col-"]:last-child>.row>[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    html body.ds .mes-why-ser:has(.mes-s4-why-content) .oit-section-title {
        max-width: 100% !important;
    }

    html body.ds .mes-s4-why-content {
        max-width: 100% !important;
    }
}

.mes-s4-benefit-checklist li {
    font-size: 15px;
    color: var(--ds-text, #3b4556);
    line-height: 1.5;
}

.mes-s4-benefit-checklist li i {
    color: var(--ds-blue, #0762e5);
    font-size: 14px;
    flex-shrink: 0;
}

/* S/4HANA Conversion: service and partner cards have an icon chip on top, centred */
html body.ds :is(.conversion-card, .why-box)>.ds-icon-chip {
    display: flex !important;
    margin: 0 auto 16px !important;
}

/* Sticky heading column extras (Conversion "Journey" + "Risk Management", same layout as
   Who We Are "Challenges"): a photo under the heading, and a row of small label tags */
html body.ds .ds-sticky-media {
    margin-top: 32px;
}

html body.ds .ds-sticky-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ds-radius) !important;
}

html body.ds .ds-tag-list {
    list-style: none;
    margin: 24px 0 0 !important;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body.ds .ds-tag-list li {
    margin: 0;
    font-size: var(--ds-fs-label);
    line-height: 1.4;
    color: var(--ds-blue);
    background: var(--ds-blue-tint);
    border-radius: var(--ds-radius);
    padding: 5px 14px;
}

/* benefit cards are centre-aligned, so their icon chip is centred too */
html body.ds .mes-s4-benefit-card>.mes-s4-benefit-icon {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Process timeline (S/4HANA Implementation, Specific Consulting): step icons are now 48px chips,
   so the connecting line and its dots move to the chip centre (8px top padding + 24px) */
html body.ds .mes-s4-process-icon {
    display: flex !important;
    margin: 0 auto 16px !important;
}

html body.ds .mes-s4-process-line {
    top: 32px !important;
}

html body.ds .mes-s4-process-item::before,
html body.ds .mes-s4-process-item::after {
    top: 29px !important;
}

/* dark "Talk to Our SAP Experts" block: stays dark (palette navy), white text */
html body.ds .mes-s4-cta {
    background: var(--ds-navy) !important;
    background-image: none !important;
}

body.ds main .mes-s4-cta h2,
body.ds main .mes-s4-cta h3 {
    color: var(--ds-white) !important;
}

body.ds main .mes-s4-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* FAQ accordions: theme border colour */
html body.ds .sap-faq-section .accordion-item {
    border-color: var(--ds-line) !important;
    box-shadow: none !important;
}

/* FAQ question + answer colours (open question was off-palette #0d113a on a gradient,
   answers Bootstrap near-black / slate grey); corners come from the 8px item */
html body.ds .sap-faq-section .accordion-button {
    color: var(--ds-navy) !important;
    border-radius: 0 !important;
}

html body.ds .sap-faq-section .accordion-button:not(.collapsed) {
    background: var(--ds-bg-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* FAQ Accordion Toggle Arrow Chip - Brand Blue on open, soft tint on collapsed */
html body.ds .accordion-button::after,
html body.ds .faq-accordion .accordion-button::after {
    background-color: var(--ds-blue-tint) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230762e5'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--ds-radius) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px !important;
    transition: transform 0.25s ease, background-color 0.25s ease !important;
    margin-left: auto !important;
}

html body.ds .accordion-button:not(.collapsed)::after,
html body.ds .faq-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--ds-blue) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    transform: rotate(180deg) !important;
}

html body.ds .sap-faq-section .accordion-body,
body.ds main .sap-faq-section .accordion-body p {
    color: var(--ds-text) !important;
}

/* photo beside the FAQ: no shadow, no hover lift (same as every other image) */
html body.ds .mes-s4-cta-image img,
html body.ds .mes-s4-cta-image img:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* module tags ("SAP FI", "SAP SD"...): the standard label style */
html body.ds .mes-sap-module-list span {
    font-size: var(--ds-fs-label) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--ds-blue) !important;
    background: var(--ds-blue-tint) !important;
    border: 0 !important;
    border-radius: var(--ds-radius) !important;
    padding: 5px 14px !important;
}

/* emphasised words in service text: navy (was near-black #0f172a) */
body.ds main .ds-section strong {
    color: var(--ds-navy) !important;
}

/* process timeline: no leftover halo ring around the chips; line in the theme's light blue */
html body.ds .mes-s4-process-icon {
    box-shadow: none !important;
}

html body.ds .mes-s4-process-line {
    background: var(--ds-blue-soft) !important;
}

/* old hover leftovers: consulting card arrow no longer nudges */
html body.ds .sc-consulting-item:hover .sc-arrow {
    transform: none !important;
}

/* ==========================================================================
   ICON CHIPS - one standard for every icon that sits on a coloured box
   ----------------------------------------------------------------------------
   STANDARD  48px square, 8px corners, light-blue box, brand-blue 20px icon - card / feature icons
   SMALL     32px, same shape, 16px icon - only beside a single line of text
             (on dark backgrounds: white icon on a soft white tint)
   The chip never changes on hover; the card around it gets the hover glow.
   Arrow / slider buttons are NOT chips - they use the ICON button style.
   Add new chip classes to these lists when theming a page.
   ========================================================================== */
html body.ds .ds-icon-chip,
html body.ds .ds-about-icon,
html body.ds .bs-service-icon,
html body.ds .ms-ind-icon-wrap,
html body.ds .ic-choose-item>span,
html body.ds .mes-process-icon,
html body.ds .culture-career-icon,
html body.ds .mes-s4-benefit-icon,
html body.ds .btp-icon,
html body.ds .support-icon,
html body.ds .mes-s4-process-icon,
html body.ds .mes-framework-icon,
html body.ds .mes-commitment-icon,
html body.ds .mes-challenge-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--ds-blue) !important;
    background: var(--ds-blue-tint) !important;
    border: 0 !important;
    border-radius: var(--ds-radius) !important;
    /* Strictly 8px */
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

html body.ds .ds-icon-chip i,
html body.ds .ds-about-icon i,
html body.ds .bs-service-icon i,
html body.ds .ic-choose-item>span i,
html body.ds .mes-process-icon i,
html body.ds .culture-career-icon i,
html body.ds .mes-s4-benefit-icon i,
html body.ds .btp-icon i,
html body.ds .support-icon i,
html body.ds .mes-s4-process-icon i,
html body.ds .mes-framework-icon i,
html body.ds .mes-commitment-icon i,
html body.ds .mes-challenge-icon i {
    font-size: 20px !important;
    color: inherit !important;
    transition: color 0.25s ease !important;
}

html body.ds .ds-icon-chip svg,
html body.ds .ms-ind-icon-wrap svg,
html body.ds .ic-choose-item>span svg,
html body.ds .mes-s4-benefit-icon svg,
html body.ds .btp-icon svg,
html body.ds .support-icon svg,
html body.ds .mes-s4-process-icon svg,
html body.ds .mes-framework-icon svg,
html body.ds .mes-commitment-icon svg,
html body.ds .mes-challenge-icon svg {

    color: inherit !important;
    stroke: currentColor !important;
    transition: stroke 0.25s ease, color 0.25s ease !important;
}

/* Card Hover -> Icon chip turns Brand Blue (#0762e5) with Pure White (#ffffff) icon */
html body.ds .ms-ind-card:hover .ms-ind-icon-wrap,
html body.ds .bs-service-card:hover .bs-service-icon,
html body.ds .ic-choose-item:hover>span,
html body.ds .ds-about-item:hover .ds-about-icon,
html body.ds .mes-process-card:hover .mes-process-icon,
html body.ds .culture-career-card:hover .culture-career-icon,
html body.ds .bg-list li:hover>span:first-child,
html body.ds .mes-s4-benefit-card:hover .mes-s4-benefit-icon,
html body.ds .mes-s4-process-item:hover .mes-s4-process-icon,
html body.ds .mes-s4-process-icon:hover,
html body.ds .conversion-card:hover .ds-icon-chip,
html body.ds .why-box:hover .ds-icon-chip,
html body.ds .transform-card:hover .ds-icon-chip,
html body.ds .ms-support-item:hover .support-icon,
html body.ds .support-feature-card:hover .support-icon,
html body.ds .btp-card:hover .btp-icon,
html body.ds .ds-cap-card:hover .ds-icon-chip,
html body.ds .bi-choose-item:hover .ds-icon-chip,
html body.ds .mes-framework-card:hover .mes-framework-icon,
html body.ds .mes-commitment-card:hover .mes-commitment-icon,
html body.ds .mes-challenge-card:hover .mes-challenge-icon {
    background: var(--ds-blue) !important;
    /* #0762e5 */
    color: var(--ds-white) !important;
    /* #ffffff */
    box-shadow: none !important;
    transform: none !important;
}

html body.ds .ms-ind-card:hover .ms-ind-icon-wrap svg,
html body.ds .bs-service-card:hover .bs-service-icon svg,
html body.ds .ic-choose-item:hover>span svg,
html body.ds .ds-about-item:hover .ds-about-icon svg,
html body.ds .mes-process-card:hover .mes-process-icon svg,
html body.ds .culture-career-card:hover .culture-career-icon svg,
html body.ds .bg-list li:hover>span:first-child svg,
html body.ds .mes-s4-benefit-card:hover .mes-s4-benefit-icon svg,
html body.ds .mes-s4-benefit-card:hover .mes-s4-benefit-icon svg path,
html body.ds .mes-s4-benefit-card:hover .mes-s4-benefit-icon svg circle,
html body.ds .mes-s4-benefit-card:hover .mes-s4-benefit-icon svg line,
html body.ds .mes-s4-process-item:hover .mes-s4-process-icon svg,
html body.ds .mes-s4-process-item:hover .mes-s4-process-icon svg path,
html body.ds .mes-s4-process-item:hover .mes-s4-process-icon svg circle,
html body.ds .mes-s4-process-item:hover .mes-s4-process-icon svg line,
html body.ds .mes-s4-process-icon:hover svg,
html body.ds .mes-s4-process-icon:hover svg path,
html body.ds .mes-s4-process-icon:hover svg circle,
html body.ds .mes-s4-process-icon:hover svg line,
html body.ds .conversion-card:hover .ds-icon-chip svg,
html body.ds .why-box:hover .ds-icon-chip svg,
html body.ds .transform-card:hover .ds-icon-chip svg,
html body.ds .ms-support-item:hover .support-icon svg,
html body.ds .support-feature-card:hover .support-icon svg,
html body.ds .support-feature-card:hover .support-icon svg path,
html body.ds .support-feature-card:hover .support-icon svg circle,
html body.ds .btp-card:hover .btp-icon svg,
html body.ds .btp-card:hover .btp-icon svg path,
html body.ds .btp-card:hover .btp-icon svg circle,
html body.ds .btp-card:hover .btp-icon svg line,
html body.ds .ds-cap-card:hover .ds-icon-chip svg,
html body.ds .mes-framework-card:hover .mes-framework-icon svg,
html body.ds .mes-commitment-card:hover .mes-commitment-icon svg,
html body.ds .mes-challenge-card:hover .mes-challenge-icon svg {
    color: var(--ds-white) !important;
    stroke: var(--ds-white) !important;
}

html body.ds .ms-ind-card:hover .ms-ind-icon-wrap i,
html body.ds .bs-service-card:hover .bs-service-icon i,
html body.ds .ic-choose-item:hover>span i,
html body.ds .ds-about-item:hover .ds-about-icon i,
html body.ds .mes-process-card:hover .mes-process-icon i,
html body.ds .culture-career-card:hover .culture-career-icon i,
html body.ds .mes-framework-card:hover .mes-framework-icon i,
html body.ds .mes-commitment-card:hover .mes-commitment-icon i,
html body.ds .mes-challenge-card:hover .mes-challenge-icon i {
    color: var(--ds-white) !important;
}

/* Arrow Colors across Cards & Links: Brand Blue base, White on hover/buttons */
html body.ds .ms-ind-arrow,
html body.ds .oit-card-arrow,
html body.ds .sc-arrow,
html body.ds .hero-case-cta-badge i,
html body.ds .ds-arrow {
    color: var(--ds-blue) !important;
    stroke: var(--ds-blue) !important;
    transition: color 0.2s ease, stroke 0.2s ease, transform 0.2s ease !important;
}

html body.ds .ms-ind-card:hover .ms-ind-arrow,
html body .ms-ind-card:hover .ms-ind-arrow,
html body.ds .sc-consulting-item:hover .sc-arrow,
html body .sc-consulting-item:hover .sc-arrow,
html body.ds .hero-case-item:hover .hero-case-cta-badge i,
html body .hero-case-item:hover .hero-case-cta-badge i,
html body.ds .oit-service-card:hover .oit-card-arrow,
html body .oit-service-card:hover .oit-card-arrow,
html body.ds .oit-card-arrow:hover,
html body .oit-card-arrow:hover {
    background-color: var(--ds-blue, #0762e5) !important;
    border-color: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translate(2px, -2px) !important;
}

html body.ds .ms-ind-card:hover .ms-ind-arrow svg,
html body .ms-ind-card:hover .ms-ind-arrow svg,
html body.ds .ms-ind-card:hover .ms-ind-arrow svg path,
html body .ms-ind-card:hover .ms-ind-arrow svg path,
html body.ds .sc-consulting-item:hover .sc-arrow svg,
html body .sc-consulting-item:hover .sc-arrow svg,
html body.ds .sc-consulting-item:hover .sc-arrow svg path,
html body .sc-consulting-item:hover .sc-arrow svg path,
html body.ds .oit-service-card:hover .oit-card-arrow svg,
html body .oit-service-card:hover .oit-card-arrow svg,
html body.ds .oit-service-card:hover .oit-card-arrow svg path,
html body .oit-service-card:hover .oit-card-arrow svg path,
html body.ds .oit-card-arrow:hover svg,
html body .oit-card-arrow:hover svg,
html body.ds .oit-card-arrow:hover svg path,
html body .oit-card-arrow:hover svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Megamenu Featured Card Arrow Chip & Title Spacing */
html body.ds .oit-card-arrow,
html body .oit-card-arrow {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    inset-inline-end: 14px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: var(--ds-blue-tint, #eaf2fd) !important;
    border: 1px solid rgba(7, 98, 229, 0.15) !important;
    color: var(--ds-blue, #0762e5) !important;
    stroke: var(--ds-blue, #0762e5) !important;
    box-shadow: none !important;
    z-index: 2 !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

html body.ds .oit-card-arrow svg,
html body .oit-card-arrow svg {
    width: 11px !important;
    height: 11px !important;
    display: block !important;
    fill: currentColor !important;
    transition: fill 0.2s ease, color 0.2s ease !important;
}

html body.ds .oit-card-arrow svg path,
html body .oit-card-arrow svg path {
    fill: currentColor !important;
    transition: fill 0.2s ease !important;
}

html body.ds .oit-service-card__title,
html body .oit-service-card__title {
    padding-right: 36px !important;
    white-space: normal !important;
}

/* SMALL chip (32px) */
html body.ds .ds-icon-chip-sm,
html body.ds .mes-s4-feature-icon,
html body.ds .bg-list li>span:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--ds-blue) !important;
    background: var(--ds-blue-tint) !important;
    border: 0 !important;
    border-radius: var(--ds-radius) !important;
}

html body.ds .ds-icon-chip-sm svg,
html body.ds .mes-s4-feature-icon svg,
html body.ds .bg-list li>span:first-child svg {
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
}

/* small chip on a dark background (inner-page hero feature line) */
html body.ds .mes-s4-hero .mes-s4-feature-icon {
    color: var(--ds-white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

html body.ds .mes-s4-hero .mes-s4-feature-icon svg {
    stroke: var(--ds-white) !important;
}

/* ==========================================================================
   FULL-SCREEN FIRST VIEW (homepage) - the hero + the key-figures strip together
   fill exactly one screen. Wrap both in .ds-first-screen; the hero (.ds-hero-full)
   grows to take whatever height the strip leaves, and its content is centred.
   The hero's own top padding (135px) already clears the fixed 71px header, so the
   content sits centred in the visible area below it. On phones / tablets the
   content is taller than the screen anyway, so nothing changes there.
   ========================================================================== */
/* html body.ds .ds-first-screen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
} */

html body.ds .ds-first-screen>.ds-hero-full {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html body.ds .ds-hero-full>.container {
    width: 100%;
}

html body.ds .ds-first-screen>.trust {
    flex: 0 0 auto;
}

/* short desktop screens (laptops): less space above/below the hero content so the
   key-figures strip still fits on the first screen (71px = fixed header) */
@media (min-width: 992px) and (max-height: 820px) {
    html body.ds .ds-hero-full {
        padding-top: calc(71px + 20px) !important;
        padding-bottom: 20px !important;
    }

    html body.ds .ds-hero-full .ic-hero-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (min-width: 992px) and (max-height: 740px) {
    html body.ds .ds-hero-full {
        padding-top: calc(71px + 12px) !important;
        padding-bottom: 12px !important;
    }

    html body.ds .ds-hero-full .ic-hero-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   UNIFIED CARD ARCHITECTURE
   Consistent 8px radius, 1px border, 24px padding, subtle elevation & hover
   ========================================================================== */
html body .ms-ind-card,
html body .bs-service-card,
html body .mes-process-card,
html body .bm-team-item,
html body .mc-funfact-item,
html body .culture-career-card,
html body .mes-s4-benefit-card,
html body .conversion-card,
html body .why-box,
html body .transform-card,
html body .ms-support-item,
html body .support-feature-card,
html body .sc-highlight,
html body .sc-consulting-item,
html body .btp-card,
html body .bs-step-item,
html body .mes-sap-capability-main,
html body .mes-sap-capability-card,
html body .ds-cap-card,
html body .fc-price-card,
html body .bi-choose-item,
html body .ic-case-card,
html body .bc-testimonial-item,
html body .industry-card-wrap,
html body .mes-contact-card,
html body .job-card,
html body .ds-about-item {
    background-color: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: var(--ds-card-pad, 24px) !important;
    box-shadow: 0 2px 8px rgba(21, 31, 48, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-sizing: border-box !important;
}

/* Case Study 6 Key Points inside Industry Tabs (Tab 2) */
html body .case-study-point-item,
.case-study-point-item {
    background-color: #ffffff !important;
    border: 1px solid #e3e7ee !important;
    border-radius: var(--ds-radius, 8px) !important;
    padding: 16px 18px !important;
    box-shadow: 0 2px 6px rgba(21, 31, 48, 0.03) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body .case-study-point-item:hover,
.case-study-point-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(21, 31, 48, 0.05) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
}

html body .case-study-point-item .point-icon,
.case-study-point-item .point-icon {
    color: var(--ds-blue, #0762e5) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

html body .case-study-point-item .point-text,
.case-study-point-item .point-text {
    color: #151f30 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    font-family: var(--oit-ff-body) !important;
}

/* Card Hover Elevation */
html body .ms-ind-card:hover,
html body .bs-service-card:hover,
html body .mes-process-card:hover,
html body .bm-team-item:hover,
html body .mc-funfact-item:hover,
html body .culture-career-card:hover,
html body .mes-s4-benefit-card:hover,
html body .conversion-card:hover,
html body .why-box:hover,
html body .transform-card:hover,
html body .ms-support-item:hover,
html body .support-feature-card:hover,
html body .sc-highlight:hover,
html body .sc-consulting-item:hover,
html body .btp-card:hover,
html body .bs-step-item:hover,
html body .mes-sap-capability-main:hover,
html body .mes-sap-capability-card:hover,
html body .ds-cap-card:hover,
html body .fc-price-card:hover,
html body .bi-choose-item:hover,
html body .ic-case-card:hover,
html body .bc-testimonial-item:hover,
html body .industry-card-wrap:hover,
html body .mes-contact-card:hover,
html body .job-card:hover,
html body .ds-about-item:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

/* ==========================================================================
   FEATURE / MISSION LIST CARDS (.bg-list, .oit-mission-list)
   Clean horizontal feature cards: Left icon chip + right title & description
   ========================================================================== */
html body .bg-list.oit-mission-list,
html body.ds .bg-list.oit-mission-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

html body .bg-list.oit-mission-list ul,
html body.ds .bg-list.oit-mission-list ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (max-width: 767.98px) {

    html body .bg-list.oit-mission-list ul,
    html body.ds .bg-list.oit-mission-list ul {
        grid-template-columns: 1fr !important;
    }
}

html body .bg-list li,
html body.ds .bg-list li,
html body .bg-list.oit-mission-list ul li,
html body.ds .bg-list.oit-mission-list ul li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background-color: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 20px 22px !important;
    box-shadow: 0 2px 10px rgba(21, 31, 48, 0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body .bg-list li:hover,
html body.ds .bg-list li:hover,
html body .bg-list.oit-mission-list ul li:hover,
html body.ds .bg-list.oit-mission-list ul li:hover {
    transform: translateY(-3px) !important;
    border-color: var(--ds-blue) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body .bg-list li>span:first-child,
html body.ds .bg-list li>span:first-child,
html body .bg-list.oit-mission-list ul li>span:first-child,
html body.ds .bg-list.oit-mission-list ul li>span:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
    margin: 2px 0 0 0 !important;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

html body .bg-list li:hover>span:first-child,
html body.ds .bg-list li:hover>span:first-child,
html body .bg-list.oit-mission-list ul li:hover>span:first-child,
html body.ds .bg-list.oit-mission-list ul li:hover>span:first-child {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

html body .bg-list li>span:first-child i,
html body.ds .bg-list li>span:first-child i {
    font-size: 18px !important;
    color: inherit !important;
    line-height: 1 !important;
    transition: color 0.25s ease !important;
}

html body .bg-list li:hover>span:first-child i,
html body.ds .bg-list li:hover>span:first-child i {
    color: #ffffff !important;
}

html body .bg-list li>span:first-child svg,
html body.ds .bg-list li>span:first-child svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
    color: inherit !important;
    transition: fill 0.25s ease, color 0.25s ease !important;
}

html body .bg-list li:hover>span:first-child svg,
html body.ds .bg-list li:hover>span:first-child svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

html body .bg-list li:hover>span:first-child svg path,
html body.ds .bg-list li:hover>span:first-child svg path {
    fill: #ffffff !important;
}

html body .bg-list li .dis-b,
html body.ds .bg-list li .dis-b {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body .bg-list li .dis-b span,
html body.ds .bg-list li .dis-b span,
html body .bg-list li>span:nth-child(2),
html body.ds .bg-list li>span:nth-child(2) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ds-navy) !important;
    margin-bottom: 5px !important;
    line-height: 1.35 !important;
    display: block !important;
}

html body .bg-list li .dis-b p,
html body.ds .bg-list li .dis-b p {
    font-size: 15.5px !important;
    color: var(--ds-text) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Hero Case Study Carousel Cards - Clean poster presentation, zero border, zero card padding */
html body .hero-case-item,
html body.ds .hero-case-item {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: var(--ds-radius, 8px) !important;
}

html body .hero-case-poster,
html body.ds .hero-case-poster {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: var(--ds-radius, 8px) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(13, 17, 58, 0.08) !important;
    aspect-ratio: 1060 / 1484;
}

html body .hero-case-poster img,
html body.ds .hero-case-poster img {
    border-radius: var(--ds-radius, 8px) !important;
    border: none !important;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body .hero-case-item:hover,
html body.ds .hero-case-item:hover {
    transform: translateY(-6px) !important;
    border: none !important;
    box-shadow: none !important;
}

html body .hero-case-item:hover .hero-case-poster,
html body.ds .hero-case-item:hover .hero-case-poster {
    box-shadow: 0 14px 28px rgba(0, 81, 164, 0.16) !important;
}

/* Card Titles */
html body .ms-ind-card h3,
html body .ms-ind-card .ms-ind-title,
html body .bs-service-card h3,
html body .bi-choose-item h3,
html body .bi-choose-title,
html body .ic-case-card h3,
html body .ic-case-title,
html body .mes-s4-benefit-card h3,
html body .conversion-card h3,
html body .why-box h3,
html body .transform-card h3,
html body .ms-support-item h3,
html body .support-feature-card h3,
html body .sc-consulting-item h3,
html body .btp-card h3,
html body .bs-step-item h3,
html body .ds-cap-card h3,
html body .industry-card-wrap h2,
html body .industry-card-wrap h3,
html body .mes-contact-card h3,
html body .bm-team-item h3,
html body .bm-team-title,
html body .culture-career-card h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--ds-navy) !important;
    margin-bottom: 12px !important;
}

/* Card Descriptions / Body Text */
html body .ms-ind-card p,
html body .ms-ind-desc,
html body .bs-service-card p,
html body .bi-choose-item p,
html body .ic-case-card p,
html body .mes-s4-benefit-card p,
html body .conversion-card p,
html body .why-box p,
html body .transform-card p,
html body .ms-support-item p,
html body .support-feature-card p,
html body .sc-consulting-item p,
html body .btp-card p,
html body .bs-step-item p,
html body .ds-cap-card p,
html body .industry-card-wrap p,
html body .industry-card-wrap li,
html body .mes-contact-card p,
html body .culture-career-card p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--ds-text) !important;
}

/* Card Buttons pinned to bottom */
html body .bi-choose-item a[class*="btn"],
html body .bi-choose-item button,
html body .ic-case-card .ic-case-btn,
html body .culture-career-card .culture-career-btn,
html body .bs-service-card a[class*="btn"],
html body .mes-contact-card .mes-contact-action-btn {
    margin-top: auto !important;
}

/* ==========================================================================
   INDUSTRY OVERVIEW COMPARISON CARDS (.auto-challenges, .auto-why)
   Clean white cards, 8px radius, no dark gradients, no underlines, no ghost outlines
   ========================================================================== */
html body.ds .auto-challenges,
html body .auto-challenges,
html body.ds .auto-why,
html body .auto-why {
    background: var(--ds-white) !important;
    background-image: none !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    color: var(--ds-text) !important;
}

html body.ds .auto-challenges:hover,
html body .auto-challenges:hover,
html body.ds .auto-why:hover,
html body .auto-why:hover {
    transform: translateY(-4px) !important;
    border-color: var(--ds-blue) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body.ds .auto-challenges .card-top-header,
html body .auto-challenges .card-top-header,
html body.ds .auto-why .card-top-header,
html body .auto-why .card-top-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--ds-line) !important;
}

html body.ds .auto-challenges .card-header-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ds-radius) !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

html body.ds .auto-why .card-header-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

html body.ds .auto-challenges h2,
html body .auto-challenges h2,
html body.ds .auto-why h2,
html body .auto-why h2 {
    color: var(--ds-navy) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

html body.ds .auto-white-line,
html body .auto-white-line,
html body.ds .auto-line,
html body .auto-line,
html body.ds .auto-car-outline,
html body .auto-car-outline {
    display: none !important;
}

html body.ds .auto-challenges ul,
html body .auto-challenges ul,
html body.ds .auto-why ul,
html body .auto-why ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html body.ds .auto-challenges li,
html body .auto-challenges li,
html body.ds .auto-why li,
html body .auto-why li {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ds-text) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.ds .auto-challenges li::before,
html body .auto-challenges li::before {
    content: "" !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: #fff1f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5v5M9 13h.01' stroke='%23e11d48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

html body.ds .auto-why li::before,
html body .auto-why li::before {
    content: "" !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23005baa'/%3E%3Cpath d='M5.5 9L8 11.5L12.5 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   UNIFIED FORM SYSTEM - Identical Styling on All Forms Across Mesprosoft
   (Contact Us, Request Demo, Apply Now, ROI Template, Lead Modals)
   ========================================================================== */
html body .bi-contact-form,
html body .mespro-job-form-wrapper,
html body .mes-lead-modal-box,
html body .contact-form-box,
html body .roi-form-card,
html body .standard-form-wrapper {
    background: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 20px rgba(21, 31, 48, 0.04) !important;
}

@media (max-width: 767.98px) {

    html body .bi-contact-form,
    html body .mespro-job-form-wrapper,
    html body .mes-lead-modal-box,
    html body .contact-form-box,
    html body .roi-form-card {
        padding: 24px 20px !important;
    }
}

/* Form Section Headers */
html body .mespro-job-form-header h2,
html body .bi-contact-form h2,
html body .mes-lead-modal-box h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ds-navy) !important;
    margin-bottom: 8px !important;
}

html body .mespro-job-form-header p,
html body .bi-contact-form p,
html body .mes-lead-modal-box p {
    font-size: 15px !important;
    color: var(--ds-muted) !important;
    margin-bottom: 24px !important;
}

html body .mespro-section-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

html body .mespro-section-heading>span {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .mespro-section-heading h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ds-navy) !important;
    margin: 0 0 4px !important;
}

html body .mespro-section-heading p {
    font-size: 14px !important;
    color: var(--ds-muted) !important;
    margin: 0 !important;
}

/* Form Labels */
html body label,
html body .bi-contact-input-box label,
html body .mespro-form-field label,
html body .mes-lead-form-field label {
    font-family: var(--oit-ff-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--ds-navy) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

html body label b,
html body label .required,
html body .mespro-form-field label b {
    color: var(--ds-blue) !important;
    font-weight: 600 !important;
}

/* Form Input Elements */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="password"],
html body select,
html body .nice-select,
html body textarea {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 16px !important;
    font-family: var(--oit-ff-body) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: var(--ds-navy) !important;
    background-color: var(--ds-white) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="number"]:focus,
html body input[type="password"]:focus,
html body select:focus,
html body .nice-select:focus,
html body textarea:focus {
    border-color: var(--ds-blue) !important;
    box-shadow: 0 0 0 3px rgba(7, 98, 229, 0.12) !important;
    outline: none !important;
}

html body input::placeholder,
html body textarea::placeholder {
    color: var(--ds-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

html body textarea {
    min-height: 120px !important;
    height: auto !important;
    padding: 12px 16px !important;
    resize: vertical !important;
}

html body .nice-select {
    line-height: 46px !important;
    padding-left: 16px !important;
    padding-right: 36px !important;
}

html body .nice-select::after {
    border-bottom: 2px solid var(--ds-navy) !important;
    border-right: 2px solid var(--ds-navy) !important;
    right: 18px !important;
}

/* File Upload & Consent Box */
html body .mespro-resume-box {
    border: 1.5px dashed var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-bg-soft) !important;
    padding: 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

html body .mespro-resume-box:hover {
    border-color: var(--ds-blue) !important;
    background: var(--ds-blue-tint) !important;
}

html body .mespro-consent {
    padding: 14px !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-bg-soft) !important;
    color: var(--ds-text) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Form Action Buttons */
html body button[type="submit"],
html body input[type="submit"],
html body .mespro-submit-btn,
html body .bi-contact-form .oit-btn-teal,
html body .mespro-job-form-wrapper button[type="submit"] {
    min-height: 48px !important;
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-blue) !important;
    border: 1px solid var(--ds-blue) !important;
    color: var(--ds-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html body button[type="submit"]:hover,
html body input[type="submit"]:hover,
html body .mespro-submit-btn:hover,
html body .bi-contact-form .oit-btn-teal:hover {
    background: var(--ds-blue-dark) !important;
    border-color: var(--ds-blue-dark) !important;
    color: var(--ds-white) !important;
}

/* Appointment & Consultation Form Wrap (CTA Tabs, Case Studies, Modal, Industry Pages) */
html body.ds .appointment-contact-wrap,
html body .appointment-contact-wrap,
html body.ds .mes-roi-form,
html body .mes-roi-form {
    background-color: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* CTA Tabs Form: Match height with the left points grid on desktop */
@media (min-width: 992px) {
    html body .mes-s4-cta .tab-pane .row {
        align-items: stretch !important;
    }

    html body .mes-s4-cta .appointment-contact-wrap {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    html body .mes-s4-cta .appointment-contact-wrap form {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        justify-content: space-between !important;
    }

    html body .mes-s4-cta .appointment-contact-wrap .submit-btn {
        margin-top: auto !important;
    }
}

/* About Accordion: Hide redundant manual plus/cross icon spans */
html body .bc-about-accordion .accordion-icon,
html body.ds .bc-about-accordion .accordion-icon {
    display: none !important;
}

html body.ds .mes-roi-form-header h2,
html body .mes-roi-form-header h2,
html body.ds .mes-roi-form-header h3,
html body .mes-roi-form-header h3,
.mes-roi-form-header h2,
.mes-roi-form-header h3 {
    margin: 8px 0 10px !important;
    color: var(--ds-navy, #151f30) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html body.ds .mes-roi-form-header span,
html body .mes-roi-form-header span,
.mes-roi-form-header span {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ds-blue, #0762e5) !important;
}

html body.ds .mes-roi-form-header p,
html body .mes-roi-form-header p,
.mes-roi-form-header p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--ds-text, #475569) !important;
    margin: 0 0 24px 0 !important;
}

@media (max-width: 640px) {

    html body.ds .appointment-contact-wrap,
    html body .appointment-contact-wrap,
    html body.ds .mes-roi-form,
    html body .mes-roi-form {
        padding: 24px 18px !important;
    }
}

html body.ds .appointment-formwrap,
html body .appointment-formwrap,
html body .mes-roi-form .appointment-formwrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body.ds .appointment-formwrap .span-2,
html body .appointment-formwrap .span-2,
html body .mes-roi-form .appointment-formfield.span-2 {
    grid-column: 1 / -1 !important;
}

@media (max-width: 640px) {

    html body.ds .appointment-formwrap,
    html body .appointment-formwrap,
    html body .mes-roi-form .appointment-formwrap {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body.ds .appointment-formwrap .span-2,
    html body .appointment-formwrap .span-2,
    html body .mes-roi-form .appointment-formfield.span-2 {
        grid-column: 1 !important;
    }
}

/* Appointment Form Field Box: Matches Apply Now & Contact Us Pure White Card Style */
html body.ds .appointment-formfield,
html body .appointment-formfield {
    background: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    padding: 0 16px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body.ds .appointment-formfield:focus-within,
html body .appointment-formfield:focus-within {
    border-color: var(--ds-blue, #0762e5) !important;
    box-shadow: 0 0 0 3px rgba(7, 98, 229, 0.12) !important;
    background-color: #ffffff !important;
}

html body.ds .appointment-formfield input,
html body .appointment-formfield input {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    background: transparent !important;
    font-size: 15px !important;
    color: var(--ds-navy, #151f30) !important;
    font-family: inherit !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

html body.ds .appointment-formfield input::placeholder,
html body .appointment-formfield input::placeholder {
    color: var(--ds-muted, #64748b) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    font-family: var(--oit-ff-body) !important;
}

/* Hide native select inside .appointment-formfield to prevent duplicates */
html body.ds .appointment-formfield select,
html body .appointment-formfield select {
    display: none !important;
}

/* Nice-select inside .appointment-formfield fits seamlessly inside the parent white box */
html body.ds .appointment-formfield .nice-select,
html body .appointment-formfield .nice-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    line-height: 46px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14.5px !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    outline: none !important;
}

html body.ds .appointment-formfield .nice-select .current,
html body .appointment-formfield .nice-select .current,
.appointment-formfield .nice-select .current {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--ds-muted, #64748b) !important;
    line-height: 46px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    font-family: var(--oit-ff-body) !important;
}

html body.ds .appointment-formfield .nice-select.has-value .current,
html body .appointment-formfield .nice-select.has-value .current {
    color: var(--ds-navy, #151f30) !important;
}

/* Hide default nice-select arrow inside .appointment-formfield because HTML already has an <i> icon */
html body.ds .appointment-formfield .nice-select::after,
html body .appointment-formfield .nice-select::after {
    display: none !important;
}

html body.ds .appointment-formfield i,
html body .appointment-formfield i {
    color: var(--ds-muted, #6b7484) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    margin-left: auto !important;
}

html body.ds .appointment-formfield:has(textarea),
html body.ds .appointment-formfield.has-textarea,
html body .appointment-formfield:has(textarea),
html body .appointment-formfield.has-textarea {
    height: auto !important;
    min-height: 110px !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
}

html body.ds .appointment-formfield textarea,
html body .appointment-formfield textarea {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ds-navy, #151f30) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 86px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    resize: vertical !important;
}

html body.ds .appointment-formfield textarea::placeholder,
html body .appointment-formfield textarea::placeholder {
    color: var(--ds-muted, #64748b) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    font-family: var(--oit-ff-body) !important;
}

html body.ds .appointment-formfield textarea+i,
html body .appointment-formfield textarea+i {
    margin-top: 4px !important;
}

html body.ds .appointment-contact-wrap .submit-btn,
html body .appointment-contact-wrap .submit-btn,
html body.ds .mes-roi-form .submit-btn,
html body .mes-roi-form .submit-btn {
    margin-top: 20px !important;
    width: 100% !important;
}

html body.ds .appointment-contact-wrap .submit-btn button,
html body .appointment-contact-wrap .submit-btn button,
html body.ds .mes-roi-form .submit-btn button,
html body .mes-roi-form .submit-btn button {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    border: none !important;
}

html body.ds .alert-success,
html body.ds .mespro-job-success {
    background: #ecfdf5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    border-radius: var(--ds-radius) !important;
    padding: 20px 24px !important;
}

html body.ds .alert-success strong,
html body.ds .mespro-job-success h3 {
    color: #065f46 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

html body.ds .alert-success p,
html body.ds .mespro-job-success p {
    color: #047857 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Footer Bottom CTA Band: Input & Button */
html body .bs-leading-input {
    display: flex !important;
    align-items: stretch !important;
}

html body .bs-leading-input input {
    height: 48px !important;
    border-radius: var(--ds-radius) 0 0 var(--ds-radius) !important;
    border: 1px solid var(--ds-line) !important;
    border-right: none !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    background: var(--ds-white) !important;
    color: var(--ds-navy) !important;
    flex-grow: 1 !important;
}

html body .bs-leading-input .oit-btn-red,
html body .bs-leading-input button {
    height: 48px !important;
    border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    html body .bs-leading-input {
        flex-direction: column !important;
        gap: 10px !important;
    }

    html body .bs-leading-input input,
    html body .bs-leading-input .oit-btn-red,
    html body .bs-leading-input button {
        border-radius: var(--ds-radius) !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   ENTERPRISE SAP CHALLENGES & SOLUTIONS GRID (who-we-are.php)
   ========================================================================== */
html body.ds .mes-challenges-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 991.98px) {
    html body.ds .mes-challenges-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767.98px) {
    html body.ds .mes-challenges-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

html body.ds .mes-challenge-card {
    background: #ffffff !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 26px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow: var(--ds-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
}

html body.ds .mes-challenge-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
    border-color: var(--ds-blue) !important;
}

html body.ds .mes-challenge-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

html body.ds .mes-challenge-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

html body.ds .mes-challenge-card:hover .mes-challenge-icon {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
}

html body.ds .mes-challenge-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    background: #eff6ff !important;
    color: var(--ds-blue) !important;
    letter-spacing: 0.02em !important;
}

html body.ds .mes-challenge-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ds-navy) !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

html body.ds .mes-challenge-problem {
    background: #fff1f2 !important;
    border-left: 3px solid #f43f5e !important;
    padding: 10px 14px !important;
    border-radius: 0 6px 6px 0 !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    color: #9f1239 !important;
    line-height: 1.5 !important;
}

html body.ds .mes-challenge-problem strong {
    color: #881337 !important;
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 2px !important;
}

html body.ds .mes-challenge-solution {
    color: var(--ds-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: auto !important;
}

html body.ds .mes-challenge-solution strong {
    color: var(--ds-navy) !important;
    display: block !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   WHO WE ARE PAGE: GUIDING FRAMEWORK & DELIVERY COMMITMENT
   ========================================================================== */
html body .mes-framework-card,
html body.ds .mes-framework-card {
    background: #ffffff !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 30px 26px !important;
    box-shadow: 0 4px 16px rgba(21, 31, 48, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

html body .mes-framework-card:hover,
html body.ds .mes-framework-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--ds-blue) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body .mes-framework-icon,
html body.ds .mes-framework-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

html body .mes-framework-card:hover .mes-framework-icon,
html body.ds .mes-framework-card:hover .mes-framework-icon {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
}

html body .mes-framework-number,
html body.ds .mes-framework-number {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ds-blue) !important;
    background: var(--ds-blue-tint) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    letter-spacing: 0.04em !important;
}

html body .mes-framework-title,
html body.ds .mes-framework-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ds-navy) !important;
    margin: 16px 0 6px 0 !important;
    line-height: 1.35 !important;
}

html body .mes-framework-tagline,
html body.ds .mes-framework-tagline {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ds-blue) !important;
    margin-bottom: 12px !important;
    line-height: 1.45 !important;
}

html body .mes-framework-desc,
html body.ds .mes-framework-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ds-text) !important;
    margin-bottom: 0 !important;
}

html body .mes-commitment-card,
html body.ds .mes-commitment-card {
    background: #ffffff !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 26px 24px !important;
    box-shadow: 0 4px 16px rgba(21, 31, 48, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    height: 100% !important;
}

html body .mes-commitment-card:hover,
html body.ds .mes-commitment-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--ds-blue) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body .mes-commitment-icon,
html body.ds .mes-commitment-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: var(--ds-radius) !important;
    background: var(--ds-blue-tint) !important;
    color: var(--ds-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 16px !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

html body .mes-commitment-card:hover .mes-commitment-icon,
html body.ds .mes-commitment-card:hover .mes-commitment-icon {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
}

html body .mes-commitment-title,
html body.ds .mes-commitment-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--ds-navy) !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

html body .mes-commitment-desc,
html body.ds .mes-commitment-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ds-text) !important;
    margin-bottom: 0 !important;
}

html body .mes-commitment-thumb,
html body.ds .mes-commitment-thumb {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .mes-commitment-thumb img,
html body.ds .mes-commitment-thumb img {
    width: 100% !important;
    max-height: 460px !important;
    object-fit: cover !important;
    border-radius: var(--ds-radius) !important;
    box-shadow: 0 12px 30px rgba(21, 31, 48, 0.08) !important;
}

/* ==========================================================================
   GLOBAL SECTION BACKGROUND UNIFICATION
   "Background color all everywhere background color use one"
   1. Default Section Background: Pure White #ffffff
   2. Alternating Section Background: Soft Theme Gray #f6f8fb
   3. Dark Sections: Deep Brand Navy #151f30
   ========================================================================== */
html body.ds,
html body.ds main,
html body.ds .white-bg {
    background-color: var(--ds-white) !important;
}

/* All soft/alternating sections across the whole site share the exact same #f6f8fb */
html body.ds .gray-bg,
html body.ds .gray-2-bg,
html body.ds .bg-bluene,
html body.ds .light-bg,
html body.ds .oit-gray-bg,
html body.ds .bs-leading-wrap,
html body.ds .ds-section-soft,
html body.ds .sc-consulting-area,
html body.ds .industry-section.gray-bg {
    background-color: var(--ds-bg-soft) !important;
    /* Strictly #f6f8fb */
}

/* All dark sections across the whole site share the exact same #151f30 */
html body.ds .dark-bg,
html body.ds .mes-s4-cta,
html body.ds .footer-area,
html body.ds .mes-footer {
    background-color: var(--ds-navy) !important;
    /* Strictly #151f30 */
}

/* ==========================================================================
   UNIFIED BRAND OVERRIDES & FIXES (v18.0 - MASTER)
   ========================================================================== */

/* 1. Global CSS Variable Definitions */
:root {
    --blue: #0762e5;
    --ds-blue: #0762e5;
    --ds-blue-dark: #0550bd;
    --ds-blue-tint: #eaf1fd;
    --ds-navy: #151f30;
    --ds-text: #3b4556;
    --ds-line: #e3e7ee;
    --ds-radius: 8px;
    --oit-ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --oit-ff-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. Banner and Heading Spans: Highlight color is brand blue */
html body .mes-s4-hero h1 span,
html body.ds .mes-s4-hero h1 span,
html body .hero-area h1 span,
html body.ds .hero-area h1 span,
html body .black-content h1 span,
html body.ds .black-content h1 span,
html body .oit-section-title span,
html body.ds .oit-section-title span,
html body h1 span,
html body.ds h1 span {
    color: var(--blue, #0762e5) !important;
}

/* 3. All LI Elements: Match Body Font and Body Text Color */
html body ul li,
html body ol li,
html body li,
html body.ds ul li,
html body.ds ol li,
html body.ds li,
html body .auto-challenges li,
html body .auto-why li,
html body .bg-list li,
html body .oit-mission-list li,
html body .fc-price-features li,
html body .industry-card-wrap li {
    color: var(--ds-text, #3b4556) !important;
    font-family: var(--oit-ff-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* 4. Industry Overview Cards: Key Challenges & Why Choose Mesprosoft */
html body.ds .auto-challenges li,
html body .auto-challenges li,
html body.ds .auto-why li,
html body .auto-why li {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ds-text, #3b4556) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

html body.ds .auto-challenges li::before,
html body .auto-challenges li::before {
    content: "" !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: #fff1f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5v5M9 13h.01' stroke='%23e11d48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

html body.ds .auto-why li::before,
html body .auto-why li::before {
    content: "" !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23005baa'/%3E%3Cpath d='M5.5 9L8 11.5L12.5 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* 5. Product & Feature Checklist Cards: Strictly Row (Icon Left, Text Right) */
html body .bg-list.oit-mission-list ul,
html body.ds .bg-list.oit-mission-list ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {

    html body .bg-list.oit-mission-list ul,
    html body.ds .bg-list.oit-mission-list ul {
        grid-template-columns: 1fr !important;
    }
}

html body .bg-list.oit-mission-list ul li,
html body.ds .bg-list.oit-mission-list ul li,
html body .bg-list li,
html body.ds .bg-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    padding: 20px 18px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

html body .bg-list.oit-mission-list ul li>span:first-child,
html body.ds .bg-list.oit-mission-list ul li>span:first-child,
html body .bg-list li>span:first-child,
html body.ds .bg-list li>span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-blue-tint, #eaf1fd) !important;
    color: var(--ds-blue, #0762e5) !important;
    margin: 2px 0 0 0 !important;
}

html body .bg-list.oit-mission-list ul li>span:first-child svg,
html body.ds .bg-list.oit-mission-list ul li>span:first-child svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: currentColor !important;
}

html body .bg-list.oit-mission-list ul li .dis-b,
html body.ds .bg-list.oit-mission-list ul li .dis-b,
html body .bg-list li .dis-b,
html body.ds .bg-list li .dis-b {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    display: block !important;
}

html body .bg-list.oit-mission-list ul li .dis-b span,
html body.ds .bg-list.oit-mission-list ul li .dis-b span {
    color: var(--ds-text, #3b4556) !important;
    font-family: var(--oit-ff-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    display: block !important;
}

/* 6. Form Select Fields & Dropdown Caret: No Wrapping / Arrow Never On Top */
/* CRITICAL: Hide native select ONLY whenever jQuery Nice Select is actively present */
html body select:has(+ .nice-select):not(.no-nice-select),
html body select.nice-select-hidden:not(.no-nice-select),
html body .nice-select+select:not(.no-nice-select),
html body .appointment-formfield select:has(+ .nice-select):not(.no-nice-select),
html body .bi-contact-form select:has(+ .nice-select):not(.no-nice-select) {
    display: none !important;
}

/* Native Clean Selects (e.g. Apply Now career form and any select with .no-nice-select) */
html body select.no-nice-select,
html body .mespro-form-field select.no-nice-select,
html body .mespro-form-field select:not(:has(+ .nice-select)) {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 46px !important;
    padding: 0 40px 0 16px !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23151f30' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    color: var(--ds-navy, #151f30) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body select.no-nice-select:focus,
html body .mespro-form-field select.no-nice-select:focus,
html body .mespro-form-field select:not(:has(+ .nice-select)):focus {
    border-color: var(--ds-blue, #0762e5) !important;
    box-shadow: 0 0 0 3px rgba(7, 98, 229, 0.12) !important;
    outline: none !important;
}

/* Standalone .nice-select elements (Apply Now, Request Demo, Contact Us) */
html body .nice-select:not(.appointment-formfield .nice-select),
html body .mespro-form-field .nice-select,
html body .bi-contact-form .nice-select {
    height: 48px !important;
    line-height: 46px !important;
    padding: 0 38px 0 16px !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: #ffffff !important;
    color: var(--ds-navy, #151f30) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .nice-select:not(.appointment-formfield .nice-select):focus,
html body .mespro-form-field .nice-select:focus,
html body .bi-contact-form .nice-select:focus {
    border-color: var(--ds-blue, #0762e5) !important;
    box-shadow: 0 0 0 3px rgba(7, 98, 229, 0.12) !important;
}

html body .nice-select:not(.appointment-formfield .nice-select) .current,
html body .mespro-form-field .nice-select .current,
html body .bi-contact-form .nice-select .current {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 20px) !important;
    line-height: 46px !important;
    font-size: 15px !important;
    color: var(--ds-navy, #151f30) !important;
}

html body .nice-select:not(.appointment-formfield .nice-select)::after,
html body .mespro-form-field .nice-select::after,
html body .bi-contact-form .nice-select::after {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    margin-top: -3px !important;
    transform: translateY(-50%) rotate(45deg) !important;
    border-bottom: 2px solid var(--ds-navy, #151f30) !important;
    border-right: 2px solid var(--ds-navy, #151f30) !important;
    width: 6px !important;
    height: 6px !important;
    display: block !important;
}

/* Unified Dropdown Menu List Across All Pages */
html body .nice-select .list {
    background-color: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
    margin-top: 6px !important;
    padding: 6px 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 1050 !important;
    width: 100% !important;
    left: 0 !important;
}

html body .nice-select .option {
    font-size: 14px !important;
    color: var(--ds-navy, #151f30) !important;
    padding: 0 16px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

html body .nice-select .option:hover,
html body .nice-select .option.focus,
html body .nice-select .option.selected.focus {
    background-color: var(--ds-bg-soft, #f8fafc) !important;
    color: var(--ds-blue, #0762e5) !important;
}

html body .nice-select .option.selected {
    font-weight: 600 !important;
    color: var(--ds-blue, #0762e5) !important;
}

/* 7. Clean Neat Forms on Apply Now & Request Demo: Full Site Container Width */
html body .mespro-job-layout,
html body.ds .mespro-job-layout,
html body .mespro-job-layout-single,
html body.ds .mespro-job-layout-single {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05) !important;
    overflow: hidden !important;
}

html body .mespro-job-info,
html body.ds .mespro-job-info {
    display: none !important;
}

html body .mespro-job-form-wrapper,
html body.ds .mespro-job-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 40px 48px 45px !important;
    box-sizing: border-box !important;
}

html body .mespro-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 24px !important;
}

@media (max-width: 767.98px) {
    html body .mespro-form-grid {
        grid-template-columns: 1fr !important;
    }

    html body .mespro-job-form-wrapper,
    html body.ds .mespro-job-form-wrapper {
        padding: 24px 20px !important;
    }
}

html body .mespro-job-form-header>span {
    color: var(--blue, #0762e5) !important;
    font-weight: 700 !important;
}

/* 8. Contact Us & Process Icons: Standard 48px, 8px radius, var(--ds-blue-tint) */
html body .mes-contact-card-icon,
html body.ds .mes-contact-card-icon,
html body .mes-process-icon,
html body.ds .mes-process-icon,
html body .contact-area .case-study-info span,
html body.ds .contact-area .case-study-info span {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-blue-tint, #eaf1fd) !important;
    color: var(--ds-blue, #0762e5) !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 16px !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

html body .mes-contact-card:hover .mes-contact-card-icon,
html body.ds .mes-contact-card:hover .mes-contact-card-icon,
html body .mes-process-card:hover .mes-process-icon,
html body.ds .mes-process-card:hover .mes-process-icon,
html body .contact-area .case-study-info:hover span,
html body.ds .contact-area .case-study-info:hover span {
    background: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .mes-contact-card:hover .mes-contact-card-icon *,
html body.ds .mes-contact-card:hover .mes-contact-card-icon *,
html body .mes-contact-card:hover .mes-contact-card-icon i,
html body.ds .mes-contact-card:hover .mes-contact-card-icon i,
html body .mes-contact-card:hover .mes-contact-card-icon i::before,
html body.ds .mes-contact-card:hover .mes-contact-card-icon i::before,
html body .mes-contact-card:hover .mes-contact-card-icon svg,
html body.ds .mes-contact-card:hover .mes-contact-card-icon svg,
html body .contact-area .case-study-info:hover span svg path,
html body.ds .contact-area .case-study-info:hover span svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

html body .mes-contact-category,
html body.ds .mes-contact-category {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--ds-blue, #0762e5) !important;
    background: var(--ds-blue-tint, #eaf1fd) !important;
    padding: 4px 10px !important;
    border-radius: var(--ds-radius, 8px) !important;
    display: inline-block !important;
}

/* (Older bs-service-card block consolidated into Section 5 below) */

/* 10. Case Study Slider CTA Badge */
html body .hero-case-cta-badge,
html body.ds .hero-case-cta-badge {
    background: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
    border: 1px solid var(--ds-blue, #0762e5) !important;
    border-radius: var(--ds-radius, 8px) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.25s ease !important;
}

html body .hero-case-cta-badge:hover,
html body.ds .hero-case-cta-badge:hover {
    background: var(--ds-blue-dark, #0550bd) !important;
    border-color: var(--ds-blue-dark, #0550bd) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   QUEUE FIXES (v19.0)
   ========================================================================== */

/* 1. Global CTA Band: 80px top/bottom padding, aligned with container */
html body .bs-leading-wrap,
html body.ds .bs-leading-wrap,
html body .bs-leading-area,
html body.ds .bs-leading-area {
    padding: 80px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--ds-bg-soft, #f6f8fb) !important;
}

html body .bs-leading-wrap .container,
html body.ds .bs-leading-wrap .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. Contact Us Top Cards & Links: Identical to cards across all other pages (No top border on hover) */
html body .mes-contact-card,
html body.ds .mes-contact-card {
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: #ffffff !important;
    padding: 28px 24px !important;
    box-shadow: 0 2px 12px rgba(21, 31, 48, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Completely suppress top gradient bar or pseudo-elements on hover */
html body .mes-contact-card::before,
html body.ds .mes-contact-card::before,
html body .mes-contact-card::after,
html body.ds .mes-contact-card::after,
html body .mes-contact-card:hover::before,
html body.ds .mes-contact-card:hover::before,
html body .mes-contact-card:hover::after,
html body.ds .mes-contact-card:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Standard subtle elevation hover matching all pages */
html body .mes-contact-card:hover,
html body.ds .mes-contact-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
    border-top-color: rgba(7, 98, 229, 0.3) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body .mes-contact-card-link,
html body.ds .mes-contact-card-link,
html body .mes-contact-card-link.phone-link,
html body.ds .mes-contact-card-link.phone-link {
    color: var(--ds-blue, #0762e5) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

html body .mes-contact-card-link:hover,
html body.ds .mes-contact-card-link:hover,
html body .mes-contact-card-link.phone-link:hover,
html body.ds .mes-contact-card-link.phone-link:hover {
    color: var(--ds-blue-dark, #0550bd) !important;
    text-decoration: underline !important;
}

/* 3. Contact Us Consultation Mode Cards (Phone, Video, In-Person) */
html body .case-study-info,
html body.ds .case-study-info {
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: #ffffff !important;
    padding: 32px 24px !important;
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    height: 100% !important;
    margin-bottom: 0 !important;
}

html body .case-study-info:hover,
html body.ds .case-study-info:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
    box-shadow: 0 6px 18px rgba(21, 31, 48, 0.06), 0 2px 6px rgba(7, 98, 229, 0.06) !important;
}

html body .case-study-info .icon,
html body.ds .case-study-info .icon,
html body .case-study-info span.icon,
html body.ds .case-study-info span.icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-blue-tint, #eaf1fd) !important;
    color: var(--ds-blue, #0762e5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

html body .case-study-info:hover .icon,
html body.ds .case-study-info:hover .icon,
html body .case-study-info:hover span.icon,
html body.ds .case-study-info:hover span.icon {
    background: var(--ds-blue, #0762e5) !important;
    color: #ffffff !important;
}

html body .case-study-info .icon svg,
html body.ds .case-study-info .icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

html body .case-study-info:hover .icon svg path,
html body.ds .case-study-info:hover .icon svg path {
    fill: #ffffff !important;
}

/* 4. Subtitles & Eyebrows: Never forced ALL CAPS */
html body .mes-s4-eyebrow,
html body.ds .mes-s4-eyebrow,
html body .oit-section-subtitle,
html body.ds .oit-section-subtitle,
html body .jobs-eyebrow,
html body.ds .jobs-eyebrow,
html body .mes-tag,
html body.ds .mes-tag {
    text-transform: none !important;
}

/* 5. The Mesprosoft Advantage: Service Cards */
html body .bs-service-card,
html body.ds .bs-service-card,
html body.ds .bs-service-area .bs-service-card {
    border-radius: var(--ds-radius, 8px) !important;
    background: #ffffff !important;
    border: 1px solid var(--ds-line, #e3e7ee) !important;
    box-shadow: 0 2px 10px rgba(21, 31, 48, 0.04) !important;
    position: relative !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

html body .bs-service-card:hover,
html body.ds .bs-service-card:hover,
html body.ds .bs-service-area .bs-service-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px -6px rgba(7, 98, 229, 0.12) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
}

/* Desktop layout (768px and up): 2-column horizontal card (image left, content right) */
@media (min-width: 768px) {

    html body .bs-service-card,
    html body.ds .bs-service-card,
    html body.ds .bs-service-area .bs-service-card {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 24px !important;
        padding: 24px !important;
    }

    html body .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-area .bs-service-thumb {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        min-height: 160px !important;
        flex-shrink: 0 !important;
        border-radius: var(--ds-radius, 8px) !important;
        overflow: hidden !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    html body .bs-service-card .bs-service-thumb img,
    html body.ds .bs-service-card .bs-service-thumb img,
    html body.ds .bs-service-area .bs-service-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    html body .bs-service-card .bs-service-card-content,
    html body.ds .bs-service-card .bs-service-card-content,
    html body.ds .bs-service-area .bs-service-card-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
        padding-right: 40px !important;
    }

    html body .bs-service-card-arrow,
    html body.ds .bs-service-card-arrow,
    html body.ds .bs-service-area .bs-service-card-arrow {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        inset-inline-end: 20px !important;
        z-index: 2 !important;
        overflow: visible !important;
    }
}

/* Mobile layout (< 768px): Vertical stacked card (image top, content below) */
@media (max-width: 767.98px) {

    html body .bs-service-card,
    html body.ds .bs-service-card,
    html body.ds .bs-service-area .bs-service-card {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 18px 16px 22px !important;
    }

    html body .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-area .bs-service-thumb {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        flex-shrink: 0 !important;
        border-radius: var(--ds-radius, 8px) !important;
        overflow: hidden !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    html body .bs-service-card .bs-service-thumb img,
    html body.ds .bs-service-card .bs-service-thumb img,
    html body.ds .bs-service-area .bs-service-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: var(--ds-radius, 8px) !important;
    }

    html body .bs-service-card .bs-service-card-content,
    html body.ds .bs-service-card .bs-service-card-content,
    html body.ds .bs-service-area .bs-service-card-content {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        padding-right: 0 !important;
        padding-bottom: 24px !important;
        /* space so arrow doesn't overlap text */
    }

    html body .bs-service-card .bs-service-card-content h3,
    html body.ds .bs-service-card .bs-service-card-content h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    html body .bs-service-card .bs-service-card-content .title-below,
    html body.ds .bs-service-card .bs-service-card-content .title-below {
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        color: var(--ds-blue, #0762e5) !important;
    }

    html body .bs-service-card .bs-service-card-content p,
    html body.ds .bs-service-card .bs-service-card-content p {
        /* font-size: 13.5px !important; */
        /* line-height: 1.55 !important; */
        margin-bottom: 0 !important;
    }

    html body .bs-service-card-arrow,
    html body.ds .bs-service-card-arrow,
    html body.ds .bs-service-area .bs-service-card-arrow {
        position: absolute !important;
        bottom: 16px !important;
        right: 16px !important;
        inset-inline-end: 16px !important;
        z-index: 2 !important;
        overflow: visible !important;
    }
}

@media (max-width: 575.98px) {

    html body .bs-service-card,
    html body.ds .bs-service-card,
    html body.ds .bs-service-area .bs-service-card {
        padding: 16px 14px 20px !important;
        gap: 14px !important;
    }

    html body .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-card .bs-service-thumb,
    html body.ds .bs-service-area .bs-service-thumb {
        height: 160px !important;
        min-height: 160px !important;
    }
}

/* 6. Card Checkmark SVGs in Capability Cards (.fc-price-features) */
html body .fc-price-features ul li,
html body.ds .fc-price-features ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

html body .fc-price-features ul li span,
html body.ds .fc-price-features ul li span {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--ds-text, #3b4556) !important;
}

html body .fc-price-features ul li span svg,
html body.ds .fc-price-features ul li span svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 2px !important;
    overflow: visible !important;
}


/* Checklist in Autonomous Enterprise & other mission lists: Clean list without card borders */
html body .oit-mission-list ul,
html body.ds .oit-mission-list ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
}

html body .oit-mission-list ul li,
html body.ds .oit-mission-list ul li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

html body .oit-mission-list ul li>span:first-child,
html body.ds .oit-mission-list ul li>span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 3px 0 0 0 !important;
    color: var(--ds-blue, #0762e5) !important;
}

html body .oit-mission-list ul li>span:first-child svg,
html body.ds .oit-mission-list ul li>span:first-child svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: block !important;
}

html body .oit-mission-list ul li>span:last-child,
html body.ds .oit-mission-list ul li>span:last-child {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ds-text, #3b4556) !important;
    flex: 1 1 auto !important;
}

html body .oit-mission-list ul li>span:last-child strong,
html body.ds .oit-mission-list ul li>span:last-child strong {
    color: var(--ds-navy, #151f30) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   RESPONSIVE HERO BANNER, H1 & H2 (800px to 1399px range)
   ========================================================================== */
@media (min-width: 800px) and (max-width: 1399.98px) {

    body.ds main h1,
    body.ds .ic-hero-title,
    html body.ds .ic-hero-title,
    html body.ds .mes-s4-hero-content h1,
    html body .ic-hero-title,
    html body .mes-s4-hero-content h1,
    .ic-hero-title,
    .mes-s4-hero-content h1 {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    body.ds main h2,
    body.ds .oit-section-title,
    html body.ds .oit-section-title,
    html body .oit-section-title,
    .oit-section-title,
    main h2 {
        font-size: 28px !important;
        line-height: 37px !important;
    }

    html body.ds .ic-hero-area,
    html body.ds .ds-hero-full,
    html body.ds .ds-first-screen>.ds-hero-full,
    html body.ds .ic-hero-area.ds-hero-full,
    html body.ds .mes-s4-hero,
    html body .mes-s4-hero,
    html body .ic-hero-area,
    .ic-hero-area,
    .ds-hero-full,
    .mes-s4-hero {
        padding-top: 115px !important;
        /* 75px fixed header clearance + strictly 40px banner breathing room */
    }

    html body.ds .ic-hero-wrap,
    html body .ic-hero-wrap,
    .ic-hero-wrap {
        padding-top: 0 !important;
    }
}

@media (max-width: 799.98px) {

    html body.ds .ic-hero-area,
    html body.ds .ds-hero-full,
    html body.ds .mes-s4-hero,
    .ic-hero-area,
    .ds-hero-full,
    .mes-s4-hero {
        padding-top: 105px !important;
        /* 68px mobile header clearance + ~37px banner padding */
    }

    html body.ds .ic-hero-wrap,
    html body .ic-hero-wrap,
    .ic-hero-wrap {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   DESKTOP HERO BANNER TOP PADDING (1400px to 1920px range)
   71px fixed header clearance + strictly 30px banner breathing room
   ========================================================================== */
@media (min-width: 1400px) and (max-width: 1920px) {

    html body.ds .ic-hero-area,
    html body.ds .ds-hero-full,
    html body.ds .ds-first-screen>.ds-hero-full,
    html body.ds .ic-hero-area.ds-hero-full,
    html body.ds .mes-s4-hero,
    html body .mes-s4-hero,
    html body .ic-hero-area,
    .ic-hero-area,
    .ds-hero-full,
    .mes-s4-hero {
        padding-top: calc(105px + 38px) !important;
        padding-bottom: calc(40px + 38px) !important;
    }

    html body.ds .ic-hero-wrap,
    html body .ic-hero-wrap,
    .ic-hero-wrap {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   MOBILE ICON COLOR HARMONIZATION (Menu toggles, close btn, social bar, hamburger)
   ========================================================================== */
/* 1. Mobile Menu Submenu Toggles */
html body .oit-menu-mobile .dropdown-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--ds-radius, 8px) !important;
    background: var(--ds-blue-tint, #eaf2fd) !important;
    border: 1px solid rgba(7, 98, 229, 0.15) !important;
    color: var(--ds-blue, #0762e5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    margin-right: 2px !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    outline: none !important;
}

html body .oit-menu-mobile .dropdown-toggle-btn i {
    transition: transform 0.25s ease-in-out !important;
    margin: 0 !important;
    color: var(--ds-blue, #0762e5) !important;
}

html body .oit-menu-mobile .dropdown-toggle-btn.dropdown-opened,
html body .oit-menu-mobile li.has-dropdown.expanded>a .dropdown-toggle-btn {
    background: var(--ds-blue-tint, #eaf2fd) !important;
    border-color: rgba(7, 98, 229, 0.3) !important;
    color: var(--ds-blue, #0762e5) !important;
}

html body .oit-menu-mobile .dropdown-toggle-btn.dropdown-opened i,
html body .oit-menu-mobile li.has-dropdown.expanded>a .dropdown-toggle-btn i {
    transform: rotate(90deg) !important;
    color: var(--ds-blue, #0762e5) !important;
}

/* 2. Mobile Navbar Hamburger Button */
html body .ic-header-style .oit-header-bar,
html body .oit-header-bar {
    background-color: var(--ds-navy, #151f30) !important;
    border-radius: var(--ds-radius, 8px) !important;
}

html body .ic-header-style .oit-header-bar span,
html body .oit-header-bar span {
    background-color: #ffffff !important;
}

html body .ic-header-style .oit-header-bar:hover,
html body .oit-header-bar:hover {
    background-color: var(--ds-blue, #0762e5) !important;
}

/* 3. Mobile Floating Social Bar (Bottom Screen) - Uniform White Backgrounds */
@media (max-width: 1399.98px) {
    html body .mes-floating-social-bar .mes-social-item {
        background: #ffffff !important;
        color: var(--ds-navy, #151f30) !important;
    }

    html body .mes-floating-social-bar .mes-social-whatsapp {
        color: #25D366 !important;
    }

    html body .mes-floating-social-bar .mes-social-linkedin {
        color: #0A66C2 !important;
    }

    html body .mes-floating-social-bar .mes-social-phone {
        color: var(--ds-navy, #151f30) !important;
    }

    html body .mes-floating-social-bar .mes-social-email {
        color: var(--ds-blue, #0762e5) !important;
    }

    html body .mes-floating-social-bar .mes-social-consultation {
        background: #ffffff !important;
        color: var(--ds-blue, #0762e5) !important;
    }

    html body .mes-floating-social-bar .mes-social-consultation:hover,
    html body .mes-floating-social-bar .mes-social-consultation:focus,
    html body .mes-floating-social-bar .mes-social-consultation:active {
        background: var(--ds-blue-tint, #eaf2fd) !important;
        color: var(--ds-blue, #0762e5) !important;
    }

    /* html body {
        padding-bottom: 85px !important;
    } */
}

/* ==========================================================================
   HEADER "REQUEST A DEMO" BUTTON RESPONSIVENESS
   - Under 800px (< 800px): Hide in top header bar (available inside offcanvas mobile menu)
   - 800px and up (>= 800px): Show in header bar
   ========================================================================== */
html body .oit-header-area .oit-header-action {
    flex-wrap: nowrap !important;
}

@media (max-width: 799.98px) {

    html body .oit-header-area .header-request-demo-btn,
    html body .oit-header-action .header-request-demo-btn,
    html body .oit-header-area .oit-header-action a[href*="request-demo"],
    html body .oit-header-area .oit-header-action a.oit-btn-red {
        display: none !important;
    }

    html body .oit-header-action .oit-header-bar {
        margin-left: 0 !important;
    }
}

@media (min-width: 800px) {

    html body .oit-header-area .header-request-demo-btn,
    html body .oit-header-action .header-request-demo-btn,
    html body .oit-header-area .oit-header-action a[href*="request-demo"],
    html body .oit-header-area .oit-header-action a.oit-btn-red {
        display: inline-flex !important;
    }

    html body .oit-header-action .oit-header-bar {
        margin-left: 15px !important;
    }
}

@media (min-width: 800px) and (max-width: 1199.98px) {

    html body .oit-header-area .header-request-demo-btn,
    html body .oit-header-action .header-request-demo-btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
        min-height: 38px !important;
    }
}

/* ==========================================================================
   SITEMAP PAGE STYLING
   ========================================================================== */
.sitemap-search-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ds-radius, 8px);
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 36px;
}

.sitemap-search-input-wrap {
    position: relative;
    max-width: 620px;
    margin: 0 auto 16px;
}

.sitemap-search-input-wrap i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}

.sitemap-search-input {
    width: 100%;
    padding: 13px 20px 13px 52px !important;
    border-radius: 50px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 15px !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
    color: var(--ds-navy, #151f30) !important;
}

.sitemap-search-input:focus {
    background: #ffffff !important;
    border-color: var(--ds-blue, #0762e5) !important;
    box-shadow: 0 0 0 4px rgba(7, 98, 229, 0.12) !important;
    outline: none !important;
}

.sitemap-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.sitemap-filter-pill {
    padding: 7px 18px;
    border-radius: 50px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sitemap-filter-pill:hover,
.sitemap-filter-pill.active {
    background: var(--ds-blue, #0762e5);
    color: #ffffff;
    border-color: var(--ds-blue, #0762e5);
}

.sitemap-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ds-radius, 8px);
    padding: 22px 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.sitemap-card:hover {
    border-color: rgba(7, 98, 229, 0.35);
    box-shadow: 0 12px 28px -6px rgba(7, 98, 229, 0.12);
    transform: translateY(-4px);
}

.sitemap-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sitemap-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sitemap-card-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 8px;
    background: var(--ds-blue-tint, #eaf2fd);
    color: var(--ds-blue, #0762e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.sitemap-card-title,
h3.sitemap-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-navy, #151f30);
    margin: 0 0 10px 0;
    line-height: 1.3;
    display: block;
}

.sitemap-card-badge {
    font-size: 11.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.sitemap-card-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.45;
    min-height: 40px;
}

.sitemap-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.sitemap-link-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.18s ease;
}

.sitemap-link-item a i {
    font-size: 11px;
    color: #94a3b8;
    transition: transform 0.18s ease, color 0.18s ease;
}

.sitemap-link-item a:hover {
    background: var(--ds-blue-tint, #eaf2fd);
    color: var(--ds-blue, #0762e5);
    padding-left: 14px;
}

.sitemap-link-item a:hover i {
    color: var(--ds-blue, #0762e5);
    transform: translateX(3px);
}

.sitemap-cta-box {
    background: linear-gradient(135deg, #151f30 0%, #0d1522 100%);
    border-radius: var(--ds-radius, 8px);
    padding: 40px 30px;
    color: #ffffff;
    margin-top: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments for sitemap */
@media (max-width: 991.98px) {
    .sitemap-search-card {
        padding: 20px 16px;
        margin-bottom: 30px;
    }

    .sitemap-card {
        padding: 20px 16px 16px;
    }

    .sitemap-card-desc {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .sitemap-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .sitemap-filter-pills {
        gap: 6px;
    }

    .sitemap-filter-pill {
        font-size: 12.5px;
        padding: 6px 13px;
    }

    .sitemap-search-input {
        font-size: 14px !important;
        padding: 11px 16px 11px 48px !important;
    }

    .sitemap-search-input-wrap i {
        left: 16px;
        font-size: 15px;
    }

    .sitemap-card {
        padding: 18px 14px;
    }

    .sitemap-card-title,
    h3.sitemap-card-title {
        font-size: 17px;
    }

    .sitemap-cta-box {
        padding: 28px 18px;
        margin-top: 30px;
    }
}

/* ==========================================================================
   MOBILE & TABLET HERO / SAP-BANNER (Up to 787px)
   ========================================================================== */
@media (max-width: 787.98px) {

    html body .sap-banner,
    html body.ds .sap-banner,
    html body .sap-banner__slides,
    html body.ds .sap-banner__slides,
    html body .sap-banner__slide,
    html body.ds .sap-banner__slide {
        min-height: 560px !important;
    }

    html body .sap-banner__slide,
    html body.ds .sap-banner__slide {
        padding-top: 55px !important;
        padding-bottom: 75px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    html body .sap-banner .sap-banner__content,
    html body.ds .sap-banner .sap-banner__content {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 100px;
    }

    html body .sap-banner .sap-banner__content .sap-banner__eyebrow,
    html body.ds .sap-banner .sap-banner__content .sap-banner__eyebrow,
    html body .sap-banner .sap-banner__content .mes-s4-eyebrow,
    html body.ds .sap-banner .sap-banner__content .mes-s4-eyebrow {
        display: inline-block !important;
        margin-bottom: 12px !important;
        font-size: 12px !important;
        letter-spacing: 0.02em !important;
    }

    html body .sap-banner .sap-banner__content h1,
    html body.ds .sap-banner .sap-banner__content h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    html body .sap-banner .sap-banner__content p,
    html body.ds .sap-banner .sap-banner__content p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        margin-bottom: 22px !important;
        max-width: 100% !important;
    }

    html body .sap-banner__controls,
    html body.ds .sap-banner__controls {
        right: 20px !important;
        bottom: 20px !important;
        z-index: 5 !important;
    }
}

@media (max-width: 480px) {

    html body .sap-banner,
    html body.ds .sap-banner,
    html body .sap-banner__slides,
    html body.ds .sap-banner__slides,
    html body .sap-banner__slide,
    html body.ds .sap-banner__slide {
        min-height: 580px !important;
    }

    html body .sap-banner__slide,
    html body.ds .sap-banner__slide {
        padding-top: 50px !important;
        padding-bottom: 80px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body .sap-banner .sap-banner__content h1,
    html body.ds .sap-banner .sap-banner__content h1 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    html body .sap-banner .sap-banner__content p,
    html body.ds .sap-banner .sap-banner__content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }
}

/* ==========================================================================
   GLOBAL MOBILE CONTAINER & HORIZONTAL EDGE SPACING
   Ensures clean, consistent left and right breathing room across all pages
   ========================================================================== */
@media (max-width: 767.98px) {

    .container,
    html body .container,
    html body.ds .container,
    .container-fluid,
    html body.ds .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {

    .container,
    html body .container,
    html body.ds .container,
    .container-fluid,
    html body.ds .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Fix mobile alignment for section.mes-why-ser (used across 20+ product & service pages) */
@media (max-width: 991.98px) {

    html body.ds section.mes-why-ser .row.align-items-center,
    html body section.mes-why-ser .row.align-items-center {
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Heading/Text column always appears first on mobile */
    html body.ds section.mes-why-ser .row.align-items-center>[class*="col-"]:has(.oit-section-box, .oit-section-title, h2),
    html body section.mes-why-ser .row.align-items-center>[class*="col-"]:has(.oit-section-box, .oit-section-title, h2) {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 28px !important;
    }

    /* Cards column always appears second on mobile */
    html body.ds section.mes-why-ser .row.align-items-center>[class*="col-"]:has(.mes-s4-benefit-card, .mt-oo),
    html body section.mes-why-ser .row.align-items-center>[class*="col-"]:has(.mes-s4-benefit-card, .mt-oo) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Reset pl-40 / pr-40 on mobile */
    html body.ds section.mes-why-ser .pl-40,
    html body section.mes-why-ser .pl-40,
    html body.ds section.mes-why-ser .pr-40,
    html body section.mes-why-ser .pr-40 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* General fallback if :has is not supported */
    html body.ds section.mes-why-ser .row.align-items-center>[class*="col-"],
    html body section.mes-why-ser .row.align-items-center>[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Card grid row - applies whether cards are first or last column */
    html body.ds section.mes-why-ser .row.align-items-center [class*="col-"]>.row,
    html body section.mes-why-ser .row.align-items-center [class*="col-"]>.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    html body.ds section.mes-why-ser .row.align-items-center [class*="col-"]>.row>[class*="col-"],
    html body section.mes-why-ser .row.align-items-center [class*="col-"]>.row>[class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    html body.ds section.mes-why-ser .row.align-items-center [class*="col-"]>.row>[class*="col-"]:first-child,
    html body section.mes-why-ser .row.align-items-center [class*="col-"]>.row>[class*="col-"]:first-child {
        margin-top: 0 !important;
    }

    /* Full-width card row on mobile (1x4 grid pages) */
    html body.ds section.mes-why-ser .row:has(.mes-s4-benefit-card)>[class*="col-"],
    html body section.mes-why-ser .row:has(.mes-s4-benefit-card)>[class*="col-"] {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    html body.ds section.mes-why-ser .row:has(.mes-s4-benefit-card)>[class*="col-"]:first-child,
    html body section.mes-why-ser .row:has(.mes-s4-benefit-card)>[class*="col-"]:first-child {
        margin-top: 0 !important;
    }

    html body.ds section.mes-why-ser .mes-s4-benefit-card,
    html body section.mes-why-ser .mes-s4-benefit-card,
    html body.ds section.mes-why-ser .mt-oo,
    html body section.mes-why-ser .mt-oo {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
}

@media (max-width: 767.98px) {

    section.mes-why-ser,
    section.mes-why-ser.pt-80.pb-80 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/* ==========================================================================
   INNER PAGE BANNERS: 40px Horizontal Padding (1200px - 1399px)
   Prevents banner content from touching the screen on laptop viewports.
   Strictly excludes home page banner (.ds-first-screen / .ds-hero-full).
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    html body.ds .mes-s4-hero,
    html body .mes-s4-hero,
    html body.ds section.ic-hero-area,
    html body section.ic-hero-area,
    html body.ds .bc-hero-area,
    html body .bc-hero-area,
    .mes-s4-hero,
    section.ic-hero-area,
    .bc-hero-area {
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box !important;
    }

    /* Strict exclusion to guarantee home page banner is never affected */
    html body.ds .ds-first-screen,
    html body.ds .ds-first-screen .ic-hero-area,
    html body.ds .ds-first-screen .ds-hero-full,
    html body .ds-first-screen,
    html body .ds-first-screen .ic-hero-area,
    html body .ds-first-screen .ds-hero-full {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   DESKTOP (1400px - 1920px+): FULL-HEIGHT FIRST SCREEN WITH DOCKED COUNTER
   Ensures that on displays from 1400px to 1920px+, the hero banner and key-figures
   trust strip together fill 100vh so that the banner is full and the counter bar
   is completely visible above the fold without scrolling.
   ========================================================================== */
@media (min-width: 1400px) {

    html body.ds .ds-first-screen,
    html body .ds-first-screen {
        height: 100vh !important;
        height: 100svh !important;
        min-height: 600px !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body.ds .ds-first-screen>.sap-banner,
    html body .ds-first-screen>.sap-banner {
        flex: 1 1 0% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__slides,
    html body .ds-first-screen>.sap-banner .sap-banner__slides {
        flex: 1 1 0% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        position: relative !important;
        width: 100% !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__slide,
    html body .ds-first-screen>.sap-banner .sap-banner__slide {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 75px !important;
        padding-bottom: 25px !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__slide>img,
    html body .ds-first-screen>.sap-banner .sap-banner__slide>img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: -1 !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__controls,
    html body .ds-first-screen>.sap-banner .sap-banner__controls {
        position: absolute !important;
        z-index: 2 !important;
        right: 7vw !important;
        bottom: 22px !important;
    }

    html body.ds .ds-first-screen>.trust,
    html body .ds-first-screen>.trust {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        z-index: 2 !important;
        margin: 0 !important;
    }
}

@media (min-width: 1400px) and (max-height: 820px) {

    html body.ds .ds-first-screen>.trust,
    html body .ds-first-screen>.trust {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    html body.ds .ds-first-screen>.trust div,
    html body .ds-first-screen>.trust div {
        padding: 8px 12px !important;
    }

    html body.ds .ds-first-screen>.trust strong,
    html body.ds .ds-first-screen>.trust strong.sm,
    html body .ds-first-screen>.trust strong,
    html body .ds-first-screen>.trust strong.sm {
        font-size: 28px !important;
    }

    html body.ds .ds-first-screen>.trust span,
    html body .ds-first-screen>.trust span {
        font-size: 11.5px !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__slide,
    html body .ds-first-screen>.sap-banner .sap-banner__slide {
        padding-top: 68px !important;
        padding-bottom: 15px !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__content h1,
    html body .ds-first-screen>.sap-banner .sap-banner__content h1 {
        font-size: 38px !important;
        margin-bottom: 12px !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__content p,
    html body .ds-first-screen>.sap-banner .sap-banner__content p {
        font-size: 15px !important;
        margin-bottom: 18px !important;
    }

    html body.ds .ds-first-screen>.sap-banner .sap-banner__controls,
    html body .ds-first-screen>.sap-banner .sap-banner__controls {
        bottom: 15px !important;
    }
}

/* ==========================================================================
   Trust / Key Figures Counter Grid Responsive Alignment
   - Desktop & Tablets (>= 768px): 4 columns for t4, 3 columns for t3
   - Mobile (<= 767.98px): 2 columns (2x2 grid of cards) for 4-item counters,
     clean responsive layout for 3-item counters, preventing any overflow/cut-off
   ========================================================================== */
@media (min-width: 768px) {
    /* 4-Column Counter Alignment (e.g. Home Page & Inner Pages) */
    html body .trust.t4 .container,
    html body.ds .trust.t4 .container,
    html body .trust:has(> .container > div:nth-child(4):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(4):last-child) .container {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* 3-Column Counter Alignment (e.g. Who We Are, Leadership, Culture, Careers) */
    html body .trust.t3 .container,
    html body.ds .trust.t3 .container,
    html body .trust:has(> .container > div:nth-child(3):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(3):last-child) .container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    html body .trust,
    html body.ds .trust {
        background: #ffffff !important;
        padding: 16px 0 !important;
        overflow: hidden;
    }

    /* 4-item counter (e.g. index.php and all 4-metric pages): 2x2 responsive card grid */
    html body .trust .container,
    html body.ds .trust .container,
    html body .trust.t4 .container,
    html body.ds .trust.t4 .container,
    html body .trust:has(> .container > div:nth-child(4):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(4):last-child) .container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3-item counter on tablet-portrait / medium screens */
    html body .trust.t3 .container,
    html body.ds .trust.t3 .container,
    html body .trust:has(> .container > div:nth-child(3):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(3):last-child) .container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Card styling for all counter items on mobile */
    html body .trust div,
    html body.ds .trust div,
    html body .trust div+div,
    html body.ds .trust div+div,
    html body .trust.t4 div,
    html body.ds .trust.t4 div,
    html body .trust.t4 div+div,
    html body.ds .trust.t4 div+div,
    html body .trust.t3 div,
    html body.ds .trust.t3 div,
    html body .trust.t3 div+div,
    html body.ds .trust.t3 div+div {
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        padding: 12px 8px !important;
        box-shadow: 0 2px 6px rgba(13, 24, 58, 0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-height: 72px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Handle 5th item if any 5-column trust exists */
    html body .trust div:nth-child(5),
    html body.ds .trust div:nth-child(5) {
        grid-column: 1 / -1 !important;
        max-width: 380px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Counter typography on mobile */
    html body .trust strong,
    html body.ds .trust strong,
    html body .trust strong.sm,
    html body.ds .trust strong.sm {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        color: var(--navy, #151f30) !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    html body .trust span,
    html body.ds .trust span {
        display: block !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        color: var(--muted, #64748b) !important;
        margin-top: 4px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
    }
}

/* For screens <= 540px, 3-item counters stack cleanly so text never truncates */
@media (max-width: 540px) {
    html body .trust.t3 .container,
    html body.ds .trust.t3 .container,
    html body .trust:has(> .container > div:nth-child(3):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(3):last-child) .container {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 16px !important;
    }

    html body .trust.t4 .container,
    html body.ds .trust.t4 .container,
    html body .trust:has(> .container > div:nth-child(4):last-child) .container,
    html body.ds .trust:has(> .container > div:nth-child(4):last-child) .container {
        gap: 8px !important;
        padding: 0 10px !important;
    }

    html body .trust.t4 div,
    html body.ds .trust.t4 div,
    html body .trust.t4 div+div,
    html body.ds .trust.t4 div+div {
        padding: 10px 6px !important;
    }

    html body .trust strong,
    html body.ds .trust strong,
    html body .trust strong.sm,
    html body.ds .trust strong.sm {
        font-size: 19px !important;
    }

    html body .trust span,
    html body.ds .trust span {
        font-size: 11px !important;
    }
}