/* ============================================================
   PURPLE LIGHT TOUCH FOUNDATION
   OUR PROGRAMS — PREMIUM PAGE
   ============================================================ */


/* ============================================================
   01. PAGE VARIABLES
   ============================================================ */

.programs-page {

    --program-purple-950: #16082e;
    --program-purple-900: #211044;
    --program-purple-800: #32145c;
    --program-purple-700: #4b2180;
    --program-purple-500: #7b4ca8;

    --program-gold: #D4AF37;
    --program-gold-light: #e3c45b;

    --program-cream: #faf7fc;
    --program-cream-dark: #f1eaf6;

    --program-white: #ffffff;

    --program-text: #24183d;
    --program-muted: #756b83;

    --program-border: #e5dbe9;

    overflow-x: hidden;
}


/* ============================================================
   02. SHARED TYPOGRAPHY
   ============================================================ */

.programs-page .section-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--program-gold);

    font-family: var(--body-font);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    line-height: 1.4;

    text-transform: uppercase;
}


.programs-page .purple-eyebrow {

    color: var(--program-purple-700);

}


.programs-page .section-heading {

    max-width: 760px;

    margin-bottom: 65px;

}


.programs-page .section-heading.centered {

    margin-inline: auto;

    text-align: center;

}


.programs-page .section-heading h2,
.programs-page .programs-intro-heading h2,
.programs-page .program-details-header h2,
.programs-page .program-process-heading h2,
.programs-page .featured-program-content h2,
.programs-page .programs-cta-content h2 {

    margin: 0;

    color: var(--program-purple-950);

    font-family: var(--heading-font);

    font-size: clamp(42px, 5vw, 70px);

    font-weight: 500;

    line-height: .98;

}


.programs-page h2 em {

    color: var(--program-purple-700);

    font-style: italic;

}


.programs-page .section-heading p {

    max-width: 650px;

    margin: 25px auto 0;

    color: var(--program-muted);

    font-size: 15px;

}


/* ============================================================
   03. HERO
   ============================================================ */

.programs-hero {

    position: relative;

    min-height: 770px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--program-purple-950);

    isolation: isolate;
}


.programs-hero-image {

    position: absolute;

    inset: 0;

    z-index: -3;

}


.programs-hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


.programs-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(22,8,46,.94) 0%,
            rgba(22,8,46,.78) 42%,
            rgba(22,8,46,.28) 100%
        );
}


.programs-hero::after {

    content: "";

    position: absolute;

    left: -5%;

    right: -5%;

    bottom: -95px;

    height: 160px;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--program-white);

    z-index: 2;

}


.programs-hero-content {

    position: relative;

    z-index: 3;

    padding-top: 110px;

}


.programs-hero-content h1 {

    max-width: 850px;

    margin: 0;

    color: var(--program-white);

    font-family: var(--heading-font);

    font-size: clamp(64px, 8vw, 112px);

    font-weight: 500;

    line-height: .88;

    letter-spacing: -2px;

}


.programs-hero-content h1 em {

    color: var(--program-gold);

    font-style: italic;

}


.programs-hero-content p {

    max-width: 570px;

    margin-top: 30px;

    color: rgba(255,255,255,.78);

    font-size: 16px;

    line-height: 1.8;

}


.hero-program-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--program-gold);

    color: var(--program-white);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        gap .3s ease,
        color .3s ease;

}


.hero-program-link i {

    color: var(--program-gold);

}


.hero-program-link:hover {

    gap: 21px;

    color: var(--program-gold);

}


.programs-hero-number {

    position: absolute;

    right: 7%;

    bottom: 155px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

}


.programs-hero-number span {

    color: rgba(255,255,255,.18);

    font-family: var(--heading-font);

    font-size: 100px;

    line-height: .8;

}


.programs-hero-number small {

    margin-top: 10px;

    color: var(--program-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

}


/* ============================================================
   04. INTRO
   ============================================================ */

.programs-intro {

    padding: 125px 0 135px;

    background: var(--program-white);
}


.programs-intro-grid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 100px;

    align-items: start;

}


