/* ================= SECTION ================= */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px var(--pad);
}

.section h2 {
    font-size: 22px;
    color: var(--purple);
    margin-bottom: 8px;
    font-weight: 800;
}

    .section h2::after {
        content: "";
        display: block;
        width: 48px;
        height: 3px;
        background: var(--mustard);
        margin-top: 6px;
    }

.section p {
    grid-column: 2; /* align with right-side content */
    text-align: justify;
}

/* ================= PROGRAMMES ================= */
.iitdm-programmes {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 60px;
    background: var(--light-purple);
}




/* Alternate background */
.iitdm-program-card:nth-child(even) {
    background: var(--base-bg);
    padding: 32px 24px;
    border-radius: 14px;
}

.program-tag {
    font-size: 12px;
    font-weight: 800;
    color: var(--mustard);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.program-left h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--purple);
    margin: 8px 0 14px;
    line-height: 1.35;
}

.program-right p {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    margin-bottom: 8px;
}

.program-right strong {
    color: var(--purple)
}

/* ================= SCROLL REVEAL ================= */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: .6s ease;
}

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
    body {
        padding-top: 100px
    }

    :root {
        --headerH: 100px;
    }

    .site-nav {
        display: none
    }

    .header-inner,
    .breadcrumb-inner,
    .section,
    .iitdm-programmes,
    .mega-inner {
        padding-left: var(--pad-m);
        padding-right: var(--pad-m);
    }

    .brand img {
        height: 70px
    }

    .brand-mark {
        font-size: 28px
    }

    .iitdm-program-card {
        grid-template-columns: 1fr
    }

    .mega-inner {
        grid-template-columns: 1fr
    }

    .mega-left {
        border-right: none;
        padding-right: 0
    }

    .mega-right {
        padding-left: 0
    }

    .program-grid {
        grid-template-columns: 1fr
    }
}


/* =================================================
                   PROGRAMMES
                   ================================================= */
.iitdm-programmes {
    background: var(--base-bg);
    padding: 30px var(--pad) 80px;
    max-width: var(--maxw);
    margin: 0 auto;
}

/* PROGRAM CARD */


/* ALTERNATE COLORS */
.iitdm-program-card:nth-child(odd) {
    background: #EFE7F4;
}

.iitdm-program-card:nth-child(even) {
    background-color: #fff;
}

/* LEFT */
.program-left h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--purple);
    line-height: 1.35;
}

.program-actions {
    margin-top: 16px
}



/* RIGHT */
.program-right p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 10px;
}

.program-right strong {
    color: var(--purple)
}

/* =================================================
                   RESPONSIVE
                   ================================================= */
@media(max-width:900px) {
    .site-nav {
        display: none
    }

    .iitdm-program-card {
        grid-template-columns: 1fr
    }

    .brand img {
        height: 70px
    }
}

/* ================= BREADCRUMB ================= */
.breadcrumb {
    background: var(--light-purple);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.breadcrumb-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: 0px;
    font-size: 14px;
}

.breadcrumb {
    margin-bottom: 0;
}

    .breadcrumb a {
        color: var(--purple);
        font-weight: 700;
        text-decoration: none;
    }

    .breadcrumb span {
        margin: 0 8px;
        color: #777;
    }

