/* ============================================================
   SHARED VARIABLES
   ============================================================ */
:root {
    --color-white: #ffffff;
    --color-primary: #00B4A0;
    --color-secondary-dark: #003B70;
    --color-icon-bg: #E8F7F5;
    --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
    --SB-AccentGreen: #00c8a0;
    --SB-AccentGreenDark: #00a882;
    --SB-TextDark: #003B70;
    --SB-TagPillBg: rgba(0,200,160,0.1);
    --SB-TagPillText: #00a882;
    --SB-BtnBg: #00c8a0;
    --SB-BtnHoverBg: #00a882;
    --SB-ImgBg: #c8d8e8;
    --SB-BorderColor: #f0f5f9;
}

/* ============================================================
  BUSINESS HERO VARIABLES
   ============================================================ */

.business-hero {
    --hero-min-height: 590px;
    --hero-padding: 30px 32px 23px 32px;
    --hero-overlay-gradient: linear-gradient(to top, #003B70 8.98%, rgba(0, 59, 112, 0) 99.74%);
    --hero-overlay-gradient-rtl: linear-gradient(270deg, #003B70 0%, rgba(0,59,112,0.7) 59.49%, rgba(0,59,112,0) 100%);
    --hero-content-max-width: 675px;
    --hero-content-gap: 20px;
    --hero-accent-color: #00C4B3;
    --hero-text-color: #fff;
    --hero-title-size: 52px;
    --hero-title-weight: 400;
    --hero-title-line-height: 1.4;
    --hero-subtitle-size: 24px;
    --hero-subtitle-weight: 300;
    --hero-subtitle-line-height: 32px;
    --hero-actions-gap: 24px;
    --hero-actions-pb: 20px;
    --hero-btn-height: 44px;
    --hero-btn-radius: 999px;
    --hero-btn-padding: 0 20px 3px;
    --hero-btn-primary-bg: #7bdc4f;
    --hero-btn-primary-color: #fff;
    --hero-btn-outline-border: 1px solid #fff;
    --hero-btn-outline-color: #fff;
    --hero-font: Co Headline, sans-serif;
    --Arabic-hero-subtitle-line-height: 1.7;
    /* Mobile */
    --hero-mobile-padding: 60px 16px 0px 16px;
    --hero-mobile-min-height: 520px;
    --hero-mobile-title-size: 24px;
    --hero-mobile-title-line-height: 43.2px;
    --hero-mobile-subtitle-size: 16px;
    --hero-mobile-subtitle-line-height: 24px;
    --hero-mobile-content-gap: 15px;
    --hero-mobile-content-mt: 60px;
    --hero-mobile-actions-pb: 18px;
    --hero-mobile-actions-gap: 12px;
    --hero-mobile-btn-size: 16px;
    --hero-mobile-btn-line-height: 24px;
}


/* ============================================================
   HERO COMPONENT
   ============================================================ */

.business-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: end;
    padding: 25px 30px 30px 30px;
    overflow: hidden;
}

.business-hero__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.business-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-gradient);
    z-index: 1;
    opacity: 0.5;
}

.business-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: var(--hero-content-max-width);
    font-family: var(--hero-font);
    font-weight: var(--hero-title-weight);
    font-size: 72px;
    line-height: var(--hero-title-line-height);
    vertical-align: middle;
}

.business-hero__title {
    font-size: 28px;
    font-weight: var(--hero-title-weight);
    line-height: var(--hero-title-line-height);
    color: var(--hero-text-color);
}

.business-hero__title-accent {
    color: var(--hero-accent-color);
    font-size: 28px;
}

.business-hero__subtitle {
    margin: 0px;
    color: var(--hero-text-color);
    padding-bottom: 0px;
    font-family: var(--hero-font);
    font-weight: var(--hero-subtitle-weight);
    font-size: 19px;
    line-height: var(--hero-subtitle-line-height);
    letter-spacing: 0px;
    vertical-align: middle;
}

.Hero_Sentence {
    color: var(--hero-text-color);
    padding-bottom: 0px;
    font-family: var(--hero-font);
    font-weight: var(--hero-subtitle-weight);
    /* font-size: var(--hero-subtitle-size);*/
    font-size: 19px;
    line-height: var(--hero-subtitle-line-height);
    letter-spacing: 0px;
    vertical-align: middle;
}

.business-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--hero-actions-gap);
    font-family: var(--hero-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    padding-bottom: var(--hero-actions-pb);
}

.business-hero__SoloTitle {
    margin-bottom: 40px;
    margin-top: auto !important;
}


/* ============================================================
   BUTTON COMPONENT
   ============================================================ */

.business-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hero-btn-height);
    border-radius: var(--hero-btn-radius);
    padding: var(--hero-btn-padding);
    text-decoration: none;
    font-weight: 400 !important;
    font-size: 14px !important;
}

    .business-btn:hover {
        opacity: 0.88;
    }

.business-btn--primary {
    background: var(--hero-btn-primary-bg);
    color: var(--hero-btn-primary-color);
    font-family: var(--hero-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
}

.business-btn--outline {
    border: var(--hero-btn-outline-border);
    color: var(--hero-btn-outline-color);
}




/* ============================================================
   RTL SUPPORT
   ============================================================ */

[dir="rtl"] .business-hero__overlay {
    background: var(--hero-overlay-gradient-rtl);
}

[dir="rtl"] .business-hero__bg-image {
    transform: scaleX(-1);
}

[dir="rtl"] .business-hero__content {
    align-items: start;
    text-align: right;
}

[dir="rtl"] .business-hero__title,
[dir="rtl"] .business-hero__subtitle {
    text-align: right;
}

[dir="rtl"] .business-hero__subtitle {
    line-height: var(--Arabic-hero-subtitle-line-height);
}



[dir="rtl"] .business-hero__actions {
    margin-left: auto;
}

[dir="rtl"] .business-hero__title-accent {
    display: unset;
}


/* ============================================================
   RESPONSIVE — Mobile ≤ 769px
   ============================================================ */

@media (max-width: 769px) {
    .business-hero {
        padding-bottom: 24px !important;
        padding: var(--hero-mobile-padding);
        min-height: var(--hero-mobile-min-height);
    }

    .business-hero__title,
    .business-hero__title-accent {
        font-size: var(--hero-mobile-title-size);
        line-height: var(--hero-mobile-title-line-height);
    }

    .Hero_Sentence {
        font-size: 14px;
    }

    .business-hero__content {
        gap: 0px;
        margin-top: var(--hero-mobile-content-mt);
    }

    .business-hero__subtitle {
        font-size: var(--hero-mobile-subtitle-size);
        line-height: var(--hero-mobile-subtitle-line-height);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .business-hero__actions {
        padding-bottom: var(--hero-mobile-actions-pb);
        flex-direction: column;
        gap: var(--hero-mobile-actions-gap);
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: calc(100% - 16px);
    }

    .business-btn--primary,
    .business-btn--outline {
        width: 100%;
        font-size: var(--hero-mobile-btn-size);
        line-height: var(--hero-mobile-btn-line-height);
    }

    .ReverseColInMob {
        flex-direction: column-reverse;
    }
}



























/* ################ PERSONAL-SEGMENTS ################ */

/*Block wrapper*/
.Personal_Segment_Block {
    padding: 35px 30px;
}


/*Header row*/
.Personal_Segment_Block_Header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 24px;
}

.Personal_Segment_Block_HeaderLeft {
    flex: 1;
}


/*Image grid*/
.Personal_Segment_ImgGrid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 16px;
    width: 100%;
}

