* {
    box-sizing: border-box;
  
}
body {
    font-family: 'Co Headline', sans-serif !important;
    margin: 0;
    background: white;
    scrollbar-width: none;
}
body::-webkit-scrollbar {
    display: none;
}

.HeaderDiv {
    background: #FFFFFF;
    height: 70px;
    padding: 0px 30px;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    width:fit-content;
    display: flex;
    align-items: center;
    gap: 40px;
}


.nav {
    display: flex;
    gap: 28px;
}

.nav-item {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
    color: #555;
    transition: color 0.3s;
}

    .nav-item:hover {
        color: #6a3cff;
    }

    .nav-item.active {
        color: #6a3cff;
    }

        .nav-item.active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: #6a3cff;
            border-radius: 50%;
        }


.content-panel {
    display: none;
    animation: fade 0.25s ease;
}

    .content-panel.active {
        display: block;
    }
#WebMenu {
    position: absolute;
    top: 62px;
    left: 0;
    z-index: 9;
    opacity: 0;
    width: 100%;
    transform: translateY(-15px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    #WebMenu.active {
        z-index:999;
        position:fixed;
        width: 100%;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta {
    font-size: 14px !important;
    height: 35px;
    text-decoration: unset;
    background: #00C4B3 !important;
    color: white !important;
    border: none;
    padding: 0px 15px;
    border-radius: 50px;
    font-weight: 400;
    cursor: pointer;
    align-items: center;
    display: flex;
    justify-content: center;
}



.slider {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.6s ease;
}

    .slides img {
        min-width: 100%;
        object-fit: cover;
    }

.header-right {
    justify-content:end;
    display: flex;
    align-items: center;
    gap: 20px;
}

.link {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.dropdown span {
    font-size: 12px;
}




.FooterSection {
    margin: 50px 20px 30px 20px;
}

.margin-top {
    margin-top: 30px
}

.marginLeft25 {
    margin-left: 25px;
}

.z1 {
    z-index: 1;
}

.footer-section-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.HeaderMenu {
    font-size: 14px;
    text-decoration: none;
    color: #003B70;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}
.MainMenuItems {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 16px;
    text-decoration: none;
    color: #003B70;
    font-weight: 300;
}
.top-menu-web {
    padding-left: 30px;
    flex-direction: row;
    display: flex;
    gap: 25px;
    font-size: 16px;
    align-items: center;
    padding-top: 10px;
    padding-top: 0px;
}
.active-MainMenuItems {
    color: #00C4B3;
  font-weight:500;
    font-size: 16px;
    border-top: 1px solid #00C4B3;
}
.HeaderLogo {
    Width: 145.99px;
    Height: 20.6px;
}
.lang {
    text-decoration: none;
    color: #003B70;
    font-size:16px;
    font-weight:400;
}
.w-fit{
    width:fit-content;
}
.Menu {
    font-size: 27px;
    color: var(--GreenColor);
    display: flex;
}
.MenuBtn {
    border: 0px;
    box-shadow: unset;
     background: transparent; 
    width: 45px;
    height: 30px;
}
.HeaderTopMenu {
    top: 62px;
    z-index:2;
    position: relative;
}

.search-box {
    margin: auto;
    position: relative;
    width: 25%;
}

    /* input */
    .search-box input {
        font-weight: 300;
        width: 100%;
        padding: 7px 45px 7px 40px;
        border-radius: 30px;
        border: none;
        outline: none;
        background: #F3F3F3;
        font-size: 14px;
        color: #A8A8A8;
      /*  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);*/
    }
        /* placeholder */
        .search-box input::placeholder {
            color: #9e9e9e;
            font-size: 15px;
        }
    /* icon */
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #A8A8A8;
    font-size: 15px;
    pointer-events: none;
}

    .NewSection {
        margin: auto;
    }

    @media (max-width: 768px) {
        .HideinMobile {
            display: none !important;
        }

        .header-right--compact {
            gap: 16px;
        }

        .header-right--compact .search-box {
            width: auto;
            margin: 0;
        }
    }

    .WebMenu {
        height: fit-content;
        gap: 7px;
        align-items: start;
        width: 100% !important;
        display: flex !important;
        justify-content: start;
        text-align: left;
    }
    /* ======================================================
              Responsive Slider css
====================================================== */


    .egb-slider {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .egb-slider__wrapper {
        flex: 1;
    }

    .egb-slider__track {
        display: flex;
        gap: 16px;
        flex-wrap: wrap; /* desktop — no sliding, cards wrap naturally */
    }
    /* Arrows hidden on desktop */
    .egb-slider__arrow {
        display: none;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        background-color: #003B70;
        border: none;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: background 0.2s;
    }

    .egb-slider__arrow--hidden {
        background: #DDDDDD;
        cursor: not-allowed;
        pointer-events: none;
    }

    .egb-slider__arrow--left svg {
        transform: rotate(180deg);
    }

    .egb-slider__arrow svg {
        width: 11px;
        height: 19px;
        fill: currentColor;
    }
    /* ──────────────────────────────────────────
   MOBILE — slider activates below 768px
────────────────────────────────────────── */
    @media (max-width: 768px) {
        
        * {
            touch-action: manipulation;
        }

        .MainMenuItems {
            font-size: 16px;
        }
        .egb-slider {
            gap: 8px;
        }

        .egb-slider__wrapper {
            overflow: hidden;
        }

        .egb-slider__track {
            flex-wrap: nowrap;
            transition: transform 0.4s ease;
            will-change: transform;
        }

        .egb-slider__arrow {
            display: flex;
        }

        .egb-slider__arrow--hidden {
            display: none;
        }
    }
    /* ══════════════════════════════════════════
   DYNAMIC CAROUSEL ARROWS — General CSS
   Add this once to your main stylesheet
   Works for ALL sections automatically
══════════════════════════════════════════ */
    /* ── Disabled state: at either end, or nothing to scroll at all ──
       Grey and inert; the live state is the navy below. pointer-events:none so a
       greyed arrow cannot be clicked, matching .currency__arrow.hidden. */
    .menu-scroll-arrow.hidden {
        background: #DDDDDD;
        cursor: not-allowed;
        pointer-events: none;
    }
    /* ── Arrow Row: sits below the track, centered ── */
    .menu-arrows-row {
        display: none; /* hidden on desktop by default */
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
    }
    /* ── Show arrows on tablet + mobile only ── */
    @media (max-width: 1024px) {
        .menu-arrows-row {
            display: flex !important;
        }
    }
    /* ── Arrow Button ── */
    .menu-scroll-arrow {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        background-color: #003B70;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
    }




    body {
        font-family: 'Co Headline', sans-serif !important;
    }




/* Remove default browser styling */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}

    /* Checked state */
    input[type="radio"]:checked {
        border-color: #00c4b3; /* your brand color */
        background-color: white;
    }

        /* Inner dot when checked */
        input[type="radio"]:checked::after {
            border: 2px solid #00C4B3;
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background-color: #00C4B3;
        }

    /* Focus state - removes the black outline */
    input[type="radio"]:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 196, 179, 0.2);
    }

