/* =========================================================
   DP ACADEMY — HERO SECTION
   Rewritten to match your ACTUAL markup:
   section.hero.dp-hero > .dp-hero-bg, .dp-hero-overlay,
   .dp-hero-dots, .container.dp-hero-container > .dp-hero-content
   ========================================================= */


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

.hero.dp-hero {

    position: relative !important;

    width: 100% !important;

    /* Announcement bar ≈ 56px. Hero fills the rest of the
       viewport. dvh fallback avoids mobile-browser-chrome
       scroll glitches. */
    height: calc(100vh - 50px) !important;
    height: calc(100dvh - 50px) !important;

    min-height: calc(100vh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    background: #f5f8fe !important;
}


/* =========================================================
   BACKGROUND IMAGE LAYER
   ========================================================= */

.dp-hero-bg {

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    background-image: url("../images/hero/dp-hero-bg.webp") !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center right !important;

    pointer-events: none !important;
}


/* =========================================================
   LEFT FADE OVERLAY (sits above the photo, below the text)
   ========================================================= */

.dp-hero-overlay {

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background-image:
        linear-gradient(
            90deg,
            #f5f8fe 0%,
            #f5f8fe 27%,
            rgba(245,248,254,.99) 34%,
            rgba(245,248,254,.95) 40%,
            rgba(245,248,254,.86) 46%,
            rgba(245,248,254,.70) 52%,
            rgba(245,248,254,.50) 58%,
            rgba(245,248,254,.31) 64%,
            rgba(245,248,254,.15) 70%,
            rgba(245,248,254,.04) 76%,
            rgba(245,248,254,0) 82%
        ) !important;
}


/* =========================================================
   DECORATIVE DOTS
   ========================================================= */

.dp-hero-dots.dp-dots-left {

    position: absolute !important;

    left: 8px !important;
    top: 15% !important;

    z-index: 2 !important;

    width: 45px !important;
    height: 105px !important;

    opacity: .28 !important;

    pointer-events: none !important;

    background-image:
        radial-gradient(
            #3b82f6 2px,
            transparent 2px
        ) !important;

    background-size: 16px 16px !important;
}

.dp-hero-dots.dp-dots-bottom {

    display: none !important;
}


/* =========================================================
   CONTAINER

   CHANGED FROM ABSOLUTE POSITIONING:
   This is now a flex column that VERTICALLY CENTERS
   .dp-hero-content. That's what guarantees the hero never
   needs a scrollbar — on any screen height, the content
   block centers itself instead of being pinned at a fixed
   pixel offset that can run past the bottom edge.
   ========================================================= */

.dp-hero-container {

    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 0 0 75px !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;
}


/* =========================================================
   HERO CONTENT

   CHANGED: relative (in normal flow) instead of
   position:absolute + fixed top, so the container's
   flex-centering above takes effect.
   ========================================================= */

.dp-hero-content {

    position: relative !important;

    z-index: 10 !important;

    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    box-sizing: border-box !important;
}


/* =========================================================
   BADGE
   ========================================================= */

.dp-hero-content .dp-hero-badge {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    height: 44px !important;
    width: auto !important;

    margin: 0 0 38px 0 !important;
    padding: 0 18px !important;

    border: 0 !important;

    border-radius: 999px !important;

    background: #e5eeff !important;

    color: var(--primary) !important;

    font-size: 15px !important;
    line-height: 44px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}

.dp-hero-content .dp-hero-badge .material-symbols-outlined {

    font-size: 20px !important;

    color: var(--primary) !important;

    line-height: 1 !important;
}


/* =========================================================
   HEADING
   ========================================================= */

.dp-hero-title {

    display: block !important;

    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    color: #101b34 !important;

    font-size: 60px !important;

    line-height: 1.10 !important;

    letter-spacing: -1.9px !important;

    font-weight: 800 !important;

    text-align: left !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* "Lead Tomorrow." — forced onto its own line, in blue */

.dp-hero-title span {

    display: block !important;

    color: var(--primary) !important;
}


/* =========================================================
   YELLOW ACCENT LINE
   (this is a real <div class="dp-hero-line">, not ::after)
   ========================================================= */

.dp-hero-line {

    display: block !important;

    width: 67px !important;
    height: 4px !important;

    margin: 22px 0 32px 0 !important;

    border-radius: 10px !important;

    background: #f5b400 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dp-hero-description {

    display: block !important;

    width: 500px !important;
    max-width: 500px !important;

    margin: 0 0 32px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    color: #505b6d !important;

    font-size: 17px !important;

    line-height: 1.62 !important;

    font-weight: 400 !important;

    text-align: left !important;

    white-space: normal !important;
}


/* =========================================================
   BUTTON ROW
   ========================================================= */

.dp-hero-buttons {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 24px !important;

    width: auto !important;

    margin: 0 0 48px 0 !important;

    padding: 0 !important;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.dp-primary-btn {

    width: 237px !important;
    min-width: 237px !important;
    max-width: 237px !important;

    height: 61px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    border: none !important;

    border-radius: 32px !important;

    background: var(--primary) !important;

    color: #ffffff !important;

    font-size: 17px !important;

    line-height: 1 !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    text-decoration: none !important;
}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.dp-outline-btn {

    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;

    height: 61px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 11px !important;

    border: 1.8px solid var(--primary) !important;

    border-radius: 32px !important;

    background: rgba(255,255,255,.40) !important;

    color: var(--primary) !important;

    font-size: 17px !important;

    line-height: 1 !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    text-decoration: none !important;
}

.dp-primary-btn .material-symbols-outlined,
.dp-outline-btn .material-symbols-outlined {

    font-size: 20px !important;

    line-height: 1 !important;
}


/* =========================================================
   HERO STATS ROW
   ========================================================= */

.dp-hero-content .dp-hero-stats {

    position: relative !important;

    z-index: 20 !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    box-sizing: border-box !important;
}


/* =========================================================
   INDIVIDUAL STAT
   ========================================================= */

.dp-stat {

    display: flex !important;

    align-items: center !important;

    gap: 13px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* =========================================================
   DIVIDER (a real element between stats, not a pseudo)
   ========================================================= */

.dp-stat-divider {

    width: 1px !important;

    height: 51px !important;

    margin: 0 28px !important;

    background: rgba(30,41,59,.18) !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   STAT ICON CIRCLE
   ========================================================= */

.dp-stat-icon {

    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    background: #e3edff !important;

    /* color: #155bd7 !important; */
     color: var(--primary) !important;

    box-sizing: border-box !important;
}

.dp-stat-icon .material-symbols-outlined {

    font-size: 27px !important;

    /* color: #155bd7 !important; */
    color: var(--primary) !important;
}


/* =========================================================
   STAT NUMBER + LABEL
   (the plain <div><strong>..</strong><span>..</span></div>)
   ========================================================= */

.dp-stat > div:last-child {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    min-width: 0 !important;
}

.dp-stat > div:last-child strong {

    display: block !important;

    margin: 0 !important;

    color: #111827 !important;

    font-size: 20px !important;

    line-height: 1.05 !important;

    font-weight: 800 !important;

    white-space: nowrap !important;
}

.dp-stat > div:last-child span {

    display: block !important;

    margin: 5px 0 0 !important;

    color: #4b5563 !important;

    font-size: 14px !important;

    line-height: 1.15 !important;

    font-weight: 400 !important;

    white-space: nowrap !important;
}


/* =========================================================
   RESPONSIVE — LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .dp-hero-content {
        width: 580px !important;
        min-width: 580px !important;
        max-width: 580px !important;
    }

    .dp-hero-title {
        width: 580px !important;
        min-width: 580px !important;
        max-width: 580px !important;
        font-size: 60px !important;
    }

    .dp-hero-description {
        width: 510px !important;
        max-width: 510px !important;
    }
}


/* =========================================================
   RESPONSIVE — 1200 TO 1499
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1499px) {

    .dp-hero-content {
        width: 540px !important;
        min-width: 540px !important;
        max-width: 540px !important;
    }

    .dp-hero-title {
        width: 540px !important;
        min-width: 540px !important;
        max-width: 540px !important;
        font-size: 53px !important;
        line-height: 1.06 !important;
    }

    .dp-hero-description {
        width: 475px !important;
        max-width: 475px !important;
        font-size: 16px !important;
    }

    .dp-primary-btn {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 57px !important;
    }

    .dp-outline-btn {
        width: 232px !important;
        min-width: 232px !important;
        max-width: 232px !important;
        height: 57px !important;
    }
}


/* =========================================================
   SHORT DESKTOP (laptops, ≤850px tall)
   ========================================================= */

@media (min-width: 993px) and (max-height: 850px) {

    .dp-hero-content {
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
    }

    .dp-hero-content .dp-hero-badge {
        height: 40px !important;
        line-height: 40px !important;
        margin-bottom: 25px !important;
        font-size: 14px !important;
    }

    .dp-hero-title {
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
        font-size: 49px !important;
        line-height: 1.06 !important;
        letter-spacing: -1.4px !important;
    }

    .dp-hero-line {
        width: 62px !important;
        margin: 16px 0 16px 0 !important;
    }

    .dp-hero-description {
        width: 455px !important;
        max-width: 455px !important;
        margin-bottom: 22px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .dp-hero-buttons {
        margin-bottom: 32px !important;
        gap: 20px !important;
    }

    .dp-primary-btn {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
        height: 54px !important;
    }

    .dp-outline-btn {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 54px !important;
    }

    .dp-stat-icon {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
    }

    .dp-stat-icon .material-symbols-outlined {
        font-size: 23px !important;
    }
}


/* =========================================================
   VERY SHORT DESKTOP (≤700px tall)
   ========================================================= */

@media (min-width: 993px) and (max-height: 700px) {

    .dp-hero-content .dp-hero-badge {
        height: 34px !important;
        line-height: 34px !important;
        margin-bottom: 14px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    .dp-hero-title {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    .dp-hero-line {
        margin: 10px 0 10px 0 !important;
    }

    .dp-hero-description {
        margin-bottom: 14px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .dp-hero-buttons {
        margin-bottom: 18px !important;
    }

    .dp-primary-btn,
    .dp-outline-btn {
        height: 44px !important;
    }

    .dp-stat-icon {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }
}


/* =========================================================
   TABLET — hero returns to natural document flow
   ========================================================= */

@media (max-width: 992px) {

    .hero.dp-hero {
        height: auto !important;
        min-height: 0 !important;
    }

    .dp-hero-overlay {
        background-image:
            linear-gradient(
                180deg,
                rgba(245,248,254,.95),
                rgba(245,248,254,.98)
            ) !important;
    }

    .dp-hero-bg {
        background-position: center !important;
    }

    .dp-hero-container {
        height: auto !important;
        justify-content: flex-start !important;
        padding: 50px 30px !important;
    }

    .dp-hero-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 650px !important;
        margin: 0 auto !important;
    }

    .dp-hero-title {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 620px !important;
        font-size: 48px !important;
    }

    .dp-hero-description {
        width: 100% !important;
        max-width: 560px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .dp-hero-container {
        padding: 40px 20px !important;
    }

    .dp-hero-content {
        align-items: center !important;
        text-align: center !important;
    }

    .dp-hero-content .dp-hero-badge {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 45px !important;
    }

    .dp-hero-title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(34px, 8vw, 46px) !important;
        letter-spacing: -1px !important;
        text-align: center !important;
    }

    .dp-hero-line {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dp-hero-description {
        width: 100% !important;
        max-width: 520px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    .dp-hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .dp-hero-content .dp-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .dp-stat {
        justify-content: center !important;
    }

    .dp-stat-divider {
        display: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .dp-hero-container {
        padding: 35px 18px !important;
    }

    .dp-hero-title {
        font-size: 35px !important;
    }

    .dp-hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }

    .dp-primary-btn,
    .dp-outline-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 310px !important;
    }

    .dp-hero-content .dp-hero-stats {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/*======================================================
                COURSE SECTION
======================================================*/

.course-section{

    padding:110px 0;

    background:#ffffff;

}


/*===================================
SECTION TITLE
===================================*/

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    background:#eef4ff;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

    white-space:nowrap;

    max-width:fit-content;
}

.section-heading h2{

    font-size:46px;

    font-weight:800;

    color:#111827;

    margin-bottom:20px;

}

.section-heading p{

    color:#6b7280;

    line-height:1.8;

    font-size:17px;

}

/*===================================
GRID
===================================*/

.course-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*===================================
CARD
===================================*/

.course-card{

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    border:1px solid #edf2f7;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.course-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.08);

}

/* Blue Top Border */

.course-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.35s;

}

.course-card:hover::before{

    transform:scaleX(1);

}

/*===================================
ICON
===================================*/

.course-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}

.course-icon span{

    color:var(--primary);

    font-size:34px;

}

/*===================================
TEXT
===================================*/

.course-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:#111827;

}

.course-card p{

    color:#6b7280;

    line-height:1.8;

    margin-bottom:28px;

}

/*===================================
BUTTON
===================================*/

.course-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.course-card:hover a{

    gap:14px;

}


/*======================================================
                WHY CHOOSE US
======================================================*/

/* =========================================================
   WHY CHOOSE US — FIT TO ONE SCREEN, NO SCROLL

   Same approach as the hero: fixed viewport height +
   flex-centered content, so the whole section is visible
   without scrolling on any screen tall enough for it
   (desktop/laptop). Below 992px it reverts to normal
   document flow, since a photo + 4-item feature list
   realistically needs to scroll on small screens.
   ========================================================= */

.why-section {

    position: relative !important;

    width: 100% !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;

    padding: clamp(24px, 4vh, 60px) 0 !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    background: #f8fbff !important;

    overflow: hidden !important;
}

.why-section > .container {

    width: 100% !important;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.why-wrapper {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    align-items: center !important;

    gap: clamp(32px, 5vw, 80px) !important;

    width: 100% !important;
}


/* =========================================================
   LEFT — IMAGE BLOCK

   Sized with clamp() so it shrinks on short screens instead
   of pushing the section taller than the viewport.
   ========================================================= */

.why-image {

    position: relative !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;
}

.image-bg {

    position: absolute !important;

    width: clamp(240px, 34vh, 420px) !important;
    height: clamp(240px, 34vh, 420px) !important;

    border-radius: 40px !important;

    background: linear-gradient(135deg, #2563eb, #4f8dfd) !important;

    transform: rotate(-8deg) !important;
}

.why-image img {

    width: clamp(250px, 35vh, 430px) !important;

    max-width: 100% !important;

    border-radius: 24px !important;

    position: relative !important;
    z-index: 2 !important;

    box-shadow: 0 30px 60px rgba(0, 0, 0, .15) !important;
}

.experience-card {

    position: absolute !important;

    bottom: clamp(10px, 2vh, 20px) !important;
    left: 0 !important;

    background: #fff !important;

    padding: clamp(12px, 1.8vh, 20px) clamp(16px, 2vw, 28px) !important;

    border-radius: 20px !important;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08) !important;

    z-index: 5 !important;
}

.experience-card h2 {

    font-size: clamp(22px, 3.5vh, 42px) !important;

    color: var(--primary) !important;

    margin-bottom: 5px !important;
}

.experience-card span {

    color: #6b7280 !important;

    font-size: clamp(12px, 1.6vh, 15px) !important;
}


/* =========================================================
   RIGHT — CONTENT
   ========================================================= */

.why-content h2 {

    font-size: clamp(26px, 4.2vh, 46px) !important;

    line-height: 1.2 !important;

    margin: clamp(10px, 1.6vh, 20px) 0 !important;
}

.why-content > p {

    font-size: clamp(14px, 1.7vh, 17px) !important;

    color: #6b7280 !important;

    line-height: 1.7 !important;

    margin-bottom: clamp(16px, 3vh, 40px) !important;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.why-list {

    display: flex !important;

    flex-direction: column !important;

    gap: clamp(10px, 2vh, 22px) !important;

    margin-bottom: clamp(18px, 3.2vh, 45px) !important;
}

.why-item {

    display: flex !important;

    align-items: flex-start !important;

    gap: clamp(12px, 1.6vw, 18px) !important;
}

.why-item span {

    width: clamp(38px, 5.4vh, 58px) !important;
    height: clamp(38px, 5.4vh, 58px) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: clamp(11px, 1.6vh, 18px) !important;

    background: #eef4ff !important;

    color: var(--primary) !important;

    font-size: clamp(19px, 2.8vh, 30px) !important;

    flex-shrink: 0 !important;
}

.why-item h4 {

    font-size: clamp(14px, 1.9vh, 20px) !important;

    margin-bottom: clamp(2px, .6vh, 8px) !important;
}

.why-item p {

    color: #6b7280 !important;

    line-height: 1.5 !important;

    font-size: clamp(12.5px, 1.6vh, 15px) !important;
}


/* =========================================================
   TABLET / MOBILE — revert to normal scrolling flow
   ========================================================= */

@media (max-width: 992px) {

    .why-section {

        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        padding: 70px 0 !important;
    }

    .why-wrapper {

        display: block !important;
    }

    .why-image {

        margin-bottom: 45px !important;
    }

    .image-bg,
    .why-image img {

        width: min(400px, 80vw) !important;
        height: min(400px, 80vw) !important;
    }

    .why-content h2 {

        font-size: 34px !important;
    }

    .why-content > p {

        font-size: 16px !important;
    }

    .why-item span {

        width: 52px !important;
        height: 52px !important;

        font-size: 26px !important;
    }
}

/* ==========================================
   LEARNING CENTERS
========================================== */

.location-section {

    position: relative;

    padding: 60px 0 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.06),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(255,255,255,.04),
            transparent 30%
        ),
        #172f82;

    color: #ffffff;

}


/* ==========================================
   SUBTLE BACKGROUND GRID
========================================== */

.location-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:

        linear-gradient(
            30deg,
            transparent 24%,
            rgba(255,255,255,.18) 25%,
            transparent 26%
        ),

        linear-gradient(
            150deg,
            transparent 24%,
            rgba(255,255,255,.18) 25%,
            transparent 26%
        );

    background-size: 90px 70px;

}


/* ==========================================
   HEADING
========================================== */

.location-heading {

    position: relative;

    z-index: 5;

    text-align: center;

    max-width: 760px;

    margin: 0 auto 55px;

}


.location-heading .section-badge {

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.2);

    color: #ffffff;

}


.location-heading h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: 48px;

}


.location-heading p {

    margin: 0 auto;

    max-width: 700px;

    color: rgba(255,255,255,.72);

    line-height: 1.8;

    font-size: 17px;

}


/* ==========================================
   ROAD WRAPPER
========================================== */

.location-road-wrapper {

    position: relative;

    width: 100%;

    max-width: 1400px;

    height: 420px;

    margin: 0 auto;

}


/* ==========================================
   SVG ROAD
========================================== */

.location-road {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: visible;

}


/* dotted journey line */

.road-path {

    fill: none;

    stroke: rgba(255,255,255,.65);

    stroke-width: 2;

    stroke-dasharray: 5 8;

    stroke-linecap: round;

}


/* ==========================================
   LOCATION CARDS
========================================== */

.location-card {

    position: absolute;

    z-index: 5;

    width: 160px;

    padding: 10px 10px 14px;

    border-radius: 18px;

    background: #ffffff;

    color: #17213c;

    box-shadow:

        0 18px 40px rgba(0,0,0,.22);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}


.location-card:hover {

    transform: translateY(-8px);

    box-shadow:

        0 25px 50px rgba(0,0,0,.28);

}


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

.location-image {

    width: 100%;

    height: 125px;

    overflow: hidden;

    border-radius: 12px;

    background: #eaf1ff;

}


.location-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* ==========================================
   CARD CONTENT
========================================== */

.location-content {

    padding: 9px 5px 2px;

    text-align: center;

}


.location-content h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: #17213c;

}


.location-content p {

    margin: 5px 0 8px;

    font-size: 13px;

    color: #59647a;

}


/* ==========================================
   VIEW CENTER
========================================== */

.view-center {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

}


.view-center span {

    font-size: 16px;

    transition: transform .25s ease;

}


.view-center:hover span {

    transform: translateX(4px);

}


/* ==========================================
   CARD POSITIONS
========================================== */


/* Jayadev Vihar */

.location-one {

    left: 23%;

    top: 35px;

}


/* Saheed Nagar */

.location-two {

    left: 51%;

    top: 180px;

}


/* Coming Soon */

.location-three {

    right: 10%;

    top: 25px;

}


/* ==========================================
   ROAD NODES
========================================== */

.road-node {

    position: absolute;

    z-index: 3;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:

        0 0 0 5px rgba(255,255,255,.08);

}


/* left node */

.node-one {

    left: 10%;

    top: 228px;

}


/* Jayadev bottom node */

.node-two {

    left: 32%;

    top: 68px;

}


/* Saheed node */

.node-three {

    left: 54%;

    top: 275px;

}


/* right node */

.node-four {

    right: 15%;

    top: 108px;

}


/* ==========================================
   COMING SOON
========================================== */

.coming-soon {

    text-align: center;

}


.coming-soon .location-image {

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            135deg,
            #edf4ff,
            #dbe8ff
        );

}


.coming-icon {

    width: 65px;

    height: 65px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #d7e9ff;

    color: #2563eb;

}


.coming-icon .material-symbols-outlined {

    font-size: 42px;

}


.coming-badge {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    background: #edf3ff;

    color: #2563eb;

    font-size: 9px;

    font-weight: 700;

}

/* =========================================================
   CENTER DETAILS MODAL
========================================================= */

.center-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


/* =========================================================
   ACTIVE
========================================================= */

.center-modal.active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* =========================================================
   BACKDROP
========================================================= */

.center-modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(8, 18, 45, .58);

    backdrop-filter: blur(7px);

}


/* =========================================================
   MODAL CARD
========================================================= */

.center-modal-card {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 270px 1fr;

    width: min(760px, 100%);

    min-height: 390px;

    overflow: hidden;

    background: #fff;

    border-radius: 28px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .25);

    transform:
        translateY(25px)
        scale(.96);

    transition:
        transform .35s ease;

}


