@import url('fonts.css');


body {
    font-family: 'Google Sans';
    background-color: var(--bg-light-01);
    color: var(--text-secondary-dark);
}
.navbar-brand img {
         width: 200px !important; 
    }
/* Legal documents */


.legal-documents-heading {
    max-width: 67rem;
    margin: auto
}

    .legal-documents-heading h1 {
        margin: 0;
        font-size: clamp(3.4rem,7vw,6.25rem);
        font-weight: 700;
        letter-spacing: -.065em;
        line-height: 1
    }

        .legal-documents-heading h1 span {
            color: var(--primary-theme-color)
        }

    .legal-documents-heading > i {
        display: block;
        width: clamp(2.5rem,4vw,3.5rem);
        margin: clamp(1rem,2vw,1.45rem) auto;
        border-top: .3rem solid var(--primary-theme-color);
        border-radius: 99rem
    }

    .legal-documents-heading p {
        margin: 0;
        color: #53677c;
        font-size: clamp(.95rem,1.3vw,1.18rem);
        line-height: 1.5
    }

.legal-documents-tab-heading {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem,3vw,2.5rem);
    margin-bottom: clamp(2rem,4vw,3rem);
    margin-left: 16px;
}

.legal-documents-section-icon {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: clamp(5.2rem,8vw,7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--secondary-theme-color);
    box-shadow: 0 0 0 1px var(--secondary-theme-color),0 0 0 .75rem var(--bg-light-01),0 0 0 .85rem color-mix(in srgb,var(--secondary-theme-color) 70%,transparent)
}

    .legal-documents-section-icon:before {
        position: absolute;
        inset: -1rem;
        border: 2px dotted #617b89;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        content: ''
    }

    .legal-documents-section-icon svg {
        width: 54%;
        stroke: var(--primary-theme-color);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2
    }

.legal-documents-tab-heading > div:last-child {
    min-width: 0;
    padding-left: clamp(1.25rem,3vw,2.5rem);
    border-left: 1px solid var(--border-light)
}

.legal-documents-nav .nav-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: clamp(1.4rem,2vw,2rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.25
}

    .legal-documents-nav .nav-link.active, .legal-documents-nav .nav-link:hover {
        background: transparent;
        color: var(--text-secondary-dark);
        text-align:left;
    }

.legal-documents-heading-line {
    display: block;
    width: 3.2rem;
    margin-top: 1rem;
    border-top: 3px solid var(--primary-theme-color);
    border-radius: 99rem
}

.legal-document-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    column-gap: clamp(1rem,2vw,1.45rem);
    height: 100%;
    padding: clamp(1.55rem,2.3vw,2rem);
    border: 1px solid var(--border-light);
    border-radius: 1.2rem;
    background: var(--bg-card);
    box-shadow: 0 .65rem 1.5rem rgba(16,64,66,.045);
    transition: transform .2s ease,box-shadow .2s ease;
    overflow: hidden;
}

    .legal-document-card:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        border-radius: 1rem 0 0 1rem;
        background: var(--primary-theme-color);
        content: ''
    }

    .legal-document-card:hover {
        box-shadow: 0 .85rem 1.9rem rgba(16,64,66,.1);
        transform: translateY(-.2rem)
    }

.legal-document-icon {
    display: grid;
    place-items: center;
    height: 70px;
    width: 70px;
    border-radius: 1.1rem;
    background: var(--bg-primary-light)
}

    .legal-document-icon svg {
        width: 57%;
        stroke: var(--secondary-theme-color);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2
    }

    .legal-document-icon .legal-icon-detail {
        stroke: var(--primary-theme-color)
    }

.legal-document-copy h2 {
    margin: 0;
    color: var(--text-secondary-dark);
    font-size: clamp(1.1rem,1.5vw,1.35rem);
    font-weight: 700;
    line-height: 1.3
}

.legal-document-copy p {
    margin: .8rem 0 0;
    color: #53677c;
    font-size: clamp(.8rem,1vw,.94rem);
    line-height: 1.55
}

.legal-document-link {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    color: #80b500;
    font-size: clamp(.78rem,.95vw,.9rem);
    font-weight: 600;
    text-decoration: none
}

    .legal-document-link:hover {
        color: #639100
    }

    .legal-document-link > span:first-child {
        display: grid;
        place-items: center;
        width: 2.55rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1
    }

/* Regulations */

.regulations-heading h1 {
    margin: 0;
    font-size: clamp(3.3rem,7vw,6.5rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1
}

.regulations-heading > i, .regulations-trust-content > i {
    display: block;
    width: clamp(2.5rem,4vw,3.4rem);
    margin: clamp(1rem,2vw,1.5rem) auto;
    border-top: .3rem solid var(--primary-theme-color);
    border-radius: 99rem
}

.regulations-heading p {
    margin: 0;
    color: #53677c;
    font-size: clamp(.95rem,1.45vw,1.25rem);
    line-height: 1.5
}

.regulations-divider {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: clamp(.8rem,2vw,2rem);
    margin-top: clamp(2.5rem,5vw,4rem)
}

    .regulations-divider span {
        height: 1px;
        background: var(--border-light)
    }

        .regulations-divider span::after {
            display: block;
            width: .5rem;
            aspect-ratio: 1;
            margin-left: auto;
            border-radius: 50%;
            background: var(--primary-theme-color);
            content: ''
        }

        .regulations-divider span:last-child::after {
            margin-left: 0
        }

    .regulations-divider b {
        font-size: clamp(.8rem,1.3vw,1.1rem);
        font-weight: 700
    }


.regulation-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: clamp(1rem,2vw,1.6rem);
    background: var(--bg-card);
    box-shadow: 0 .7rem 1.8rem rgba(16,64,66,.07)
}

    .regulation-card + .regulation-card {
        margin-top: clamp(1.3rem,2.5vw,2.3rem)
    }

.regulation-copy {
    padding: clamp(1.5rem,3.2vw,3.6rem)
}

.regulation-label {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #79b500;
    font-size: clamp(.7rem,.9vw,.82rem)
}

.regulation-icon {
    display: grid;
    place-items: center;
    padding: .55rem .75rem;
    border-radius: .75rem;
    background: var(--bg-primary-light);
    font-size: 1.5rem
}

.regulation-copy h2 {
    margin: clamp(.8rem,1.5vw,1.3rem) 0 0;
    font-size: clamp(3rem,5vw,4.5rem);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: 1
}

.regulation-copy h3 {
    margin: .3rem 0 1rem;
    font-size: clamp(1rem,1.45vw,1.25rem);
    font-weight: 700
}

.regulation-copy p {
    max-width: 29rem;
    margin: 0;
    color: #53677c;
    font-size: clamp(.8rem,1vw,.94rem);
    line-height: 1.65
}

.license-number {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: fit-content;
    margin-top: clamp(1.3rem,2.3vw,2rem);
    padding: .7rem 1rem;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: linear-gradient(135deg,var(--bg-card),var(--bg-primary-light))
}

    .license-number > span {
        display: grid;
        place-items: center;
        padding: .4rem .6rem;
        border-radius: .6rem;
        background: var(--bg-primary-light);
        color: #6cab00;
        font-size: 1.35rem
    }

    .license-number small, .license-number strong {
        display: block
    }

    .license-number small {
        font-size: .65rem;
        font-weight: 500
    }

    .license-number strong {
        font-size: clamp(1rem,1.5vw,1.35rem)
    }


.fsc-visual::after {
    border-radius: 1rem;
    transform: rotate(-6deg)
}


.regulations-trust {
    display: grid;
    grid-template-columns: clamp(7rem,18vw,15rem) 1fr;
    align-items: center;
    gap: clamp(1.5rem,4vw,3rem);
    padding: clamp(1.5rem,3.5vw,3rem);
    border-radius: clamp(1rem,2vw,1.5rem);
    background: radial-gradient(circle at 85% 15%,rgba(182,240,0,.12),transparent 27%),var(--secondary-theme-color);
    color: var(--text-light)
}

.regulations-trust-mark {
    display: grid;
    place-items: center;
    justify-self: center;
    width: clamp(6rem,12vw,10rem);
    aspect-ratio: 1;
    border: 1px solid rgba(182,240,0,.65);
    border-radius: 50%;
    color: var(--primary-theme-color);
    font-size: clamp(3rem,7vw,6rem);
    font-weight: 700
}

.regulations-trust-content h2 {
    margin: 0;
    font-size: clamp(1.45rem,2.4vw,2.1rem);
    font-weight: 700
}

.regulations-trust-content > i {
    margin: .7rem 0 1rem;
    border-width: .16rem
}

.regulations-trust-content p {
    margin: 0;
    color: var(--text-light);
    font-size: clamp(.86rem,1.1vw,1rem);
    line-height: 1.55
}

.regulations-values {
    margin-top: clamp(1.3rem,2.5vw,2rem)
}

    .regulations-values > div > div {
        display: flex;
        align-items: center;
        gap: .65rem;
        font-size: clamp(.7rem,.95vw,.84rem);
        font-weight: 600;
        line-height: 1.35
    }

    .regulations-values span {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: clamp(2.3rem,3.4vw,3rem);
        aspect-ratio: 1;
        border: 1px solid var(--primary-theme-color);
        border-radius: 50%;
        color: var(--primary-theme-color);
        font-size: 1.15rem
    }

/* Promotions */

.deposit-reward-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2rem
}

.built-card,
.process-card,
.challenge-card,
.competition-card,
.deposit-reward-card, .deposit-reward-step, .deposit-reward-reason {
    height: 100%;
    padding: 1.3rem;
    border-radius: .8rem;
    text-align: center;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


.built-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 50px;
}

.process-card img,
.challenge-card img,
.competition-card img,
.deposit-reward-card img {
    margin-bottom: 1rem
}


.deposit-reward-checklist {
    display: grid;
    gap: .65rem;
    padding: 0;
    margin: 1.5rem 0;
    list-style: none;
    color: var(--text-gray);
    font-size: 16px;
}

    .deposit-reward-checklist li:before {
        content: '✓';
        display: inline-grid;
        place-items: center;
        width: 1.1rem;
        height: 1.1rem;
        margin-right: .6rem;
        border-radius: 50%;
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
        font-weight: 700;
        font-size: 10px;
    }

.deposit-reward-step {
    position: relative
}

.challenge-card > span {
    width: 1.8rem;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-theme-color);
}

.process-card > span,
.deposit-reward-step > b {
    display: grid;
    place-items: center;
    width: 1.8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-theme-color)
}

.deposit-reward-step img {
    margin: .6rem auto
}

.deposit-reward-reason {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left
}

    .deposit-reward-reason img {
        width: 30%;
        height: auto
    }

.deposit-reward-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 100px;
    padding: 2rem 3rem;
    border-radius: 1rem;
    background: var(--secondary-theme-color);
    color: var(--text-light);
    overflow: hidden
}

    .deposit-reward-cta h2 {
        margin: 0 0 .5rem;
        color: var(--text-light);
        font-size: clamp(1.5rem,2.5vw,2.2rem);
        text-transform: capitalize;
    }

    .deposit-reward-cta p {
        max-width: 30rem;
        margin: 0 0 1rem;
        color: var(--text-light)
    }

    .deposit-reward-cta img {
        width: 40%;
        height: auto
    }




.copytrade-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem
}



.copytrade-strategy, .copytrade-tools {
    background: var(--bg-light-01)
}

.copytrade-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


.copytrade-icon {
    display: grid;
    place-items: center;
    flex: 0 0 4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: var(--primary-theme-color);
    font-size: 2rem
}

.competition-checks,
.copytrade-checklist {
    padding: 0;
    margin: 1.5rem 0;
    list-style: none
}

    .competition-checks li,
    .copytrade-checklist li {
        margin: .75rem 0
    }

        .competition-checks li:before,
        .copytrade-checklist li:before {
            content: '✓';
            display: inline-grid;
            place-items: center;
            width: 1.2rem;
            aspect-ratio: 1;
            margin-right: .7rem;
            border-radius: 50%;
            background: var(--primary-theme-color);
            font-weight: 700;
            font-size: 10px;
        }

.copytrade-role-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.copytrade-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 100px;
    padding: 2.5rem;
    border-radius: 1.3rem;
    background: var(--secondary-theme-color);
    color: var(--text-light)
}

    .copytrade-cta p {
        color: var(--text-light)
    }

.promotions-feedback {
    display: inline-flex;
    align-items: center;
    gap: clamp(2rem,5vw,4rem);
    margin-top: 1.75rem
}

    .promotions-feedback span {
        font-size: 1.3em
    }

.perk-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.program-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.promotions-hero-links {
    display: flex;
    gap: clamp(1rem,2.5vw,2.5rem);
    margin-top: clamp(2.5rem,5vw,4rem)
}

    .promotions-hero-links span svg {
        margin: 0 auto;
    }

    .promotions-hero-links span {
        display: grid;
        gap: .3rem;
        color: #85b900;
        font-size: clamp(1.2rem,2vw,1.8rem);
        font-weight: 700;
        text-align: center
    }

    .promotions-hero-links small {
        color: var(--text-secondary-dark);
        font-size: clamp(.62rem,.8vw,.75rem);
        font-weight: 600
    }

.promotions-hero-image {
    display: block;
    width: 70%;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

.journey-item {
    position: relative;
    text-align: center
}

.journey-number {
    display: grid;
    place-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    border: 1px solid var(--primary-theme-color);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700
}

.journey-item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1rem;
    width: 200px;
}

.journey-item h2 {
    max-width: 13rem;
    margin: 0 auto;
    font-size: clamp(1rem,1.45vw,1.3rem);
    font-weight: 700;
    line-height: 1.15
}

    .journey-item h2 em {
        display: block;
        font-size: .75em
    }

.journey-item i, .perk-card i, .program-card i, .status-card > i {
    display: block;
    width: 2.3rem;
    margin: 1rem auto;
    border-top: 2px solid var(--primary-theme-color)
}

.journey-item p {
    max-width: 15rem;
    margin: 0 auto;
    color: var(--text-gray);
    font-size: clamp(.75rem,1vw,.9rem);
    line-height: 1.5
}

.promotions-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    margin: clamp(2.5rem,5vw,4rem) auto 0;
    padding: .85rem 1.4rem;
    border: 1px solid color-mix(in srgb,var(--primary-theme-color) 60%,var(--border-light));
    border-radius: .7rem;
    color: var(--text-gray);
    font-size: .72rem
}

    .promotions-note b {
        display: grid;
        place-items: center;
        padding: .15rem .35rem;
        border-radius: .3rem;
        background: var(--primary-theme-color);
        color: var(--text-light)
    }

.status-benefits {
    width: 260px;
}

.promotions-intro {
    margin-bottom: clamp(2rem,4vw,3.5rem)
}

    .promotions-intro h2 {
        margin: .7rem 0;
        font-size: clamp(2.5rem,4.7vw,5.2rem);
        font-weight: 700;
        letter-spacing: -.055em;
        line-height: 1
    }

.status-card {
    height: 100%;
    padding: clamp(1.25rem,2vw,2rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.status-medal {
    display: grid;
    place-items: center;
    width: 100px;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #c47a3a
}

    .status-medal img {
        width: 50px;
    }

.status-card h3 {
    text-align: center;
    margin: 1rem 0 .25rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase
}

.status-card > p {
    margin: 0;
    color: var(--text-gray);
    font-size: .8rem;
    font-weight: 600;
    text-align: center
}

.status-card > i {
    margin: 1rem 0;
    width: 100%
}

.status-card ul {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.status-card li {
    display: flex;
    gap: .5rem;
    color: #d48b4c;
    font-size: .8rem
}

    .status-card li span {
        color: var(--text-gray);
        font-size: .8rem;
        font-weight: 600;
    }

.silver .status-medal, .silver li {
    color: #84909d
}


.promotions-disclaimer {
    margin: 1.5rem 0 0;
    color: var(--text-gray);
    font-size: .7rem
}

    .promotions-disclaimer::first-letter {
        color: var(--primary-theme-color)
    }


.perk-card {
    height: 100%;
    padding: clamp(1.15rem,1.7vw,1.5rem);
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .perk-card > span, .program-card > div > span {
        display: grid;
        place-items: center;
        width: 60px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--bg-light-01);
        color: var(--secondary-theme-color);
        font-size: 1.15rem
    }

    .perk-card h2 {
        margin: 1rem 0;
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
    }

    .perk-card p {
        font-size: 14px;
        letter-spacing:.5px;
        font-weight: 400;
        line-height: 1.4;
        width:80%;
        opacity:.7;
    }

    .perk-card a {
        font-size: 14px;
        font-weight: 500;
        color: var(--secondary-theme-color);
        margin-top:30px;
        display:inline-block;
    }
    .perk-card i {
        margin: 1rem 0
    }
.partnerbox-img {
    height: 150px;
    margin-top: 50px;
}
.perk-card img {
    display: block;
 
    height: 100%;
}

.promotions-program-list {
    display: grid;
    gap: clamp(1.25rem,3vw,2.5rem);
    max-width: 55rem;
    margin: auto
}

.program-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
    align-items: center;
    gap: clamp(1rem,4vw,4rem);
    padding: clamp(1.3rem,3vw,2.5rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .program-card h2 {
        margin: 1.25rem 0 0;
        font-size: clamp(1.45rem,2.2vw,2.25rem);
        font-weight: 700;
        letter-spacing: -.05em
    }

    .program-card i {
        margin: 1rem 0
    }

    .program-card p {
        margin: 0;
        color: var(--text-gray);
        font-size: clamp(.78rem,1vw,.92rem);
        line-height: 1.55
    }

    .program-card img {
        display: block;
        width: 100%;
        height: auto
    }

.promotions-faq {
    background: var(--bg-light-01)
}

    .promotions-faq .accordion {
        max-width: 62rem;
        margin: auto;
        display: grid;
        gap: .7rem
    }

    .promotions-faq .accordion-item {
        border: 1px solid var(--border-light);
        border-radius: .7rem;
        overflow: hidden;
        background: var(--bg-card)
    }

    .promotions-faq .accordion-button {
        display: flex;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: var(--bg-card);
        box-shadow: none;
        color: var(--text-secondary-dark);
        font-size: clamp(.78rem,1vw,.93rem);
        font-weight: 700
    }

        .promotions-faq .accordion-button::after {
            display: none
        }

        .promotions-faq .accordion-button b {
            color: #85ba00
        }

        .promotions-faq .accordion-button span {
            margin-left: auto;
            color: #85ba00;
            font-size: 1.35em
        }

        .promotions-faq .accordion-button:not(.collapsed) span {
            transform: rotate(45deg)
        }

    .promotions-faq .accordion-body {
        padding: 0 1.25rem 1.25rem;
        color: var(--text-gray);
        font-size: .9rem
    }

:focus-visible {
    outline: none !important;
}

header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: var(--bg-card);
    transition: background-color 220ms cubic-bezier(.4,0,.2,1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

a {
    text-decoration: none !important;
}

.btn-outline {
    border: 1px solid var(--secondary-theme-color);
    color: var(--text-secondary-dark);
    font-weight: 600;
    border-radius: 10px;
    background: transparent;
    transition: all 220ms cubic-bezier(.4,0,.2,1);
    padding: 12px 22px;
}

    .btn-outline.btn-sm {
        padding: 8px 22px;
    }

.btn-primary-style {
    background-color: var(--primary-theme-color);
    color: var(--text-secondary-dark);
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 22px;
    display: flex;
    /*margin: auto;*/
    border: none;
    transition: all 220ms cubic-bezier(.4, 0, .2, 1);
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}
a.btn-outline,
a.btn-primary-style {
    width: fit-content;
}

.btn-primary-style.btn-sm {
    padding: 8px 22px;
}

.btn-primary-style:hover {
    background-color: var(--secondary-theme-color);
    color: var(--bg-light);
}

.btn-outline:hover {
    background-color: var(--primary-theme-color);
    color: var(--text-secondary-dark);
    border-color: var(--primary-theme-color);
}

/* Sharper spreads landing */
.sharper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.6rem
}

    .sharper-actions .btn-outline span {
        margin-left: 1rem
    }

.sharper-image-slot--wide img {
    width: 80%;
}

.sharper-card, .sharper-market-card {
    height: 100%;
    padding: 1rem;
    border-radius: .65rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sharper-card-image img {
    width: 200px;
}

.sharper-card-image {
    text-align: center;
    margin-bottom: .8rem;
}

.sharper-confidence ul {
    display: grid;
    gap: .45rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-gray);
    font-size: .75rem
}

.sharper-confidence li::before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--primary-theme-color);
    color: var(--secondary-theme-color);
    font-size: .65rem
}

.sharper-market-card {
    padding: 1rem
}

    .sharper-market-card .sharper-card-image {
        min-height: 5rem
    }

.sharper-condition-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
    border-radius: .65rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    justify-content: space-between;
}

    .sharper-condition-card .sharper-card-image {
        flex: 0 0 40%;
        margin: 0;
        min-height: 5rem
    }
/* Spreads and conditions */
.spreads-board-section {
    padding-top: clamp(8rem,12vw,11rem);
    padding-bottom: clamp(3rem,6vw,5rem);
    background: linear-gradient(135deg,var(--bg-light),var(--bg-light-01))
}

.spreads-platform-tabs {
    display: flex;
    gap: clamp(.5rem,1.2vw,.85rem);
    max-width: 34rem;
    margin: 0 0 1.35rem
}

    .spreads-platform-tabs button {
        flex: 1;
        padding: .72rem 1rem;
        border: 1px solid var(--border-light);
        border-radius: 999px;
        background: var(--bg-card);
        color: var(--text-secondary-dark);
        font: inherit;
        font-size: clamp(.78rem,1.1vw,.95rem);
        font-weight: 700;
        box-shadow: 0 .2rem .8rem rgba(16,64,66,.035);
        transition: .2s ease
    }

        .spreads-platform-tabs button.active {
            border-color: var(--primary-theme-color);
            background: var(--primary-theme-color)
        }

.spreads-table-card {
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 1.1rem;
    background: var(--bg-card);
    box-shadow: 0 .6rem 1.5rem rgba(16,64,66,.06)
}

.spreads-table-scroll {
    overflow-x: auto
}

.spreads-table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse
}

    .spreads-table th, .spreads-table td {
        padding: clamp(.8rem,1.35vw,1.1rem) clamp(.75rem,2.2vw,2.3rem);
        border-bottom: 1px solid var(--border-light);
        font-size: clamp(.78rem,1.05vw,.95rem);
        white-space: nowrap
    }

    .spreads-table thead th {
        background: linear-gradient(90deg,#fbfdf7,var(--bg-primary-light));
        font-size: clamp(.68rem,.9vw,.78rem);
        font-weight: 750;
        text-transform: uppercase
    }

        .spreads-table thead th:nth-child(n+3), .spreads-table tbody td:nth-child(n+3) {
            text-align: center
        }

        .spreads-table thead th:nth-child(5), .spreads-table tbody td:nth-child(5) {
            background: var(--bg-primary-light)
        }

    .spreads-table tbody th {
        font-weight: 750
    }

    .spreads-table tbody tr:nth-child(n+8) {
        display: none
    }

.spreads-table-panel.show-all tbody tr:nth-child(n+8) {
    display: table-row
}

.quote-up {
    color: #169a31;
    font-weight: 700
}

.quote-down, .quote-danger {
    color: #ff2833;
    font-weight: 700
}

.spreads-show-more-wrap {
    padding: 1rem;
    text-align: center
}

.spreads-show-more {
    display: inline-flex;
    align-items: center;
    gap: clamp(2rem,7vw,7rem);
    padding: .55rem 1.75rem;
    border-color: var(--primary-theme-color);
    border-radius: .75rem;
    font-size: .82rem
}

    .spreads-show-more span, .spreads-cta span {
        font-size: 1.25em
    }

.spreads-cta {
    margin-top: 1.25rem
}

    .spreads-cta .btn-primary-style {
        display: inline-flex;
        align-items: center;
        gap: clamp(3rem,8vw,8rem);
        padding: .85rem 1.7rem
    }

.spreads-perk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.25rem,2.3vw,2rem);
    border: 1px solid var(--border-light);
    border-radius: 1.35rem;
    background: var(--bg-card);
    box-shadow: 0 .45rem 1rem rgba(16,64,66,.05)
}

