/* =========================================================================

   GLOBAL LAYOUT UNIFICATION & RESPONSIVENESS REFACTOR

   Matches the "Our Solutions" spacing and applies it globally.

   ========================================================================= */



/* =========================================================================

   CSS CUSTOM PROPERTIES — fluid design tokens anchored to 1440px reference

   Formula: clamp(MIN, px/1440*100 vw, MAX)

   ========================================================================= */

:root {

    --section-padding-y: clamp(40px, 5.5vw, 80px);

    --section-padding-x: clamp(16px, 4vw, 80px);

    --container-max: 1400px;

    --heading-xl: clamp(32px, 3.5vw, 72px);

    --heading-lg: clamp(26px, 2.77vw, 52px);

    --heading-md: clamp(20px, 2.22vw, 40px);

    --heading-sm: clamp(16px, 1.66vw, 28px);

    --gap-lg: clamp(24px, 2.78vw, 40px);

    --gap-md: clamp(16px, 2.08vw, 30px);

    --gap-sm: clamp(8px, 1vw, 16px);

}







/* 1. Global Container Alignment (Max 1200px / 75.9375vw / Centered) */

.homeClientHeader,

.homeClientSlider,

.homePartnerSlider,

.clientGrid,

.swsContainer,

.benefitsContainer,

.industriesContainer,

#homePageSection8 .hpSectionHeadDiv,

#CollabModelsWrapper,

#homePageSection10 .hpSectionHeadDiv,

#homePageSection10 .threeCardsDivParent,

#homePageSectionBlog .hpSectionHeadDiv,

.homeBlogSlider,

#homeFaq .hpSectionHeadDiv,

.faqContainer,

.staticContactWrapper,

#linkCardsWrapper,

.d360-container,

.footerContainer {

    width: var(--home-content-max-width, 75.9375vw) !important;

    max-width: 1200px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

}



@media (min-width: 1800px) {

    .footerContainer {

        font-size: 18px;

    }

}



/* 2. Global Section Vertical Spacing (Uniform Top/Bottom Padding) */

#homePartnerStatement,

#homePageClientLogos,

#homePageClientLogosSecondary,

#homeBenefits,

#homeIndustries,

#homePageSection8,

#homePageSection10,

#homePageSectionBlog,

#homeFaq,

#staticContactSection {

    padding-top: 8rem !important;

    padding-bottom: 8rem !important;

    position: relative;

    /* Reset legacy absolute-positioning & vw height hacks */

    min-height: auto !important;

    height: auto !important;

}



#footerSection {

    padding-top: 8rem !important;

    position: relative;

    /* Reset legacy absolute-positioning & vw height hacks */

    min-height: auto !important;

    height: auto !important;

}



/* Remove the per-section pseudo-elements entirely */

#homePartnerStatement::before,

#softwareWeSupport::before {

    display: none !important;

}



/* Apply the single continuous SVG to the shared wrapper — base/universal style (max-width:3840px wrapper removed; applies to all screens) */

.shared-bg-wrapper {

    position: relative;

    background-color: #F4F8FC;

    background-image: url("https://test.dynamics360.net/wp-content/themes/dynamics360-theme-COMPLETE-20260205/assets/svgOther/seorSection4.svg");



    /* Key fixes */

    background-size: cover;

    background-repeat: no-repeat;



    /* Optional: control scaling behavior */

    background-attachment: scroll;



    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8);

    background-position:

        clamp(5px, 0.5vw, 20px) clamp(-80px, -2.5vw, -20px);

}



@media (max-width: 767px) {



    /* --------------------------------------------------------

   *  2. SHARED BACKGROUND WRAPPER

   * -------------------------------------------------------- */

    .shared-bg-wrapper {

        position: relative;

        background-color: #F4F8FC;

        background-image: url(https://test.dynamics360.net/wp-content/themes/dynamics360-theme-COMPLETE-20260205/assets/svgOther/seorSection2Mobile.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-attachment: scroll;

        box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8);

        width: 105.7vw;

        margin-left: -4.8667vw;

    }

}



@media (max-width: 767px) {

    #homePartnerStatement {

        padding: 0px 15vw;

    }

}






/* Keep sections transparent so the wrapper background shows through */

#homePartnerStatement,

#softwareWeSupport {

    background: transparent !important;

    background-image: none !important;

    transform: none !important;

    padding-bottom: 8rem;

}



#homePageClientLogos {

    position: relative;

    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8);

    padding: 0 20px;

}





#headerSection {

    z-index: 9999 !important;

}



#homePartnerStatement,

#homePageClientLogos,

#homePageClientLogosSecondary,

#softwareWeSupport,

#homeBenefits,

#homePageSection8,

#homePageSection10,

#homePageSectionBlog,

#homeFaq,

#staticContactSection,

#footerSection {

    overflow: hidden;
    /* Contains floating elements/bubbles */

}



/* Restore sticky stacking for Industry Cards */

#homeIndustries {

    overflow: visible !important;

}



#homeIndustries .industriesContainer {

    overflow: visible !important;

}





/* 3. Equal vertical spacing between Headings and their Content */

.hpSectionHeadDiv,

.swsHeader,

.benefitsLeft,

.industriesHeader,

.faqHeader {

    margin-bottom: 3.5rem !important;

    margin-top: 0 !important;

    padding-bottom: 0 !important;

}