.center-modal.active .center-modal-card {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.center-modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 5;

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.95);

    color: var(--secondary);

    font-size: 26px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0,0,0,.12);

    transition:
        .25s ease;

}


.center-modal-close:hover {

    background: var(--primary);

    color: #fff;

    transform: rotate(90deg);

}


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

.center-modal-image {

    width: 100%;

    height: 100%;

    min-height: 390px;

    background: #edf3ff;

}


.center-modal-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


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

.center-modal-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 42px;

}


/* =========================================================
   BADGE
========================================================= */

.center-modal-badge {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    margin-bottom: 14px;

    border-radius: 30px;

    background: #edf3ff;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   TITLE
========================================================= */

.center-modal-content h2 {

    margin: 0;

    font-size: 34px;

    line-height: 1.15;

    color: var(--secondary);

}


.center-modal-subtitle {

    margin: 8px 0 25px;

    color: var(--muted);

    font-size: 15px;

}


/* =========================================================
   DETAIL ITEM
========================================================= */

.center-detail-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 17px;

}


.center-detail-item > .material-symbols-outlined {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: #edf3ff;

    color: var(--primary);

    font-size: 21px;

}


.center-detail-item strong {

    display: block;

    margin-bottom: 3px;

    font-size: 14px;

    color: var(--secondary);

}


