/*==============================
ROOT VARIABLES
==============================*/
:root{
    --primary:#0B2046;
    --primary-dark:#0B2046;
    --secondary:#8a1538;
    --secondary-dark:#8a1538a0;
    --white:#ffffff;
    --light:#F8FAFC;
    --gray:#6B7280;
    --border:#E5E7EB;
    --heading:#111827;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --shadow-lg:0 15px 40px rgba(0,0,0,.15);
    --radius:10px;
    --transition:.35s ease;
    --font-family:'Inter', sans-serif;
}

/*=========================================
            PAGE BANNER
=========================================*/

.page-banner{
    position:relative;
    width:100%;
    height:480px;
    background:url("../images/program-banner.webp") center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin-top: 155px;
}
.banner-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:var(--white);
    padding:20px;
    animation:bannerFade 1s ease;
}
.banner-subtitle{
    display:inline-block;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    padding:10px 22px;
    border-radius:30px;
    font-size:15px;
    font-weight:500;
    margin-bottom:22px;
    letter-spacing:.5px;
}
.banner-content h1{
    font-size:55px;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.15;
    color:var(--white);
    margin-right: 829px;
}
.breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:18px;
    font-weight:500;
    margin-right: 1050px;
}
.breadcrumb a{
    color:#fff;
    text-decoration:none;
    transition:var(--transition);
}
.breadcrumb a:hover{
    color:#ffd54a;
}
.breadcrumb span:last-child{
    color:#fff;
    opacity:.95;
}
/* Decorative Bottom Curve */

.page-banner::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:50px;
    background:var(--white);
    clip-path:ellipse(75% 100% at 50% 100%);
}

/*==========================
        Animation
==========================*/
@keyframes bannerFade{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*==========================
      Large Tablet
==========================*/
@media(max-width:992px){
.page-banner{
    height:420px;
}
.banner-content h1{
    font-size:52px;
}
}
/*==========================
        Tablet
==========================*/
@media(max-width:768px){
.page-banner{
    height:360px;
    /* margin-top: 90px;
    background-image: url("../images/program-banner-mobile.webp");
    background-position: center center;
    background-size: cover; */
}
.banner-subtitle{
    font-size:14px;
    padding:8px 18px;
}
.banner-content h1{
    font-size:42px;
}
.breadcrumb{
    font-size:16px;
}
.page-banner::after{
    height:65px;
}
}
/*==========================
        Mobile
==========================*/
@media(max-width:576px){
.page-banner{
    height:360px;
    /* margin-top: 90px; */
    background-image: url("../images/programmebanner-m.webp");
    background-position: center 10px;
    background-size: cover;
}
.banner-content h1{
    font-size:34px;
}
.banner-subtitle{
    margin-bottom:15px;
}
.breadcrumb{
    font-size:14px;
    gap:6px;
}
.page-banner::after{
    height:45px;
}
}
/*==========================
      Small Mobile
==========================*/
@media(max-width:400px){
    .page-banner{
        height: 260px;
        /* margin-top: 80px;
        background-image: url("../images/program-banner-mobile.webp");
        background-position: center;
        background-size: cover; */
    }
.banner-content h1{
    font-size:30px;
}
.banner-subtitle{
    font-size:13px;
    padding:7px 15px;
}
}

/*=====================================
PGDM OVERVIEW
=====================================*/

.pgdm-overview{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
    position:relative;
}

/*==========================
Heading
==========================*/

.section-tag{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--secondary);
    margin-bottom:15px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    line-height:1.2;
    margin-bottom:25px;
}
.section-title span{
    color:var(--secondary);
}
/*==========================
Content
==========================*/
.overview-text{
    font-size:16px;
    line-height:1.9;
    color:#000000;
    margin-bottom:20px;
}
/*==========================
Feature Cards
==========================*/
.overview-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:var(--white);
    padding:13px;
    border-radius:15px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    height:100%;
    border-top:4px solid transparent;
}
.overview-card:hover{
    transform:translateY(-8px);
    border-color:var(--secondary);
    box-shadow:var(--shadow-lg);
}
.overview-card .icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(138,21,56,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.overview-card .icon i{
    font-size:24px;
    color:var(--secondary);
}
.overview-card h5{
    font-size:20px;
    color:var(--primary);
    font-weight:600;
    margin-bottom:8px;
}
.overview-card p{
    margin:0;
    font-size:16px;
    color:#000000;
    line-height:1.7;
}
/*==========================
Image
==========================*/
.overview-image{
    position:relative;
    text-align:center;
}
.overview-image img{
    width:100%;
    max-width:540px;
    height: 550px;
    border-radius:25px;
    box-shadow:var(--shadow-lg);
    animation:floatImage 5s ease-in-out infinite;
}
/*==========================
Floating Card
==========================*/
.floating-card{
    position:absolute;
    left:-20px;
    bottom:40px;
    background:var(--white);
    padding:18px 28px;
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    animation:floatCard 4s ease-in-out infinite;
}
.floating-card h3{
    margin:0;
    font-size:34px;
    color:var(--secondary);
    font-weight:700;
}
.floating-card span{
    color:#000000;
    font-size:15px;
}
/*==========================
Approval Badg
==========================*/
.approval-badge{
    position:absolute;
    top:30px;
    right:-15px;
    background:var(--primary);
    color:#fff;
    padding:14px 22px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:var(--shadow-lg);
}
.approval-badge i{
    font-size:22px;
    color:#FFD166;
}
/*==========================
Animations
==========================*/
@keyframes floatImage{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}
@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}
/*==========================
Reveal Animation
==========================*/
.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:1s ease;
}
.reveal.active{
    opacity:1;
    transform:translateY(0);
}
/*==========================
Responsive
==========================*/
@media(max-width:991px){
    .pgdm-overview{
        padding:80px 0;
    }
    .section-title{
        font-size:30px;
    }
    .overview-image{
        margin-top:50px;
    }
    .floating-card{
        left:20px;
        bottom:20px;
    }
    .approval-badge{
        right:20px;
    }
}
@media(max-width:767px){
    .pgdm-overview{
        padding:60px 0;
    }
    .section-title{
        font-size:30px;
    }
    .overview-text{
        font-size:16px;
    }
    .overview-card{
        padding:18px;
    }
    .overview-card h5{
        font-size:18px;
    }
    .overview-btns{
        flex-direction:column;
    }
    .overview-btns .btn{
        width:100%;
        text-align:center;
    }
    .floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin:20px auto 0;
        width:fit-content;
    }
    .approval-badge{
        position:relative;
        top:auto;
        right:auto;
        margin:20px auto 0;
        width:fit-content;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .overview-card{
        flex-direction:column;
        text-align:center;
    }
    .overview-card .icon{
       margin:auto;
    }
}
/*=====================================
WHY PGDM AT KBS
=====================================*/
.why-pgdm{
    padding:100px 0;
    background:var(--white);
    overflow:hidden;
    position:relative;
}
/*=====================================
LEFT IMAGE
=====================================*/
.why-pgdm-image{
    position:relative;
    max-width:560px;
    margin:auto;
    min-height:550px;
}
.main-image{
    width:88%;
    height:570px;
    overflow:hidden;
    border-radius:30px;
    box-shadow:var(--shadow-lg);
    position:relative;
    z-index:2;
}
.main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}
.main-image:hover img{
    transform:scale(1.08);
}
.small-image{
    position:absolute;
    right:0;
    bottom:10px;
    width:250px;
    height:280px;
    overflow:hidden;
    border-radius:20px;
    border:6px solid var(--white);
    box-shadow:var(--shadow-lg);
    z-index:3;
}
.small-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}
.small-image:hover img{
    transform:scale(1.08);
}
/*=====================================
EXPERIENCE BOX
=====================================*/
.experience-box{
    position:absolute;
    left:20px;
    bottom:10px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    padding:20px 30px;
    border-radius:20px;
    text-align:center;
    box-shadow:var(--shadow-lg);
    z-index:5;
}
.experience-box h2{
    font-size:40px;
    margin-bottom:5px;
    font-weight:700;
}
.experience-box p{
    margin:0;
    font-size:15px;
}
/*=====================================
RIGHT CONTENT
=====================================*/
/* ===================================
   WHY PGDM CONTENT
=================================== */