/* 4. Visual Enhancements: Alternating Shadows & Backgrounds */

/* Tinted Sections - Use more sophisticated subtle gradients */

#homeIndustries,

#homeFaq {

    background-color: #F5F8F5;

    box-shadow: none !important;

}



#homePageSection10 {



    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8) !important;

}



/* White Sections - Clean and breathable */

#homePageClientLogos,

#homeBenefits,

#homePageSection8,

#homePageSectionBlog {

    background-color: #FFFFFF !important;

}



#homeBenefits {

    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8) !important;

}



#homePageClientLogosSecondary {

    background-color: #F4F8FC !important;

    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8) !important;

}



#homeMethodology {

    background-color: #F5F8F5;

    box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8) !important;

}





/* Ensure foreground content sits above bubbles */

.swsContainer,

.industriesContainer,

.faqContainer,

.benefitsContainer,

.methodologyContainer,

.collabModelsWrapper,

.homeClientHeader,

.threeCardsDivParent {

    position: relative;

    z-index: 2;

}



/* 4b. Layered Section Backgrounds (SVGs) */

.layered-section {

    position: relative;

    overflow: hidden;
    /* Standard for sections to clip backgrounds */

}





/* Specific SVG Background Positionings */

.bg-seor-2 {

    object-position: center top;

    opacity: 0.8;

}





/* base/universal style (max-width:3840px wrapper removed; applies to all screens) */

.bg-layer {

    position: absolute;

    top: -30px;

    left: 30px;

    width: 100%;

    height: auto;

    pointer-events: none;

    z-index: 0;

}





.bg-seor-10 {

    object-position: right center;

    opacity: 1.7;

    left: -20px;

    top: 120px;

}



.bg-seor-mobile {

    display: none;

}



@media (max-width: 767px) {

    .bg-seor-desktop {
        display: none;
    }

    .bg-seor-mobile {
        display: block;
        object-position: center;
    }

}



/* 4c. Section Shadow Depths (Modern UI separation - refined) */

.shadow-top {

    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.02) !important;

}





@media (max-width: 767px) {

    /* Mobile Spacing */

    .homeClientHeader,

    .homeClientSlider,

    .homePartnerSlider,

    .swsContainer,

    .benefitsContainer,

    .industriesContainer,

    #homePageSection8 .hpSectionHeadDiv,

    #CollabModelsWrapper,

    #homePageSection10 .hpSectionHeadDiv,

    #homePageSection10 .threeCardsDivParent,

    #homePageSectionBlog .hpSectionHeadDiv,

    .homeBlogSlider,

    #homeFaq .hpSectionHeadDiv,

    .faqContainer,

    .staticContactWrapper,

    #linkCardsWrapper,

    .d360-container,

    .footerContainer {

        width: 100% !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

    }



    /* Mobile Vertical Section Padding */

    #homePageClientLogos,

    #homePageClientLogosSecondary,

    #homeBenefits,

    #homeIndustries,

    #homePageSection8,

    #homePageSection10,

    #homePageSectionBlog,

    #homeFaq,

    #staticContactSection,

    #footerSection {

        padding-top: 4rem !important;

        padding-bottom: 4rem !important;

        box-shadow: -5px 0.5px 12px 0.5px rgba(40, 84, 162, 0.8) !important;

    }



    #homePartnerStatement {

        padding-top: 4rem !important;

        padding-bottom: 4rem !important;

    }



    .swsSubtitle {

        font-family: "markProRegular";

        top: 19.333em;

        width: 53.3333vw;

        left: 14.1333vw;

        font-size: 3.2vw;

        line-height: 4.16vw;

        letter-spacing: 0.064vw;

    }



    .homeClientTetle {

        font-family: "markProHeavy", sans-serif;

        font-size: clamp(2.35rem, 5vw, 1.6rem);

        line-height: 1.2;

        text-align: left !important;

        background: linear-gradient(90deg, #3d3393 0%, #2b76b9 28%, #2cacd1 62%, #17b8b6 98%, #9ff0cf 100%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

    }



    #homePageClientLogosSecondary {

        padding: 0 20px;

    }



    #softwareWeSupport {

        padding-bottom: 4rem !important;

    }



    /* Mobile Heading Spacing */

    .hpSectionHeadDiv,

    .swsHeader,

    .benefitsLeft,

    .industriesHeader,

    .faqHeader {

        margin-bottom: 2rem !important;

    }

}



@media (max-width: 767px) {

    .bg-layer {

        position: absolute;

        top: -27px;

        left: 0;

        width: 100%;

        height: 70%;

        object-fit: cover;

        object-position: top;

    }

}

/* =========================================================================

   USER REQUESTED RESPONSIVE FIXES (MOBILE, TABLET, LARGE SCREENS)

   ========================================================================= */



/* 0. GLOBAL CONTAINER BASE — centered, 90% wide, max 1400px cap

   Applies from 481px up. Overridden by @media (max-width:767px) mobile

   and by @media (min-width:1440px) large-screen fluid scaling. */

.homeClientHeader,

.homeClientSlider,

.homePartnerSlider,

.clientGrid,

.swsContainer,

.benefitsContainer,

.industriesContainer,

#homePageSection8 .hpSectionHeadDiv,

#CollabModelsWrapper,

#homePageSection10 .hpSectionHeadDiv,