.center-detail-item p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.center-contact-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: fit-content;

    margin-top: 12px;

    padding: 13px 22px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(47, 99, 255, .25);

    transition:
        .25s ease;

}


.center-contact-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(47, 99, 255, .32);

}


.center-contact-btn .material-symbols-outlined {

    font-size: 18px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .center-modal {

        padding: 16px;

    }


    .center-modal-card {

        display: flex;

        flex-direction: column;

        width: 100%;

        max-width: 430px;

        max-height: 90vh;

        overflow-y: auto;

        border-radius: 24px;

    }


    .center-modal-image {

        height: 210px;

        min-height: 210px;

    }


    .center-modal-content {

        padding: 28px 24px 30px;

    }


    .center-modal-content h2 {

        font-size: 28px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .center-modal-image {

        height: 180px;

        min-height: 180px;

    }


    .center-modal-content {

        padding: 24px 20px 25px;

    }


    .center-modal-content h2 {

        font-size: 25px;

    }


    .center-modal-close {

        width: 34px;

        height: 34px;

        font-size: 23px;

    }


    .center-contact-btn {

        width: 100%;

    }

}

/*======================================================
                TESTIMONIAL SECTION
======================================================*/

.testimonial-section{

    padding:110px 0;

    background:#ffffff;

    overflow:hidden;

}

.testimonial-slider{

    position:relative;

    margin-top:70px;

}

.testimonial-track{

    display:flex;

    gap:30px;

    transition:.5s ease;

}

.testimonial-card{

    flex:0 0 calc(33.333% - 20px);

    background:#fff;

    border-radius:28px;

    padding:35px;

    border:1px solid #edf2f7;

    box-shadow:

    0 20px 50px rgba(0,0,0,.06);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 70px rgba(37,99,235,.15);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary);

}

