/* ============================================================
   blog.css
   ============================================================ */

/* ── Page wrapper ── */
.ind-page {
    overflow-x: hidden;
    width: 100%;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.ind-hero-section {
    position: relative;   /* add this */
    overflow: hidden;     /* add this */
    background-color: #f8f8f8;
    padding-top: 280px;
    padding-bottom: 280px;
    padding-left: 140px;
    padding-right: 140px;
}
/* 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;
}

.ind-hero-max-w {
    position: relative;   /* add this */
    z-index: 1;           /* add this */
    max-width: 1200px;
    min-height: 183px;
    display: flex;
    align-items: center;
}

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

/* ============================================================
   PURPLE BANNER SECTION
   ============================================================ */

.ind-banner-section {
    width: 100%;
    background-color: #4026B8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 140px;
    box-sizing: border-box;
}

.ind-banner-heading-w {
    max-width: 300px;
    min-width: 300px;
    min-height: 161px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ind-banner-heading {
    font-size: 53px;
    line-height: 53px;
    font-weight: 300;
    color: #ffffff;
    margin: 0;
}

.ind-banner-body-w {
    max-width: 820px;
    min-height: 90px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ind-banner-body {
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
    color: #ffffff;
    margin: 0;
}

/* ============================================================
   BLOG MAIN CONTENT SECTION
   ============================================================ */

.blg-content-section {
    background-color: #f8f8f8;
    padding: 200px 140px;
    box-sizing: border-box;
    padding-bottom: 65px;
}

.blg-content-wrap {
    display: flex;
    align-items: flex-start;
    gap: 80px; /* ← changed from 60px to align right col with card sections below */
    max-width: 1680px;
}

/* ── Left Column ── */
.blg-left-col {
    flex: 0 0 auto;
    width: 800px;
}

.blg-feat-img {
    width: 800px;
    height: 427px;
    display: block;
    object-fit: cover;
}

.blg-feat-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
}

.blg-feat-label {
    width: 235px;
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.blg-feat-date {
    width: 156px;
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.blg-feat-title {
    width: 790px;
    min-height: 120px;
    color: #242424;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    margin-top: 40px;
    display: flex;
    align-items: center;
}

.blg-feat-desc {
    width: 800px;
    min-height: 128px;
    color: #6A6A6A;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 0;
    margin-top: 20px;
}

.blg-read-more {
    display: inline-flex;
    align-items: center;
    width: 125px;
    height: 28px;
    color: #4026B8;
    font-weight: 300;
    font-size: 25px;
    line-height: 110%;
    letter-spacing: 0;
    text-decoration: none;
    margin-top: 24px;
}

.blg-read-more:hover {
    text-decoration: underline;
}

/* ── Right Column ── */
.blg-right-col {
    flex: 1;
    min-width: 0;
}

.blg-stories-heading {
    width: 446px;
    height: 60px;
    color: #242424;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    margin-bottom: 30px;
}

/* ── Story Item ── */
.blg-story-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 0;
}

.blg-story-badge {
    width: 49px;
    height: 49px;
    min-width: 49px;
    min-height: 49px;
    border-radius: 50%;
    background-color: #EFEFEF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #242424;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    flex-shrink: 0;
}

.blg-story-info {
    flex: 1;
    min-width: 0;
}

.blg-story-title {
    max-width: 460px;
    min-height: 60px;
    color: #242424;
    font-weight: 400;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.blg-story-date {
    width: 130px;
    height: 28px;
    color: #4026B8;
    font-weight: 300;
    font-size: 25px;
    line-height: 110%;
    letter-spacing: 0;
    margin-top: 12px;
    display: flex;
    align-items: center;
}

.blg-story-img {
    width: 156px;
    height: 158px;
    min-width: 156px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* ── Line Image Divider ── */
.blg-story-divider-img {
    width: 100%;
    max-width: 755px;
    height: 1px;
    border: none;
    display: block;
}

/* ============================================================
   BLOG CARDS SECTION — Two-Column Article Cards
   ============================================================ */

.blg-cards-section {
    background-color: #f8f8f8;
    padding: 0 140px 80px 140px;
    box-sizing: border-box;
}

.blg-cards-wrap {
    display: flex;
    align-items: flex-start;
    gap: 45px;
    max-width: 1680px;
}

/* ── Individual Card ── */
.blg-card {
    flex: 0 0 auto;
    width: 800px;
}

/* Card image — 800 × 427 px */
.blg-card-img {
    width: 800px;
    height: 427px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

/* Meta row: category label + date */
.blg-card-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
}

/* Category label — 83 px wide for Cloud., 150 px for Healthcare. */
.blg-card-label {
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Date — 155 × 32 px */
.blg-card-date {
    width: 156px;
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

/* Card title — 730 × 120 px */
.blg-card-title {
    width: 730px;
    min-height: 120px;
    color: #242424;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 40px 0 0 0;
    display: flex;
    align-items: center;
}

/* Card description — 690 × 128 px */
.blg-card-desc {
    width: 690px;
    min-height: 128px;
    color: #6A6A6A;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 0;
    margin: 20px 0 0 0;
}

/* Read More link — 125 × 28 px */
.blg-card-read-more {
    display: inline-flex;
    align-items: center;
    width: 125px;
    height: 28px;
    color: #4026B8;
    font-weight: 300;
    font-size: 25px;
    line-height: 110%;
    letter-spacing: 0;
    text-decoration: none;
    margin-top: 24px;
}

.blg-card-read-more:hover {
    text-decoration: underline;
}

/* ============================================================
   BLOG CARDS SECTION 2 — Strategy & Growth
   ============================================================ */

.blg-cards2-section {
    background-color: #f8f8f8;
    padding: 0 140px 200px 140px;
    box-sizing: border-box;
}

.blg-cards2-wrap {
    display: flex;
    align-items: flex-start;
    gap: 45px;
    max-width: 1680px;
}

/* ── Individual Card ── */
.blg-card2 {
    flex: 0 0 auto;
    width: 800px;
}

/* Card image — 800 × 427 px */
.blg-card2-img {
    width: 800px;
    height: 427px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

/* Meta row: category label + date */
.blg-card2-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
}

/* Category label */
.blg-card2-label {
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Date — 155 × 32 px */
.blg-card2-date {
    width: 156px;
    height: 32px;
    color: #4026B8;
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

/* Card title — 730 × 120 px */
.blg-card2-title {
    width: 746px;
    min-height: 120px;
    color: #242424;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 40px 0 0 0;
    display: flex;
    align-items: center;
}

/* Card description — 690 × 128 px */
.blg-card2-desc {
    width: 690px;
    min-height: 128px;
    color: #6A6A6A;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 0;
    margin: 20px 0 0 0;
}

/* Read More link — 125 × 28 px */
.blg-card2-read-more {
    display: inline-flex;
    align-items: center;
    width: 125px;
    height: 28px;
    color: #4026B8;
    font-weight: 300;
    font-size: 25px;
    line-height: 110%;
    letter-spacing: 0;
    text-decoration: none;
    margin-top: 24px;
}

.blg-card2-read-more:hover {
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVE — desktop & tablet ≤ 1920px
   ============================================================
   NOTE: the fixed-pixel layout above (two 800px cards + 45px gap
   + 140px side padding = 1925px) only fits on very wide monitors.
   Anything narrower than that — which includes basically every
   laptop screen (1440, 1536, 1366, 1280...) — needs these fluid
   rules, so the breakpoint now starts at 1920px instead of 1200px.
   ============================================================ */
@media (max-width: 1600px) {

    .blg-content-section {
        padding: 60px 40px;
    }

    .blg-content-wrap {
        gap: 40px;
        justify-content: center; /* avoids a lopsided empty gap on wider screens in this range */
    }

    .blg-left-col {
        width: 100%;
        max-width: 560px;
        flex: 1;
    }

    .blg-feat-img {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 427;
    }

    .blg-feat-title {
        width: 100%;
        font-size: 44px;
    }

    .blg-feat-desc {
        width: 100%;
        font-size: 22px;
    }

    .blg-feat-label,
    .blg-feat-date {
        font-size: 22px;
    }

    .blg-stories-heading {
        width: 100%;
        font-size: 44px;
    }

    .blg-story-title {
        font-size: 22px;
        max-width: 100%;
        min-height: auto;
    }

    .blg-story-date {
        font-size: 18px;
    }

    .blg-story-img {
        width: 110px;
        height: 110px;
        min-width: 110px;
    }

    /* Cards section */
    .blg-cards-section {
        padding: 0 40px 80px 40px;
    }

    .blg-cards-wrap {
        gap: 40px;
        justify-content: center;
    }

    .blg-card {
        width: 100%;
        max-width: 560px;
        flex: 1;
    }

    .blg-card-img {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 427;
    }

    .blg-card-title {
        width: 100%;
        font-size: 44px;
    }

    .blg-card-desc {
        width: 100%;
        font-size: 22px;
    }

    .blg-card-label,
    .blg-card-date {
        font-size: 22px;
    }

    /* Cards section 2 */
    .blg-cards2-section {
        padding: 0 40px 80px 40px;
    }

    .blg-cards2-wrap {
        gap: 40px;
        justify-content: center;
    }

    .blg-card2 {
        width: 100%;
        max-width: 560px;
        flex: 1;
    }

    .blg-card2-img {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 427;
    }

    .blg-card2-title {
        width: 100%;
        font-size: 44px;
    }

    .blg-card2-desc {
        width: 100%;
        font-size: 22px;
    }

    .blg-card2-label,
    .blg-card2-date {
        font-size: 22px;
    }
}

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

    .blg-content-wrap {
        flex-direction: column;
        gap: 60px;
    }

    .blg-left-col {
        width: 100%;
        max-width: 100%;
    }

    .blg-stories-heading {
        height: auto;
    }

    /* Cards section stacked */
    .blg-cards-wrap {
        flex-direction: column;
        gap: 60px;
    }

    .blg-card {
        width: 100%;
        max-width: 100%;
    }

    .blg-card-title {
        min-height: auto;
    }

    .blg-card-desc {
        width: 100%;
    }

    /* Cards section 2 stacked */
    .blg-cards2-wrap {
        flex-direction: column;
        gap: 60px;
    }

    .blg-card2 {
        width: 100%;
        max-width: 100%;
    }

    .blg-card2-title {
        min-height: auto;
    }

    .blg-card2-desc {
        width: 100%;
    }
}

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

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

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

    .ind-hero-heading {
        font-size: 60px;
        line-height: 64px;
    }

    .ind-banner-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-left: 40px;
        padding-right: 40px;
    }

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

    .ind-banner-heading {
        font-size: 38px;
        line-height: 42px;
    }

    .ind-banner-body {
        font-size: 20px;
        line-height: 26px;
    }
}

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

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

    .ind-hero-heading {
        font-size: 36px;
        line-height: 40px;
    }

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

    .ind-banner-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .ind-banner-body {
        font-size: 16px;
        line-height: 22px;
    }

    .blg-content-section {
        padding: 48px 20px;
    }

    .blg-feat-title {
        font-size: 32px;
    }

    .blg-feat-desc {
        font-size: 18px;
        line-height: 26px;
    }

    .blg-feat-label,
    .blg-feat-date {
        font-size: 18px;
    }

    .blg-read-more {
        font-size: 18px;
    }

    .blg-stories-heading {
        font-size: 32px;
    }

    .blg-story-badge {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 18px;
    }

    .blg-story-title {
        font-size: 18px;
    }

    .blg-story-date {
        font-size: 16px;
    }

    .blg-story-img {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    /* Cards section phone */
    .blg-cards-section {
        padding: 0 20px 60px 20px;
    }

    .blg-card-title {
        font-size: 32px;
    }

    .blg-card-desc {
        font-size: 18px;
        line-height: 26px;
    }

    .blg-card-label,
    .blg-card-date {
        font-size: 18px;
    }

    .blg-card-read-more {
        font-size: 18px;
    }

    /* Cards section 2 phone */
    .blg-cards2-section {
        padding: 0 20px 60px 20px;
    }

    .blg-card2-title {
        font-size: 32px;
    }

    .blg-card2-desc {
        font-size: 18px;
        line-height: 26px;
    }

    .blg-card2-label,
    .blg-card2-date {
        font-size: 18px;
    }

    .blg-card2-read-more {
        font-size: 18px;
    }
}