
:root{
    --p-navy:#071525;
    --p-navy2:#0b2036;
    --p-blue:#1167e8;
    --p-blue2:#0a53bf;
    --p-cyan:#37bfff;
    --p-text:#152235;
    --p-muted:#6c7887;
    --p-bg:#f5f7fa;
    --p-border:#e4e9ef;
    --p-white:#fff;
}

.programmes-page{
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--p-text);
    background:#fff;
    overflow:hidden;
}

.programmes-page *{box-sizing:border-box}
.programmes-page a{text-decoration:none}

/* HERO */
.programmes-hero{
    position:relative;
    min-height:510px;
    display:flex;
    align-items:center;
    background:var(--p-navy);
    color:#fff;
    overflow:hidden;
}

.programmes-hero-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(3,14,27,.97),rgba(4,22,40,.83) 48%,rgba(4,22,40,.45)),
        url("images/header-slider/home-v3/header-slide.jpg") center/cover no-repeat;
}

.programmes-hero:after{
    content:"";
    position:absolute;
    width:430px;
    height:430px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    right:-140px;
    top:-100px;
    box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.018);
}

.programmes-hero .container{
    position:relative;
    z-index:2;
    width:100%;
}

.programmes-hero-content{
    max-width:760px;
    padding:80px 0;
}

.programmes-kicker,
.programmes-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--p-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.programmes-kicker{color:#a8e2ff;margin-bottom:18px}
.programmes-kicker i,
.programmes-label:before{
    display:block;
    content:"";
    width:30px;
    height:2px;
    background:var(--p-cyan);
}

.programmes-hero h1{
    margin:0 0 22px;
    font-size:clamp(42px,5.5vw,72px);
    line-height:1;
    letter-spacing:-3px;
    font-weight:800;
}

.programmes-hero h1 em{
    color:#43c2ff;
    font-style:normal;
}

.programmes-hero p{
    max-width:650px;
    color:#c9d5e1;
    line-height:1.85;
    font-size:16px;
    margin:0 0 30px;
}

.programmes-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.programmes-btn{
    min-height:52px;
    padding:0 23px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    border-radius:4px;
    font-size:12px;
    font-weight:800;
    transition:.25s ease;
}

.programmes-btn-primary{
    background:var(--p-blue);
    color:#fff!important;
    box-shadow:0 12px 28px rgba(17,103,232,.25);
}

.programmes-btn-primary:hover{
    transform:translateY(-2px);
    background:#2581ff;
}

.programmes-btn-light{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
}

.programmes-btn-light:hover{
    background:#fff;
    color:var(--p-navy)!important;
}

/* INTRO */
.programmes-intro{
    padding:90px 0 80px;
    background:#fff;
}

.intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:end;
}

.programmes-label{margin-bottom:13px}
.intro-grid h2,
.directory-heading h2{
    margin:0;
    color:var(--p-navy);
    font-size:clamp(34px,4vw,50px);
    line-height:1.08;
    letter-spacing:-1.8px;
}

.intro-grid h2 em,
.directory-heading h2 em,
.programme-cta h2 em{
    color:var(--p-blue);
    font-style:normal;
}

.intro-grid p{
    color:var(--p-muted);
    font-size:15px;
    line-height:1.9;
    margin:0;
}

.programme-benefits{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--p-border);
    border-bottom:1px solid var(--p-border);
}

.programme-benefits>div{
    padding:27px 25px;
    border-right:1px solid var(--p-border);
}

.programme-benefits>div:last-child{border-right:0}

.programme-benefits span{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    background:#edf5ff;
    color:var(--p-blue);
    border-radius:50%;
    margin-bottom:14px;
}

.programme-benefits strong{
    display:block;
    font-size:14px;
    color:var(--p-navy);
    margin-bottom:6px;
}

.programme-benefits small{
    color:var(--p-muted);
    font-size:11px;
    line-height:1.6;
}

/* DIRECTORY */
.programme-directory{
    padding:95px 0;
    background:var(--p-bg);
}

.directory-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:60px;
}

.directory-heading p{
    max-width:360px;
    color:var(--p-muted);
    font-size:13px;
    line-height:1.7;
    margin:0;
}

.school-block{
    background:#fff;
    border:1px solid var(--p-border);
    margin-bottom:30px;
    box-shadow:0 10px 30px rgba(7,21,37,.045);
}

.school-heading{
    min-height:110px;
    display:grid;
    grid-template-columns:70px 1fr auto;
    align-items:center;
    gap:20px;
    padding:22px 30px;
    border-bottom:1px solid var(--p-border);
}

.school-number{
    font-size:13px;
    font-weight:900;
    color:var(--p-blue);
    letter-spacing:1px;
}