.spreads-perk-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb,var(--primary-theme-color) 60%,var(--border-light));
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #7fb500;
    font-size: 1.9rem;
    font-weight: 700
}

.spreads-perk-card h2 {
    margin: 1.55rem 0 .9rem;
    font-size: clamp(1.2rem,1.65vw,1.6rem);
    font-weight: 750;
    line-height: 1.28
}

.spreads-perk-card i, .spreads-benefit i {
    display: block;
    width: 2.1rem;
    border-top: 2px solid var(--primary-theme-color)
}

.spreads-image-slot {
    text-align: center;
    margin-top: auto;
}

    .spreads-image-slot img {
        max-height: 200px;
        width: auto;
    }

.spreads-benefits-section {
    padding-top: clamp(3rem,7vw,6rem);
    padding-bottom: clamp(4rem,8vw,7rem);
    background: var(--bg-light)
}

.spreads-benefit {
    text-align: center
}

    .spreads-benefit h2 {
        min-height: 3.2em;
        margin: 0;
        font-size: clamp(1.2rem,1.7vw,1.65rem);
        font-weight: 750;
        line-height: 1.25
    }

    .spreads-benefit i {
        margin: 1.5rem auto;
        border-width: 3px;
        border-radius: 99px
    }

    .spreads-benefit p {
        margin: 0;
        color: var(--text-gray);
        font-size: clamp(.82rem,1.15vw,1rem);
        line-height: 1.65
    }

    .spreads-benefit:has(.benefit-blue) i {
        border-color: var(--accent-blue)
    }

    .spreads-benefit:has(.benefit-mint) i {
        border-color: var(--accent-mint)
    }

    .spreads-benefit:has(.benefit-violet) i {
        border-color: var(--accent-violet)
    }

    .spreads-benefit:has(.benefit-orange) i {
        border-color: #ff7442
    }

    .spreads-benefit:has(.benefit-cyan) i {
        border-color: #18c5e1
    }

    .spreads-benefit img {
        max-width: 150px;
        margin-bottom: 20px;
    }

.slider {
    height: 80vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/slider-image.png);
    padding-top: 68px;
}



.slider-object-img {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slider-object-img img {
        height: 100%;
        object-fit: contain;
        padding-top:50px;
    }
    .hero-cta {
        margin-top: 34px;
        display: flex;
        gap: 14px;
    }



.hero-stats {
    margin-top: 70px;
    display: flex;
    gap: 40px;
}

.hero-heading {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-secondary-dark);
    margin-top: 24px;
    text-transform: capitalize;
}


.hero-desc {
    font-size: 16px;
    color: var(--text-gray);
    max-width: 460px;
    margin-top: 25px;
    line-height: 1.6;
}

.hero-stats .stat-item {
    display: flex;
    gap: 10px;
}



.hero-stats .stat-title {
    font-weight: 700;
    font-size: 26px;
    color: var(--text-secondary-dark);
    margin: 0;
    margin-bottom: 5px;
    line-height: 1;
}

.hero-stats .stat-sub {
    font-size: 12px;
    color: var(--text-gray);
    margin: 0;
}


.features-section {
    position: relative;
    overflow: hidden;
}

.features-header {
    position: relative;
    z-index: 1;
    text-align: center;
}

.features-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trusted-pill {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-gray);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

    .trusted-pill span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.features-heading {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-secondary-dark);
    margin-top: 20px;
    text-transform: capitalize;
}


.features-subtext {
    font-size: 16px;
    color: var(--text-gray);
    margin: 15px 0 30px 0;
    line-height: 26px;
}


.forex-hero-content .features-heading {
    color: var(--primary-theme-color);
    font-size: 60px;
    font-weight: 600;
    width:60%;
    margin: auto;
    margin-top: 20px;
}

.forex-hero-content .features-subtext {
    color: var(--text-light);
    opacity: .9;
    font-weight: 300;
    letter-spacing: .5px;
}

.forex-hero-content .features-badge {
    color: #e4e7e7;
    background: #ffffff1f;
    border: 1px solid #ffffff17;
}

.forex-hero-content .btn-outline {
    border-color: var(--border-light) !important;
    color: var(--border-light) !important;
    background:transparent !important;
}

.forex-hero-content .features-header {
    text-align: center;
}

.features-cards-row {
    position: relative;
    z-index: 1;
    row-gap: 24px;
}

.feature-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    border: 4px solid var(--border-light-color);
    overflow: hidden;
}

    .feature-card.feature-body{
        position:relative;
    }
    .feature-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 34px;
        background-color: var(--primary-theme-color);
        color: var(--text-secondary-dark);
        font-weight: 700;
        font-size: 13px;
        border-radius: 8px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        position: absolute;
        top: 10px;
        left: 10px;
    }

.feature-img {
    position: relative;
    height: 300px;
    overflow: hidden;
}


.feature-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-secondary-dark);
    margin-bottom: 10px;
}

.feature-body {
    padding: 30px;
}

.feature-desc {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 0px;
    letter-spacing:.5px;
}
/* Forex market page */
.forex-hero {
    position: relative;
    overflow: hidden;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 160px 0 100px;
    background: #061c1c;
}

    .forex-hero:before {
        position: absolute;
        content: "";
        background-size: cover;
        height: 100%;
        width: 100%;
        top: 0px;
        background-repeat: no-repeat;
        background-image: url(../images/Sub-Slider/main-bg.png);
        opacity: .15;
        filter: blur(1px);
    }
    .forex-hero.award-section:before {
        background-image: url(../images/Sub-Slider/Awards.png);
    }

    .forex-hero.contact-us-section:before {
        background-image: url(../images/Sub-Slider/ContactUs.png);
    }
.forex-hero.account-type-section:before {
    background-image: url(../images/Sub-Slider/AccountType.png);
}

    .forex-hero.deposit-withdraw-section:before {
        background-image: url(../images/Sub-Slider/DepositAndWithdraw.png);
    }

 

.forex-hero.aboutPlatform:before {
    background-image: url(../images/Sub-Slider/AboutPlatform.png);
}
    .forex-hero.islamic-accounts-section:before {
        background-image: url(../images/Sub-Slider/IslamicAccounts.png);
    }
    .forex-hero.demo-account-section:before {
        background-image: url(../images/Sub-Slider/DemoAccount.png);
    }
    .forex-hero.negative-balance-protection-section:before {
        background-image: url(../images/Sub-Slider/NegativeBalanceProtection.png);
    }
    .forex-hero.funs-security-section:before {
        background-image: url(../images/Sub-Slider/FundsSecurity.png);
    }
    .forex-hero.forex-trading-section:before {
        background-image: url(../images/Sub-Slider/ForexTrading.png);
    }
    .forex-hero.stock-derivatives-section:before {
        background-image: url(../images/Sub-Slider/StockDerivatives.png);
    }
    .forex-hero.equity-indices-section:before {
        background-image: url(../images/Sub-Slider/EquityIndices.png);
    }
    .forex-hero.eneriges-section:before {
        background-image: url(../images/Sub-Slider/Energies.png);
    }
    .forex-hero.thematic-indices-section:before {
        background-image: url(../images/Sub-Slider/ThematicIndices.png);
    }
    .forex-hero.crypto-currencies-section:before {
        background-image: url(../images/Sub-Slider/CryptoCurrencies.png);
    }
    .forex-hero.etf-derivatives-section:before {
        background-image: url(../images/Sub-Slider/ETFDerivatives.png);
    }
    .forex-hero.commodities-section:before {
        background-image: url(../images/Sub-Slider/Commodities.png);
    }
    .forex-hero.precious-metals-section:before {
        background-image: url(../images/Sub-Slider/PreciousMetals.png);
    }
    .forex-hero.shares-section:before {
        background-image: url(../images/Sub-Slider/Shares.png);
    }
    .forex-hero.trading-calculator-section:before {
        background-image: url(../images/Sub-Slider/TradingCalculator.png);
    }
    .forex-hero.profit-calculator-section:before {
        background-image: url(../images/Sub-Slider/ProfitCalculator.png);
    }
    .forex-hero.trading-hours-section:before {
        background-image: url(../images/Sub-Slider/TradingHours.png);
    }
    .forex-hero.economic-calendar-section:before {
        background-image: url(../images/Sub-Slider/EconomicCalendar.png);
    }
    .forex-hero.holiday-calendar-section:before {
        background-image: url(../images/Sub-Slider/HolidayCalendar.png);
    }
    .forex-hero.promotions-section:before {
        background-image: url(../images/Sub-Slider/Promotions.png);
    }
    .forex-hero.sharper-spreads-section:before {
        background-image: url(../images/Sub-Slider/SharperSpreads.png);
    }
    .forex-hero.deposit-reward-section:before {
        background-image: url(../images/Sub-Slider/DepositReward.png);
    }
    .forex-hero.competitions-section:before {
        background-image: url(../images/Sub-Slider/Competitions.png);
    }
    .forex-hero.copy-trade-section:before {
        background-image: url(../images/Sub-Slider/CopyTrade.png);
    }
    .forex-hero.affiliate-program-section:before {
        background-image: url(../images/Sub-Slider/AffiliateProgram.png);
    }
    .forex-hero.ib-program-section:before {
        background-image: url(../images/Sub-Slider/IBProgram.png);
    }
    .forex-hero.franchise-program-section:before {
        background-image: url(../images/Sub-Slider/FranchiseProgram.png);
    }
    .forex-hero.liquidity-offering-section:before {
        background-image: url(../images/Sub-Slider/LiquidityOffering.png);
    }
    .forex-hero.loyalty-program-section:before {
        background-image: url(../images/Sub-Slider/LoyaltyProgram.png);
    }
    .forex-hero.invite-friends-section:before {
        background-image: url(../images/Sub-Slider/InviteFriends.png);
    }
    .forex-hero.who-we-are-section:before {
        background-image: url(../images/Sub-Slider/WhoWeAre.png);
    }
    .forex-hero.why-choose-us-section:before {
        background-image: url(../images/Sub-Slider/WhyChooseUs.png);
    }
    .forex-hero.regulations-section:before {
        background-image: url(../images/Sub-Slider/Regulation.png);
    }
    .forex-hero.legal-documents-section:before {
        background-image: url(../images/Sub-Slider/LegalDocuments.png);
    }
    .forex-hero.airdrop-section:before {
        background-image: url(../images/Sub-Slider/airdropProgram.png);
    }

    .forex-hero.bounty-section:before {
        background-image: url(../images/Sub-Slider/bountyProgram.png);
    }

    .forex-hero.coupon-code-section:before {
        background-image: url(../images/Sub-Slider/couponcode.png);
    }


    .forex-hero.deposit-contest-section:before {
        background-image: url(../images/Sub-Slider/depositContest.png);
    }

    .forex-hero.event-award-section:before {
        background-image: url(../images/Sub-Slider/eventsandrewards.png);
    }


    .forex-hero.infuencer-section:before {
        background-image: url(../images/Sub-Slider/influencerProgram.png);
    }

    .forex-hero.mystry-reward-section:before {
        background-image: url(../images/Sub-Slider/mystryreward.png);
    }

    .forex-hero.partner-club-section:before {
        background-image: url(../images/Sub-Slider/partnerClub.png);
    }


    .forex-hero.referral-reward-section:before {
        background-image: url(../images/Sub-Slider/referralReward.png);
    }


    .forex-hero.trade-win-section:before {
        background-image: url(../images/Sub-Slider/TradeAndWin.png);
    }

    .forex-hero.trader-club-section:before {
        background-image: url(../images/Sub-Slider/tradersclub.png);
    }
   


.forex-hero-content {
    position: relative;
    z-index: 2;
}



.forex-risk {
    margin-top: 36px;
    color: var(--text-gray);
    font-size: 13px
}


.forex-quote {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: 5px;
    width: 300px;
    transform: rotate(-7deg)
}

.forex-quote-right {
    right: 8%;
    top: 30px;
    transform: rotate(7deg);
}

.forex-quote-left {
    left: 7%;
    top: 10px;
    transform: rotate(9deg);
}

.forex-quote-right-bottom {
    right: 8%;
    bottom: 30px;
    transform: rotate(7deg);
}

.forex-quote-left-bottom {
    left: 8%;
    bottom: 30px;
    transform: rotate(7deg);
}

.forex-quote strong {
    font-size: 21px
}

.forex-quote small {
    color: #69b500;
    font-weight: 700
}

.forex-quote strong {
    font-size: 21px
}

.forex-quote small {
    color: #69b500;
    font-weight: 700
}

.forex-pairs-card {
    padding: 36px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 10px 25px rgba(16,64,66,.06)
}

.forex-pairs h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 700
}

.forex-pairs p {
    margin: 5px 0 0;
    color: var(--text-gray)
}

    .forex-pairs p a {
        color: var(--secondary-theme-color);
        font-weight: 600
    }

.forex-tabs {
    margin: 28px -36px 0;
    padding: 0 36px;
    border-bottom: 1px solid var(--border-light);
    gap: 5px
}

    .forex-tabs button {
        padding: 13px 25px;
        border: 0;
        border-bottom: 3px solid transparent;
        background: transparent;
        color: var(--text-gray);
        font-weight: 700
    }

        .forex-tabs button.active {
            border-color: var(--primary-theme-color);
            color: var(--text-secondary-dark)
        }

.forex-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px
}

    .forex-table th {
        padding: 8px 16px;
        color: var(--text-gray);
        font-size: 12px;
        font-weight: 500
    }

    .forex-table td {
        padding: 9px 16px;
        background: #fff;
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        color: #354252;
        font-size: 14px;
        font-weight: 600
    }

        .forex-table td:first-child {
            border-left: 1px solid var(--border-light);
            border-radius: 11px 0 0 11px
        }

        .forex-table td:last-child {
            border-right: 1px solid var(--border-light);
            border-radius: 0 11px 11px 0;
            text-align: right
        }

        .forex-table td small, .forex-more small {
            display: block;
            color: var(--text-gray);
            font-size: 13px;
            font-weight: 400
        }

.forex-flags {
    font-size: 18px;
    white-space: nowrap
}

.forex-trade {
    display: inline-block;
    min-width: 88px;
    padding: 7px 12px;
    border: 1px solid var(--primary-theme-color);
    border-radius: 8px;
    color: #75ae00;
    text-align: center
}

.forex-more {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1020px;
    margin: 18px auto 0;
    padding: 12px 25px;
    border: 1px solid rgba(182,240,0,.55);
    border-radius: 10px
}

.forex-star {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #83bd00;
    font-size: 22px
}

.forex-more .btn-primary-style {
    margin-left: auto;
    padding: 11px 20px;
    font-size: 13px
}

.forex-benefit {
    display: flex;
    gap: 20px;
    max-width: 390px;
    margin: 34px auto
}

    .forex-benefit i {
        display: grid;
        flex: 0 0 95px;
        width: 95px;
        height: 95px;
        place-items: center;
        border: 1px solid var(--primary-theme-color);
        border-radius: 50%;
        color: var(--secondary-theme-color);
        font-size: 43px;
        font-style: normal
    }

    .forex-benefit h3 {
        margin: 10px 0 7px;
        font-size: 23px;
        font-weight: 700
    }

    .forex-benefit span {
        display: block;
        width: 38px;
        height: 3px;
        background: var(--primary-theme-color)
    }

    .forex-benefit p {
        margin: 10px 0 0;
        color: var(--text-gray);
        line-height: 1.4
    }

.forex-logo-mark {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    margin: auto;
    border: 1px dashed rgba(182,240,0,.6);
    border-radius: 50%;
    background: radial-gradient(circle,var(--bg-primary-light),transparent 68%);
    color: var(--primary-theme-color);
    font-size: 108px;
    font-style: italic;
    font-weight: 700
}

.forex-benefits-risk {
    margin: 35px 0 0;
    color: var(--text-gray);
    font-size: 13px
}



.forex-cta-button {
    margin-top: 16px;
    min-width: 300px;
    padding: 17px 25px;
    font-size: 18px
}

.forex-cta-notes {
    margin-top: 30px;
    color: var(--text-gray);
    font-size: 13px
}

.forex-benefit img {
    width: auto;
    height: 110px;
}

.forex-currency-mark img {
    max-width: 130px;
}
/* Reusable homepage section spacing and cards */
.page-section {
    padding: 200px 0;
}

/* Mystery rewards */
.mystery-rewards-page { background: var(--bg-light); color: var(--secondary-theme-color); overflow: hidden; }


.mystery-box-card {
    padding: 30px;
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--border-light-color);
}
.mystery-box-art { text-align:center; }
.mystery-box-art:after { font-size: .58rem; }
.mystery-box-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-top: 16px;
}
.mystery-box-card strong {
    display: block;
    margin: .2rem 0;
    font-size: 16px;
    text-align: center;
    color: #719500;
}
.mystery-box-card p {
    margin: 0;
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}
.mystery-ready-card {
    padding: 30px;
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--border-light-color);
}


/* Trading platform */




.platform-points, .edge-list, .web-trader-list ul {
    padding: 0;
    margin: 1.6rem 0;
    list-style: none
}

.platform-points {
    display: grid;
    gap: .9rem
}

    .platform-points li {
        display: flex;
        gap: .75rem;
        align-items: center;
        color: var(--text-gray);
        font-size: .78rem
    }

    .platform-points i {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: .28rem;
        border-radius: 50%;
        background: var(--secondary-theme-color);
        color: var(--primary-theme-color);
        font-style: normal
    }

    .platform-points span{
        font-size: 14px;
    }
    .platform-points strong {
        display: block;
        color: var(--secondary-theme-color);
        font-size: 1rem
    }

.trading-platform-page .btn-primary-style {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none
}

.platform-edge-panel, .platform-device-panel {
    padding: clamp(1.5rem,4vw,4rem);
    border: 1px solid var(--border-light);
    border-radius: 1.5rem;
    background: linear-gradient(135deg,var(--bg-light),color-mix(in srgb,var(--bg-primary-light) 65%,var(--bg-light)));
    box-shadow: 0 1rem 3rem rgba(16,64,66,.05)
}

.edge-list {
    display: grid;
    gap: 1rem;
    color: var(--text-gray);
    font-size: .78rem
}

    .edge-list li, .web-trader-list li {
        display: flex;
        gap: .65rem;
        font-size: 16px;
    }

        .edge-list li::before, .web-trader-list li::before {
            color: var(--primary-theme-color);
            content: "●"
        }

.edge-card {
    display: grid;
    gap: .6rem;
    min-block-size: 100%;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: .9rem;
    background: var(--bg-card);
    box-shadow: 0 .5rem 1.4rem rgba(16,64,66,.06);
    text-align: center
}

    .edge-card .feature-title {
        font-size: 18px;
    }
    .edge-card .feature-desc {
        font-size: 14px;
    }
    .edge-card > img {
        width: 80px;
        margin: 0 auto;
    }
    .edge-card .platform-image-slot {
        aspect-ratio: 1
    }

.platform-image-slot > img{
    width: 80%;
}
.platform-device-panel {
    background: color-mix(in srgb,var(--bg-primary-light) 48%,var(--bg-light))
}

    .platform-device-panel .btn-primary-style, .platform-mac-section .btn-primary-style {
        margin-top: .8rem
    }

.platform-benefits {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    margin-top: clamp(2rem,4vw,4rem)
}

    .platform-benefits > div {
        display: flex;
        gap: 15px;
        padding: 1rem;
        border-radius: .8rem;
        background: var(--bg-card);
        box-shadow: 0 .35rem 1rem rgba(16,64,66,.05);
        align-items:center;
    }
    .platform-benefits > div img{
        width: 60px;
    }
    .platform-benefits > div span b{
        display:block;
    }
    .platform-benefits > div span {
        color: var(--text-gray);
        font-size: 1rem;
        text-align:start;
    }

    .platform-benefits b {
        color: var(--secondary-theme-color);
        font-size: 18px;
    }


.platform-center-copy {
    text-align: center
}

    .platform-center-copy p {
        color: var(--text-gray)
    }

    .platform-center-copy .btn-primary-style {
        margin: .5rem auto 1.5rem
    }

.platform-float-features article img{
    width: 60px;
}
.platform-float-features article {
    display: flex;
    gap: 10px;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: .8rem;
    background: var(--bg-card);
    height: 100%;
    align-items:center;
}

.platform-float-features strong{
    display:block;
}
.platform-float-features strong, .platform-float-features small {
    color: var(--secondary-theme-color);
    font-size: 18px;
}

.platform-float-features small {
    color: var(--text-gray);
    font-size: 16px;
}

.platform-mini-features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem;
    margin-top: 2rem;
    text-align:center;
    justify-content:center;
}

    .platform-mini-features span {
        display: grid;
        gap: .4rem;
        color: var(--primary-theme-color);
        font-size: 1.25rem
    }

    .platform-mini-features b {
        color: var(--secondary-theme-color);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    .market-indices-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
    gap: 4rem;
    align-items: center
}
.market-board {
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--border-light-color);
    overflow: hidden;
    padding:15px;
}
.bottom-link{
    display:none !important;
}
tv-branding{
    display:none !important;
}
.market-indices-benefits {
    padding: 0;
    margin: 2rem 0;
    list-style: none;
    max-width: 34rem
}

    .market-indices-benefits li {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-light);
        text-align:left;
    }

.market-check {
    display: grid;
    place-items: center;
    flex: 0 0 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 4px 12px #10404222;
    color: var(--primary-theme-color);
    font-size: 1.3rem;
    font-weight: 800
}

.market-indices-benefits strong, .market-indices-benefits small {
    display: block
}

.market-indices-benefits strong {
    color: var(--secondary-theme-color);
    font-size: 1.05rem
}

.market-indices-benefits small {
    margin-top: .3rem;
    color: var(--text-gray)
}

.market-indices-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.market-indices-account {
    padding: .8rem 0;
    border-bottom: 2px solid var(--primary-theme-color);
    color: var(--secondary-theme-color);
    font-weight: 700;
    text-decoration: none
}

.market-indices-notes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.2rem;
    color: var(--text-gray);
    font-size: .85rem
}

    .market-indices-notes i {
        color: var(--primary-theme-color)
    }

.market-spark {
    font-size: 2rem;
    letter-spacing: -.4rem
}

    .market-spark.up, .market-change.up {
        color: #268129
    }

    .market-spark.down, .market-change.down {
        color: #e0293e
    }

.market-price {
    text-align: right;
    color: var(--secondary-theme-color)
}

.market-change {
    text-align: right
}

.market-empty {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--text-gray)
}

.is-hidden {
    display: none !important
}

.market-indices-section {
    position: relative;
    overflow: hidden;
}

    .market-indices-section > .img-fluid {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0.3;
        z-index: -1;
    }
.web-trader-list {
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .75rem 2rem rgba(16,64,66,.08)
}

    .web-trader-list h3 {
        font-size: 1.15rem;
        font-weight: 800
    }

    .web-trader-list ul {
        display: grid;
        gap: .65rem
    }

    .web-trader-list li {
        color: var(--text-gray);
        font-size: 15px;
    }