#homePageSection10 .threeCardsDivParent,

#homePageSectionBlog .hpSectionHeadDiv,

.homeBlogSlider,

#homeFaq .hpSectionHeadDiv,

.faqContainer,

.staticContactWrapper,

#linkCardsWrapper,

.d360-container,

.footerContainer {

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;

}



/* 1. BENEFIT METRICS FIX (Fix Cutoff & Spacing) */

.benefitCard {

    /* Ensure the card can grow to fit its content */

    height: auto !important;

    min-height: 0 !important;

    padding-bottom: 2.75rem !important;
    /* Make room for the absolute metric */

}



.benefitMetric {

    position: absolute !important;

    bottom: 1.5rem !important;

    right: 1.5rem !important;

    margin: 0 !important;

    padding: 0 !important;

    text-align: right !important;

    font-size: clamp(2rem, 5vw, 2.5rem) !important;
    /* Scale correctly without overflowing */

    height: 2vw;



}



/* 2. STATIC CONTACT INFO STRUCTURED LAYOUT */

.staticContactInfoItem {

    display: grid !important;

    grid-template-columns: 1.25rem 1fr !important;

    gap: 0.75rem 0.9375rem !important;

    align-items: start !important;

}



.staticContactInfoItem svg {

    margin-top: 0.1875rem !important;
    /* Align icon with first line of text */

}



/* 3. SLIDER VISIBILITY: 1 CARD PER VIEW ON MOBILE (No half cards) */

@media (max-width: 767px) {

    /* Force exactly 1 card to be 100% width, overriding flex basis */

    .homeBlogSliderTrack,

    .homeClientSliderTrack,

    .homePartnerSliderTrack {

        /* Use 0 gap, simulate gap with padding on children for perfect 100% swipe */

        gap: 0 !important;

    }



    .homeBlogCard,

    .homeClientLogoCard,

    .homePartnerLogoCard {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 10px !important;
        /* Visual padding replaces gap */

        box-sizing: border-box !important;

    }



    .homeBlogThumbWrapper {

        /* Maintain consistent aspect ratio for exactly 1 card */

        height: 60vw !important;

        max-height: 250px !important;

        margin-bottom: 1rem !important;

    }

}





/* 5. LARGE SCREEN FIXES (2560px / 4K) */

@media (min-width: 1440px) {

    /* Reduce excessive spacing between headings and content on giant screens */

    .hpSectionHeadDiv,

    .swsHeader,

    .benefitsLeft,

    .industriesHeader,

    .faqHeader {

        margin-bottom: 2.5rem !important;
        /* Tighter than default 3.5rem */

    }



    /* Ensure grid scaling works cleanly — rem so it scales via root font-size */

    #threeCardsDivIChildID10 {

        gap: 1.5rem !important;

    }

}



/* 6. "TALK TO AN EXPERT" BUTTON — base fluid style, no breakpoint needed */

.heroCtaBtn.contactFormOverlay {

    font-size: clamp(0.875rem, 1vw, 1.125rem) !important;

    padding: clamp(10px, 0.83vw, 12px) clamp(16px, 1.67vw, 24px) !important;

    white-space: nowrap !important;

    display: inline-flex !important;

    justify-content: center !important;

    align-items: center !important;

    width: auto !important;

    min-width: clamp(140px, 12.5vw, 180px) !important;

    height: auto !important;

    opacity: 1 !important;

    visibility: visible !important;

    color: #1a1a1a !important;

}



@media (max-width: 767px) {

    #homeMethodology .methodologySteps::after {

        left: 20px !important;

    }

}


@media (min-width: 768px) and (max-width: 1600px) {

    #homeMethodology .methodologySteps::after {

        left: 24px !important;

    }

}



/* Restore white text on mobile where background is dark gradient */

@media (max-width: 767px) {

    .heroCtaBtn.contactFormOverlay {

        color: #ffffff !important;

    }

}



/* Restore original mobile values at ≤480px */

@media (max-width: 560px) {

    .heroCtaBtn.contactFormOverlay {

        font-size: 1rem !important;

        padding: 12px 24px !important;

        min-width: 180px !important;

    }



    /* Restore methodology column stack at ≤480px */

    .methodologyContainer {

        flex-direction: column !important;

        gap: 2.5rem !important;

    }

    .methodologyLeft {

        flex: none !important;

        width: 100% !important;

        position: static !important;

    }

    .methodologyRight {

        flex: none !important;

        width: 100% !important;

    }

}



/* Hero heading — consistent width-based scaling 768px → 3000px+ (ref: 1440px)

   5.625vw = 81px at 1440px, identical to the original 9vh @ 900px height.

   Minimum raised to 3.5rem (56px) so 768–994px reads larger,

   closer to the 1440px reference appearance. */

@media (min-width: 768px) {

    #homePageCopy {

        font-size: clamp(3rem, 5vw, 9rem) !important;

        line-height: 1.05 !important;

    }

}



/* Hero CTA button — push up from 80vh to 73vh at 768–1300px

   Fixes the overlap at the 768px breakpoint entry. 1440px+ keeps original 80vh. */

@media (min-width: 768px) and (max-width: 1300px) {

    .heroCtaRow {

        top: 73vh !important;

    }

}



/* Benefit cards — 481–499px: single column (matches ≤480px mobile look) */

