.page-content {
        scroll-behavior: smooth;
    }

    /* .section-reveal {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .section-reveal.revealed {
        opacity: 1;
        transform: translateX(0);
    } */

    #registration-form .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }


#welcomeBonus .card-header{
    background: linear-gradient(130deg, #00A2B8 0%, #004587 100%);
    border-radius: 15px 15px 0 0;
}

#welcomeBonus .card-header img{
    width: 200px;
    aspect-ratio: 1/1;
}

#welcomeBonus .card-body h5{
    color: var(    --light__grey);
}

.section-spacing{
    margin-top:40px;
}

.title-spacing{
    margin-top: 24px;
}

.linear-dark-blue-bg{
    background: linear-gradient(90deg, #021A3E 9.22%, #043072 59.31%, #0A3A82 100%);

}

.trading-withdrawal-card{
    border-radius:16px;
    padding: 24px;
}

.light-grey__bg{
    background: var( --neutral-color-lighter);
}

.error-red{
    color: var(--error-color);
}

.fw-600{
    font-weight: 600;
}

ul.eligibility__list li{
    list-style-position: inside;
}

#key-terms tr:not(:last-child) {
    border-bottom: 1px solid #E6EBF2;
}

#key-terms tr:last-child {
    border: transparent;
}

#key-terms .border{
    border: 1px solid #E6EBF2;
}

    @media (min-width:991px)and (max-width:1400px) {

        .step-content-1,
        .step-content-3 {
            position: relative;
            left: -15px;
        }

        .step-content-2 {
            position: relative;
            left: 0;
        }
    }

    .k-picker-solid {
        color: var(--secondary-color) !important;
        border-width: 0px !important;
        border-radius: 8px !important;
        background-color: #F9F9F9 !important;
    }

    .k-input-value-text {
        color: var(--secondary-color) !important;
        font-size: 15px;
    }

    .k-input-value-text::before{
        content: "" !important;
        display: none !important;
    }

    .k-dropdownlist{
        height: 55px !important;
        width: 200px !important;
    }

    .k-animation-container{
        margin-top: 15px !important;
    }

    .k-popup{
        border-radius: 8px !important;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15) !important;
    }

    .k-list-optionlabel{
        display: none;
    }

    .filter-section{
        height: 64px !important;
    }

    .k-i-arrow-s::before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 8px;
        background-image: url('/svgs/arrow.svg');
        background-repeat: no-repeat;
    }

    #account-type-buttons {
        display: flex;
        flex-wrap: nowrap; /* prevent buttons from wrapping */
        overflow-x: auto;  /* enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    }

    @media(min-width: 992px) {
    .custom-border__economic-calendar {
        border-right: none !important;
        border-left: none !important;
    }
        .k-dropdownlist{
            width: 200px !important;
        }

        .k-grid tr.k-alt>td {
            background: #f6f6f6 !important;
        }

        .grid-buttons{
            width: auto;
        }
    }

    @media(max-width: 993px) {
        .k-dropdownlist{
            width: 100% !important;
        }
        .k-grid-header{
            display: none !important;
        }

        #grid_mobile td{
            color: var(--secondary-color) !important;
            text-align: left !important;
        }
/*
        #grid_mobile tbody > .k-master-row > .k-hierarchy-cell {
            width: 15px !important;
        } */

        /* .k-detail-row > .k-hierarchy-cell{
            display: none !important;
        } */
    }

    .account-filter-btn {
        height: 55px !important;
        min-width: 70px !important;
        width: auto;
        background-color: #F9F9F9 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        border: 2px solid transparent !important;
        color: var(--secondary-color);
        transition: border-color 0.3s ease;
    }

    .account-filter-btn.selected {
        border-color: var(--primary-color) !important;
    }

    .k-list-item.k-selected,
    .k-selected.k-list-optionlabel {
        color: var(--secondary-color) !important;
        background-color: #F1F1F1 !important;
        margin: 5px 3px;

    }

    .k-grid-content::-webkit-scrollbar {
        width: 8px;
    }

    .k-grid-content::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
        border-radius: 4px;
    }

    .k-grid-content::-webkit-scrollbar-button {
        display: none;
        height: 0;
    }


    /* Symbol */
    /* thead th:nth-child(1) {
        width: 190px !important;
    }
    .k-master-row td:nth-child(1) {
        width: 190px !important;
    } */

    /* Commisions */
    /* thead th:nth-child(2) {
        width: 150px !important;
    }
    .k-master-row td:nth-child(2) {
        width: 150px !important;
    } */

    /* Spreads (Pips) */
    /* thead th:nth-child(3) {
        width: 140px !important;
        max-width: 140px !important;
    }
    .k-master-row td:nth-child(3) {
        width: 140px !important;
        max-width: 140px !important;
    } */

    .k-grid-title-mobile{
        color: #B5B4B5 !important;
    }

    .k-grid-val-mobile{
        color: black !important;
    }

    /* MT4 */
    thead th:nth-child(9) {
        width: 60px !important;
        max-width: 60px !important;
    }
    .k-master-row td:nth-child(9) {
        width: 60px !important;
        max-width: 60px !important;
    }

    /* MT5 */
    thead th:nth-child(10) {
        width: 60px !important;
        max-width: 60px !important;
    }
    .k-master-row td:nth-child(10) {
        width: 60px !important;
        max-width: 60px !important;
    }

    .k-i-expand::before{
        content: "";
        width: 13px;
        height: 8px;
        background-image: url(/svgs/arrow.svg);
        background-repeat: no-repeat;
        rotate: 272deg;
        position: absolute;
        top: 10px;
        left: 8px;
    }

    .k-i-collapse::before{
        content: "";
        width: 13px;
        height: 8px;
        background-image: url(/svgs/arrow.svg);
        background-repeat: no-repeat;
        rotate: 180deg;
        position: absolute;
        top: 12px;
        left: 4px;
    }

    .k-icon k-i-expand{
        display: flex !important;
    }

    .k-searchbox{
        width: 99% !important;
        padding: 8px !important;
        border-radius: 8px !important;
        background-color: #F9F9F9 !important;
        border: 0px solid #F9F9F9 !important;
    }

    .k-toolbar{
        padding: 0px !important;
        display: contents !important;
    }

    .k-grid-toolbar{
        background-color: transparent !important;
        border: 0px solid #F9F9F9 !important;
    }

    .k-grid th,
    .k-grid td {
        text-align: center;
    }

    html[lang="ar"] .k-grid td {
        direction: ltr !important;
    }

    html[lang="ar"] .k-grid td:has(> span) {
        direction: rtl !important;
    }

    .k-grid th {
        font-weight: 700;
        text-align: center !important;
        border-width: 0px;
    }

    .k-cell-inner>.k-link {
        justify-content: center;
        padding: 12px 12px !important;

    }

    .k-pager-numbers .k-link {
        color: var(--primary-color);
    }

    .k-pager-numbers .k-link.k-hover,
    .k-pager-numbers .k-link:hover {
        background-color: #F1F1F1;
    }

    .k-pager-numbers .k-link.k-selected {
        background-color: #F1F1F1;
        border: 0px solid #F1F1F1;
        border-radius: 8px;
    }

    .k-grid-header .k-header{
        background-color: var(--primary-color) !important;
    }

    .k-list-item .k-selected .k-focus{
        color: var(--secondary-color) !important;
    }

    .k-hover.k-list-optionlabel,
    .k-list-item.k-hover,
    .k-list-item:hover,
    .k-list-optionlabel:hover {
        background-color: #F1F1F1;
    }

    .k-list-content{
        padding: 8px !important;
        border-radius: 8px;
    }

    .k-popup>.k-list{
        border-radius: 8px !important;
    }

    .k-picker-solid:focus-within {
        border: 0px solid grey !important;
        box-shadow: none !important;
    }

    .k-list-item.k-selected, .k-selected.k-list-optionlabel{
        border-width: 0px !important;
        border-radius: 8px !important;
    }

    .k-list-item-text{
        font-size: 15px !important;
        color: #81858B;
    }

    .k-hover{
        border-radius: 8px !important;
    }

    k-list-item-text::before{
        content: none !important;
        display: none !important;
    }

    .k-selected > .k-list-item-text{
        color: var(--secondary-color) !important;
    }

    .k-list-item.k-selected,
    .k-selected.k-list-optionlabel {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .k-grid-header-wrap{
        border-radius: 8px;
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .contract-specs-border{
        border: 2px solid #F9F9F9;
        border-radius: 8px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #grid_mobile .k-grid-content {
        margin-top: 10px;
    }

    .k-grid-add-row, .k-grid-footer, .k-grid-header, .k-grouping-header{
        background-color: transparent !important;
        border: 0px solid #F9F9F9 !important;
    }

    .k-pager-sizes{
        display: none !important;
    }

    .acc-specs-grid{
        border: 0px solid white;
        box-shadow: none !important;
        /* height: auto !important; */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .k-master-row span, .k-master-row td{
        color: #81858B !important;
    }

    .gridcell{
        border-width: 0px !important;
    }

    .k-grid td{
        border-width: 0px !important;
        height: 44px !important;
    }

    .img-check{
        width: 16%;
        height: auto;
    }

    .k-grid-header{
        padding-right: 12px !important;
    }

    .hoko-banner {
        background: linear-gradient(to left, #2faf85, #2da98a, #1c80b1);
        border: 1px solid #707070;
        margin-top: -15px;
    }

    .hokocloud-banner {
        background: linear-gradient(to left, #203c83, #407996, #2faf85);
        border: 1px solid #707070;
        margin-top: -15px;
    }

    .hoko-banner-ar {
        background: linear-gradient(to right, #2faf85, #2da98a, #1c80b1);
        border: 1px solid #707070;
        margin-top: -15px;
    }

    .hokocloud-banner-ar {
        background: rgb(48, 175, 133);
        background: linear-gradient(90deg, rgba(81, 62, 169, 1) 5%, rgba(64, 121, 150, 1) 49%, rgba(48, 175, 133, 1) 100%);
        border: 1px solid #707070;
        margin-top: -15px;
    }

    .hoko-trading {
        width: 352px;
        height: 382px;
    }

    .join-btn-hoko {
        font-weight: 600;
        background-color: transparent !important;
        border: 2px solid #ffffff;
        border-radius: 29px;
        padding: 10px 30px 10px 30px;
        color: var(--secondary-color) !important;
        max-width: 350px;
    }

    .hoko-cloud {
        border: 4px solid var(--primary-color);
        border-radius: 48px;
    }

    .more-details-hoko {
        text-decoration: none !important;
    }

    .platforms-banner-img {
        width: 350px;
    }

    .border-left {
        border-left: 1px solid var(--primary-color);
        height: fit-content;
    }

    .img-dim {
        aspect-ratio: 1/1;
        height: 147px;
    }

    .img-why {
        aspect-ratio: 1/1;
        height: 122px;
    }

    .line-sep {
        color: var(--primary-color);
        height: 2px !important;
    }

    .disclaimer {
        color: #626262;
        opacity: 0.5;
    }

    .apply-filter {
        color: #fff;
        border: 2px solid var(--primary-color);
        border-radius: 8px;
        font-weight: 700;
        background: var(--primary-color);
    }

    .search-wrapper{
        width: 97% !important;
        border-radius: 8px !important;
        border-width: 0px !important;
        padding: 0px;
    }

    #custom-search{
        background-color: #F9F9F9 !important;
        border-width: 0px !important;
        border-radius: 8px !important;
    }

    .fa-search:before{
        color: #81858B !important;
    }

    .search-icon {
        top: 60%;
        left: 25px;
        transform: translateY(-50%);
        color: #888;
        font-size: 1rem;
        pointer-events: none;
    }

    @media (max-width: 991px) {
        .hoko-banner .flex-column-reverse-sm {
            display: flex;
            flex-direction: row !important;
        }
    }

    @media (max-width: 768px) {
        .k-grid tbody tr {
            border-left: 1px solid #f2f2f2;
        }

        .k-grid-content tr:last-child>td,
        .k-grid-content-locked tr:last-child>td {
            border-bottom-width: 1px !important;
        }

        .k-grid td {
            border-width: 0px 0 1px 0px !important;
            vertical-align: middle;
        }

        th,
        td {
            border: 0px solid #ddd !important;
            padding: 4px !important;
            text-align: center;
        }

        .dl th,
        .dl td {
            padding: 4px !important;
        }

        .k-grid td {
            background-color: #fff;
            border-bottom: 1px solid #f2f2f2;
            text-align: center;
        }
    }

    .page-content {
        padding-bottom: 55px;
    }

    .hero-section {
        display: flex;
        justify-content: start;
        align-items: center;
        height: 100vh !important;
    }

    i.fas.fa-check {
        font-size: 27px;
    }

    .text-img-center {
        color: #fff;
        font-size: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .fw-banner {
        font-size: 50px;
    }

    .market-leader .text-partner {
        font-size: 1rem;
    }

    .cust-center-container-jp {
        position: relative;
        left: 8%;
    }

    .cust-center-container-cn {
        position: relative;
        left: 10%;
    }

    header {
        text-transform: capitalize;
    }

    @media (min-width: 1199px) {

        .mts-ics {
            top: -150px;
        }
    }

    @media (max-width: 1199px) {

        /* temp */
        .trading-hours td,
        .trading-hours th {

            padding: 5px !important;
            font-size: 12px !important;

        }

        .cust-center-container-jp {
            position: relative;
            left: 5%;
        }

        .cust-center-container-cn {
            position: relative;
            left: 12%;
        }
    }

    @media (max-width: 991px) {
        .cust-center-container-jp {
            position: relative;
            left: 0%;
        }

        .cust-center-container-cn {
            position: relative;
            left: 0;
        }
    }

    .leverage-banner {
        background: rgb(48, 175, 133);
        background: url(../img/dynamic-leverage-banner.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 85%;
    }

    .mobile-banner {
        top: 10px;
        opacity: .1;
        z-index: 0;
        width: 90% !important;
        inset: 10px;
    }

    .banner-content {
        z-index: 2;
    }

    .dynamic-ic {
        display: none;
        opacity: .1;
    }

    @media (max-width: 767px) {
        .center-footer-sm {
            font-size: 34px;
        }

        h2,
        h3 {
            padding: 0 1rem;
        }

        .hom-title {
            width: 100% !important;
        }

        .leverage-banner {
            background: rgb(48, 175, 133);
            background: url(../img/dynamic-leverage-banner.svg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 35%;
        }

        .dynamic-ic {
            display: block;
        }

        .leverage-table td,
        .leverage-table th {
            font-size: 10px;
        }

        .leverage-table h1 {
            font-size: 22px;
        }
    }

    @media (max-width: 500px) {
        .hero-sec {
            height: max-content !important;
        }

        .hero-section {
            height: 100vh;
        }

        .object-contain {
            width: 60px;
        }

        /* .numb {
            font-size: 30px !important;
        }

        .easy-text {
            font-size: 24px !important;
        }

        .easy-img {
            width: 24px !important;
        } */
    }

    @media (min-width: 992px) and (max-width: 1299px) {
        .cust-center-container-ar {
            position: relative;
            right: 10% !important;
        }
    }

    @media (min-width: 1300px) and (max-width: 1599px) {
        .cust-center-container-ar {
            position: relative;
            right: 12% !important;
        }
    }

    .fiveM {
        white-space: pre;
    }

    .hero-text {
        display: flex;
    }


    /* .join-btn-master {
        font-weight: 600;
        background-color: transparent;
        border: 2px solid #fff;
        border-radius: 100px 100px 100px 100px;
        padding: 10px 30px 10px 30px;
        color: var(--secondary-color);
        max-width: 350px;
    } */

    .join-us-button {
        border-radius: 30px !important;
        border: 2px solid #30af85 !important;
        font-size: 20px !important;
    }

    .button-style {
        border-radius: 30px !important;
        border: 2px solid #30af85 !important;
        font-size: 20px !important;
    }

    .button-style-white {
        border-radius: 30px !important;
        font-size: 20px !important;
        border: 2px solid white !important;
    }

    #accountTypeDropdown {
        border-radius: 18px !important;
        border: 2px solid #e6e7e8;
        font-size: 20px !important;
        color: white;
        background-color: #30af85;
        text-align: center;
    }

    .k-i-search::before{
        color: #81858B;
    }

    .k-grid td:first-child,
    .k-grid th:first-child {
        width: 14rem !important;
    }

    .k-input-inner::placeholder {
        color: #81858B;
    }

    .k-column-title {
        font-size: 15px !important;
        font-weight: 500;
    }

    .ready-input {
        width: 100% !important;
        padding: 10px;
        border: 1px solid lightgrey;
    }

    .button-image {
        width: 14px;
    }

    .button-image-container {
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
    }


    /** Button primary ************/
    .button-primary {
        font-size: 16px !important;
        border: 1px solid var(--secondary-color);
        background-color: var(--secondary-color);
        color: var(--neutral-color-lighter);
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --primary-image-color: var(--neutral-color-lighter);
    }

    .button-primary path,
    button-primary svg {
        fill: var(--primary-image-color) !important;
    }

    .button-primary:hover {
        border: 1px solid var(--secondary-color-darker);
        background-color: var(--secondary-color-darker);
        color: var(--neutral-color-lighter) !important;
    }

    /** Button primary End ************/


    /** Button Secondary ************/
    .button-secondary {
        font-size: 16px !important;
        border: 1px solid var(--neutral-color-lighter);
        background-color: var(--neutral-color-lighter);
        color: var(--secondary-color);
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
    }

    .button-secondary path {
        fill: var(--secondary-color);
    }

    .button-secondary:hover {
        border: 1px solid var(--neutral-color-light);
        background-color: var(--neutral-color-light);
        color: var(--secondary-color) !important;
    }

    /** End Button Secondary ************/


    /** Button Ghost ************/
    .button-ghost {
        font-size: 16px !important;
        border: 1px solid white;
        background-color: transparent;
        color: white;
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --ghost-image-color: white;
    }

    .button-ghost:hover {
        border: 1px solid white;
        color: var(--secondary-color) !important;
        --ghost-image-color: var(--secondary-color);
        background-color: white;
    }

    .button-ghost path {
        fill: var(--ghost-image-color);
    }

    /** End Button ghost ************/

    /** Button Primary Ghost ************/
    .button-primary-ghost {
        font-size: 16px !important;
        border: 1px solid var(--secondary-color);
        background-color: transparent;
        color: var(--secondary-color);
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --ghost-image-color: var(--secondary-color) !important;
    }

    .button-primary-ghost:hover {
        background-color: var(--secondary-color);
        color: white !important;
        --ghost-image-color: white !important;
    }

    .button-primary-ghost path {
        fill: var(--ghost-image-color) !important;
    }

    /** End Button ghost ************/


    /** Button Stroke ************/
    .button-stroke {
        font-size: 16px !important;
        background-color: white;
        border: 1px solid var(--secondary-color);
        color: var(--secondary-color);
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --stroke-image-color: var(--secondary-color) !important;
    }

    .button-stroke:hover {
        background-color: var(--secondary-color);
        color: white !important;
        --stroke-image-color: white !important;
    }

    .button-stroke path {
        fill: var(--stroke-image-color) !important;
    }

    /** End Button Stroke ************/

    /** Button White ************/
    .button-white {
        font-size: 16px !important;
        background-color: rgba(216, 217, 218, 0.6);
        border: 1px solid white;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --white-image-color: white;
    }

    .button-white:hover {
        border: 1px solid white;
        color: var(--secondary-color-darker);
        background-color: white !important;
        --white-image-color: var(--secondary-color-darker);
    }

    .button-white path {
        fill: var(--white-image-color);
    }

    /** End Button White ************/

    /** Button link ************/
    .button-link {
        font-size: 16px !important;
        background-color: transparent;
        border: 1px solid transparent;
        color: var(--primary-color) !important;
        text-decoration: underline !important;
        cursor: pointer;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        --link-image-color: black;
    }

    .button-link:hover {
        color: var(--primary-color) !important;
        --link-image-color: var(--primary-color);
    }

    .button-link path {
        fill: var(--link-image-color);
    }

    /** End Button link ************/

    .base-button {
        padding-right: 16px !important;
    }

    .base-button-ar {
        padding-right: 22px !important;
    }

    .button-image-container-right {
        width: 24px !important;
    }

    .button-image-container-right svg {
        margin-left: 8px;
        width: 15px !important;
        /* height: 15px !important; */
    }

    [dir="rtl"] .button-image-container-right svg {
        margin-right: 12px;
        transform: rotateY(180deg) !important;
    }

    .button-image-container-right {
        display: flex;
        align-items: center;
    }


        @media (max-width: 768px) {
        .button-primary__swap {
            min-width: 0px !important;
            width: 50px !important;
        }

        .page-banner {
            background: linear-gradient(130deg, #00A2B8 0%, #004587 100%);
        }

        .page-banner-img {
            height: 90px !important;
        }
    }

    @media (min-width: 769px) {
        .page-banner{
            background: rgb(1, 51, 127, 1);
            background: linear-gradient(130deg, #00A2B8 0%, #004587 100%);
        }

        [dir="rtl"] .page-banner{
            background: rgb(1, 51, 127, 1);
            background: linear-gradient(130deg, #004587 0%, #00A2B8 100%);
        }
    }

    @media(min-width:567px) and (max-width:767px) {
        .page-banner, .campaign-page-banner {
            padding-top: 50px;
        }
    }

    .multi-asset-icon {
        background-color: var(--neutral-color-lighter);
        border-radius: 50%;
        padding: 12px;
        width: 77px;
        height: 77px;
    }

    .text-neutral {
        color: #81858B !important;
    }

    .vertical-stroke img {
        width: 100%;
    }

    .align-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .award-card {
        border-radius: 8px !important;
        background-color: var(--neutral-color-lighter) !important;

    }

    .awards-card-title {
        font-size: 16px !important;

    }

    .awards-card-image {
        height: 25px !important;
    }

    .award-section .slick-initialized .slick-slide {
        width: auto !important;
    }

    .margin-comm {
        margin-left: 4px !important;
    }

    /* Announcement bar */
    .announcement-bar {
        background-color: #01337F;
        color: #FFF;
    }

    .announcement-bar .big-flag {
        font-size: 24px;
    }

    .announcement-bar .an-item {
        color: #FFF;
        transition: 0.3s;
    }

    .announcement-bar .an-item:hover {
        color: #30af85;
        transition: 0.3s;
    }

    .announcement-bar .language-selector {
        position: relative;
        direction: ltr;
    }

    .announcement-bar .language-toggle {
        background: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        color: white;
    }

    .announcement-bar .dropdown-arrow {
        font-size: 12px;
    }

    /* Mobile version stays as is */
    @media (max-width: 992px) {
        .announcement-bar .language-dropdown {
            display: none;
            position: absolute;
            right: 0;
            background: white;
            list-style: none;
            padding: 10px;
            margin: 0;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            min-width: 150px;
            z-index: 10;
        }

        .announcement-bar .language-dropdown.show {
            display: block;
        }

        .announcement-bar .language-dropdown div {
            padding: 6px 0; /* Adds vertical space between items */
        }

        .announcement-bar .language-dropdown div a {
            color: black !important;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 3px;
            padding:0px 12px;
        }
    }

    .announcement-bar .language-dropdown div:hover {
background-color: #f1f1f1;
    }

    /* Desktop layout with three columns */
    @media (min-width: 992px) {
        .announcement-bar .language-dropdown {
            display: none;
            position: absolute;
            right: 0;
            background: white;
            padding: 15px;
            margin: 0;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            min-width: 650px;
            z-index: 999999;
            /* display: grid; */
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .announcement-bar .language-dropdown div {
            text-align: left;
            padding: 5px 10px;
        }

        .announcement-bar #language-dropdown div a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: black !important;
            text-decoration: none !important;
        }

        .announcement-bar .language-dropdown div:hover {
            background: #f1f1f1;
            border-radius: 5px;
        }

        .announcement-bar .language-dropdown.show {
            display: grid;
        }
    }

    /* Arabic support */
    html[lang="ar"] .announcement-bar .language-dropdown {
        right: auto !important;
        left: 0 !important;
    }


    @media (min-width: 992px) and (max-width: 1399px) {
        .cust-header-btn {
            min-width: 85px !important;
        }

        .header-content .button-primary {
            font-size: 12px !important;
            padding-right: 10px;
            padding-left: 10px;
        }

        .header-content .button-stroke {
            font-size: 12px !important;
            padding-right: 10px;
            padding-left: 10px;
        }

        .header-content .navbar-expand-lg .navbar-nav .nav-link {
            /* padding-right: 0px !important; */
            padding-bottom: 40px;
        }

        .header-content ul {
            font-size: 12px !important;
        }

        .select-container {
            font-size: 14px;
        }
    }

    @media (min-width: 1400px) {
        .header-content .navbar-expand-lg .navbar-nav .nav-link {
            padding-bottom: 40px;
        }
    }

    .k-icon {
        font-family: WebComponentsIcons !important;
    }

    html .base-button {
        min-width: 135px !important;
    }

    @media(max-width: 990px) {
        html[lang="jp"] section:not(#withdraw-section,#deposit-section) .base-button {
            min-width: 200px !important;
        }

        html[lang="en"] .base-button {
            min-width: 135px !important;
        }

        html[lang="fr"] .base-button {
            min-width: 183px !important;
        }

        html[lang="es"] .base-button {
            min-width: 176px !important;
        }

        html[lang="pt"] .base-button {
            min-width: 165px !important;
        }

        html[lang="ar"] .base-button-ar {
            min-width: 130px !important;
        }

        html[lang="vi"] .base-button {
            min-width: 165px !important;
        }

        html[lang="zh-Hans"] .base-button {
            min-width: 135px !important;
        }

        html[lang="zh-Hant"] .base-button {
            min-width: 135px !important;
        }

        html[lang="th"] .base-button {
            min-width: 135px !important;
        }

        html[lang="ko"] .base-button {
            min-width: 165px !important;
        }

        #assets-section .nav-link {
            display: none;
        }
    }

    .text-muted{
        color: #80848a !important;
    }

    .campaign-form-field::placeholder, .campaign-form-field {
        color: var(--secondary-color-dark) !important;
        background-color: #f8f8f8 !important;
    }

    .trading-miles__card{
        border: 1px solid #CCD6E5;
        border-radius: 20px;
        background-color: #F9F9F9;
        min-height: 380px !important;

    }

    .trading-miles__card-title h2{
        font-size: 30px !important;
    }

    .trading-miles__card-image img{
        width: 120px !important
    }

    .loyalty-tiers-section{
        background-image: url('/img/trading-miles/loyalty-tiers-bg.webp');
    }

    .membership-tiers-table{
        background-color: white !important;
        padding: 20px;
        border-radius: 15px;
    }

    .promotion-section, .demotion-section{
        padding: 20px;
        background: rgba(26, 62, 102, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid #01337F;
        border-radius: 20px;
    }

    .earning-miles-desc{
        font-size: 22px !important;
    }

    .earning-miles-table{
        border: 1px solid #D8D9DA;
        background-color: white !important;
        padding: 10px;
        border-radius: 15px;
    }

    .earning-rules{
        background-image: url('/img/trading-miles/earning-rules-bg.webp');
    }

    .trading-miles__card-desc > p{
        font-size: 16px !important;
    }

    .custom-border__economic-calendar {
        border: 1px solid #B5B4B5;
        background-color: white !important;
        padding: 16px;
        border-radius: 16px;
    }