/* ============================================
   NEXTINDIA PAGE - BERTELSMANN NEXT INDIA (BNI)
   Built from Figma Design: BII BNI landing page
   Figma fileKey: aEooLVCISdYvjpyUwNTPVq
   ============================================
   Figma tokens (from MCP):
   - fill_V9JOD0: #F2F3F7 (page/section background)
   - fill_8R4PK8: #FFFFFF
   - fill_DGX2KU: #002D65 (dark blue, headings)
   - fill_7KY9EH: #000000 (body text)
   - fill_JR7W55: rgba(150, 191, 243, 0.3) (badge/pill)
   - fill_D3Z5JV: linear-gradient(90deg, rgba(0,45,101,1) 0%, rgba(43,91,152,1) 100%)
   - fill_GG08BG: linear-gradient(141deg, rgba(255,255,255,1) 28%, rgba(150,191,243,1) 100%)
   - style_8AX72R: Gilroy-Bold 45px, line-height 1.238em
   - style_Y4EAXT: Gilroy-Medium 17px, line-height 1.588em
   - style_8L16QQ: Gilroy-Medium 20px, line-height 1.35em, LEFT
   - style_SNT1T2: Gilroy-Bold 50px, line-height 1.238em, TITLE, LEFT
   - style_QQSQ5A: Gilroy-Medium 17px, line-height 1.588em, LEFT (LTG body)
   - style_LSM2JN: Gilroy-SemiBold 25px, line-height 1.225em
   - style_9P47LK: Gilroy-Bold 45px, line-height 1.238em, TITLE, LEFT
   - Cards: borderRadius 25px; effect_6ESDGM: 0 4px 115px rgba(0,0,0,0.1)
   - layout: max-width 1353.98px for cards
   ============================================ */