.hero {
    max-width: var(--maxw);
    margin: 0 auto 4px; /* no top gap, only bottom */
    height: 350px;
    background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("https://res.cloudinary.com/dhiyjhwjn/image/upload/v1768280467/aboutu_dq80p8.jpg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 0;
}

    .hero h1 {
        background: rgba(75,29,105,.85);
        color: #fff;
        padding: 22px;
        font-size: 32px;
        font-weight: 800;
    }

/* ===== CONTENT-FIT OUTLINE BUTTON ===== */
.brochure-btn-force {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px; /* controls button size */
    width: auto; /* 🔑 content-based width */
    height: auto; /* natural height */

    border: 1.5px solid currentColor;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    /* text */
    .brochure-btn-force span {
        white-space: nowrap;
    }

    /* arrow */
    .brochure-btn-force img {
        width: 16px;
        height: 16px;
        display: block;
        transition: transform .2s ease;
    }

    /* hover color change */
    .brochure-btn-force:hover {
        color: var(--purple);
        border-color: var(--purple);
    }

        /* optional arrow micro-motion */
        .brochure-btn-force:hover img {
            transform: translateY(2px);
        }






/* =====================================================
   PROGRAM INFO BOX STRIP (FINAL)
===================================================== */
.program-info-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /*  4 IN ONE ROW */
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* INFO BOX */
.info-box {
    background: #FBFAFD;
    border: 1px solid rgba(75,29,105,.18);
    border-radius: 14px;
    padding: 18px 20px;
}

/* LABEL */
.info-label {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

/* MAIN VALUE */
.info-main {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
    white-space: nowrap;
}

/* SUB VALUE */
.info-sub {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
    line-height: 1.4;
}

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

@media(max-width:1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
    }
}
/* ================= PROGRAM CARD LAYOUT – FIXED ================= */

.iitdm-program-card {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr); /*  FIX */
    gap: 40px;
    background: #EFE7F4;
    padding: 36px;
    border-radius: 18px;
    margin: 22px 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

/* LEFT */
.program-left {
    max-width: 100%;
}

/* RIGHT */
.program-right {
    max-width: none; /*  IMPORTANT */
    width: 100%;
}

    /* TEXT */
    .program-right p {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 10px;
        color: #333;
        word-break: normal;
        white-space: normal;
    }

/* ===== FORCE 3-LINE STACK INSIDE INFO BOX ===== */

.info-box {
    background: #FBFAFD;
    border: 1px solid rgba(75,29,105,.18);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; /*  */
    flex-direction: column; /*  */
    gap: 6px; /*  */
}

/* Line 1: label */
.info-label {
    font-size: 12px;
    color: #777;
}

/* Line 2: main value */
.info-main {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
}

/* Line 3: sub text */
.info-sub {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
/* ===== ALIGN INFO STRIP WITH CONTENT COLUMN ===== */

.program-info-strip {
    grid-column: 2; /*  align under right content */
    max-width: 100%; /* do NOT stretch */
    justify-self: start; /* left align */
}

/* desktop only */
@media (min-width: 901px) {
    .program-info-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* tablet */
@media (max-width: 900px) {
    .program-info-strip {
        grid-column: 1;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* mobile */
@media (max-width: 600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   PROGRAM INFO STRIP – FINAL
   FULL WIDTH LEFT → RIGHT
   =============================== */

.program-info-strip {
    grid-column: 1 / -1; /*  FULL WIDTH */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* INFO BOX */
.info-box {
    background: #ffffff;
    border: 1px solid rgba(75,29,105,.15);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* LABEL */
.info-label {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
}

/* MAIN VALUE */
.info-box strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #000;
    line-height: 1.25;
    white-space: nowrap;
}

/* SUB TEXT */
.info-box small {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: #555;
    line-height: 1.4;
}

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

/* Tablet */
@media (max-width: 1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* ===== PROGRAM CARD GRID FIX ===== */
.iitdm-program-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto; /*  2 rows */
    column-gap: 40px;
    row-gap: 20px;
}

/* Top content occupies row 1 */
.program-top {
    grid-column: 1 / -1; /* span both columns */
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
}

/* Info boxes in row 2 */
.program-info-strip {
    grid-column: 1 / -1; /* FULL WIDTH */
    margin-top: 0; /*  kill gap */
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* ===== PROGRAM CARD GRID (FINAL FIX) ===== */
.iitdm-program-card {
    display: grid;
    grid-template-rows: auto auto; /*  TWO ROWS */
    row-gap: 16px;
}

/* Top content row */
.program-top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 40px;
}

/* Boxes row */
.program-info-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 0; /*  REMOVE GAP */
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* Responsive */
@media(max-width:1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
    }
}

/* ===== INFO STRIP — FULL WIDTH EQUAL CARDS ===== */
.program-info-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /*  equal width */
    gap: 20px;
    width: 100%; /*  occupy full row */
    margin: 0; /*  remove centering gaps */
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* Cards fill their grid cell */
.info-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Responsive */
@media(max-width:1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
    }
}

/* Programme card white */
.iitdm-program-card.alt-white {
    background: #ffffff;
}

    /* Info boxes on white card */
    .iitdm-program-card.alt-white .info-box {
        background: #F3ECF8; /* light lavender */
        border: 1px solid rgba(75,29,105,.18);
    }


/* LEFT COLUMN – FORCE BUTTON TO BOTTOM */
.program-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*  KEY LINE */
}
/* FORCE DOWNLOAD BUTTON TO CONTENT WIDTH */
.brochure-btn-force {
    align-self: flex-start; /*  stops stretching */
    width: fit-content; /*  exact content width */
}







/* ================= ADMISSIONS CTA ================= */
.admissions-cta {
    max-width: var(--maxw);
    margin: 0 auto 28px; /* space below hero */
    padding: 0 var(--pad);
    display: flex;
    justify-content: center;
}

/* Button */
.admissions-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #4B1D69;
    background: #FDBC01;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(75,29,105,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}

    /* Hover */
    .admissions-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(75,29,105,.45);
    }

    /* Arrow animation */
    .admissions-btn i {
        transition: transform .2s ease;
    }

    .admissions-btn:hover i {
        transform: translateX(4px);
    }

/* Mobile */
@media(max-width:600px) {
    .admissions-btn {
        font-size: 15px;
        padding: 12px 22px;
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 rgba(226,178,58,.0);
    }

    50% {
        box-shadow: 0 0 24px rgba(226,178,58,.55);
    }

    100% {
        box-shadow: 0 0 0 rgba(226,178,58,.0);
    }
}

.admissions-btn {
    animation: pulseGlow 2.8s infinite;
}

    /* Bell icon */
    .admissions-btn .bell-icon {
        font-size: 16px;
        animation: bellRing 2.2s infinite;
        transform-origin: top center;
    }

    /* Arrow icon */
    .admissions-btn .arrow-icon {
        transition: transform .2s ease;
    }

    .admissions-btn:hover .arrow-icon {
        transform: translateX(4px);
    }

/* Bell ring animation */
@keyframes bellRing {
    0% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(12deg);
    }

    10% {
        transform: rotate(-12deg);
    }

    15% {
        transform: rotate(10deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    25% {
        transform: rotate(6deg);
    }

    30% {
        transform: rotate(-6deg);
    }

    35% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}




/* =====================================================
   GLOBAL PAGE BACKGROUND (LIKE IMAGE)
===================================================== */
.iitdm-programmes {
    background: #F1ECF8; /* soft lavender page bg */
    padding: 60px var(--pad) 80px;
}

/* =====================================================
   BREADCRUMB – LEFT ALIGNED (FIX)
===================================================== */
.breadcrumb-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--pad);
    display: flex;
    align-items: center;
    justify-content: flex-start; /*  LEFT ALIGN */
    font-size: 14px;
}

/* =====================================================
   PROGRAM CARD – BASE
===================================================== */
.iitdm-program-card {
    background: #EFE7F4;
    padding: 40px;
    border-radius: 18px;
    margin-bottom: 36px; /* spacing between cards */
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

    /* =====================================================
   ALTERNATE CARD COLORS (MATCH IMAGE)
===================================================== */
    .iitdm-program-card:nth-child(even) {
        background: #ffffff;
    }

        .iitdm-program-card:nth-child(even) .info-box {
            background: #F3ECF8;
        }

/* =====================================================
   PROGRAM CARD GRID – CLEAN & CONSISTENT
===================================================== */
.iitdm-program-card {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 24px;
}

/* TOP CONTENT */
.program-left h3 {
    margin-bottom: 16px;
}

/* =====================================================
   INFO STRIP – FULL WIDTH, EVEN CARDS
===================================================== */
.program-info-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* INFO BOX */
.info-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
    }

    .iitdm-program-card {
        padding: 26px;
    }
}

/* =====================================================
   BIG LIGHT BOX THAT HOLDS ALL PROGRAM CARDS (MISSING)
   Matches sample: cards inside a soft panel
===================================================== */

/* Page background already: #F1ECF8 (your wrapper div) */
.iitdm-programmes {
    max-width: var(--maxw);
    margin: 0 auto 70px; /* center + bottom space */
    background: #FBFAFD; /* ✅ light box color (sample) */
    /* border-radius: 18px;*/
    padding: 34px; /* ✅ proper inner padding */
    /*  box-shadow: 0 14px 36px rgba(0,0,0,.06);
    border: 1px solid rgba(75,29,105,.08);*/
}

/* Keep spacing between cards inside the box */
.iitdm-program-card {
    margin: 0 0 24px;
}

    /* last card no extra gap */
    .iitdm-program-card:last-child {
        margin-bottom: 0;
    }

/* Mobile padding like sample */
@media(max-width:600px) {
    .iitdm-programmes {
        padding: 18px;
        /* border-radius: 14px;*/
    }
}

/* ================= BREADCRUMB (FINAL) ================= */
.breadcrumb {
    position: relative;
    z-index: 50;
    margin-top: var(--header-offset, 56px);
    background: var(--light-bg);
}

/* Force LEFT alignment */
.breadcrumb-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 14px var(--pad);
    display: flex;
    align-items: center;
    justify-content: flex-start; /*  LEFT */
    text-align: left;
}

/* Links */
.breadcrumb a {
    color: var(--purple);
    font-weight: 700;
    text-decoration: none;
}

.breadcrumb span {
    margin: 0 8px;
    color: #777;
}

@media (max-width: 600px) {
    .breadcrumb-inner {
        font-size: 13px;
        padding: 12px 16px;
    }
}
/* ================= BREADCRUMB – CONTENT ALIGNED ================= */
.breadcrumb {
    position: relative;
    z-index: 50;
    margin-top: 60px;
    background: var(--light-bg);
}

/* This stays centered as a block, text is LEFT inside it */
.breadcrumb-inner {
    max-width: var(--page-width);
    margin: 0 auto; /* keep content alignment */
    padding: 14px var(--pad);
    display: flex;
    justify-content: flex-start; /* LEFT */
    text-align: left;
}

.breadcrumb {
    position: relative;
    z-index: 50;
    margin-top: 60px;
    background: var(--light-bg);
}

.breadcrumb-inner {
    max-width: none; /*  remove centering */
    margin: 0;
    padding: 14px 24px; /* manual left padding */

    display: flex;
    justify-content: flex-start;
    text-align: left;
}

/* ================= HEADER GAP (RESPONSIVE) ================= */
/* Default safe offset (desktop) */
:root {
    --header-offset: 20px; /* change if your header is taller */
}

/* On tablets/mobile reduce the gap */
@media (max-width: 768px) {
    :root {
        --header-offset: 1px;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    :root {
        --header-offset: 1px;
    }
}

/* ================= BREADCRUMB (LEFT + RESPONSIVE) ================= */
.breadcrumb {
    margin-top: var(--header-offset);
    background: var(--light-bg);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Keep it aligned with your content column */
.breadcrumb-inner {
    padding-left: 10px; /* mobile safe */
}

    /* Breadcrumb text */
    .breadcrumb-inner a {
        color: var(--purple);
        font-weight: 700;
        text-decoration: none;
    }

    .breadcrumb-inner span {
        color: #777;
    }

/* ================= HERO SPACING (NO EXTRA MOBILE GAP) ================= */
.heroq {
    /* remove your margin-top:50px; */
    margin: 16px auto 36px; /* normal look */
}

/* mobile: tighter hero spacing */
@media (max-width: 768px) {
    .heroq {
        margin: 10px auto 22px;
    }

    /* Keep it aligned with your content column */
    .breadcrumb-inner {
        padding-left: 10px; /* mobile safe */
    }
}

.brochure-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid #4B1D69;
    background: #fff;
    color: #4B1D69;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.download-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
    position: relative;
    top: 1px;
}

.brochure-outline-btn:hover {
    background: #DDD3ED;
    color: #4B1D69;
}


/* arrow */
.brochure-outline-btn img {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform .2s ease;
}



/* optional arrow micro-motion */
.brochure-outline-btn:hover img {
    transform: translateY(2px);
}
/* Container */
.page-container {
    padding: 40px;
}



/* =====================================================
   GLOBAL MOBILE RESET (IMPORTANT)
===================================================== */
* {
    box-sizing: border-box;
}

/* =====================================================
   BIG LIGHT BOX – RESPONSIVE
===================================================== */
.iitdm-programmes {
    background: #FBFAFD;
    border-radius: 16px;
    padding: 32px;
    margin: 0 auto 60px;
}

/* Tablet */
@media (max-width: 1024px) {
    .iitdm-programmes {
        padding: 24px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .iitdm-programmes {
        padding: 16px;
        border-radius: 12px;
    }
}

/* =====================================================
   PROGRAM CARD – MOBILE STACK
===================================================== */
@media (max-width: 900px) {
    .iitdm-program-card {
        display: flex;
        flex-direction: column; /*  stack */
        gap: 18px;
        padding: 22px;
    }
}

/* =====================================================
   LEFT / RIGHT CONTENT – FULL WIDTH
===================================================== */
@media (max-width: 900px) {
    .program-left,
    .program-right {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================
   INFO STRIP – RESPONSIVE GRID
===================================================== */
@media (max-width: 1024px) {
    .program-info-strip {
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .program-info-strip {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 14px;
    }
}

/* =====================================================
   INFO BOX – MOBILE COMFORT
===================================================== */
@media (max-width: 600px) {
    .info-box {
        padding: 16px;
        border-radius: 12px;
    }

    .info-main {
        font-size: 17px;
    }

    .info-sub {
        font-size: 13px;
    }
}

/* =====================================================
   BROCHURE BUTTON – MOBILE FRIENDLY
===================================================== */
@media (max-width: 600px) {
    .brochure-btn-force {
        font-size: 14px;
        padding: 10px 14px;
    }
}

/* =====================================================
   HERO TEXT – MOBILE SCALE
===================================================== */
@media (max-width: 600px) {
    .hero {
        height: 200px;
    }

        .hero h1 {
            font-size: 22px;
            padding: 16px;
        }
}

/* =====================================================
   BREADCRUMB – MOBILE ALIGN
===================================================== */
@media (max-width: 600px) {
    .breadcrumb-inner {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* ================= HERO – LEFT BOTTOM TITLE ================= */

.heroo {
    position: relative; /* 🔑 anchor for absolute text */
    max-width: var(--maxw);
    margin: 0 auto 24px;
    height: 260px;
    overflow: hidden;
}

/* Title box */
.hero h1 {
    position: absolute;
    left: 32px; /*  left corner */
    bottom: 28px; /*  bottom corner */

    margin: 0;
    padding: 18px 28px;
    background: rgba(75,29,105,.85); /* purple strip */
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    border-radius: 6px;
    max-width: 80%;
}

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

/* Tablet */
@media (max-width: 900px) {
    .hero {
        height: 220px;
    }

        .hero h1 {
            font-size: 26px;
            left: 20px;
            bottom: 20px;
            padding: 14px 22px;
            max-width: 90%;
        }
}

/* Mobile */
@media (max-width: 600px) {
    .hero {
        height: 180px;
    }

        .hero h1 {
            font-size: 20px;
            left: 16px;
            bottom: 16px;
            border-radius: 4px;
        }
}
/* ================= REMOVE GAP ABOVE HERO ================= */

/* Remove extra spacing below breadcrumb */
.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-inner {
    padding-bottom: 10px; /*  kill bottom gap */
}

/* Ensure hero starts immediately */
.hero {
    margin-top: 0 !important;
}

/* Remove padding from parent wrapper above hero */
.breadcrumb + div {
    padding-top: 0 !important;
}

/* Safety reset */
body {
    margin: 0;
}

/* ================= HERO – FULL EDGE, NO GAP ================= */

.hero {
    position: relative;
    width: 100%; /*  FULL WIDTH */
    max-width: none; /*  REMOVE CONSTRAINT */
    margin: 0; /*  NO AUTO CENTER */

    height: 300px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}


    .hero h1 {
        position: absolute;
        left: 0; /*  TOUCH EDGE */
        bottom: 0; /*  TOUCH EDGE */



        background: rgba(75,29,105,.88);
        color: #fff;
        font-size: 34px;
        font-weight: 800;
        line-height: 1.1;
        border-radius: 0 6px 0 0; /* optional */
    }

@media (max-width: 600px) {
    .hero {
        height: 180px;
    }

        .hero h1 {
            font-size: 20px;
            padding: 12px 18px;
        }
}

/* ================= INFO CARD HEADING UNDERLINE ================= */
.info-label {
    position: relative;
    display: inline-block; /* underline fits text width */
    padding-bottom: 6px;
    font-size: 12px;
    color: #777;
}

    /* underline */
    .info-label::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px; /* underline length */
        height: 2px;
        background: var(--purple);
        border-radius: 2px;
    }

/* ===============================
   MOBILE WIDTH FIX (CRITICAL)
   =============================== */

@media (max-width: 768px) {

    /* Kill all desktop width constraints */
    .section,
    .iitdm-programmes,
    .page-container,
    .breadcrumb-inner,
    .program-left,
    .program-right {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Remove heavy desktop padding */
    .page-container {
        padding: 16px !important;
    }

    .section {
        padding: 16px !important;
    }

    .iitdm-programmes {
        padding: 16px !important;
        border-radius: 0 !important;
    }

    /* Program cards full width */
    .iitdm-program-card {
        padding: 18px !important;
        margin: 0 0 20px !important;
        border-radius: 14px;
    }

    /* Info strip full width */
    .program-info-strip {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
}

.page-container {
    padding: 24px;
}

@media (max-width: 600px) {
    .page-container {
        padding: 16px;
    }
}
/* ===============================
   HERO HEIGHT – MOBILE FIX
   =============================== */

/* Tablet */
@media (max-width: 768px) {
    .hero {
        height: 180px; /* reduced from 260px */
    }
}

/* Mobile */
@media (max-width: 600px) {
    .hero {
        height: 140px; /*  perfect for mobile */
    }

        .hero h1 {
            font-size: 18px;
            padding: 10px 14px;
            line-height: 1.15;
            max-width: 95%;
        }
}

/* Small phones */
@media (max-width: 420px) {
    .hero {
        height: 120px; /*  compact */
    }

        .hero h1 {
            font-size: 16px;
            padding: 8px 12px;
        }
}

/* ===============================
   HERO – MOBILE COMPOSITION FIX
   =============================== */

@media (max-width: 600px) {

    .hero {
        height: 140px; /* compact */
        background-size: cover;
        background-position: center top; /*  KEY FIX */
    }

        .hero h1 {
            font-size: 18px;
            padding: 10px 14px;
            line-height: 1.15;
            left: 0;
            bottom: 0;
            max-width: 100%;
        }
}

/* Very small phones */
@media (max-width: 420px) {
    .hero {
        height: 120px;
        background-position: center center;
    }

        .hero h1 {
            font-size: 16px;
            padding: 8px 12px;
        }
}

/* ===============================
   ADMISSIONS CTA – FORCE ONE LINE
   =============================== */

.admissions-btn {
    white-space: nowrap; /*  KEY FIX */
}

/* Mobile fine-tuning */
@media (max-width: 600px) {
    .admissions-btn {
        font-size: 14px; /* slightly smaller */
        padding: 12px 20px; /* reduce horizontal padding */
        gap: 8px;
    }
}

/* =====================================================
   FORCE BRAND COLOR — #4B1D69
   Applies to ALL headings, labels, links in this page
   ===================================================== */

/* Headings */
.iitdm-programmes h2,
.iitdm-programmes h3,
.iitdm-programmes h4,
.section h2,
.section h3 {
    color: #4B1D69 !important;
}

/* Strong labels inside content */
.iitdm-programmes strong,
.program-right strong,
.info-label {
    color: #4B1D69 !important;
}

/* Breadcrumb */
.breadcrumb a,
.breadcrumb strong {
    color: #4B1D69 !important;
}

/* Links (Download brochure, etc.) */
.iitdm-programmes a,
.brochure-btn-force,
.brochure-outline-btn {
    color: #4B1D69 !important;
    border-color: #4B1D69 !important;
}

    /* Link hover */
    .iitdm-programmes a:hover,
    .brochure-btn-force:hover,
    .brochure-outline-btn:hover {
        color: #3a1556 !important; /* slightly darker */
        border-color: #3a1556 !important;
    }

/* Info strip values */
.info-box strong {
    color: #4B1D69 !important;
}

/* Admissions CTA text (icon-safe) */
.admissions-btn {
    color: #4B1D69 !important;
}
/* =====================================================
   INFO CARD LABEL UNDERLINE — NEUTRAL GRAY
   ===================================================== */

.info-label {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

    /* Gray underline instead of purple */
    .info-label::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%; /* underline length */
        height: 2px;
        background: rgba(0,0,0,.22); /* neutral gray */
        border-radius: 2px;
    }

/* =====================================================
   INFO CARD LABEL — FULL-WIDTH THIN GRAY UNDERLINE
   ===================================================== */

.info-label {
    position: relative;
    display: block; /*  full width */
    padding-bottom: 10px;
    margin-bottom: 6px;
}

    /* Full-width thin underline */
    .info-label::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0; /*  stretches full width */
        bottom: 0;
        height: 1px; /*  thin line */
        background: rgba(0,0,0,0.18); /* soft gray */
    }

/* ================= PAGE BREADCRUMB (NAMESPACED) ================= */
.pg-breadcrumb {
    max-width: 1300px;
    margin: 22px auto 14px;
    padding: 12px 20px;
    background: #f6f2fb;
    border-radius: 10px;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    color: #333;
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.pg-breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pg-breadcrumb a {
    color: var(--purple);
    font-weight: 600;
    text-decoration: none;
}

    .pg-breadcrumb a:hover {
        text-decoration: underline;
    }

.pg-breadcrumb span {
    color: #999;
}

.pg-breadcrumb strong {
    color: #000;
    font-weight: 700;
}

.page-offset {
    padding-top: 30px; /* match header height */
}

/* Mobile */
@media (max-width:768px) {
    .page-offset {
        padding-top: 2px; /* match header height */
    }

    .pg-breadcrumb {
        font-size: 13px;
        padding: 10px 14px;
    }
}
/* Offset page content below fixed header */





/* ==========================
           COLOR THEME (IITDM)
        ========================== */
:root {
    --purple: #4B1D69;
    --purple-light: #F1ECF8;
    --gold: #FDBC01;
    --text: #2b2b2b;
}

/* ==========================
           BASE
        ========================== */
body {
    margin: 0;
    font-family: "Montserrat", Arial, sans-serif;
    background: var(--purple-light);
    color: var(--text);
}

a {
    text-decoration: none;
}

/* ==========================
           PAGE HERO
        ========================== */
.page-hero {
    background: linear-gradient(135deg, #4B1D69, #6A2C91);
    color: #fff;
    padding: 70px 20px;
    text-align: center;
}

    .page-hero h1 {
        margin: 0;
        font-size: 42px;
        font-weight: 700;
        letter-spacing: .3px;
    }

    .page-hero p {
        margin-top: 14px;
        font-size: 16px;
        opacity: .9;
    }

/* ==========================
           LIST WRAPPER
        ========================== */
.news-list {
    width: min(1180px, calc(100% - 40px));
    margin: 50px auto 90px;
    background: #fff;
    padding: 10px 30px;
}

/* ==========================
           ITEM
        ========================== */
.news-item {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 36px;
    padding: 30px 0;
    border-bottom: 1px solid #e4dff0;
}

    .news-item:last-child {
        border-bottom: none;
    }

.news-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 6px;
    background: #ddd;
}

/* ==========================
           CONTENT
        ========================== */
.news-content {
    padding-top: 6px;
}

.news-date {
    display: block;
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.news-content h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px;
    color: var(--purple);
}

.read-more {
    display: inline-block;
    background: var(--gold);
    color: #111;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 4px;
    letter-spacing: .4px;
}

/* ==========================
           RESPONSIVE
        ========================== */
@media(max-width:1100px) {
    .news-item {
        grid-template-columns: 420px 1fr;
        gap: 24px;
    }

    .news-content h3 {
        font-size: 24px;
    }
}

@media(max-width:900px) {
    .news-item {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .news-image img {
        height: 220px;
    }
}

@media(max-width:520px) {
    .page-hero h1 {
        font-size: 30px;
    }

    .news-content h3 {
        font-size: 20px;
    }

    .read-more {
        padding: 10px 18px;
    }
}





/* ================= ABOUT SECTION ================= */
.about-section {
    --purple: #4B1D69;
    --gold: #FDBC01;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: flex-start;
}

/* ================= RIGHT PANEL ================= */

.about-right {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.right-card {
    width: 100%;
    background: linear-gradient(135deg, #5a2a7a, #4B1D69);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(75,29,105,0.35);
    overflow: hidden;
}

/* ================= CONTENT BLOCK ================= */

.block {
    padding: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .block h3 {
        font-size: 24px;
        font-weight: 600;
        /* color: #ffffff;*/
        /* color: #ffffff;*/ color: #FDBC01;
        margin-bottom: 10px;
    }

    .block p {
        font-size: 14px;
        color: #ffffff;
        line-height: 1.7;
        text-align: justify;
    }

    /* ================= FLEX BLOCKS ================= */

    .block.flex,
    .block.reverse {
        display: flex;
        gap: 28px;
        align-items: flex-start;
    }

    .block.reverse {
        justify-content: space-between;
    }

    /* TEXT SHOULD BE FULL WIDTH */
    .block.flex > div:last-child,
    .vision-mission {
        width: 100%;
        max-width: none;
    }

/* ================= IMAGE BOX ================= */

.img-box {
    width: 200px;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ================= STATS ================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 26px;
    background: rgba(255,255,255,0.08);
    text-align: center;
}

    .stats b {
        font-size: 30px;
        color: var(--gold);
        font-weight: 700;
    }

    .stats span {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: #ffffff;
    }

/* ================= VISION / MISSION ================= */

.vision-mission h4 {
    font-size: 24px;
    color: #FDBC01;
    margin: 12px 0 6px;
    font-weight: 600;
}

/* ================= REVEAL ================= */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s ease, transform .9s ease;
}

    .reveal.show {
        opacity: 1;
        transform: none;
    }

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

@media (max-width: 900px) {

    .about-section {
        padding: 30px 16px;
    }

    .block.flex,
    .block.reverse {
        flex-direction: column;
    }

    .img-box {
        width: 100%;
        height: 180px;
    }

    .stats {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 420px) {
    .stats {
        grid-template-columns: 1fr;
    }
}

/* ================= VISION & MISSION – FULL WIDTH TEXT ================= */

/* Kill reverse layout for this block */
.block .vision-mission {
    width: 100%;
    max-width: none;
}

/* Ensure text spans entire card */
.block:not(.flex) {
    display: block;
}

/* Improve readability */
.vision-mission p {
    max-width: 100%;
}

/* Optional spacing polish */
.vision-mission h4 {
    margin-top: 16px;
}



/* ================= ABOUT SECTION ================= */
.about-section {
    --purple: #4B1D69;
    --gold: #FFAE00;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

/* ================= RIGHT PANEL ================= */

.about-right {
    width: 100%;
}

.right-card {
    width: 100%;
    background: linear-gradient(135deg, #5a2a7a, #4B1D69);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(75,29,105,0.35);
    overflow: hidden;
}

/* ================= CONTENT BLOCK ================= */

.block {
    padding: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .block h3 {
        font-size: 24px;
        font-weight: 600;
        color: #FDBC01;
        margin-bottom: 10px;
    }

    .block p {
        font-size: 14px;
        color: #ffffff;
        line-height: 1.7;
        text-align: justify;
    }

/* ================= STATS ================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 26px;
    background: rgba(255,255,255,0.08);
    text-align: center;
}

    .stats b {
        font-size: 26px;
        color: var(--gold);
        font-weight: 700;
    }

    .stats span {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: #ffffff;
    }

/* ================= VISION & MISSION ================= */

.vision-mission {
    width: 100%;
}

    .vision-mission h4 {
        font-size: 24px;
        color: #fff;
        margin: 18px 0 6px;
        font-weight: 600;
    }

/* ================= REVEAL ================= */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s ease, transform .9s ease;
}

    .reveal.show {
        opacity: 1;
        transform: none;
    }

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

@media (max-width: 900px) {
    .about-section {
        padding: 30px 16px;
    }

    .stats {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 420px) {
    .stats {
        grid-template-columns: 1fr;
    }
}





.about-section {
    --purple: #4B1D69;
    --gold: #FFAE00;
    background: #ffffff;
    padding: 30px 20px;
    font-family: 'Poppins', sans-serif;
}

.about-right {
    width: 100%;
}

.right-card {
    width: 100%;
    background: linear-gradient(135deg, #5a2a7a, #4B1D69);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(75,29,105,0.35);
    overflow: hidden;
}

.block {
    padding: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .block h3 {
        font-size: 28px;
        font-weight: 600;
        color: #FDBC01;
        margin-bottom: 10px;
    }

    .block p {
        font-size: 17px;
        color: #ffffff;
        line-height: 1.7;
        text-align: justify;
    }

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 26px;
    background: rgba(255,255,255,0.08);
    text-align: center;
}

    .stats b {
        font-size: 60px;
        color: var(--gold);
        font-weight: 700;
    }

    .stats span {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: #ffffff;
    }

.vision-mission h4 {
    font-size: 24px;
    color: #FDBC01;
    margin: 18px 0 6px;
    font-weight: 600;
}
/* ===== MISSION POLISH (NO DESIGN CHANGE) ===== */

.vision-mission p {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
}

    /* gold dot */
    .vision-mission p::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FDBC01;
    }

/* Vision paragraph should NOT have dot */
.vision-mission h4 + p::before {
    display: none;
}
/* ================= FINAL POLISH – ANIMATIONS ================= */

/* Base hidden state */
.vision-mission h4,
.vision-mission > p,
.mission-list p {
    opacity: 0;
    transform: translateY(18px);
}

/* When active */
.vision-mission.animate h4,
.vision-mission.animate > p {
    animation: fadeUp 0.8s ease forwards;
}

/* Mission stagger */
.vision-mission.animate .mission-list p {
    animation: fadeUp 0.8s ease forwards;
}

    /* Stagger delays */
    .vision-mission.animate .mission-list p:nth-child(1) {
        animation-delay: .15s;
    }

    .vision-mission.animate .mission-list p:nth-child(2) {
        animation-delay: .30s;
    }

    .vision-mission.animate .mission-list p:nth-child(3) {
        animation-delay: .45s;
    }

    .vision-mission.animate .mission-list p:nth-child(4) {
        animation-delay: .60s;
    }

    .vision-mission.animate .mission-list p:nth-child(5) {
        animation-delay: .75s;
    }

    .vision-mission.animate .mission-list p:nth-child(6) {
        animation-delay: .90s;
    }

/* Vision first */
.vision-mission.animate h4 {
    animation-delay: 0s;
}

.vision-mission.animate > p {
    animation-delay: .15s;
}

/* Keyframe */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .vision-mission h4,
    .vision-mission > p,
    .mission-list p {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}
/* ================= MOBILE MICRO-RESPONSIVE FIX ================= */

@media (max-width: 420px) {

    .vision-mission {
        padding-left: 6px;
        padding-right: 6px;
    }

        .vision-mission h4 {
            font-size: 20px;
        }

    .mission-list p {
        font-size: 14px;
        line-height: 1.75;
        padding-left: 26px;
    }

        .mission-list p::before {
            left: 6px;
        }
}
/* ===== FORCE PURPLE CARD TO EXPAND (OVERRIDE EVERYTHING) ===== */

/* stop flex shrink issues */
.about-section {
    display: block !important;
    width: 100% !important;
}

/* ensure wrapper is full width */
.about-right {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* THIS is the purple card */
.right-card {
    display: block !important;
    width: 100% !important; /*  must stretch */
    max-width: none !important; /*  remove any cap */
    margin: 0 !important; /*  no centering gap */
}

/* =====================================================
    CRITICAL MOBILE VISIBILITY FIX
   Fixes: Only breadcrumb showing on mobile
   Cause: reveal/anim opacity + IntersectionObserver
   ===================================================== */

/* ---------- MOBILE: FORCE CONTENT VISIBILITY ---------- */
@media (max-width: 768px) {

    /* Disable ALL scroll-based hiding */
    .reveal,
    .anim,
    .vision-mission h4,
    .vision-mission p,
    .mission-list p {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* HERO must always render */
    .hero {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 140px;
    }

    /* ABOUT SECTION must render */
    .about-section,
    .about-right,
    .right-card,
    .block,
    .stats {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Prevent accidental width collapse */
    .section,
    .iitdm-programmes,
    .page-container,
    .breadcrumb-inner,
    .program-left,
    .program-right {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Prevent horizontal scroll hiding content */
    body {
        overflow-x: hidden;
    }
}

/* =====================================================
   SAFETY NET (ALL DEVICES)
   If IntersectionObserver fails, content still shows
   ===================================================== */
.reveal:not(.show),
.anim:not(.show) {
    opacity: 1;
    transform: none;
}

/* =====================================================
   MOBILE TEXT SPACING FIX – REMOVE "TRAIN" EFFECT
   ===================================================== */
@media (max-width: 768px) {

    /* About text paragraphs */
    .block p,
    .vision-mission p,
    .mission-list p {
        text-align: left !important; /*  key fix */
        word-spacing: normal !important;
        letter-spacing: normal !important;
        hyphens: auto; /* smoother line breaks */
    }

    /* Improve readability */
    .block p {
        font-size: 15px;
        line-height: 1.7;
    }
}

@media (max-width: 768px) {
    .block p {
        max-width: 100%;
        text-rendering: optimizeLegibility;
    }
}



/* ================= ABOUT US – PREMIUM ================= */
.about-wrap {
    background: #F1ECF8;
}

.about-card {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(160deg,#5f2a84,#4B1D69);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(75,29,105,.45);
    overflow: hidden;
    color: #fff;
}

/* ---------- SECTION BLOCK ---------- */
.about-block {
}

    .about-block:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    /* ---------- HEADINGS ---------- */
    .about-block h3,
    .about-block h4 {
        color: #FDBC01;
        font-weight: 800;
        margin-bottom: 14px;
    }

    /* ---------- TEXT ---------- */
    .about-block p {
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 14px;
        color: #F6F2FA;
        text-align: justify;
    }

/* ---------- STATS ---------- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: rgba(255,255,255,.08);
    padding: 34px 20px;
}

.about-stat {
    text-align: center;
    position: relative;
}

    .about-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 1px;
        background: rgba(255,255,255,.18);
    }

    .about-stat b {
        display: block;
        font-size: 30px;
        color: #FFAE00;
    }

    .about-stat span {
        font-size: 13px;
        opacity: .9;
    }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px) {
    .about-block {
        padding: 32px 26px;
    }

    .about-stats {
        grid-template-columns: repeat(2,1fr);
        row-gap: 24px;
    }

    .about-stat::after {
        display: none;
    }
}

@media(max-width:480px) {
    .about-stats {
        grid-template-columns: 1fr;
    }
}

/* ================= ABOUT PAGE – STABILITY FIX ================= */
/* NO VISUAL CHANGE – ONLY GUARANTEES CURRENT DESIGN */

/* Ensure text is full width */
.about-section .block,
.about-section .vision-mission {
    width: 100%;
    max-width: none;
}

/* Ensure no image space exists */
.about-section .img-box {
    display: none !important;
}

/* Prevent flex side-effects */
.about-section .block {
    display: block;
}

    /* Keep existing spacing exactly */
    .about-section .block p:last-child {
        margin-bottom: 0;
    }