.platform-cta {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
    align-items: center;
    padding: clamp(2rem,5vw,5rem);
    border-radius: 1.75rem;
    background: linear-gradient(120deg,var(--secondary-theme-color),#0c6a55 62%,color-mix(in srgb,var(--primary-theme-color) 65%,var(--secondary-theme-color)));
    color: var(--text-light)
}

    .platform-cta h2 {
        color: var(--text-light)
    }

    .platform-cta p {
        max-inline-size: 25rem;
        color: color-mix(in srgb,var(--text-light) 76%,transparent)
    }

    .platform-cta .platform-image-slot::after {
        border-color: var(--primary-theme-color)
    }
/* Economic calendar */


.economic-benefits {
    margin-top: clamp(2rem,5vw,4rem);
    padding: clamp(.7rem,2vw,1.2rem);
    border-radius: 1.2rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .economic-benefits article {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: clamp(.7rem,1.5vw,1.1rem);
        border-right: 1px solid var(--border-light)
    }

    .economic-benefits .col-xl-3:last-child article {
        border-right: 0
    }

.benefit-icon svg {
    width: 25px;
    height: 25px;
}

.economic-benefits i {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: .6rem;
    border-radius: 50%;
    background: var(--bg-primary-light);
    font-size: 1.5rem;
    font-style: normal
}

.economic-benefits strong, .economic-benefits span {
    display: block
}

.economic-benefits span {
    margin-top: .2rem;
    color: var(--text-gray);
}

.economic-filters {
    padding: clamp(1rem,2.5vw,1.8rem);
    border-radius: 1.2rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .economic-filters label {
        font-size: .72rem;
        font-weight: 800
    }

    .economic-filters select {
        display: block;
        inline-size: 100%;
        margin-top: .35rem;
        padding: .85rem 1rem;
        border: 1px solid var(--border-light);
        border-radius: .7rem;
        background: var(--bg-card);
        color: var(--secondary-theme-color);
        font-size: .82rem;
        font-weight: 700
    }

.economic-filter-button {
    inline-size: 100%;
    padding: .85rem 1rem;
    background: var(--bg-card);
    font-size: .75rem
}

.economic-events {
    margin-top: clamp(1.5rem,3vw,2.5rem);
    padding: clamp(1rem,2vw,1.4rem);
    border: 1px solid color-mix(in srgb,var(--primary-theme-color) 75%,var(--border-light));
    border-radius: 1.25rem;
    background: linear-gradient(135deg,#fff,#fbfffa)
}

.economic-events-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem
}

    .economic-events-top h2, .economic-events-top p {
        margin: 0;
        padding: .65rem .9rem;
        border: 1px solid var(--border-light);
        border-radius: 99rem;
        background: var(--bg-card);
        font-size: clamp(.78rem,1.2vw,1rem);
        font-weight: 800
    }

    .economic-events-top p {
        font-size: .8rem;
        color: var(--text-gray)
    }

        .economic-events-top p b {
            display: inline-block;
            aspect-ratio: 1;
            padding: .27rem;
            margin-right: .4rem;
            border-radius: 50%;
            background: var(--primary-theme-color)
        }

    .economic-events-top strong {
        margin-left: .55rem;
        color: var(--secondary-theme-color);
        font-size: 1.05em
    }

.economic-table-wrap {
    overflow-x: auto
}

.economic-table {
    inline-size: 100%;
    min-inline-size: 58rem;
    border-collapse: collapse
}

    .economic-table th {
        padding: 1rem;
        text-align: left;
        background: var(--secondary-theme-color);
        color: var(--text-light);
        font-weight: 700;
        white-space: nowrap
    }

        .economic-table th:first-child {
            border-radius: .8rem 0 0 .8rem
        }

        .economic-table th:last-child {
            border-radius: 0 .8rem .8rem 0
        }

    .economic-table td {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--border-light);
        font-size: .85rem;
        font-weight: 700;
        vertical-align: middle;
        white-space: nowrap
    }

        .economic-table td:nth-child(n+3) {
            text-align: center
        }

        .economic-table td:nth-child(2) {
            white-space: normal
        }

.economic-flag {
    margin-right: .55rem;
    font-size: 1.2rem;
    vertical-align: middle
}

.economic-table td:nth-child(2) > b {
    margin-right: .7rem
}

.economic-event-name {
    margin-right: .5rem
}

.economic-table em, .economic-table small {
    display: inline-block;
    margin: .1rem;
    padding: .2rem .4rem;
    border-radius: 99rem;
    background: #f1f4f5;
    color: var(--text-gray);
    font-size: .6rem;
    font-style: normal
}

.economic-table small {
    background: var(--bg-primary-light);
    color: var(--secondary-theme-color)
}

.economic-impact {
    display: inline-block;
    padding: .35rem .65rem;
    border-radius: 99rem;
    font-size: .65rem
}

    .economic-impact.high {
        background: #fff0f1;
        color: var(--red-theme-color)
    }

    .economic-impact.medium {
        background: #fff6df;
        color: #c77a00
    }

    .economic-impact.low {
        background: #edffed;
        color: #358647
    }

.economic-row-toggle {
    aspect-ratio: 1;
    padding: .28rem .45rem;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--secondary-theme-color)
}
/* Holiday calendar */

.holiday-market {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0
}

.holiday-round-icon, .holiday-calendar-icon, .holiday-intro-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    aspect-ratio: 1;
    padding: clamp(.7rem,1.4vw,1.05rem);
    border: 1px solid var(--border-light);
    border-radius: .7rem;
    background: var(--bg-card);
    box-shadow: 0 .5rem 1.2rem rgba(16,64,66,.09);
    color: #80b800;
    font-size: clamp(1.45rem,2.5vw,2.2rem)
}

.holiday-market p {
    margin: 0;
    color: var(--text-gray);
    font-size: .78rem;
    line-height: 1.35
}

.holiday-market strong {
    display: block;
    color: var(--secondary-theme-color);
    font-size: clamp(.95rem,1.4vw,1.2rem)
}

.holiday-trade-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(2rem,5vw,4.5rem);
    border-color: var(--primary-theme-color);
    font-weight: 800
}


.holiday-date-card {
    max-inline-size: 39rem;
    margin-inline: auto;
    padding: clamp(1.3rem,3vw,2.7rem);
    border-radius: clamp(1rem,2vw,1.7rem);
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.holiday-date-main {
    display: flex;
    align-items: center;
    gap: clamp(1rem,2.3vw,1.7rem);
    padding-bottom: clamp(1.25rem,2.7vw,2.2rem)
}

    .holiday-date-main small, .holiday-date-meta small {
        display: block;
        margin-bottom: .45rem;
        color: var(--text-gray);
        font-size: .65rem;
        font-weight: 800;
        text-transform: uppercase
    }

    .holiday-date-main strong {
        font-size: clamp(1.8rem,3.2vw,3rem);
        line-height: 1
    }

.holiday-date-meta {
    border-top: 1px solid var(--border-light)
}

    .holiday-date-meta > div {
        padding: clamp(1rem,2vw,1.6rem) 0
    }

        .holiday-date-meta > div + div {
            padding-left: clamp(1rem,2vw,1.6rem);
            border-left: 1px solid var(--border-light)
        }

    .holiday-date-meta strong {
        font-size: clamp(.8rem,1.1vw,1rem)
    }

.holiday-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(1.2rem,3vw,2.5rem);
    margin-top: clamp(3rem,7vw,6rem);
    padding: clamp(1.1rem,2.4vw,1.8rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.holiday-intro-icon {
    font-size: clamp(1.7rem,3vw,2.7rem)
}

.holiday-intro p {
    margin: 0;
    color: var(--text-gray);
    line-height: 1.6
}

.holiday-table-card {
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .7rem 1.8rem rgba(16,64,66,.07)
}

.holiday-table {
    color: var(--secondary-theme-color);
    font-size: clamp(.72rem,1vw,.85rem)
}

    .holiday-table th {
        padding: 1.2rem 1.5rem;
        border: 0;
        background: var(--bg-light-01);
        color: var(--text-gray);
        font-size: .63rem;
        font-weight: 800;
        text-transform: uppercase
    }

    .holiday-table td {
        padding: 1.15rem 1.5rem;
        border-color: var(--border-light);
        vertical-align: middle;
        font-weight: 600
    }

.holiday-flag {
    margin-right: .75rem;
    font-size: 1.15em
}

.holiday-mini-calendar {
    margin-right: .55rem;
    color: #89bd00
}

.holiday-loading {
    text-align: center;
    color: var(--text-gray)
}

.holiday-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--text-gray);
    font-size: .7rem
}

    .holiday-pagination .page-link {
        min-inline-size: 2rem;
        border: 1px solid var(--border-light);
        border-radius: .4rem !important;
        background: var(--bg-card);
        color: var(--secondary-theme-color);
        font-size: .78rem;
        text-align: center
    }

    .holiday-pagination .page-item {
        margin-left: .35rem
    }

        .holiday-pagination .page-item.active .page-link {
            border-color: var(--primary-theme-color);
            background: var(--primary-theme-color);
            color: var(--secondary-theme-color)
        }

.holiday-insight {
    text-align: center
}

.holiday-insight-copy {
    max-inline-size: 55rem;
    margin: auto
}


.holiday-title-line {
    display: block;
    inline-size: 3.5rem;
    margin: 1.1rem auto 1.8rem;
    border-top: 3px solid var(--primary-theme-color)
}


.holiday-benefits {
    max-inline-size: 57rem;
    margin: clamp(2.5rem,5vw,4rem) auto 0
}

    .holiday-benefits article {
        display: flex;
        align-items: center;
        gap: 1.3rem;
        min-block-size: 100%;
        padding: clamp(1.1rem,2vw,1.6rem);
        border-radius: 1rem;
        background-color: var(--bg-card);
        border: 4px solid var(--border-light-color);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        text-align: left
    }

        .holiday-benefits article > span img {
            width: 60px;
        }

        .holiday-benefits article > span {
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            padding: .75rem;
            border-radius: 50%;
            background: var(--bg-primary-light);
            color: #83b900;
            font-size: clamp(1.5rem,2.4vw,2.4rem)
        }


/* Trading calculator */
.trading-calculator-page p {
    color: var(--text-gray);
    line-height: 1.6
}

.calculator-shell {
    padding: clamp(1.25rem,3vw,2.2rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.calculator-tabs {
    display: flex;
    gap: clamp(1.2rem,4vw,3.5rem);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto
}

.calculator-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0 1rem 1rem;
    border: 0;
    background: transparent;
    color: var(--text-gray);
    font-weight: 800
}

    .calculator-tab.active {
        color: var(--secondary-theme-color)
    }

        .calculator-tab.active:after {
            position: absolute;
            right: 0;
            bottom: 0px;
            left: 0;
            border-bottom: 3px solid var(--primary-theme-color);
            content: ""
        }

    .calculator-tab span {
        margin-left: .45rem;
        padding: .22rem .45rem;
        border-radius: .3rem;
        background: var(--primary-theme-color);
        font-size: .65rem
    }

.calculator-fields {
    margin-top: 1.4rem
}

.calculator-field {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: center;
    height: 100%;
    padding: .8rem;
    border: 1px solid var(--border-light);
    border-radius: .85rem;
    background: var(--bg-card)
}

    .calculator-field > i, .calculation-results i {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .55rem;
        border-radius: .65rem;
        background: var(--bg-primary-light);
        color: #7db300;
        font-style: normal;
        font-size: 1.4rem;
        font-weight: 800
    }

    .calculator-field > span {
        display: grid;
        gap: .35rem;
        font-size: .8rem;
        font-weight: 700
    }

    .calculator-field select, .volume-control {
        inline-size: 100%;
        border: 1px solid var(--border-light);
        border-radius: .65rem;
        color: var(--secondary-theme-color);
        font-size: .9rem;
        font-weight: 600
    }

    .calculator-field select {
        padding: .65rem;
        outline: 0
    }

.volume-control {
    display: grid;
    grid-template-columns: 2.7rem 1fr 2.7rem;
    overflow: hidden
}

    .volume-control button, .volume-control input {
        border: 0;
        background: transparent;
        color: var(--secondary-theme-color);
        text-align: center
    }

    .volume-control button {
        color: #80b800;
        font-size: 1.25rem
    }

    .volume-control input {
        min-inline-size: 0;
        border-inline: 1px solid var(--border-light);
        outline: 0
    }

.calculator-prompt {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: .85rem;
    background: linear-gradient(110deg,var(--bg-primary-light),var(--bg-card))
}

.prompt-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    aspect-ratio: 1;
    padding: .45rem;
    border-radius: 50%;
    background: var(--secondary-theme-color);
    color: var(--text-light);
    font-weight: 800;
    width: 40px;
}

.calculator-prompt p {
    margin: .3rem 0 0;
}

.calculator-art-placeholder, .margin-image-placeholder, .guide-image-placeholder {
    padding: 15px;
    display: grid;
    place-items: center;
    border: 1px dashed color-mix(in srgb,var(--primary-theme-color) 65%,var(--border-light));
    color: var(--text-gray);
    font-size: .65rem
}

    .margin-image-placeholder img, .guide-image-placeholder img {
        width: 300px;
    }

.calculator-art-placeholder {
    margin-left: auto;
    aspect-ratio: 1.7;
    min-inline-size: 26%;
    border-radius: .5rem
}

.calculation-results {
    height: 100%;
    padding: clamp(1.2rem,2.5vw,1.8rem);
    border: 1px solid var(--border-light);
    border-radius: .85rem
}

    .calculation-results h2 {
        margin: 0 0 1rem;
        font-size: 1rem;
        font-weight: 800
    }

    .calculation-results > div {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: .8rem;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-light);
        font-size: 1rem;
        font-weight: 700
    }

        .calculation-results > div:last-child {
            border: 0
        }

    .calculation-results b {
        font-size: .8rem
    }

.calculator-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-light)
}

.calculator-dots, .corner-dots {
    background-image: radial-gradient(var(--primary-theme-color) 1px,transparent 1.5px);
    background-size: .5rem .5rem
}

.calculator-dots {
    inline-size: 30%;
    block-size: 2.5rem;
    opacity: .8
}

.calculator-submit {
    justify-content: center;
    min-inline-size: 11rem
}

.margin-alert {
    position: relative;
    display: grid;
    grid-template-columns: minmax(9rem,.55fr) 1fr;
    gap: clamp(1.3rem,4vw,3rem);
    align-items: center;
    padding: clamp(1.2rem,3vw,2.4rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.margin-image-placeholder, .guide-image-placeholder {
    aspect-ratio: 1;
    border-radius: .8rem
}

.margin-alert h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.3rem,2.2vw,2rem);
    font-weight: 800
}


.corner-dots {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    inline-size: 2.5rem;
    block-size: 2.5rem
}

.calculator-guide h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem,4vw,3.7rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.055em
}

.calculator-guide > span {
    display: block;
    inline-size: 3rem;
    border-top: 3px solid var(--primary-theme-color)
}

.calculator-order {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
    background: var(--secondary-theme-color);
    color: var(--text-light);
    border-color: var(--primary-theme-color)
}


.calculator-copy {
    max-inline-size: 42rem
}

    .calculator-copy h2 {
        margin: 1.5rem 0 .7rem;
        font-size: clamp(1.45rem,2.5vw,1.5rem);
        font-weight: 800;
        color: #4e4e4e
    }

        .calculator-copy h2:first-child {
            margin-top: 0
        }

    .calculator-copy h3 {
        margin: 1.2rem 0 .55rem;
        font-size: clamp(1.1rem,2vw,1.5rem);
        font-weight: 800;
        color: #4e4e4e
    }

    .calculator-copy p, .calculator-copy li {
        font-size: .72rem
    }

    .calculator-copy ul {
        padding-left: 1.2rem
    }
/* Invite friends / loyalty program */
/* Institutional liquidity offering */


.liquidity-featured {
    display: grid;
    align-content: start;
    min-block-size: 100%;
    padding: clamp(1.5rem,3vw,2.6rem);
    border-radius: 1rem;
    background: linear-gradient(145deg,#0c4a4b,#042d31);
    color: var(--text-light);
    box-shadow: 0 1rem 2rem rgba(16,64,66,.16);
    position: relative;
}

    .liquidity-featured .bg-image {
        position: absolute;
        width: 250px;
        right: 0;
        bottom: 0;
        opacity: 0.3;
    }

    .liquidity-featured span img {
        width: 60px;
    }

    .liquidity-featured h2 {
        margin: .9rem 0;
        font-size: clamp(1.7rem,3vw,2rem);
        font-weight: 800;
        line-height: 1
    }

    .liquidity-featured p {
        max-inline-size: 18rem;
        color: #d4e5e3;
        font-size: 14px;
        line-height: 1.55;
    }

    .liquidity-featured a, .liquidity-benefit a, .liquidity-cards article a {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .3rem;
        border-radius: 50%;
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
        font-weight: 800;
        width: fit-content;
    }

.liquidity-benefit {
    display: flex;
    gap: .7rem;
    padding: 1.3rem;
    border: 1px solid var(--border-light);
    border-radius: .8rem;
    background: var(--bg-card);
    box-shadow: 0 .35rem 1rem rgba(16,64,66,.04);
    height: 100%;
}

    .liquidity-benefit i img {
        width: 50px;
    }

    .liquidity-benefit i {
        display: grid;
        place-items: center;
        align-self: start;
        aspect-ratio: 1;
        padding: .5rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #80b400;
        font-style: normal;
        width: 80px;
        height: 80px;
    }


    .liquidity-benefit a {
        width: fit-content;
        background: var(--bg-primary-light);
        color: #80b400
    }

.liquidity-service article {
    display: flex;
    gap: 100px;
    align-items: center;
    padding: 1.3rem;
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .liquidity-service article .content img {
        width: 60px;
        margin-bottom: 20px;
    }

    .liquidity-service article > img {
        width: 250px;
    }

.liquidity-strip {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 24px;
    padding: clamp(1.4rem,3vw,2.6rem);
    border-radius: 1rem;
    background: linear-gradient(105deg,#043e40,#0c6a62);
    color: #fff;
}

    .liquidity-strip img {
        width: 150px;
    }

    .liquidity-strip h2 {
        margin: 0;
        font-size: clamp(1.1rem,2.2vw,2rem);
        font-weight: 800
    }

    .liquidity-strip a {
        margin: 0 0 0 auto;
        white-space: nowrap;
    }

    .liquidity-strip p {
        margin: 10px 0 0;
        color: #d2e4e1;
    }


.liquidity-network-points {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

    .liquidity-network-points > div {
        text-align: center;
        border-radius: 10px;
        padding: 10px;
        background-color: var(--bg-card);
        border: 4px solid var(--border-light-color);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05)
    }

    .liquidity-network-points svg {
        color: #83b500;
    }

    .liquidity-network-points span {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 800;
        width: 100px;
    }

.liquidity-art img {
    width: 80%;
}

.liquidity-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 100%;
    min-block-size: 100%;
    padding: 1.2rem;
    border-radius: 1rem;
    background: #fff;
    text-align: center;
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid var(--primary-theme-color)
}

    .liquidity-step > div {
        position: absolute;
        text-align: center;
        top: -200px;
    }

        .liquidity-step > div b {
            font-size: 22px;
            font-weight: 700;
            color: var(--secondary-theme-color);
            border: 1px solid var(--primary-theme-color);
            border-radius: 100%;
            aspect-ratio: 1;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: inline-block;
            margin: 0 auto;
            background-color: #fff;
        }

        .liquidity-step > div > div {
            border-radius: 100%;
            width: 200px;
            height: auto;
            padding: 20px;
            border: 1px solid var(--border-light);
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            background-color: #fff;
        }

.liquidity-steps .row-cols-1 > .col {
    margin-top: 200px !important;
}

.liquidity-step > div img {
    width: 110px;
    aspect-ratio: 1;
}


.liquidity-step b {
    align-self: flex-start;
    color: #88bd00
}

.liquidity-step > span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 1rem;
    margin: .35rem 0;
    border-radius: 50%;
    background: var(--secondary-theme-color);
    color: var(--primary-theme-color);
    z-index: 1;
    font-size: 1.8rem
}

.liquidity-tab-copy {
    max-inline-size: 44rem;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--text-gray);
    font-size: .8rem
}


.liquidity-cards article {
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(16,64,66,.05)
}

    .liquidity-cards article > div {
        max-inline-size: 10rem;
        margin: auto
    }

    .liquidity-cards article a {
        width: fit-content;
        margin: 1rem auto 0
    }


/* Introducing broker program */


.ib-hero-reward {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.5rem 0;
    padding: .8rem 1rem;
    width: fit-content;
    background: var(--bg-card);
    border-radius: .8rem;
    box-shadow: 0 .7rem 2rem rgba(16,64,66,.09)
}

    .ib-hero-reward > span, .ib-tool-card i {
        color: #91d600;
        font-size: 1.7rem
    }

    .ib-hero-reward div {
        display: grid;
        grid-template-columns: auto auto;
        column-gap: .45rem;
        align-items: center
    }

    .ib-hero-reward small {
        font-size: .66rem;
        color: var(--text-gray)
    }

    .ib-hero-reward b {
        grid-row: 2;
        font-size: 1.8rem;
        color: #80b800
    }


.ib-stats {
    margin-top: 1rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--border-light)
}

    .ib-stats > div {
        border-left: 3px solid var(--primary-theme-color);
        padding-left: 1rem
    }

    .ib-stats b, .ib-stats small, .ib-income b, .ib-income small {
        display: block
    }

    .ib-stats b {
        font-size: 1.05rem
    }

    .ib-stats small, .ib-income small {
        color: var(--text-gray)
    }

.ib-intro {
    text-align: center;
}

    .ib-intro p {
        margin: 1rem auto 1.5rem
    }

.ib-panel {
    padding: clamp(1.3rem,4vw,3rem);
    border-radius: 1.5rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ib-panel-title {
    font-weight: 800;
    font-size: 2rem;
}

.ib-tabs {
    gap: .25rem;
    margin: 1rem 0 2rem
}

.ib-tool-icon {
    display: inline-grid;
    place-items: center;
}

    .ib-tool-icon svg {
        width: 28px;
        height: 28px;
    }

.ib-tool-image {
    width: 200px;
    margin: 0 auto 30px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 22px;
    object-fit: contain;
}

.ib-reason-content img {
    max-width: 50px;
    margin-left: auto;
}

.ib-reason-content {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.ib-tabs button {
    border: 1px solid var(--border-light);
    border-radius: 99px;
    background: #fff;
    padding: .55rem 1rem;
    font-size: .75rem;
    color: var(--secondary-theme-color)
}

    .ib-tabs button.active {
        background: var(--bg-primary-light)
    }

.ib-income {
    display: grid;
    grid-template-columns: 1fr minmax(8rem,3fr) 1fr;
    gap: 1rem;
    align-items: center;
    text-align: center
}

    .ib-income b {
        font-size: clamp(1.4rem,3vw,2.3rem)
    }

    .ib-income input {
        accent-color: #94d900;
        width: 100%
    }

.ib-tool-card {
    height: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .ib-tool-card i {
        font-style: normal
    }


.ib-reasons ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: reason
}

.ib-reasons li {
    counter-increment: reason;
    display: flex;
    align-items: center;
    min-height: 4rem;
    padding: .7rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: .8rem;
    margin: 20px 0;
    justify-content: start;
}

    .ib-reasons li:before {
        content: counter(reason,decimal-leading-zero);
        color: #8dce00;
        font-size: 2.15rem;
        margin-right: 1.5rem;
    }

.ib-reasons ol[start] .ib-reason-content {
    width: auto;
}

.ib-reasons ol[start] li {
    justify-content: space-between;
}

.ib-reasons ol[start] {
    counter-reset: reason 6
}

.ib-round-logo {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin: auto;
}

.franchise-reasons article img {
    margin: 0 auto 30px;
    display: block;
    max-width: 150px;
}

.ib-reasons ol[start] li {
    flex-direction: row-reverse
}

.ib-bottom-icon {
    display: inline-grid;
    place-items: center;
}

    .ib-bottom-icon svg {
        width: 28px;
        height: 28px;
    }

.ib-round-logo span {
    color: var(--secondary-theme-color)
}

.ib-regulated {
    text-align: center
}

    .ib-regulated h2 {
        margin: 1rem 0 2rem
    }

.ib-regulators {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(6rem,1fr));
    gap: .6rem
}

    .ib-regulators span {
        padding: .8rem .4rem;
        border: 1px solid var(--border-light);
        border-radius: .55rem;
        background: #fff;
        font-size: .7rem;
        font-weight: 800
    }

.ib-join h2 {
    margin: .9rem 0
}

.ib-join ul {
    padding: 0;
    list-style: none
}

.ib-join li {
    display: flex;
    gap: .65rem;
    margin: 1rem 0;
    color: #8dce00
}

    .ib-join li span {
        color: var(--secondary-theme-color);
        font-size: .8rem;
        font-weight: 700
    }

.ib-form {
    padding: clamp(1.3rem,4vw,2.5rem);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(16,64,66,.08);
    background: #fff
}

    .ib-form h3 {
        font-size: 1.3rem;
        font-weight: 800
    }

    .ib-form p {
        font-size: .7rem
    }

    .ib-form input, .ib-form select {
        width: 100%;
        padding: .75rem;
        border: 1px solid var(--border-light);
        border-radius: .4rem;
        background: #fff;
        font-size: .75rem
    }

    .ib-form > input {
        margin: .7rem 0
    }

.ib-radio-question {
    display: block;
    margin-top: .9rem;
    font-size: .68rem;
    font-weight: 700
}

.ib-radio {
    display: flex;
    gap: 1.5rem;
    margin: .5rem 0;
    font-size: .75rem
}

.ib-form button {
    margin: .3rem 0 .8rem
}

.ib-form small {
    display: block;
    text-align: center;
    font-size: .65rem;
    color: var(--text-gray)
}

    .ib-form small a {
        color: #7eb900;
        font-weight: 800
    }

.ib-bottom article img {
    max-width: 220px;
    margin-bottom: 30px;
}

.ib-bottom article {
    height: 100%;
    padding: 1.6rem;
    text-align: center;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
}

.ib-bottom i {
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #83c100;
    font-size: 1.4rem;
    font-style: normal
}

.ib-bottom a {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--secondary-theme-color);
    color: var(--secondary-theme-color)
}
/* Affiliate program */