/* Font Faces */
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-MediumItalic';
    src: url('../fonts/Gilroy-MediumItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main Container – Figma body typography */
main.scroller_container {
    background-color: #F2F3F7;
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    contain: layout style;
}

/* ===========================
   HERO SECTION
   =========================== */
.nextindia-hero {
    position: relative;
    background-color: #0a1929;
    background-image: url('../images/parallel-section-gradient-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 150px 0 100px 0;
}

/* Dotted world map overlay on hero */
.nextindia-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/parallel-section-dots-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Hero Background Layers - hidden so only gradient + dots show */
.hero-bg-clip,
.hero-bg-mask,
.hero-clip-left,
.hero-clip-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.hero-bg-mask {
    background-size: auto 100%;
    z-index: 2;
    opacity: 0;
}

.hero-clip-left {
    background-position: left center;
    z-index: 3;
    opacity: 0;
}

.hero-clip-right {
    background-position: right center;
    z-index: 3;
    opacity: 0;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: -80px auto 0;
    padding: 0 30px;
    text-align: center;
}

.hero-title {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 86px;
    line-height: 1.238em;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(126deg, rgba(255, 255, 255, 1) 0%, rgba(150, 191, 243, 1) 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.588em;
    color: #FFFFFF;
    text-align: center;
    max-width: 928px;
    margin: 0 auto;
}

/* ===========================
   BUILDING SCALE WITH PATIENT CAPITAL SECTION
   =========================== */
.building-scale-section {
    position: relative;
    margin-top: -120px;
    padding: 0 0 30px 0;
    z-index: 5;
}

.building-scale-card {
    position: relative;
    background: #FFFFFF;
    border-radius: 25px;
    overflow: visible;
    box-shadow: 0px 4px 115.4px 0px rgba(0, 0, 0, 0.1);
    min-height: 560px;
    padding-left: 0;
}

.building-scale-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 69.5%;
    height: 100%;
    object-fit: cover;
    /* Anchor left so chart/landmarks stay visible; new hero has graphic left, white space right */
    object-position: left center;
    border-radius: 25px 0 0 25px;
    z-index: 1;
    /* Fade right edge over the white area so chart isn’t cut; blend into content */
    -webkit-mask-image: linear-gradient(to right, black 62%, transparent 92%);
    mask-image: linear-gradient(to right, black 80%, transparent 99%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.building-scale-content {
    position: relative;
    z-index: 2;
    margin-left: 53%;
    padding: 56px 70px 48px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.building-scale-logo {
    margin-bottom: 20px;
}

.building-scale-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.building-scale-title {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.238em;
    text-transform: capitalize;
    color: #002D65;
    margin-bottom: 28px;
}

.building-scale-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.588em;
    color: #1a1a1a;
    margin-bottom: 18px;
}

.building-scale-text:last-child {
    margin-bottom: 0;
}

/* ===========================
   WHAT IS BERTELSMANN NEXT SECTION
   =========================== */
.what-is-section {
    padding: 10px 0 30px 0;
    background: #F2F3F7;
}

.what-is-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 30px;
}

.bnext-logo {
    margin-bottom: 40px;
}

.bnext-logo img {
    max-width: 260px;
    margin: 0 auto;
    display: block;
}

.what-is-title {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.238em;
    text-transform: capitalize;
    color: #002D65;
    text-align: center;
    margin-bottom: 21px;
    max-width: 542px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

.what-is-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.588em;
    color: #1a1a1a;
    text-align: center;
    max-width: 976px;
    margin: 0 auto 21px auto;
    position: relative;
    z-index: 10;
}

.what-is-text:last-of-type {
    margin-bottom: 0;
}

/* ===========================
   IN THE NEWS SECTION (3 news cards side-by-side, transparent)
   Based on Figma: style_KI01SH, layout_X8Y3HO, style_BMNYR6, style_I06B0R
   =========================== */
.in-the-news-section {
    padding: 60px 0 80px 0;
    background: transparent;
}

.in-the-news-title {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.238em;
    color: #002D65;
    text-align: center;
    text-transform: capitalize;
    margin: 0 auto 50px auto;
    max-width: 247px;
}

.news-cards-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.news-card {
    flex: 0 0 auto;
    width: 434.18px;
    max-width: 100%;
    min-height: 580px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.news-card-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #f5f7fa;
}

.news-card-image .news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card-source {
    padding: 20px 27px 16px 27px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.news-source-logo {
    max-height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

.news-source-text {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-source-text.yourstory {
    color: #F42534;
    font-weight: 400;
}

.news-card-headline {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.225em;
    letter-spacing: 0%;
    color: #002D65;
    margin: 0 27px 28px 27px;
    flex-grow: 1;
    text-align: left;
}

/* Footer: separator line + Read More (line close to Read More) */
.news-card-footer {
    margin-top: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding-right: 27px;
}

.news-card-separator {
    border: none;
    border-top: 1px solid #E4E4E4;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.225em;
    letter-spacing: 0%;
    color: #002D65;
    text-decoration: none;
    padding: 36px 0 20px 0;
    transition: color 0.3s ease;
}

.news-read-more:hover {
    color: #002D65;
    opacity: 0.8;
}

.read-more-arrow {
    width: 16.16px;
    height: 12.06px;
    object-fit: contain;
    display: inline-block;
}

/* Navigation Arrows */
.news-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.news-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ced4da;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1e293b;
}

.news-nav-btn:hover {
    border-color: #007bff;
    background: #f8f9fa;
    color: #007bff;
}

.news-nav-btn:active {
    transform: scale(0.95);
}

.news-nav-btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 992px) {
    .news-cards-row {
        gap: 25px;
    }
    .news-card {
        min-width: 250px;
        max-width: 320px;
    }
}

@media (max-width: 992px) {
    .news-cards-row {
        gap: 15px;
        padding: 0 15px;
    }
    .news-card {
        flex: 0 0 auto;
        width: calc(33.333% - 10px);
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .in-the-news-section {
        padding: 50px 0 60px 0;
    }
    .in-the-news-title {
        font-size: 36px;
        line-height: 1.238em;
        margin-bottom: 40px;
        max-width: 100%;
    }
    .news-cards-row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0 20px;
    }
    .news-card {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        max-width: 434.18px;
    }
    .news-card-image {
        height: 280px;
    }
}

.what-is-subheading {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.225em;
    color: #1a1a1a;
    text-align: center;
    margin: 40px auto 8px auto;
    max-width: 740px;
    position: relative;
    z-index: 10;
}

/* Platforms Section with Cards and Globe Background */
.platforms-section {
    position: relative;
    margin: 0;
    min-height: auto;
    padding-bottom: 60px;
}

/* Globe as background overlay - Centered and starts from subheading */
.globe-background {
    position: absolute;
    top: -205px;
    left: 80%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 700px;
    background-image: url('../images/hap-2-4852f2.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

.platform-cards {
    display: flex;
    justify-content: center;
    gap: 39px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    padding-bottom: 50px;
    padding-top: 0;
    max-width: 1080px;
    margin: 80px auto 0 auto;
}

.platform-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px 20px 14px 20px;
    width: 235px;
    height: auto;
    min-height: 72px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    padding-top: 48px;
}

.platform-icon {
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
}

.platform-icon img {
    width: 96px;
    height: 96px;
    display: block;
    margin: 0 auto;
}

.platform-content {
    text-align: center;
    width: 100%;
    padding-top: 8px;
}

.platform-card h4 {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.35em;
    color: #1a1a1a;
    margin: 12px 0 0 0;
}

.platform-subtitle {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.35em;
    color: #666;
    margin-top: 8px;
    padding: 0 6px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.what-is-highlight {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.225em;
    background: linear-gradient(90deg, rgba(0, 45, 101, 1) 0%, rgba(43, 91, 152, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin: -20px auto 0 auto;
    max-width: 830px;
    position: relative;
    z-index: 3;
    padding: 0 20px;
}

/* ===========================
   SHARED CARD COMPONENTS
   =========================== */
.white-card,
.blue-card {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 60px 50px;
    margin: 0 0 30px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.blue-card {
    background: #002D65;
    color: #FFFFFF;
}

/* ===========================
   NETWORK SECTION – Figma exact: Rectangle 31, Rectangle 47, Rectangle 48
   fill_5KDUJ0 #002D65 | layout_HDDEN3 / layout_OP3MQI 1353.98×890.45 | borderRadius 25px
   =========================== */
/* Rectangle 31 / 47 / 48 – content centered, line covers whole bar */
.network-card {
    background: #002D65;
    border-radius: 25px;
    width: 100%;
    max-width: 1353.98px;
    min-height: 890.45px;
    margin-left: auto;
    margin-right: auto;
    padding: 70px 48px 60px 48px;
    box-sizing: border-box;
}

/* Title: style_9BPPDC – centered */
.network-card .network-card-title {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.225em;
    text-transform: capitalize;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto 17px auto;
    max-width: 1073px;
    display: block;
}

/* Subtitle: style_A0BH3W – centered */
.network-card .network-card-subtitle {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto 70px auto;
    max-width: 1102px;
    display: block;
}

/* ===========================
   TYPOGRAPHY COMPONENTS
   =========================== */
.section-tag {
    display: inline-block;
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #002D65;
    background: rgba(0, 45, 101, 0.1);
    padding: 8px 20px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.section-heading {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.35em;
    color: #002D65;
    margin-bottom: 25px;
}

.blue-card .section-heading,
.blue-card .card-title {
    color: #FFFFFF;
}

.card-title {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.4em;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.card-subtitle {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.588em;
    color: #FFFFFF;
    margin-bottom: 40px;
}

.section-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.588em;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.section-subheading {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.5em;
    color: #1a1a1a;
    margin: 35px 0 30px 0;
}

.section-highlight {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-size: 26px;
    line-height: 1.5em;
    color: #0052a1;
    margin-top: 40px;
}

/* ===========================
   NETWORK OF OPERATING PLATFORMS SECTION
   =========================== */
.network-section,
.bni-section,
.quotes-section,
.profile-section,
.letstransport-section,
.footer-cta-section {
    padding: 60px 0;
    background: transparent;
}

/* Let the blue card and tab bar use full width (no container max-width constraint) */
.network-section .network-section-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 1400px) {
    .network-section .network-section-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ===========================
   WHAT IS BERTELSMANN NEXT SECTION
   =========================== */
.platforms-visual {
    margin: 50px 0;
    text-align: left;
}

.platforms-visual img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

/* ===========================
   SHARED CARD COMPONENTS
   =========================== */
.card-image {
    text-align: center;
    padding: 20px;
}

.card-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

.card-content {
    padding: 20px;
}

/* ===========================
   HEADER / TABS – Figma: style_APCNNN 22px, full-width bar, no purple / focus outline
   =========================== */
/* Tabs: 3 divs in a single line, no space between them */
.network-card .platform-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
    padding-bottom: 20px;
    width: 100%;
    min-width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    box-sizing: border-box;
    background: transparent;
}

/* Each tab item flexes to fill the bar so they fit the bottom line */
.network-card .platform-tabs .tab-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.network-card .platform-tabs .tab-item+.tab-item {
    margin-left: 0;
}

/* Bottom line: one continuous line, simple gradient, less opaque at the ends */
.network-card .platform-tabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    min-width: 100%;
    background: linear-gradient(90deg, rgba(91, 143, 212, 0.2) 0%, rgba(91, 143, 212, 0.85) 20%, rgba(91, 143, 212, 0.9) 50%, rgba(91, 143, 212, 0.85) 80%, rgba(91, 143, 212, 0.2) 100%);
    pointer-events: none;
    border: none;
    border-radius: 0;
}

.network-card .tab-btn {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2272727272727273em;
    padding: 12px 20px;
    margin: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: #2B5B98;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.25s ease;
    outline: none !important;
    position: relative;
    box-shadow: none !important;
    display: block;
    width: 100%;
    min-width: 0;
}

.network-card .tab-btn:focus,
.network-card .tab-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.network-card .tab-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Active tab: white text + glowing white underline (stroke_ZY7WE6 – extends slightly beyond text) */
.network-card .tab-btn.active {
    color: #FFFFFF;
}

/* Active tab (clicked section): simple white gradient, less opaque at ends, no glow no border */
.network-card .tab-item .tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Tab section: responsive base so it never overflows */
.network-card .platform-tabs {
    max-width: 100%;
    box-sizing: border-box;
}
.network-card .tab-btn {
    box-sizing: border-box;
    white-space: nowrap;
}

/* Tab section: force responsive stacking from 991px down (overrides base) */
@media screen and (max-width: 991px) {
    .network-card .platform-tabs {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .network-card .platform-tabs .tab-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 4px;
    }
    .network-card .platform-tabs .tab-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .network-card .tab-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px;
        text-align: center;
        padding: 14px 16px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
}
@media screen and (max-width: 575px) {
    .network-card .tab-btn {
        font-size: 16px;
        padding: 12px 14px;
        min-height: 44px;
    }
}
@media screen and (max-width: 430px) {
    .network-card .platform-tabs {
        padding-bottom: 20px !important;
    }
    .network-card .platform-tabs .tab-item {
        padding-bottom: 18px;
        margin-bottom: 2px;
    }
    .network-card .tab-btn {
        font-size: 15px;
        padding: 12px 14px;
        min-height: 44px;
    }
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Figma: 37px from line to tab heading. style_5Q8CB5 – 18px, layout 723×27 */
.network-card .tab-content {
    padding-top: 37px;
}

/* Tab heading: Figma style_5Q8CB5 – Gilroy-SemiBold 18px, line-height 1.5em; one line on desktop */
.network-card .tab-heading {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto 50px auto;
    max-width: 100%;
    display: block;
}

@media (min-width: 1200px) {
    .network-card .tab-heading {
        white-space: nowrap;
    }
}

@media (max-width: 1199px) {
    .network-card .tab-heading {
        white-space: normal;
    }
}

/* ===========================
   COMPANY GRIDS – Figma: style_CKK7W9 (Gilroy-Medium 16px, line-height 1.375em), fill_XHZJDJ #FFFFFF
   Dividers: stroke_BRTK1D gradient #002D65 → #101820 → #002D65 (dark/black gradient lines)
   =========================== */
.companies-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 4-column grid – Rectangle 47 (HR Tech), Rectangle 48 (Pharma Tech): centered. Equal row heights for aligned dividers. */
.network-card .companies-row-four {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(140px, 1fr));
    max-width: 1174.67px;
    margin: 0 auto;
    gap: 0;
    border-top: none;
    align-items: stretch;
}

/* 6 sections: 3×2 grid (Figma Mobile Ad Tech). Centered. Equal row heights so horizontal dividers align. */
.network-card .companies-row-six {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(140px, 1fr));
    max-width: 1174.67px;
    margin: 0 auto;
    gap: 0;
    border-top: none;
    align-items: stretch;
}

.network-card .company-col {
    text-align: center;
    padding: 36px 24px 40px;
    border-right: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 140px;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

/* Dark gradient divider lines (stroke_BRTK1D): right edge for cols 1–2 in 6-section grid */
.network-card .companies-row-six .company-col:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, #002D65 0%, #101820 50%, #002D65 100%);
    pointer-events: none;
}

/* Dark gradient divider: bottom edge for row 1 (first 3 items) – 6-section grid only */
.network-card .companies-row-six .company-col:nth-child(-n+3)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, #002D65 0%, #101820 50%, #002D65 100%);
    pointer-events: none;
}

/* Dark gradient vertical dividers for 4-column grid too */
.network-card .companies-row-four .company-col {
    border-right: none;
}

.network-card .companies-row-four .company-col:not(:nth-child(4n))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, #002D65 0%, #101820 50%, #002D65 100%);
    pointer-events: none;
}

.network-card .companies-row-four .company-col:last-child {
    border-right: none;
}

/* Logo: layout_R5JN26 136.1×47.78, layout_7PFYSH 128.69×35.31, layout_81FIT3 126.71×34.19, etc. */
.network-card .company-logo {
    max-width: min(180px, 100%);
    width: auto;
    height: auto;
    max-height: 48px;
    margin: 0 auto 14px auto;
    display: block;
    object-fit: contain;
}

/* Docuvera: ensure logo matches height of other platform logos (user said it was too small) */
.network-card .company-logo.network-card-logo-docuvera {
    max-height: 48px;
    min-height: 44px;
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Company name (text-only e.g. EMBRACE, Sun Day) – same style for span or p */
.network-card .company-name,
.network-card .company-name-text {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3em;
    color: #FFFFFF;
    margin-bottom: 8px;
    display: block;
}

/* style_CKK7W9 – Gilroy-Medium 16px, line-height 1.375em, CENTER */
.network-card .company-desc {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.375em;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Summary: style_MHB3Y1 – one line on desktop */
.network-card .platform-summary {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.08em;
    text-align: center;
    margin: 48px auto 0 auto;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background: linear-gradient(169deg, rgba(255, 255, 255, 1) 0%, rgba(150, 191, 243, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 992px) {
    .network-card .platform-summary {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .network-card .platform-summary {
        white-space: normal;
    }
}

/* Network closing statement – transparent background, gradient text, matching typography */
.network-closing-section {
    background: transparent;
    padding: 56px 24px 64px;
}

.network-closing-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Readable on white: dark blue → medium blue gradient (site palette #002D65, #2B5B98) */
.network-closing-text {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.35em;
    margin: 0 auto 20px auto;
    background: linear-gradient(169deg, #002D65 0%, #1a4a8a 45%, #2B5B98 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.network-closing-text:last-child {
    margin-bottom: 0;
}

.network-closing-text.network-closing-emphasis {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-size: 26px;
    line-height: 1.3em;
    background: linear-gradient(169deg, #002D65 0%, #2B5B98 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.network-closing-text b {
    -webkit-text-fill-color: inherit;
    background: none;
    font-weight: 700;
}

/* Empty 6th cell in Pharma grid (reference has five cards + empty slot) */
.network-card .company-col-empty {
    min-height: 0;
    padding: 0;
    border: none;
}

.network-card .company-col-empty::before,
.network-card .company-col-empty::after {
    display: none !important;
}

/* Non-network company grid (other sections) */
.company-col {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: center;
    padding: 35px 24px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.company-logo {
    max-width: 180px;
    width: auto;
    height: auto;
    max-height: 52px;
    margin: 0 auto 18px auto;
    display: block;
    object-fit: contain;
}

.company-name {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3em;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.company-desc {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.375em;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

.platform-summary {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.08em;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 0;
    background: linear-gradient(169deg, rgba(255, 255, 255, 1) 0%, rgba(150, 191, 243, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================
   BNI LOGO SECTION
   =========================== */
.bni-logo-section {
    padding-top: 80px;
}

.bni-logo-large {
    display: block;
    max-width: 250px;
    margin: 0 auto 60px auto;
}

/* ===========================
   QUOTES SECTION
   =========================== */
.quote-card-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.quote-card {
    flex: 1;
    min-width: 300px;
    background: rgba(0, 45, 101, 0.03);
    border-radius: 20px;
    padding: 40px;
}

.quote-icon {
    max-width: 50px;
    margin-bottom: 25px;
}

.quote-text {
    font-family: 'Gilroy-MediumItalic', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7em;
    color: #1a1a1a;
    margin-bottom: 30px;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.quote-author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.quote-author-name {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.quote-author-company {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 14px;
    color: #666;
}

.quote-author-logo {
    max-width: 150px;
    height: auto;
}

/* ===========================
   PROFILE SECTION
   =========================== */
.profile-card {
    background: #002D65;
}

.profile-content h2 {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-size: 36px;
    line-height: 1.4em;
    color: #FFFFFF;
    margin-bottom: 25px;
}

.profile-content p {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.588em;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.profile-image {
    text-align: center;
    padding: 20px;
}

.profile-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

/* ===========================
   LETSTRANSPORT SECTION
   =========================== */
.letstransport-logo-large {
    display: block;
    max-width: 300px;
    margin: 0 auto 50px auto;
}

/* ===========================
   FOOTER CTA SECTION (base – overridden by Figma block below)
   =========================== */

/* ===========================
   RESPONSIVE STYLES
   =========================== */

/* Tablets and below */
@media screen and (max-width: 1199px) {
    .hero-title {
        font-size: 68px;
        line-height: 1.25em;
    }

    .hero-description {
        font-size: 16px;
    }

    .building-scale-section {
        margin-top: -100px;
    }

    .building-scale-card {
        min-height: 450px;
    }

    .building-scale-image {
        width: 60%;
    }

    .building-scale-content {
        margin-left: 55%;
        padding: 50px 45px 40px 45px;
        min-height: 450px;
    }

    .building-scale-title {
        font-size: 38px;
        margin-bottom: 30px;
    }

    .building-scale-text {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .what-is-content {
        padding: 0 50px;
    }

    .what-is-title {
        font-size: 38px;
    }

    .what-is-text {
        font-size: 16px;
    }

    .what-is-subheading {
        font-size: 22px;
    }

    .what-is-highlight {
        font-size: 32px;
    }

    .platforms-section {
        min-height: 620px;
        margin-bottom: 60px;
    }

    .platform-cards {
        gap: 30px;
    }

    .platform-card {
        width: 215px;
        padding: 16px 18px 14px 18px;
        padding-top: 46px;
        min-height: 68px;
    }

    .platform-icon img {
        width: 85px;
        height: 85px;
    }

    .globe-background {
        width: 95%;
        max-width: 950px;
        height: 580px;
        top: -80px;
    }

    .platforms-section {
        min-height: 580px;
    }

    .platform-cards {
        gap: 30px;
        max-width: 980px;
        padding-bottom: 45px;
    }

    .platform-card {
        width: 215px;
        min-height: 68px;
        padding: 16px 18px 14px 18px;
        padding-top: 46px;
    }

    .platform-icon img {
        width: 88px;
        height: 88px;
    }

    .section-heading {
        font-size: 36px;
    }

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

@media screen and (max-width: 991px) {
    .hero-title {
        font-size: 52px;
        line-height: 1.3em;
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.6em;
    }

    .building-scale-section {
        margin-top: -80px;
    }

    .building-scale-card {
        min-height: auto;
        padding: 0;
    }

    .building-scale-image {
        position: relative;
        width: 100%;
        height: 350px;
        left: 0;
        border-radius: 25px 25px 0 0;
    }

    .building-scale-content {
        position: relative;
        margin-left: 0;
        padding: 40px 35px;
        min-height: auto;
    }

    .building-scale-title {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .building-scale-text {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .what-is-section {
        padding: 60px 0;
    }

    .what-is-content {
        padding: 0 40px;
    }

    .what-is-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .what-is-text {
        font-size: 15px;
    }

    .what-is-subheading {
        font-size: 20px;
        margin: 40px auto 8px auto;
    }

    .what-is-highlight {
        font-size: 28px;
    }

    .platforms-section {
        min-height: 550px;
        margin-bottom: 50px;
    }

    .platform-cards {
        gap: 20px;
    }

    .platform-card {
        width: 200px;
        padding: 14px 16px 12px 16px;
        padding-top: 44px;
        min-height: 64px;
    }

    .platform-icon img {
        width: 75px;
        height: 75px;
    }

    .globe-background {
        width: 100%;
        max-width: 750px;
        height: 500px;
        top: -70px;
    }

    .platforms-section {
        min-height: 540px;
    }

    .platform-cards {
        gap: 25px;
        max-width: 900px;
        padding-bottom: 40px;
    }

    .platform-card {
        width: 200px;
        min-height: 64px;
        padding: 14px 16px 12px 16px;
        padding-top: 44px;
    }

    .platform-icon img {
        width: 80px;
        height: 80px;
    }

    .what-is-highlight {
        font-size: 30px;
        margin-top: -10px;
    }

    .white-card,
    .blue-card {
        padding: 40px 30px;
    }

    .section-heading {
        font-size: 32px;
    }

    .card-title {
        font-size: 28px;
    }

    .companies-row {
        flex-direction: column;
        align-items: center;
    }

    .companies-row-four {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        min-height: 220px;
        align-items: stretch;
    }

    .companies-row-four .company-col::after {
        display: none;
    }

    .companies-row-four .company-col:nth-child(2n+1)::after {
        display: block;
        background: linear-gradient(180deg, #002D65 0%, #101820 50%, #002D65 100%);
    }

    .companies-row-six {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        min-height: 300px;
        align-items: stretch;
    }

    .companies-row-six .company-col::after {
        display: none;
    }

    .companies-row-six .company-col:nth-child(2n+1)::after {
        display: block;
        background: linear-gradient(180deg, #002D65 0%, #101820 50%, #002D65 100%);
    }

    .companies-row-six .company-col:nth-child(-n+3)::before {
        display: none;
    }

    .companies-row-six .company-col:nth-child(-n+4)::before {
        display: block;
        background: linear-gradient(90deg, #002D65 0%, #101820 50%, #002D65 100%);
    }

    .company-col {
        max-width: 400px;
    }

    .network-card-title {
        font-size: 34px;
    }

    .network-card-subtitle {
        font-size: 17px;
    }

    .tab-btn {
        font-size: 20px;
    }

    .quote-card-wrapper {
        flex-direction: column;
    }

    .quote-card {
        min-width: 100%;
    }
}

/* Mobile devices */
@media screen and (max-width: 767px) {
    .nextindia-hero {
        padding: 120px 0 80px 0;
        min-height: 70vh;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 42px;
        line-height: 1.35em;
        text-align: center;
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.65em;
    }

    .building-scale-section {
        margin-top: -60px;
        padding: 0 0 40px 0;
    }

    .building-scale-image {
        height: 280px;
    }

    .building-scale-content {
        padding: 35px 25px;
    }

    .building-scale-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .building-scale-text {
        font-size: 15px;
        line-height: 1.65em;
        margin-bottom: 16px;
    }

    .what-is-section {
        padding: 50px 0;
    }

    .what-is-content {
        padding: 0 25px;
    }

    .what-is-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .what-is-text {
        font-size: 15px;
        max-width: 100%;
    }

    .what-is-subheading {
        font-size: 18px;
        margin: 35px auto 8px auto;
    }

    .what-is-highlight {
        font-size: 24px;
        margin: 0 auto;
    }

    .platforms-section {
        min-height: 480px;
        margin-bottom: 40px;
    }

    .platform-cards {
        gap: 15px;
        flex-wrap: wrap;
    }

    .platform-card {
        width: 185px;
        padding: 12px 14px 10px 14px;
        padding-top: 42px;
        min-height: 60px;
    }

    .platform-icon img {
        width: 70px;
        height: 70px;
    }

    .platform-card h4 {
        font-size: 16px;
    }

    .platform-subtitle {
        font-size: 12px;
    }

    .globe-background {
        width: 100%;
        max-width: 550px;
        height: 420px;
        top: -60px;
    }

    .platforms-section {
        min-height: 500px;
        padding-bottom: 30px;
    }

    .platform-cards {
        gap: 20px;
        padding-bottom: 30px;
        max-width: 820px;
    }

    .platform-card {
        width: 175px;
        min-height: 58px;
        padding: 12px 14px 10px 14px;
        padding-top: 40px;
    }

    .platform-icon img {
        width: 72px;
        height: 72px;
    }

    .platform-card h4 {
        font-size: 18px;
    }

    .what-is-highlight {
        font-size: 26px;
        margin-top: 0;
    }

    .white-card,
    .blue-card {
        padding: 30px 20px;
        margin-bottom: 20px;
    }

    .section-heading {
        font-size: 28px;
    }

    .card-title {
        font-size: 24px;
    }

    .section-text,
    .hero-description {
        font-size: 15px;
    }

    .tab-btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    .companies-row-four,
    .companies-row-six {
        grid-template-columns: 1fr;
    }

    /* Tabs stack on small screens; override .network-card base */
    .network-card .platform-tabs {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 24px;
        width: 100%;
        max-width: 100%;
    }
    .network-card .platform-tabs .tab-item {
        flex: 0 0 auto;
        width: 100%;
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 4px;
    }
    .network-card .platform-tabs .tab-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .network-card .tab-btn {
        width: 100%;
        min-height: 48px;
        text-align: center;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .network-card .tab-content {
        width: 100%;
        overflow-x: hidden;
    }
    .network-card .company-col {
        min-width: 0;
        overflow: hidden;
    }
    .network-card .company-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .network-card .company-logo {
        max-width: 100%;
        max-height: 44px;
        height: auto;
    }
    .network-card .company-logo.network-card-logo-docuvera {
        max-height: 44px;
        min-height: 38px;
    }
    .network-card .company-desc {
        font-size: 15px;
    }

    .companies-row-four .company-col::after {
        display: none;
    }

    .companies-row-four .company-col {
        border-bottom: none;
    }

    .companies-row-four .company-col::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, #002D65 0%, #101820 50%, #002D65 100%);
        pointer-events: none;
    }

    .companies-row-four .company-col:last-child::before {
        display: none;
    }

    .companies-row-six .company-col::after {
        display: none;
    }

    .companies-row-six .company-col:nth-child(-n+3)::before {
        display: none;
    }

    .companies-row-six .company-col:not(:last-child)::before {
        display: block;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, #002D65 0%, #101820 50%, #002D65 100%);
    }

    .companies-row-six .company-col:last-child::before {
        display: none;
    }

    .network-section {
        overflow-x: hidden;
    }
    .network-section .network-section-container,
    .network-section .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }
    .network-card {
        padding: 40px 25px 50px;
        max-width: 100%;
        overflow-x: hidden;
    }

    .network-card-title {
        font-size: 28px;
        line-height: 1.25em;
    }

    .network-card-subtitle {
        font-size: 16px;
    }

    .tab-heading {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .company-desc {
        font-size: 15px;
    }

    .platform-summary {
        font-size: 22px;
        margin-top: 35px;
    }

    .network-closing-section {
        padding: 44px 20px 52px;
    }
    .network-closing-text {
        font-size: 22px;
    }
    .network-closing-text.network-closing-emphasis {
        font-size: 23px;
    }

    .network-section,
    .bni-section,
    .quotes-section,
    .profile-section,
    .letstransport-section,
    .footer-cta-section {
        padding: 40px 0;
    }
}

@media screen and (max-width: 575px) {
    .hero-title {
        font-size: 36px;
        line-height: 1.4em;
    }

    .hero-description {
        font-size: 14px;
    }

    .building-scale-section {
        margin-top: -50px;
    }

    .building-scale-card {
        border-radius: 20px;
    }

    .building-scale-image {
        height: 240px;
        border-radius: 20px 20px 0 0;
    }

    .building-scale-content {
        padding: 28px 22px;
    }

    .building-scale-logo {
        margin-bottom: 14px;
    }

    .building-scale-logo-img {
        max-width: 160px;
    }

    .building-scale-title {
        font-size: 24px;
        margin-bottom: 18px;
        line-height: 1.3em;
    }

    .building-scale-text {
        font-size: 14px;
        line-height: 1.7em;
        margin-bottom: 14px;
    }

    .what-is-section {
        padding: 40px 0;
    }

    .what-is-content {
        padding: 0 20px;
    }

    .bnext-logo img {
        max-width: 80px;
    }

    .what-is-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .what-is-text {
        font-size: 14px;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .what-is-subheading {
        font-size: 16px;
        margin: 30px auto 6px auto;
    }

    .what-is-highlight {
        font-size: 20px;
        margin: 0 auto;
    }

    .platforms-section {
        min-height: 600px;
        margin: 0 0 30px 0;
    }

    .platform-cards {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

    .platform-card {
        width: 155px;
        padding: 10px 12px 8px 12px;
        padding-top: 38px;
        min-height: 54px;
    }

    .platform-icon img {
        width: 60px;
        height: 60px;
    }

    .platform-card h4 {
        font-size: 14px;
    }

    .platform-subtitle {
        font-size: 11px;
    }

    .globe-background {
        width: 100%;
        max-width: 400px;
        height: 360px;
        top: -50px;
    }

    .platforms-section {
        min-height: 450px;
        padding-bottom: 25px;
    }

    .platform-cards {
        gap: 12px;
        padding-bottom: 25px;
        max-width: 660px;
    }

    .platform-card {
        width: 155px;
        min-height: 52px;
        padding: 10px 12px 8px 12px;
        padding-top: 38px;
    }

    .platform-icon {
        margin-bottom: 8px;
    }

    .platform-icon img {
        width: 60px;
        height: 60px;
    }

    .platform-card h4 {
        font-size: 15px;
        line-height: 1.2em;
    }

    .platform-subtitle {
        font-size: 10px;
        margin-top: 3px;
    }

    .what-is-highlight {
        font-size: 20px;
        line-height: 1.3em;
        margin-top: 0;
        padding: 0 15px;
    }

    .section-heading {
        font-size: 24px;
    }

    .card-title {
        font-size: 22px;
    }

    .white-card,
    .blue-card {
        padding: 25px 15px;
    }

    .platform-tabs {
        flex-direction: column;
        gap: 10px;
    }

    .tab-btn {
        width: 100%;
    }

    /* Network table: scale content and images so they stay inside cells */
    .network-card .company-col {
        padding: 28px 16px 32px;
        min-height: 120px;
    }
    .network-card .company-logo {
        max-width: 100%;
        max-height: 40px;
        height: auto;
    }
    .network-card .company-logo.network-card-logo-docuvera {
        max-height: 40px;
        min-height: 34px;
    }
    .network-card .company-desc {
        font-size: 14px;
        line-height: 1.4em;
    }
    .network-card .company-name,
    .network-card .company-name-text {
        font-size: 16px;
    }

    .bni-logo-large,
    .letstransport-logo-large,
    .footer-cta-logo {
        max-width: 180px;
    }
}

/* ===========================
   iPhone / small mobile (layout only – design, images, fonts unchanged)
   Platform section, Network section, LetsTransport highlight
   =========================== */
@media screen and (max-width: 430px) {
    .what-is-content {
        padding: 0 16px;
    }

    /* Platform section: 2×2 grid, balanced spacing, globe fits */
    .platforms-section {
        min-height: auto;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .platform-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 100%;
        padding-bottom: 20px;
        margin-top: 60px;
    }

    .platform-card {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        padding: 10px 8px 8px 8px;
        padding-top: 36px;
        box-sizing: border-box;
    }

    .platform-icon {
        top: -28px;
    }

    .platform-card h4 {
        margin-top: 8px;
    }

    .platform-subtitle {
        margin-top: 4px;
        padding: 0 4px;
    }

    .globe-background {
        max-width: 320px;
        height: 300px;
        top: -40px;
        left: 50%;
    }

    .what-is-highlight {
        padding: 0 12px;
        margin-top: 8px;
    }

    /* Network section: tabs stack, content contained, 2-col grid */
    .network-section,
    .network-section .network-section-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .network-card {
        padding: 24px 16px 36px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .network-card .platform-tabs {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
        max-width: 100%;
        padding-bottom: 20px;
    }

    .network-card .platform-tabs .tab-item {
        flex: 0 0 auto;
        width: 100%;
        padding-bottom: 18px;
        margin-bottom: 2px;
    }
    .network-card .platform-tabs .tab-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .network-card .tab-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .network-card .tab-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .network-card .companies-row-six,
    .network-card .companies-row-four {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .network-card .companies-row-six {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        min-height: 330px;
        gap: 0;
        align-items: stretch;
    }

    .network-card .companies-row-four {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        min-height: 220px;
        gap: 0;
        align-items: stretch;
    }

    .network-card .company-col {
        min-width: 0;
        overflow: hidden;
        padding: 20px 10px 24px;
    }

    .network-card .company-logo {
        max-width: 100%;
        max-height: 36px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .network-card .company-logo.network-card-logo-docuvera {
        max-height: 36px;
        min-height: 30px;
    }

    .network-card .company-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.35em;
    }
    .network-card .company-name,
    .network-card .company-name-text {
        font-size: 14px;
    }

    /* 2-col grid: vertical divider after col 1 (items 1,3,5) */
    .network-card .companies-row-six .company-col:nth-child(odd)::after {
        display: block;
    }
    .network-card .companies-row-six .company-col:nth-child(even)::after {
        display: none;
    }
    /* 2-col grid: horizontal divider under row 1 and 2 (items 1–4) */
    .network-card .companies-row-six .company-col:nth-child(-n+4)::before {
        display: block;
    }
    .network-card .companies-row-six .company-col:nth-child(n+5)::before {
        display: none;
    }
    /* 4-col grid as 2 cols: vertical between cols, horizontal under row 1 and 2 */
    .network-card .companies-row-four .company-col:nth-child(odd)::after {
        display: block;
    }
    .network-card .companies-row-four .company-col:nth-child(even)::after {
        display: none;
    }
    .network-card .companies-row-four .company-col:nth-child(-n+2)::before {
        display: block;
    }
    .network-card .companies-row-four .company-col:nth-child(n+3)::before {
        display: none;
    }

    .network-card .company-col {
        padding: 20px 10px 24px;
        min-height: 110px;
    }

    .network-card .company-logo {
        margin-bottom: 10px;
    }

    .network-card .tab-heading {
        margin-bottom: 24px;
    }

    /* LetsTransport highlight: wrap text, no overflow, comfortable padding */
    .letstransport-highlight-wrap {
        margin-top: 32px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .letstransport-highlight-wrap .letstransport-highlight {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 4px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .letstransport-logo-large {
        min-width: 0;
    }
}

/* ===========================
   BNI Introduction Section – Figma typography
   style_C5ZCK0 (badge), style_AONFEH (intro), style_QYN3HN (quote), style_LX7T45 (author)
   =========================== */
.bni-section {
    background: transparent;
    padding: 80px 0 100px;
}

.bni-section-row {
    gap: 0;
    align-items: stretch;
}

/* Left div: content from top – Figma left column */
.bni-left-col {
    padding-right: 40px;
    display: flex;
    align-items: flex-start;
}

.bni-left-content {
    width: 100%;
}

/* Right div: gradient background (Figma Rectangle 46 style), content vertically centered */
.bni-right-col {
    position: relative;
    min-height: 520px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/bni-right-gradient.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px;
}

.bni-right-inner {
    width: 100%;
    max-width: 560px;
}

/* Figma: Rectangle 42 – fill_LWJ7MU, stroke_A6RV9G, style_C5ZCK0 */
.bni-badge {
    display: inline-block;
    background: rgba(150, 191, 243, 0.3);
    color: #002D65;
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.225em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid #96BFF3;
    border-radius: 5px;
    margin-bottom: 28px;
}

.bni-brand {
    margin-bottom: 32px;
}

/* BNI Logo 1 – increased size for prominence */
/* BNI brand logo (Bertelsmann Next INDIA) – larger for prominence */
.bni-brand-logo {
    width: auto;
    height: auto;
    max-height: 110px;
    max-width: min(520px, 100%);
    object-fit: contain;
    object-position: left center;
    display: block;
}
@media screen and (max-width: 991px) {
    .bni-brand-logo {
        max-width: 100%;
        max-height: 95px;
    }
}
@media screen and (max-width: 767px) {
    .bni-brand-logo {
        max-height: 85px;
    }
}
@media screen and (max-width: 575px) {
    .bni-brand-logo {
        max-height: 75px;
    }
}
@media screen and (max-width: 430px) {
    .bni-brand-logo {
        max-height: 65px;
    }
}

/* Figma: style_AONFEH – Gilroy-Medium 20px, line-height 1.35em, fill_CYWP3H */
.bni-intro-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.35em;
    color: #000000;
    margin-bottom: 20px;
    text-align: left;
}

.bni-intro-text:last-of-type {
    margin-bottom: 0;
}

/* Quote block lives inside .bni-right-inner */

/* Figma: Rectangle 32 – fill_3WS75N #FFFFFF, borderRadius 25px; right section centered */
.bni-quote-bubble {
    position: relative;
    background: #FFFFFF;
    border-radius: 25px;
    padding: 28px 34px 36px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
    width: 100%;
}

.bni-quote-bubble::after {
    content: '';
    position: absolute;
    left: 48px;
    bottom: -12px;
    border: 12px solid transparent;
    border-top-color: #FFFFFF;
    border-bottom: 0;
}

/* Figma: Group 1 quote icon – 26.63×23.16 */
.bni-quote-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 27px;
    height: 24px;
    pointer-events: none;
}

/* Figma: style_QYN3HN – Gilroy-MediumItalic 14px, line-height 1.5em, fill_CYWP3H */
.bni-quote-text {
    font-family: 'Gilroy-MediumItalic', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    color: #000000;
    margin: 0 0 0 4px;
    padding-top: 28px;
    position: relative;
    z-index: 1;
}

.bni-quote-author {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding-left: 8px;
    width: 100%;
    justify-content: flex-start;
}

.bni-quote-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bni-quote-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Figma: style_LX7T45 – Gilroy-SemiBold; increased size for emphasis */
.bni-quote-author-name {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.588em;
    color: #000000;
}

.bni-quote-author-company {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BI logo in BNI quote (Carsten) – smaller */
.bni-quote-bi-logo {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

/* BII logo in Parallel Paths quote – unchanged */
.parallel-quote-bi-logo {
    height: 55px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
}

.bni-quote-company-name {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}


@media (max-width: 991px) {
    .bni-section-row {
        flex-direction: column;
        gap: 48px;
    }

    .bni-left-col {
        padding-right: 0;
    }

    .bni-right-col {
        min-height: 420px;
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 32px;
    }

    .bni-quote-bubble {
        padding: 24px 20px 32px 32px;
    }

    .bni-quote-icon {
        width: 22px;
        height: 20px;
        top: 20px;
        left: 20px;
    }

    .quotes-section-row {
        flex-direction: column;
        gap: 48px;
    }

    .quotes-left-col {
        min-height: 420px;
        padding-left: 16px;
        padding-right: 16px;
        order: 0;
    }

    .quotes-right-col {
        padding-left: 16px;
        order: 1;
    }

    .parallel-heading {
        font-size: 40px;
        line-height: 1.25em;
    }

    .parallel-body-text {
        font-size: 18px;
        line-height: 1.4em;
    }
}

@media (max-width: 575px) {
    .bni-section {
        padding: 50px 0 70px;
    }

    .bni-intro-text {
        font-size: 16px;
    }

    .bni-quote-text {
        font-size: 15px;
    }

    .bni-quote-author {
        margin-top: 22px;
    }

    .bni-quote-avatar {
        width: 74px;
        height: 74px;
    }

    .quotes-section {
        padding: 50px 0 70px;
    }

    .parallel-heading {
        font-size: 32px;
        line-height: 1.25em;
    }

    .parallel-body-text {
        font-size: 17px;
        line-height: 1.45em;
    }

    .parallel-quote-text {
        font-size: 14px;
    }

    .parallel-badge {
        font-size: 14px;
        letter-spacing: 0.15em;
    }
}

/* ===========================
   Parallel Paths Section – Figma typography & layout
   style_XE9SHE (heading), style_PKAK5C (body), style_1KZHJD (quote), style_F7BW3P (badge)
   =========================== */
.quotes-section {
    padding: 80px 0 100px;
    background: transparent;
}

.quotes-section-row {
    gap: 0;
    align-items: center;
}

/* First section left div – blue glow circle only */
.quotes-left-col {
    position: relative;
    min-height: 520px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/clip-path-group-4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px;
}

.quotes-left-inner {
    width: 100%;
    max-width: 561px;
}

.parallel-quote-bubble {
    position: relative;
    background: #EEF1F5;
    border-radius: 25px;
    padding: 28px 32px 32px 44px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Tail pointing down to parallel quote author (same as BNI quote bubble) */
.parallel-quote-bubble::after {
    content: '';
    position: absolute;
    left: 48px;
    bottom: -12px;
    border: 12px solid transparent;
    border-top-color: #EEF1F5;
    border-bottom: 0;
    pointer-events: none;
}

/* Same quote symbol as bni-right-inner (bni-quote-icon) */
.parallel-quote-mark {
    position: absolute;
    top: 22px;
    left: 26px;
    width: 27px;
    height: 24px;
    pointer-events: none;
    display: block;
}

/* Figma style_1KZHJD: Gilroy-MediumItalic 14px, line-height 1.5em, LEFT */
.parallel-quote-text {
    font-family: 'Gilroy-MediumItalic', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    color: #000000;
    margin: 0 0 0 4px;
    padding-top: 22px;
    position: relative;
    z-index: 1;
}

.parallel-quote-author {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

/* Avatar: larger circle, nudged down slightly */
.parallel-quote-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 6px;
}

.parallel-quote-author-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Gilroy-SemiBold; increased size to match BNI quote author */
.parallel-quote-author-name {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.588em;
    color: #000000;
}

.quotes-right-col {
    padding-left: 32px;
}

.quotes-right-inner {
    width: 100%;
    max-width: 548px;
}

/* Same CSS as .bni-badge (NEXT UP) – Figma style_C5ZCK0 / style_F7BW3P */
.parallel-badge {
    display: inline-block;
    background: rgba(150, 191, 243, 0.3);
    color: #002D65;
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.225em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid #96BFF3;
    border-radius: 5px;
    margin-bottom: 28px;
}

/* Figma style_XE9SHE: Gilroy-Bold 50px, line-height 1.238em, TITLE, LEFT, fill_04QPSW */
.parallel-heading {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.238em;
    color: #002D65;
    margin: 0 0 32px 0;
    text-align: left;
}

/* Figma style_PKAK5C: Gilroy-Medium 20px, line-height 1.35em, LEFT */
.parallel-body-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.35em;
    color: #000000;
    margin-bottom: 20px;
    text-align: left;
}

.parallel-body-text:last-of-type {
    margin-bottom: 0;
}

/* Legacy quote card (if used elsewhere) */
.quotes-card {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 70px 86px;
    box-sizing: border-box;
}

.quotes-heading {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.238em;
    text-transform: capitalize;
    color: #002D65;
    margin: 0 0 40px 0;
    text-align: center;
}

.quotes-intro {
    max-width: 548px;
    margin: 0 auto 60px auto;
}

.quotes-body-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.35em;
    color: #000000;
    margin-bottom: 20px;
    text-align: center;
}

.quote-card-wrapper {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-top: 60px;
}

.quote-card {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 28px 34px 36px 34px;
    box-sizing: border-box;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.quote-icon {
    width: 27px;
    height: 24px;
    margin-bottom: 20px;
}

.quote-text {
    font-family: 'Gilroy-MediumItalic', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    color: #000000;
    margin-bottom: 25px;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: 18px;
}

.quote-author-img {
    width: 81px;
    height: 81px;
    border-radius: 50%;
}

.quote-author-name {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.588em;
    color: #000000;
    margin-bottom: 3px;
}

.quote-company-logo {
    max-width: 113px;
    height: auto;
}

/* ===========================
   Profile Section - Restructured Layout
   =========================== */
.profile-section {
    padding: 60px 0;
    overflow: visible;
    /* Restore gradient background per "prev colour" request, while keeping overlap */
    background: transparent;
}

.profile-section .container,
.profile-section .row {
    overflow: visible;
}

/* Main Wrapper: Holds everything, defines the overall space */
.profile-wrapper {
    position: relative;
    max-width: 1353.98px;
    margin: 60px auto 0 auto;
    /* space for pop-out top */
    min-height: 460px;
    /* Increased size "a bit" */
    /* Ensure some height */
    display: flex;
    align-items: flex-end;
    /* Align items to bottom */
}

/* The Content Card: Full width background, text constrained */
.profile-content-card {
    background: #FFFFFF;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 35px;
    padding: 50px 60px 50px 60px;
    /* Increased padding */
    width: 100%;
    margin-right: 0;
    position: relative;
    /* Removed z-index: 1 so children stacking context is simpler */
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
}

/* Constrain text to left 55% so image can overlap right side */
.profile-text-inner {
    max-width: 55%;
    position: relative;
    z-index: 10;
    /* Ensure text is above image */
}

/* Figma style_CZYYW1 + fill_T25AX4 – Pankaj Makkar Takes the BNI Mantle */
.profile-heading {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.238em;
    color: #002D65;
    text-align: left;
    text-transform: capitalize;
    margin: 0 0 20px 0;
}

.profile-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4em;
    color: #000000;
    margin-bottom: 15px;
}

/* The Image Container: Taller than card, overlapping right side (no clip – don't cut image) */
.profile-image-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: 130%;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.profile-img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
    margin-right: 0;
    /* Corner radius inherited from container clipping */
    border-radius: 0 35px 35px 0;
}

/* Responsive: Stack on mobile – image below text, no overlap */
@media (max-width: 991px) {
    .profile-wrapper {
        flex-direction: column;
        align-items: stretch;
        margin-top: 40px;
        min-height: 0;
    }

    .profile-content-card {
        padding: 40px 24px 32px;
        text-align: center;
        order: 1;
    }

    .profile-text-inner {
        max-width: 100%;
    }

    .profile-image-container {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 280px;
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px 24px;
    }

    .profile-img {
        margin-right: 0;
        object-position: bottom center;
        width: auto;
        max-height: 320px;
        height: auto;
        border-radius: 0 0 24px 24px;
    }

    .profile-card--white .profile-content {
        padding: 30px 20px 40px 20px;
    }

    /* On mobile, reset to normal flow or keep popout? Keeps popout usually better */
    .profile-card--white .profile-image-col {
        min-height: 300px;
    }

    .profile-card--white .profile-image--popout {
        height: 120%;
        /* Slightly less popout on mobile */
        right: 50%;
        transform: translateX(50%);
        justify-content: center;
        width: 100%;
    }

    .profile-card--white .profile-image--popout img {
        margin-right: 0;
        object-position: bottom center;
    }
}

.profile-heading {
    font-family: 'Gilroy-Bold', Arial, sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.238em;
    text-transform: capitalize;
    color: #002D65;
    text-align: left;
    margin: 0 0 30px 0;
}

.profile-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.35em;
    color: #000000;
    margin-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .profile-card--white {
        padding: 40px 30px 0 30px;
        /* Add padding back on mobile, but keep bottom 0 for image */
    }

    .profile-card--white .profile-content {
        padding: 0 0 40px 0;
    }

    .profile-card--white .profile-image-col {
        min-height: 300px;
        justify-content: center;
    }

    .profile-card--white .profile-image--popout {
        justify-content: center;
    }
}

/* ===========================
   LetsTransport Section – same left/right as previous section, no card, transparent background
   =========================== */
.letstransport-section {
    padding: 60px 0 0 0;
    /* Removing bottom padding to let image sit flush if needed */
    background: transparent;
    overflow: visible;
    position: relative;
}

.letstransport-section .container {
    overflow: visible;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.letstransport-section .letstransport-content,
.letstransport-section .letstransport-heading,
.letstransport-section .letstransport-text {
    text-align: left;
}

/* Highlight centered per design (Figma style_WLB50G) */
/* Separate block, single line, centered in the middle */
.letstransport-highlight-wrap {
    width: 100%;
    margin-top: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.letstransport-highlight-wrap .letstransport-highlight {
    margin: 0;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

.letstransport-section .letstransport-highlight {
    text-align: center;
}

/* LetsTransport highlight: responsive so text wraps and stays in viewport */
@media screen and (max-width: 991px) {
    .letstransport-highlight-wrap {
        width: 100%;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .letstransport-highlight-wrap .letstransport-highlight {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .letstransport-section .letstransport-highlight {
        max-width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .letstransport-highlight-wrap {
        margin-top: 36px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media screen and (max-width: 575px) {
    .letstransport-highlight-wrap {
        margin-top: 32px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .letstransport-highlight-wrap .letstransport-highlight {
        padding: 0 4px;
    }
}
@media screen and (max-width: 430px) {
    .letstransport-highlight-wrap {
        margin-top: 28px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .letstransport-highlight-wrap .letstransport-highlight {
        padding: 0 4px;
    }
}

/* Same as .parallel-badge (BII & BNI) – left-aligned */
.letstransport-badge {
    display: inline-block;
    background: rgba(150, 191, 243, 0.3);
    color: #002D65;
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.225em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid #96BFF3;
    border-radius: 5px;
    margin-bottom: 30px;
    /* Slightly reduced margin */
}

.letstransport-logo-large {
    display: block;
    margin: 0 0 15px 0;
    width: auto;
    max-width: 100%;
    min-width: 320px;
    max-height: 280px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    box-sizing: border-box;
}
@media screen and (max-width: 991px) {
    .letstransport-logo-large {
        min-width: 0;
        max-width: 100%;
        max-height: 220px;
    }
}
@media screen and (max-width: 767px) {
    .letstransport-logo-large {
        max-height: 180px;
        margin-bottom: 12px;
    }
}
@media screen and (max-width: 575px) {
    .letstransport-logo-large {
        max-height: 160px;
        margin-bottom: 12px;
    }
}
@media screen and (max-width: 430px) {
    .letstransport-logo-large {
        min-width: 0;
        max-height: 140px;
        margin-bottom: 10px;
    }
}

/* Two-column layout: left = badge, logo, heading, text; right = large image */
.letstransport-two-col {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

.letstransport-left {
    flex: 0 0 auto;
    width: 45%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
}

.letstransport-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    box-sizing: border-box;
}

.letstransport-image-wrap {
    width: 100%;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 0;
}

.letstransport-truck-img {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 480px;
    max-height: 720px;
    object-fit: contain;
    object-position: right bottom;
    display: block;
    vertical-align: bottom;
}

.letstransport-heading {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.588em;
    font-weight: 400;
    color: #000000;
    margin: 0 0 20px 0;
    letter-spacing: 0;
    text-align: left;
}

.letstransport-text {
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 27px;
    letter-spacing: 0;
    color: #000000;
    margin-bottom: 20px;
    text-align: left;
}



.letstransport-highlight {
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.08em;
    color: #002D65;
    margin: 48px 0 0 0;
    max-width: 839px;
    text-align: center;
    box-sizing: border-box;
}
@media screen and (max-width: 991px) {
    .letstransport-highlight {
        max-width: 100%;
    }
}

/* ===========================
   Footer CTA Section – Figma Rectangle 34 (fill_DAGYQ0), style_6U7D7O, fill_AEPCF5
   Section background transparent; card blue gradient; text left, logo right
   =========================== */
.footer-cta-section {
    padding: 60px 0;
    background: transparent;
}

.footer-cta {
    /* Figma Rectangle 34: fill_DAGYQ0 blue gradient, 1353.98×334, borderRadius 25px */
    background: linear-gradient(90deg, rgba(0, 45, 101, 1) 0%, rgba(43, 91, 152, 1) 100%);
    border-radius: 25px;
    padding: 70px 86px;
    max-width: 1353.98px;
    min-height: 334px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-cta-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 100%;
}

.footer-cta-text {
    /* Figma style_6U7D7O + fill_AEPCF5 */
    font-family: 'Gilroy-SemiBold', Arial, sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.343em;
    text-align: center;
    background: linear-gradient(141deg, rgba(255, 255, 255, 1) 28%, rgba(150, 191, 243, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    max-width: 584px;
    flex-shrink: 0;
}

.footer-cta-logo {
    display: block;
    margin: 0;
    max-width: 420px;
    width: auto;
    height: auto;
    min-width: 280px;
    flex: 1 1 auto;
    object-fit: contain;
    object-position: right center;
}

/* ===========================
   Responsive Styles for New Sections
   =========================== */

@media (max-width: 1199px) {

    .bni-intro-card,
    .quotes-card,
    .profile-card,
    .footer-cta {
        padding: 50px 60px;
    }

    .footer-cta-content {
        gap: 32px;
    }

    .quotes-heading,
    .profile-heading {
        font-size: 42px;
        line-height: 1.25em;
    }

    .footer-cta-text {
        font-size: 30px;
        line-height: 1.35em;
    }

    .letstransport-highlight {
        font-size: 22px;
        line-height: 1.15em;
    }
}

@media (max-width: 991px) {

    .bni-intro-card,
    .quotes-card,
    .profile-card,
    .footer-cta {
        padding: 40px 40px;
    }

    .footer-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-cta-text {
        text-align: center;
        max-width: 100%;
    }

    .footer-cta-logo {
        margin: 0 auto;
        flex: none;
        min-width: 0;
        max-width: 280px;
    }

    .profile-card--white .profile-image--popout {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        max-width: 100%;
    }

    .letstransport-two-col {
        flex-direction: column;
        gap: 40px;
        align-items: stretch;
    }

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

    .letstransport-right {
        width: 100%;
        justify-content: center;
    }

    .letstransport-image-wrap {
        justify-content: center;
    }

    .letstransport-truck-img {
        min-height: 400px;
        max-height: 520px;
        margin: 0 auto;
    }

    .quotes-heading,
    .profile-heading {
        font-size: 36px;
        line-height: 1.3em;
    }

    .bni-intro-text,
    .quotes-body-text,
    .parallel-body-text,
    .profile-text {
        font-size: 18px;
        line-height: 1.4em;
    }

    .letstransport-text {
        font-size: 16px;
        line-height: 1.6em;
    }

    .quote-card-wrapper {
        flex-direction: column;
        gap: 30px;
    }

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

    .footer-cta-text {
        font-size: 26px;
        line-height: 1.4em;
    }

    .letstransport-highlight {
        font-size: 20px;
        line-height: 1.2em;
    }

    .bni-logo-large,
    .letstransport-logo-large,
    .footer-cta-logo {
        max-width: 200px;
    }
}

@media (max-width: 767px) {

    .bni-intro-card,
    .quotes-card,
    .profile-card,
    .footer-cta {
        padding: 30px 25px;
    }

    .quotes-heading,
    .profile-heading {
        font-size: 28px;
        line-height: 1.35em;
    }

    .bni-intro-text,
    .quotes-body-text,
    .parallel-body-text,
    .profile-text {
        font-size: 16px;
        line-height: 1.5em;
    }

    .letstransport-text {
        font-size: 15px;
        line-height: 1.65em;
    }

    .quote-text {
        font-size: 13px;
        line-height: 1.55em;
    }

    .footer-cta-text {
        font-size: 22px;
        line-height: 1.45em;
    }

    .letstransport-highlight {
        font-size: 18px;
        line-height: 1.25em;
    }

    .bni-logo-large,
    .letstransport-logo-large,
    .footer-cta-logo {
        max-width: 180px;
    }
}

@media (max-width: 575px) {

    .bni-intro-card,
    .quotes-card,
    .profile-card,
    .footer-cta {
        padding: 25px 15px;
    }

    .quotes-heading,
    .profile-heading {
        font-size: 24px;
        line-height: 1.4em;
        margin-bottom: 20px;
    }

    .bni-intro-text,
    .quotes-body-text,
    .parallel-body-text,
    .profile-text {
        font-size: 15px;
        line-height: 1.55em;
    }

    .letstransport-text {
        font-size: 14px;
        line-height: 1.7em;
    }

    .quote-text {
        font-size: 12px;
        line-height: 1.6em;
    }

    .quote-author-img {
        width: 60px;
        height: 60px;
    }

    .quote-author-name {
        font-size: 14px;
    }

    .quote-company-logo {
        max-width: 90px;
    }

    .footer-cta-text {
        font-size: 18px;
        line-height: 1.5em;
    }

    .letstransport-highlight {
        font-size: 16px;
        line-height: 1.3em;
        margin-top: 30px;
        white-space: normal;
    }

    .bni-logo-large,
    .letstransport-logo-large,
    .footer-cta-logo {
        max-width: 150px;
        margin-bottom: 30px;
    }

    .section-tag {
        font-size: 12px;
        padding: 6px 15px;
        margin-bottom: 20px;
    }
}

/* ============================================
   NEXTINDIA PAGE – ENHANCED ANIMATIONS (design/content unchanged)
   Creative entrances: blur, slide, bounce, stagger, cross-reveal.
   Platform section remains mandatory with premium motion.
   ============================================ */

/* ---- Keyframes: Hero ---- */
@keyframes nextindia-hero-reveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        filter: blur(6px);
    }
    50% {
        opacity: 0.9;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---- Keyframes: Building scale – reveal from left ---- */
@keyframes nextindia-reveal-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* ---- Keyframes: What is – bounce in (logo) ---- */
@keyframes nextindia-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    55% {
        opacity: 1;
        transform: scale(1.06);
    }
    75% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Keyframes: Blur up (titles) ---- */
@keyframes nextindia-blur-up {
    0% {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ---- Keyframes: Fade stagger (paragraphs) ---- */
@keyframes nextindia-fade-stagger {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Keyframes: Slide up ---- */
@keyframes nextindia-slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Keyframes: Glow in (highlight text) ---- */
@keyframes nextindia-glow-in {
    0% {
        opacity: 0;
        transform: scale(0.94);
        filter: brightness(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ---- Keyframes: Scale + blur (network card) ---- */
@keyframes nextindia-scale-blur {
    0% {
        opacity: 0;
        transform: translateY(36px) scale(0.94);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---- Keyframes: Slide from left ---- */
@keyframes nextindia-slide-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Keyframes: Slide from right ---- */
@keyframes nextindia-slide-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Keyframes: Cross reveal (profile) ---- */
@keyframes nextindia-cross-reveal {
    0% {
        opacity: 0;
        transform: scale(0.92);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ---- Keyframes: Stagger up (LetsTransport two-col) ---- */
@keyframes nextindia-stagger-up {
    0% {
        opacity: 0;
        transform: translateY(36px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Keyframes: CTA pop (footer) ---- */
@keyframes nextindia-cta-pop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    70% {
        transform: scale(1.03);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Platform section (mandatory): Globe ---- */
@keyframes nextindia-globe-in {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.86) rotate(-4deg);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) scale(1.03) rotate(0.5deg);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0deg);
    }
}

@keyframes nextindia-globe-float {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(-8px) scale(1.02); }
}

/* ---- Platform cards (mandatory): rise + bounce ---- */
@keyframes nextindia-platform-card-in {
    0% {
        opacity: 0;
        transform: translateY(36px) scale(0.9);
    }
    60% {
        transform: translateY(-8px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Initial state: start from nothing (match keyframe 0%) so no "existing then effect" ---- */
main.scroller_container .nextindia-animate {
    opacity: 0;
    visibility: hidden;
}
/* Initial transform/filter per animation type so element truly starts from zero */
main.scroller_container .nextindia-ani-reveal-left:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateX(-50px);
    filter: blur(5px);
}
main.scroller_container .nextindia-ani-bounce-in:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: scale(0.7);
}
main.scroller_container .nextindia-ani-blur-up:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateY(28px);
    filter: blur(8px);
}
main.scroller_container .nextindia-ani-fade-stagger:not(.nextindia-in-view):not(.nextindia-seen),
main.scroller_container .nextindia-ani-slide-up:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateY(18px);
}
main.scroller_container .nextindia-ani-glow-in:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: scale(0.94);
    filter: brightness(0.5);
}
main.scroller_container .nextindia-ani-scale-blur:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateY(36px) scale(0.94);
    filter: blur(5px);
}
main.scroller_container .nextindia-ani-slide-left:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateX(-50px);
}
main.scroller_container .nextindia-ani-slide-right:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateX(50px);
}
main.scroller_container .nextindia-ani-cross-reveal:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: scale(0.92);
    filter: blur(4px);
}
main.scroller_container .nextindia-ani-stagger-up:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateY(36px);
}
main.scroller_container .nextindia-ani-cta-pop:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: scale(0.9);
}
/* Platform: globe and cards start from zero */
main.scroller_container .nextindia-platform-section .nextindia-globe:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateX(-50%) scale(0.86) rotate(-4deg);
    opacity: 0;
}
main.scroller_container .nextindia-platform-section .nextindia-platform-card:not(.nextindia-in-view):not(.nextindia-seen) {
    transform: translateY(36px) scale(0.9);
}

/* When in-view or seen: visible (animation or static) */
main.scroller_container .nextindia-animate.nextindia-in-view,
main.scroller_container .nextindia-animate.nextindia-seen {
    visibility: visible;
}

/* Stay visible when scrolled away so we can re-play animation when scrolling back */
main.scroller_container .nextindia-animate.nextindia-seen {
    opacity: 1;
    animation: none;
    filter: none;
}

/* ---- Hero: start from zero, then animate in on load ---- */
main.scroller_container .nextindia-hero-content {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    filter: blur(6px);
    visibility: visible;
    animation: nextindia-hero-reveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Scroll-triggered: map animation classes ---- */
main.scroller_container .nextindia-ani-reveal-left.nextindia-in-view {
    animation: nextindia-reveal-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-bounce-in.nextindia-in-view {
    animation: nextindia-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
main.scroller_container .nextindia-ani-blur-up.nextindia-in-view {
    animation: nextindia-blur-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-fade-stagger.nextindia-in-view {
    animation: nextindia-fade-stagger 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .what-is-section .what-is-text.nextindia-ani-fade-stagger:nth-of-type(1).nextindia-in-view { animation-delay: 0.06s; }
main.scroller_container .what-is-section .what-is-text.nextindia-ani-fade-stagger:nth-of-type(2).nextindia-in-view { animation-delay: 0.12s; }
main.scroller_container .nextindia-ani-slide-up.nextindia-in-view {
    animation: nextindia-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-glow-in.nextindia-in-view {
    animation: nextindia-glow-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-scale-blur.nextindia-in-view {
    animation: nextindia-scale-blur 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-slide-left.nextindia-in-view {
    animation: nextindia-slide-left 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-slide-right.nextindia-in-view {
    animation: nextindia-slide-right 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-cross-reveal.nextindia-in-view {
    animation: nextindia-cross-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-stagger-up.nextindia-in-view {
    animation: nextindia-stagger-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
main.scroller_container .nextindia-ani-cta-pop.nextindia-in-view {
    animation: nextindia-cta-pop 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

/* Fallback: any .nextindia-animate.in-view without a specific ani class */
main.scroller_container .nextindia-animate.nextindia-in-view:not([class*="nextindia-ani-"]) {
    animation: nextindia-fade-stagger 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Platform section – mandatory ---- */
main.scroller_container .nextindia-platform-section .nextindia-globe.nextindia-in-view {
    animation: nextindia-globe-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               nextindia-globe-float 5s ease-in-out 1s infinite;
}
main.scroller_container .nextindia-platform-section .nextindia-platform-card.nextindia-in-view {
    animation: nextindia-platform-card-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
main.scroller_container .nextindia-platform-section .nextindia-platform-card:nth-child(1).nextindia-in-view { animation-delay: 0.04s; }
main.scroller_container .nextindia-platform-section .nextindia-platform-card:nth-child(2).nextindia-in-view { animation-delay: 0.12s; }
main.scroller_container .nextindia-platform-section .nextindia-platform-card:nth-child(3).nextindia-in-view { animation-delay: 0.2s; }
main.scroller_container .nextindia-platform-section .nextindia-platform-card:nth-child(4).nextindia-in-view { animation-delay: 0.28s; }

/* ---- Mobile: visible durations (re-play on scroll up same as web) ---- */
@media screen and (max-width: 767px) {
    main.scroller_container .nextindia-hero-content {
        animation-duration: 1s;
    }
    main.scroller_container .nextindia-ani-reveal-left.nextindia-in-view,
    main.scroller_container .nextindia-ani-blur-up.nextindia-in-view,
    main.scroller_container .nextindia-ani-scale-blur.nextindia-in-view,
    main.scroller_container .nextindia-ani-slide-left.nextindia-in-view,
    main.scroller_container .nextindia-ani-slide-right.nextindia-in-view,
    main.scroller_container .nextindia-ani-cross-reveal.nextindia-in-view,
    main.scroller_container .nextindia-ani-stagger-up.nextindia-in-view {
        animation-duration: 0.65s;
    }
    main.scroller_container .nextindia-ani-bounce-in.nextindia-in-view,
    main.scroller_container .nextindia-ani-fade-stagger.nextindia-in-view,
    main.scroller_container .nextindia-ani-slide-up.nextindia-in-view,
    main.scroller_container .nextindia-ani-glow-in.nextindia-in-view,
    main.scroller_container .nextindia-ani-cta-pop.nextindia-in-view {
        animation-duration: 0.55s;
    }
    main.scroller_container .nextindia-platform-section .nextindia-globe.nextindia-in-view {
        animation: nextindia-globe-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
                   nextindia-globe-float 5s ease-in-out 1s infinite;
    }
    main.scroller_container .nextindia-platform-section .nextindia-platform-card.nextindia-in-view {
        animation-duration: 0.65s;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    main.scroller_container .nextindia-animate,
    main.scroller_container .nextindia-animate.nextindia-in-view {
        animation: none !important;
        opacity: 1;
        filter: none !important;
        transform: none !important;
    }
    main.scroller_container .nextindia-platform-section .nextindia-globe.nextindia-in-view {
        animation: none;
        opacity: 1;
    }
}