.programs-intro-heading {

    position: sticky;

    top: 100px;

}


.programs-intro-copy {

    padding-top: 5px;

}


.program-lead {

    color: var(--program-purple-900)!important;

    font-family: var(--heading-font);

    font-size: 27px!important;

    line-height: 1.35!important;

}


.programs-intro-copy p {

    max-width: 680px;

    margin-bottom: 22px;

    color: var(--program-muted);

    font-size: 15px;

}


.programs-intro-line {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 40px;

}


.programs-intro-line span {

    width: 55px;

    height: 1px;

    background: var(--program-gold);

}


.programs-intro-line strong {

    color: var(--program-purple-700);

    font-family: var(--heading-font);

    font-size: 20px;

    font-style: italic;

}


/* ============================================================
   05. PROGRAM PILLARS
   ============================================================ */

.program-pillars {

    position: relative;

    padding: 125px 0 145px;

    background: var(--program-cream);

}


.program-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.program-card {

    position: relative;

    min-height: 560px;

    overflow: hidden;

    border-radius: 100px 30px 100px 30px;

    background: var(--program-purple-900);

    isolation: isolate;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        box-shadow .5s ease;

}


.program-card:nth-child(2) {

    border-radius: 30px 100px 30px 100px;

}


.program-card:nth-child(3) {

    border-radius: 30px 100px 30px 100px;

}


.program-card:nth-child(4) {

    border-radius: 100px 30px 100px 30px;

}


.program-card-wide {

    grid-column: 1 / -1;

    min-height: 430px;

    border-radius: 45px;

}


.program-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 28px 70px rgba(22,8,46,.22);

}


.program-card-image {

    position: absolute;

    inset: 0;

    z-index: -3;

}


.program-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 1s cubic-bezier(.2,.7,.2,1);

}


.program-card:hover .program-card-image img {

    transform: scale(1.07);

}


.program-card-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(22,8,46,.10) 15%,
            rgba(22,8,46,.34) 40%,
            rgba(22,8,46,.96) 100%
        );

}


.program-card-number {

    position: absolute;

    top: 35px;

    right: 40px;

    color: rgba(255,255,255,.45);

    font-family: var(--heading-font);

    font-size: 65px;

    line-height: 1;

}


.program-card-content {

    position: absolute;

    left: 45px;

    right: 45px;

    bottom: 42px;

}


.program-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border: 1px solid rgba(212,175,55,.55);

    border-radius: 50%;

    color: var(--program-gold);

    font-size: 19px;

}


.program-label {

    display: block;

    margin-bottom: 8px;

    color: var(--program-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.program-card h3 {

    margin: 0;

    color: var(--program-white);

    font-family: var(--heading-font);

    font-size: clamp(32px, 3.5vw, 48px);

    font-weight: 500;

    line-height: .98;

}


.program-card p {

    max-width: 580px;

    margin-top: 17px;

    color: rgba(255,255,255,.74);

    font-size: 14px;

    line-height: 1.65;

}


.program-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    color: var(--program-white);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        gap .3s ease,
        color .3s ease;

}


.program-link i {

    color: var(--program-gold);

}


.program-link:hover {

    gap: 18px;

    color: var(--program-gold);

}


/* ============================================================
   06. PROGRAM DETAILS
   ============================================================ */

.program-details {

    padding: 135px 0;

    background: var(--program-white);

}


.program-details-header {

    max-width: 800px;

    margin-bottom: 70px;

}


.program-detail-list {

    border-top: 1px solid var(--program-border);

}


.program-detail {

    display: grid;

    grid-template-columns: 70px 70px 1fr 1.15fr;

    gap: 35px;

    align-items: start;

    padding: 45px 0;

    border-bottom: 1px solid var(--program-border);

    transition:
        padding-left .4s ease,
        background .4s ease;

}


.program-detail:hover {

    padding-left: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(75,33,128,.04),
            transparent
        );

}


.detail-number {

    color: var(--program-gold);

    font-family: var(--heading-font);

    font-size: 25px;

}


.detail-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--program-purple-900);

    color: var(--program-gold);

}