@media (min-width: 481px) and (max-width: 499px) {

    .benefitsSliderTrack {

        grid-template-columns: 1fr !important;

        gap: 1rem !important;

    }

    .benefitCard {

        width: 100% !important;

        max-width: 100% !important;

    }

}



/* Benefit cards — 500px–767px: 2 per row */

@media (min-width: 500px) and (max-width: 767px) {

    .benefitsSliderTrack {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 1rem !important;

    }

    .benefitCard {

        width: 100% !important;

        max-width: 100% !important;

    }

}



/* Partner slider viewport — ≤767px: fix 'very large gap before image'

   Root cause: flex: 1 1 auto with no explicit width makes card flex: 0 0 100%

   resolve against the unbounded track, not the visible viewport.

   Fix: explicit width:100% + overflow:hidden resolves the percentage correctly. */

@media (max-width: 767px) {

    .homePartnerSliderViewport {

        width: 100% !important;

        overflow: hidden !important;

    }

    .homePartnerLogo {

        width: auto !important;

        max-width: 120px !important;

        max-height: 55px !important;

    }

}



/* Partner slider — complete images only, never half-cut.

   50% + 50% = 100% with gap:0 already set → exactly 2 full logos per view.

   Below 400px only 1 fits → fall back to 100%. */

@media (min-width: 400px) and (max-width: 767px) {

    .homePartnerLogoCard {

        flex: 0 0 50% !important;

        max-width: 50% !important;

    }

}



/* Client logo grid — up to 550px: larger logos + less gap */

@media (max-width: 550px) {

    .clientLogoItem img {

        max-height: 3.25rem !important;

        max-width: 100% !important;

    }

    .clientGrid {

        gap: 10px !important;

    }

}



/* Client logo grid — 768px to 1350px: smaller logos + a bit more gap */

@media (min-width: 768px) and (max-width: 1350px) {

    .clientLogoItem img {

        max-width: 6rem !important;

        max-height: 2.75rem !important;

    }

    .clientGrid {

        gap: 1.5rem !important;

    }

}



/* =========================================================================

   COMPREHENSIVE RESPONSIVE ADDITIONS — 0px TO 3000px+

   Reference: 1440px design. Scales all elements proportionally.

   Preserves every intentional element shift from the reference layout.

   ========================================================================= */





/* -----------------------------------------------------------------------

   8. SMALL TABLET (481px – 768px)

   Hero and sections are already covered by mobile-alignment-fix.css.

   Add only the grid column fixes missing from existing files.

   ----------------------------------------------------------------------- */

/* 8. removed — industries and collab keep desktop column layout from 481px up */



/* -----------------------------------------------------------------------

   9. MOBILE METHODOLOGY STACK FIX (≤768px)

   mobile-alignment-fix.css handles text alignment but misses the

   flex-direction stack needed for the methodology layout.

   ----------------------------------------------------------------------- */

/* 9. removed — methodology keeps desktop row layout from 481px up */



/* -----------------------------------------------------------------------

   10. PROPORTIONAL SCALING: 1440px → 3840px (4K)

   Root font-size makes every rem-value proportional to viewport width,

   anchored at the 1440px reference design.



   Formula: html { font-size: calc(100vw / 90) }

     100vw / 90 = viewport_px / 90

     → 1440px : 1440 / 90 = 16px     (baseline — zero visual change at 1440)

     → 1920px : 1920 / 90 = 21.33px  (1.333× scale)

     → 2560px : 2560 / 90 = 28.44px  (1.778× scale)

     → 2880px : 2880 / 90 = 32px     (2.000× scale)

     → 3840px : 3840 / 90 = 42.67px  (2.667× scale — exact 3840/1440)



   Every rem-based padding, margin, font-size, and gap therefore scales

   at the same ratio as the viewport, producing a pixel-perfect enlarged

   copy of the 1440px layout on any larger screen.

   ----------------------------------------------------------------------- */

@media (min-width: 1440px) {



    html {

        /* 1rem = viewport / 90 → perfectly proportional to 1440px baseline */

        font-size: calc(100vw / 90);

    }



    /* Hero font: pure vw removes all fixed-px caps.

       Derivation: 60px (at 1440px) ÷ 1440 × 100 = 4.167vw

       → 1440px: 4.167vw = 60px   ✓ (identical to reference)

       → 1920px: 4.167vw = 80px   ✓ (1.333× proportional)

       → 3840px: 4.167vw = 160px  ✓ (2.667× proportional) */

}



/* Containers: remove the 1200px hard cap so width (68vw) scales freely.

       At 1440px: 68vw = 979px  — cap was never reached here, no visual change.

       At 3840px: 68vw = 2611px — exact 2.667× proportional scale. */

.homeClientHeader,

.homeClientSlider,

.homePartnerSlider,

.clientGrid,

.swsContainer,

.benefitsContainer,

.industriesContainer,

#homePageSection8 .hpSectionHeadDiv,

#CollabModelsWrapper,

#homePageSection10 .hpSectionHeadDiv,

#homePageSection10 .threeCardsDivParent,

#homePageSectionBlog .hpSectionHeadDiv,

.homeBlogSlider,

#homeFaq .hpSectionHeadDiv,

.faqContainer,

.staticContactWrapper,

#linkCardsWrapper,

.d360-container,