.why-content{
    padding-left: 20px;
}

.why-content .section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(138,21,56,.08);
    color:var(--secondary);
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.5px;
}

.why-content .section-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:var(--primary);
    margin-top:18px;
    margin-bottom:25px;
    line-height:1.3;
    font-size: 35px;
}

.why-content .section-title span{
    color:var(--secondary);
}

.why-content p{
    color:#000000;
    font-size:16px;
    line-height:1.9;
    margin-bottom:18px;
    text-align:justify;
    transition:var(--transition);
}

.why-content p:hover{
    color:var(--heading);
}

/* Optional Left Border Accent */
.why-content p{
    position:relative;
    padding-left:18px;
}

.why-content p::before{
    content:'';
    position:absolute;
    left:0;
    top:10px;
    width:4px;
    height:70%;
    background:linear-gradient(
        to bottom,
        var(--primary),
        var(--secondary)
    );
    border-radius:10px;
}

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

@media (max-width: 991px){

    .why-content{
        padding-left:0;
        text-align:center;
        margin-top:20px;
    }

    .why-content p{
        text-align:left;
        padding-left:15px;
    }

    .why-content .section-title{
        margin-bottom:20px;
    }
}

@media (max-width: 767px){

    .why-content .section-title{
        font-size:2rem;
    }

    .why-content p{
        font-size:.95rem;
        line-height:1.8;
    }
}

@media (max-width: 575px){

    .why-content .section-title{
        font-size:1.8rem;
    }

    .why-content .section-tag{
        font-size:.8rem;
        padding:7px 15px;
    }

    .why-content p{
        font-size:.92rem;
        margin-bottom:15px;
    }
    .experience-box{
        height: 100px;
        width: 150px !important;
        margin-right: 180px !important;

    }
}
/*=====================================
BUTTONS
=====================================*/
.why-btns{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}
.btn-primary-custom{
    background:var(--secondary);
    color:#fff;
    padding:14px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}
.btn-primary-custom:hover{
    background:var(--primary);
    color:#fff;
}
.btn-outline-custom{
    border:2px solid var(--primary);
    color:var(--primary);
    padding:14px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}