/*============================
TOP
============================*/

.student-info{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.student-info img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #eef4ff;

}

.student-details h3{

    font-size:22px;

    margin-bottom:4px;

    color:#111827;

}

.student-details p{

    font-size:14px;

    color:#6b7280;

}

/*============================
STARS
============================*/

.stars{

    display:flex;

    gap:4px;

    margin-bottom:20px;

}

.stars span{

    color:#ffb800;

    font-size:20px;

}

/*============================
REVIEW
============================*/

.review{

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

    margin-bottom:30px;

}

/*============================
COMPANY
============================*/

.company{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:20px;

    border-top:1px solid #edf2f7;

}

.company span{

    color:#6b7280;

    font-size:14px;

}

.company strong{

    color:var(--primary);

}

/*============================
SLIDER BUTTONS
============================*/

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    box-shadow:

    0 15px 35px rgba(0,0,0,.10);

    cursor:pointer;

    z-index:10;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

}

.slider-btn:hover{

    background:var(--primary);

    color:#fff;

}

.prev{

    left:-28px;

}

.next{

    right:-28px;

}

/*============================
DOTS
============================*/

.testimonial-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:45px;

}

.testimonial-dots button{

    width:12px;

    height:12px;

    border-radius:50%;

    border:none;

    background:#d1d5db;

    cursor:pointer;

}