.footerContainer {

    max-width: none !important;

}



/* Methodology sticky offset: 100px / 1440 × 100 = 6.944vw

       At 1440px: 6.944vw = 100px ✓ (identical to reference)

       At 3840px: 6.944vw = 266px ✓ (2.667× proportional)

       Placed in ≥1440px only — below 1440px, original 100px from methodology.css stays. */

.methodologyLeft {

    top: 6.944vw !important;

}

}



/* =========================================================================

   11. FLUID UNITS SYSTEM — px → vw / rem

   Reference: 1440px design.

   Conversion formulas:

     vw  = ( px_at_1440 / 1440 ) × 100

     rem = px / 16  (at 1440px, 1rem = 16px — no visual change; scales via §10)

   ========================================================================= */



/* -----------------------------------------------------------------------

   A. GRID COLUMN DEFINITIONS (≥1200px desktop only)

   Replace hard px minmax() limits with fluid 1fr columns so the

   container width — not a fixed px minimum — governs column size.

   Tablet (769–1199px) and mobile breakpoints override via sections 7–9.

   ----------------------------------------------------------------------- */

@media (min-width: 1200px) {



    /* Industries: equal 1fr columns. Original repeat(5, minmax(180px,220px))

       causes content overflow when container < 5×200px. */

    .industriesCardsWrapper {

        grid-template-columns: repeat(5, 1fr) !important;

        gap: 1.25vw !important;
        /* 18px / 1440 × 100 */

        padding: 2.778vw 0 !important;
        /* 40px / 1440 × 100 */

    }



    /* SWS grid: original minmax(260px,1fr) overflows 979px container

       (4 × 260 = 1040 > 979). Switching to 1fr fills proportionally. */

    .swsGrid {

        grid-template-columns: repeat(4, 1fr) !important;

    }



    /* Client logo grid: vw gap — max-width governed by global container rule */

    .clientGrid {

        gap: 2.778vw !important;
        /* 40px / 1440 × 100 */

    }



    /* FAQ icon: 24px / 16 = 1.5rem */

    .faqIcon {

        width: 1.5rem !important;

        height: 1.5rem !important;

    }



    /* Blog slider navigation arrows: 40px / 16 = 2.5rem */

    .homeBlogArrow {

        width: 2.5rem !important;

        height: 2.5rem !important;

    }



    /* Client / partner logo wrapper padding: 10px / 16 = 0.625rem */

    .clientLogoWrapper {

        padding: 0.625rem !important;

    }

}



/* -----------------------------------------------------------------------

   B. BORDER-RADIUS — px → rem (base rule, all screen sizes)

   rem auto-scales via root font-size (§10) at ≥1440px.

   Mobile/tablet CSS does not set conflicting border-radius values.

   ----------------------------------------------------------------------- */



/* 16px / 16 = 1rem  →  1440px: 16px ✓  /  3840px: 42.67px ✓ */





/* 5px / 16 = 0.3125rem  →  1440px: 5px ✓  /  3840px: 13.3px ✓ */





/* 12px / 16 = 0.75rem  →  1440px: 12px ✓  /  3840px: 32px ✓ */

.faqItem {

    border-radius: 0.75rem !important;

}



/* -----------------------------------------------------------------------

   C. METHODOLOGY TRACK LINES & STEP CIRCLE — px → rem

   These are decorative/structural lines that should scale with the layout.

   ----------------------------------------------------------------------- */



/* Progress track line: 3px / 16 = 0.1875rem */

.methodologySteps::before,

.methodologySteps::after {

    width: 0.1875rem !important;

}



/* Step circle border: 3px / 16 = 0.1875rem */

.stepNumber {

    border-width: 0.1875rem !important;

}



/* =========================================================================

   12. INDUSTRY CARDS — LOTTIE ANIMATION REDESIGN

   Reference image: white card · animation centered top · label below · no desc

   ========================================================================= */



/* Card shell — clean white tile matching reference style */

.industryCard {

    background: #ffffff !important;

    padding: 2rem 1rem 1.75rem !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    min-height: clamp(150px, 14.6vw, 210px) !important;

    transition: transform 0.3s ease, box-shadow 0.3s ease !important;

    cursor: default !important;

    height: 14.4057vw;

    width: 13.0068vw;

    box-shadow: 0vw 0vw 0.13vw rgba(0, 0, 0, 0.2) !important;

}



.industryCard:hover {

    transform: translateY(-5px) !important;

    box-shadow: 0 10px 28px rgba(43, 118, 185, 0.1) !important;

}



/* Inner layout — animation above, label below */

.industryCardInner {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 1.25rem !important;

    width: 100% !important;

}



/* Animation container */

.industryCardAnim {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: clamp(80px, 9.03vw, 130px) !important;

    height: clamp(80px, 9.03vw, 130px) !important;

    flex-shrink: 0 !important;

}



/* Size the dotlottie-player element itself */

.industryCardAnim dotlottie-player {

    display: block !important;

    width: clamp(80px, 9.03vw, 130px) !important;

    height: clamp(80px, 9.03vw, 130px) !important;

}



/* Label — uppercase, tracked, matches reference */

.industryCard .industryLabel {

    font-size: 0.7rem !important;

    letter-spacing: 0.16em !important;

    text-transform: uppercase !important;

    color: #111827 !important;

    font-weight: 700 !important;

    font-family: "markProMedium", sans-serif !important;

    margin: 0 !important;

    line-height: 1.3 !important;

}