.btn-outline-custom:hover{
    background:var(--primary);
    color:#fff;
}
/*=====================================
FLOATING ANIMATION
=====================================*/
.main-image{
    animation:floatMain 5s ease-in-out infinite;
}
.small-image{
    animation:floatSmall 4s ease-in-out infinite;
}
.experience-box{
    animation:floatBadge 4.5s ease-in-out infinite;
}
@keyframes floatMain{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}
@keyframes floatSmall{
    0%,100%{
        transform:translateY(0);
    }
    50%{
       transform:translateY(10px);
    }
}
@keyframes floatBadge{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}
/*=====================================
SCROLL ANIMATION
=====================================*/
.reveal-left,
.reveal-right{
    opacity:0;
}
.reveal-left.active{
    animation:leftReveal 1s forwards;
}
.reveal-right.active{
    animation:rightReveal 1s forwards;
}
@keyframes leftReveal{
    from{
        opacity:0;
        transform:translateX(-60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
@keyframes rightReveal{
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
/*=====================================
RESPONSIVE
=====================================*/
@media(max-width:991px){
    .why-pgdm{
        padding:80px 0;
    }
    .why-pgdm-image{
        min-height:480px;
        margin-bottom:40px;
    }
    .main-image{
        width:80%;
        height:400px;
    }
    .small-image{
        width:210px;
        height:160px;
    }
    .why-content .section-title{
        font-size:36px;
    }
}
@media(max-width:767px){
    .why-pgdm{
        padding:60px 0;
    }
    .why-pgdm-image{
        min-height:400px;
    }
    .main-image{
        width:85%;
        height:300px;
    }
    .small-image{
        width:170px;
        height:130px;
    }
    .experience-box{
        position:relative;
        left:auto;
        bottom:auto;
        margin:20px auto 0;
        width:220px;
    }
    .why-content .section-title{
        font-size:30px;
    }
    .section-desc{
        font-size:16px;
    }
    .why-btns{
        flex-direction:column;
    }
    .why-btns .btn{
        width:100%;
    }
}
@media(max-width:576px){
    .main-image{
        width:100%;
        height:260px;
    }
    .small-image{
        width:140px;
        height:110px;
        right:10px;
    }
    .why-card{
        text-align:center;
    }
    .why-icon{
        margin:auto auto 15px;
    }
    .why-content .section-title{
        font-size:26px;
    }
}
/*=====================================
CURRICULUM SECTION
=====================================*/
.curriculum-section{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
    position:relative;
}
/*=====================================
Heading
=====================================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:18px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    max-width:750px;
    margin:auto;
    color:#000000;
    font-size:16px;
    line-height:1.9;
}
/*=====================================
Curriculum Card
=====================================*/
.curriculum-card{
    position:relative;
    background:var(--white);
    padding:35px;
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    height:100%;
    overflow:hidden;
    transition:var(--transition);
}
.curriculum-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:var(--secondary);
}
.curriculum-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,
    var(--primary),
    var(--secondary));

}
/*=====================================
Number
=====================================*/
.curriculum-number{
    width:70px;
    height:70px;
    border-radius:50%;
    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
}
/*=====================================
Title
=====================================*/
.curriculum-card h4{
    color:var(--primary);
    font-size:25px;
    font-weight:600;
    margin-bottom:20px;
}
/*=====================================
List
=====================================*/
.curriculum-card ul{
    list-style:none;
    padding:0;
    margin:0;
}
.curriculum-card ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:16px;
    color:#000000;
    font-size:16px;
    line-height:1.7;
}
.curriculum-card ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:var(--secondary);
    font-size:15px;
    font-weight:bold;
}
/*=====================================
Highlight Boxes
=====================================*/
.highlight-box{
    background:#fff;
    border-radius:18px;
    padding:30px 20px;
    text-align:center;
    border:1px solid var(--border);
    transition:var(--transition);
    height:100%;
}
.highlight-box:hover{
    transform:translateY(-8px);
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-lg);
}
.highlight-box i{
    font-size:42px;
    color:var(--secondary);
    margin-bottom:18px;
    transition:.3s;
}
.highlight-box:hover i{
    color:#FFD166;
}
.highlight-box h5{
    font-size:20px;
    font-weight:600;
    margin:0;
}
/*=====================================
Reveal Animation
=====================================*/
.curriculum-card,
.highlight-box{
    opacity:0;
    transform:translateY(60px);
}
.curriculum-card.active,
.highlight-box.active{
    opacity:1;
    transform:translateY(0);
    transition:all .8s ease;
}
/*=====================================
Responsive
=====================================*/
@media(max-width:991px){
    .curriculum-section{
        padding:80px 0;
    }
    .section-title{
        font-size:36px;
    }
    .curriculum-card{
        padding:30px;
    }
}
@media(max-width:767px){
    .curriculum-section{
        padding:60px 0;
    }
    .section-title{
        font-size:30px;
    }
    .section-desc{
        font-size:16px;
    }
    .curriculum-number{
        width:60px;
        height:60px;
        font-size:24px;
    }
    .curriculum-card h4{
        font-size:22px;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .curriculum-card{
        padding:25px;
    }
    .highlight-box{
        padding:25px 15px;
    }
    .highlight-box i{
        font-size:36px;
    }
    .highlight-box h5{
        font-size:18px;
    }
}
/*=====================================
SPECIALIZATIONS TIMELINE
=====================================*/
.specializations-section{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
}
/*==========================
Heading
==========================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:18px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    max-width:700px;
    margin:auto;
    color:#000000;
    line-height:1.8;
    font-size:16px;
}
/*==========================
Timeline
==========================*/
.specialization-timeline{
    position:relative;
    max-width:1100px;
    margin:70px auto 0;
}
.specialization-timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );
    transform:translateX(-50%);
    border-radius:20px;
}
/*==========================
Timeline Item
==========================*/
.timeline-item{
    width:50%;
    position:relative;
    padding:20px 50px;
}
.timeline-item.left{
    left:0;
    text-align:right;
}
.timeline-item.right{
    left:50%;
}
/*==========================
Circle
==========================*/
.timeline-item::before{
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--secondary);
    border:5px solid var(--white);
    box-shadow:0 0 0 4px rgba(138,21,56,.15);
    top:50%;
    transform:translateY(-50%);
    z-index:5;
}
.timeline-item.left::before{
    right:-12px;
}
.timeline-item.right::before{
    left:-12px;
}
/*==========================
Card
==========================*/
.timeline-card{
    background:var(--white);
    padding:30px;
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
}
.timeline-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}
.timeline-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(138,21,56,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:20px;
}
.timeline-item.left .timeline-icon{
    margin-left:auto;
}
.timeline-icon i{
    font-size:28px;
    color:var(--secondary);
}
.timeline-card h4{
    color:var(--primary);
    font-size:24px;
    margin-bottom:15px;
    font-weight:600;
}
.timeline-card p{
    color:#000000;
    line-height:1.8;
    margin:0;

}
/*==========================
Animatio
==========================*/
.timeline-item{
    opacity:0;
}
.timeline-item.left{
    transform:translateX(-70px);
}
.timeline-item.right{
    transform:translateX(70px);
}
.timeline-item.active{
    opacity:1;
    transform:translateX(0);
    transition:.8s ease;
}
/*==========================
Responsive
==========================*/
@media(max-width:991px){
    .section-title{
        font-size:38px;
    }
    .specialization-timeline::before{
        left:30px;
    }
    .timeline-item{
        width:100%;
        left:0 !important;
        padding-left:80px;
        padding-right:0;
        margin-bottom:40px;
        text-align:left !important;
    }
    .timeline-item::before{
        left:18px !important;
        right:auto;
    }
    .timeline-item.left .timeline-icon{
        margin-left:0;
    }
}
@media(max-width:767px){
    .specializations-section{
        padding:70px 0;
    }
    .section-title{
        font-size:30px;
    }
    .timeline-card{
        padding:25px;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .section-desc{
        font-size:15px;
    }
    .timeline-card h4{
        font-size:21px;
    }
}
/*=====================================
TEACHING METHODOLOGY
=====================================*/
.teaching-section{
    padding:100px 0;
    background:var(--white);
    overflow:hidden;
}
/*=====================================
Heading
=====================================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:18px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    max-width:760px;
    margin:auto;
    color:#000000;
    line-height:1.9;
    font-size:16px;
}
/*=====================================
Wrapper
=====================================*/
.methodology-wrapper{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:20px;
    flex-wrap:wrap;
    margin-top:70px;
}
/*=====================================
Card
=====================================*/
.method-card{
    flex:1;
    min-width:220px;
    max-width:240px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    position:relative;
    box-shadow:var(--shadow);
    transition:var(--transition);
    opacity:0;
    transform:translateY(60px);
}
.method-card.active{
    opacity:1;
    transform:translateY(0);
}
.method-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:var(--secondary);
}
/*=====================================
Top Border
=====================================*/
.method-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}
/*=====================================
Icon
=====================================*/
.method-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:rgba(138,21,56,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.4s;
}
.method-icon i{
    font-size:34px;
    color:var(--secondary);
}
.method-card:hover .method-icon{
    background:var(--secondary);
    transform:rotate(360deg);
}
.method-card:hover .method-icon i{
    color:var(--white);
}
/*=====================================
Text
=====================================*/
.method-card h4{
    color:var(--primary);
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
    transition:.3s;
}
.method-card:hover h4{
    color:var(--secondary);
}
.method-card p{
    color:#000000;
    line-height:1.8;
    margin:0;
    font-size:15px;
}
/*=====================================
Arrow
=====================================*/
.method-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:var(--secondary);
    animation:moveArrow 2s infinite;
}
@keyframes moveArrow{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(10px);
    }
}
/*=====================================
Responsive
=====================================*/
@media(max-width:1199px){
    .method-card{
        min-width:200px;
    }
}
@media(max-width:991px){
    .teaching-section{
        padding:80px 0;
    }
    .section-title{
        font-size:38px;
    }
    .methodology-wrapper{
        gap:30px;
    }
    .method-arrow{
        display:none;
    }
}
@media(max-width:767px){
    .teaching-section{
        padding:60px 0;
    }
    .section-title{
        font-size:30px;
    }
    .method-card{
        max-width:100%;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .section-desc{
        font-size:15px;
    }
    .method-card{
        padding:30px 20px;
    }
    .method-icon{
        width:70px;
        height:70px;
    }
    .method-icon i{
        font-size:28px;
    }
}
/*=====================================
AI & EMERGING TECHNOLOGIES
=====================================*/
.ai-section{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
    position:relative;
}
/*=====================================
Heading
=====================================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    color:#000000;
    line-height:1.9;
    font-size:17px;
    margin-bottom:30px;
}
/*=====================================
Features
=====================================*/
.ai-features{
    margin-bottom:35px;
}
.feature-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    font-size:17px;
    font-weight:500;
    color:var(--heading);
}
.feature-item i{
    color:var(--secondary);
    font-size:20px;
}
/*=====================================
Button
=====================================*/
.ai-btn{
    background:var(--primary);
    color:var(--white);
    padding:14px 32px;
    border-radius:50px;
    font-weight:600;
    transition:var(--transition);
}
.ai-btn:hover{
    background:var(--secondary);
    color:var(--white);
    transform:translateY(-3px);
}
/*=====================================
Cards
=====================================*/
.ai-card{
    background:var(--white);
    border-radius:20px;
    padding:35px 30px;
    height:100%;
    position:relative;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:var(--transition);
    overflow:hidden;
    opacity:0;
    transform:translateY(60px);
}
.ai-card.active{
    opacity:1;
    transform:translateY(0);
}
/* Gradient Top */
.ai-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}
/* Hover */
.ai-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:var(--secondary);
}
/*=====================================
Icon
=====================================*/
.ai-icon{
    width:75px;
    height:75px;
    border-radius:50%;
    background:rgba(138,21,56,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
    transition:.4s;
}
.ai-icon i{
    font-size:32px;
    color:var(--secondary);
}
.ai-card:hover .ai-icon{
    background:var(--secondary);
    transform:rotate(360deg);
}
.ai-card:hover .ai-icon i{
    color:var(--white);
}
/*=====================================
Text
=====================================*/
.ai-card h5{
    color:var(--primary);
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
    transition:.3s;
}
.ai-card:hover h5{
    color:var(--secondary);
}
.ai-card p{
    color:#000000;
    line-height:1.8;
    margin:0;
}
/*=====================================
Responsive
=====================================*/
@media(max-width:991px){
    .ai-section{
        padding:80px 0;
    }
    .section-title{
        font-size:38px;
    }
}
@media(max-width:767px){
    .ai-section{
        padding:60px 0;
    }
    .section-title{
        font-size:30px;
    }
    .section-desc{
        font-size:16px;
    }
    .ai-card{
        padding:28px;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .feature-item{
        font-size:15px;
        align-items:flex-start;
    }
    .ai-card{
        text-align:center;
    }
    .ai-icon{
        margin:0 auto 20px;
    }
}
/*=====================================
AI ORBIT SECTION
=====================================*/
.ai-orbit-section{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
    position:relative;
}
/*==========================
Heading
==========================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;
}

.section-title span{
    color:var(--secondary);
}

.section-desc{
    max-width:760px;
    margin:auto;
    color:#666;
    line-height:1.8;
    font-size:17px;
}

/*==========================
Orbit Wrapper
==========================*/

.orbit-wrapper{
    position:relative;
    width:650px;
    height:650px;
    margin:70px auto 0;
}

/*==========================
Center Circle
==========================*/

.orbit-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:20;
}

.center-logo{
    width:220px;
    height:220px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow:var(--shadow-lg);
}

.center-logo i{
    font-size:45px;
    margin-bottom:12px;
}

.center-logo h3{
    font-size:34px;
    margin-bottom:8px;
    font-weight:700;
}

.center-logo span{
    font-size:15px;
    opacity:.9;
}

/*==========================
Orbit Ring
==========================*/

.orbit-wrapper::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border:2px dashed rgba(11,45,98,.2);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/*==========================
Orbit Item
==========================*/

.orbit-item{
    position:absolute;
    width:170px;
    transition:.4s;
}

.orbit-card{
    background:var(--white);
    border-radius:18px;
    padding:25px 18px;
    text-align:center;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    transition:var(--transition);
}

.orbit-card:hover{
    transform:translateY(-8px);
    border-color:var(--secondary);
    box-shadow:var(--shadow-lg);
}

.orbit-card i{
    width:70px;
    height:70px;
    line-height:70px;
    border-radius:50%;
    background:rgba(138,21,56,.08);
    color:var(--secondary);
    font-size:28px;
    margin-bottom:18px;
    transition:.4s;
}

.orbit-card:hover i{
    background:var(--secondary);
    color:#fff;
    transform:rotate(360deg);
}

.orbit-card h5{
    color:var(--primary);
    font-size:18px;
    font-weight:600;
    margin:0;
}

/*==========================
Positioning
==========================*/

.orbit-1{
    top:0;
    left:35%;
    transform:translateX(-50%);
}

.orbit-2{
    top:110px;
    right:0;
}

.orbit-3{
    bottom:110px;
    right:0;
}
.orbit-4{
    bottom:0;
    left:35%;
    transform:translateX(-50%);
}
.orbit-5{
    bottom:110px;
    left:0;
}
.orbit-6{
    top:110px;
    left:0;
}
/*==========================
Floating Animation
==========================*/
.orbit-item{
    animation:floatOrbit 4s ease-in-out infinite;
}
.orbit-2{animation-delay:.3s;}
.orbit-3{animation-delay:.6s;}
.orbit-4{animation-delay:.9s;}
.orbit-5{animation-delay:1.2s;}
.orbit-6{animation-delay:1.5s;}
@keyframes floatOrbit{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
/*==========================
Responsive
==========================*/
@media(max-width:991px){
.orbit-wrapper{
width:100%;
height:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-top:50px;
}
.orbit-wrapper::before{
display:none;
}
.orbit-center{
position:relative;
top:auto;
left:auto;
transform:none;
grid-column:1/-1;
margin:0 auto 20px;
}
.orbit-item{
position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;
transform:none!important;
width:100%;
animation:none;
}
.center-logo{
width:180px;
height:180px;
}
.center-logo span{
    font-size: 10px;
}
}
@media(max-width:576px){
.section-title{
font-size:28px;
}
.orbit-wrapper{
grid-template-columns:1fr;
}
.center-logo{
width:160px;
height:160px;
}
.center-logo h3{
font-size:28px;
}
.orbit-card{
padding:20px;
}
}
/*=====================================
INDUSTRY CERTIFICATIONS
=====================================*/
.certification-section{
    padding:100px 0;
    background:var(--white);
    overflow:hidden;
    position:relative;
}
/*==========================
Heading
==========================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:18px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    max-width:760px;
    margin:auto;
    color:#000000;
    font-size:16px;
    line-height:1.8;
}
/*==========================
Certification Card
==========================*/
.cert-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:35px 30px;
    text-align:center;
    height:100%;
    position:relative;
    overflow:hidden;
    transition:var(--transition);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(50px);
}
.cert-card.show{
    opacity:1;
    transform:translateY(0);
}
/* Top Border */
.cert-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}
.cert-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:var(--secondary);
}
/*==========================
Icon
==========================*/
.cert-icon{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:rgba(138,21,56,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.5s;
}
.cert-icon i{
    font-size:38px;
    color:var(--secondary);
}
.cert-card:hover .cert-icon{
    background:var(--secondary);
    transform:rotate(360deg);
}
.cert-card:hover .cert-icon i{
    color:var(--white);
}
/*==========================
Text
==========================*/
.cert-card h4{
    color:var(--primary);
    font-size:24px;
    margin-bottom:15px;
    font-weight:600;
}
.cert-card p{
    margin:0;
    color:#000000;
    line-height:1.8;
}
/*==========================
Benefits
==========================*/
.cert-benefits{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    border-radius:18px;
    padding:30px;
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:20px;
    color:var(--white);
    box-shadow:var(--shadow-lg);
}
.cert-benefits div{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:500;
}
.cert-benefits i{
    color:#FFD54F;
    font-size:20px;
}
/*==========================
Responsive
==========================*/
@media(max-width:991px){
    .certification-section{
        padding:80px 0;
    }
    .section-title{
        font-size:38px;
    }
}
@media(max-width:767px){
    .certification-section{
        padding:60px 0;
    }
    .section-title{
        font-size:30px;
    }
    .section-desc{
        font-size:16px;
    }
    .cert-card{
        padding:30px 25px;
    }
    .cert-benefits{
        flex-direction:column;
        align-items:flex-start;
        padding:25px;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .cert-icon{
        width:75px;
        height:75px;
    }
    .cert-icon i{
        font-size:30px;
    }
    .cert-card h4{
        font-size:22px;
    }
}
/*=====================================
SUMMER INTERNSHIP
=====================================*/
.internship-section{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
    position:relative;
}
/*=====================================
Heading
=====================================*/
.section-tag{
    display:inline-block;
    color:var(--secondary);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.section-title{
    font-size:35px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:18px;
}
.section-title span{
    color:var(--secondary);
}
.section-desc{
    max-width:760px;
    margin:auto;
    color:#000000;
    line-height:1.9;
    font-size:16px;
}
/*=====================================
Roadmap
=====================================*/
.internship-roadmap{
    margin-top:80px;
    display:flex;
    justify-content:space-between;
    position:relative;
    gap:30px;
}
.internship-roadmap::before{
    content:"";
    position:absolute;
    top:45px;
    left:10%;
    width:80%;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    z-index:0;
}
/*=====================================
Step
=====================================*/
.internship-step{
    position:relative;
    flex:1;
    text-align:center;
    z-index:2;
    opacity:0;
    transform:translateY(60px);
    transition:.8s ease;
}
.internship-step.show{
    opacity:1;
    transform:translateY(0);
}
/*=====================================
Number
=====================================*/
.step-number{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:28px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
    margin-bottom:30px;
}
/*=====================================
Card
=====================================*/
.step-card{
    background:#fff;
    border-radius:20px;
    padding:0px 1px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    border:1px solid var(--border);
    height:100%;
}
.step-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:var(--secondary);
}
/*=====================================
Icon
=====================================*/
.step-icon{
    width:75px;
    height:75px;
    border-radius:50%;
    margin:auto;
    margin-bottom:20px;
    background:rgba(138,21,56,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.4s;
}
.step-icon i{
    font-size:30px;
    color:var(--secondary);
}
.step-card:hover .step-icon{
    background:var(--secondary);
    transform:rotate(360deg);
}
.step-card:hover .step-icon i{
    color:#fff;
}
/*=====================================
Text
=====================================*/
.step-card h4{
    color:var(--primary);
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
}
.step-card p{
    margin:0;
    color:#000000;
    line-height:1.8;
}
/*=====================================
Bottom CTA
=====================================*/
.internship-highlight{
    margin-top:80px;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:var(--shadow-lg);
}
.internship-highlight h3{
    font-size:32px;
    margin-bottom:15px;
    font-weight:700;
}
.internship-highlight p{
    margin:0;
    opacity:.95;
    line-height:1.8;
}
.internship-btn{
    background:#fff;
    color:var(--primary);
    padding:14px 34px;
    border-radius:50px;
    font-weight:600;
    transition:var(--transition);
}
.internship-btn:hover{
    background:var(--secondary);
    color:#fff;
}
/*=====================================
Responsive
=====================================*/
@media(max-width:991px){
    .internship-roadmap{
        flex-wrap:wrap;
    }
    .internship-roadmap::before{
        display:none;
    }
    .internship-step{
        flex:0 0 calc(50% - 15px);
    }
    .section-title{
        font-size:38px;
    }
}
@media(max-width:767px){
    .internship-section{
        padding:70px 0;
    }
    .internship-roadmap{
        flex-direction:column;
    }
    .internship-step{
        flex:100%;
    }
    .section-title{
        font-size:30px;
    }
    .internship-highlight{
        padding:35px 25px;
        text-align:center;
    }
    .internship-highlight h3{
        font-size:26px;
    }
    .text-lg-end{
        margin-top:25px;
        text-align:center !important;
    }
}
@media(max-width:576px){
    .section-title{
        font-size:26px;
    }
    .section-desc{
        font-size:15px;
    }
    .step-card{
        padding:25px 20px;
    }
    .step-number{
        width:75px;
        height:75px;
        font-size:24px;
    }
    .step-icon{
        width:65px;
        height:65px;
    }
    .step-icon i{
       font-size:26px;
    }
}
/*  LIVE PROJECTS */
.live-projects{
    padding:100px 0;
    background:linear-gradient(
        135deg,
        rgba(11,45,98,.04),
        rgba(138,21,56,.05)
    );
}

.section-tag{
    display:inline-block;
    background:rgba(11,45,98,.08);
    color:var(--primary);
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    font-size:.9rem;
}

.section-title{
    color:var(--primary);
    font-weight:700;
    font-size:35px;
}

.section-subtitle{
    max-width:700px;
    margin:auto;
    color:#000000;
}

.project-card{
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    border:1px solid var(--border);
    height:100%;
}

.project-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow-lg);
}

.project-image{
    position:relative;
    overflow:hidden;
}

.project-image img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.6s ease;
}

