@import "alphabet-btn.css";
.bg-section-4{
    background-color: var(--color-violet-10) !important;
    border-top: 1px solid var(--color-violet-100) !important;
}


.bg-section-4 h4{
    color: var(--color-violet-500) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}
.bg-section-4 p{
    color: var(--color-violet-400) !important;
    font-size: .875rem !important;
}


.appointment-banner p{
    font-size: .875rem !important;
    color: var(--color-primary-50) !important;
}



.disease-card {
    transition: all .5s ease;
    background-color: var(--color-violet-100); ;
    aspect-ratio: 4.25 / 5;
    border-radius: 0.8rem !important;
    border: 1px solid var(--color-violet-300) !important;
}
.disease-card:hover {
    background-color: var(--color-violet-400) !important;
    color: #fff;
}
.disease-card:hover .text-muted {
    color: #e0e7ff !important;
}


.disease-card .badge{
    background-color: #f6f6fc  !important;
    color: var(--color-violet-400) !important;
    font-size: .75rem !important;
    font-weight: normal !important;
    padding: .35rem 1rem !important;
    border-radius: .5rem !important;
}


.disease-card:hover .badge{
var(--color-violet-400)
}


.more-link {
    width: 2rem;
    height: 2rem;
    background-color: rgba(255,255,255,0);
    color: transparent ;
    font-size: .875rem;
    transition: background 0.3s ease;
    text-decoration: none;
}

.disease-card:hover .more-link {
    background-color: rgba(255,255,255,0.2);
    color: #f6f6fc;
}

.more-link:hover {
    background-color: rgba(255,255,255,0.8);
    color: #f6f6fc;
}

.disease-card h4{
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-violet-500) !important;
}


.disease-card p{
    font-size: .875rem !important;
    color: var(--color-violet-400) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2rem !important;
    transition: all 0.2s ease-in-out;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

}
.disease-card:hover h4,
.disease-card:hover p{
    -webkit-line-clamp: 3;
    color: var(--color-violet-50) !important;

}