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

.card{

    position:relative;

    background:var(--surface);

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

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/* Decorative Gradient Line */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary),

        var(--accent)

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

}

.card:hover::before{

    transform:scaleX(1);

}
.card-header{

    padding:28px 28px 0;
}
.card-body{

    padding:28px;
}
.card-footer{

    padding:24px 28px;

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

}
.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    transition:.6s;

}

.card:hover .card-image img{

    transform:scale(1.08);

}
.card-title{

    color:var(--text);

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

}
.card-text{

    color:var(--text-light);

    line-height:1.8;

}
.glass-card{

    background:

    rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.4);

}
.feature-card{

    text-align:center;

    padding:40px 30px;

}
.feature-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:24px;

    background:#F5F0FF;

    color:var(--primary);

    font-size:28px;

    transition:var(--transition);

}

.card:hover .feature-icon{

    transform:rotate(8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:white;

}
.badge{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:#F5F0FF;

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:24px;
    transition:.35s;
    box-shadow:var(--shadow-sm);
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
}
.card, .program-card, .why-card{

    border-radius:var(--r-lg);
    transition:.35s ease;
    will-change:transform;

}

.card:hover,
.program-card:hover,
.why-card:hover{

    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);

}