/* Hide old text elements that are no longer in the HTML

   (kept as a safeguard in case any legacy markup remains) */

.industryCard .industryCardDesc,

.industryCard .industryCardTitle,

.industryCard .industryCardContent {

    display: none !important;

}



/* Remove the gradient top-line accent on the redesigned cards */

.industryCard::after {

    display: none !important;

}





/* base/universal style (max-width:3840px wrapper removed; applies to all screens) */

.bg-layeer {

    position: absolute;

    left: -30px;

    bottom: -30px;

    width: 100%;

    height: auto;

    pointer-events: none;

    z-index: 0;

}





@media (max-width: 767px) {

    .industryCardAnim {

        width: 90px !important;

        height: 90px !important;

    }

    .industryCardAnim dotlottie-player {

        width: 90px !important;

        height: 90px !important;

    }

    .industryCard {

        min-height: 170px !important;

        padding: 1.5rem 0.75rem 1.25rem !important;

        width: 100% !important;

    }

}



/* Industry cards — gradient border activates on hover (all breakpoints)

   Uses layered background-clip technique: white fill inside, gradient on border.  */

.industryCard {

    border: 2px solid transparent !important;

    background:

        linear-gradient(#ffffff, #ffffff) padding-box,

        linear-gradient(60deg, transparent, transparent) border-box !important;

    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease !important;

}

.industryCard:hover {

    background:

        linear-gradient(#ffffff, #ffffff) padding-box,

        linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box !important;

}



/* Slider nav buttons — hidden everywhere except ≤500px slider */

.industriesSliderBtn {

    display: none;

}



/* ≤500px: single-card auto-slider layout */

@media (max-width: 500px) {

    .industriesSlider {

        position: relative;

        width: 100%;

        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

    }

    .industriesCardsMask {

        position: relative;

        width: 100%;

        overflow: hidden;

    }

    /* Track: flex row, no wrap, JS drives translateX */

    .industriesCardsWrapper {

        display: flex !important;

        flex-wrap: nowrap !important;

        width: 100% !important;

        overflow: visible !important;

        gap: 0 !important;

        padding: 0 !important;

        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;

        will-change: transform !important;

    }

    /* Each card container acts as a transparent 100vw slide */
    .industriesCardsWrapper .industryCard,
    .industriesCardsWrapper>* {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 45px !important;
        /* Gap on sides so arrows don't overlap */
        box-sizing: border-box !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        height: auto !important;
        min-height: 140px !important;
    }

    .industriesCardsWrapper .industryCard::before,
    .industriesCardsWrapper .industryCard::after {
        display: none !important;
    }

    /* The actual visible white card */
    .industriesCardsWrapper .industryCardInner {
        background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(60deg, transparent, transparent) border-box !important;
        box-shadow: 0vw 0vw 0.13vw rgba(0, 0, 0, 0.2) !important;
        border: 2px solid transparent !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1.2rem 0.5rem 1rem !important;
        /* Reduced height padding */
        box-sizing: border-box !important;
    }

    /* Scale animation down so it fits neatly in the narrowed content area */

    .industriesCardsWrapper .industryCardAnim,

    .industriesCardsWrapper .industryCardAnim dotlottie-player {

        width: 72px !important;

        height: 72px !important;

    }

    /* Slider nav buttons */

    .industriesSliderBtn {

        display: flex;

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        z-index: 10;

        background: rgba(255, 255, 255, 0.9);

        border: 1px solid #a0a0a0;

        border-radius: 50%;

        width: 36px;

        height: 36px;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        font-size: 1.4rem;

        line-height: 1;

        color: #345cad;

        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    }

    .industriesSliderBtn:hover {

        background: #345cad;

        color: #ffffff;

        border-color: #345cad;

    }

    .industriesSliderPrev {
        left: 4px;
    }

    .industriesSliderNext {
        right: 4px;
    }

}



/* 501–900px: 1 card centered on top row, then 2 + 2 below */

@media (min-width: 501px) and (max-width: 900px) {

    .industriesCardsWrapper {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        overflow: visible !important;

        gap: 0.875rem !important;

    }

    .industriesCardsWrapper .industryCard:first-child {

        grid-column: 1 / -1 !important;

        width: 50% !important;

        max-width: 50% !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }

    .industriesCardsWrapper .industryCard {

        width: 100% !important;

        height: auto !important;

    }

}



/* 900–1199px: 5 per row grid */

@media (min-width: 900px) and (max-width: 1199px) {

    .industriesCardsWrapper {

        display: grid !important;

        grid-template-columns: repeat(5, 1fr) !important;

        overflow: visible !important;

    }

    .industryCard {

        width: 100% !important;

        height: auto !important;

    }

    .industryCard .industryLabel {

        font-size: clamp(0.55rem, 0.85vw, 0.7rem) !important;

        letter-spacing: 0.08em !important;

        word-break: break-word !important;

        overflow-wrap: break-word !important;

        hyphens: auto !important;

    }

}



/* ==========================================================================

   COLLAB MODEL CARDS — RESPONSIVE LAYOUT

   501–767px : 2 per row

   768–1230px: row 1 → 2 cards (span 3 each of 6-col grid)

               row 2 → 3 cards (span 2 each of 6-col grid)

   1231px+   : unchanged (existing repeat(5,1fr) from main.css)

   ========================================================================== */



/* 501–767px: 2 per row */

@media (min-width: 501px) and (max-width: 767px) {

    #CollabModelsWrapper {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 1rem !important;

        flex-direction: unset !important;

        align-items: unset !important;

    }

    .collabModelCard {

        width: 100% !important;

        min-height: auto !important;

        padding: 1.25rem 1rem !important;

        border-radius: 0 !important;

    }

    .collabModelTitle {

        font-size: 1.05rem !important;

        word-break: break-word !important;

        overflow-wrap: break-word !important;

        min-height: auto !important;

    }

    .collabModelDesc {

        font-size: 0.85rem !important;

    }

    .collabModelNumber {

        font-size: 2.5rem !important;

    }

}



/* 768–1230px: 2 cards top row, 3 cards bottom row

   LCM(2,3) = 6 columns; top 2 span 3 each, bottom 3 span 2 each */

@media (min-width: 768px) and (max-width: 1230px) {

    #CollabModelsWrapper {

        display: grid !important;

        grid-template-columns: repeat(6, 1fr) !important;

        gap: 1.25rem !important;

    }

    .collabModelCard:nth-child(1),

    .collabModelCard:nth-child(2) {

        grid-column: span 3 !important;

    }

    .collabModelCard:nth-child(3),

    .collabModelCard:nth-child(4),

    .collabModelCard:nth-child(5) {

        grid-column: span 2 !important;

    }

    .collabModelCard {

        width: 100% !important;

        min-height: auto !important;

        padding: 1.5vw 1.25vw !important;

    }

    .collabModelTitle {

        font-size: clamp(0.9rem, 1.4vw, 1.5rem) !important;

        word-break: break-word !important;

        overflow-wrap: break-word !important;

        min-height: auto !important;

    }

    .collabModelDesc {

        font-size: clamp(0.75rem, 0.9vw, 0.95rem) !important;

    }

    .collabModelNumber {

        font-size: clamp(1.75rem, 3.5vw, 5vw) !important;

    }

}



