/* =========================
   ABOUT PAGE FULL SECTION
========================= */

.about-title-section {
    background: var(--white);
    padding: 52px 175px 22px;
}

.about-title-section h2 {
    font-family: var(--display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.title-underline {
    width: 52px;
    height: 3px;
    background: var(--red);
    border-radius: 2px;
    margin-top: 8px;
}

/* =========================
   BLOCK 1
========================= */
.block-1 {
    background: var(--white);
    padding: 52px 64px 64px;
    width: 85%;
    margin: 0 auto;
}

.block-1 h3 {
    font-family: var(--display);
    font-size: clamp(20px, 2.6vw, 32px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 20px;
}

.block-1 p {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
    line-height: 1.85;
}

.ai-power-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: var(--r12);
    display: block;
}

.banner-strip img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================
   CUTTING HEADING
========================= */
.cutting-heading-section {
    background: var(--white);
    padding: 0 175px 36px;
}

.cutting-heading-section h3 {
    font-family: var(--display);
    font-size: clamp(20px, 2.6vw, 32px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
    max-width: 580px;
}

/* =========================
   DARK STRIP
========================= */
.dark-strip {
    width: 100%;
    height: 340px;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.dark-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.7);
}

/* =========================
   BLOCK 2
========================= */
.block-2 {
    background: var(--white);
    padding: 64px 64px;
    width: 85%;
    margin: 0 auto;
}

.block-2 p {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
    line-height: 1.85;
}

/* =========================
   DIVIDER
========================= */
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 64px;
}

/* =========================
   BLOCK 3
========================= */
.block-3 {
    background: var(--white);
    padding: 64px 64px 64px;
    width: 85%;
    margin: 0 auto;
}

.leadership-img {
    width: 100%;
    height: 490px;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--r12);
    display: block;
    filter: brightness(0.85) contrast(1.05);
}

.block-3 h3 {
    font-family: var(--display);
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 20px;
}

.block-3 p {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
    line-height: 1.85;
}

.leadership-author {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-top: 24px;
}

/* =========================
   COLLAB SECTION
========================= */
.collab-section {
    background: var(--white);
    padding: 40px 64px 80px;
    width: 85%;
    margin: 0 auto;
}

.collab-card {
    background: var(--red-l);
    border-radius: 22px;
    padding: 72px 80px 64px;
    text-align: center;
    border: 1px solid rgba(255, 61, 0, 0.12);
}

.collab-card h2 {
    font-family: var(--display);
    font-size: clamp(26px, 3.5vw, 48px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 0;
}

.collab-card p {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
    line-height: 1.8;
    max-width: 560px;
    margin: 24px auto 0;
}

/* =========================
   BUTTON
========================= */
.meii-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: 1.5px solid var(--red);
    border-radius: 50px;
    padding: 15px 40px;
    background: transparent;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    margin-top: 40px;
    transition: all .25s ease;
    cursor: pointer;
}

.meii-btn:hover {
    background: var(--red);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--s2);
}

.meii-btn:hover .btn-arrow path {
    stroke: var(--white);
}

/* =========================
   TABLET
========================= */
@media (max-width: 991px) {

    .about-title-section,
    .block-1,
    .block-2,
    .block-3,
    .cutting-heading-section,
    .collab-section {
        padding-left: 28px;
        padding-right: 28px;
    }

    .section-divider {
        margin: 0 28px;
    }

    .ai-power-img {
        height: 260px;
    }

    .dark-strip {
        height: 240px;
    }

    .leadership-img {
        height: 320px;
    }

    .collab-card {
        padding: 48px 28px 48px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 575px) {

    .about-title-section,
    .block-1,
    .block-2,
    .block-3,
    .cutting-heading-section,
    .collab-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-divider {
        margin: 0 18px;
    }

    .about-title-section h2 {
        font-size: 28px;
    }

    .block-1 h3,
    .cutting-heading-section h3,
    .block-3 h3 {
        font-size: 22px;
    }

    .ai-power-img {
        height: 220px;
    }

    .dark-strip {
        height: 200px;
    }


    .collab-card {
        padding: 36px 18px 40px;
    }

    .meii-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

/*New Chnages for better mobile experience as per bug sheet*/
@media (max-width: 441px) {
    .banner-strip img {
        height: 180px;
    }

    .block-3 {
        padding: 0px 30px 30px;
        width: 100%;
    }

    .block-2 {
        padding: 30px 28px;
        width: 100%;
    }

    .block-1 {
        width: 90%;
    }

    .collab-section {

        width: 100%;
    }

    .collab-card {
        padding: 32px 20px;
    }
}