/* ===================== */
/* RTL OVERRIDES         */
/* ===================== */
/*
 * IMPORTANT: dir="rtl" on the HTML element already auto-reverses:
 *   - flex-direction: row (items flow right-to-left)
 *   - inline content direction
 *
 * This file ONLY overrides physical CSS properties that do NOT auto-flip:
 *   - text-align: left/right
 *   - margin-left/right, padding-left/right
 *   - border-left/right
 *   - left/right positioning
 *   - background-position
 *   - linear-gradient directions
 *   - transform directions (arrows)
 */

/* Arabic font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap');

html[dir="rtl"] {
    --font-primary: 'Co Headline', 'Segoe UI';
}

    /* Global text direction */
    html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
    }

    /* ===================== */
    /* HEADER                */
    /* ===================== */
    html[dir="rtl"] .header__search input {
        text-align: right;
    }

    /* ===================== */
    /* MEGA MENU             */
    /* ===================== */
    html[dir="rtl"] .mega-menu__item {
        border-right: none;
        border-left: 1px solid var(--gray-300);
    }

html[dir="rtl"] .mega-menu__item:last-child {
  border-left: none;
}
 html[dir="rtl"] .midcaps-hero__content
 {
     margin-right : 12px;
     margin-left : 0px;
 }
    html[dir="rtl"] .egfound-btn-arrow {
        transform: rotate(180deg);
    }
    html[dir="rtl"] .cm-inquiry__submit-arrow {
        transform: rotate(180deg);
        margin-top: 14px;
    }
    html[dir="rtl"] .mgl-content__btn-arrow {
        transform: rotate(180deg);
    }
    /* ===================== */
    /* HERO                  */
    /* ===================== */
    html[dir="rtl"] .hero__text {
        text-align: right;
    }

    /* Flip hero person image to face the text */
    html[dir="rtl"] .hero__image-frame {
        transform: scaleX(-1);
    }

    /* Business hero overlay gradient flipped */
    html[dir="rtl"] .hero__bg-overlay {
        background: linear-gradient(to left, rgba(0, 59, 112, 0.7) 35%, rgba(0, 29, 55, 0.35));
    }
    html[dir="rtl"] .mgl-hero__overlay {
        background: linear-gradient(to left,rgba(0, 59, 112, 1)8.98%, rgba(0, 59, 112, 0));
    }
    /* ===================== */
    /* SECTION               */
    /* ===================== */
    html[dir="rtl"] .section__title--left {
        text-align: right;
    }

    /* ===================== */
    /* PRODUCTS              */
    /* ===================== */
    html[dir="rtl"] .product-card {
        border-right: 1px solid #E8E8E8;
        border-left: none;
    }

        html[dir="rtl"] .product-card:last-child {
            border-left: 1px solid #E8E8E8;
        }

        html[dir="rtl"] .product-card:first-child {
            border-right: 1px solid #E8E8E8;
        }

        html[dir="rtl"] .product-card.active + .product-card {
            border-left-color: transparent;
            border-right-color: var(--primary-teal);
        }

    html[dir="rtl"] #businessContent .product-card.active + .product-card {
        border-right-color: var(--primary-navy);
    }

    /* ===================== */
    /* CHANNELS              */
    /* ===================== */
    html[dir="rtl"] .channel-card__overlay {
        text-align: right;
    }

    html[dir="rtl"] .channel-card--small .channel-card__text {
        text-align: right;
        padding: 20px 0 20px 24px;
    }

    html[dir="rtl"] .channel-card--reversed .channel-card__text {
        padding: 20px 24px 20px 0;
    }

    /* ===================== */
    /* FORMS                 */
    /* ===================== */
    html[dir="rtl"] .form-input,
    html[dir="rtl"] .form-textarea,
    html[dir="rtl"] .form-select {
        text-align: right;
    }

    html[dir="rtl"] .form-select {
        background-position: left 16px center;
    }

    /* ===================== */
    /* ACCORDION             */
    /* ===================== */
    html[dir="rtl"] .accordion__title::before {
        margin-right: 0;
        margin-left: 8px;
    }

    /* ===================== */
    /* BRANCHES              */
    /* ===================== */
    html[dir="rtl"] .branches-panel {
        left: 50%;
        
    }

    html[dir="rtl"] .branch-item__content {
        text-align: right;
    }

    html[dir="rtl"] .branch-item__tag + .branch-item__tag::before {
        margin-right: 0;
        margin-left: 4px;
    }

    /* ===================== */
        /* PAGE HERO             */
        /* ===================== */
        html[dir="rtl"] .page-hero__overlay {
            background: linear-gradient(to left, rgba(0, 46, 95, 0.65), rgba(0, 46, 95, 0.2));
        }
        /* ===================== */
        /* TARIFF                */
        /* ===================== */
        html[dir="rtl"] .tariff-card__body {
            text-align: right;
        }

        html[dir="rtl"] .tariff-card__download {
            margin-left: 0;
            margin-right: 16px;
        }
        /* ===================== */
        /* COMPLAINT / CONTACT   */
        /* ===================== */
        html[dir="rtl"] .complaint-layout {
            direction: rtl;
        }

        html[dir="rtl"] .contact-image-wrap .hero__image-frame {
            transform: none;
        }

        html[dir="rtl"] .complaint-form .form-group--radio-centered {
            text-align: right;
        }

            html[dir="rtl"] .complaint-form .form-group--radio-centered .form-radio-group {
                direction: rtl;
                justify-content: flex-start;
            }

        html[dir="rtl"] .commitment-center {
            text-align: right;
        }

        html[dir="rtl"] .commitment-grid {
            text-align: right;
        }
        /* ===================== */
        /* CURRENCY              */
        /* ===================== */
        html[dir="rtl"] .currency-arrow svg {
            transform: scaleX(-1);
        }
        /* ===================== */
        /* QUICK LINKS (Mobile)  */
        /* ===================== */
        html[dir="rtl"] .quick-link-card__text {
            text-align: right;
        }

        html[dir="rtl"] .quick-link-card__arrow {
            transform: scaleX(-1);
        }
        /* ===================== */
        /* BREADCRUMB            */
        /* ===================== */
        /* Chevrons point the way the trail reads */
        html[dir="rtl"] .egb-breadcrumb__sep {
            transform: scaleX(-1);
        }

        /* inset-inline-end already moved the art to the left edge. transform mirrors the
           painted result, mask included, so the fade flips with it — the gradient itself
           must NOT be redeclared here or the two flips would cancel out. */
        html[dir="rtl"] .egb-breadcrumb::after {
            transform: scaleX(-1);
        }

        /* ===================== */
        /* FOOTER                */
        /* ===================== */
        html[dir="rtl"] .footer__links-col {
            text-align: right;
        }

        html[dir="rtl"] .footer__social {
            text-align: right;
        }
        /* Flip the gradient direction so the dark stop stays on the leading edge in RTL.
           Only the angle is overridden, so the personal/business colour choice in
           components.css keeps working (including the business-active homepage tab). */
        html[dir="rtl"] .site-footer {
            --footer-angle: 270deg;
        }
