/* ============================================================
   digitalInfrastructure.css
   Shares all fintech.css tokens; only hero-max-w and banner
   column widths differ to match the design spec.
   ============================================================ */

/* ── prevent any child from blowing out the viewport ── */
.di-page {
    overflow-x: hidden;
    width: 100%;
}
/* Decorative dotted background artwork — 1305 × 735 px, pinned to the top-right */
.ind-hero-bg {
    position: absolute;
    top: 100px;
    /* right: 0px; */
    left: 630px;
    width: 1305px;
    height: 735px;
    max-width: none;
    opacity: 1;
    transform: rotate(0deg);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ============================================================
   TYPOGRAPHY TOKENS  (identical to fintech.css)
   ============================================================ */
.text-display {
    font-size: 90px;
    line-height: 83px;
    letter-spacing: 0;
}

.banner-heading { font-size: 53px; line-height: 53px; font-weight: 300; }
.banner-body    { font-size: 30px; line-height: 30px; font-weight: 300; }

.body-25 { font-size: 25px; line-height: 110%; letter-spacing: 0; }
.body-22 { font-size: 22px; line-height: 160%; letter-spacing: 0; }

.btn-label { font-size: 22.17px; line-height: 100%; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */

/* Hero: 1340 × 295 px as per spec (vs 992px in fintech) */
.di-hero-max-w {
    position: relative;
    z-index: 1;
    max-width: 1346px;
    height: 295px;
    display: flex;
    align-items: center;
}
.di-page .hero-section {
    position: relative;
    overflow: hidden;
}
/* Banner columns: 256 px heading  |  880 px body */
.di-banner-heading-w { max-width: 256px; min-width: 256px; }
.di-banner-body-w    { max-width: 884px; }

/* ---- CTA button (shared) ---- */
.cta-btn {
    width: 326px;
    height: 61px;
    background-color: #4026B8;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* ============================================================
   CLOUD SERVICE MODELS SECTION
   ============================================================ */

/* ── Heading block: 1356 × 74 px ── */
.cm-heading-w {
    max-width: 1400px;
    min-height: 74px;
    display: flex;
    align-items: center;
}

.cm-heading {
    font-size: 90px;
    line-height: 83px;
    letter-spacing: 0;
    color: #242424;
    font-weight: 400;
}

/* ── Body paragraph: 1642 × 100 px ── */
.cm-body-w {
    max-width: 1642px;
    min-height: 100px;
}

.cm-body {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0;
    color: #6A6A6A;
    font-weight: 300;
}

/* ── Bottom layout wrapper ── */
.cm-bottom {
    align-items: flex-end;
}

/* ── LEFT COLUMN ──
   Height locked to the tall laptop image (720px) so justify-between
   places "Customized Solutions" at the very top and "Tailored For
   Every Business" at the very bottom — matching the original design. */
.cm-left {
    height: 720px;
}

/* "Customized Solutions" label: 341 × 32 px */
.cm-customized-label {
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0;
    color: #6A6A6A;
    font-weight: 400;
    max-width: 350px;
}

/* "Tailored For Every Business": 666 × 156 px */
.cm-tailored-heading {
    font-size: 90px;
    line-height: 83px;
    letter-spacing: 0;
    color: #242424;
    font-weight: 400;
    text-transform: capitalize;
    max-width: 666px;
}

/* ── RIGHT COLUMN ── */

/* Laptop image: 428 × 720 px */
.cm-img-laptop {
    width: 428px;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* SaaS diagram image: 428 × 347 px */
.cm-img-saas {
    width: 428px;
    height: 347px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Purple SaaS info box */
.cm-saas-box {
    width: 428px;
    min-height: 347px;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* SaaS box heading: 300 × 80 px */
.cm-saas-box-heading {
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0;
    color: #ffffff;
    font-weight: 500;
    max-width: 300px;
}

/* SaaS box body: 354 × 28 px */
.cm-saas-box-body {
    font-size: 26px;
    line-height: 90%;
    letter-spacing: 0;
    color: #ffffff;
    font-weight: 300;
    max-width: 354px;
}

/* ============================================================
   RESPONSIVE — small desktop / large tablet  1025px–1535px
   Scales fixed-pixel columns down so they fit without overflow
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1535px) {

    .cloud-models-section,
    .wc-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* ---- Cloud Service Models: heading + intro paragraph ---- */
    .cm-heading { font-size: 60px !important; line-height: 64px !important; }
    .cm-body    { font-size: 22px !important; line-height: 32px !important; }

    /* ---- Cloud Service Models: bottom row alignment ---- */
    .cm-bottom {
        align-items: flex-start !important;
        gap: 30px !important;
    }
    .cm-left {
        height: 421px !important;  /* matches cm-img-laptop height at this tier */
        max-width: 360px !important;
        justify-content: space-between !important;
    }
    .cm-customized-label {
        font-size: 24px !important;
        max-width: 100% !important;
    }
    .cm-tailored-heading {
        font-size: 52px !important;
        line-height: 56px !important;
        max-width: 100% !important;
    }
    .cm-right {
        gap: 12px !important;
    }
    .cm-img-laptop {
        width: 250px !important;
        /* height: 421px !important; */
    }
    .cm-img-saas {
        width: 250px !important;
        height: 203px !important;
    }
    .cm-saas-col {
        gap: 12px !important;
    }
    .cm-saas-box {
        width: 250px !important;
        min-height: 203px !important;
        padding: 24px !important;
    }
    .cm-saas-box-heading {
        font-size: 24px !important;
        max-width: 100% !important;
    }
    .cm-saas-box-body {
        font-size: 16px !important;
        line-height: 130% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    /* ---- Most Used Cloud Services — cards row ---- */
    .cc-inner {
        padding: 80px 60px 100px !important;
    }
    .cc-main-heading {
        font-size: 56px !important;
        line-height: 62px !important;
    }
    .cc-label {
        font-size: 26px !important;
        width: auto !important;
    }
    .cc-cards-row {
        gap: 12px !important;
        margin-top: 80px !important;
    }
    .cc-card {
        width: 300px !important;
        height: 340px !important;
        padding: 32px 28px !important;
    }
    .cc-card.cc-active {
        width: 460px !important;
    }
    .cc-content-collapsed,
    .cc-content-expanded {
        left: 28px !important;
        width: 244px !important;
    }
    .cc-content-expanded {
        width: 400px !important;
        bottom: 32px !important;
    }
    .cc-content-collapsed {
        top: 32px !important;
    }
    .cc-card-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .cc-card-heading {
        font-size: 28px !important;
        margin-top: 20px !important;
    }
    .cc-card-body {
        font-size: 18px !important;
        line-height: 130% !important;
        margin-top: 14px !important;
    }

    /* ---- Why Choose Us ---- */
    .wc-section {
        gap: 30px !important;
    }
    .wc-left {
        max-width: 480px !important;
    }
    .wc-heading {
        font-size: 52px !important;
        line-height: 56px !important;
        max-width: 100% !important;
        min-height: auto !important;
    }
    .wc-body {
        font-size: 20px !important;
        line-height: 28px !important;
        max-width: 100% !important;
        min-height: auto !important;
    }
    .wc-features { gap: 20px !important; margin-top: 48px !important; }
    .wc-feature-heading { font-size: 22px !important; max-width: 100% !important; }
    .wc-feature-body    { font-size: 16px !important; line-height: 140% !important; max-width: 100% !important; min-height: auto !important; }

    /* Why Choose Us images — same position:absolute overlap
       mechanism as the desktop design, scaled down, both images
       now equal size, and the whole composition nudged down a
       bit for more breathing room under the heading. */
    .wc-right {
        width: 380px !important;
        min-height: 600px !important;
        position: relative !important;
        margin-top: 40px !important;
    }
    .wc-img-man {
        width: 380px !important;
        height: 288px !important;
    }
    .wc-img-woman {
        position: absolute !important;
        right: 280px !important;
        top: 298px !important;
        width: 380px !important;
        height: 288px !important;
    }
}

/* ============================================================
   RESPONSIVE — tablet ≤ 1024 px
   ============================================================ */
@media (max-width: 1024px) {

    .text-display    { font-size: 60px; line-height: 64px; }
    .banner-heading  { font-size: 38px; line-height: 42px; }
    .banner-body     { font-size: 20px; line-height: 26px; }
    .body-22         { font-size: 18px; }

    .di-page .hero-section {
        padding-top: 160px;
        padding-bottom: 80px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .di-hero-max-w {
        max-width: 100%;
        height: auto;
    }

    /* Banner — stack vertically */
    .banner-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .di-banner-heading-w,
    .di-banner-body-w { max-width: 100%; min-width: unset; }

    /* Cloud models — scale type */
    .cm-heading    { font-size: 56px; line-height: 60px; }
    .cm-body       { font-size: 20px; line-height: 28px; }
    .cm-customized-label { font-size: 26px; line-height: 36px; }
    .cm-tailored-heading { font-size: 56px; line-height: 60px; max-width: 100%; }

    /* Stack bottom section vertically */
    .cm-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 48px;
    }

    /* Reset the desktop fixed height so the column doesn't over-stretch */
    .cm-left  { width: 100%; height: auto; }
    .cm-right { width: 100%; }

    /* Scale images */
    .cm-img-laptop {
        width: 100%;
        max-width: 428px;
        height: auto;
        min-height: 400px;
    }

    .cm-img-saas {
        width: 100%;
        max-width: 428px;
        height: auto;
    }

    .cm-saas-box {
        width: 100%;
        max-width: 428px;
    }

    /* Stack the two right columns side-by-side on tablet */
    .cm-right {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cm-saas-col { flex: 1; min-width: 0; }
    .cm-laptop-w { flex: 1; min-width: 0; }

    .cloud-models-section {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ============================================================
   RESPONSIVE — phone ≤ 640 px
   ============================================================ */
@media (max-width: 640px) {

    .text-display    { font-size: 36px; line-height: 40px; }
    .banner-heading  { font-size: 28px; line-height: 34px; }
    .banner-body     { font-size: 16px; line-height: 22px; }

    .di-page .hero-section {
        padding-top: 140px;
        padding-bottom: 48px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .banner-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .cta-btn { width: 100%; max-width: 326px; }

    /* Cloud models — mobile */
    .cm-heading    { font-size: 32px; line-height: 38px; }
    .cm-body       { font-size: 16px; line-height: 24px; }
    .cm-customized-label { font-size: 20px; line-height: 28px; }
    .cm-tailored-heading { font-size: 36px; line-height: 42px; }

    .cloud-models-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 60px !important;
    }

    /* Stack the two right sub-columns on mobile */
    .cm-right {
        flex-direction: column !important;
        width: 100%;
    }

    .cm-laptop-w,
    .cm-saas-col { width: 100%; }

    .cm-img-laptop,
    .cm-img-saas,
    .cm-saas-box { width: 100%; max-width: 100%; }

    .cm-img-laptop  { height: 340px; }
    .cm-img-saas    { height: auto; }

    .cm-saas-box-heading { font-size: 28px; }
    .cm-saas-box-body    { font-size: 18px; max-width: 100%; }
}


/* ============================================================
   MOST USED CLOUD SERVICES / INDUSTRY CAPABILITIES SECTION
   ============================================================ */

.cc-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Full-cover background image */
.cc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

/* Inner content stacks on top of bg */
.cc-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 140px 130px;
}

/* ── "Most Used Cloud Services" label ── */
.cc-label {
    width: 439px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    line-height: 83px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: 0;
    white-space: nowrap;
    padding-bottom: 60px;

}

/* ── "Industry-Leading Cloud Capabilities" heading ── */
.cc-main-heading {
    max-width: 1425px;
    font-size: 90px;
    line-height: 83px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: 0;
    text-transform: capitalize;
    margin: 50px 0 0 0;  /* gap between label and heading */
}

/* ── Cards row ── */
.cc-cards-row {
    display: flex;
    gap: 16px;
    margin-top: 155px;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
}

/* ── Individual card ──
   Only `width` is transitioned here, exactly as in the original
   spec — the box's own size/padding/height never changes. */
.cc-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 52px 48px;
    width: 426px;
    height: 426px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-sizing: border-box;
    cursor: default;
}

/* Expanded state — JS toggles this class */
.cc-card.cc-active {
    width: 650px;
}


.cc-card-content {
    position: absolute;
    left: 48px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.cc-content-collapsed {
    top: 52px;
    width: 330px;
    opacity: 1;
}

.cc-content-expanded {
    bottom: 52px;
    width: 554px;
    opacity: 0;
    pointer-events: none;
}

.cc-card.cc-active .cc-content-collapsed {
    opacity: 0;
    pointer-events: none;
}

.cc-card.cc-active .cc-content-expanded {
    opacity: 1;
    pointer-events: auto;
}

/* ── Card icon ── */
.cc-card-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Card heading ── */
.cc-card-heading {
    font-size: 40px;
    line-height: 100%;
    font-weight: 500;
    color: #242424;
    letter-spacing: 0;
    margin: 28px 0 0 0;
    /* Prevent long headings from wrapping awkwardly on unexpanded cards */
    white-space: normal;
}

/* ── Card body text ── */
.cc-card-body {
    font-size: 26px;
    line-height: 90%;
    font-weight: 300;
    color: #979797;
    letter-spacing: 0;
    margin: 20px 0 0 0;
}

/* ============================================================
   CC SECTION — RESPONSIVE tablet ≤ 1024 px
   ============================================================ */
@media (max-width: 1024px) {

    .cc-inner {
        padding: 80px 40px 80px;
    }

    .cc-label {
        width: auto;
        font-size: 26px;
        height: auto;
    }

    .cc-main-heading {
        font-size: 56px;
        line-height: 62px;
    }

    .cc-cards-row {
        flex-direction: column;
        align-items: center;
        margin-top: 60px;
        gap: 20px;
    }

    /* On tablet cards expand vertically rather than horizontally,
       and there's no hover distinction — every card just shows its
       full content, stacked and static. */
    .cc-card,
    .cc-card.cc-active {
        width: 100%;
        max-width: 600px;
        height: auto;
        min-height: 260px;
    }

    /* Drop the desktop two-copy crossfade trick: show only the
       expanded (full-text) copy, in normal document flow, always
       visible. Hide the collapsed duplicate entirely so its text
       isn't rendered twice. */
    .cc-content-collapsed {
        display: none;
    }

    .cc-card-content.cc-content-expanded {
        position: static;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .cc-card-heading { font-size: 30px; margin-top: 20px; }
    .cc-card-body    { font-size: 18px; }
}

/* ============================================================
   CC SECTION — RESPONSIVE phone ≤ 640 px
   ============================================================ */
@media (max-width: 640px) {

    .cc-inner {
        padding: 60px 20px 60px;
    }

    .cc-label {
        font-size: 20px;
        line-height: 1.4;
    }

    .cc-main-heading {
        font-size: 32px;
        line-height: 38px;
    }

    .cc-cards-row {
        margin-top: 40px;
        gap: 16px;
    }

    .cc-card,
    .cc-card.cc-active {
        max-width: 100%;
        padding: 32px 28px;
    }

    .cc-card-heading { font-size: 24px; }
    .cc-card-body    { font-size: 16px; line-height: 140%; }
}


/* ============================================================
   WHY CHOOSE US SECTION
   ============================================================ */

.wc-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

/* ── LEFT COLUMN: label, heading, copy + feature list ── */
.wc-left {
    max-width: 821px;
    flex: 1 1 auto;
    min-width: 0;
}

/* "Why Choose Us" label: 439 × 32 px */
.wc-label {
    width: 439px;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 83px;
    font-weight: 400;
    color: #6A6A6A;
    letter-spacing: 0;
}

/* "Why AppInSnap For Cloud Services?": 821 × 134 px */
.wc-heading {
    max-width: 821px;
    min-height: 134px;
    font-size: 90px;
    line-height: 83px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0;
    text-transform: capitalize;
    margin-top: 32px !important;
}

/* Paragraph: 742 × 90 px */
.wc-body {
    max-width: 742px;
    min-height: 90px;
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
    color: #6A6A6A;
    letter-spacing: 0;
    margin-top: 15px !important;
}

/* ── Feature list ── */
.wc-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 80px;
}

.wc-feature-heading {
    min-height: 36px;
    font-size: 30px;
    line-height: 100%;
    font-weight: 500;
    color: #242424;
    letter-spacing: 0;
    margin: 0;
}

.wc-feature-body {
    font-size: 22px;
    line-height: 90%;
    font-weight: 300;
    color: #979797;
    letter-spacing: 0;
    margin: 14px 0 0 0 !important;
}

/* Per-feature widths / heights as per spec */
.wc-feature:nth-child(1) .wc-feature-heading { max-width: 474px; }
.wc-feature:nth-child(1) .wc-feature-body    { max-width: 512px; min-height: 86px; }

.wc-feature:nth-child(2) .wc-feature-heading { max-width: 549px; }
.wc-feature:nth-child(2) .wc-feature-body    { max-width: 512px; min-height: 66px; }

.wc-feature:nth-child(3) .wc-feature-heading { max-width: 474px; }
.wc-feature:nth-child(3) .wc-feature-body    { max-width: 474px; min-height: 86px; }

/* ── RIGHT COLUMN — staggered image composition ── */
.wc-right {
    position: relative;
    width: 610px;
    min-height: 816px;
    flex-shrink: 0;
}

/* manThinking.svg: 610 × 462 px, top-right */
.wc-img-man {
    width: 610px;
    height: 462px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ipadWomen.svg: 446 × 338 px, staggered bottom-left of the above */
.wc-img-woman {
    position: absolute;
    right: 615px;
    top: 478px;
    width: 446px;
    height: 338px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ============================================================
   WHY CHOOSE US — RESPONSIVE tablet ≤ 1024 px
   ============================================================ */
@media (max-width: 1024px) {

    .wc-section {
        flex-direction: column;
        align-items: stretch;
        gap: 60px;
        padding-left: 40px !important;
        padding-right: 40px !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .wc-left { max-width: 100%; }

    .wc-label {
        width: auto;
        height: auto;
        font-size: 26px;
        line-height: 1.4;
    }

    .wc-heading {
        max-width: 100%;
        min-height: auto;
        font-size: 56px;
        line-height: 62px;
        margin-top: 20px !important;
    }

    .wc-body {
        max-width: 100%;
        min-height: auto;
        font-size: 20px;
        line-height: 28px;
        margin-top: 28px !important;
    }

    .wc-features {
        margin-top: 48px;
        gap: 28px;
    }

    .wc-feature-heading { font-size: 24px; }

    .wc-feature-heading,
    .wc-feature-body { max-width: 100% !important; }

    .wc-feature-body {
        font-size: 17px;
        line-height: 140%;
        min-height: auto !important;
    }

    /* Image composition — side by side on tablet, filling the full
       width of the column (same width as the text above) instead
       of a fixed max-width, so there's no empty space on either side. */
    .wc-right {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin: 0 !important;
    }

    .wc-img-man,
    .wc-img-woman {
        position: static !important;
        flex: 1 1 0 !important;
        min-width: 0 !important; /* overrides the flex item's automatic content-based minimum, which was letting one image hog the row */
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .wc-img-man {
        aspect-ratio: 610 / 462 !important;
    }

    .wc-img-woman {
        aspect-ratio: 446 / 338 !important;
    }
}

/* ============================================================
   WHY CHOOSE US — RESPONSIVE phone ≤ 640 px
   ============================================================ */
@media (max-width: 640px) {

    .wc-section {
        gap: 40px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .wc-label   { font-size: 20px; }
    .wc-heading { font-size: 32px; line-height: 38px; margin-top: 14px !important; }
    .wc-body    { font-size: 16px; line-height: 22px; margin-top: 20px !important; }

    .wc-features { margin-top: 32px; gap: 20px; }

    .wc-feature-heading { font-size: 20px; }
    .wc-feature-body    { font-size: 15px; }

    /* Same full-width side-by-side layout on phone. */
    .wc-right {
        gap: 12px !important;
    }
}