/* =========================================================
   SCPM ALLIED & HEALTH SCIENCES
   PREMIUM PROGRAMS PAGE
   ========================================================= */

:root{
    --orange:#ff671f;
    --orange-dark:#e95612;
    --saffron:#ff9933;
    --dark:#151515;
    --dark-2:#202020;
    --text:#252525;
    --muted:#6b7280;
    --light:#f8f9fb;
    --border:#e9e9e9;
    --white:#ffffff;
}


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

.program-hero{
    position:relative;
    min-height:540px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(255,153,51,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255,103,31,.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #171717 0%,
            #242424 55%,
            #171717 100%
        );

    color:#fff;
}


/* Decorative circles */

.program-hero::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    top:-180px;

    border:1px solid rgba(255,153,51,.25);

    border-radius:50%;
}


.program-hero::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-150px;
    bottom:-170px;

    border:1px solid rgba(255,103,31,.20);

    border-radius:50%;
}


.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.25),
            transparent 70%
        );

    pointer-events:none;
}


.program-hero .container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1200px;

    margin:auto;

    padding:80px 25px;
}


.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:9px 17px;

    border:1px solid rgba(255,153,51,.35);

    border-radius:50px;

    background:rgba(255,103,31,.10);

    color:#ffb05f;

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

    letter-spacing:.3px;

    backdrop-filter:blur(8px);
}


.hero-badge i{
    color:var(--saffron);
}


.program-hero h1{
    max-width:800px;

    margin:22px 0 18px;

    font-size:clamp(38px,5vw,65px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1.5px;
}


.program-hero h1::after{
    content:"";

    display:block;

    width:75px;
    height:4px;

    margin-top:22px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--saffron)
        );

    border-radius:10px;
}


.program-hero p{
    max-width:700px;

    margin:22px 0 32px;

    color:#cfcfcf;

    font-size:16px;

    line-height:1.8;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-buttons{
    display:flex;
    align-items:center;
    gap:14px;

    flex-wrap:wrap;
}


.btn-primary,
.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:145px;

    padding:13px 24px;

    border-radius:10px;

    text-decoration:none;

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

    transition:.3s ease;
}


.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--saffron)
        );

    color:#fff;

    box-shadow:
        0 10px 25px rgba(255,103,31,.25);
}


.btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(255,103,31,.35);
}


.btn-outline{
    border:1px solid rgba(255,255,255,.25);

    color:#fff;

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

    backdrop-filter:blur(8px);
}


.btn-outline:hover{
    border-color:var(--orange);

    background:var(--orange);

    transform:translateY(-3px);
}


/* =========================================================
   PROGRAM SECTION
   ========================================================= */

.program-section{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9fb 100%
        );

    padding:75px 22px 90px;
}


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

.program-category{
    max-width:1200px;

    margin:0 auto 32px;

    padding:20px 25px;

    display:flex;
    align-items:center;
    gap:15px;

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-left:5px solid var(--orange);

    border-radius:14px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.045);
}


.program-category::after{
    content:"";

    position:absolute;

    right:25px;
    top:50%;

    width:55px;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--saffron)
        );

    transform:translateY(-50%);

    border-radius:20px;
}


.program-category i{
    width:45px;
    height:45px;

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

    flex-shrink:0;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,103,31,.12),
            rgba(255,153,51,.08)
        );

    color:var(--orange);

    font-size:19px;
}


.program-category h3{
    margin:0;

    color:#202020;

    font-size:23px;
    font-weight:800;

    letter-spacing:-.3px;
}


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

.course-grid{
    max-width:1200px;

    margin:0 auto 70px;

    display:grid;

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

    gap:25px;
}


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

.course-hub-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-height:100%;

    padding:27px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 7px 25px rgba(0,0,0,.045);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.course-hub-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--saffron)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;
}


.course-hub-card:hover{
    transform:translateY(-8px);

    border-color:rgba(255,103,31,.28);

    box-shadow:
        0 18px 45px rgba(0,0,0,.10);
}


.course-hub-card:hover::before{
    transform:scaleX(1);
}


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

.course-badge{
    align-self:flex-start;

    padding:6px 11px;

    border-radius:20px;

    background:#fff4ed;

    color:var(--orange);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.6px;
}


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

.card-icon-box{
    width:62px;
    height:62px;

    margin:20px 0 18px;

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

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #fff1e8,
            #fff8f3
        );

    color:var(--orange);

    font-size:25px;

    border:1px solid #ffe0cc;

    transition:.35s ease;
}


.course-hub-card:hover .card-icon-box{
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--saffron)
        );

    color:#fff;

    transform:rotate(-3deg) scale(1.05);

    box-shadow:
        0 10px 25px rgba(255,103,31,.22);
}


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

.course-hub-card h3{
    margin:0 0 17px;

    color:#181818;

    font-size:23px;

    font-weight:800;

    letter-spacing:-.3px;
}


/* =========================================================
   COURSE INFO
   ========================================================= */

.course-info{
    display:flex;
    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:18px;
}


.course-info span{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 10px;

    background:#f7f7f7;

    border-radius:7px;

    color:#626262;

    font-size:11px;

    font-weight:600;
}


.course-info i{
    color:var(--orange);
}


/* =========================================================
   FEE
   ========================================================= */

.course-fee{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 15px;

    margin-bottom:17px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #fff7f1,
            #fffaf7
        );

    border:1px solid #ffeadc;
}


.course-fee small{
    color:#777;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.5px;
}


.course-fee strong{
    color:var(--orange);

    font-size:19px;

    font-weight:800;
}


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

.course-desc{
    margin:0 0 24px;

    color:#6a6a6a;

    font-size:13px;

    line-height:1.75;

    flex-grow:1;
}


/* =========================================================
   VIEW DETAILS BUTTON
   ========================================================= */

.course-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    width:100%;

    padding:12px 16px;

    margin-top:auto;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--saffron)
        );

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    box-shadow:
        0 7px 18px rgba(255,103,31,.16);

    transition:.3s ease;
}


.course-btn i{
    transition:.3s ease;
}


.course-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(255,103,31,.28);
}


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


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

.btn-syllabus{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:100%;

    margin-top:10px;

    padding:11px 15px;

    border-radius:9px;

    border:1px solid #ededed;

    background:#fff;

    color:#555;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    transition:.3s ease;
}


.btn-syllabus i{
    color:#e53935;

    font-size:14px;
}


.btn-syllabus:hover{
    border-color:#ffcab0;

    background:#fff7f2;

    color:var(--orange);

    transform:translateY(-2px);
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.program-section > .program-category:first-child{
    margin-top:0;
}


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

@media(max-width:1050px){

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

        gap:22px;
    }


    .program-hero{
        min-height:500px;
    }

}


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

@media(max-width:700px){

    .program-hero{
        min-height:520px;
    }


    .program-hero .container{
        padding:65px 20px;
    }


    .program-hero h1{
        font-size:38px;

        letter-spacing:-.8px;
    }


    .program-hero p{
        font-size:14px;

        line-height:1.7;
    }


    .hero-buttons{
        width:100%;
    }


    .btn-primary,
    .btn-outline{
        flex:1;

        min-width:130px;
    }


    .program-section{
        padding:50px 16px 65px;
    }