.testimonial-dots button.active{

    width:35px;

    border-radius:30px;

    background:var(--primary);

}

/*==========================================
MENTORS
==========================================*/

/* =========================================================
   FOUNDER + MENTOR SECTION
========================================================= */

.founder-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(99, 102, 241, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f4f7ff 0%,
            #eef4ff 50%,
            #f7f9ff 100%
        );
}

.founder-section .mentors-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px;
    align-items: center;
}

.founder-image {
    margin-top: 20px;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(20, 40, 80, .15);
}


/* =========================================================
   MENTOR SECTION
========================================================= */

.mentor-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
     box-shadow: 0 -30px 0 #eef4ff;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(99, 102, 241, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f4f7ff 0%,
            #eef4ff 50%,
            #f7f9ff 100%
        );
}


/* =========================================================
   MENTOR HEADING
========================================================= */

.mentor-section .section-heading {
    margin-bottom: 25px;
}

.mentor-section .section-heading h2 {
    font-size: 32px;
    line-height: 1.2;
}


/* =========================================================
   INFINITE TRACK WRAPPER
========================================================= */

.mentor-track-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 8px 0 20px;
}


/*
   Fade effect at both edges
*/

.mentor-track-wrapper::before,
.mentor-track-wrapper::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 5;

    pointer-events: none;
}

.mentor-track-wrapper::before {

    left: 0;

    background:
        linear-gradient(
            to right,
            #fff,
            transparent
        );
}

.mentor-track-wrapper::after {

    right: 0;

    background:
        linear-gradient(
            to left,
            #fff,
            transparent
        );
}


/* =========================================================
   MENTOR TRACK
========================================================= */

.mentor-track {

    display: flex;

    flex-wrap: nowrap;

    gap: 34px;

    width: max-content;

    transform: translate3d(0, 0, 0);

    will-change: transform;

}


/* =========================================================
   MENTOR CARD
========================================================= */

.mentor-card {

    position: relative;

    flex: 0 0 165px;

    width: 165px;

    height: 168px;

    overflow: hidden;

    border-radius: 16px;

    background: #edf3ff;

    box-shadow:
        0 5px 18px rgba(20, 40, 80, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   MENTOR IMAGE
========================================================= */

.mentor-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   HOVER
========================================================= */

.mentor-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(20, 40, 80, .15);

}


/* =========================================================
   MENTOR INFO
========================================================= */

/*
   For this UI we don't show the name/role over the image.
   The reference is image-focused.
*/

.mentor-info {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px 12px 12px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.85)
        );

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.mentor-card:hover .mentor-info {

    opacity: 1;

    transform: translateY(0);

}

.mentor-info h4 {

    margin: 0;

    color: #fff;

    font-size: 15px;

}