.invite-hero {
    background: radial-gradient(circle at 79% 35%, var(--bg-primary-light), transparent 25%)
}


    .invite-hero > p {
        max-inline-size: 29rem;
        font-size: clamp(.82rem, 1.1vw, 1rem)
    }


.invite-hero-perks {
    max-inline-size: 26rem;
    margin-top: clamp(2rem, 4vw, 3.5rem)
}

.invite-sub {
    padding: 20px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border-light);
}

.invite-hero-perks > div : last-child > div {
    border-right: 0
}

.invite-hero-perks i, .invite-condition-cards i, .invite-broker i {
    display: grid;
    place-items: center;
    margin: auto auto .45rem;
    aspect-ratio: 1;
    padding: .35rem;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #7fb400;
    font-size: 1rem;
    font-style: normal
}

.invite-hero-perks b, .invite-hero-perks small {
    display: block
}

.invite-hero-perks b {
    font-size: .62rem
}

.invite-hero-perks small {
    margin-top: .25rem;
    color: var(--text-gray);
    font-size: .54rem;
    line-height: 1.35
}



.invite-gift-art, .invite-link-art {
    min-block-size: clamp(14rem, 27vw, 26rem)
}

.invite-showcase-copy h2 {
    font-size: clamp(2rem, 3.7vw, 3.8rem)
}

.invite-showcase-copy p {
    font-size: .72rem
}

.invite-showcase-copy small {
    display: block;
    margin-top: 1rem;
    color: var(--text-gray);
    font-size: .57rem;
    line-height: 1.6
}


.invite-steps article {
    position: relative;
    height: 100%;
    padding: clamp(.85rem, 1.5vw, 1.25rem);
    border: 1px solid var(--border-light);
    border-radius: .85rem;
    background: var(--bg-card);
    box-shadow: 0 .45rem 1.2rem rgba(16, 64, 66, .04);
    text-align: center;
}

    .invite-steps article > b {
        display: grid;
        place-items: center;
        position: absolute;
        top: -15%;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--secondary-theme-color);
        color: var(--primary-theme-color);
        font-size: 16px;
        height: 40px;
        width: 40px;
    }




    .invite-steps article:after {
        position: absolute;
        content: "";
        top: -9%;
        left: 104%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 14px solid #b8f000;
        z-index: 3;
    }

#how-it-works .features-header {
    margin-bottom: 100px;
}

.invite-steps article:before {
    position: absolute;
    content: "";
    top: -9%;
    left: 100%;
    transform: translate(-47%, -50%);
    width: 80%;
    height: 1px;
    border: 1px dashed var(--text-gray);
    opacity: .5;
    z-index: 3;
}

.invite-steps .col-md-6.col-xl-3:last-child article:before,
.invite-steps .col-md-6.col-xl-3:last-child article:after {
    display: none;
}

.invite-steps-note {
    width: fit-content;
    margin: 1.4rem auto 0 !important;
    padding: .4rem .9rem;
    border-radius: 99rem;
    background: var(--secondary-theme-color) !important;
    color: var(--text-light) !important;
    font-size: .62rem !important
}






.invite-conditions-heading > div > span {
    display: block;
    inline-size: 3.5rem;
    border-top: 3px solid var(--primary-theme-color)
}


.invite-conditions-art {
    min-block-size: clamp(12rem, 22vw, 22rem)
}

.invite-geo {
    display: grid;
    grid-template-columns: minmax(10rem, .42fr) 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    margin-bottom: 1rem;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    border: 4px solid var(--border-light-color);
    background-color: var(--bg-card);
}






.invite-notice {
    margin-top: .8rem;
    padding: .7rem;
    border-radius: .4rem;
    background: var(--bg-primary-light);
    font-size: .6rem
}

.invite-geo .features-subtext {
    color: var(--secondary-theme-color);
}

.invite-condition-cards article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    height: 100%;
}

.invite-condition-cards ul li {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.invite-condition-cards .features-subtext {
    font-size: 14px;
    line-height: 22px;
}

.invite-condition-cards i {
    align-self: start;
    margin: 0;
    padding: .55rem;
    font-size: 1.2rem
}

.invite-condition-cards ul {
    margin: .35rem 0;
    padding-left: 1rem
}

.invite-condition-cards a {
    color: #7faf00;
    font-weight: 800
}




.invite-broker ul {
    display: grid;
    gap: .55rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none
}

.invite-image-slot {
    margin-bottom: 15px;
    text-align: center;
}

.invite-broker li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light)
}

    .invite-broker li i {
        height: 100px;
        width: 100px;
        padding: 15px;
    }

        .invite-broker li i img {
            width: 100%;
        }

    .invite-broker li b, .invite-broker li span {
        display: block
    }

    .invite-broker li b {
        font-size: 16px
    }

    .invite-broker li span {
        color: var(--text-gray);
        text-align: left;
        font-size: 14px;
    }

        .invite-broker li span b {
            color: var(--secondary-theme-color)
        }



.affiliate-intro {
    max-inline-size: 34rem;
    margin: 0;
    color: var(--text-gray);
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    line-height: 1.65
}

.affiliate-checklist {
    display: grid;
    gap: .7rem;
    margin: clamp(1.6rem, 3vw, 2.5rem) 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary-dark);
    font-size: clamp(.87rem, 1.15vw, 1rem)
}

    .affiliate-checklist li {
        display: flex;
        align-items: center;
        gap: .85rem
    }

        .affiliate-checklist li span {
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            padding: .35rem;
            border-radius: .55rem;
            background: var(--bg-primary-light);
            color: #7dac00;
            font-size: 1.25rem
        }

.affiliate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2.5rem, 6vw, 5rem);
    text-decoration: none
}

    .affiliate-cta span {
        font-size: 1.4em;
        line-height: 1
    }

.affiliate-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    inline-size: 100%;
    min-block-size: 100%;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    color: inherit;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

    .affiliate-step : hover, .affiliate-step.active {
        border-color: color-mix(in srgb, var(--primary-theme-color) 65%, var(--border-light));
        box-shadow: 0 .75rem 1.8rem rgba(16, 64, 66, .09);
        transform: translateY(-.2rem)
    }

.affiliate-step-icon {
    display: grid;
    place-items: center;
    align-self: start;
    aspect-ratio: 1;
    padding: .7rem;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: #83b800;
    font-size: clamp(1.35rem, 2vw, 2rem)
}

.affiliate-step b, .affiliate-step strong, .affiliate-step small {
    display: block
}

.affiliate-step b {
    font-size: clamp(1.2rem, 2vw, 1.7rem)
}

.affiliate-step strong {
    margin: .1rem 0 .6rem;
    font-size: .95rem;
    text-transform: uppercase
}

.affiliate-step small {
    color: var(--text-gray);
    font-size: .72rem;
    line-height: 1.55
}

.affiliate-process-content {
    margin-top: clamp(2rem, 5vw, 4rem)
}

    .affiliate-process-content p : not(.affiliate-process-number) {
        color: var(--text-gray);
        line-height: 1.65
    }


.affiliate-assurances, .affiliate-value-bar {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 4vw, 4rem);
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    padding: .85rem clamp(1rem, 3vw, 2rem);
    border-radius: .75rem;
    color: #75a600;
    font-size: clamp(.75rem, 1.1vw, .9rem);
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    font-weight: 700
}

.affiliate-value-bar {
    margin-top: 0;
    border: 0;
    box-shadow: none;
    background: transparent
}

.affiliate-benefit-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(.75rem, 1.3vw, 1.2rem);
    min-block-size: 100%;
    padding: clamp(1rem, 1.7vw, 1.4rem);
    border-radius: .9rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .affiliate-benefit-card i {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .65rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #7fb300;
        font-size: clamp(1rem, 1.7vw, 1.5rem);
        font-style: normal;
        font-weight: 800
    }

    .affiliate-benefit-card a {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .35rem;
        border-radius: 50%;
        background: var(--secondary-theme-color);
        color: var(--text-light);
        text-decoration: none
    }

.affiliate-closing {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    max-inline-size: fit-content;
    margin: clamp(2rem, 5vw, 4rem) auto 0;
    padding: .85rem 1.2rem;
    border-radius: .5rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    color: #78aa00
}

    .affiliate-closing span {
        color: var(--text-secondary-dark)
    }

/* Why choose us */
.calculator-art-placeholder img {
    width: 300px;
}

.calculator-copy {
    background: #fff;
    padding: 30px;
    border-radius: 30px
}

.why-page {
    overflow: hidden;
    color: var(--text-secondary-dark)
}

    .why-page button {
        font: inherit
    }

.why-market-card {
    padding: clamp(1rem,2.5vw,2rem);
    border: 1px solid var(--border-light);
    border-radius: clamp(1rem,2vw,1.5rem);
    background: var(--bg-card);
    box-shadow: 0 .8rem 2rem rgba(16,64,66,.07)
}

.why-platform-bar {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light)
}

.why-platform-tabs {
    gap: clamp(.3rem,1.2vw,1.25rem);
    border: 0
}

    .why-platform-tabs button {
        padding: .75rem clamp(.65rem,1.5vw,1.5rem);
        border: 0;
        border-bottom: 3px solid transparent;
        background: transparent;
        color: var(--text-gray);
        font-size: clamp(.78rem,1.1vw,.95rem);
        font-weight: 700
    }

        .why-platform-tabs button.active {
            border-color: var(--primary-theme-color);
            color: var(--text-secondary-dark)
        }

    .why-platform-tabs small {
        padding: .15rem .38rem;
        border-radius: .28rem;
        background: var(--primary-theme-color);
        font-size: .66em
    }

.why-compare {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap
}

.why-filter-row {
    padding: 1.35rem 0
}

.why-filter-scroll {
    display: flex;
    gap: .55rem;
    overflow: auto;
    padding-bottom: .2rem
}

    .why-filter-scroll button {
        flex: 0 0 auto;
        padding: .55rem 1rem;
        border: 1px solid var(--border-light);
        border-radius: .65rem;
        background: var(--bg-card);
        font-size: .73rem;
        font-weight: 700
    }

        .why-filter-scroll button.active {
            border-color: var(--primary-theme-color);
            background: var(--primary-theme-color)
        }

.why-market-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem
}

    .why-market-tools label {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .65rem 1rem;
        border-radius: .6rem;
        background: var(--bg-light-01);
        color: var(--text-gray)
    }

    .why-market-tools input {
        width: clamp(8rem,16vw,14rem);
        border: 0;
        outline: 0;
        background: transparent;
        font-size: .75rem
    }

    .why-market-tools > div {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--text-gray);
        font-size: .7rem
    }

    .why-market-tools button {
        padding: .6rem .9rem;
        border: 1px solid var(--border-light);
        border-radius: .6rem;
        background: var(--bg-card);
        font-size: .7rem
    }

.why-table-scroll {
    overflow: auto;
    border: 1px solid var(--border-light);
    border-radius: .75rem
}

.why-rates-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: .75rem
}

    .why-rates-table th {
        padding: .8rem 1.1rem;
        background: var(--bg-primary-light);
        font-size: .7rem
    }

    .why-rates-table td {
        padding: .75rem 1.1rem;
        border-top: 1px solid var(--border-light);
        font-weight: 700;
        white-space: nowrap
    }

        .why-rates-table td:first-child {
            display: flex;
            align-items: center;
            gap: .75rem
        }

.why-flags {
    font-size: 1.25rem
}

.why-rates-table small {
    display: block;
    margin-top: .2rem;
    color: var(--text-gray);
    font-size: .62rem;
    font-weight: 500
}

.why-alert {
    padding: .35rem .5rem;
    border: 0;
    border-radius: 50%;
    background: var(--bg-light-01)
}

.why-rates-table .up td:nth-child(3), .why-rates-table .up td:nth-child(4), .why-rates-table .up td:nth-child(5) {
    color: #159b3f
}

.why-rates-table .down td:nth-child(3), .why-rates-table .down td:nth-child(4), .why-rates-table .down td:nth-child(5) {
    color: var(--red-theme-color)
}

.why-rates-table i {
    margin-left: .25rem;
    font-size: .58rem;
    font-style: normal
}

.why-live {
    color: var(--primary-theme-color)
}

.why-decimals {
    display: grid;
    grid-template-columns: auto repeat(5,1fr);
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: .75rem;
    background: var(--bg-primary-light);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.35
}

    .why-decimals b {
        display: grid;
        place-items: center;
        width: 2.2rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--primary-theme-color);
        font-size: 1.3rem
    }

    .why-decimals span {
        padding-left: 1rem;
        border-left: 1px solid var(--border-light);
        font-size: 13px;
    }

.why-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: clamp(1.5rem,2.5vw,2.2rem);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .6rem 1.4rem rgba(16,64,66,.05);
    text-align: center
}

.why-pillar-icon, .why-value-icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle,var(--bg-card) 40%,var(--bg-primary-light));
    font-size: clamp(2.3rem,3.5vw,3.5rem)
}

.why-pillar-icon {
    width: clamp(5.5rem,8vw,7.5rem);
    aspect-ratio: 1
}

.why-pillar h2 {
    margin: 1.5rem 0 .7rem;
}

.why-pillar i, .why-purpose-copy i, .why-value-card i {
    display: block;
    width: 2.2rem;
    border-top: 3px solid var(--primary-theme-color);
    border-radius: 99rem
}

.why-pillar p {
    margin: 1rem 0 0;
}

.why-pillar a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    margin-top: auto;
    border: 1px solid var(--primary-theme-color);
    border-radius: 50%;
    color: var(--secondary-theme-color);
    text-decoration: none
}


.why-image-slot {
}

.why-purpose-copy {
    display: grid;
    gap: clamp(2rem,4vw,4rem)
}

    .why-purpose-copy > div {
        display: grid;
        grid-template-columns: clamp(4.5rem,9vw,6rem) 1fr;
        gap: clamp(1rem,2.5vw,2rem)
    }

.why-purpose-icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb,var(--primary-theme-color) 45%,var(--border-light));
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.2rem rgba(16,64,66,.08);
    font-size: clamp(2rem,3.5vw,3rem)
}

.why-purpose-copy b {
    color: #7cae00;
    font-size: .75rem;
    text-transform: uppercase
}

.why-purpose-copy h2 {
    margin: .9rem 0;
    font-size: clamp(2rem,2.6vw,2.5rem);
    font-weight: 700;
    line-height: 1.03
}

.why-purpose-copy p {
    margin: 1rem 0 0;
    color: var(--text-gray);
    font-size: .85rem;
    line-height: 1.6
}

.why-values {
    background: var(--bg-light-01)
}

.why-value-card {
    display: grid;
    grid-template-columns: clamp(5rem,9vw,7rem) 1fr;
    gap: clamp(1rem,2vw,1.8rem);
    height: 100%;
    padding: clamp(1.25rem,2.5vw,2rem);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .55rem 1.3rem rgba(16,64,66,.045)
}

.why-value-icon {
    width: 100%;
    aspect-ratio: 1;
    align-self: center
}

.why-value-card div {
    position: relative
}

.why-value-card b {
    display: block;
    font-size: clamp(1.1rem,1.6vw,1.4rem);
    font-weight: 700
}

.why-value-card em {
    position: absolute;
    top: 0;
    right: 0;
    padding: .25rem .5rem;
    border-radius: .35rem;
    background: var(--bg-primary-light);
    color: #68a400;
    font-size: .75rem;
    font-style: normal;
    font-weight: 700
}

.why-value-card i {
    margin: .55rem 0 .8rem
}

.why-value-card ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .7rem;
    line-height: 1.4
}

.why-value-card li {
    position: relative;
    padding-left: .8rem;
    font-size: 14px;
}

    .why-value-card li::before {
        position: absolute;
        left: 0;
        color: #69ac00;
        content: '•'
    }

/* Contact us */

.contact-us-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.5rem,2.4vw,2.35rem);
    border: 1px solid var(--border-light);
    border-radius: 1.4rem;
    background: var(--bg-card);
    box-shadow: 0 .65rem 1.7rem rgba(16,64,66,.05)
}

.contact-us-icon {
    display: grid;
    place-items: center;
    width: clamp(4.5rem,6vw,6.25rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: var(--secondary-theme-color)
}

    .contact-us-icon svg {
        width: 48%;
        height: auto;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.contact-us-card h2 {
    margin: clamp(1.5rem,2.5vw,2.2rem) 0 .75rem;
    font-size: clamp(1.35rem,1.65vw,1.7rem);
    font-weight: 700;
    letter-spacing: -.04em
}

.contact-us-card p {
    max-width: 17rem;
    margin: 0;
    color: #5d6985;
    font-size: clamp(.94rem,1.2vw,1.1rem);
    line-height: 1.65
}

.contact-us-card > i {
    display: block;
    width: 2.2rem;
    margin: clamp(1.7rem,3vw,2.5rem) 0;
    border-top: 2px solid var(--primary-theme-color)
}

.contact-us-card a {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    color: #76bd00;
    font-size: clamp(.9rem,1.2vw,1.08rem);
    font-weight: 600;
    overflow-wrap: anywhere
}

    .contact-us-card a:hover {
        color: var(--secondary-theme-color)
    }

    .contact-us-card a svg {
        flex: 0 0 auto;
        width: 1.4em;
        height: 1.4em;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

/* Funds security */
.funds-security-brand {
    color: var(--text-secondary-dark);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
}

.funds-security-brand-icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 1.25em;
    border: .12em solid var(--primary-theme-color);
    border-radius: 40% 40% 50% 50%;
    color: var(--primary-theme-color);
    font-size: .7em;
}

.funds-security-hero h1 {
    margin: 1.4rem 0 .45rem;
    font-size: clamp(3.5rem, 7.1vw, 7rem);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.065em;
}

    .funds-security-hero h1 em {
        color: var(--primary-theme-color);
        font-style: normal;
    }

.funds-security-tagline {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .4em;
    font-size: clamp(.72rem, 1vw, 1rem);
    font-weight: 600;
}

    .funds-security-tagline i {
        width: .28rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--primary-theme-color);
    }

.funds-security-hero-visual {
    aspect-ratio: 1.35;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary-theme-color) 18%, transparent), transparent 58%);
}

funds-security-intro {
    max-width: 48rem;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.funds-security-intro-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    color: var(--primary-theme-color);
}

    .funds-security-intro-mark span {
        width: 2.3rem;
        border-top: 2px solid currentColor;
    }

    .funds-security-intro-mark b {
        font-size: 1.45rem;
    }

.funds-security-intro h2 {
    margin: 1rem 0 .55rem;
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    font-weight: 700;
}

.funds-security-intro p, .funds-security-card p {
    margin: 0;
    color: var(--text-secondary-dark);
    line-height: 1.5;
}

.funds-security-item + .funds-security-item {
    margin-top: clamp(.5rem, 1.5vw, 1.4rem);
}

.funds-security-card {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 2vw, 1.7rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--border-light);
    border-radius: 1.25rem;
    background: var(--bg-card);
    box-shadow: 0 .6rem 1.7rem rgba(16,64,66,.035);
}

.funds-security-number {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: .32rem .52rem;
    border-radius: .38rem;
    background: var(--primary-theme-color);
    color: var(--secondary-theme-color);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 700;
    line-height: 1;
}

.funds-security-card h3 {
    margin: .2rem 0 .9rem;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 700;
}

.funds-security-card p {
    font-size: clamp(.85rem, 1.15vw, 1rem);
}

.funds-security-card i {
    display: block;
    width: 3rem;
    margin-top: 1.25rem;
    border-top: 2px solid var(--primary-theme-color);
}

.funds-security-cta {
    margin-top: clamp(2rem, 5vw, 4rem);
}

    .funds-security-cta .btn-primary-style {
        display: inline-flex;
        align-items: center;
        gap: clamp(2rem, 5vw, 4rem);
    }

        .funds-security-cta .btn-primary-style span {
            font-size: 1.45em;
            line-height: .7;
        }

/* Deposits and withdrawals */
.deposit-hero {
    background: radial-gradient(circle at 73% 30%, var(--bg-primary-light), transparent 26%);
}

.funds-security-art {
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}

.deposit-quick-cards {
    margin-top: 40px;
}

.deposit-quick-card {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 8px 22px rgba(16,64,66,.04);
}

.deposit-icon, .network-logo {
    display: grid;
    aspect-ratio: 1;
    flex: 0 0 3rem;
    place-items: center;
    border-radius: 13px;
    background: var(--bg-primary-light);
    color: var(--text-secondary-dark);
    font-size: 1.45rem;
}

.deposit-quick-card h2 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.deposit-quick-card p {
    margin: 0;
    color: var(--text-gray);
    font-size: .86rem;
    line-height: 1.6;
}

.deposit-quick-card b {
    display: grid;
    aspect-ratio: 1;
    flex: 0 0 2.25rem;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    background: var(--primary-theme-color);
    font-size: 1.2rem;
}

.deposit-assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-weight: 600;
}

    .deposit-assurance span, .deposit-security-bar span {
        color: var(--secondary-theme-color);
        font-size: 1.8rem;
        line-height: 1;
    }

.deposit-tabs {
    gap: 8px;
    border: 0;
}

    .deposit-tabs .nav-item {
        flex: 1;
    }

    .deposit-tabs .nav-link {
        width: 100%;
        padding: 20px;
        border: 1px solid var(--border-light);
        border-bottom: 3px solid transparent;
        border-radius: 16px 16px 0 0;
        color: var(--text-gray);
        background: var(--bg-light-01);
        font-size: 1.1rem;
        font-weight: 700;
    }

        .deposit-tabs .nav-link span {
            display: inline-grid;
            aspect-ratio: 1;
            place-items: center;
            width: 1.9rem;
            margin-right: 10px;
            border-radius: 50%;
            background: #edf0f3;
        }

        .deposit-tabs .nav-link.active {
            border-bottom-color: var(--primary-theme-color);
            color: var(--text-secondary-dark);
            background: var(--bg-card);
        }

            .deposit-tabs .nav-link.active span {
                background: var(--primary-theme-color);
            }

.deposit-table-wrap {
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: 0 0 16px 16px;
    background: var(--bg-card);
    box-shadow: 0 10px 24px rgba(16,64,66,.04);
}

