/* ================= 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 24px; /* no top gap, only bottom */
    height: 260px;
    background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("https://res.cloudinary.com/dhiyjhwjn/image/upload/v1768298614/AX_c2hlr_okazpp.jpg");
    background-size: cover;
    background-position: center;
    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: 260px;
    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 */






/* ================= PROGRAM GROUP HEADINGS ================= */
.program-group-title {
    font-size: 22px;
    font-weight: 800;
    color: #4B1D69;
    margin: 20px 0 26px;
    position: relative;
    padding-left: 14px;
}

.program-group-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 5px;
    height: 22px;
    background: #4B1D69;
    border-radius: 3px;
}

.program-group-gap {
    margin-top: 52px;
}



/* ================= MORE INFO BUTTON (CONTENT-FIT) ================= */
.more-info-btn {
    display: inline-flex; /*  already correct */
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-bottom: 10px;
    width: fit-content; /*  KEY LINE */
    max-width: max-content; /*  SAFETY */
    align-self: flex-start; /*  PREVENT STRETCH */

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: #4B1D69;
    background: #ffffff;
    border: 1.5px solid #4B1D69;
    border-radius: 3px;
    white-space: nowrap; /*  single line */
    cursor: pointer;
    transition: all .2s ease;
}

/* icon */
.more-info-btn i {
    font-size: 14px;
}

/* hover */
.more-info-btn:hover {
    background: #EFE7F4;
    transform: translateY(-1px);
}

.program-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; /*  ensures buttons never stretch */
}

.more-info-btn {
    font-weight: 600;
    opacity: .95;
}
/* ================= PROGRAM ACTION BUTTONS ================= */

.program-actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap; /* desktop: side by side */
}

/* Mobile: stack buttons */
@media (max-width: 600px) {
    .program-actions {
        flex-direction: column;
        align-items: flex-start; /* keep content-fit */
        gap: 10px;
    }
}
/* ================= PROGRAM ACTION BUTTONS – ALIGNMENT FIX ================= */

.program-actions {
    display: flex;
    gap: 12px;
    align-items: center; /*  SAME HEIGHT BASELINE */
}

/* FORCE SAME HEIGHT FOR BOTH BUTTONS */
.more-info-btn,
.brochure-btn-force {
    height: 42px; /*  SAME HEIGHT */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px; /* vertical padding removed */
    line-height: 1; /*  FIX TEXT OFFSET */

    box-sizing: border-box;
}

/* ================= DOWNLOAD BUTTON HOVER FIX ================= */

.brochure-btn-force {
    background: #ffffff;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    /* Hover effect */
    .brochure-btn-force:hover {
        background: #EFE7F4; /*  same family as More Info */
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(75,29,105,.18);
    }

        /* Icon animation */
        .brochure-btn-force:hover img {
            transform: translateY(2px);
        }

@media (max-width: 600px) {
    .program-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}


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