.mentor-info p {

    margin: 4px 0 0;

    color: #dbeafe;

    font-size: 11px;

}


/* =========================================================
   HIDE ARROWS
========================================================= */

.mentor-control {

    display: none !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .mentor-track {

        gap: 24px;

    }

    .mentor-card {

        flex: 0 0 155px;

        width: 155px;

        height: 160px;

        border-radius: 15px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .mentor-section {

        width: 100%;

    }

    .mentor-section .section-heading {

        margin-bottom: 20px;

    }

    .mentor-section .section-heading h2 {

        font-size: 28px;

    }

    .mentor-track-wrapper {

        padding:
            5px 0 15px;

    }

    .mentor-track-wrapper::before,
    .mentor-track-wrapper::after {

        width: 35px;

    }

    .mentor-track {

        gap: 16px;

    }

    .mentor-card {

        flex: 0 0 145px;

        width: 145px;

        height: 150px;

        border-radius: 14px;

    }

    /*
       Keep names hidden on mobile as well
       for the clean reference look.
    */

    .mentor-info {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .mentor-track {

        gap: 14px;

    }

    .mentor-card {

        flex: 0 0 135px;

        width: 135px;

        height: 140px;

        border-radius: 13px;

    }

}

/* Avatar initials for testimonials */
/* .avatar-initials{
    width:70px;
    height:70px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),#4f8dfd);
    color:#fff;
    font-weight:800;
    font-size:22px;
    flex-shrink:0;
    box-shadow:0 12px 30px rgba(20,40,80,.12);
}

.student-info img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
} */

.student-avatar {
    width: 52px;
    height: 52px;

    min-width: 52px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2563eb;
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;

    text-transform: uppercase;
}



/* =========================================
   FLOATING CONTACT BUTTONS
========================================= */

.floating-contact {

    position: fixed;

    right: 28px;

    bottom: 28px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 14px;

    z-index: 9999;

}


/* =========================================
   BUTTON
========================================= */

.floating-contact-btn {

    position: relative;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    border-radius: 50px;

    text-decoration: none;

    overflow: hidden;

    white-space: nowrap;

    box-sizing: border-box;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.14);

    transition:
        width .4s cubic-bezier(.4, 0, .2, 1),
        box-shadow .3s ease,
        transform .3s ease;

}


/* =========================================
   ICON
========================================= */

.floating-contact-btn > span:first-child {

    flex-shrink: 0;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    position: relative;

    z-index: 2;

}


/* =========================================
   LABEL

   IMPORTANT:
   Absolute positioning prevents the hidden
   label from pushing the icon away.
========================================= */

.floating-label {

    position: absolute;

    right: 22px;

    top: 50%;

    transform:
        translate(10px, -50%);

    font-size: 18px;

    font-weight: 700;

    line-height: 1;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .3s ease;

}


/* =========================================
   PHONE
========================================= */

.phone-btn {

    /* background:
        linear-gradient(
            145deg,
            #f2d58c,
            #d9b45f
        );

    color: #111827; */

    background:var(--primary);
    color:white;
     transform: translateY(-2px);

}


/* =========================================
   WHATSAPP
========================================= */

.whatsapp-btn {

    background:
        linear-gradient(
            145deg,
            #20d477,
            #10ad68
        );

    color: #ffffff;

}


/* =========================================
   HOVER — PHONE
========================================= */

.phone-btn:hover {

    width: 145px;

    transform:
        translateX(-2px);

    box-shadow:
        0 14px 30px
        rgba(210, 170, 80, 0.28);

}


/* =========================================
   HOVER — WHATSAPP
========================================= */

.whatsapp-btn:hover {

    width: 175px;

    transform:
        translateX(-2px);

    box-shadow:
        0 14px 30px
        rgba(16, 173, 104, 0.28);

}


/* =========================================
   SHOW LABEL
========================================= */

.floating-contact-btn:hover
.floating-label {

    opacity: 1;

    transform:
        translate(0, -50%);

}


/* =========================================
   ICON HOVER
========================================= */

.floating-contact-btn:hover
> span:first-child {

    transform: scale(1.05);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .floating-contact {

        right: 16px;

        bottom: 18px;

        gap: 10px;

    }


    .floating-contact-btn {

        width: 52px;

        height: 52px;

    }


    .floating-contact-btn
    > span:first-child {

        width: 52px;

        height: 52px;

        font-size: 23px;

    }


    .floating-label {

        right: 16px;

        font-size: 15px;

    }


    .phone-btn:hover {

        width: 125px;

    }


    .whatsapp-btn:hover {

        width: 150px;

    }

}


/* =========================================================
   DP ACADEMY — WHY US
   PREMIUM LEFT IMAGE COMPOSITION
   ========================================================= */


/* =========================================================
   WHY IMAGE AREA
   ========================================================= */

.why-image {
    position: relative !important;

    width: 100% !important;
    min-height: 560px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 35px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HIDE OLD ROTATED BLOCK
   ========================================================= */

.why-image .image-bg {
    position: absolute !important;

    width: 78% !important;
    height: 82% !important;

    left: 8% !important;
    top: 9% !important;

    border-radius: 34px !important;

    background:
        linear-gradient(
            145deg,
            #173a9e 0%,
            #245ed5 55%,
            #4f8dfd 100%
        ) !important;

    transform: rotate(-5deg) !important;

    z-index: 0 !important;

    opacity: 1 !important;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.why-image img {
    position: relative !important;

    z-index: 2 !important;

    display: block !important;

    width: min(430px, 100%) !important;
    height: 500px !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 30px !important;

    border: 7px solid #ffffff !important;

    box-shadow:
        0 30px 70px rgba(15, 39, 90, .18),
        0 8px 25px rgba(15, 39, 90, .08) !important;

    transition:
        transform .45s ease,
        box-shadow .45s ease !important;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.why-image:hover img {
    transform: translateY(-6px) !important;

    box-shadow:
        0 40px 85px rgba(15, 39, 90, .22),
        0 12px 30px rgba(15, 39, 90, .10) !important;
}


/* =========================================================
   TOP RIGHT DECORATIVE DOT PATTERN
   ========================================================= */

/* =========================================================
   PREMIUM GEOMETRIC DECORATION
   REPLACES DOT PATTERN
   ========================================================= */

.why-image::before {
    content: "" !important;

    position: absolute !important;

    top: 18px !important;
    right: 10px !important;

    width: 105px !important;
    height: 105px !important;

    z-index: 1 !important;

    border-top: 2px solid rgba(37, 99, 235, .20) !important;
    border-right: 2px solid rgba(37, 99, 235, .20) !important;

    border-radius: 0 24px 0 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   SECOND GEOMETRIC ACCENT
   ========================================================= */

.why-image::after {
    content: "" !important;

    position: absolute !important;

    left: 5px !important;
    bottom: 28px !important;

    width: 70px !important;
    height: 70px !important;

    z-index: 1 !important;

    border-left: 2px solid rgba(37, 99, 235, .18) !important;
    border-bottom: 2px solid rgba(37, 99, 235, .18) !important;

    border-radius: 0 0 0 20px !important;

    box-shadow:
        12px 12px 0 rgba(37, 99, 235, .045) !important;

    pointer-events: none !important;
}


/* =========================================================
   EXPERIENCE CARD
   ========================================================= */

.why-image .experience-card {
    position: absolute !important;

    z-index: 5 !important;

    left: 8px !important;
    bottom: 48px !important;

    width: 185px !important;

    padding: 20px 22px !important;

    box-sizing: border-box !important;

    border-radius: 20px !important;

    background: rgba(255,255,255,.96) !important;

    border: 1px solid rgba(255,255,255,.8) !important;

    box-shadow:
        0 20px 45px rgba(15, 39, 90, .16) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    text-align: left !important;
}


/* small blue accent on card */

.why-image .experience-card::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 18px !important;

    width: 4px !important;
    height: 38px !important;

    border-radius: 0 4px 4px 0 !important;

    background: var(--primary) !important;
}


/* =========================================================
   EXPERIENCE NUMBER
   ========================================================= */

.why-image .experience-card h2 {
    margin: 0 0 4px 0 !important;

    padding: 0 !important;

    color: #102a72 !important;

    font-size: 36px !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -1px !important;
}


/* =========================================================
   EXPERIENCE LABEL
   ========================================================= */

.why-image .experience-card span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #667085 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;

    font-weight: 500 !important;
}


/* =========================================================
   SMALL "EST." STYLE ACCENT
   ========================================================= */

.why-image .experience-card h2::after {
    content: "" !important;

    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    margin-left: 7px !important;

    margin-bottom: 5px !important;

    border-radius: 50% !important;

    background: #f5b400 !important;
}


/* =========================================================
   DESKTOP — LARGE SCREENS
   ========================================================= */

@media (min-width: 1200px) {

    .why-image {
        min-height: 570px !important;

        padding: 32px !important;
    }

    .why-image img {
        width: 430px !important;
        height: 500px !important;
    }

    .why-image .image-bg {
        width: 410px !important;
        height: 480px !important;

        left: calc(50% - 205px + 12px) !important;
        top: 45px !important;
    }

    .why-image .experience-card {
        left: 5px !important;
        bottom: 48px !important;
    }
}


/* =========================================================
   SHORT DESKTOP
   ========================================================= */

@media (min-width: 993px) and (max-height: 850px) {

    .why-image {
        min-height: 470px !important;

        padding: 25px !important;
    }

    .why-image img {
        width: 370px !important;
        height: 410px !important;

        border-radius: 26px !important;
    }

    .why-image .image-bg {
        width: 355px !important;
        height: 395px !important;

        left: calc(50% - 177px + 10px) !important;
        top: 38px !important;

        border-radius: 30px !important;
    }

    .why-image .experience-card {
        left: 0 !important;
        bottom: 30px !important;

        width: 165px !important;

        padding: 16px 18px !important;
    }

    .why-image .experience-card h2 {
        font-size: 30px !important;
    }

    .why-image .experience-card span {
        font-size: 12px !important;
    }

    .why-image::before {
        width: 70px !important;
        height: 70px !important;

        top: 15px !important;
        right: 15px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .why-image {
        min-height: 500px !important;

        padding: 30px !important;
    }

    .why-image img {
        width: min(400px, 80vw) !important;
        height: min(430px, 80vw) !important;
    }

    .why-image .image-bg {
        width: min(380px, 76vw) !important;
        height: min(410px, 76vw) !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-48%, -48%)
            rotate(-5deg) !important;
    }

    .why-image .experience-card {
        left: 8% !important;
        bottom: 28px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .why-image {
        min-height: 390px !important;

        padding: 20px !important;
    }

    .why-image img {
        width: min(300px, 82vw) !important;
        height: min(330px, 82vw) !important;

        border-width: 5px !important;

        border-radius: 24px !important;
    }

    .why-image .image-bg {
        width: min(285px, 78vw) !important;
        height: min(315px, 78vw) !important;

        border-radius: 24px !important;
    }

    .why-image .experience-card {
        left: 2px !important;
        bottom: 20px !important;

        width: 145px !important;

        padding: 14px 16px !important;

        border-radius: 16px !important;
    }

    .why-image .experience-card h2 {
        font-size: 27px !important;
    }

    .why-image .experience-card span {
        font-size: 11px !important;
    }

    .why-image::before {
        width: 55px !important;
        height: 55px !important;

        top: 8px !important;
        right: 5px !important;

        background-size: 10px 10px !important;
    }

    .why-image::after {
        width: 45px !important;
        height: 45px !important;

        left: 4px !important;
        bottom: 15px !important;
    }
}


/* =========================================================
   LEARNING CENTERS — FIT TO ONE SCREEN, NO SCROLL
   (desktop / laptop only — see min-width: 993px below)

   Scoped to min-width: 993px on purpose: the location cards
   and road nodes use fixed pixel "top" offsets that assume
   the road wrapper is always 420px tall. Below 993px we
   leave everything exactly as it was (untouched), since
   converting those to percentages only matters once we
   start shrinking the wrapper's height for short screens.
   ========================================================= */

@media (min-width: 993px) {

    .location-section {

        position: relative !important;

        width: 100% !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100vh !important;
        min-height: 100dvh !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        overflow: hidden !important;
    }

    .location-section > .container {

        width: 100% !important;
    }


    /* =====================================================
       HEADING — scales down on shorter screens
       ===================================================== */

    .location-heading {

        margin: 0 auto clamp(22px, 4vh, 55px) !important;
    }

    .location-heading h2 {

        font-size: clamp(28px, 4.4vh, 48px) !important;

        margin: clamp(10px, 1.6vh, 18px) 0 !important;
    }

    .location-heading p {

        font-size: clamp(14px, 1.8vh, 17px) !important;

        line-height: 1.7 !important;
    }


    /* =====================================================
       ROAD WRAPPER — shrinks on short screens instead of
       pushing the section past the viewport
       ===================================================== */

    .location-road-wrapper {

        height: clamp(260px, 38vh, 420px) !important;
    }


    /* =====================================================
       CARD / NODE POSITIONS — converted from fixed px to
       % of the wrapper's height, so they track the wrapper
       as it shrinks instead of drifting out of place.
       (left/right values were already % and stay as-is.)
       ===================================================== */

    .location-one {

        top: 8.3% !important;
    }

    .location-two {

        top: 42.9% !important;
    }

    .location-three {

        top: 6% !important;
    }

    .node-one {

        top: 54.3% !important;
    }

    .node-two {

        top: 16.2% !important;
    }

    .node-three {

        top: 65.5% !important;
    }

    .node-four {

        top: 25.7% !important;
    }


    /* =====================================================
       CARD SIZE — scales down with available height
       ===================================================== */

    .location-card {

        width: clamp(125px, 13vw, 160px) !important;

        padding: clamp(8px, 1vh, 10px) clamp(8px, 1vh, 10px) clamp(11px, 1.4vh, 14px) !important;

        border-radius: 16px !important;
    }

    .location-image {

        height: clamp(85px, 14vh, 125px) !important;
    }

    .location-content h3 {

        font-size: clamp(14px, 1.8vh, 18px) !important;
    }

    .location-content p {

        font-size: clamp(11px, 1.4vh, 13px) !important;

        margin: clamp(3px, .6vh, 5px) 0 clamp(5px, .8vh, 8px) !important;
    }

    .view-center {

        font-size: clamp(11px, 1.3vh, 12px) !important;
    }

    .view-center span {

        font-size: clamp(13px, 1.6vh, 16px) !important;
    }

    .coming-icon {

        width: clamp(48px, 7vh, 65px) !important;
        height: clamp(48px, 7vh, 65px) !important;
    }

    .coming-icon .material-symbols-outlined {

        font-size: clamp(30px, 4.4vh, 42px) !important;
    }


    /* =====================================================
       ROAD NODES — slightly smaller on very short screens
       ===================================================== */

    .road-node {

        width: clamp(12px, 1.6vh, 16px) !important;
        height: clamp(12px, 1.6vh, 16px) !important;
    }
}



/* =========================================================
   DP ACADEMY — COURSES DROPDOWN
   2 COLUMNS × 7 COURSES
   ========================================================= */

@media (min-width: 993px) {

    .course-dropdown-menu {

        /* TWO COLUMNS */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        width: 700px !important;
        min-width: 700px !important;

        padding: 14px !important;

        gap: 0 !important;

        background: #ffffff !important;

        border-radius: 18px !important;

        border: 1px solid #e8edf5 !important;

        box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.14) !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       EACH COLUMN
       ========================================= */

    .course-dropdown-column {

        display: flex !important;

        flex-direction: column !important;

        min-width: 0 !important;

        padding: 0 6px !important;
    }


    /* Divider between columns */

    .course-dropdown-column + .course-dropdown-column {

        border-left: 1px solid #edf1f7 !important;

        padding-left: 12px !important;
    }


    /* =========================================
       COURSE ITEM
       ========================================= */

    .course-dropdown-menu .course-dropdown-column li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;
    }


    .course-dropdown-menu .course-dropdown-column li a {

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        width: 100% !important;

        min-height: 60px !important;

        padding: 8px 10px !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;

        text-decoration: none !important;

        color: #17213c !important;

        transition:
            background .2s ease,
            transform .2s ease !important;
    }


    /* =========================================
       ICON
       ========================================= */

    .course-dropdown-menu .dropdown-icon {

        width: 38px !important;

        min-width: 38px !important;

        height: 38px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 10px !important;

        background: #eef4ff !important;

        color: var(--primary) !important;

        font-size: 20px !important;

        transition:
            background .2s ease,
            color .2s ease !important;
    }


    /* =========================================
       TEXT
       ========================================= */

    .course-dropdown-menu .dropdown-text {

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        min-width: 0 !important;

        line-height: 1.2 !important;

        font-size: 14px !important;

        font-weight: 700 !important;

        color: #17213c !important;
    }


    .course-dropdown-menu .dropdown-text small {

        display: block !important;

        margin-top: 4px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        font-weight: 400 !important;

        color: #7a8496 !important;

        white-space: nowrap !important;
    }


    /* =========================================
       HOVER
       ========================================= */

    .course-dropdown-menu .course-dropdown-column li a:hover {

        background: #f5f8ff !important;

        transform: translateX(3px) !important;
    }


    .course-dropdown-menu .course-dropdown-column li a:hover
    .dropdown-icon {

        background: var(--primary) !important;

        color: #ffffff !important;
    }


    .course-dropdown-menu .course-dropdown-column li a:hover
    .dropdown-text {

        color: var(--primary) !important;
    }

}