.deposit-table {
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

    .deposit-table th {
        padding: 18px 22px;
        border: 0;
        color: var(--text-secondary-dark);
        background: var(--bg-light-01);
        font-size: .88rem;
    }

    .deposit-table td {
        padding: 24px 22px;
        vertical-align: middle;
        border-color: var(--border-light);
        color: var(--text-secondary-dark);
        font-size: .92rem;
    }

        .deposit-table td:first-child {
            display: flex;
            align-items: center;
            gap: 14px;
        }

    .deposit-table strong {
        font-size: 1rem;
    }

    .deposit-table small {
        display: block;
        margin-top: 4px;
        color: var(--text-gray);
        font-weight: 500;
    }

    .deposit-table td:first-child small {
        width: fit-content;
        padding: 2px 7px;
        border-radius: 5px;
        background: var(--bg-primary-light);
        color: #198f40;
        font-size: .7rem;
    }

.network-logo {
    flex-basis: 3.45rem;
    color: var(--text-light);
    font-size: 1.8rem;
}

.network-tether {
    background: #18a888;
}

.network-bep {
    background: #f2bc23;
}

.deposit-free {
    color: #189a40 !important;
    font-weight: 700;
}

.time-icon {
    display: inline-grid;
    aspect-ratio: 1;
    width: 2rem;
    place-items: center;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: var(--secondary-theme-color);
    font-size: 18px;
}

.deposit-table .btn-primary-style {
    white-space: nowrap;
}

.deposit-security-bar {
    margin-top: 22px;
    padding: 21px 10px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(16,64,66,.035);
}

    .deposit-security-bar > div:not(:last-child) > div {
        border-right: 1px solid var(--border-light);
    }

    .deposit-security-bar > div > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .deposit-security-bar p {
        margin: 0;
        color: var(--text-gray);
        font-size: .78rem;
        line-height: 1.45;
    }

    .deposit-security-bar b {
        display: block;
        color: var(--text-secondary-dark);
        font-size: .83rem;
    }

.deposit-step {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    text-align: center;
}

    .deposit-step > span {
        display: inline-grid;
        aspect-ratio: 1;
        width: 2.5rem;
        place-items: center;
        border-radius: 50%;
        background: var(--primary-theme-color);
        font-weight: 700;
    }

    .deposit-step h2 {
        margin: 18px 0 10px;
        font-size: 1.3rem;
        font-weight: 700;
    }

    .deposit-step p {
        max-width: 18rem;
        margin: auto;
        color: var(--text-gray);
        line-height: 1.6;
    }

    .deposit-step i {
        display: inline-block;
        width: 20%;
        height: 4px;
        margin-top: 30px;
        border-radius: 99px;
        background: var(--primary-theme-color);
    }

.deposit-step-image img {
    width: 250px;
}

.deposit-step-image {
    margin-bottom: 30px;
}
/* Negative balance protection */
.demo-accounts-page h1, .demo-accounts-page h2, .demo-accounts-page h3, .demo-accounts-page p {
    margin-top: 0;
}

.demo-hero {
    background: radial-gradient(circle at 72% 28%, var(--bg-primary-light), transparent 28%);
}


.demo-hero-image img, .demo-card-image img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.demo-feature-grid {
    margin-top: 100px;
}

.demo-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    border: 4px solid var(--border-light-color);
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.demo-icon {
    display: inline-block;
    place-items: center;
    padding: .55rem .75rem;
    border-radius: 15px;
    background: var(--bg-primary-light);
    color: var(--text-secondary-dark);
    font-size: 1.7rem;
    line-height: 1;
}

.demo-feature-card h2 {
    max-inline-size: 15ch;
    margin: 19px 0 12px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.demo-feature-card i {
    display: block;
    inline-size: 30px;
    margin-bottom: 16px;
    border-top: 3px solid var(--primary-theme-color);
    border-radius: 999px;
}

.demo-feature-card p, .demo-trader-copy p {
    margin-bottom: 20px;
    color: var(--text-gray);
    font-size: .93rem;
    line-height: 1.65;
}

.demo-feature-card a {
    aspect-ratio: 1;
    align-self: flex-end;
    display: grid;
    place-items: center;
    padding: .25rem .65rem;
    border-radius: 50%;
    background: var(--bg-primary-light);
    color: var(--primary-theme-color);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
}

.demo-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

    .demo-cta-wrap .btn-primary-style, .demo-trader-copy .btn-primary-style, .demo-trader-copy .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 30px;
    }

.demo-trader-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 30px;
    border: 4px solid var(--border-light-color);
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.demo-trader-copy h3 {
    margin: 18px 0 10px;
    font-size: clamp(1.65rem, 2.3vw, 2.2rem);
    font-weight: 700;
}

.demo-trader-copy ul {
    display: grid;
    gap: 11px;
    margin: 0 0 28px;
    padding: 0;
    color: var(--text-gray);
    font-size: .88rem;
    list-style: none;
}

.demo-trader-copy li {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .demo-trader-copy li::before {
        display: grid;
        place-items: center;
        padding: .15rem .33rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: var(--text-secondary-dark);
        content: "✓";
        font-size: .75rem;
        font-weight: 700;
    }

.demo-card-image {
    align-self: stretch;
    border-radius: 18px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--primary-theme-color) 18%, transparent), transparent 65%);
}

.demo-faq-section {
    padding-bottom: 120px;
}

.nbp-hero {
    background: radial-gradient(circle at 75% 35%, var(--bg-primary-light), transparent 32%);
}

    .nbp-hero p {
        margin-bottom: 30px;
        font-size: 1.14rem;
    }

    .nbp-hero .btn-primary-style, .nbp-prevention .btn-primary-style {
        display: inline-flex;
        align-items: center;
        gap: 36px;
    }

.nbp-hero-visual img, .nbp-protection-visual img, .nbp-mini-visual img, .nbp-benefit-visual img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.nbp-priority p, .nbp-promise p {
    max-inline-size: 33rem;
}

.nbp-protection-visual {
    margin-top: 30px;
}

.nbp-chat-card {
    padding: clamp(1rem, 3vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--primary-theme-color) 45%, var(--border-light));
    border-radius: 25px;
    background: var(--bg-card);
    box-shadow: 0 12px 34px rgba(16,64,66,.05);
}

.nbp-message {
    padding: 20px 24px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(16,64,66,.05);
}

    .nbp-message + .nbp-message {
        margin-top: 24px;
    }

    .nbp-message b {
        font-size: 1.05rem;
    }

    .nbp-message small {
        color: var(--text-gray);
    }

    .nbp-message p {
        margin: 10px 0 0;
        color: var(--text-dark);
    }

.nbp-message-bank {
    border-color: color-mix(in srgb, var(--primary-theme-color) 42%, var(--border-light));
    background: var(--bg-primary-light);
}

.nbp-protection-visual img {
    margin: 0 auto;
    width: 400px;
}

.nbp-benefit-visual img {
    max-width: 100px;
    margin: 0 auto;
}

.nbp-message-bank b {
    color: var(--secondary-theme-color);
}

.nbp-transfer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
}

    .nbp-transfer-card p {
        flex: 1;
        margin: 0;
        font-size: .9rem;
    }

        .nbp-transfer-card p b {
            display: block;
            margin-bottom: 6px;
            color: var(--text-secondary-dark);
        }

        .nbp-transfer-card p em {
            font-weight: 700;
        }

    .nbp-transfer-card > span {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        padding: .3rem .68rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: var(--secondary-theme-color);
        font-size: 1.5rem;
        margin-left: auto;
    }

.nbp-mini-visual img {
    max-width: 70px;
}

.nbp-chat-card .bottom {
    margin-top: 20px;
    color: var(--text-gray);
    font-size: .8rem;
}

    .nbp-chat-card .bottom:first-letter {
        color: var(--primary-theme-color);
    }

.nbp-promise {
    padding-bottom: 110px;
}

.nbp-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 26px 20px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(16,64,66,.035);
}

.nbp-benefit-visual {
    align-self: stretch;
}

.nbp-benefit i {
    display: block;
    margin: 15px 0;
    border-top: 5px solid var(--primary-theme-color);
    border-radius: 999px;
    inline-size: 28px;
}

.nbp-benefit h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.22;
}

.nbp-benefit p {
    margin-bottom: 25px;
    font-size: .85rem;
}

.nbp-benefit b {
    margin-top: auto;
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--bg-primary-light);
    color: var(--text-secondary-dark);
}

.nbp-prevention-panel {
    padding: clamp(1.25rem, 4vw, 3.5rem);
    border: 1px solid var(--border-light);
    border-radius: 25px;
    background: var(--bg-card);
    box-shadow: 0 12px 30px rgba(16,64,66,.04);
}

.nbp-prevention p em {
    font-weight: 700;
}

.nbp-measures {
    display: grid;
    gap: 14px;
}

    .nbp-measures article {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 19px;
        border: 1px solid var(--border-light);
        border-radius: 16px;
        box-shadow: 0 7px 18px rgba(16,64,66,.04);
    }

    .nbp-measures h3 {
        margin-bottom: 4px;
        font-size: 1rem;
        font-weight: 700;
    }

    .nbp-measures p {
        margin: 0;
        font-size: .82rem;
    }

.tool-card, .trust-card, .promotion-card {
    border-width: 1px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.nbp-measures article > span {
    max-width: 100px;
}

.tool-card {
    min-height: 100%;
    padding-top: 20px;
}

.tool-card-icon, .trust-icon {
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    inline-size: clamp(2.5rem, 4vw, 3rem);
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--bg-primary-light);
    color: var(--secondary-theme-color);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
}

.tool-card .feature-title {
    font-size: 21px;
    line-height: 1.25;
}

.title-accent {
    display: block;
    inline-size: clamp(1.8rem, 3vw, 2.2rem);
    block-size: .125rem;
    margin: 20px 0;
    background: var(--primary-theme-color);
}

.trust-card {
    position: relative;
}

    .trust-card .feature-body {
        padding-top: 36px;
    }


.promotion-card {
    height: 100%;
    min-height: 100%;
    background-size: contain;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position-x: 100%;
    padding: clamp(28px, 4vw, 40px);
    border-radius: 22px;
    border: 2px solid var(--border-light-color);
}

    .promotion-card h2 {
        margin: 0 0 20px;
        font-size: clamp(20px, 2.4vw, 30px);
        color: var(--text-light);
        font-weight: 800;
        line-height: 1.3;
        width: 57%;
    }

    .promotion-card p {
        font-size: 14px;
        font-weight: 500;
        width: 50%;
        color: var(--text-light);
        opacity: .7;
        letter-spacing: .5px;
        margin-bottom: 50px;
        height: 63px;
    }

.promotion-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    font-weight: 600;
    color: var(--text-light);
}
    .promotion-link.dark {
        color: var(--text-secondary-dark);
    }

    .promotion-link span {
        display: grid;
        place-items: center;
        inline-size: clamp(1.75rem, 3vw, 1.9rem);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
    }

.faq-wrap {
    max-inline-size: min(100%, 56rem);
    margin: 0 auto;
}

.faq-heading {
    margin-bottom: 45px;
    text-align: center;
    color: var(--text-secondary-dark);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
}

.faq-section .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
}

.faq-section .accordion-button {
    padding: 20px 0;
    gap: 14px;
    color: var(--text-secondary-dark);
    background: transparent;
    box-shadow: none;
    font-size: 18px;
}

    .faq-section .accordion-button b {
        display: grid;
        place-items: center;
        inline-size: clamp(1.35rem, 3vw, 1.5rem);
        aspect-ratio: 1;
        border: 1px solid var(--border-light);
        color: var(--text-gray);
        font-size: 12px;
        font-weight: 500;
    }

    .faq-section .accordion-button::after {
        margin-left: auto;
        background: none;
        content: '+';
        font-size: 23px;
    }

    .faq-section .accordion-button:not(.collapsed)::after {
        content: '−';
        transform: none;
    }

.faq-section .accordion-body {
    padding: 0 0 20px 38px;
    color: var(--text-gray);
}

/* Account types */

.account-type-card {
    position: relative;
    height: 100%;
    padding: clamp(1.5rem,3vw,2.7rem);
    border: 1px solid var(--border-light);
    border-radius: 1.2rem;
    background: var(--bg-card);
    box-shadow: 0 .7rem 1.8rem rgba(16,64,66,.07);
    text-align: center
}

    .account-type-card.is-featured {
        border-color: var(--primary-theme-color);
        background: linear-gradient(125deg,#fff 60%,var(--bg-primary-light))
    }

.account-type-label {
    position: absolute;
    top: 0;
    left: 50%;
    padding: .35rem 1.2rem;
    border-radius: 99rem;
    background: var(--secondary-theme-color);
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 700;
    transform: translate(-50%,-50%);
    white-space: nowrap
}

.is-featured .account-type-label {
    background: var(--primary-theme-color);
    color: var(--secondary-theme-color)
}

.account-type-card h1 {
    margin: 0 0 .8rem;
    font-size: clamp(1.7rem,2.6vw,2.7rem);
    font-weight: 750
}

.account-type-card > p {
    margin-bottom: 1.5rem;
    color: var(--text-gray);
    font-size: .88rem
}

.account-type-card dl {
    margin: 0;
    text-align: left
}

    .account-type-card dl div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.5rem 0;
        border-top: 1px solid var(--border-light);
        font-size: 15px;
        line-height: 1;
    }

        .account-type-card dl div:last-child {
            padding-bottom: 0;
        }

.account-type-card dt,
.account-type-card dd {
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.account-types-choice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2.4rem 0 1.2rem
}

    .account-types-choice > span,
    .account-step-card > span, .account-benefit-card > span {
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--primary-theme-color);
        width: 100px;
        height: 100px;
    }

    .account-types-choice > span {
        width: 40px;
        height: 40px;
    }

    .account-types-choice p {
        margin: 0;
        font-size: clamp(.9rem,1.5vw,1.15rem)
    }


.account-types-table-wrap {
    overflow-x: auto;
    padding: .4rem
}

.account-types-table {
    width: 100%;
    min-width: 48rem;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    box-shadow: 0 .8rem 2rem rgba(16,64,66,.06);
    font-size: .72rem
}

    .account-types-table th, .account-types-table td {
        padding: .75rem;
        border-right: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        text-align: center;
        font-size: 14px;
    }

    .account-types-table tr > *:last-child {
        border-right: 0
    }

    .account-types-table tbody tr:last-child > * {
        border-bottom: 0
    }

    .account-types-table thead th {
        font-size: 14px;
        font-weight: 500
    }

        .account-types-table thead th:first-child {
            background: var(--secondary-theme-color);
            color: var(--text-light);
            text-transform: uppercase
        }

    .account-types-table tbody th {
        text-align: left;
        font-weight: 600
    }

    .account-types-table td span {
        display: block
    }

    .account-types-table .yes {
        color: #16996e;
        font-size: 1rem
    }

    .account-types-table .no {
        color: var(--red-theme-color);
        font-size: 1rem
    }

.platform-step-card,
.account-step-card, .account-benefit-card {
    position: relative;
    height: 100%;
    padding: clamp(1.25rem,2.5vw,2rem);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .7rem 1.8rem rgba(16,64,66,.055);
    text-align: center;
}

    .platform-step-card .trusted-pill {
        color: var(--secondary-theme-color);
        background-color: var(--primary-theme-color);
    }

    .platform-step-card .icon-box {
        height: 70px;
        width: 70px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--secondary-theme-color);
        color: var(--primary-theme-color);
    }

.platform-step-card {
    text-align: start;
}

.account-benefit-card {
    overflow: hidden;
}

.account-step-card > b {
    position: absolute;
    aspect-ratio: 1;
    left: 50%;
    transform: translateX(-50%);
    top: 18px;
    height: 40px;
    width: 40px;
    display: grid;
    place-items: center;
    margin: -2.35rem auto 1.25rem;
    padding: .45rem;
    border: 1px solid var(--primary-theme-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: #85b900;
}

.account-step-card > span {
    margin: auto;
    background: var(--bg-primary-light);
}

.account-step-card h2 {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    font-weight: 750;
}

.account-step-card i, .account-benefit-card i {
    display: block;
    margin: 1rem auto 0.8rem;
    border-top: 3px solid var(--primary-theme-color);
    inline-size: 2rem;
}

.account-step-card p, .account-benefit-card p {
    margin: 0;
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.55;
}

.account-benefit-card {
    text-align: left
}

    .account-benefit-card > span {
        margin: 0 0 1.1rem;
        font-size: 1.25rem;
        background: var(--bg-primary-light);
    }

    .account-benefit-card i {
        margin-left: 0
    }

    .account-benefit-card h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 750
    }

    .account-benefit-card div {
        margin-top: 1rem;
        text-align: center;
        margin-bottom: -32px;
    }

        .account-benefit-card div img {
            width: auto;
            height: 180px;
        }



.promotion-card.one {
    background-image: url(../images/bg-img-1.png);
    background-color: #013336;
}

.promotion-card.two {
    background-image: url(../images/bg-img-2.png);
    background-color: #002e34;
}

.promotion-card.three {
    background-image: url(../images/bg-img-3.png);
    background-color: #012529;
}

.promotion-card.four {
    background-image: url(../images/bg-img-4.png);
    background-color: #00272a;
}

.site-header {
    position: relative;
    z-index: 50;
}

.mega-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px;
    position: relative;
}

    .mega-header-inner .navbar-brand {
        font-weight: 800;
        font-size: 22px;
        color: var(--text-secondary-dark);
        text-decoration: none;
        white-space: nowrap;
    }

        .mega-header-inner .navbar-brand i {
            color: var(--primary-theme-color);
        }

.mega-nav-desktop {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.mega-nav-list {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--text-secondary-dark);
    font-weight: 500;
    font-size: 18px;
    padding: 10px 14px;
    border-radius: 30px;
    letter-spacing: .5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 220ms cubic-bezier(.4,0,.2,1), color 220ms cubic-bezier(.4,0,.2,1);
}

    .mega-nav-link:hover {
        background-color: var(--bg-light-01);
    }

.mega-arrow {
    transform: rotate(0deg);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
}

.mega-nav-item.has-mega .mega-trigger[aria-expanded="true"] .mega-arrow {
    transform: rotate(-180deg);
}

.mega-panel {
    position: absolute;
    top: calc(100% + 0px);
    left: 50%;
    transform: translate(-50%, 0px);
    background-color: var(--bg-card);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--border-light);
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1), visibility 220ms cubic-bezier(.4,0,.2,1);
    z-index: 60;
}

.mega-nav-item.has-mega .mega-trigger[aria-expanded="true"] + .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mega-panel.cols-1 {
    width: 100vw;
}

.mega-panel.cols-2 {
    width: 100vw;
}

.mega-panel-inner {
    display: flex;
    justify-content: center;
}

.menu-image {
    height: 300px;
    border-radius: 10px;
    width: 500px;
    overflow: hidden;
}

    .menu-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
.mega-col-title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #0a303182;
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.mega-col {
    padding: 0 50px;
}

.mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mega-col-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: .5px;
        position: relative;
        color: var(--text-secondary-dark);
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        padding: 8px 10px;
        border-radius: 8px;
        text-transform: capitalize;
        padding-left: 15px;
        transition: background-color 220ms cubic-bezier(.4,0,.2,1), color 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1);
    }

        .mega-col-list a i {
            font-size: 12px;
            color: var(--primary-theme-color);
            width: 2px;
            flex-shrink: 0;
            position: absolute;
            height: 15%;
            /* background: red; */
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border-left: 3px solid var(--primary-theme-color);
            border-right: 3px solid var(--secondary-theme-color);
        }

        .mega-col-list a:hover {
            background-color: var(--bg-primary-light);
            color: var(--secondary-theme-color);
        }


.mega-nav-item.has-mega.open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background-color: transparent;
    color: var(--text-secondary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1);
}

    .theme-toggle:hover {
        background-color: var(--bg-light-01);
        transform: rotate(20deg);
    }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background-color: transparent;
    cursor: pointer;
}

    .mobile-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background-color: var(--text-secondary-dark);
        margin: 0 auto;
        border-radius: 2px;
        transition: transform 220ms cubic-bezier(.4,0,.2,1), opacity 220ms cubic-bezier(.4,0,.2,1);
    }

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(12,27,31,0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms cubic-bezier(.4,0,.2,1), visibility 220ms cubic-bezier(.4,0,.2,1);
    z-index: 90;
}

    .mobile-menu-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(340px, 88vw);
    background-color: var(--bg-card);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    .mobile-menu-drawer.open {
        transform: translateX(0);
    }

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

    .mobile-menu-header .navbar-brand {
        font-weight: 800;
        font-size: 20px;
        color: var(--text-secondary-dark);
        text-decoration: none;
    }

.mobile-menu-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary-dark);
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    flex-grow: 1;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--border-light);
}

.mobile-nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    color: var(--text-secondary-dark);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 8px;
    cursor: pointer;
    text-decoration: none;
}

.mobile-accordion-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.mobile-nav-item.open .mobile-accordion-arrow {
    transform: rotate(-135deg);
}

.mobile-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms cubic-bezier(.4,0,.2,1);
}

.mobile-accordion-inner {
    padding: 4px 8px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-mega-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-theme-color);
    margin-bottom: 8px;
}

.mobile-mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

    .mobile-mega-col-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-gray);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 6px;
        border-radius: 8px;
    }

        .mobile-mega-col-list a i {
            font-size: 12px;
            color: var(--primary-theme-color);
            width: 14px;
            flex-shrink: 0;
        }

        .mobile-mega-col-list a:hover {
            color: var(--primary-theme-color);
        }

.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 24px;
    border-top: 1px solid var(--border-light);
}

    .mobile-menu-actions .theme-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary-dark);
        padding: 8px 2px 4px;
    }


/* ===== Top Section background ===== */
.calculator-section {
    background: linear-gradient(135deg, #eef2f1 0%, #e7edea 55%, #eef4ee 100%);
    position: relative;
    overflow: hidden;
}

/* ===== Platform Tabs ===== */
.platform-tabs {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 10px 22px;
    box-shadow: 0 6px 18px rgba(15,40,40,0.05);
    margin-bottom: 26px;
}

    .platform-tabs .nav {
        gap: 6px;
    }

    .platform-tabs .nav-link {
        color: var(--text-gray);
        font-weight: 600;
        font-size: 0.98rem;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        position: relative;
    }

        .platform-tabs .nav-link i {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: var(--bg-light-01);
            color: var(--text-gray);
            font-style: normal;
            font-size: 0.75rem;
        }

        .platform-tabs .nav-link.active {
            color: var(--secondary-theme-color);
        }

            .platform-tabs .nav-link.active i {
                background: var(--primary-theme-color);
            }

            .platform-tabs .nav-link.active::after {
                content: "";
                position: absolute;
                left: 14px;
                right: 14px;
                bottom: -1px;
                height: 3px;
                background: var(--primary-theme-color);
                border-radius: 4px;
            }

/* ===== Calculator card ===== */
.calc-card {
    background: var(--bg-card);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(15,40,40,0.05);
    padding: 36px 40px;
    height: 100%;
}

.field-label {
    font-size: 0.88rem;
    color: var(--secondary-theme-color);
    font-weight: 500;
    margin-bottom: 8px;
}


.field-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.field-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    font-style: normal;
}

.icon-green {
    background: #eefccc;
    color: #516a00;
}

.icon-gray {
    background: var(--bg-light-01);
    color: #9aa6a4;
}

.field-control {
    flex: 1;
    min-width: 0;
}

    .field-control .form-control,
    .field-control .form-select {
        border-radius: 10px;
        border: 1px solid var(--border-light);
        padding: 10px 14px;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--secondary-theme-color);
    }

        .field-control .form-control:focus,
        .field-control .form-select:focus {
            box-shadow: 0 0 0 3px rgba(183,228,42,0.25);
            border-color: var(--primary-theme-color);
        }

.input-group .btn-stepper {
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--secondary-theme-color);
    width: 40px;
    font-weight: 600;
}

.input-group .form-control {
    text-align: center;
}

/* ===== Results Card ===== */
.results-card {
    background: var(--bg-card);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(15,40,40,0.05);
    padding: 34px 34px;
    height: 100%;
    position: relative;
}

.results-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary-theme-color);
    margin-bottom: 22px;
}

.result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}

    .result-item + .result-item {
        border-top: 1px solid var(--border-light);
    }

.result-label {
    font-size: 0.95rem;
    color: var(--secondary-theme-color);
    margin-bottom: 6px;
}

.result-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-dark);
}

.result-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-style: normal;
    flex-shrink: 0;
}

/* ===== How to use section ===== */