.detail-main span {

    display: block;

    margin-bottom: 9px;

    color: var(--program-purple-500);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}


.detail-main h3 {

    max-width: 390px;

    margin: 0;

    color: var(--program-purple-950);

    font-family: var(--heading-font);

    font-size: 31px;

    font-weight: 500;

    line-height: 1.05;

}


.detail-description p {

    margin: 0 0 17px;

    color: var(--program-muted);

    font-size: 14px;

    line-height: 1.7;

}


.detail-description ul {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 22px;

}


.detail-description li {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--program-purple-700);

    font-size: 11px;

    font-weight: 600;

}


.detail-description li i {

    color: var(--program-gold);

}


/* ============================================================
   07. PROCESS
   ============================================================ */

.program-process {

    padding: 130px 0;

    background: var(--program-purple-950);

}


.program-process-heading {

    max-width: 720px;

    margin-bottom: 80px;

}


.program-process-heading h2 {

    color: var(--program-white);

}


.program-process-heading h2 em {

    color: var(--program-gold);

}


.process-line {

    position: relative;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


.process-line::before {

    content: "";

    position: absolute;

    top: 31px;

    left: 8%;

    right: 8%;

    height: 1px;

    background: rgba(212,175,55,.35);

}


.process-step {

    position: relative;

    z-index: 2;

}


.process-number {

    display: block;

    margin-bottom: 15px;

    color: rgba(255,255,255,.30);

    font-family: var(--heading-font);

    font-size: 18px;

}


.process-icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border: 1px solid var(--program-gold);

    border-radius: 50%;

    background: var(--program-purple-950);

    color: var(--program-gold);

    font-size: 19px;

}


.process-step h3 {

    margin-bottom: 10px;

    color: var(--program-white);

    font-family: var(--heading-font);

    font-size: 29px;

    font-weight: 500;

}


.process-step p {

    max-width: 230px;

    color: rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   08. FEATURED PROGRAM
   ============================================================ */

.featured-program {

    padding: 140px 0;

    background: var(--program-cream);

}


.featured-program-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


.featured-program-image {

    position: relative;

    padding-right: 25px;

    padding-bottom: 25px;

}


.featured-program-image::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 78%;

    height: 78%;

    border: 2px solid var(--program-gold);

    border-radius: 30px 90px 30px 90px;

    z-index: 0;

}


.featured-program-image img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 610px;

    object-fit: cover;

    border-radius: 90px 30px 90px 30px;

}


.featured-program-badge {

    position: absolute;

    right: 0;

    top: 40px;

    z-index: 3;

    width: 130px;

    height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--program-purple-900);

    color: var(--program-white);

    text-align: center;

    box-shadow: 0 15px 35px rgba(22,8,46,.18);

}


.featured-program-badge span {

    color: var(--program-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.featured-program-badge strong {

    margin-top: 3px;

    font-family: var(--heading-font);

    font-size: 24px;

    font-weight: 500;

}


.featured-program-content p {

    max-width: 570px;

    margin-top: 25px;

    color: var(--program-muted);

    font-size: 15px;

    line-height: 1.8;

}


.featured-program-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;

}


.program-text-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--program-purple-700);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.program-text-button i {

    color: var(--program-gold);

    transition: transform .3s ease;

}


.program-text-button:hover i {

    transform: translateX(5px);

}


/* ============================================================
   09. AUDIENCE
   ============================================================ */

.program-audience {

    padding: 135px 0;

    background: var(--program-white);

}


.audience-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}


.audience-card {

    position: relative;

    min-height: 460px;

    overflow: hidden;

    border-radius: 70px 25px 70px 25px;

    background: var(--program-purple-900);

}


.audience-card:nth-child(2),
.audience-card:nth-child(4) {

    border-radius: 25px 70px 25px 70px;

}


.audience-image {

    position: absolute;

    inset: 0;

}


.audience-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 20%,
            rgba(22,8,46,.90) 100%
        );

}


.audience-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.audience-card:hover .audience-image img {

    transform: scale(1.08);

}


.audience-content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 30px;

    z-index: 2;

}