/* ==========================================================================

   CASE STUDY CARDS — RESPONSIVE LAYOUT

   ≤500px    : reset legacy absolute positioning so cards don't overlap below

   481–767px : 2 per row, all content visible

   768–1200px: 2 per row, all content visible (height auto, no overflow)

   ========================================================================== */



/* ≤500px: pull cards back into normal document flow */

@media (max-width: 500px) {

    #homePageSection10 #threeCardsDivIChildID10,

    body.home #homePageSection10 #threeCardsDivIChildID10 {

        position: relative !important;

        top: auto !important;

        left: auto !important;

        transform: none !important;

        width: 90% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

    }

    #homePageSection10 {

        height: auto !important;

        min-height: auto !important;

        padding-bottom: 4rem !important;

    }

}



/* 481–767px: 2 per row */

@media (min-width: 481px) and (max-width: 767px) {

    body.home #homePageSection10.cs-refactor #threeCardsDivIChildID10.threeCardsDivParent,

    #homePageSection10 #threeCardsDivIChildID10 {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        flex-direction: unset !important;

        align-items: unset !important;

        gap: 16px !important;

        width: 95% !important;

        max-width: 100% !important;

    }

    .cs-refactor .cs-card-wrap {

        width: 100% !important;

    }

    .cs-refactor .cs-card {

        width: 100% !important;

        height: auto !important;

        min-height: unset !important;

    }

    .cs-refactor .cs-card-inner {

        padding: 14px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

    }

    .cs-refactor .caseStudyCardHeader {

        order: 0 !important;

        margin-bottom: 0 !important;

        min-height: auto !important;

    }

    .cs-refactor .caseStudyTitle {

        order: 1 !important;

        font-size: 0.95rem !important;

        min-height: auto !important;

        display: block !important;

        -webkit-line-clamp: unset !important;

        line-clamp: unset !important;

        overflow: visible !important;

        word-break: break-word !important;

        margin-bottom: 0 !important;

    }

    .cs-refactor .storyLogoParent {

        max-height: 28px !important;

    }

    .cs-refactor .caseStudyImageWrapper {

        order: 2 !important;

        overflow: hidden !important;

        margin-bottom: 0 !important;

        width: 100% !important;

    }

    .cs-refactor .caseStudyImage {

        height: 140px !important;

        width: 100% !important;

        object-fit: cover !important;

    }

    .cs-refactor .cs-btn {

        order: 3 !important;

        font-size: 13px !important;

        padding: 8px 16px !important;

        margin-top: auto !important;

    }

}



/* 768–1200px: 2 per row */