.Personal_Segment_ImgGrid--flipped {
    grid-template-columns: 40fr 60fr;
}


/*Image cards*/
.Personal_Segment_ImgCard {
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--Personal-Segment-ImgBg);
    width: 100%;
}

.Personal_Segment_ImgGrid .Personal_Segment_ImgCard:first-child {
    aspect-ratio: 4 / 3;
}

.Personal_Segment_ImgGrid .Personal_Segment_ImgCard:last-child {
    aspect-ratio: 3 / 3;
}

.Personal_Segment_ImgGrid--flipped .Personal_Segment_ImgCard:first-child {
    aspect-ratio: 3 / 3;
}

.Personal_Segment_ImgGrid--flipped .Personal_Segment_ImgCard:last-child {
    /*aspect-ratio: 4 / 3;*/
    aspect-ratio: 16 / 9;
}

.Personal_Segment_ImgCard img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    transition: transform 0.4s ease;
}

.Personal_Segment_ImgCard:hover img {
    transform: scale(1.04);
}

.Personal_Segment_CTA {
    opacity: 95%;
    background: var(--Personal-Segment-BgCTAGradient);
    padding: 72px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.Personal_Segment_CTA_TagWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.Personal_Segment_CTA_Title {
    margin: auto;
    max-width: 100%;
    font-size: 32px;
    font-weight: 400;
    color: var(--Personal-Segment-TextWhite);
    margin-bottom: 14px;
    line-height: 1.18;
    position: relative;
    z-index: 1;
}

.Personal_Segment_CTA_Desc {
    font-weight: 400;
    font-size: 14px;
    color: rgba(255,255,255,0.90);
    margin-bottom: 36px;
    line-height: 1.65;
    max-width: 40%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.Personal_Segment_CTA_Buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.Personal_Segment_CTA_BtnContact {
    text-transform: uppercase;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #00C4B3;
    color: #fff;
    border: none;
    border-radius: 26px;
    padding: 13px 32px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, transform 0.15s;
    letter-spacing: 0.4px;
}

    .Personal_Segment_CTA_BtnContact:hover {
        transform: translateY(-1px);
    }

.Personal_Segment_CTA_BtnBranches {
    text-transform: uppercase;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 26px;
    padding: 11px 32px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
    letter-spacing: 0.4px;
}

    .Personal_Segment_CTA_BtnBranches:hover {
        border-color: #fff;
        background: rgba(255,255,255,0.1);
        transform: translateY(-1px);
    }



@media (max-width: 900px) {
    .Personal_Segment_CTA {
        padding: 48px 15px;
    }

    .Personal_Segment_CTA_Title {
        max-width: 100%;
        font-size: 24px;
    }

    .Personal_Segment_CTA_Desc {
        font-size: 14px !important;
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    .Personal_Segment_CTA_Desc {
        max-width: 100%;
    }
}



@media (max-width: 900px) {
    .Personal_Segment_ImgGrid,
    .Personal_Segment_ImgGrid--flipped {
        grid-template-columns: 1fr;
    }

        .Personal_Segment_ImgGrid .Personal_Segment_ImgCard:first-child,
        .Personal_Segment_ImgGrid .Personal_Segment_ImgCard:last-child,
        .Personal_Segment_ImgGrid--flipped .Personal_Segment_ImgCard:first-child,
        .Personal_Segment_ImgGrid--flipped .Personal_Segment_ImgCard:last-child {
            aspect-ratio: 16 / 21;
        }
}




















































.LargeCorporatesInput {
   padding:0px;
}
.small, small{
    text-align:start;
}
/* ════════════════════════════════════════
   OFFER CARD — shared component
   Used by: PersonalPrivateSegment, PrimeSegments, PersonalAdvanceSegments
════════════════════════════════════════ */
.offer-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.25s ease;
    align-items: center; 
    display: flex;
    flex-direction: row;
}

/*    .offer-card:hover {
        background: rgba(255,255,255,0.22);
    }*/

.offer-card__icon {
   /* margin-top: 7px;*/
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

    .offer-card__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .offer-card__icon svg {
        width: 18px;
        height: 18px;
        color: var(--color-white);
    }

.offer-card__text {
    margin: 0px;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    font-weight: 400;
}

@media (max-width: 900px) {
    .offer-card__text {
        font-size: 16px;
    }
}

html[dir="rtl"] .offer-card__icon {
    margin-left: 14px;
    margin-right: unset;
}

/* ════════════════════════════════════════
   PRINCIPLE CARD — shared component
   Used by: PersonalPrivateSegment, PrimeSegments, PersonalAdvanceSegments, MintSegment
════════════════════════════════════════ */
/*.principle-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid #EBEBEB;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}*/
.principle-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid #EBEBEB;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    flex-direction: row;
    display: flex;
    gap: 16px;
    align-items: center;
}
/*    .principle-card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
    }*/

/*.principle-card__icon {
    width: 40px;
    height: 40px;
    background: var(--color-icon-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}*/
.principle-card__icon {
    margin-bottom: 0px !important;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--color-icon-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.principle-card__icon svg {
    width: 20px; 
    height: 20px;
    color: var(--color-primary);
}

.principle-card__text {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-secondary-dark);
    line-height: 1.4;
    margin-bottom:0px;
}

@media (max-width: 900px) {
    .principle-card__text {
        font-size: 16px;
    }
}

/* ════════════════════════════════════════
   SB BLOCK — shared component
   Used by: PersonalPrivateSegment, PrimeSegments, PersonalAdvanceSegments, MintSegment
════════════════════════════════════════ */

/* ── Block Wrapper ── */
.sb-block {
    padding: 20px 30px;
}

.SegmentTitle-m-0 {
    margin: 0px !important;
}
/*Private*/
.PersonalPrivateOverlay-Hero {
    background: linear-gradient(90deg, #124734, #12473400);
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.PersonalPrivateTitle {
    margin-bottom: 16px !important;
    margin-top: 0px;
    color: #124734
}

.principle-card__icon {
    background: #3E1051;
}

.PersonalPrivateOverlay {
    background: #1247344D;
    position: absolute;
    inset: 0;
}

.PersonalPrivateSubText {
    color: #5F6674;
}

.principle-card__icon-Private {
    background-color: #845D32;
}





/*PRIME*/
.PersonalPrimeOverlay-Hero {
    background: linear-gradient(90deg, #3E1051, #003B7000);
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.PersonalPrimeTitle {
    margin-bottom: 16px;
    margin-top: 0px;
    color: #8C6E4B
}

.PersonalPrimeOverlay {
    background: #3E10514D;
    position: absolute;
    inset: 0;
}

.PersonalPrimeSubText {
    color: #5F6674;
}

.offer-card__icon_Background {
    background: #3E1051C4;
}

.principle-card__icon-Prime {
    background-color: #3E1051;
}

.primeOffcetColor {
    color: #3E1051
}

.primeOffcet-BGColor {
    background: #3E10511F;
    border: 1px solid #3E105199;
}

.primeQualify {
    background: #845D32;
}

.aq-card {
    background: #FFFFFF4D;
    border: 1px solid #A98E6F;
}


/*Advance*/
.PersonalAdvanceOverlay-Hero {
    background: linear-gradient(90deg, #003B70, #003B7000);
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.PersonalAdvanceTitle {
    margin-bottom: 16px;
    margin-top: 0px;
    color: #003B70
}

.PersonalAdvanceOverlay {
    background: #003B704D;
    position: absolute;
    inset: 0;
}

.PersonalAdvanceSubText {
    color: #5F6674;
}

.principle-card__icon-Advance {
    background-color: #00C4B3;
}

.advanceOffcetColor {
    color: #00C4B3
}

.advanceOffcet-BGColor {
    background: #00C4B31F;
    border: 1px solid #00C4B399;
}

.advanceQualify {
    background: #00C4B3;
}

/* ── MINT segment ── */
.PersonalMintOverlay-Hero {
    background: linear-gradient(90deg, #003B70, #003B7000);
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.PersonalMintTitle {
    margin-bottom: 16px;
    margin-top: 0px;
    color: #2469FF
}

.PersonalMintOverlay {
    background: #003B704D;
    position: absolute;
    inset: 0;
}

.PersonalMintSubText {
    color: #5F6674;
}

.principle-card__icon-Mint {
    background-color: #0DCBFF;
}

.offer-card-mint {
    background-color: #00C4B3;
}

.mintOffcetColor {
    color: #00C4B3
}

.mintOffcet-BGColor {
    background: #2469FF1F;
    border: 1px solid #2469FF99;
}

.mintQualify {
    background: #00C4B3;
}

/* Shared CTA wash — heavier than the per-segment image overlays */
.ctaOverlay {
    background: #003B70B2;
    position: absolute;
    inset: 0;
}



/* ── Header ──
   16px under a section title, at every width — the one gap used site-wide
   between a title and the subtitle or content beneath it. Declared once for both
   segment header types; the copies in PersonalSegmentsPrivate.css,
   PersonalAdvanceSegments.css and MintSegment.css (20px / 32px / 32px) were
   removed so all four pages match. */
.sb-block__header,
.principles-section__header {
    margin-bottom: 16px;
}

.sb-block__header {
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    justify-content: start;
    gap: 0px;
}

.sb-block__header-left {
    flex: 1;
}

/* ── Tag Pill ── */
.sb-block__tag {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--SB-TagPillBg);
    border-radius: 20px;
    padding: 4px 12px 4px 10px;
    margin-bottom: 12px;
}

.sb-block__tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--SB-AccentGreen);
    flex-shrink: 0;
    display: none !important;
}

.sb-block__tag-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--SB-TagPillText);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── Title ── */
.sb-block__title {
    font-size: 28px;
    font-weight: 500;
    color: var(--SB-TextDark);
    line-height: 1.22;
    max-width: 500px;
}

/* ── Button ── */
.sb-block__btn {
    /* width: 40%; */
    /* align-self: end; */
    display: inline-flex;
    align-items: center;
    color: #5F6674;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: background 0.18s, transform 0.15s;
}

/* ── Image Grid ── */
.sb-img-grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 16px;
    width: 100%;
}

.sb-img-grid--Even {
    grid-template-columns: 1fr 1fr;
}

.sb-img-grid--flipped {
    grid-template-columns: 40fr 60fr;
}

.sb-img-card {
    height: 400px;
    border-radius: 14px;
    overflow: hidden;
    /* background: var(--SB-ImgBg);*/
    width: 100%;
    position: relative;
}

.sb-img-grid .sb-img-card:first-child {
    aspect-ratio: 4 / 3;
}

.sb-img-grid .sb-img-card:last-child {
    aspect-ratio: 3 / 3;
}

.sb-img-grid--flipped .sb-img-card:first-child {
    aspect-ratio: 3 / 3;
}

.sb-img-grid--flipped .sb-img-card:last-child {
    aspect-ratio: 4 / 3;
}
/*.sb-img-card,
.sb-img-grid .sb-img-card:first-child,
.sb-img-grid .sb-img-card:last-child,
.sb-img-grid--flipped .sb-img-card:first-child,
.sb-img-grid--flipped .sb-img-card:last-child {
    height: auto;
    aspect-ratio: 16 / 9;
}*/
.sb-img-card img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    transition: transform 0.4s ease;
}

img:hover {
    transform: none !important;
}

@media (max-width: 900px) {
    .sb-img-card img {
      
        object-fit: cover;
     
    }
    .sb-block {
        padding: 32px 15px;
    }

    .sb-block__header {
        flex-direction: column;
        gap: 0px;
    }

    .sb-block__header-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .sb-block__title {
        font-size: 22px;
        text-align: center;
    }

    .sb-block__btn {
        justify-content: center;
        width: 100%;
        margin: auto;
        align-items: center;
        text-align: center;
        padding-bottom: 16px;
    }

    .sb-img-grid,
    .sb-img-grid--flipped {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════
   PERSONAL HERO SECTION — shared component
════════════════════════════════════════ */

.Hero_Section {
    margin-top: var(--header-height);
    height: 394px;
    min-height: 394px;
    position: relative;
    width: 100%;
    background: #0d1f2d;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 25px 30px 30px 30px;
}

.Hero_ImgWrapper {
    position: absolute;
    inset: 0;
}

    .Hero_ImgWrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* object-fit: fill;*/
    }

.Hero_Content {
    display: grid;
    gap: 20px;
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.Hero_Tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgb(255 255 255 / 10%);
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 14px;
    color: white;
    font-weight: 400;
}

.Hero_Tag_Dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    flex-shrink: 0;
    display: none !important;
}

.Hero_Tag_Text {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.Hero_Title {
    margin: 0px !important;
    font-size: 28px !important;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.12;
}

.Hero_Title_Accent {
    color: #00C4B3;
    display: block !important;
}

.Hero_Desc {
    margin: 0px !important;
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.65;
    margin-top: 14px;
    max-width: 100%;
}

.Hero_Desc2 {
    margin: 0px !important;
    font-size: 20px;
    font-weight: 300;
    color: #DFDFDF;
    margin-top: 14px;
    max-width: 100%;
}

.Hero_Section {
    height: 300px;
}

@media (max-width: 900px) {
    .sb-block__header,
    .principles-section__header {
        margin-bottom: 0px;
    }

    .Hero_Tag {
        margin: auto;
    }

    .Hero_Desc2 {
        font-size: 16px;
    }

    .Hero_Section {
        /*height: 50vh;*/
        min-height: 280px;
        padding: 35px 15px;
        margin-top: 80px;
    }

    .m-20-res {
        margin-top: 20px !important;
    }

    .Hero_Title {
        font-size: 28px;
    }

    .Hero_Desc {
        font-size: 13px;
    }
}

@media (max-width: 450px) {
    .Hero_Title_Accent {
        color: #00c8a0;
        display: unset;
    }

    /*    .Hero_Section {
        height: 600px;
    }*/

    /*.Hero_ImgWrapper img {
        object-position: 80% center;
    }*/
}

/* ============================================================
   MOBILE TAB BARS — one dropdown for every page nav
   Driven by wwwroot/scripts/mobile-tabs.js

   Below 768px each page nav collapses to the active item plus a mint chevron,
   opening to the full list — the pattern the Islamic Banking page introduced.
   A bar opts in with a second class, keeping its own prefix for everything else:

       <nav class="channels-tabs mobile-tabs" data-mobile-tabs>

   Written once here instead of in each page stylesheet so all nine bars —
   Accounts, Cards, Loans, Auto Loans, the four segment pages, Financial
   Inclusion and EGBANK and Rahet Bally — cannot drift apart. The container rules
   are qualified as nav.mobile-tabs so they outrank each sheet's own single-class
   rules for the same bar, which load after this file.
   ============================================================ */
.mobile-tabs__toggle {
    display: none;
}

/* Transparent to layout, so above 768px the items stay direct flex children of
   the bar and every desktop row is exactly as it was without this wrapper */
.mobile-tabs__menu {
    display: contents;
}

/* ============================================================
   TAB BAR ROW — one height, font size and weight everywhere
   Covers every page nav that shares the nav.mobile-tabs collapse above:
   .channels-tabs (Accounts, Cards), .loans-tabs (Personal/Auto Loans),
   .segment-tabs (the four segment pages) and .fi-tabs (Financial Inclusion,
   EGBANK and Rahet Bally). Each page sheet used to restate these same
   values and had drifted — Loans padded its items 15px instead of 10px 0
   and bolded the active one, making that bar visibly taller. Only the
   metrics that make the row itself the same height live here; gap,
   horizontal padding, background and border color stay in each page sheet.
   ============================================================ */
.channels-tabs__item,
.loans-tabs__item,
.segment-tabs__item,
.fi-tabs__item {
    padding: 10px 0;
    height: 45px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.channels-tabs__item--active,
.loans-tabs__item--active,
.segment-tabs__item--active,
.fi-tabs__item--active {
    font-weight: 400;
}

@media (max-width: 768px) {
    .principles-grid .principle-card {
        align-items: flex-start;
        flex-direction: column;
        flex-basis: 100%;
        max-width: 100%;
    }
    .principle-card__icon {
        width: auto !important;
        padding: 10px;
    }
    .Hero_Section {
        height: 360px;
    }

    .ButtonClass {
        width: auto;
    }

    .Hero_Title {
        margin: 0px !important;
        font-size: 24px !important;
        font-weight: 400;
        color: #ffffff;
        line-height: 1.12;
    }

    .Hero_Title_Accent {
        color: #00C4B3;
        font-size: 24px !important;
        display: unset !important;
    }

    .W-Auto-Res {
        width: auto;
    }
    /* One row: active item on the start edge, chevron on the end. The list drops
       underneath, so the bar becomes a column and must not clip it. */
    nav.mobile-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        height: auto;
        overflow: visible;
        /* Stays under the header while the page scrolls, same as on desktop.
           Declared here so every shared bar behaves alike: Loans.css drops
           .loans-tabs to position:relative at this width for Islamic Banking,
           which uses a separate JS-driven fixed copy — the Loans and Auto Loans
           bar has no such copy and was left unstuck by that rule. */
        /* 70px is the exact height of the fixed header (.HeaderDiv), so the whole
           bar clears it. The page sheets all said 56px, which parked the bar 14px
           too high and hid that much of it behind the header on scroll — the
           About Us bar pins its clone at 70px, which is why it looks right. */
        position: sticky;
        top: 70px;
        z-index: 50;
    }

        nav.mobile-tabs .mobile-tabs__toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 14px 16px;
            border: none;
            background: transparent url('/assets/NewFolder/mobileNav.svg') no-repeat right center;
            background-size: auto 100%;
            color: #00C4B3;
            font-family: 'Co Headline', sans-serif;
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            text-align: start;
            cursor: pointer;
        }

    /* The line art follows the chevron to the other edge in Arabic */
    [dir="rtl"] nav.mobile-tabs .mobile-tabs__toggle {
        background-position: left center;
    }

    .mobile-tabs__chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border: 1.5px solid #e0e8ef;
        border-radius: 50%;
        background: #FFFFFF;
        transition: transform 0.25s;
    }

    nav.mobile-tabs.is-open .mobile-tabs__chevron {
        transform: rotate(180deg);
    }

    nav.mobile-tabs .mobile-tabs__menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 0.5px solid #e0e8ef;
        background: #FFFFFF;
    }

    nav.mobile-tabs.is-open .mobile-tabs__menu {
        display: flex;
        width: 100%;
    }

    /* Prefix-agnostic, so the same rules dress .channels-tabs__item,
       .loans-tabs__item, .segment-tabs__item and .fi-tabs__item */
    nav.mobile-tabs [data-mobile-tabs-menu] > a {
        padding: 13px 16px;
        font-size: 14px;
        /* The teal underline is the desktop cue for the active item; inside the
           list the teal text carries it, so every row gets the same hairline */
        border-bottom: 0.5px solid #f0f5f9;
    }

        nav.mobile-tabs [data-mobile-tabs-menu] > a:last-child {
            border-bottom: none;
        }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE UNIFICATION (≤768px)

   One block for every page we have worked on — Accounts, Cards, Personal Loans,
   Auto Loans, Islamic Banking, the four segment pages, Financial Inclusion,
   EGBANK and Rahet Bally, Freely, Dryv Now, ATM & POS Instructions and
   International Card Limits. Personal is deliberately excluded: it has its own
   scale and is not part of this sweep.

   Written here rather than in each page stylesheet so one edit moves all of
   them and they cannot drift apart again. !important is required because
   master.cshtml renders @RenderSection("styles") AFTER the global sheets, so
   the page sheets would otherwise win on source order at equal specificity.
   ══════════════════════════════════════════════════ */



















@media (max-width: 768px) {
    .CustomerRights_main-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }







    /* Financial Inclusion, Rahet Bally and Freely put the gutter on the page
       wrapper and separate their sections with a flex gap. Both jobs move to the
       sections above, otherwise the wrapper padding and the gap would stack on
       top of the 30px and these pages would sit wider apart than the others. */
    .fi-page,
    .fr-page {
        padding: 0 !important;
        gap: 0 !important;
    }
    /* Dryv Now is the exception: .dn-section IS the navy card, so its padding is
       the card's inner spacing, not section spacing. The gutter stays on the
       wrapper. */
    
    /* ── 2. Card bodies: 16px in, 16px between rows ──
       The space above the title (padding) and below it (flex gap) are the same
       number, and the margin-top that used to make the top bigger is dropped, so
       a card title sits evenly between its edge and its first row. */
    .accounts-card__content,
    .autoloan-card__content,
    .fi-card__content,
    .fr-card__content,
    .ib-liab-card__content,
    /*    .ib-product-card__body,*/
    .loans-accordion__body,
    .ib-section-body,
    .cards-accordion__body {
        padding: 16px !important;
        gap: 16px !important;
        margin-top: 0 !important;
    }

    .margin-16-Res {
        margin: 16px;
    }
    /* ── 3. Accordion card buttons size to their label ── */
    .accounts-btn,
    .autoloan-btn,
    .loans-btn,
    .fi-card__btn,
    .fr-card__btn {
        width: auto !important;
    }
}

/* The title gap is 16px at every width, so there is no mobile override here:
   .sb-block__header / .principles-section__header above carry the single value. */

/* ============================================================
   RECAPTCHA — mobile overflow fix, every form site-wide
   Google's reCAPTCHA checkbox renders as a fixed 304x78 iframe that never
   shrinks on its own — width:100% and max-width have no effect on it. Below
   ~360px that is wider than the content area inside a form card (page gutter
   plus the card's own padding), so the widget pushes the whole card past the
   edge of the screen; nothing else in the card is actually too wide.

   transform:scale() shrinks the painted/scrollable box, which the iframe
   does obey, unlike width — so the card stops overflowing without touching
   any of the ~19 forms that embed .g-recaptcha or restating this per page.
   transform-origin keeps the shrink anchored to the corner the widget
   already renders from instead of shrinking toward its own centre.
   ============================================================ */
@media (max-width: 359px) {
    .g-recaptcha {
        /* transform reduces the painted size but not the widget's own
           304px-wide layout box, so its now-unused 20% still counts as
           scrollable overflow on the page unless it is clipped here too */
        /*  overflow: hidden;*/
        transform: scale(0.8);
        transform-origin: 0 0;
    }

    [dir="rtl"] .g-recaptcha {
        transform-origin: 100% 0;
    }
}

/* The scale-down above only helps once its ancestor grid track can actually
   shrink to fit. .complaint-form (ContactUs) and .CustomerRights_form-col
   (Customer Rights) are CSS Grid items, and a grid item's default
   min-width:auto sizes it to its content's min-content width regardless of
   transform — transform runs after layout, so it cannot shrink the space an
   ancestor already reserved. That min-content width was the recaptcha's
   un-scaled 304px, which is why the whole card — not just the widget — was
   wider than the screen. Harmless at any width wider than the content
   actually needs, so this is not gated to the same breakpoint. */
.complaint-form,
.CustomerRights_form-col,
.CustomerRights_form-panel {
    min-width: 0;
}

/* min-width:0 on the item isn't enough on its own: Complaint.css's mobile
   .CustomerRights_main-content collapses to grid-template-columns:1fr, which
   is shorthand for minmax(auto, 1fr) — the track's own floor is still the
   widest item's content size regardless of what min-width the item declares.
   minmax(0, 1fr) removes that floor at the track level. */


form.is-submitting {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
    transition: opacity 0.2s ease;
}

    form.is-submitting::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-top-color: #00C4B3; /* matches your teal brand color */
        border-radius: 50%;
        animation: form-spinner 0.7s linear infinite;
        z-index: 10;
    }

@keyframes form-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.form-loader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

    .form-loader.is-visible {
        opacity: 1;
        visibility: visible;
    }





/*.governance__intro,
.governance__section-title,
.page-intro__heading,
.page-intro__heading,
.governance__heading,
.Grid-Three,
.page-intro,
.ch-service-panel__title,
.ch-color-panel__text,
.CustomerRights_terms-title,
.page-intro__heading,
.bh-why-banking__title,
.bh-corp-solutions__title,
.bh-corp-solutions__title, .bh-corp-solutions__header, .innovation-overview .overview-title, .tf-why__heading, .tf-overview__heading, .midcaps-overview__title, .sme-section.sme-cards > p, .sme-section.sme-documents h2, .sme-section.sme-cbe .sme-cbe__title, .bh-products__header, .payroll-migration__title, .dcm-overview__title, .dcm-solutions__title, .syndications-solutions__badge, .syndications-why__title, .cm-solutions__left-title, .sme-section.sme-smart h2, .sme-section.sme-cards .sme-grid-2 .sme-card h3 {
    margin-bottom: 16px !important;
}*/

/*###############################################################################################################*/
/*#################################### WEB Title Font size & Bottom Spase  #####################################*/
/*##############################################################################################################*/
.page-intro__heading,
.management-team__heading,
.governance__heading,
.governance__section-title,
.ir-stock .ir-section__title,
.ir-governance .ir-section__title,
.ir-section__title,
.ir-service__title,
.sustain_section-title,
.sustain_card-title,
.sustain_financing-title,
.careers-why__title,
.careers-opps__title,
.loans-calc-section__title,
.section__title,
.feedback-page__title,
.CustomerRights_accordion-title,
.CustomerRights_terms-title,
.Bluetitle,
.rewards-heading,
.ib-section-title,
.ib-committee__title,
.Personal_Segment_CTA_Title,
.fi-heading,
.bh-why-banking__title,
.internationalCardLimits-section__title,
.tf-overview__heading,
.innovation-overview .overview-title,
.tf-why__heading,
.bh-corp-solutions__title,
.midcaps-overview__title,
.sme-section.sme-documents h2,
.sme-section.sme-cbe .sme-cbe__title,
.bh-products__header,
.bh-badge__text,
.bh-badge__text--navy,
.migration-heading,
.payroll-migration__title,
.dcm-overview__title,
.dcm-solutions__title,
.cm-solutions__left-title,
.sme-section.sme-smart h2,
.Grid-Three,
.page-intro,
.ch-service-panel__title,
.ch-color-panel__text,
.bh-corp-solutions__header,
.sme-section.sme-cards > p,
.syndications-solutions__badge,
.syndications-why__title,
.sme-section.sme-cards .sme-grid-2 .sme-card h3, .midcaps-why__title, .dcb-overview__heading, .pp-offer-card__title, .nc-intro__kicker {
    font-size: 32px !important;
    margin-bottom: 30px !important;
}


/*##################################################################################################*/
/*#################################### WEB Sections: 30px  30px ####################################*/
/*##################################################################################################*/
.accounts-section,
.accounts-form-section,
.cards-section,
.rewards-section,
.loans-section,
.ib-section,
.sb-block,
.principles-section,
.offers-section,
.atmpos-section,
.internationalCardLimits-section,
.fi-section,
.loans-calc-section,
.fr-section,
.mission-vision,
.AboutHistory_Section_Wrapper,
.management-team,
#stakeholders,
#reports,
.ir-section.ir-service,
.ir-section.ir-governance,
.ir-section.ir-stock,
.sustain_section-commitment,
.sustain_section-financing,
.sustain_section-reports,
.careers-why,
.ch-section,
.section,
.feedback-page__survey-wrap,
.board-management,
.board-composition,
.governance_Section,
.CustomerRights_main-content,
.CustomerRights_terms-section,
.bh-products, .bh-why-banking, .bh-corp-solutions, .tf-solutions, .midcaps-overview, .largecorp-overview, .largecorp-solutions, .largecorp-partners, .largecorp-contact, .largecorp-inquiry, .midcaps-why, .midcaps-solutions, .sme-section, .EmployeeExperience, .payroll-features, .payroll-testimonials, .payroll-faq, .payroll-migration, .dcm-overview, .dcm-solutions, .syndications-overview, .syndications-solutions, .syndications-solutions, .syndications-why, .cm-overview, .cm-solutions, .tf-overview, .tf-why, .innovation-overview, .dcb-overview, .dcb-bento, .pp-partners, .nc-intro, .nc-people, .nc-perks, .nc-value, .nc-cta {
    padding: 30px 30px !important;
}





@media (max-width: 768px) {

    /*#########################################################################################################*/
    /*#################################### Responsive Sections: 15px  15px ####################################*/
    /*#########################################################################################################*/
    .cards-programs__section,
    .accounts-section,
    .accounts-form-section,
    .cards-section,
    .rewards-section,
    .loans-section,
    .ib-section,
    .sb-block,
    .principles-section,
    .offers-section,
    .atmpos-section,
    .internationalCardLimits-section,
    .fi-section,
    .loans-calc-section,
    .fr-section,
    .mission-vision,
    .AboutHistory_Section_Wrapper,
    .management-team,
    #stakeholders,
    #reports,
    .ir-section.ir-service,
    .ir-section.ir-governance,
    .ir-section.ir-stock,
    .sustain_section-commitment,
    .sustain_section-financing,
    .sustain_section-reports,
    .careers-why,
    .ch-section,
    .section,
    .feedback-page__survey-wrap,
    .board-management,
    .board-composition,
    .governance_Section,
    .CustomerRights_main-content,
    .CustomerRights_terms-section,
    .bh-products, .bh-why-banking, .tf-solutions, .bh-corp-solutions, .largecorp-overview, .largecorp-solutions, .midcaps-overview, .largecorp-partners, .largecorp-contact, .largecorp-inquiry, .midcaps-why, .midcaps-solutions, .sme-section, .cbeBottomText, .EmployeeExperience, .payroll-features, .payroll-testimonials, .payroll-faq, .payroll-migration, .dcm-overview, .dcm-solutions, .syndications-overview, .syndications-solutions, .syndications-solutions, .syndications-why, .cm-overview, .cm-solutions, .tf-overview, .tf-why, .innovation-overview, .dcb-overview, .dcb-bento, .pp-partners, .nc-intro, .nc-people, .nc-perks, .nc-value, .nc-cta {
        padding: 15px 15px !important;
    }


        /*##################################################################################################*/
        /*####################### Titles FONTSIZE &  margin-bottom: 30px  RESPONSIVE #######################*/
        /*##################################################################################################*/
        .page-intro__heading,
        .management-team__heading,
        .governance__heading,
        .governance__section-title,
        .ir-stock .ir-section__title,
        .ir-governance .ir-section__title,
        .ir-section__title,
        .ir-service__title,
        .sustain_section-title,
        .sustain_card-title,
        .sustain_financing-title,
        .careers-why__title,
        .careers-opps__title,
        .loans-calc-section__title,
        .section__title,
        .feedback-page__title,
        .CustomerRights_accordion-title,
        .CustomerRights_terms-title,
        .Bluetitle,
        .rewards-heading,
        .ib-section-title,
        .ib-committee__title,
        .Personal_Segment_CTA_Title,
        .fi-heading,
        .bh-why-banking__title,
        .internationalCardLimits-section__title,
        .tf-overview__heading,
        .innovation-overview .overview-title,
        .tf-why__heading,
        .bh-corp-solutions__title,
        .midcaps-overview__title,
        .sme-section.sme-documents h2,
        .sme-section.sme-cbe .sme-cbe__title,
        .bh-products__header,
        .bh-badge__text,
        .bh-badge__text--navy,
        .migration-heading,
        .payroll-migration__title,
        .dcm-overview__title,
        .dcm-solutions__title,
        .cm-solutions__left-title,
        .sme-section.sme-smart h2,
        .Grid-Three,
        .page-intro,
        .ch-service-panel__title,
        .ch-color-panel__text,
        .bh-corp-solutions__header,
        .sme-section.sme-cards > p,
        .syndications-solutions__badge,
        .syndications-why__title,
        .cards-programs__title,
        .sme-section.sme-cards .sme-grid-2 .sme-card h3, .midcaps-why__title, .dcb-overview__heading, .pp-offer-card__title, .nc-intro__kicker {
            font-size: 24px !important;
            margin-bottom: 30px !important;
        }
}


/*##################################################################################################*/
/*##############################################  Btns  ############################################*/
/*##################################################################################################*/
.ButtonClass,
.bh-corp-card__btn,
.accounts-form__submit-btn,
.cards-card__apply-btn,
.cards-nav-card__btn,
.rewards-offers__btn,
.fi-card__btn,
.footer__info-row span,
.fi-cta__btn,
.fr-card__btn,
.pp-offer-card__btn,
.pp-partners__explore-btn, .careers-btn, .nc-cta__btn {
    font-size: 14px !important;
    font-weight: 400 !important;
    max-width: max-content !important;
    min-width: auto !important;
    width: auto !important;
    padding: 10px 20px !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.ButtonClass, .bh-corp-card__btn, .accounts-form__submit-btn, .cards-card__apply-btn, .bh-corp-card__btn, .pp-partners__explore-btn {
    align-self: center !important;
}

@media (max-width: 768px) {
    /*############################################################################################################*/
    /*##############################################  Btns Responsive ############################################*/
    /*############################################################################################################*/
    .ButtonClass,
    .bh-corp-card__btn,
    .accounts-form__submit-btn,
    .cards-card__apply-btn,
    .cards-nav-card__btn,
    .rewards-offers__btn,
    .fi-card__btn,
    .footer__info-row span,
    .fi-cta__btn,
    .fr-card__btn,
    .pp-offer-card__btn,
    .pp-partners__explore-btn {
        font-size: 14px !important;
        font-weight: 400 !important;
        max-width: max-content !important;
        min-width: auto !important;
        width: auto !important;
        padding: 10px 20px !important;
        height: auto !important;
        line-height: 1.5 !important;
    }

    .ButtonClass, .bh-corp-card__btn, .accounts-form__submit-btn, .cards-card__apply-btn, .bh-corp-card__btn, .pp-partners__explore-btn {
        align-self: center !important;
    }
}







.padding-0 {
    padding: 0px !important;
}

/* ============================================================
   FORM STYLE UNIFICATION — every contact/inquiry form site-wide
   Business, SME, LargeCorporates, MidCaps, DebtCapitalMarkets,
   Syndications, Payroll, CashManagement, TradeFinance,
   DigitalCorporateBanking, InnovationPartnerships, DryvNow, Freely,
   FinancialConclusion, IslamicBanking, Accounts/Cards/Loan apply
   forms, ContactUs/Complaint and LoyaltyAndRewards each grew their
   own title size, input color, placeholder color, field spacing and
   (where present) dropdown arrow, independently of one another. Same
   idea as the "one shared padding" block above: collected here so one
   edit moves every form and they cannot drift apart again — nothing
   about a form's markup, fields, validation or submit behaviour
   changes, only how the existing elements are painted. Prefixed with
   `body` throughout so this reliably wins even against the handful of
   page sheets that already used !important on these same properties
   (DigitalCorporateBanking's placeholder color, ContactUs/Complaint's
   placeholder color+size) — those load after this file, so plain
   !important alone would lose the specificity tie to them.
   ============================================================ */

/* ── Titles — 24px / 400, 16px gap to whatever follows ── */
/*##################################################################################################*/
/*##############################################  Forms  ###########################################*/
/*##################################################################################################*/
body .bh-inquiry__title,
body .sme-form-section h2,
body .largecorp-inquiry h2,
body .midcaps-inquiry h2,
body .dcm-inquiry__title,
body .syndications-inquiry h2,
body .payroll-inquiry__title,
body .cm-inquiry__title,
body .tf-inquiry__title,
body .dcb-inquiry__title,
body .innovation-inquiry h2,
body .dn-form__title,
body .fr-form__title,
body .fi-apply__title,
body .ib-apply__title,
body .accounts-form__title,
body #contact-form .section__title,
body .register-apply-now h2 {
    font-size: 24px !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
}

/* ── Subtitles — 16px / 300, same 16px gap ── */
body .payroll-inquiry__subtitle,
body .sme-form-section p {
    font-size: 16px !important;
    font-weight: 300 !important;
    margin-bottom: 16px !important;
}

/* ── Field text — color, size and weight ── */
body .bh-inquiry__field input,
body .sme-form input,
body .sme-form select,
body .sme-form textarea,
body .largecorp-inquiry input,
body .largecorp-inquiry textarea,
body .midcaps-inquiry input,
body .midcaps-inquiry textarea,
body .dcm-inquiry__input,
body .dcm-inquiry__textarea,
body .dcm-inquiry__select,
body .syndications-inquiry input,
body .syndications-inquiry textarea,
body .payroll-inquiry__field input:not([type="radio"]),
body .cm-inquiry__field input,
body .cm-inquiry__field textarea,
body .tf-inquiry__field input,
body .tf-inquiry__field textarea,
body .dcb-inquiry__field input,
body .innovation-inquiry input,
body .innovation-inquiry textarea,
body .dn-form__field input,
body .fr-form__field input,
body .fr-form__field select,
body .fi-apply__input,
body .fi-apply__select,
body .ib-apply__input,
body .ib-apply__select,
body .ib-apply__textarea,
body .accounts-form__input,
body .accounts-form__select,
body .form-input,
body .form-select,
body .form-textarea,
body .register-apply-now input,
body .register-apply-now textarea {
    /* color: #003B70 !important;*/
    font-size: 16px !important;
    font-weight: 300 !important;
}

    /* ── Placeholder text — same color everywhere ── */
    body .bh-inquiry__field input::placeholder,
    body .sme-form input::placeholder,
    body .sme-form textarea::placeholder,
    body .largecorp-inquiry input::placeholder,
    body .largecorp-inquiry textarea::placeholder,
    body .midcaps-inquiry input::placeholder,
    body .midcaps-inquiry textarea::placeholder,
    body .dcm-inquiry__input::placeholder,
    body .dcm-inquiry__textarea::placeholder,
    body .syndications-inquiry input::placeholder,
    body .syndications-inquiry textarea::placeholder,
    body .payroll-inquiry__field input::placeholder,
    body .cm-inquiry__field input::placeholder,
    body .cm-inquiry__field textarea::placeholder,
    body .tf-inquiry__field input::placeholder,
    body .tf-inquiry__field textarea::placeholder,
    body .dcb-inquiry__field input::placeholder,
    body .innovation-inquiry input::placeholder,
    body .innovation-inquiry textarea::placeholder,
    body .dn-form__field input::placeholder,
    body .fr-form__field input::placeholder,
    body .fi-apply__input::placeholder,
    body .ib-apply__input::placeholder,
    body .ib-apply__textarea::placeholder,
    body .accounts-form__input::placeholder,
    body .form-input::placeholder,
    body .form-textarea::placeholder,
    body .register-apply-now input::placeholder {
        color: #9D9D9D !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        padding: 0px;
        text-align: start;
    }

/* ── Gap between fields — 16px everywhere, row and form alike ── */
body .bh-inquiry__row,
body .bh-inquiry__form,
body .sme-form .sme-form-inputs,
body .sme-form .sme-form-selects,
body .largecorp-inquiry__row,
body .midcaps-inquiry__row,
body .dcm-inquiry__row,
body .dcm-inquiry__form,
body .syndications-inquiry__row,
body .payroll-inquiry__row,
body .payroll-inquiry__form,
body .cm-inquiry__row,
body .cm-inquiry__form,
body .tf-inquiry__row,
body .tf-inquiry__form,
body .dcb-inquiry__row,
body .dcb-inquiry__form,
body .innovation-inquiry__row,
body .innovation-inquiry form,
body .dn-form__grid,
body .dn-form__form,
body .fr-form__grid,
body .fr-form__form,
body .fi-apply__row,
body .fi-apply__form,
body .ib-apply__row,
body .ib-apply__form,
body .accounts-form__row,
body .accounts-form,
body .complaint-form__row,
body .register-apply-now__form .row {
    margin-top:0px;
    gap: 16px !important;
}

/* ── Dropdown arrows — one chevron for every <select>, replacing the
   three different techniques (inline SVG, CSS-drawn triangle, a plain
   "▼" glyph) and adding one to the two forms that had none at all. ── */
body .sme-form select,
body .dcm-inquiry__select,
body .form-select,
body .fi-apply__select,
body .ib-apply__select,
body .fr-form__field select,
body .accounts-form__select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23003B70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 40px !important;
}

[dir="rtl"] body .sme-form select,
[dir="rtl"] body .dcm-inquiry__select,
[dir="rtl"] body .form-select,
[dir="rtl"] body .fi-apply__select,
[dir="rtl"] body .ib-apply__select,
[dir="rtl"] body .fr-form__field select,
[dir="rtl"] body .accounts-form__select {
    background-position: left 16px center !important;
    padding-right: 16px !important;
    padding-left: 40px !important;
}

/* The old wrapper-drawn triangles are superseded by the background-image
   arrow above — left in place they would double up with it. */
body .fi-apply__select-wrap::after,
body .accounts-form__select-wrap::after {
    content: none !important;
}

/* ── Responsive — every form's own stylesheet still carries its own
   @media (max-width: ...) at 768px/900px that shrinks its title, tightens
   its gap or resizes its input text independently of every other form 
   (e.g. .dcm-inquiry__title drops to 1.1rem, .payroll-inquiry__title to
   22px, .tf-inquiry__title to 24px, .fi-apply__title to 28px, each at a
   different breakpoint) — undoing the desktop unification above as soon as
   the viewport narrows. The unprefixed rules above have no media guard of
   their own, so being !important they already win over those page-level
   overrides at every width, including mobile — this block restates the
   same values explicitly under one shared 768px breakpoint (matching this
   file's other unified sections) so that is documented intent rather than
   an incidental side effect someone could undo by editing the base rules
   above without realising mobile depends on them too. Layout-only
   properties this task was never about — padding, height, border-radius,
   background, column count — are untouched, same as the desktop rules. ── */
@media (max-width: 768px) {
    body .bh-inquiry__title,
    body .sme-form-section h2,
    body .largecorp-inquiry h2,
    body .midcaps-inquiry h2,
    body .dcm-inquiry__title,
    body .syndications-inquiry h2,
    body .payroll-inquiry__title,
    body .cm-inquiry__title,
    body .tf-inquiry__title,
    body .dcb-inquiry__title,
    body .innovation-inquiry h2,
    body .dn-form__title,
    body .fr-form__title,
    body .fi-apply__title,
    body .ib-apply__title,
    body .accounts-form__title,
    body #contact-form .section__title,
    body .register-apply-now h2 {
        font-size: 24px !important;
        font-weight: 400 !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }

    body .payroll-inquiry__subtitle,
    body .sme-form-section p {
        font-size: 16px !important;
        font-weight: 300 !important;
        margin-bottom: 16px !important;
    }

    body .bh-inquiry__field input,
    body .sme-form input,
    body .sme-form select,
    body .sme-form textarea,
    body .largecorp-inquiry input,
    body .largecorp-inquiry textarea,
    body .midcaps-inquiry input,
    body .midcaps-inquiry textarea,
    body .dcm-inquiry__input,
    body .dcm-inquiry__textarea,
    body .dcm-inquiry__select,
    body .syndications-inquiry input,
    body .syndications-inquiry textarea,
    body .payroll-inquiry__field input:not([type="radio"]),
    body .cm-inquiry__field input,
    body .cm-inquiry__field textarea,
    body .tf-inquiry__field input,
    body .tf-inquiry__field textarea,
    body .dcb-inquiry__field input,
    body .innovation-inquiry input,
    body .innovation-inquiry textarea,
    body .dn-form__field input,
    body .fr-form__field input,
    body .fr-form__field select,
    body .fi-apply__input,
    body .fi-apply__select,
    body .ib-apply__input,
    body .ib-apply__select,
    body .ib-apply__textarea,
    body .accounts-form__input,
    body .accounts-form__select,
    body .form-input,
    body .form-select,
    body .form-textarea,
    body .register-apply-now input,
    body .register-apply-now textarea {
        color: #003B70 !important;
        font-size: 16px !important;
        font-weight: 300 !important;
    }

        body .bh-inquiry__field input::placeholder,
        body .sme-form input::placeholder,
        body .sme-form textarea::placeholder,
        body .largecorp-inquiry input::placeholder,
        body .largecorp-inquiry textarea::placeholder,
        body .midcaps-inquiry input::placeholder,
        body .midcaps-inquiry textarea::placeholder,
        body .dcm-inquiry__input::placeholder,
        body .dcm-inquiry__textarea::placeholder,
        body .syndications-inquiry input::placeholder,
        body .syndications-inquiry textarea::placeholder,
        body .payroll-inquiry__field input::placeholder,
        body .cm-inquiry__field input::placeholder,
        body .cm-inquiry__field textarea::placeholder,
        body .tf-inquiry__field input::placeholder,
        body .tf-inquiry__field textarea::placeholder,
        body .dcb-inquiry__field input::placeholder,
        body .innovation-inquiry input::placeholder,
        body .innovation-inquiry textarea::placeholder,
        body .dn-form__field input::placeholder,
        body .fr-form__field input::placeholder,
        body .fi-apply__input::placeholder,
        body .ib-apply__input::placeholder,
        body .ib-apply__textarea::placeholder,
        body .accounts-form__input::placeholder,
        body .form-input::placeholder,
        body .form-textarea::placeholder,
        body .register-apply-now input::placeholder {
            color: #9D9D9D !important;
            font-size: 16px !important;
            font-weight: 300 !important;
        }

    body .bh-inquiry__row,
    body .bh-inquiry__form,
    body .sme-form .sme-form-inputs,
    body .sme-form .sme-form-selects,
    body .largecorp-inquiry__row,
    body .midcaps-inquiry__row,
    body .dcm-inquiry__row,
    body .dcm-inquiry__form,
    body .syndications-inquiry__row,
    body .payroll-inquiry__row,
    body .payroll-inquiry__form,
    body .cm-inquiry__row,
    body .cm-inquiry__form,
    body .tf-inquiry__row,
    body .tf-inquiry__form,
    body .dcb-inquiry__row,
    body .dcb-inquiry__form,
    body .innovation-inquiry__row,
    body .innovation-inquiry form,
    body .dn-form__grid,
    body .dn-form__form,
    body .fr-form__grid,
    body .fr-form__form,
    body .fi-apply__row,
    body .fi-apply__form,
    body .ib-apply__row,
    body .ib-apply__form,
    body .accounts-form__row,
    body .accounts-form,
    body .complaint-form__row,
    body .register-apply-now__form .row {
        gap: 16px !important;
    }

    body .sme-form select,
    body .dcm-inquiry__select,
    body .form-select,
    body .fi-apply__select,
    body .ib-apply__select,
    body .fr-form__field select,
    body .accounts-form__select {
        background-position: right 16px center !important;
        background-size: 12px 8px !important;
        padding-right: 40px !important;
    }

    [dir="rtl"] body .sme-form select,
    [dir="rtl"] body .dcm-inquiry__select,
    [dir="rtl"] body .form-select,
    [dir="rtl"] body .fi-apply__select,
    [dir="rtl"] body .ib-apply__select,
    [dir="rtl"] body .fr-form__field select,
    [dir="rtl"] body .accounts-form__select {
        background-position: left 16px center !important;
        padding-right: 16px !important;
        padding-left: 40px !important;
    }
/*    .midcap.p-0 {
        padding: 0px 16px !important;
    }*/
}

/* ============================================================
   FORM SECTION PADDING & TITLE-GAP UNIFICATION — the outer navy
   "apply/inquiry" card each form sits in above picked its own padding
   independently (ranging 30px–56px, uneven per side across Business, SME,
   Payroll, CashManagement, DryvNow/Freely, IslamicBanking, etc.), so the
   same card shape starts its title at a different distance from the top
   and bottom depending on the page. Standardized here on the padding six
   of these forms — LargeCorporates, MidCaps, DebtCapitalMarkets,
   Syndications, InnovationPartnerships, LoyaltyAndRewards — already used,
   the same way font size/weight and field gap were unified above.
   ContactUs's #contact-form is deliberately excluded: it's a plain
   `.section`, not one of these navy cards, so forcing this card padding
   onto it would be a layout change beyond what was asked here.
   ============================================================ */
body .bh-inquiry,
body .sme-form-section,
body .largecorp-inquiry,
body .midcaps-inquiry,
body .dcm-inquiry,
body .syndications-inquiry,
body .payroll-inquiry,
body .cm-inquiry,
body .tf-inquiry,
body .dcb-inquiry,
body .innovation-inquiry,
body .dn-form,
body .fr-form,
body .fi-apply,
body .ib-apply,
body .accounts-form-section,
body .register-apply-now {
    padding: 40px 24px 30px !important;
}

/* DigitalCorporateBanking's title sits in a flex column with its own 32px
   gap to the form, which stacks on top of the title's own 32px
   margin-bottom above for an ~64px gap — double the 32px every other form
   gets. The margin already does the job here, so the extra gap is zeroed. */
body .dcb-inquiry__inner {
    gap: 0 !important;
}

/* These three forms' closing note is a bare <p> with no margin reset, so
   it carries the browser's default paragraph margin on top of the
   section's own bottom padding — everywhere else that note is explicitly
   zeroed. */
body .cm-inquiry__note,
body .tf-inquiry__note,
body .dcb-inquiry__note {
    margin: 0 !important;
}

@media (max-width: 768px) {
    body .bh-inquiry,
    body .sme-form-section,
    body .largecorp-inquiry,
    body .midcaps-inquiry,
    body .dcm-inquiry,
    body .syndications-inquiry,
    body .payroll-inquiry,
    body .cm-inquiry,
    body .tf-inquiry,
    body .dcb-inquiry,
    body .innovation-inquiry,
    body .dn-form,
    body .fr-form,
    body .fi-apply,
    body .ib-apply,
    body .accounts-form-section,
    body .register-apply-now {
        padding: 32px 16px 24px !important;
    }
}


.NoTransformImg {
    transform: scaleX(1) !important;
}