.project-card:hover img{
    transform:scale(1.08);
}

.live-badge{
    position:absolute;
    top:15px;
    right:15px;
    background:var(--secondary);
    color:#fff;
    padding:8px 14px;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}

.live-badge span{
    width:10px;
    height:10px;
    background:#00ff55;
    border-radius:50%;
    animation:pulse 1.5s infinite;
}

.project-content{
    padding:25px;
}

.project-title{
    color:var(--primary);
    font-weight:600;
    margin-bottom:12px;
}

.project-desc{
    color:#666;
    margin-bottom:20px;
}

.project-tech{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.project-tech span{
    background:rgba(11,45,98,.08);
    color:var(--primary);
    padding:6px 14px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:500;
}

.project-btn{
    text-decoration:none;
    background:var(--secondary);
    color:#fff;
    padding:12px 22px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    transition:var(--transition);
}

.project-btn:hover{
    background:var(--primary);
    color:#fff;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(0,255,85,.7);
    }
    70%{
        box-shadow:0 0 0 10px rgba(0,255,85,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(0,255,85,0);
    }
}

/* Scroll Reveal Animation */
.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}
/* =========================
   RESPONSIVE DESIGN
========================= */

/* Large Tablets */
@media (max-width: 991.98px) {

    .live-projects{
        padding:80px 0;
    }

    .project-image img{
        height:220px;
    }

    .project-content{
        padding:20px;
    }

    .project-title{
        font-size:1.2rem;
    }

    .project-desc{
        font-size:.95rem;
    }
}

