/*=========================================================
    HP-EXAM-PRO
    CARDS.CSS
==========================================================*/

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

.card{
    position:relative;
    display:flex;
    flex-direction:column;

    background:var(--white);

    border:none;

    border-radius:var(--radius);

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

    overflow:hidden;

    transition:var(--transition);
}

.card:hover{

    transform:translateY(-8px);

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

}

.card-header{

    padding:1rem 1.5rem;

    background:var(--white);

    border-bottom:1px solid var(--gray-200);

}

.card-body{

    flex:1;

    padding:1.5rem;

}

.card-footer{

    padding:1rem 1.5rem;

    background:var(--gray-100);

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

}

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

.card-img{

    overflow:hidden;

}

.card-img img{

    width:100%;

    transition:.5s;

}

.card:hover .card-img img{

    transform:scale(1.08);

}

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

.feature-card{

    text-align:center;

    padding:2rem;

}

.feature-card .icon{

    width:80px;

    height:80px;

    margin:auto auto 1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(13,110,253,.10);

    color:var(--primary);

    font-size:2rem;

}

.feature-card h4{

    margin-bottom:1rem;

}

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

.stat-card{

    text-align:center;

    padding:2rem;

}

.stat-card h2{

    color:var(--primary);

    margin-bottom:.5rem;

}

.stat-card p{

    margin:0;

}

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

.exam-card{

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

}

.exam-card .badge{

    position:absolute;

    top:20px;

    right:20px;

}

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

.dashboard-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:2rem;

}

.dashboard-card .icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:2rem;

    color:#fff;

}

.dashboard-card.primary .icon{

    background:var(--primary);

}

.dashboard-card.success .icon{

    background:var(--success);

}

.dashboard-card.warning .icon{

    background:var(--warning);

    color:#000;

}

.dashboard-card.danger .icon{

    background:var(--danger);

}

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

.profile-card{

    text-align:center;

    padding:2rem;

}

.profile-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    border:5px solid var(--gray-200);

}

.profile-card h4{

    margin-top:1rem;

}

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

.testimonial-card{

    padding:2rem;

}

.testimonial-card .quote{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-top:2rem;

}

.testimonial-user img{

    width:60px;

    height:60px;

    border-radius:50%;

}

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

.team-card{

    text-align:center;

}

.team-card img{

    width:100%;

}

.team-card .social{

    display:flex;

    justify-content:center;

    gap:.5rem;

    margin-top:1rem;

}

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

.pricing-card{

    text-align:center;

    padding:2.5rem;

}

.pricing-card .price{

    font-size:3rem;

    color:var(--primary);

    margin:1rem 0;

}

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

.faq-card{

    border-left:4px solid var(--primary);

}

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

.contact-card{

    text-align:center;

    padding:2rem;

}

.contact-card .icon{

    width:70px;

    height:70px;

    margin:auto auto 1rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(13,110,253,.10);

    color:var(--primary);

    font-size:2rem;

}

/*=========================================
    BORDER VARIANTS
=========================================*/

.card-primary{

    border-top:4px solid var(--primary);

}

.card-success{

    border-top:4px solid var(--success);

}

.card-warning{

    border-top:4px solid var(--warning);

}

.card-danger{

    border-top:4px solid var(--danger);

}

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

.glass-card{

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

    backdrop-filter:blur(15px);

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

}

/*=========================================
    HOVER EFFECTS
=========================================*/

.card-hover-shadow:hover{

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

}

.card-hover-scale:hover{

    transform:scale(1.03);

}

.card-hover-border:hover{

    border-color:var(--primary);

}

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

@media(max-width:768px){

    .dashboard-card{

        flex-direction:column;

        text-align:center;

        gap:1rem;

    }

    .feature-card,

    .pricing-card,

    .profile-card{

        padding:1.5rem;

    }

}