/* ═══════════════════════════════════════════════════════
   UNIVERSAL SECTION SPACING
   Applies to every direct child of <main> automatically —
   no need to target each page's class names individually.
   !important is required because partial-injected CSS files
   (channelsSection.css, currency.css) load after this file
   and would otherwise override via class specificity.
   Web:    30px horizontal | 20px vertical (× 2 = 40px gap)
   Mobile: 15px horizontal | 30px vertical (× 2 = 60px gap)
═══════════════════════════════════════════════════════ */
/*main > div,
main > section {
    padding: 20px 30px;
}*/

/*@media (max-width: 767px) {
    main > div,
    main > section {
        padding: 30px 15px;
    }

}*/

/* ── Business page: sections are inside .bh-page (not direct children of main)
   so the universal rule above doesn't reach them.
   Ensure their padding is explicit and wins. ── */
.bh-products  { padding: 40px 30px 20px !important; }
.bh-corp      { padding: 20px 30px !important; }
.bh-why       { padding: 20px 30px !important; }
.bh-channels  { padding: 20px 30px !important; }
.bh-currency  { padding: 20px 30px !important; }
.bh-cta       { padding: 20px 30px 40px !important; }

@media (max-width: 767px) {
    .bh-products  { padding: 40px 15px 30px !important; }
    .bh-corp      { padding: 30px 15px !important; }
    .bh-why       { padding: 30px 15px !important; }
    .bh-channels  { padding: 30px 15px !important; }
    .bh-currency  { padding: 30px 15px !important; }
    .bh-cta       { padding: 30px 15px 40px !important; }
}

/* ── Exceptions: page wrapper divs and nav overlays get padding: 0 ──
   These are direct children of <main> but are wrappers, not sections.
   Padding is applied on the sections/divs INSIDE them instead. ── */
#WebMenu,
.mobile-menu,
.bh-page,
.cash-management-page,
.careers-page,
.dcb-page,
.dcm-page,
.feedback-page,
.ir-page,
.largecorp-page,
.largecorp-hero,
.midcaps-page,
.midcaps-hero,
.segments-page,
.sus-page-wrap,
.syndications-page,
.syndications-hero,
.trade-finance-page,
.cards-page,
.Personal_Segment_PageBody {
    padding: 0 !important;
}

/* ── First & last section: full 40px (not shared 20px) ── */
main > #section-currency {
    padding-bottom: 40px !important;
}
.BtnArrowSize{
    font-size:28px !important;
    color:white !important;
}
@media (max-width: 767px) {
    .phoneIcon {
        background: black;
        padding: 5px;
        border-radius: 50%;
        width: 25px !important;
        height: 25px !important;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 16px !important;
    }
    .footer-subscribe__store-icons {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: center;
    }
    .back-to-top {
       
        width: 45px !important;
        height: 45px !important;

    }
    .menu-scroll-arrow{
        width:35px !important;
        height:35px !important;
    }
    .BtnArrowSize {
        font-size: 26px !important;
        color: white !important;
    }
    .BtnArrowSize {
      
        font-size: 15px !important;
    }
    main > #section-currency {
        padding-bottom: 40px !important;
    }
    .menu-header .menu-btn {
        border-radius: 20px;
        flex: 0 0 auto !important;
        width: 140px !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .menu-header {
        gap: 20px;
    }
    .Center-Mob{
        text-align:center !important;
    }
}













.text-danger {
    width: 100%;
    text-align: start;
    font-size: 12px;
    color: rgb(255 129 53) !important;
}
.alert-success {
    width: fit-content !important;
}
input {
    color: #003B70;
}