.school-heading span{
    display:block;
    color:var(--p-blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:5px;
}

.school-heading h3{
    color:var(--p-navy);
    margin:0;
    font-size:25px;
    letter-spacing:-.5px;
}

.school-heading>a{
    color:var(--p-navy)!important;
    font-size:11px;
    font-weight:800;
    display:inline-flex;
    gap:10px;
    align-items:center;
}

.school-heading>a i{color:var(--p-blue)}

.programme-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
}

.programme-card{
    border-right:1px solid var(--p-border);
    display:flex;
    flex-direction:column;
}

.programme-card:last-child{border-right:0}

.programme-image{
    position:relative;
    height:220px;
    overflow:hidden;
    background:#0a1a2a;
}

.programme-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.5s ease;
}

.programme-card:hover .programme-image img{transform:scale(1.06)}

.programme-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(4,14,25,.62),transparent 50%);
}

.programme-image span{
    position:absolute;
    z-index:2;
    left:18px;
    bottom:16px;
    padding:7px 9px;
    background:var(--p-blue);
    color:#fff;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.4px;
}

.programme-content{
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.programme-meta{
    color:var(--p-blue);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:9px;
}

.programme-content h4{
    color:var(--p-navy);
    font-size:19px;
    line-height:1.3;
    margin:0 0 11px;
}

.programme-content p{
    color:var(--p-muted);
    font-size:12px;
    line-height:1.75;
    margin:0 0 20px;
    flex:1;
}

.programme-content a{
    color:var(--p-blue)!important;
    font-size:11px;
    font-weight:800;
    display:inline-flex;
    gap:10px;
    align-items:center;
}

/* CTA */
.programme-cta{
    padding:75px 0;
    background:
        linear-gradient(100deg,rgba(5,20,36,.98),rgba(8,54,94,.96)),
        url("images/admission.jpg") center/cover no-repeat;
    color:#fff;
}

.programme-cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:45px;
}

.programmes-label-light{color:#a8e2ff}
.programmes-label-light:before{background:var(--p-cyan)}

.programme-cta h2{
    margin:0 0 12px;
    color:#fff;
    font-size:clamp(34px,4vw,52px);
    line-height:1;
    letter-spacing:-2px;
}

.programme-cta h2 em{color:#45c3ff}

.programme-cta p{
    color:#b9c8d6;
    font-size:13px;
    margin:0;
}

.cta-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.programmes-btn-white{
    background:#fff;
    color:var(--p-navy)!important;
}

.programmes-btn-white:hover{
    transform:translateY(-2px);
    background:#e8f6ff;
}

.cta-contact{
    color:#aee6ff!important;
    font-size:10px;
    font-weight:800;
}

.cta-contact i{margin-left:5px}

/* RESPONSIVE */
@media(max-width:991px){
    .intro-grid{grid-template-columns:1fr;gap:25px}
    .programme-benefits{grid-template-columns:repeat(2,1fr)}
    .programme-benefits>div:nth-child(2){border-right:0}
    .programme-benefits>div:nth-child(-n+2){border-bottom:1px solid var(--p-border)}
    .programme-grid{grid-template-columns:1fr 1fr}
    .programme-card:nth-child(2){border-right:0}
    .programme-card:nth-child(1){border-bottom:1px solid var(--p-border)}
    .programme-card:nth-child(2){border-bottom:1px solid var(--p-border)}
    .programme-card:last-child{grid-column:1/-1;border-right:0}
    .programme-cta-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:767px){
    .programmes-hero{min-height:570px}
    .programmes-hero-content{padding:65px 0}
    .programmes-hero h1{letter-spacing:-2px}
    .programmes-hero-actions{flex-direction:column}
    .programmes-btn{width:100%}

    .programmes-intro,
    .programme-directory{padding:70px 0}

    .programme-benefits{grid-template-columns:1fr}
    .programme-benefits>div,
    .programme-benefits>div:nth-child(2){
        border-right:0;
        border-bottom:1px solid var(--p-border);
    }
    .programme-benefits>div:last-child{border-bottom:0}

    .directory-heading{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:35px;
    }

    .school-heading{
        grid-template-columns:45px 1fr;
        padding:20px;
    }

    .school-heading>a{
        grid-column:2;
    }

    .school-heading h3{font-size:21px}
    .programme-grid{grid-template-columns:1fr}
    .programme-card,
    .programme-card:nth-child(2),
    .programme-card:last-child{
        grid-column:auto;
        border-right:0;
        border-bottom:1px solid var(--p-border);
    }
    .programme-card:last-child{border-bottom:0}
    .programme-image{height:235px}

    .programme-cta{padding:65px 0}
    .cta-actions{width:100%}
    .programmes-btn-white{width:100%}
}

@media(max-width:420px){
    .programmes-hero h1{font-size:40px}
    .intro-grid h2,
    .directory-heading h2{font-size:34px}
}