.installments-card-badge {
    left: unset;
    right: 16px;
}
/* ===================== */
/* RESPONSIVE RTL        */
/* ===================== */
@media (max-width: 768px) {
    html[dir="rtl"] .hero__content {
        text-align: center;
    }

    html[dir="rtl"] .hero__text {
        text-align: center;
    }

    html[dir="rtl"] .channel-card--small .channel-card__text {
        padding: 16px;
    }

    html[dir="rtl"] .channel-card--reversed .channel-card__text {
        padding: 16px;
    }

    html[dir="rtl"] .footer-subscribe__inner {
        text-align: right;
    }

    html[dir="rtl"] .terms-card {
        text-align: right;
    }
}



        .top-menu-web {
            padding-right: 20px !important;
            padding-left: 0px !important;
        }

        .vh-item {
            border-left: 0px solid !important;
            border-right: 4px solid var(--color-accent);
        }



        .sustain_report-download {
            left: 13px !important;
            position: absolute;
            bottom: 13px !important;
            right: unset !important;
        }

        .AboutHistory_Values_Card {
            border-left: unset !important;
            border-right: 3px solid #8BDC64;
            padding-left: unset !important;
            padding-right: 16px;
        }

        .CustomerRights_MobileSection {
            align-items: flex-end !important;
            text-align: right !important;
        }

        .CustomerRights_form-panel .CustomerRights_MobileSection.CustomerRights_terms-title,
        .CustomerRights_form-panel .CustomerRights_MobileSection .CustomerRights_mobile-headline {
            text-align: right !important;
        }

        .AboutHistory_History_Card {
            border-left: unset !important;
            border-right: 3px solid #8BDC64;
            padding-right: 20px;
        }

        .MenuBtn.ms-4 {
            margin-left: unset !important;
        }
