html[dir="rtl"] .site-banner {
    background-image: url(../images/banner-bg-ar.png);
}

html[dir="rtl"] .happy-meal-box {
    background-image: url(../images/happy-meal-box-ar.png);
    background-position: left bottom;
}

html[dir="rtl"] .modal-header .btn-close {
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) 
            auto
            calc(-.5 * var(--bs-modal-header-padding-x)) 
            calc(-.5 * var(--bs-modal-header-padding-y));
}

html[dir="rtl"] .countdown-box-wrap{
    flex-direction: row-reverse;
    justify-content: right;
}

@media (min-width :767px) {
    html[dir="rtl"] .partner-logos {
        right: 0px;
        margin-right: 51px;
    }

    html[dir="rtl"] .countdown-wrap {
        z-index: 10;
        margin-top: 7vh;
        margin-right: 10vw;
        position: absolute;
    }
}

@media (max-width:765px) {
    html[dir="rtl"] .site-banner {
        background: url(../images/banner-bg-mobile-ar.png) lightgray 50% / cover no-repeat;
        background-size: 100% 100%;
    }

    html[dir="rtl"] .happy-meal-box {
        background: url(../images/happy-meal-box-ar.png);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
}

@media (max-width:580px) {
    html[dir="rtl"] .site-banner {
        background: url(../images/banner-bg-mobile-ar.png) lightgray 50% / cover no-repeat;
    }

    html[dir="rtl"] .happy-meal-box {
        background: url(../images/happy-meal-box-mobile-ar.png) transparent 50% / cover no-repeat;
    }
}