/*======================================================
    CARD COMPONENTS
    HealthSurance Design System
======================================================*/

/*--------------------------------------
    Base Card
--------------------------------------*/

.card {
    background: var(--card);

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;

    transition: all .35s ease;
}

/*--------------------------------------
    Hover Effect
--------------------------------------*/

.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,.12);

}

/*--------------------------------------
    Card Body
--------------------------------------*/

.card-body {

    padding: 30px;

}

/*--------------------------------------
    Card Image
--------------------------------------*/

.card-image {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

/*--------------------------------------
    Card Title
--------------------------------------*/

.card-title {

    margin-bottom: 15px;

    font-size: 1.5rem;

    color: var(--text);

}

/*--------------------------------------
    Card Text
--------------------------------------*/

.card-text {

    color: var(--text-light);

    margin-bottom: 20px;

}

/*--------------------------------------
    Feature Card
--------------------------------------*/

.feature-card {

    text-align: center;

    padding: 40px 30px;

}

.feature-card img {

    width: 70px;

    margin: 0 auto 25px;

}

.feature-card h3 {

    margin-bottom: 15px;

}

/*--------------------------------------
    Plan Card
--------------------------------------*/

.plan-card {

    position: relative;

    padding: 45px 35px;

    text-align: center;

}

.plan-card h3 {

    margin-bottom: 10px;

}

.plan-card .price {

    font-size: 3rem;

    font-weight: 700;

    color: var(--primary);

    margin: 20px 0;

}

.plan-card ul {

    margin: 30px 0;

}

.plan-card ul li {

    margin-bottom: 12px;

    color: var(--text-light);

}

/*--------------------------------------
    Featured Plan
--------------------------------------*/

.plan-card.active {

    border: 2px solid var(--primary);

    transform: scale(1.03);

}

.plan-card.active:hover {

    transform: translateY(-8px) scale(1.03);

}

/*--------------------------------------
    Hospital Card
--------------------------------------*/

.hospital-card {

    text-align: center;

    padding: 25px;

}

.hospital-card img {

    width: 100%;

    height: 170px;

    object-fit: cover;

    border-radius: 12px;

    margin-bottom: 20px;

}

/*--------------------------------------
    Testimonial Card
--------------------------------------*/

.testimonial-card {

    padding: 35px;

}

.testimonial-card .profile {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}

.testimonial-card .profile img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    object-fit: cover;

}

.testimonial-card h4 {

    margin-bottom: 5px;

}

.testimonial-card p {

    font-style: italic;

}