/*==================================================
PROGRAM PAGE
==================================================*/

.program-page{

    position:relative;

    padding:80px 0 120px;

    background:#f6f8fc;

}

.program-page .container{

    max-width:1320px;

    margin:auto;

    padding:0 24px;

}

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

.program-hero{

    position:relative;

    padding:30px 0 50px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a,
            #2563eb
        );

    overflow:hidden;

}

.program-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
            rgba(255,255,255,.12),
            transparent 40%);

}

.program-hero .container{

    position:relative;

    z-index:2;

    max-width:1320px;

    margin:auto;

    padding:0 24px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}

.hero-left{

    max-width:820px;

}

.course-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:100px;

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

    color:#fff;

    font-size:.9rem;

    font-weight:600;

    backdrop-filter:blur(16px);

}

.program-hero h1{

    margin:22px 0;

    font-size:3.4rem;

    line-height:1.15;

    font-weight:800;

    color:#fff;

}

.program-hero p{

    margin-top:24px;

    font-size:1.08rem;

    line-height:1.9;

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

    max-width:760px;

}

.hero-meta{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:26px;

}

.hero-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:14px;

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

    color:#fff;

    backdrop-filter:blur(14px);

    font-weight:600;

}

/*==================================================
BREADCRUMB
==================================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.breadcrumb a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#fff;

}

.breadcrumb span{

    color:#94a3b8;

}




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

.program-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) 360px;

    gap:36px;

    align-items:start;

}

.program-main{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.program-sidebar{

    position:sticky;

    top:30px;

}





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

.program-card{

    background:#fff;

    border-radius:26px;

    padding:34px;

    border:1px solid #edf2f7;

    box-shadow:

        0 10px 40px rgba(15,23,42,.06);

    transition:.35s;

}

.program-card:hover{

    transform:translateY(-5px);

    box-shadow:

        0 25px 60px rgba(15,23,42,.10);

}

.program-card h2{

    margin:0 0 24px;

    font-size:1.65rem;

    color:#0f172a;

    font-weight:700;

}

.program-card p{

    margin:0;

    color:#64748b;

    line-height:1.9;

}





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

.double-grid{

    display:grid;

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

    gap:28px;

}



/*==================================================
SIDEBAR
==================================================*/

.sidebar-card{

    position:sticky;

    background:#ffffff;

    border-radius:26px;
    margin-top: 60px;

    padding:30px;

    border:1px solid #edf2f7;

    box-shadow:
        0 20px 60px rgba(15,23,42,.08);

}

/*==================================================
PRICE
==================================================*/

.sidebar-price{

    text-align:center;

    margin-bottom:28px;

}

.old-price{

    display:block;

    margin-bottom:8px;

    color:#94a3b8;

    font-size:1rem;

    text-decoration:line-through;

}

.sidebar-price h2{

    margin:0;

    font-size:2.6rem;

    color:#2563eb;

    font-weight:800;

    line-height:1;

}

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

.btn-primary{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:58px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    margin-bottom:16px;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(37,99,235,.28);

}

.btn-whatsapp{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:56px;

    border-radius:16px;

    border:2px solid #22c55e;

    color:#22c55e;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.btn-whatsapp:hover{

    background:#22c55e;

    color:#fff;

}

.sidebar-divider{

    height:1px;

    background:#edf2f7;

    margin:30px 0;

}




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

.course-info{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.info-row{

    display:flex;

    align-items:center;

    gap:18px;

}

.info-row i{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    color:#2563eb;

    font-size:1.1rem;

}

.info-row div{

    flex:1;

}

.info-row span{

    display:block;

    font-size:.82rem;

    color:#94a3b8;

    margin-bottom:4px;

}

.info-row strong{

    color:#0f172a;

    font-size:1rem;

}


/*==================================================
BENEFITS
==================================================*/

.sidebar-benefits{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.sidebar-benefits li{

    display:flex;

    align-items:center;

    gap:14px;

    color:#334155;

    font-weight:600;

}

.sidebar-benefits i{

    color:#22c55e;

    font-size:1rem;

}





/*==================================================
CURRICULUM
==================================================*/

.curriculum-item{

    border:1px solid #edf2f7;

    border-radius:18px;

    overflow:hidden;

}

.curriculum-item + .curriculum-item{

    margin-top:18px;

}

.curriculum-item summary{

    list-style:none;

    cursor:pointer;

    padding:22px 24px;

    font-size:1rem;

    font-weight:700;

    color:#0f172a;

    transition:.3s;

}

.curriculum-item summary::-webkit-details-marker{

    display:none;

}

.curriculum-item summary:hover{

    background:#f8fafc;

}

.curriculum-item[open] summary{

    background:#eff6ff;

    color:#2563eb;

}

.curriculum-item div{

    padding:0 24px 24px;

    line-height:1.8;

    color:#64748b;

}





/*==================================================
SKILLS
==================================================*/

.skill-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.skill-tags span{

    padding:12px 20px;

    border-radius:100px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:600;

    transition:.3s;

}

.skill-tags span:hover{

    background:#2563eb;

    color:#fff;

}




/*==================================================
PROJECTS
==================================================*/

.project-grid{

    display:grid;

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

    gap:22px;

}

.project-card{

    padding:26px;

    border-radius:20px;

    border:1px solid #edf2f7;

    background:#fff;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);

}

.project-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    color:#2563eb;

    font-size:1.4rem;

    margin-bottom:20px;

}

.project-card h4{

    margin:0 0 12px;

    color:#0f172a;

    font-size:1.15rem;

}

.project-card p{

    color:#64748b;

    line-height:1.7;

}




/*==================================================
FEATURES
==================================================*/

.feature-grid{

    display:grid;

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

    gap:20px;

}

.feature-item{

    display:flex;

    gap:18px;

    padding:22px;

    border-radius:18px;

    background:#f8fafc;

    transition:.35s;

}

.feature-item:hover{

    background:#eff6ff;

}

.feature-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:#fff;

    flex-shrink:0;

}

