.alphabet-btn {
    background: #FFFFFF;
    border: 1px solid var(--color-violet-100) !important;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 34% !important;
    color: var(--color-violet-400);
    transition: all 0.3s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .35rem .35rem 0;
    font-size: .875rem !important;
    cursor: pointer;
}
.alphabet-btn:hover, .alphabet-btn.active {
    background-color: var(--color-violet-400); ;
    color: #fff;

}

.appointment-banner {
    margin: 3rem 0 ;
    background-color: #54338e; /* ან გამოიყენე var(--color-primary-dark) თუ გაქვს */
    color: white;
    background-image: url("../media/img/medical-icons.png") !important;
    background-position: calc(100% + 2rem)  center !important;
    background-repeat: no-repeat !important;
    background-size: contain  !important;
    min-height: 100px;
}


.appointment-banner h5{
    font-size: 1rem !important;
    color: var(--color-primary-10) !important;
}