.step-card {
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.step-number {
    color: var(--secondary-theme-color);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 18px;
}

.step-icon-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .step-icon-box img {
        max-width: 100%;
    }

.step-title {
    font-weight: 700;
    color: var(--secondary-theme-color);
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.step-text {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.btn-start-trading {
    background: var(--secondary-theme-color);
    color: var(--bg-card);
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid rgba(183,228,42,0.4);
    border-radius: 40px;
    padding: 14px 14px 14px 26px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
}

    .btn-start-trading .icon-circle {
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-style: normal;
    }

    .btn-start-trading:hover {
        color: var(--bg-card);
        opacity: 0.92;
    }





/* ---------- Hero card ---------- */
.profit-wrapper {
    position: relative;
}

.glass-card {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-light);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(20,40,30,.08);
}

.profit-image-card {
    padding: 14px;
    overflow: hidden;
}

    .profit-image-card img {
        max-width: 100%;
        width: auto;
        height: auto;
        border-radius: calc(28px - 10px);
        display: block;
    }

.floating-badge {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(20,40,30,.10);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

    .floating-badge .icon-box {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

.icon-box.target {
    background: #eafcea;
    color: var(--text-dark);
}

.icon-box.shield {
    background: #fdeaec;
    color: var(--red-theme-color);
}

.floating-badge h6 {
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 2px;
}

.floating-badge p {
    font-size: .8rem;
    color: var(--text-gray);
    margin-bottom: 0;
    line-height: 1.35;
}

.badge-stack {
    position: absolute;
    left: -45px;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 230px;
    z-index: 3;
}


/* ---------- Example card ---------- */
.example-card {
    padding: 34px;
    position: relative;
    overflow: hidden;
}

    .example-card .icon-chip {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eafcea;
        color: var(--secondary-theme-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-bottom: 14px;
    }

    .example-card h5 {
        font-weight: 800;
        font-size: 1.3rem;
        line-height: 1.35;
    }

    .example-card p {
        color: #39433f;
        font-size: .98rem;
        line-height: 1.75;
        margin-bottom: 16px;
    }

        .example-card p span.highlight {
            color: var(--text-dark);
            font-weight: 700;
        }

    .example-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, transparent 50%, #b6ec5c 50%);
        border-bottom-right-radius: 28px;
        opacity: .85;
    }

/* ---------- Info cards (stop loss / take profit) ---------- */
.info-card {
    border-radius: 28px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

    .info-card.card-loss {
        background: linear-gradient(135deg,#fdeceb 0%, #ffffff 60%);
    }

    .info-card.card-profit {
        background: linear-gradient(135deg,#eaf7ec 0%, #ffffff 60%);
    }

    .info-card .icon-round {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

.card-loss .icon-round {
    background: #fddfe0;
    color: var(--red-theme-color);
    font-size: 30px;
}

.card-profit .icon-round {
    background: #dff3df;
    color: var(--text-dark);
    font-size: 30px;
}

.info-card h4 {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0;
}

.info-card h3 {
    font-weight: 800;
    font-size: 1.7rem;
    margin-bottom: 14px;
}

.card-loss h3 {
    color: var(--red-theme-color);
}

.card-profit h3 {
    color: var(--secondary-theme-color);
}

.info-card p {
    color: #4a534f;
    font-size: .95rem;
    line-height: 1.75;
    max-width: 80%;
    margin-bottom: 0;
}

.info-card .shield-img {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 44%;
    max-width: 220px;
    opacity: .95;
}

@media (max-width: 767.98px) {
    .section-heading {
        font-size: 1.9rem;
    }

    .platform-tabs {
        padding: 10px 14px;
    }

        .platform-tabs .nav-link span {
            display: none;
        }

    .calculator-section {
        padding: 16px 12px 40px;
        border-radius: 20px;
    }
}

/* Who we are */
.who-we-are-benefits {
    margin-bottom: 45px;
}

.who-we-are-benefit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 100%;
    border-right: 1px solid var(--border-light);
}

.who-we-are-benefit-icon {
    position: relative;
    display: grid;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    place-items: center;
    color: var(--text-secondary-dark);
    border: 1px solid var(--border-light);
    border-radius: 13px;
    background: var(--bg-card);
    box-shadow: 0 7px 16px rgba(16, 64, 66, .10);
}

    .who-we-are-benefit-icon::after {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 10px;
        height: 10px;
        content: "";
        border: 3px solid var(--bg-card);
        border-radius: 50%;
        background: var(--primary-theme-color);
    }

    .who-we-are-benefit-icon svg {
        width: 36px;
        height: 36px;
    }

.who-we-are-benefit h2 {
    margin: 5px 0 8px;
    color: var(--text-secondary-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.who-we-are-benefit p {
    margin: 0;
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.65;
}

.who-we-are-benefit:last-child {
    border-right: 0;
}

.who-we-are-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 322px;
    padding: 9px 12px 9px 32px;
    color: var(--text-dark);
    border-radius: 999px;
    background: var(--primary-theme-color);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--primary-theme-color) 35%, transparent);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

    .who-we-are-cta:hover {
        color: var(--text-dark);
        box-shadow: 0 15px 26px color-mix(in srgb, var(--primary-theme-color) 48%, transparent);
        transform: translateY(-2px);
    }

.who-we-are-cta-arrow {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--primary-theme-color);
    border-radius: 50%;
    background: var(--secondary-theme-color);
}

    .who-we-are-cta-arrow svg {
        width: 16px;
        height: 16px;
    }

.who-we-are-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 15px 0 0;
    color: var(--text-gray);
    font-size: 16px;
}

    .who-we-are-trust svg {
        width: 18px;
        height: 18px;
    }

/* Awards */
.awards-section {
    position: relative;
}

.awards-heading, .awards-grid {
    position: relative;
    z-index: 1;
}



    .awards-heading .features-heading {
        margin: 28px 0 18px;
    }

        .awards-heading .features-heading span {
            color: var(--primary-theme-color);
        }

    .awards-heading p {
        margin: 0;
        color: var(--text-gray);
        font-size: 20px;
    }

.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 45px;
    margin-top: 46px;
}

.award-card {
    box-shadow: 0 7px 16px rgba(16, 64, 66, .10);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    text-align: center;
    border-radius: 22px;
    background: var(--bg-card);
}

.award-emblem {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 165px;
    color: var(--text-secondary-dark);
    line-height: 1;
}

    .award-emblem strong {
        display: block;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: .03em;
    }

    .award-emblem em {
        margin-top: 5px;
        font-size: 13px;
        font-style: normal;
        letter-spacing: .1em;
    }

.award-emblem-hexagon {
    width: 130px;
    height: 150px;
    margin-bottom: 15px;
    color: var(--text-light);
    clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
    background: var(--text-secondary-dark);
    box-shadow: inset 0 0 0 4px var(--primary-theme-color);
}

    .award-emblem-hexagon span {
        font-size: 12px;
        letter-spacing: .08em;
    }

    .award-emblem-hexagon strong {
        margin: 4px 0;
        font-size: 25px;
        color: var(--text-light);
    }

.award-emblem-bars span {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 63px;
    margin-bottom: 8px;
}

.award-emblem-bars b {
    width: 10px;
    background: var(--primary-theme-color);
}

    .award-emblem-bars b:nth-child(1) {
        height: 20px;
    }

    .award-emblem-bars b:nth-child(2) {
        height: 34px;
    }

    .award-emblem-bars b:nth-child(3) {
        height: 48px;
    }

    .award-emblem-bars b:nth-child(4) {
        height: 62px;
        background: var(--secondary-theme-color);
    }

.award-emblem-shield svg {
    width: 94px;
    height: 98px;
    margin-bottom: 4px;
    color: var(--text-secondary-dark);
}

    .award-emblem-shield svg path:last-child {
        color: var(--primary-theme-color);
    }

.award-emblem-globe > span {
    display: grid;
    width: 90px;
    height: 90px;
    place-items: center;
    margin-bottom: 8px;
    color: var(--primary-theme-color);
    border: 5px solid var(--text-secondary-dark);
    border-radius: 50%;
    font-size: 78px;
    line-height: .7;
}

.award-emblem-diamond svg {
    width: 115px;
    height: 78px;
    margin-bottom: 10px;
}

.award-card h3 {
    min-height: 62px;
    margin: 18px 0 16px;
    color: var(--text-secondary-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.award-card > i {
    width: 38px;
    height: 2px;
    margin-bottom: 19px;
    background: var(--primary-theme-color);
}

.award-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    color: var(--text-gray);
    font-size: 24px;
    font-weight: 700;
}

    .award-year span {
        color: var(--primary-theme-color);
        font-size: 44px;
        line-height: .65;
        transform: rotate(-25deg);
    }

    .award-year .award-laurel-right {
        transform: rotate(25deg) scaleX(-1);
    }

/* Awards page */
.awards-page {
    overflow: hidden;
    color: var(--text-secondary-dark);
    background: radial-gradient(circle at 76% 21%,var(--bg-primary-light),transparent 18%),var(--bg-light)
}

.awards-hero {
    margin-bottom: clamp(2rem,4vw,4rem)
}

.awards-tabs {
    overflow-x: auto;
    margin-bottom: clamp(1.5rem,2.5vw,2.5rem);
    border: 1px solid var(--border-light);
    border-radius: 1.25rem;
    background: var(--bg-card)
}

    .awards-tabs .nav {
        display: flex;
        flex-wrap: nowrap;
        min-inline-size: max-content
    }

    .awards-tabs .nav-link {
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: .9rem;
        padding: clamp(1rem,1.8vw,1.5rem);
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-gray);
        font-size: clamp(.8rem,1.2vw,1.05rem);
        font-weight: 700;
        white-space: nowrap
    }

        .awards-tabs .nav-link + .nav-link {
            border-left: 1px solid var(--border-light)
        }

        .awards-tabs .nav-link span {
            font-size: 1.8em
        }

        .awards-tabs .nav-link.active {
            background: transparent;
            color: var(--text-secondary-dark)
        }

            .awards-tabs .nav-link.active span {
                color: #698b00;
            }

            .awards-tabs .nav-link.active::after {
                position: absolute;
                right: 8%;
                bottom: 0px;
                left: 8%;
                border-bottom: 4px solid var(--primary-theme-color);
                content: ""
            }

.award-card {
    display: flex;
    align-items: center;
    block-size: 100%;
    min-block-size: 0;
    padding: clamp(1.5rem,2.7vw,2.5rem);
    border: 1px solid var(--border-light);
    border-radius: 1.25rem;
    background: var(--bg-card);
    box-shadow: 0 .55rem 1.35rem rgba(16,64,66,.045);
    text-align: center
}

.award-brand {
    display: grid;
    place-items: center;
    gap: .2rem;
    min-block-size: clamp(6rem,10vw,9rem);
    color: #78869a;
    font-size: clamp(2.5rem,4vw,4rem);
    font-weight: 750;
    line-height: .8
}

    .award-brand small {
        font-size: clamp(.58rem,.8vw,.8rem);
        font-weight: 700;
        line-height: 1.15
    }

.award-brand-cfi {
    padding: .45rem;
    border-radius: .8rem;
    background: #8996a8;
    color: var(--text-light);
    font-size: clamp(1.5rem,3vw,2.6rem)
}

.award-brand-fame {
    font-size: clamp(2.5rem,4vw,4rem)
}

.award-card > i {
    display: block;
    margin: 1rem 0;
    border-top: 3px solid var(--primary-theme-color);
    border-radius: 99px;
    inline-size: 2.2rem
}

.award-card h2 {
    min-block-size: 0;
    margin: 0 0 1rem;
    color: #071931;
    font-size: clamp(1.05rem,1.5vw,1.4rem);
    font-weight: 750;
    line-height: 1.38
}

.award-card footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    align-self: stretch;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-gray);
    font-size: clamp(.8rem,1.1vw,1rem);
    font-weight: 500;
    text-align: left
}

    .award-card footer span {
        color: #698b00;
    }

/* Islamic accounts */
.islamic-hero {
    background: radial-gradient(circle at 82% 28%,var(--bg-primary-light),transparent 24%)
}

.islamic-hero-cta, .islamic-wide-cta, .islamic-dark-cta {
    display: inline-flex;
    align-items: center;
    gap: 26px
}

.islamic-hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 28rem;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(140deg,#fafafa,#eef0ed)
}

.islamic-principles-list {
    display: grid;
    gap: 16px;
    max-width: 72rem;
    margin: auto
}

.islamic-principle {
    display: grid;
    grid-template-columns: auto minmax(9rem,11rem) 1fr;
    align-items: center;
    gap: 26px;
    padding: 30px;
    border: 4px solid var(--border-light-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


.islamic-principle-title {
    padding-right: 26px;
    border-right: 1px solid color-mix(in srgb,var(--primary-theme-color) 60%,var(--border-light))
}

.islamic-principle h2 {
    margin-bottom: 2px;
    font-size: 1rem;
    font-weight: 750
}

.islamic-principle p {
    margin-bottom: 0;
    color: var(--text-gray);
    font-size: .9rem;
    line-height: 1.52
}

.islamic-principle > p b {
    color: #7db300
}

.islamic-award-card,
.islamic-platform-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    border: 4px solid var(--border-light-color);
    overflow: hidden;
    padding: 30px;
    position: relative;
}

    .islamic-platform-card.featured {
        border-color: var(--primary-theme-color);
        background: linear-gradient(150deg,#064649,#032e31);
        color: var(--text-light)
    }

.islamic-platform-logo {
    display: grid;
    place-items: center;
    width: 47px;
    aspect-ratio: 1;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--bg-primary-light);
    color: #84ba00;
    font-size: .78rem;
    font-weight: 800
}

.featured .islamic-platform-logo {
    background: rgba(182,240,0,.18);
    color: var(--primary-theme-color)
}

.islamic-platform-card h3 {
    margin-bottom: 24px;
    font-size: 1.23rem;
    font-weight: 750
}

.islamic-platform-card ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.islamic-platform-card li {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
    font-size: 15px;
}

.featured li {
    border-color: rgba(255,255,255,.2)
}

.islamic-platform-card li > span {
    color: #8abb00;
    font-size: 1.25rem;
    line-height: 1
}

.islamic-platform-card li div {
    font-weight: 700
}

.islamic-platform-card li small {
    display: block;
    margin-top: 4px;
    color: var(--text-gray);
    font-weight: 400
}

.featured li small {
    color: rgba(255,255,255,.72)
}

.islamic-platform-card li b {
    color: var(--text-secondary-dark);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap
}

.islamic-platform-card.featured li b {
    color: var(--primary-theme-color);
}

.islamic-platform-space {
    padding-top: 5px;
    font-size: .8rem;
}

    .islamic-platform-space b {
        color: var(--primary-theme-color);
    }

    .islamic-platform-space p {
        margin: 7px 0 0;
        color: rgba(255,255,255,.8);
        line-height: 1.55
    }

.islamic-wide-cta {
    border-radius: 999px
}

.islamic-award-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 6px 17px rgba(16,64,66,.1);
    color: var(--accent-blue);
    font-size: 1.25rem
}

.islamic-award-card h3 {
    position: relative;
    z-index: 1;
    margin: 17px 0 14px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3
}

.islamic-award-card i {
    display: block;
    width: 31px;
    border-top: 3px solid currentColor
}

.islamic-award-card p {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    color: var(--text-gray);
    font-size: .78rem;
    font-weight: 700
}

.islamic-award-shape {
    position: absolute;
    right: 5%;
    bottom: -3%;
    display: grid;
    place-items: center;
    width: 35%;
    aspect-ratio: .66;
    text-align: center;
    transform: perspective(400px) rotateY(-13deg)
}



.islamic-dark-cta {
    border-color: var(--secondary-theme-color);
    border-radius: 999px;
    background: var(--secondary-theme-color);
    color: var(--text-light)
}

    .islamic-dark-cta:hover {
        background: var(--secondary-theme-color);
        color: var(--text-light)
    }



/* ================================
   Features
================================ */
.features-row {
    margin-bottom: 48px;
}

.feature-item {
    text-align: left;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    margin-bottom: 16px;
    font-size: 20px;
    color: var(--secondary-theme-color);
}


.feature-text {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.5;
    margin-bottom: 0;
}

/* ================================
   Buttons
================================ */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-theme-color);
    border: 1px solid var(--primary-theme-color);
    color: var(--secondary-theme-color);
    font-weight: 600;
    font-size: 15px;
    padding: 15px 26px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .btn-primary-custom:hover {
        background-color: var(--primary-theme-color);
        color: var(--secondary-theme-color);
    }

.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    color: var(--secondary-theme-color);
    font-weight: 600;
    font-size: 15px;
    padding: 15px 26px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .btn-outline-custom:hover {
        background-color: var(--bg-primary-light);
        color: var(--secondary-theme-color);
    }

/* Regulation illustration area scales with its Bootstrap column. */
.regulation-visual {
    text-align: center;
    padding: 50px;
}

    .regulation-visual img {
        width: 350px;
    }

.map-dot {
    width: clamp(.5rem, 1vw, .7rem);
}

/* Franchise program */



.franchise-stats {
    margin-top: clamp(1.5rem,3vw,3rem);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 .6rem 2rem rgba(16,64,66,.09)
}

    .franchise-stats > div {
        padding: 1.1rem 1.5rem
    }

        .franchise-stats > div + div {
            border-left: 1px solid var(--border-light)
        }

    .franchise-stats b, .franchise-stats small {
        display: block
    }

    .franchise-stats b {
        color: #7cb000;
        font-size: clamp(1rem,1.8vw,1.45rem)
    }

    .franchise-stats small {
        color: var(--text-gray);
    }


.franchise-mini-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem;
    padding: 1rem;
    border-radius: .65rem;
    background: var(--secondary-theme-color);
    color: var(--primary-theme-color);
    text-align: start;
    font-size: 1.5rem;
    font-weight: 800
}

    .franchise-mini-stats small {
        display: block;
        color: rgba(255,255,255,.75);
        font-size: 14px;
        font-weight: 400
    }

.franchise-kicker {
    margin-bottom: .8rem;
    font-weight: 800;
    font-size: 1.5rem;
    background: transparent;
    padding: 0
}

.franchise-benefits {
    border-top: 2px solid var(--primary-theme-color)
}

    .franchise-benefits article {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: .8rem;
        align-items: center;
        padding: .85rem 0;
        border-bottom: 1px solid var(--border-light)
    }

    .franchise-benefits i {
        display: grid;
        place-items: center;
        padding: .5rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #7cad00;
        font-style: normal
    }

    .franchise-benefits article > span {
        display: grid;
        place-items: center;
        padding: .2rem .45rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #6c9c00
    }

.franchise-video {
    font-size: .75rem
}

.franchise-trust article {
    text-align: center;
    border: 2px solid var(--border-light);
    padding: 100px 30px;
    height: 100%;
    border-radius: 20px;
}

    .franchise-trust article > i {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: 1rem;
        margin: auto auto 1rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #79a900;
        font-size: 1.5rem;
        width: 80px;
        font-style: normal
    }


.franchise-note {
    color: #7eae00;
    font-size: .8rem
}

.franchise-reasons article, .franchise-programs article, .franchise-steps article {
    position: relative;
    min-block-size: 100%;
    padding: 1.25rem;
    border-radius: .9rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .franchise-reasons article > b {
        color: #939393;
        font-size: 1.5rem
    }



.franchise-form {
    max-inline-size: 46rem;
    margin: auto;
    padding: clamp(1.3rem,4vw,3.5rem);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    background: var(--bg-card);
    box-shadow: 0 1rem 2.5rem rgba(16,64,66,.09)
}

.franchise-form-logo {
    display: inline-grid;
    place-items: center;
    padding: .45rem;
    border-radius: 50%;
    background: var(--secondary-theme-color);
    color: var(--primary-theme-color)
}

.franchise-form h2 {
    margin: .65rem 0 .3rem;
    font-size: clamp(1.5rem,2.5vw,2.2rem)
}

.franchise-form > div > p {
    font-size: .7rem
}

.franchise-form label, .franchise-form legend {
    display: block;
    margin-bottom: .35rem;
    color: var(--secondary-theme-color);
    font-size: .66rem;
    font-weight: 700
}

.franchise-form fieldset {
    border: 0;
    padding: 0
}

.franchise-form input:not([type=radio]):not([type=checkbox]), .franchise-form select, .franchise-form textarea {
    display: block;
    inline-size: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--border-light);
    border-radius: .35rem;
    outline-color: var(--primary-theme-color);
    color: var(--secondary-theme-color);
    font-size: .72rem
}

.franchise-form textarea {
    resize: vertical
}

.franchise-radio {
    display: flex;
    gap: 1rem
}

    .franchise-radio label, .franchise-consent {
        display: flex !important;
        align-items: center;
        gap: .4rem
    }

.franchise-consent {
    margin-top: 1rem !important;
    font-size: .64rem !important
}

.franchise-submit {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin-top: 1rem
}


.franchise-programs article {
    text-align: center
}

.franchise-program-art img {
    width: 250px;
}

.franchise-program-art {
    display: grid;
    place-items: center;
    min-block-size: clamp(11rem,18vw,16rem);
    margin-bottom: 1rem;
    border-radius: .75rem;
    background: radial-gradient(circle,var(--bg-primary-light),transparent 65%);
    color: #75a600;
    font-size: clamp(3rem,8vw,6rem)
}

.franchise-programs article a {
    color: #7daa00;
    text-decoration: none
}


.franchise-steps article img {
    width: 250px;
    display: block;
    margin: 0 auto 30px;
}

.franchise-steps article {
    text-align: center
}

    .franchise-steps article > span {
        color: #7cad00;
        font-weight: 800
    }


.franchise-steps a {
    display: inline-grid;
    place-items: center;
    padding: .25rem .6rem;
    border-radius: 50%;
    background: var(--secondary-theme-color);
    color: var(--text-light);
    text-decoration: none;
    aspect-ratio: 1;
}


.franchise-closing .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem
}

/* Loyalty program */







.loyalty-hero {
    background: radial-gradient(circle at 78% 42%,var(--bg-primary-light),transparent 29%)
}

.loyalty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--border-light);
    border-radius: 99rem;
    color: #83b900;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase
}

    .loyalty-eyebrow span {
        font-size: 1rem
    }

.loyalty-hero h1 {
    margin: .9rem 0 1rem;
    font-size: clamp(2.8rem,5.2vw,5.5rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.065em
}

    .loyalty-hero h1 span {
        display: block
    }

.loyalty-hero > p, .loyalty-hero .col-lg-5 > p {
    max-inline-size: 28rem;
    font-size: clamp(.86rem,1.15vw,1rem)
}

.loyalty-hero-actions {
    margin-top: 1.5rem
}

.loyalty-video-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border: 1px solid var(--border-light);
    border-radius: 99rem;
    color: var(--secondary-theme-color);
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none
}

    .loyalty-video-link span {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .22rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #74a900;
        font-size: .65rem
    }




.loyalty-perks {
    margin-top: clamp(1.5rem,3vw,3rem)
}

    .loyalty-perks article {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem
    }

    .loyalty-perks .col-md-4 + .col-md-4 article {
        border-left: 1px solid var(--border-light)
    }

    .loyalty-perks i {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .6rem;
        border: 1px solid var(--border-light);
        border-radius: .7rem;
        background: var(--bg-card);
        color: #83bc00;
        font-size: 1.4rem;
        font-style: normal;
        width: 70px;
        height: 70px;
    }


.loyalty-values article {
    position: relative;
    padding: clamp(1.5rem,3vw,3rem);
    border-right: 1px solid var(--border-light);
    min-block-size: 100%
}

.loyalty-values .col-md-4:last-child article {
    border-right: 0
}

.loyalty-round-icon {
    display: flex;
    padding: .65rem;
    align-items: center;
    justify-content: center;
    margin-bottom: .65rem;
    border-radius: 50%;
    background: var(--bg-primary-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary-theme-color) 50%,transparent);
    color: #77aa00;
    font-size: 1.55rem;
    font-weight: 800;
    height: 50px;
    width: 50px;
}

.loyalty-values h2 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    width: 50%;
}

.loyalty-values p.feature-desc {
    width: 60%;
}



.loyalty-values article > b, .loyalty-statistics article b {
    display: block;
    inline-size: 2rem;
    border-top: 2px solid var(--primary-theme-color);
    margin: .65rem 0
}

.loyalty-image-slot {
    position: absolute;
    right: 20px;
    bottom: 0;
    inline-size: 45%;
    aspect-ratio: 1;
    text-align: right;
}