.feature-item h4{

    margin:0 0 8px;

    color:#0f172a;

}

.feature-item p{

    margin:0;

    color:#64748b;

}



/*==================================================
HIGHLIGHTS
==================================================*/

.highlight-grid{

    display:grid;

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

    gap:18px;

}

.highlight-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:28px;

    border-radius:18px;

    background:#f8fafc;

    transition:.35s;

}

.highlight-card:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-5px);

}

.highlight-card i{

    font-size:2rem;

    margin-bottom:18px;

    color:#2563eb;

}

.highlight-card:hover i{

    color:#fff;

}

.highlight-card span{

    font-weight:600;

}





/*==================================================
TESTIMONIALS
==================================================*/

.testimonial-grid{

    display:grid;

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

    gap:24px;

}

.testimonial-card{

    padding:28px;

    border-radius:20px;

    background:#fff;

    border:1px solid #edf2f7;

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 50px rgba(15,23,42,.08);

}

.stars{

    color:#f59e0b;

    margin-bottom:18px;

    font-size:1.1rem;

}

.testimonial-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:22px;

}

.testimonial-card h5{

    margin:0;

    color:#0f172a;

    font-size:1rem;

}




/*==================================================
FAQ
==================================================*/

.faq-item{

    border:1px solid #edf2f7;

    border-radius:18px;

    overflow:hidden;

}

.faq-item+.faq-item{

    margin-top:16px;

}

.faq-item summary{

    cursor:pointer;

    list-style:none;

    padding:22px;

    font-weight:700;

    color:#0f172a;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary:hover{

    background:#f8fafc;

}

.faq-item[open] summary{

    background:#eff6ff;

    color:#2563eb;

}

.faq-item div{

    padding:0 22px 22px;

    color:#64748b;

    line-height:1.8;

}





/*==================================================
SECTION HEADER
==================================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.section-header span{

    padding:8px 16px;

    border-radius:30px;

    background:#eff6ff;

    color:#2563eb;

    font-size:.85rem;

    font-weight:700;

}





/*==================================================
CTA
==================================================*/

.program-cta{

    padding:100px 0;

    background:#f6f8fc;

}

.cta-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:60px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #0f172a,
        #1e3a8a,
        #2563eb
    );

    color:#fff;

    overflow:hidden;

    position:relative;

}

.cta-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.12),
        transparent 45%);

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-box span{

    display:inline-block;

    margin-bottom:12px;

    color:#bfdbfe;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.cta-box h2{

    margin:0 0 18px;

    font-size:2.4rem;

    font-weight:800;

}

.cta-box p{

    max-width:620px;

    line-height:1.8;

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

}

.cta-buttons{

    display:flex;

    gap:18px;

}

.btn-outline{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:16px;

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

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#2563eb;

}





/*==================================================
ENQUIRY
==================================================*/

.program-enquiry{

    padding:110px 0;

    background:#ffffff;

}

.enquiry-card{

    max-width:950px;

    margin:auto;

    padding:60px;

    background:#fff;

    border-radius:28px;

    box-shadow:
        0 25px 60px rgba(15,23,42,.08);

    border:1px solid #edf2f7;

}

.form-heading{

    text-align:center;

    margin-bottom:50px;

}

.form-heading span{

    color:#2563eb;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.form-heading h2{

    margin:18px 0;

    font-size:2.4rem;

    color:#0f172a;

}

.form-heading p{

    color:#64748b;

}

.form-grid{

    display:grid;

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

    gap:22px;

}

.form-grid input{

    width:100%;

    height:58px;

    padding:0 20px;

    border-radius:16px;

    border:1px solid #dbe3ef;

    outline:none;

    transition:.3s;

}

.form-grid input:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08);

}

.program-enquiry textarea{

    width:100%;

    min-height:180px;

    margin-top:22px;

    padding:20px;

    border-radius:16px;

    border:1px solid #dbe3ef;

    resize:none;

    outline:none;

}

.program-enquiry button{

    margin-top:26px;

}




/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .program-grid{

        grid-template-columns:1fr;

    }

    .program-sidebar{

        position:static;

    }

}

@media(max-width:900px){

    .program-hero h1{

        font-size:2.5rem;

    }

    .double-grid,

    .project-grid,

    .feature-grid,

    .testimonial-grid,

    .highlight-grid{

        grid-template-columns:1fr;

    }

    .cta-box{

        flex-direction:column;

        text-align:center;

    }

    .cta-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media(max-width:768px){

    .program-card{

        padding:24px;

    }

    .sidebar-card{

        padding:24px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .enquiry-card{

        padding:35px 24px;

    }

    .cta-box{

        padding:40px 24px;

    }

    .program-hero{

        padding:70px 0;

    }

    .program-hero h1{

        font-size:2rem;

    }

}




/*==================================================
ANIMATIONS
==================================================*/

.program-card,

.project-card,

.feature-item,

.highlight-card,

.testimonial-card,

.sidebar-card{

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}

html{

    scroll-behavior:smooth;

}

::selection{

    background:#2563eb;

    color:#fff;

}

img{

    max-width:100%;

    display:block;

}