/* Tablets */
@media (max-width: 767.98px) {

    .live-projects{
        padding:70px 0;
    }

    .section-tag{
        font-size:.8rem;
        padding:7px 16px;
    }

    .section-title{
        font-size:2rem;
    }

    .section-subtitle{
        font-size:.95rem;
        padding:0 10px;
    }

    .project-image img{
        height:210px;
    }

    .project-content{
        padding:18px;
    }

    .project-tech{
        gap:8px;
    }

    .project-tech span{
        font-size:.8rem;
        padding:5px 12px;
    }

    .project-btn{
        width:100%;
        justify-content:center;
        padding:12px 18px;
    }
}

/* Mobile Devices */
@media (max-width: 575.98px) {

    .live-projects{
        padding:60px 0;
    }

    .section-title{
        font-size:1.8rem;
    }

    .section-subtitle{
        font-size:.9rem;
        line-height:1.7;
    }

    .project-card{
        border-radius:12px;
    }

    .project-image img{
        height:190px;
    }

    .project-content{
        padding:16px;
    }

    .project-title{
        font-size:1.1rem;
    }

    .project-desc{
        font-size:.9rem;
        margin-bottom:15px;
    }

    .project-tech{
        gap:6px;
        margin-bottom:18px;
    }

    .project-tech span{
        font-size:.75rem;
        padding:5px 10px;
    }

    .live-badge{
        top:10px;
        right:10px;
        padding:6px 12px;
        font-size:.75rem;
    }

    .project-btn{
        width:100%;
        font-size:.9rem;
        padding:11px 15px;
    }
}