.fi-link-card {
    background-position: left bottom !important; 
}
/*        .Hero_ImgWrapper img {
            transform: scaleX(-1);
        }*/
.back-to-top {
    left: 21px;
    right: unset;
}



       /* .FlipImg {
            transform: scaleX(-1);
        }*/

        .Section1-img {
            margin-top: 110px;
        }

        .ch-call-bubble {
            direction: ltr;
        }

        @media (max-width: 1024px) {
            .menu-arrows-row {
                display: flex !important;
                flex-direction: row-reverse;
            }
        }

        .channels-card-heading {
            line-height: 1.5 !important;
        }

        .Bluetitle {
            line-height: 1.5 !important;
        }

        .MenuBtn.ms-3 {
            margin-left: 0px !important;
        }

        .cards-intl-body {
            text-align: right !important;
        }

        .cards-reward-tier {
            text-align: right !important;
        }

        .cards-cards-nav {
            flex-direction: row-reverse;
        }

        .cards-reward-sub__steps li {
            padding: 0px 10px 10px 0px !important;
        }

        .Hero_Title_Accent {
            display: unset;
        }

        .LeadCards_Card::before {
            left: -70px;
            right: unset !important;
        }

.payroll-inquiry__input-egp input {
    flex: 1;
    border-radius: 0px 8px 8px 0px !important;
}
.payroll-inquiry__egp-badge {
  
    border-radius: 8px 0px 0px 8px !important;
   
}
.payroll-inquiry__input-egp input {
    flex: 1;
    border-radius: 0px 8px 8px 0px !important;
}
    @media (max-width: 768px) {
        .AboutHistory_Values_Card {
            padding-right: 16px !important;
            padding-left: unset !important;
        }

        .slider-arrow-bar {
            flex-direction: row-reverse;
        }

        .ShareHolder_ArrowBar {
            flex-direction: row-reverse;
        }

        .loans-tabs__item {
            padding: 13px 16px 13px 13px;
        }

        .segments-page[dir="rtl"] .syn-learn-more {
            margin: auto;
        }

        .dcb-hero__cards {
            margin: auto;
        }

        .segments-page[dir="rtl"] .cl-card__offer-item {
            justify-content: start;
            flex-direction: row-reverse;
        }

        .segments-page[dir="rtl"] .cl-card__header {
            flex-direction: row-reverse;
        }

        .segments-page[dir="rtl"] .gtb-card__header {
            flex-direction: row !important;
        }
    }


    a.sp-learn-more span {
        margin-left: unset !important;
    }

    .bh-panel-segments {
        background: linear-gradient( to right, #00C4B3, #00BAAF, #00B0AA, #00A5A6, #009BA1, #00929C, #008898, #007E93, #00748E, #006B89, #006184, #00577F, #00577F, #004E7A, #004575, #003B70 ) !important;
    }

    .syn-learn-more {
        margin: auto;
        margin-left: unset;
        flex-direction: row !important;
    }

        .syn-learn-more svg {
            transform: rotate(180deg);
        }

    /* .panel-toggle-btn removed from here: this block is inside
       @media (max-width: 768px) but the 630px is the DESKTOP offset, so it was
       placing the phone button off to the side and fighting the real mobile rule
       further down. Desktop RTL now lives in BranchesATMs.css beside its LTR
       counterpart, and the mobile ones are already there too. */



    .cl-card__header.cl-card__header--rtl {
        flex-direction: row-reverse;
    }

    .gtb-card__header {
        flex-direction: row-reverse;
    }

    .gtb-card--rtl.gtb-card__header {
        flex-direction: row-reverse !important;
    }

    /* Collapsed state also removed: BranchesATMs.css already sets right:0 with
       left:auto for RTL at every width, which this duplicated without the
       left reset. */

    .midcaps-overview__title {
        line-height: 1.6;
    }

    .midcaps-overview__elig {
        white-space: normal;
    }

    .midcaps-overview-card {
        line-height: 1.4 !important;
    }

    .midcaps-hero {
        background: linear-gradient( -90deg, #003B70 0%, #003B70BD 50%, #003B7000 100% ) !important;
    }

/*    .sme-form button::after {
        margin-top: 11px;
        transform: rotate(180deg);
        content: "→";
    }*/

    .sme-section.sme-cbe .sme-cbe-text {
        border-right: 4px solid rgba(139, 220, 100, 1);
        border-left: unset !important;
    }

    .bh-badge .bh-badge--light .badge-AlignLeft {
        margin-right: unset;
        margin-left: auto;
    }


    .BadgeMargin {
        margin-right: unset !important;
        margin-left: auto;
    }

    @media (max-width: 768px) { 
        .pp-partners__nav {
            flex-direction: row-reverse;
        }
        .dcb-btn {
            margin-right: unset !important;
            margin-left: auto !important;
            width: fit-content !important;
        }

        .midcaps-overview__content > p {
            line-height: 1.6;
            text-align: center;
        }

        .midcaps-hero {
            background: linear-gradient(180deg, #003B70 0%, #003B70BD 50%, #003B7000 100%) !important;
        }

        .sme-section.sme-cbe .sme-card div > p > span {
            font-weight: 300 !important;
            line-height: 1.6 !important;
        }

        .sme-section.sme-smart p {
            color: #6A7282 !important;
            line-height: 1.6;
            font-weight: 300;
        }

        .sme-section.sme-cards .sme-grid-2 .sme-card h3 {
            margin-bottom: 18px !important;
            line-height: 1.6 !important;
        }

        .sme-section {
            margin: 40px 0px !important;
        }

        .midcaps-btn--green {
            width: 215px !important;
        }

        /* .panel-toggle-btn rules removed from here. BranchesATMs.css already
           carries an LTR and a matching RTL rule for this breakpoint, with the
           same top:222px and mirrored offsets. These copies used !important, so
           they overrode that pair — and the rotate(-180deg) fought the chevron
           handling there. All three breakpoints are now owned in one file, which
           is what stops the button moving as the zoom crosses them. */


        .sme-section.sme-smart .sme-smart-features ul {
            padding-right: 0;
        }

        .payroll-accordion__trigger {
            text-align: right !important;
        }
    }


.dcb-btn{
    margin-right:unset;
    margin-left:auto;
}
.dcm-inquiry__select {
    background-position: left 14px center !important;
    padding-right: 10px !important;
}

.RotateRTL {
    transform: rotate(180deg);
    margin-top: 8px;
}
.sme-section.sme-cbe .sme-card h2 {
    text-align: right;
}


.cards-nav-card {
    background-position: left bottom;
}
/*.Hero_ImgWrapper_Overlay {
    transform: scaleX(-1);
}*/
/*.Hero_ImgWrapper {
    transform: scaleX(-1);
}*/
page-hero__overlay {
    transform: scaleX(-1);
}
/*.accounts-form__radio-label {
    margin-left: auto;
}*/
.loans-product-card__desc {
    text-align: right;
    
}
@media (max-width: 900px) {
  
    .ib-sharia-badge {
        margin-right: unset;
        margin-left: auto;
    }
    .ib-product-card__icon-wrap {
        margin-right: unset;
        margin-left: auto;
    }
}
.rtl-placeholder::placeholder {
    text-align: right !important;
    direction: rtl;
}
.rtl-placeholder{
    text-align:right;
}



.Hero_Title{
    line-height:1.4 !important;
}