.audience-content > span {

    color: var(--program-gold);

    font-family: var(--heading-font);

    font-size: 19px;

}


.audience-content h3 {

    margin: 7px 0 8px;

    color: var(--program-white);

    font-family: var(--heading-font);

    font-size: 30px;

    font-weight: 500;

}


.audience-content p {

    color: rgba(255,255,255,.68);

    font-size: 12px;

    line-height: 1.6;

}


/* ============================================================
   10. CTA
   ============================================================ */

.programs-cta {

    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background: var(--program-white);

}


.programs-cta-inner {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    overflow: hidden;

    padding: 75px 80px;

    border-radius: 45px;

    background:
        linear-gradient(
            125deg,
            var(--program-purple-950),
            var(--program-purple-800)
        );

}


.programs-cta-inner::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -180px;

    top: -220px;

    border: 1px solid rgba(212,175,55,.25);

    border-radius: 50%;

}


.programs-cta-inner::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -70px;

    bottom: -210px;

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 50%;

}


.programs-cta-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

}


.programs-cta-content h2 {

    color: var(--program-white);

}


.programs-cta-content h2 em {

    color: var(--program-gold);

}


.programs-cta-content p {

    max-width: 600px;

    margin-top: 22px;

    color: rgba(255,255,255,.68);

    font-size: 14px;

}


.programs-cta-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    flex-shrink: 0;

}


/* ============================================================
   11. SCROLL REVEAL
   ============================================================ */

.reveal-program {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);

}


.reveal-program.program-visible {

    opacity: 1;

    transform: translateY(0);

}


.program-card:nth-child(1) {

    transition-delay: .05s;

}


.program-card:nth-child(2) {

    transition-delay: .12s;

}


.program-card:nth-child(3) {

    transition-delay: .19s;

}


.program-card:nth-child(4) {

    transition-delay: .26s;

}


.program-card:nth-child(5) {

    transition-delay: .33s;

}


.process-step:nth-child(1) {

    transition-delay: .05s;

}


.process-step:nth-child(2) {

    transition-delay: .12s;

}


.process-step:nth-child(3) {

    transition-delay: .19s;

}


.process-step:nth-child(4) {

    transition-delay: .26s;

}


/* ============================================================
   12. HERO ANIMATION
   ============================================================ */

.programs-hero-content {

    animation:
        programsHeroText 1s
        cubic-bezier(.2,.7,.2,1)
        both;

}


.programs-hero-image img {

    animation:
        programsHeroImage 1.6s
        ease
        both;

}