/* Small Mobile Devices */
@media (max-width: 375px) {

    .section-title{
        font-size:1.6rem;
    }

    .project-image img{
        height:170px;
    }

    .project-content{
        padding:14px;
    }

    .project-tech span{
        font-size:.7rem;
        padding:4px 8px;
    }
}

/* ==========================
   CAPSTONE PROJECT SECTION
========================== */

.capstone-project{
    padding:100px 0;
    background:var(--light);
    overflow:hidden;
}

.capstone-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(138,21,56,.08);
    color:var(--secondary);
    font-weight:600;
    font-size:.9rem;
}

.capstone-title{
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;
    font-size: 35px;
}

.capstone-text{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

.project-highlights{
    margin-bottom:35px;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
    color:var(--gray);
    font-weight:500;
}

.highlight-item i{
    color:var(--secondary);
    font-size:1.1rem;
}

.capstone-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.btn-primary-custom{
    background:var(--secondary);
    color:var(--white);
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
    transition:var(--transition);
    font-weight:500;
}

.btn-primary-custom:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-3px);
}

.btn-outline-custom{
    border:2px solid var(--primary);
    color:var(--primary);
    text-decoration:none;
    padding:12px 28px;
    border-radius:8px;
    transition:var(--transition);
    font-weight:500;
}

.btn-outline-custom:hover{
    background:var(--primary);
    color:#fff;
}

/* Right Card */

.capstone-card{
    position:relative;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    padding:20px;
    transition:.5s ease;
}

