.background-card {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background: var(--secondary-color);

}

html[dir="rtl"] .background-card {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.staff-img {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

html[dir="rtl"] .staff-img {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.background-overlay {
    display: block;
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    transform: translate(0%, -50%);
    background: linear-gradient(to right,
            rgba(64, 85, 165, 1) 0%,
            rgba(64, 85, 165, 0.98) 60%,
            transparent 100%);
    color: white;
    height: 100%;
    z-index: 4;
    padding: 1rem;
    width: 80%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.arabic-version .book-appointment-container {
    flex-direction: row-reverse;
}
html[dir="rtl"] .background-overlay {
    display: block;
    position: absolute;
    top: 50%;
    inset-inline-start: 15%;
    transform: translate(0%, -50%);
    background: linear-gradient(to right,
            rgba(64, 85, 165, 1) 0%,
            rgba(64, 85, 165, 0.98) 60%,
            transparent 100%);
    color: white;
    height: 100%;
    z-index: 4;
    padding: 1rem;
    width: 80%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

}

.text-overlay {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 1.55rem;
    padding-right: 1.55rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 6;
    /* width:80%; */
}

/*------------------ book text --------------*/

@media (max-width: 991.89px) {
    .background-overlay {
        display: block;
        position: absolute;
        top: 60%;
        inset-inline-start: 0;
        transform: translate(0%, -62%);
        background: linear-gradient(to bottom,
                rgba(64, 85, 165, 1) 0%,
                rgba(64, 85, 165, 0.98) 60%,
                transparent 100%);
        color: white;
        height: 50%;
        z-index: 4;
        padding: 1rem;
        width: 100%;
        border-top-right-radius: 8px;
    }

    html[dir="rtl"] .background-overlay {
        display: block;
        position: absolute;
        top: 60%;
        inset-inline-start: 0;
        transform: translate(0%, -62%);
        background: linear-gradient(to bottom,
                rgba(64, 85, 165, 1) 0%,
                rgba(64, 85, 165, 0.98) 60%,
                transparent 100%);

        color: white;
        height: 50%;
        z-index: 4;
        padding: 1rem;
        width: 100%;
        border-top-left-radius: 8px;
    }

    .background-card {
        border-top-right-radius: 8px;
    }

    html[dir="rtl"] .background-card {
        border-top-left-radius: 8px;
    }

    .staff-img,
    html[dir="rtl"] .staff-img {
        border-bottom-right-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }
}