@media (min-width: 768px) and (max-width: 1200px) {

    body.home #homePageSection10.cs-refactor #threeCardsDivIChildID10.threeCardsDivParent,

    #homePageSection10 #threeCardsDivIChildID10 {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        flex-direction: unset !important;

        gap: 1rem !important;

        left: unset !important;

        transform: unset !important;

        position: relative !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }

    .cs-refactor .cs-card-wrap {

        width: 100% !important;

    }

    .cs-refactor .cs-card {

        width: 100% !important;

        height: auto !important;

        min-height: unset !important;

    }

    .cs-refactor .cs-card-inner {

        padding: 16px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 14px !important;

    }

    .cs-refactor .caseStudyCardHeader {

        order: 0 !important;

        margin-bottom: 0 !important;

        min-height: auto !important;

    }

    .cs-refactor .caseStudyTitle {

        order: 1 !important;

        font-size: clamp(1rem, 1.5vw, 1.15rem) !important;

        min-height: auto !important;

        display: block !important;

        -webkit-line-clamp: unset !important;

        line-clamp: unset !important;

        overflow: visible !important;

        word-break: break-word !important;

        margin-bottom: 0 !important;

    }

    .cs-refactor .storyLogoParent {

        max-height: clamp(22px, 2.5vw, 34px) !important;

    }

    .cs-refactor .flag {

        width: clamp(20px, 2.2vw, 28px) !important;

    }

    .cs-refactor .caseStudyImageWrapper {

        order: 2 !important;

        overflow: hidden !important;

        margin-bottom: 0 !important;

        width: 100% !important;

    }

    .cs-refactor .caseStudyImage {

        width: 100% !important;

        height: 180px !important;

        object-fit: cover !important;

    }

    .cs-refactor .cs-btn {

        order: 3 !important;

        font-size: clamp(12px, 1.4vw, 16px) !important;

        padding: 8px 16px !important;

        margin-top: auto !important;

    }

}



/* ==========================================================================

   CASE STUDY CARDS — LARGE SCREEN SCALING (1400px → 3000px)

   Card is already vw-based (17.1875vw × 19.8438vw).

   All fixed-px content values scaled to match via clamp().

   Reference: 1440px baseline.

   ========================================================================== */

@media (min-width: 1400px) {

    /* Button — keep proportional, hard cap at 22px so it never dominates */

    .cs-refactor .cs-btn {

        font-size: clamp(14px, 1.2vw, 22px) !important;

        padding: clamp(6px, 0.5vw, 12px) clamp(16px, 1.4vw, 32px) !important;

        margin-top: clamp(6px, 0.5vw, 12px) !important;

    }

    /* Header row */

    .cs-refactor .caseStudyCardHeader {

        min-height: clamp(40px, 2.78vw, 72px) !important;

        margin-bottom: clamp(8px, 0.6vw, 16px) !important;

    }

    .cs-refactor .storyLogoParent {

        max-height: clamp(32px, 2.22vw, 56px) !important;

    }

    .cs-refactor .flag {

        width: clamp(24px, 1.67vw, 44px) !important;

    }

    /* Title */

    .cs-refactor .caseStudyTitle {

        font-size: clamp(13px, 1vw, 22px) !important;

        min-height: unset !important;

        line-height: 1.3 !important;

    }

    /* Card inner padding */

    .cs-refactor .cs-card-inner {

        padding: clamp(12px, 0.9vw, 22px) !important;

    }

    /* Image wrapper takes all remaining vertical space */

    .cs-refactor .caseStudyImageWrapper {

        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow: hidden !important;

    }

    .cs-refactor .caseStudyImage {

        width: 100% !important;

        height: 100% !important;

        object-fit: fill !important;

        display: block !important;

    }

}



/* ==========================================================================

   FOOTER — RESPONSIVE LAYOUT

   ≤600px    : single-column mobile layout (extends existing ≤480px style)

   601–1100px: normal footer, footerCTA hidden, footerMiddle 3 columns

   1101px+   : full footer unchanged

   ========================================================================== */



/* ==========================================================================
   FOOTER MIDDLE — 1200px → 2200px consistency
   - Social icon <a> links: flex so no inline baseline whitespace
   - Map: remove any residual left offset, scale iframe height with vw
   - Contact margin capped so it doesn't push too far right
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 2200px) {

    /* Match footerMiddle columns to footerTop proportions */
    .footerMiddle {
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
        align-items: start !important;
    }

    /* Social icon links — remove inline baseline gap */
    .footerSocial .icons a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }

    .footerSocial .icons a svg {
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Map — fill its column fully */
    .footerMap {
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    .footerMap iframe {
        width: 100% !important;
        height: clamp(130px, 9vw, 195px) !important;
    }

    /* Contact — flush, no extra margin, icon stays inline */
    .footerContact {
        margin-left: 0 !important;
    }

    .footerContact p {
        display: flex !important;
        align-items: flex-start !important;
        gap: clamp(6px, 0.45vw, 10px) !important;
        font-size: clamp(11px, 0.8vw, 15px) !important;
    }

    .footerContact p svg {
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        vertical-align: unset !important;
    }
}

/* ≤600px: single-column mobile footer */

@media (max-width: 600px) {

    .footerTop,

    .footerMiddle {

        grid-template-columns: 1fr !important;

    }

    .footerBottom {

        flex-direction: column !important;

        gap: 10px !important;

        text-align: center !important;

    }

    .footerCTA {

        border-left: none !important;

        padding-left: 0 !important;

    }

    .footerContact {

        margin-left: 0 !important;

    }

    .ctaBtn {

        width: 100% !important;

        text-align: center !important;

    }

}



/* 601–1100px: hide footer CTA, collapse middle to 3 columns */

@media (min-width: 601px) and (max-width: 1100px) {

    .footerCTA {

        display: none !important;

    }

    .footerMiddle {

        grid-template-columns: 1.5fr 1fr 1fr !important;

    }

}