.loyalty-journey article {
    position: relative;
    text-align: center
}

    .loyalty-journey article > span {
        display: block;
        color: color-mix(in srgb, var(--primary-theme-color) 90%, #000);
        font-size: clamp(3.6rem, 6vw, 6.5rem);
        font-weight: 800;
        line-height: 1;
        opacity: .2;
    }

.loyalty-journey-art {
    margin: 15px auto;
    width: 60%;
}

.loyalty-journey h2 {
    display: table;
    margin: -.35rem auto .65rem;
    padding: .45rem .9rem;
    border-radius: 99rem;
    background: color-mix(in srgb, var(--primary-theme-color) 90%, #000);
    color: var(--secondary-theme-color);
    font-size: .78rem;
    font-weight: 800
}

.loyalty-journey p:not(.features-subtext) {
    max-inline-size: 14rem;
    margin-inline: auto;
    font-size: 12px
}

.loyalty-statistics article {
    border-radius: 16px;
    display: flex;
    padding: 30px;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}



.loyalty-statistics h2 {
    margin: .75rem 0 0;
    font-size: clamp(1.8rem,3vw,1.5rem);
    font-weight: 800;
    line-height: 1;
}



.loyalty-stat-art {
    margin-top: auto;
    align-self: end;
    inline-size: 48%;
    aspect-ratio: 1
}

    .loyalty-stat-art.third {
        inline-size: 70%;
    }

article:has(.loyalty-stat-art.third) {
    height: 100%;
}


.loyalty-cta {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(1rem,3vw,3rem);
    padding: clamp(1.5rem,4vw,3.5rem);
    border-radius: 1.5rem;
    background: radial-gradient(circle at 94% 15%,rgba(182,240,0,.18),transparent 13%),var(--secondary-theme-color);
    box-shadow: 0 1rem 2rem rgba(16,64,66,.18);
    color: var(--text-light);
    overflow: hidden;
}

.loyalty-cta-section img {
    width: 300px;
    margin: auto;
}

.loyalty-cta h2 {
    margin-bottom: .6rem;
    color: var(--text-light);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
}

.loyalty-cta p {
    max-inline-size: 30rem;
    margin-bottom: 0;
    color: rgba(255,255,255,.75);
    line-height: 1.5;
    font-size: 14px
}

/* Trading hours */
.trading-hours-page {
    overflow: hidden;
    color: var(--secondary-theme-color)
}

    .trading-hours-page h1, .trading-hours-page h2, .trading-hours-page h3, .trading-hours-page p {
        margin-top: 0
    }

.hours-event-card, .hours-session-card, .hours-quotes, .hours-guide, .hours-table-wrap, .hours-news-card, .hours-faq-wrap {
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.hours-event-card, .hours-session-card {
    padding: clamp(1.1rem,2.3vw,2rem)
}

.hours-label {
    display: inline-block;
    color: var(--secondary-theme-color);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase
}

.hours-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin: clamp(1.2rem,2vw,1.8rem) 0
}

    .hours-countdown div {
        display: grid;
        place-items: center;
        flex: 1;
        padding: .6rem .25rem;
        border-radius: .65rem;
        background: var(--bg-light-01)
    }

    .hours-countdown b, .hours-countdown small {
        display: block
    }

    .hours-countdown b {
        font-size: clamp(1.2rem,2.3vw,2rem)
    }


    .hours-countdown i {
        font-style: normal;
        font-weight: 800
    }

.hours-event-detail {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

    .hours-event-detail span {
        font-size: 1.5rem
    }

    .hours-event-detail p {
        margin: 0
    }


.hours-event-card > a:not(.btn-primary-style), .hours-news-card > a, .hours-news-heading > a {
    color: #79ad00;
    display: block;
    margin-top: 10px;
    font-weight: 500
}

.economic-calendar-image-slot img {
    width: 450px;
}

.economic-calendar-image-slot {
    text-align: end;
}

.hours-event-card hr {
    border-color: var(--border-light)
}

.hours-release {
    display: grid;
    gap: .4rem
}

    .hours-release > span {
        font-size: 1rem;
        font-weight: 800
    }

.hours-session-head, .hours-quotes-head, .hours-news-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

    .hours-session-head h1 {
        margin: .4rem 0 0;
        color: #75aa00;
        font-size: clamp(2rem,4vw,3.6rem);
        font-weight: 800;
        line-height: 1
    }

.hours-status {
    padding: .35rem .6rem;
    border-radius: 99rem;
    background: var(--bg-primary-light);
    color: #71a400;
    font-size: .7rem;
    font-weight: 800
}

.hours-world-map {
    position: relative;
    isolation: isolate;
    min-block-size: clamp(13rem,25vw,19rem);
    margin: 1rem 0;
    border-radius: .8rem;
    background: radial-gradient(ellipse at center,var(--bg-primary-light),transparent 65%),repeating-linear-gradient(0deg,transparent,transparent 2rem,color-mix(in srgb,var(--border-light) 70%,transparent) 2.05rem)
}

    .hours-world-map:before {
        position: absolute;
        inset: 18% 7%;
        z-index: -1;
        border: 1px dashed color-mix(in srgb,var(--primary-theme-color) 75%,var(--border-light));
        border-radius: 50%;
        content: ""
    }

.map-dot {
    position: absolute;
    display: grid;
    gap: .08rem;
    padding: .45rem .6rem;
    border: 1px solid var(--primary-theme-color);
    border-radius: .45rem;
    background: var(--bg-card);
    box-shadow: 0 .4rem 1rem rgba(16,64,66,.08);
    font-size: .58rem;
    font-weight: 800
}

    .map-dot small {
        color: #7baa00;
        font-size: .5rem
    }

.london {
    top: 30%;
    left: 45%
}

.newyork {
    top: 49%;
    left: 23%
}

.tokyo {
    top: 42%;
    right: 10%
}

.sydney {
    right: 18%;
    bottom: 13%
}

.hours-session-footer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-gray)
}

    .hours-session-footer b {
        color: var(--secondary-theme-color)
    }

.hours-quotes {
    margin-top: 1rem;
    padding: 1rem
}

.hours-quotes-head {
    margin-bottom: .6rem
}

.hours-quotes table {
    font-size: .62rem
}

.hours-quotes th {
    border: 0;
    color: var(--text-gray);
    font-size: .55rem
}

.hours-quotes td {
    border-color: var(--border-light)
}

.hours-quotes small, .hours-quotes b {
    display: block
}

.hours-quotes small {
    color: var(--text-gray);
    font-size: .5rem
}

.quote-up {
    color: #75aa00
}

.hours-guide {
    padding: clamp(1.25rem,4vw,3.5rem);
    background: linear-gradient(105deg,var(--bg-card),var(--bg-light-01))
}

.hours-guide-note {
    display: flex;
    gap: .7rem;
    margin: 1rem 0 1.2rem;
    padding: .8rem;
    border: 1px solid color-mix(in srgb,var(--primary-theme-color) 60%,var(--border-light));
    border-radius: .6rem;
    font-size: .9rem;
    line-height: 1.45
}

    .hours-guide-note i {
        color: #84bb00;
        font-style: normal;
        font-size: 1.2rem
    }

.hours-guide .btn-primary-style {
    display: inline-flex
}


.hours-title {
    display: flex;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem
}

    .hours-title > span {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        padding: .45rem;
        border-radius: 50%;
        background: var(--bg-primary-light);
        color: #80b700
    }

.hours-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: .7rem .7rem 0 0;
    background: var(--bg-card);
    font-size: 1rem;
    font-weight: 700
}

    .hours-toolbar select {
        border: 0;
        background: transparent;
        color: var(--secondary-theme-color);
        font: inherit;
        font-weight: 800;
        outline: 0
    }

.hours-timezone-info {
    padding: .8rem 1rem;
    border: 1px solid var(--border-light);
    border-top: 0;
    background: var(--bg-card);
    color: var(--text-gray);
    font-size: 1rem
}

    .hours-timezone-info b {
        color: var(--secondary-theme-color)
    }

.hours-table-wrap {
    overflow: hidden;
    margin-top: 1rem
}

.hours-table {
    font-size: .65rem
}

    .hours-table th {
        padding: 1rem;
        border: 0;
        background: var(--bg-light-01);
        color: var(--text-gray);
        font-size: .9rem;
        text-transform: uppercase
    }

    .hours-table td {
        padding: .8rem 1rem;
        border-color: var(--border-light);
        vertical-align: middle;
        font-weight: 700;
        font-size: .9rem;
    }

        .hours-table td:not(:first-child) {
            text-align: center
        }

        .hours-table td small {
            display: block;
            font-size: .8rem;
            color: var(--text-gray);
            font-weight: 400
        }

.hours-category td {
    padding: .55rem 1rem;
    background: var(--bg-primary-light);
    color: #6f9f00;
    text-align: left !important;
    font-size: 1rem;
    text-transform: uppercase
}

.hours-table-note {
    display: flex;
    gap: .8rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--primary-theme-color);
    border-radius: .6rem;
    background: var(--bg-card);
    font-size: 1rem;
    color: var(--text-gray)
}

    .hours-table-note b {
        color: var(--secondary-theme-color)
    }

.hours-news-heading {
    align-items: end;
    margin-bottom: 1.5rem
}

    .hours-news-heading h2 {
        margin-bottom: 0
    }

.hours-news-card {
    min-block-size: 100%;
    padding: 1.2rem
}

    .hours-news-card small {
        color: #79ad00;
    }


.site-footer {
    padding: 70px 0 1rem 0;
    background: #051d1e;
    color: #fff;
}


    .site-footer a {
        color: inherit;
        text-decoration: none;
    }

.site-footer__brand {
    padding-right: 3rem;
}

.site-footer__logo {
    display: block;
    width: 10rem;
    min-height: 3rem;
    margin-bottom: 1.5rem;
}

    .site-footer__logo img {
        display: block;
        width: 100%;
        height: auto;
    }

.site-footer__brand p {
    max-width: 18rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.75;
}

.site-footer__brand-image {
    min-height: 14rem;
}

.site-footer__links-row {
    height: 100%;
}


.site-footer__icon, .site-footer__contact i, .site-footer__trust i {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.75rem;
    border-radius: 1rem;
}

.site-footer h2 {
    position: relative;
    margin: 0 0 2.2rem;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
}

    .site-footer h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1.9rem;
        height: 2px;
        background: var(--primary-theme-color);
    }

.site-footer ul:not(.footer-bottom) {
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer__column li + li {
    margin-top: 1.55rem;
}

.site-footer__column a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9rem;
    transition: color .2s ease;
}

.site-footer a {
    color: #ffffffd6;
    text-decoration: none;
}

.site-footer__logo { display: block; width: 10rem; min-height: 3rem; margin-bottom: 1.5rem; }
.site-footer__logo img { display: block; width: 100%; height: auto; }
.site-footer__brand p {margin:0; font-size: 1rem; line-height: 1.75; }
.site-footer__brand-image { min-height: 14rem; }
.site-footer__links-row { height: 100%; }
.site-footer__column {
    min-height: 16rem;
    padding: 0 2.5rem;
    border-left: 1px solid #ffffff14;
}
.site-footer__icon, .site-footer__contact i, .site-footer__trust i { display: block; width: 4.5rem; height: 4.5rem; margin-bottom: 1.75rem; border-radius: 1rem; }
.site-footer h2 { position: relative; opacity:.9; margin: 0 0 2.2rem; padding-bottom: 1rem; font-size: 26px; font-weight: 700; }
.site-footer h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 1.9rem; height: 2px; background: var(--primary-theme-color); }
.site-footer ul:not(.footer-bottom) {
    padding: 0;
    margin: 0;
    list-style: none;
}
.site-footer__column li + li { margin-top: 1.55rem; }
.site-footer__column a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: 18px;
    letter-spacing: 0.7px;
    transition: color .2s ease;
}
    .site-footer__column a:hover, .site-footer__contact strong {
        color: var(--primary-theme-color);
    }
    .site-footer__column a span {
        font-size: 1.6rem;
        opacity: .9;
        font-weight: 300;
        line-height: .5;
    }
.site-footer__legal {
    padding: 25px 30px;
    border-radius: 10px;
    border: 1px solid #ffffff14;
    margin-top: 25px;
    color: #fff;
}

    .site-footer__legal p {
        padding: 0;
        font-size: 13px;
        color: #fff;
        font-weight:400;
        letter-spacing:.5px;
        line-height: 2;
    }

.site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ffffff14;
    font-size: .9rem;
    margin-top: 20px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    margin: 0;
    padding-top: 20px;
    gap: 70px;
    justify-content: center;
    list-style: none;
    padding-left: 0;
}

    .footer-bottom li a {
        padding: 0;
        font-size: 18px;
        color: #fff;
        letter-spacing:0.5px;
        line-height: 1;
    }
    .site-footer__bottom p {
        margin: 0;
        opacity:.8;
    }
.btn-outline, .btn-primary-style {
    justify-content: space-between;
}

.site-footer__contact, .site-footer__trust {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.site-footer__contact i, .site-footer__trust i { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; margin: 0; }
.site-footer__trust { justify-content: flex-end;opacity:.8; }
.site-footer__assurances {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid #ffffff14;
    border-radius: 1rem;
}
    .site-footer__assurances > div {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .5rem 1.25rem;
        border-right: 1px solid #ffffff14;
    }
.site-footer__assurances > div:last-child { border-right:0; }
    .site-footer__assurances i, .site-footer__subscribe > div:first-child > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #00000040;
    }
    .site-footer__assurances i {
        opacity: .8;
    }
        .site-footer__assurances strong, .site-footer__assurances span {
            display: block;
        }
    .site-footer__assurances span {
        margin-top: .35rem;
        font-size: .85rem;
    }
.site-footer__subscribe { margin-top:1.5rem; padding:1.5rem; border:1px solid var(--border-light); border-radius:1rem; background:var(--bg-light-01); }
.site-footer__subscribe > div { min-height:4.5rem; padding:0 1.25rem; border-right:1px solid var(--border-light); }
.site-footer__subscribe > div:first-child { display:flex; align-items:center; gap:1rem; }
.site-footer__subscribe h2, .site-footer__subscribe h3 { margin:0 0 .35rem; font-size:1rem; }
.site-footer__subscribe h2 em { color:var(--primary-theme-color); font-style:normal; }
.site-footer__subscribe p { margin:0; font-size:.8rem; }
.site-footer__subscribe form { display:flex; gap:.4rem; margin-left:auto; }
.site-footer__subscribe input { width:13rem; padding:.7rem; border:1px solid var(--border-light); border-radius:.4rem; }
.site-footer__subscribe button { padding:.7rem 1rem; border:0; border-radius:.4rem; background:var(--primary-theme-color); color:var(--secondary-theme-color); }
.site-footer__app-slots, .site-footer__social-slots { display:flex; gap:.6rem; }
.site-footer__app-slots a { width:7rem; height:2.5rem; border:1px solid var(--border-light); border-radius:.4rem; }
.site-footer__social-slots a { width:2.5rem; height:2.5rem; border:1px solid var(--border-light); border-radius:50%; }
.site-footer__column:first-child {
    border-left: none;
}

/* Market showcase */

.market-tabs {
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    margin-bottom: 5rem;
}

.market-tab {
    letter-spacing: .5px;
    flex: 1;
    min-height: 3.5rem;
    border: 0;
    border-radius: 1rem;
    background: var(--bg-card);
    color: var(--text-secondary-dark);
    box-shadow: 0 .45rem 1.4rem rgba(16,64,66,.08);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: 16px;
    transition: .2s ease;
}

    .market-tab.active {
        background: var(--secondary-theme-color);
        color: var(--text-light);
        box-shadow: 0 .6rem 1.5rem rgba(16,64,66,.2);
    }

.market-tab-icon {
    color: var(--secondary-theme-color);
    font-size: 1.35rem;
    line-height: 1;
}

.market-tab.active .market-tab-icon {
    color: var(--primary-theme-color);
}

.market-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
    align-items: center;
    min-height: 28rem;
}

.market-copy {
    padding-right: 2rem;
}

.market-kicker {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: .3rem;
    background: var(--bg-primary-light);
    color: var(--primary-theme-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.market-copy h2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-secondary-dark);
    margin-bottom: 15px;
}

.market-copy > p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 0px;
}

.market-stats {
    display: flex;
    gap: 1rem;
    margin: 1.8rem 0 2.5rem;
}

.market-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    border-radius: 10px;
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--border-light-color);
    line-height: 1;
    position: relative;
}

    .market-stat strong, .market-stat small {
        display: block;
    }

    .market-stat strong {
        font-size: 18px;
        color: var(--text-secondary-dark);
    }

    .market-stat small {
        margin-top: 10px;
        color: var(--text-secondary-dark);
        font-size: 14px;
        font-weight: 500;
        opacity: .7;
    }

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

    .market-art img {
        width: min(100%, 35rem);
        max-height: 28rem;
        object-fit: contain;
    }

.pricing-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: 3rem;
    align-items: stretch;
}

.pricing-slider {
    position: relative;
    overflow: hidden;
    padding: 3rem 3.5rem 4.5rem;
    background: rgba(255,255,255,.45);
    border-radius: .75rem;
}

.pricing-track {
    display: flex;
    width: 300%;
    transition: transform .35s ease;
}

.pricing-card {
    position: relative;
    flex: 0 0 33.333%;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: .85rem;
    box-shadow: 0 .5rem 1.5rem rgba(16,64,66,.08);
    color: #1f2937;
}

    .pricing-card.popular {
        border: 2px solid #1681f8;
        box-shadow: 0 .5rem 1.8rem rgba(22,129,248,.2);
    }

.popular-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: .5rem;
    border-radius: .75rem .75rem 0 0;
    background: #1681f8;
    color: #fff;
    text-align: center;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.pricing-card.popular h3 {
    margin-top: 1.5rem;
}

.pricing-card h3 {
    margin: 0 0 .8rem;
    font-size: 1.35rem;
}

.pricing-card strong {
    display: block;
    font-size: 1.6rem;
}

.pricing-card > small {
    color: #6b7280;
}

.pricing-card hr {
    border-color: #e5e7eb;
    margin: 1.3rem 0;
}

.pricing-card input {
    width: 100%;
    accent-color: #1681f8;
}

.pricing-card ul {
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
}

.pricing-card li {
    margin: 1.2rem 0;
    font-weight: 600;
}

    .pricing-card li small {
        display: block;
        margin-top: .2rem;
        margin-left: 1.3rem;
        font-weight: 400;
        color: #6b7280;
    }

.pricing-arrow {
    position: absolute;
    top: 48%;
    width: 2.7rem;
    height: 2.7rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1f2937;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 .25rem .8rem rgba(0,0,0,.08);
}

.pricing-prev {
    left: .8rem;
}

.pricing-next {
    right: .8rem;
}

.pricing-dots {
    position: absolute;
    bottom: 1.3rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .45rem;
}

    .pricing-dots button {
        width: .6rem;
        height: .6rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #d8dee9;
    }

        .pricing-dots button.is-active {
            background: #1681f8;
        }

.pricing-summary {
    padding: 3rem 2rem;
    background: var(--bg-card);
    border-radius: .75rem;
}

.summary-eyebrow {
    color: #6b7280;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.pricing-summary h2 {
    margin: 1.2rem 0 1rem;
    color: #1f2937;
    font-size: 1.8rem;
}

.pricing-summary p {
    color: #6b7280;
    line-height: 1.6;
}

.pricing-summary .btn-primary-style {
    margin-top: 1.5rem;
}

/* Global market sessions */

.market-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #8ebb00;
}
/* OUTER DISH / RIM */
.dish {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* OUTER 3D SHADOW */
    color: var(--secondary-theme-color);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10), -0px -0px 10px rgba(255, 255, 255, 0.95);
}

    .dish + div {
        width: 70%;
    }



.account-type-card {
    background: #fff;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: var(--bg-card);
    border-radius: 16px;
    border: 4px solid var(--border-light-color);
    text-align: left;
}

.benefit-icon-box {
    height: 30px;
    width: 30px;
    background: var(--primary-theme-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-list .account-type-card h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    margin: 20px 0;
}

.slick-list .account-type-card p {
    color: var(--text-secondary-dark);
    font-size: 16px;
    font-weight: 400;
    height: 50px;
    opacity: .7;
}

.account-type-card ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
    .account-type-card ul li {
        font-size: 17px;
        font-weight: 500;
        color: var(--secondary-theme-color);
        margin: 20px 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .account-type-card ul li:last-child{
            margin-bottom:0;
        }

        .card-icon {
            height: 75px;
        }

    .account-type-card ul.benefits{
        padding-top:10px;
    }
    .account-type-card ul.benefits li{
        display:flex;
        align-items:center;
        gap:10px;
        margin:20px 0;
    }
.account-type-card ul li:first-child span {
    color: #84ae00;
}

.account-type-card-slider .slick-slide {
    padding: 0 10px;
}

.account-slider-side {
    background: #fff;
    box-shadow: -15px 0 20px 0 rgba(0,0,0,0.1);
    margin-left: -50px;
    z-index: 99;
    position: relative;
    margin-top: -30px;
    margin-bottom: -30px;
}

.account-slider-side-data .features-heading {
    font-size: 36px;
}

.account-slider-side-data {
    padding:25px 50px;
    text-align: center;
}
.account-slider-side-data >img{
    width:75%;
}
.account-slider-arrows{
    position:absolute;
    bottom:-50px;
    display:flex;
    align-items:center;

    justify-content:center;
    gap:15px;left:50%;
    transform:translateX(-50%);
}

    .account-slider-arrows .slick-arrow {
        border: none;
        padding: 10px 35px;
        line-height: 1;
        font-size: 15px;
        font-weight: 600;
        border-radius: 5px;
        background: var(--primary-theme-color);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        color: var(--secondary-theme-color);
        width: 150px;
        position: unset;
        height: unset;
        transform: unset;
    }
        .account-slider-arrows .slick-arrow:before{
            display:none;
        }
        .account-type-card-slider .slick-track {
            padding: 25px;
        }

.market-indices-section {
    position: relative;
    overflow: hidden;
}

    .market-indices-section > .img-fluid {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0.3;
        z-index: -1;
    }

/* Forex definition section */
.forex-definition-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:5rem}.forex-definition-points{display:grid;gap:2rem;max-width:34rem}.forex-definition-points article{display:flex;align-items:flex-start;gap:1.5rem}.forex-definition-icon{display:grid;place-items:center;flex:0 0 3.5rem;height:3.5rem;border-radius:50%;background:color-mix(in srgb,var(--primary-theme-color) 16%,var(--bg-light));color:color-mix(in srgb,var(--primary-theme-color) 65%,var(--secondary-theme-color));font-size:2rem;font-weight:700}.forex-definition-points p{margin:.15rem 0;color:var(--secondary-theme-color);font-size:1.05rem;line-height:1.55}.forex-definition-button{min-width:15.5rem;margin-top:2.7rem;justify-content:space-between}.forex-definition-button span{font-size:1.6rem}

.slick-dotted.slick-slider{
    margin:0;
}
.slick-dots li button {
    height: 12px;
    width: 12px;
    border-radius: 10px;
    display: inline-block;
    padding: 0;
    border: none;
    transition: all 0.5s cubic-bezier(0,0,.2,1);
    border:1px solid var(--secondary-theme-color);
}
.slick-dots li.slick-active button {
    background: var(--primary-theme-color);
    width: 30px;
}
    .slick-dots li button:before {
        display: none;
    }
.slick-dots li{
    height:unset;
    width:unset;
}
.slider .slick-dots {
    bottom: 20px;
}
.our-platform {
    padding: 200px 0;
  position:relative;

}
    .our-platform:before {
        background-image: url('../images/home/14.png');
        background-size: cover;
        mix-blend-mode: multiply;
        content:"";
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index:-9;
        filter:blur(5px);
    }
    .platform-content span.platform-icon {
        display: inline-block;
        height: 60px;
        width: 60px;
        background: var(--bg-primary-light);
        border-radius: 50px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
.platform-content h5 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary-dark);
    padding:15px 0 30px;
    margin:0;
    position:relative;
}
    .platform-content h5:before {
        position: absolute;
        content: "";
        height: 2px;
        bottom: 13px;
        width: 50px;
        border-radius: 10px;
        background: var(--primary-theme-color);
    }
.platform-content{
    position:relative;
}
.mystery-copy h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom:15px;
}
    .mystery-copy h6{
        font-size:16px;
        font-weight:800;
        margin-top:25px;
    }
    .mystry-points {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mystry-points li {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom:15px;
    }
        .mystry-points li span,
        .mystry-points li b {
            color: #6e9100;
        }
        .instrumental-overview .feature-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.istru-icon{
    color:var(--primary-theme-color);
}
.instrumental-overview .feature-title {
    font-size: 26px;
    margin-bottom: 0;
    font-weight: 700;
}
.instrumental-overview .feature-title small{
    font-size:16px;
    font-weight:500;
    opacity:.7;
}
.pricing-showcase + .account-types-steps .account-step-card h2{
    font-size:22px;
}
.contact-us-form .form-group{
    position:relative;
}
.contact-us-form .form-group .form-control {
    padding: 14px 10px 14px 55px;
}
    .contact-us-form .form-group .input-group-text {
        position: absolute;
        left: 8px;
        top: 8px;
        border: 0;
        background-color: var(--secondary-theme-color);
        color: var(--primary-theme-color);
        padding: 7px;
    }
.contact-us-form .form-group .form-control {
    text-align: left;
}
.phone-wrapper {
    width: 100%;
    max-width: 420px;
}

.phone-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #104042;
}