@keyframes programsHeroText {

    from {

        opacity: 0;

        transform: translateY(35px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes programsHeroImage {

    from {

        opacity: 0;

        transform: scale(1.07);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* ============================================================
   13. RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .program-grid {

        gap: 18px;

    }


    .program-card {

        min-height: 520px;

    }


    .programs-intro-grid {

        gap: 55px;

    }


    .program-detail {

        grid-template-columns: 55px 60px 1fr;

    }


    .detail-description {

        grid-column: 3;

    }


    .featured-program-grid {

        gap: 55px;

    }


    .audience-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* ============================================================
   14. RESPONSIVE — 900PX
   ============================================================ */

@media (max-width: 900px) {

    .programs-hero {

        min-height: 700px;

    }


    .programs-hero-content {

        padding-top: 130px;

    }


    .programs-hero-number {

        display: none;

    }


    .programs-intro {

        padding: 100px 0;

    }


    .programs-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .programs-intro-heading {

        position: static;

    }


    .program-grid {

        grid-template-columns: 1fr;

    }


    .program-card-wide {

        grid-column: auto;

    }


    .program-card {

        min-height: 520px;

    }


    .program-detail {

        grid-template-columns: 60px 60px 1fr;

        gap: 20px;

    }


    .detail-description {

        grid-column: 3;

    }


    .process-line {

        grid-template-columns: repeat(2, 1fr);

        gap: 55px 35px;

    }


    .process-line::before {

        display: none;

    }


    .featured-program-grid {

        grid-template-columns: 1fr;

    }


    .featured-program-image img {

        height: 600px;

    }


    .programs-cta-inner {

        flex-direction: column;

        align-items: flex-start;

        padding: 60px 50px;

    }


    .programs-cta-actions {

        flex-direction: row;

        flex-wrap: wrap;

    }

}


/* ============================================================
   15. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .programs-page .section-heading h2,
    .programs-page .programs-intro-heading h2,
    .programs-page .program-details-header h2,
    .programs-page .program-process-heading h2,
    .programs-page .featured-program-content h2,
    .programs-page .programs-cta-content h2 {

        font-size: 43px;

    }


    .programs-hero {

        min-height: 650px;

    }


    .programs-hero-content {

        padding-top: 145px;

    }


    .programs-hero-content h1 {

        font-size: 65px;

        letter-spacing: -1px;

    }


    .programs-hero-content p {

        font-size: 14px;

    }


    .programs-intro {

        padding: 90px 0;

    }


    .program-pillars {

        padding: 90px 0;

    }


    .programs-page .section-heading {

        margin-bottom: 45px;

    }


    .program-card {

        min-height: 520px;

        border-radius: 55px 20px 55px 20px;

    }


    .program-card:nth-child(2),
    .program-card:nth-child(3) {

        border-radius: 20px 55px 20px 55px;

    }


    .program-card-content {

        left: 28px;

        right: 28px;

        bottom: 30px;

    }


    .program-card h3 {

        font-size: 34px;

    }


    .program-card-number {

        right: 25px;

        top: 25px;

        font-size: 48px;

    }


    .program-details {

        padding: 90px 0;

    }


    .program-detail {

        display: grid;

        grid-template-columns: 45px 1fr;

        gap: 18px;

        padding: 35px 0;

    }


    .detail-main {

        grid-column: 2;

    }


    .detail-description {

        grid-column: 2;

    }


    .detail-icon {

        grid-column: 1;

        grid-row: 1;

        width: 45px;

        height: 45px;

        font-size: 15px;

    }


    .detail-number {

        position: absolute;

        opacity: .35;

    }


    .detail-main h3 {

        font-size: 27px;

    }


    .detail-description ul {

        flex-direction: column;

        gap: 8px;

    }


    .program-process {

        padding: 90px 0;

    }


    .process-line {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .process-step p {

        max-width: 100%;

    }


    .featured-program {

        padding: 90px 0;

    }


    .featured-program-image {

        padding-right: 12px;

        padding-bottom: 12px;

    }


    .featured-program-image img {

        height: 500px;

        border-radius: 65px 25px 65px 25px;

    }


    .featured-program-badge {

        width: 100px;

        height: 100px;

    }


    .featured-program-badge strong {

        font-size: 20px;

    }


    .featured-program-actions {

        align-items: flex-start;

        flex-direction: column;

    }


    .program-audience {

        padding: 90px 0;

    }


    .audience-grid {

        grid-template-columns: 1fr;

    }


    .audience-card {

        min-height: 430px;

    }


    .programs-cta {

        padding: 70px 0;

    }


    .programs-cta-inner {

        padding: 50px 28px;

        border-radius: 30px;

    }


    .programs-cta-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }


    .programs-cta-actions .btn {

        width: 100%;

        justify-content: center;

    }

}


/* ============================================================
   16. SMALL PHONES
   ============================================================ */

@media (max-width: 390px) {

    .programs-hero-content h1 {

        font-size: 57px;

    }


    .programs-page .section-heading h2,
    .programs-page .programs-intro-heading h2,
    .programs-page .program-details-header h2,
    .programs-page .program-process-heading h2,
    .programs-page .featured-program-content h2,
    .programs-page .programs-cta-content h2 {

        font-size: 38px;

    }


    .program-card {

        min-height: 500px;

    }


    .program-card h3 {

        font-size: 31px;

    }

}


/* ============================================================
   17. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .programs-page *,
    .programs-page *::before,
    .programs-page *::after {

        scroll-behavior: auto!important;

        transition: none!important;

        animation: none!important;

    }


    .reveal-program {

        opacity: 1!important;

        transform: none!important;

    }

}