.capstone-card:hover{
    transform:translateY(-10px);
}

.capstone-image{
    border-radius:15px;
    width:100%;
    display:block;
}

.project-status{
    position:absolute;
    top:30px;
    right:30px;
    background:var(--secondary);
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}

.project-status span{
    width:10px;
    height:10px;
    background:#00ff66;
    border-radius:50%;
    animation:pulse 1.5s infinite;
}

/* Floating Elements */

.floating-circle{
    position:absolute;
    border-radius:50%;
    z-index:0;
}

.circle-one{
    width:100px;
    height:100px;
    background:rgba(11,45,98,.08);
    top:-20px;
    left:-20px;
    animation:floatY 4s ease-in-out infinite;
}

.circle-two{
    width:140px;
    height:140px;
    background:rgba(138,21,56,.08);
    bottom:-40px;
    right:-40px;
    animation:floatY 5s ease-in-out infinite;
}

/* Animations */

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(0,255,102,.7);
    }
    70%{
        box-shadow:0 0 0 10px rgba(0,255,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(0,255,102,0);
    }
}

@keyframes floatY{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

/* Reveal Animation */

.reveal-left,
.reveal-right{
    opacity:0;
    transition:1s ease;
}

.reveal-left{
    transform:translateX(-60px);
}

.reveal-right{
    transform:translateX(60px);
}

.reveal-left.active,
.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

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

@media (max-width:991px){

    .capstone-project{
        padding:80px 0;
    }

    .capstone-title{
        text-align:center;
    }

    .capstone-badge{
        margin:auto;
    }

    .capstone-text{
        text-align:center;
    }

    .project-highlights{
        max-width:500px;
        margin:0 auto 30px;
    }

    .capstone-buttons{
        justify-content:center;
        margin-bottom:20px;
    }
}

@media (max-width:767px){

    .capstone-project{
        padding:70px 0;
    }

    .capstone-title{
        font-size:2rem;
    }

    .capstone-card{
        padding:15px;
    }

    .project-status{
        top:20px;
        right:20px;
        font-size:.75rem;
    }

    .btn-primary-custom,
    .btn-outline-custom{
        width:100%;
        text-align:center;
    }
}

@media (max-width:575px){

    .capstone-project{
        padding:60px 0;
    }

    .capstone-title{
        font-size:1.8rem;
    }

    .capstone-text{
        font-size:.95rem;
    }

    .highlight-item{
        font-size:.9rem;
    }
}

/* ===================================
   INTERNATIONAL EXPOSURE
=================================== */

.international-exposure{
    padding:100px 0;
    background:linear-gradient(
        135deg,
        rgba(11,45,98,.04),
        rgba(138,21,56,.05)
    );
    overflow:hidden;
}

.exposure-tag{
    display:inline-block;
    background:rgba(138,21,56,.1);
    color:var(--secondary);
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    font-size:.9rem;
}

.exposure-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:var(--primary);
    margin-top:15px;
    font-size: 35px;
}

.exposure-subtitle{
    max-width:750px;
    margin:15px auto 0;
    color:#666;
    line-height:1.8;
}

/* Cards */

.exposure-card{
    background:var(--white);
    padding:35px 25px;
    border-radius:var(--radius);
    text-align:center;
    height:100%;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.exposure-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    transform:scaleX(0);
    transition:.4s;
}

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

.exposure-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.exposure-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(11,45,98,.08);
    color:var(--primary);
    font-size:2rem;
    transition:.4s;
}

.exposure-card:hover .exposure-icon{
    background:var(--secondary);
    color:#fff;
    transform:rotateY(180deg);
}

.exposure-card h4{
    color:var(--primary);
    margin:20px 0 12px;
    font-weight:600;
}

.exposure-card p{
    color:#666;
    margin-bottom:0;
}

/* Highlight Box */

.global-highlight{
    margin-top:60px;
    background:var(--primary);
    padding:40px;
    border-radius:20px;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.global-highlight::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-100px;
    right:-100px;
}

.global-highlight h3{
    font-weight:700;
    margin-bottom:10px;
}

.global-highlight p{
    margin-bottom:0;
    opacity:.9;
}

.global-btn{
    display:inline-block;
    background:var(--secondary);
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
    font-weight:600;
    transition:var(--transition);
}

.global-btn:hover{
    background:#fff;
    color:var(--primary);
}

/* ==========================
   ANIMATIONS
========================== */
/* 
.reveal-up{
    opacity:0;
    transform:translateY(60px);
    transition:all .9s ease;
} */

/* .reveal-scale{
    opacity:0;
    transform:scale(.85);
    transition:all .9s ease;
} */

.reveal-up.active,
.reveal-scale.active{
    opacity:1;
    transform:none;
}

/* Floating animation */

.exposure-icon{
    animation:floatIcon 4s ease-in-out infinite;
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

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

@media (max-width:991px){

    .international-exposure{
        padding:80px 0;
    }

    .global-highlight{
        text-align:center;
    }

    .global-btn{
        margin-top:20px;
    }
}

@media (max-width:767px){

    .international-exposure{
        padding:70px 0;
    }

    .exposure-card{
        padding:30px 20px;
    }

    .global-highlight{
        padding:30px;
    }
}

@media (max-width:575px){

    .international-exposure{
        padding:60px 0;
    }

    .exposure-title{
        font-size:1.8rem;
    }

    .exposure-subtitle{
        font-size:.95rem;
    }

    .global-highlight{
        padding:25px;
    }

    .global-btn{
        width:100%;
        text-align:center;
    }
}

/* ===================================
   CAREER OUTCOMES
=================================== */

.career-outcomes{
    padding:50px 0;
    background:linear-gradient(
        135deg,
        rgba(11,45,98,.04),
        rgba(138,21,56,.05)
    );
    overflow:hidden;
}

.career-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(138,21,56,.08);
    color:var(--secondary);
    font-weight:600;
    font-size:.9rem;
}

.career-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:var(--primary);
    margin-top:15px;
    font-size: 35px;
}

.career-subtitle{
    max-width:750px;
    margin:15px auto 0;
    color:#666;
    line-height:1.8;
}

/* Statistics */

.career-stat-card{
    background:var(--white);
    padding:35px 20px;
    text-align:center;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    transition:var(--transition);
    height:100%;
}

.career-stat-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.stat-number{
    font-size:2.8rem;
    font-weight:700;
    color:var(--secondary);
    line-height:1;
}

.stat-number::after{
    content:"+";
}