.phone-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 60px;
    border: 1px solid #d9e0e0;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #104042;
    font-size: 15px;
    transition: 0.2s ease;
}

    .phone-input:focus {
        border-color: #b6f000;
        box-shadow: 0 0 0 3px rgba(182, 240, 0, 0.12);
    }

.iti {
    width: 100%;
}

.iti__country-container {
    padding-left: 4px;
}

.iti__selected-country {
    border-radius: 8px 0 0 8px;
}

.iti__country-list {
    border-radius: 10px;
    margin-top: 5px;
}

.error-message {
    display: none;
    margin-top: 6px;
    color: #e53935;
    font-size: 12px;
}

    .error-message.show {
        display: block;
    }

.phone-input.error {
    border-color: #e53935;
}

.promotions-banner {
    background: var(--secondary-theme-color);
    border-radius:20px;
    position:relative;
}
.promotional-img{
    position:absolute;
    height:100%;
    bottom:0;
    right:0;
}
.promotion-banner-text {
    padding:40px 50px;
}
    .promotion-banner-text > span {
        font-size: 16px;
        text-transform: uppercase;
        color: #ffffffd6;
        letter-spacing: 0.6px;
    }
    .promotion-banner-text h1 {
        line-height: 1;
        font-size: 70px;
        font-weight: bolder;
        color: #b6f000;
        margin:10px 0;
    }
    .promotion-banner-text h3 {
        font-size: 40px;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
    }
        .promotion-banner-text h3 span {
            color: #b6f000;
        }
    .promotion-banner-text p {
        font-size: 14px;
        color: #ffffffd6;
        letter-spacing: 0.6px;
    }

    .promotion-banner-text small {
        margin-top: 20px;
        display: inline-block;
        color: #ffffff;
        letter-spacing: 1px;
        opacity: .7;
        font-size: 10px;
    }
    .deposit-reward-cta a:hover,
    .promotion-banner-text a:hover {
        background: #fff;
        color: var(--secondary-theme-color);
    }
.promotional-card {
    width: 100%;
    border-radius: 25px;
    /* Glass background */
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.62), rgba(238, 248, 250, 0.32) );
    /* Glass blur */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Outer glass border */
    border: 2px solid rgba(255, 255, 255, 0.75);
    /* Soft depth */
    box-shadow: 0 8px 30px rgba(71, 130, 145, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
    position: relative;
    overflow: hidden;
    padding: 30px;
    transition:all 0.3s ease;
}
    .promotional-card:hover{
        box-shadow:none;
    }
    .promotional-card > * {
        position: relative;
    }
    .promotional-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 35%, rgba(190, 240, 245, 0.72), transparent 70%);
        pointer-events: none;
    }
.promotion-card-img{
    height:150px;
}
    .promotion-card-img img{
        height:100%;
    }
    .promotion-count {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 16px;
        font-weight: 600;
        opacity: .7;
        color: var(--secondary-theme-color);
    }
.promotion-text {
    text-align: center;
    margin-top: 30px;
}
    .promotion-text h4 {
        font-weight: 800;
        font-size:20px;
        color:var(--secondary-theme-color);
    }
    .promotion-text p {
        font-size: 15px;
        line-height: 1.5;
        opacity: .7;
        margin: auto;
        margin-bottom: 25px;
        width: 80%;
        height: 45px;
    }
    .promotion-text a {
        font-size: 14px;
        font-weight: 500;
        display:flex;
        align-items:center;
        gap:7px;
        justify-content:center;
        color: var(--secondary-theme-color);
    }

.deposit-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}
.deposit-bonus-icon {
    display: flex;
    align-items:center;
    justify-content:center;
    height: 60px;
    width: 60px;
    border-radius: 50px;
    background: var(--bg-primary-light);
}
.deposit-text h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.deposit-text p {
    font-size: 14px;
    font-weight: 500;
    margin:0;
    line-height:1.5;
    opacity:.7;
    margin-top:10px;
}
.bonus-tier-box {
    background-color: var(--bg-card);
    border-radius: 16px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--border-light-color);
    padding:30px;
    text-align:center;
}
    .bonus-tier-box.most-popular{
        border-color:var(--primary-theme-color);
        position:relative;
    }

        .bonus-tier-box.most-popular:before {
            position: absolute;
            content: "Most Popular";
            padding: 10px;
            line-height: 1;
            width: 70%;
            font-weight: 600;
            font-size: 15px;
            bottom: -38px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 8px 8px;
            background: var(--primary-theme-color);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23104042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4l4 -6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 22px;
            background-position: calc(50% - 55px) center;
            padding-left: 25px;
        }
        .bonus-tier-box h5 {
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            margin: 13px 0 10px;
        }
    .bonus-tier-box p {
        font-size: 15px;
        margin-bottom: 0;
        font-weight: 600;
        opacity: .8;
    }
    .bonus-tier-box h2 {
        font-size: 36px;
        font-weight: 800;
        margin: 13px;
        color: #75ad00;
    
    }
.deposit-bonus-value {
    display: block;
    background: var(--bg-primary-light);
    padding: 10px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
}
.deposit-bonus-value b{
    font-weight:800;
}
.bonus-tier{
    margin-top:250px;
    position:relative;
}
    .bonus-tier:before {
        position: absolute;
        content: "";
        background-image: url(../images/promotions/depositbonus/06.png);
        width: 80%;
        height: 396px;
        background-size: contain;
        left: 50%;
        transform: translateX(-50%) rotate(5deg);
        background-repeat: no-repeat;
        top: -90%;
        z-index: 99;
    }
    .bonus-tier .col-md-6.col-xl-3:nth-child(2) .bonus-tier-box {
    margin-top: -50px;
}
.bonus-tier .col-md-6.col-xl-3:nth-child(3) .bonus-tier-box{
    margin-top:-100px;
}
.bonus-tier .col-md-6.col-xl-3:nth-child(4) .bonus-tier-box{
    margin-top:-170px;
}

.coupon-box {
    width: 100%;
    border-radius: 25px;
    /* Glass background */
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.62), rgba(238, 248, 250, 0.32) );
    /* Glass blur */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Outer glass border */
    border: 3px solid rgba(255, 255, 255, 0.75);
    /* Soft depth */
    box-shadow: 0 8px 30px rgba(71, 130, 145, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
    position: relative;
    overflow: hidden;
    padding: 30px;
    transition: all 0.3s ease;
}

    .coupon-box > *{
        position:relative;
    }
    .coupon-box h2 {
        font-size:24px;
        font-weight:800;
    }
    .coupon-box h3 {
        font-size:16px;
        font-weight:800;
        line-height:1;
        margin:0;
    }
    .coupon-box p {
        font-size:15px;
        font-weight:400;
        opacity:.8;
    }
    .coupon-box a {
       height:40px;
       width:40px;
       border-radius:50px;
       display:flex;
       align-items:center;
       justify-content:center;
        background: var(--primary-theme-color);
        color: var(--secondary-theme-color);
    }
.coupon-slide {
    padding: 20px;
}
.coupon-slick-slider .slick-arrow {
    height: 40px;
    width: 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--secondary-theme-color);
    box-shadow: 0 8px 30px rgba(71, 130, 145, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
}
.slick-prev:before,
.slick-next:before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
}

.slick-prev:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}

.slick-next:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.coupon-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 35%, rgba(182, 240, 0, 0.08), transparent 70%);
    pointer-events: none;
}
.coupon-slick-slider .slick-prev{
    left:-35px;
}
.coupon-slick-slider .slick-next {
    right: -35px;
}
.coupon-slick-slider .slick-prev:before, .coupon-slick-slider .slick-next:before {
    color: var(--secondary-theme-color);
    opacity: 1;
}

.trader-club-steps .feature-number {
    left:unset;
    right:10px;
}
.trader-club-round-icon{
    margin-bottom:15px;
}
/* Trade & Win */
.trade-win-page {
    overflow: hidden;
    background: radial-gradient(circle at 85% 12%, var(--bg-primary-light), transparent 18%), var(--bg-light);
    color: var(--secondary-theme-color);
}
.trade-win-page .page-section { padding-block: clamp(3.5rem, 8vw, 8rem); }.trade-win-page h1, .trade-win-page h2, .trade-win-page h3, .trade-win-page p { margin-top: 0; }.trade-win-page h1 { margin-bottom: .4rem; font-size: clamp(3.25rem, 6.2vw, 6.5rem); font-weight: 800; letter-spacing: -.075em; line-height: .9; }.trade-win-page h1 span, .trade-win-page h2 span { color: var(--primary-theme-color); }.trade-win-page h2 { margin-bottom: .7rem; font-size: clamp(2.1rem, 4vw, 4.25rem); font-weight: 800; letter-spacing: -.065em; line-height: .98; }.trade-win-hero h2 { font-size: clamp(1.4rem, 2.1vw, 2rem); letter-spacing: -.045em; }.trade-win-copy, .trade-win-panel p { color: var(--text-gray); font-size: clamp(.95rem, 1.25vw, 1.1rem); line-height: 1.45; }.trade-win-copy { max-width: 33rem; }
.trade-win-eyebrow, .trade-win-label { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.35rem; padding: .45rem .95rem; border-radius: 99rem; color: var(--secondary-theme-color); background: var(--bg-primary-light); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.trade-win-eyebrow { border: 1px solid color-mix(in srgb, var(--secondary-theme-color) 42%, transparent); background: transparent; }.trade-win-eyebrow i { inline-size: .25rem; block-size: .25rem; border-radius: 50%; background: var(--primary-theme-color); }.trade-win-eyebrow em { color: #78b700; font-style: normal; }
.trade-win-points { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }.trade-win-points > div { display: flex; align-items: center; gap: .6rem; padding-right: 1rem; border-right: 1px solid color-mix(in srgb, var(--secondary-theme-color) 30%, transparent); }.trade-win-points > div:last-child { border: 0; }.trade-win-points b { display: grid; place-items: center; padding: .55rem; border-radius: 1rem; background: var(--bg-light); box-shadow: 0 .5rem 1.4rem rgba(16,64,66,.08); color: #78b700; font-size: 1.35rem; line-height: 1; }.trade-win-points span { font-size: .8rem; font-weight: 700; line-height: 1.25; }
.trade-win-hero-art { position: relative; display: grid; place-items: center; min-block-size: clamp(19rem, 35vw, 33rem); overflow: hidden; border-radius: 50% 0 50% 50%; background: radial-gradient(circle, var(--bg-light) 0 17%, transparent 18%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary-theme-color) 28%, transparent), transparent 35%), linear-gradient(135deg, #dff4f4, var(--bg-light)); }.trade-win-hero-art > span { position: absolute; top: 16%; left: 13%; transform: rotate(-18deg); font-size: clamp(1.15rem, 2.3vw, 2rem); font-style: italic; line-height: .95; }.trade-win-hero-art > b { position: absolute; right: 10%; bottom: 14%; color: #78b700; text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; }.trade-win-wheel { display: grid; place-items: center; inline-size: clamp(11rem, 21vw, 20rem); aspect-ratio: 1; border: clamp(.7rem, 1.4vw, 1.3rem) solid color-mix(in srgb, var(--primary-theme-color) 70%, var(--secondary-theme-color)); border-radius: 50%; background: conic-gradient(var(--secondary-theme-color) 0 25%, var(--primary-theme-color) 0 50%, #dff7f4 0 75%, #629b99 0); box-shadow: inset 0 0 0 clamp(.25rem, .8vw, .7rem) var(--bg-light), 0 1rem 2rem rgba(16,64,66,.16); }.trade-win-wheel i { display: grid; place-items: center; padding: clamp(.8rem, 2vw, 1.6rem); border-radius: 50%; background: var(--secondary-theme-color); color: var(--primary-theme-color); font-size: clamp(1.5rem, 3vw, 3rem); font-style: normal; }
.trade-win-panel { padding: clamp(1.5rem, 4vw, 4rem); border-radius: clamp(1.5rem, 3vw, 3rem); background: linear-gradient(130deg, var(--bg-light), #edfafa); box-shadow: 0 1rem 3rem rgba(16,64,66,.05); }.trade-win-steps article, .trade-win-benefit-list article { block-size: 100%; padding: 1.15rem; border: 1px solid var(--border-light); border-radius: 1rem; background: color-mix(in srgb, var(--bg-card) 90%, transparent); text-align: center; }.trade-win-steps small { display: block; color: #82b900; font-size: 1.2rem; text-align: left; }.trade-win-steps article > b, .trade-win-benefit-list article > b { display: grid; place-items: center; margin: .5rem auto .8rem; padding: .65rem; inline-size: fit-content; border-radius: 50%; background: var(--bg-primary-light); color: var(--secondary-theme-color); font-size: 1.8rem; line-height: 1; }.trade-win-page h3 { margin-bottom: .45rem; font-size: 1rem; font-weight: 800; letter-spacing: -.04em; }.trade-win-steps p, .trade-win-benefit-list p { margin-bottom: 0; font-size: .82rem; }
.trade-win-rewards { position: relative; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-primary-light) 46%, transparent)); }.trade-win-levels { position: relative; margin-top: clamp(2rem, 6vw, 5rem); }.trade-win-levels::before { position: absolute; inset-inline: 4%; bottom: 19%; block-size: .15rem; background: linear-gradient(90deg, transparent, var(--primary-theme-color), transparent); content: ""; }.trade-win-levels article { position: relative; display: flex; flex-direction: column; justify-content: end; block-size: 100%; min-block-size: clamp(16rem, 24vw, 24rem); padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--secondary-theme-color) 12%, var(--border-light)); border-radius: 1.2rem 1.2rem 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-light) 52%, transparent), var(--bg-card)); text-align: center; box-shadow: inset 0 0 2rem var(--bg-primary-light); }.trade-win-levels small { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); padding: .35rem 1.2rem; border: 1px solid var(--border-light); border-radius: 99rem; background: var(--bg-light); font-weight: 700; white-space: nowrap; }.trade-win-levels article > b { display: grid; place-items: center; margin: auto auto 1rem; aspect-ratio: 1; inline-size: clamp(3.8rem, 6vw, 6rem); border-radius: 50%; background: var(--bg-primary-light); color: #78b700; font-size: clamp(2rem, 4vw, 4rem); }.trade-win-levels article:nth-child(2) { min-block-size: clamp(18rem, 27vw, 27rem); }.trade-win-levels article:nth-child(3) { min-block-size: clamp(20rem, 30vw, 30rem); }.trade-win-levels article:nth-child(4) { min-block-size: clamp(22rem, 33vw, 33rem); }.trade-win-levels article:nth-child(5) { min-block-size: clamp(24rem, 36vw, 36rem); }.trade-win-levels p { margin-bottom: 0; font-size: .82rem; line-height: 1.35; }
.trader-club-slide .coupon-box{
    text-align:center;
}

    .trader-club-slide .coupon-box small {
        font-size: 14px;
        display: inline-block;
        font-weight: 500;
        opacity: .5;
        margin:0px 0 5px 0;
    }
    .trader-club-slide .coupon-box img {
        margin: auto;
        margin-bottom:15px;
    }
    .trader-club-slide .coupon-box a{
        height:30px;
        width:30px;
        margin:auto;
    }
.coupon-box.bronze::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(196 134 92 / 28%), transparent 70%);
    
}
.influencerProgram .coupon-box.bronze::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(182 240 0 / 20%), transparent 70%);
}
.influencerProgram .coupon-box.community::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(208 103 238 / 18%), transparent 70%);
}
.coupon-box.silver::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(220 227 234), transparent 70%);
}
.coupon-box.gold::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(249 227 154 / 39%), transparent 70%);
}
.coupon-box.platinum::before {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.85), transparent 35%), radial-gradient(circle at 50% 0%, rgb(145 191 212 / 43%), transparent 70%);
}
.trader-club-benefits .promotion-card {
    height: 300px;
    display: flex;
    justify-content: center;
    flex-direction:column;
    border-radius: 25px;
    background-color:#fff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 3px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 30px rgba(71, 130, 145, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
    position: relative;
    overflow: hidden;
}
.trader-club-benefits .promotion-card p {
    margin:0;
    height:auto;
    color:var(--secondary-theme-color);
}
    .trader-club-benefits .promotion-card h2 {
        color: var(--secondary-theme-color);
    }


    .trader-club-benefits .promotion-card.one {
        background-image: url(../images/promotions/traderclub/07.png);
    }
    .trader-club-benefits .promotion-card.two {
        background-image: url(../images/promotions/traderclub/08.png);
    }
    .trader-club-benefits .promotion-card.three {
        background-image: url(../images/promotions/traderclub/09.png);
    }
    .trader-club-benefits .promotion-card.four {
        background-image: url(../images/promotions/traderclub/10.png);
    }
.referral-program-benefits .promotion-card.one {
    background-image: url(../images/promotions/referral-program/invite-friends.png);
}
.referral-program-benefits .promotion-card.two {
    background-image: url(../images/promotions/referral-program/track-your-referral.png);
}
.referral-program-benefits .promotion-card.three {
    background-image: url(../images/promotions/referral-program/unlock-milestone.png);
}
.referral-program-benefits .promotion-card.four {
    background-image: url(../images/promotions/referral-program/transparent-rewards.png);
}
.trader-club-benefits.tradeandwin .promotion-card.one {
    background-image: url(../images/promotions/tradenwin/11.png);
}

.trader-club-benefits.tradeandwin .promotion-card.two {
    background-image: url(../images/promotions/tradenwin/08.png);
}

.trader-club-benefits.tradeandwin .promotion-card.three {
    background-image: url(../images/promotions/tradenwin/09.png);
}

.trader-club-benefits.tradeandwin .promotion-card.four {
    background-image: url(../images/promotions/tradenwin/10.png);
}
.trade-n-win-box {
    background: linear-gradient(to top, #9fd6db4a 0%, rgb(255 255 255 / 0%) 100%);
    padding: 15px;
    border-radius: 10px;
    position: relative;
    text-align: center;
}
    .trade-n-win-box span {
        display: inline-block;
        padding: 7px 0;
        top:-70px;
        left:50%;
        transform:translateX(-50%);
        position:absolute;
        border-radius:15px;
        width:100px;
        text-align:center;
        line-height: 1;
        font-size: 15px;
        font-weight: 700;
        color: var(--secondary-theme-color);
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

        .trade-n-win-box span:before {
            position:absolute;
            content:"";
            width: 15px;
            left:50%;
            bottom:-20px;
            transform:translateX(-50%);
            height: 15px;
            z-index:99;
            border-radius: 50%;
            background: radial-gradient( circle at 30% 25%, #2a6668 0%, #104042 45%, #08292b 100% );
            box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.35), inset 5px 5px 10px rgba(255, 255, 255, 0.12), 0 8px 15px rgba(16, 64, 66, 0.3);
        }

        .trade-n-win-box span:after {
            position:absolute;
            content:"";
            width: 2px;
            left:50%;
            bottom:-40px;
            transform:translateX(-50%);
            height: 30px;
            border-radius: 50%;
            background: radial-gradient( circle at 30% 25%, #2a6668 0%, #104042 45%, #08292b 100% );
            box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.35), inset 5px 5px 10px rgba(255, 255, 255, 0.12), 0 8px 15px rgba(16, 64, 66, 0.3);
        }
        .trade-n-win-main {
            margin-top: 120px;
        }
.trade-n-win-text {
    text-align: center;
}
    .trade-n-win-text h3 {
        font-size: 20px;
        margin: 30px 0 10px;
        line-height: 1;
        font-weight: 700;
        color: var(--secondary-theme-color);
    }
    .trade-n-win-text p {
        font-size: 14px;
        opacity: .7;
        line-height: 1.3;
        font-weight: 500;
        color: var(--secondary-theme-color);
    }

.trade-n-win-main .col-md-6.col-lg:nth-child(2) {
    margin-top:-40px;
}
.trade-n-win-main .col-md-6.col-lg:nth-child(3) {
    margin-top: -80px;
}
.trade-n-win-main .col-md-6.col-lg:nth-child(4) {
    margin-top: -120px;
}
.trade-n-win-main .col-lg:nth-child(5) {
    margin-top: -160px;
}

.contest-rewards-box::after {
    content: '';
    width: 100%;
    height: 200px;
    background-color: #e1f4f5;
    position: absolute;
    left: 0;
    bottom: 0px;
    z-index: 0;
}
.every-reward .contest-rewards-box::after {
    content: unset;
}
.contest-rewards-box {
    height: 100%;
    padding: clamp(1.15rem, 1.7vw, 1.5rem);
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align:center;
    position:relative;
}
    .contest-rewards-box *{
        position:relative;
        z-index:1;
    }
    .contest-rewards-box img {
        width: 150px;
        display: block;
        margin: 0 auto 10px;
    }
    .contest-rewards-box span {
        font-size: 14px;
        color: var(--text-secondary-dark);
        background-color: #cce8e9;
        padding: 4px 12px;
        display: inline-block;
        border-radius: 35px;
        font-weight: 600;
        margin-bottom: 15px;
    }
.events-duration{
    display:flex;
    gap:10px;
    align-items:center;
    margin:20px 0;
}

    .events-duration span {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        display: flex;
        align-items: center;
        gap: 7px;
    }
.upcoming-events .feature-number {
    clip-path: none;
    width: auto;
    height: auto;
    padding: 7px 10px;
    border-radius: 50px;
    font-weight: 500;
    line-height: 1;
    font-size: 12px;
}
.upcoming-events .feature-img {
    height: 200px;
  
}
.invite-grow {
    height: 100%;
    padding: clamp(1.15rem, 1.7vw, 1.5rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.invite-grow-box .icon {
    height: 50px;
    width: 50px;
    background-color: #ebf3e2;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    z-index: 1;
    position: relative;
}

.invite-grow-box {
    text-align: center;
    position: relative;
}

    .invite-grow-box h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .invite-grow-box span {
        font-size: 14px;
    }

.invite-grow-box-1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .invite-grow-box-1 .icon {
        background-color: #f1f1f1;
        height: 40px;
        width: 40px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .invite-grow-box-1 h4 {
        font-size: 18px;
        margin-bottom: 0;
    }

.invite-grow-box .line {
    width: 100%;
    height: 3px;
    background-color: #ebf3e2;
    position: absolute;
    left: 60%;
    top: 23px;
}

.into-rewards-box {
    height: 100%;
    padding: clamp(1.15rem, 1.7vw, 1.5rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
    .into-rewards-box .icon {
        color: var(--text-secondary-dark);
        background-color: var(--primary-theme-color);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 80px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .into-rewards-box span {
        font-size: 14px;
        color: var(--text-secondary-dark);
        background-color: #cce8e9;
        padding: 4px 15px;
        display:inline-block;
        margin-bottom: 10px;
        border-radius: 100px;
    }
    .into-rewards-box p {
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-gray);
    }
.start-strong-box {
    padding: clamp(1.15rem, 1.7vw, 1.5rem);
    border-radius: 1rem;
    background-color: var(--bg-card);
    border: 4px solid var(--border-light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
    .start-strong-box .start-strong-box-content {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid var(--border-light);
        flex-wrap: wrap;
        justify-content: start;
    }
    .start-strong-box .start-strong-box-content .number {
        aspect-ratio: 1;
        height: 40px;
        width: 40px;
        display: grid;
        place-items: center;
        border: 1px solid var(--primary-theme-color);
        border-radius: 50%;
        background: var(--bg-card);
        color: var(--text-secondary-dark);
        font-size: 18px;
        font-weight: 600;
    }
    .start-strong-box .start-strong-box-content .feature-title{
        min-width: 175px;
    }
    .start-strong-box .start-strong-box-content p{
        min-width: 135px;
    }
    .start-strong-box .start-strong-box-content span {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-secondary-dark);
        background-color: #92bb1224;
        padding: 7px;
        width: 250px;
        text-align: center;
        border-radius: 8px;
        margin: 0 auto;
    }
    .start-strong-box .start-strong-box-content:last-child{
        margin-bottom:0;
        padding-bottom:0;
        border-bottom:0;
    }
.social-link {
    display: flex;
    gap: 30px;
    line-height: 1;
    justify-content: flex-end;
}