.stat-label{
    margin-top:10px;
    color:var(--primary);
    font-weight:600;
}

/* Career Cards */

.career-card{
    background:#fff;
    border-radius:var(--radius);
    padding:35px 25px;
    text-align:center;
    height:100%;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.career-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.career-icon{
    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    background:rgba(11,45,98,.08);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    margin-bottom:20px;
    transition:.4s ease;
}

.career-card:hover .career-icon{
    background:var(--secondary);
    color:#fff;
    transform:rotateY(180deg);
}

.career-card h4{
    color:var(--primary);
    font-weight:600;
    margin-bottom:15px;
}

.career-card p{
    color:#666;
    margin-bottom:0;
}

/* CTA */

.career-cta{
    margin-top:60px;
    background:var(--primary);
    color:#fff;
    padding:40px;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}

.career-cta::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-120px;
    right:-120px;
}

.career-cta h3{
    font-weight:700;
    margin-bottom:10px;
}

.career-cta p{
    margin-bottom:0;
    opacity:.9;
}

.career-btn{
    display:inline-block;
    text-decoration:none;
    background:var(--secondary);
    color:#fff;
    padding:14px 28px;
    border-radius:8px;
    font-weight:600;
    transition:var(--transition);
}

.career-btn:hover{
    background:#fff;
    color:var(--primary);
}

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

.reveal-top,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-bottom,
.reveal-scale{
    opacity:0;
    transition:all .9s ease;
}

.reveal-top{
    transform:translateY(-60px);
}

.reveal-up{
    transform:translateY(60px);
}

.reveal-left{
    transform:translateX(-60px);
}

.reveal-right{
    transform:translateX(60px);
}

.reveal-bottom{
    transform:translateY(80px);
}

.reveal-scale{
    transform:scale(.8);
}

.reveal-top.active,
.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.reveal-bottom.active,
.reveal-scale.active{
    opacity:1;
    transform:none;
}

/* Floating Icon Animation */

.career-icon{
    animation:floatCareer 4s ease-in-out infinite;
}

@keyframes floatCareer{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* Responsive */

@media(max-width:991px){

    .career-outcomes{
        padding:80px 0;
    }

    .career-cta{
        text-align:center;
    }

    .career-btn{
        margin-top:20px;
    }
}

@media(max-width:767px){

    .career-outcomes{
        padding:70px 0;
    }

    .career-stat-card,
    .career-card{
        padding:30px 20px;
    }

    .stat-number{
        font-size:2.3rem;
    }

    .career-cta{
        padding:30px;
    }
}

@media(max-width:575px){

    .career-outcomes{
        padding:60px 0;
    }

    .career-title{
        font-size:1.8rem;
    }

    .career-subtitle{
        font-size:.95rem;
    }

    .career-btn{
        width:100%;
        text-align:center;
    }
}


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

.faq-section{
    padding:30px 0;
    background:linear-gradient(
        135deg,
        rgba(11,45,98,.04),
        rgba(138,21,56,.05)
    );
    overflow:hidden;
}

.faq-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(138,21,56,.08);
    color:var(--secondary);
    font-weight:600;
    font-size:.9rem;
}

.faq-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:var(--primary);
    margin-top:15px;
    font-size: 35px;
}

.faq-subtitle{
    max-width:750px;
    margin:15px auto 0;
    color:#666;
    line-height:1.8;
}

/* Accordion */

.custom-faq .accordion-item{
    border:none;
    border-radius:12px !important;
    margin-bottom:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.custom-faq .accordion-item:hover{
    transform:translateY(-3px);
}

.custom-faq .accordion-button{
    background:#fff;
    color:var(--primary);
    font-weight:600;
    padding:22px 25px;
    box-shadow:none !important;
    border:none;
}

.custom-faq .accordion-button:not(.collapsed){
    background:var(--primary);
    color:#fff;
}

.custom-faq .accordion-button::after{
    filter:brightness(0);
}

.custom-faq .accordion-button:not(.collapsed)::after{
    filter:brightness(0) invert(1);
}

.custom-faq .accordion-body{
    padding:20px 25px;
    color:#666;
    line-height:1.8;
}

/* CTA Box */

.faq-contact{
    margin-top:50px;
    background:var(--primary);
    color:#fff;
    padding:40px;
    border-radius:20px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.faq-contact::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-100px;
    right:-100px;
}

.faq-contact h4{
    font-weight:700;
    margin-bottom:10px;
}

.faq-contact p{
    opacity:.9;
    margin-bottom:20px;
}

.faq-btn{
    display:inline-block;
    text-decoration:none;
    background:var(--secondary);
    color:#fff;
    padding:14px 30px;
    border-radius:8px;
    font-weight:600;
    transition:var(--transition);
    
}

.faq-btn:hover{
    background:#fff;
    color:var(--primary);
}
#toggleFaqBtn{
    background-color: var(--secondary);
}
/* =========================
   ANIMATIONS
========================= */

.reveal-up,
.reveal-scale{
    opacity:0;
    transition:all .8s ease;
}

.reveal-up{
    transform:translateY(60px);
}

.reveal-scale{
    transform:scale(.85);
}

.reveal-up.active,
.reveal-scale.active{
    opacity:1;
    transform:none;
}

.extra-faq {
    display: none;
}
.extra-faq {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}
.extra-faq {
    display: none;
}

.extra-faq.show-faq {
    display: block;
}
.extra-faq.show {
    max-height: 500px;
    opacity: 1;
}

/* Floating Effect */

.custom-faq .accordion-item{
    animation:floatFaq 4s ease-in-out infinite;
}

@keyframes floatFaq{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
}

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

@media (max-width:991px){

    .faq-section{
        padding:80px 0;
    }

    .custom-faq .accordion-button{
        padding:18px 20px;
    }
}

@media (max-width:767px){

    .faq-section{
        padding:70px 0;
    }

    .faq-contact{
        padding:30px;
    }

    .faq-title{
        font-size:2rem;
    }
}

@media (max-width:575px){

    .faq-section{
        padding:60px 0;
    }

    .faq-title{
        font-size:1.8rem;
    }

    .faq-subtitle{
        font-size:.95rem;
    }

    .custom-faq .accordion-button{
        font-size:.95rem;
        padding:16px 18px;
    }

    .custom-faq .accordion-body{
        padding:18px;
        font-size:.9rem;
    }

    .faq-btn{
        width:100%;
    }

    .faq-contact{
        padding:25px;
    }
}