/* ==========================================================================
   compat.css — Makes imported pages match the template's exact UI pattern.

   Template rules observed from index.blade.php:
   - Content lives inside <div class="container"> — NOT full width
   - Sections alternate: white bg → light (#F2F4F6) → white → light
   - Typography: Aleo (headings), Lato (body), body color #656565
   - Primary blue: #0c33f0, Dark: #2B2B2B, heading color: #424242
   - Cards use template's .card with border-radius 14px, subtle shadow
   - Buttons: .btn.btn-primary (blue gradient pill)
   - Icon wraps: .icon-wrap with bg-purple / bg-salmon / bg-primary
   - Sections use py-4 / py-3 padding
   ========================================================================== */

/* ── 1. FONTS — force template fonts, kill imported font overrides ── */
body, html, p, li, span, td, th, label, input, textarea, select, button,
.fs-six, .fs-five, .fs-four, .fs-six-up, .fs-one {
    font-family: "Lato", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .heading__content h3, .trade_on__content h3 {
    font-family: "Aleo", sans-serif !important;
    color: #424242;
    line-height: 1.25;
}

/* ── 2. SECTION BACKGROUNDS — alternating white / light like template ── */

/* Hero sections (trade_on) — contained */
.trade_on {
    padding: 3.5rem 0 !important;
}

/* Neutralize imported bg classes — keep template backgrounds */
.a2-bg { background: transparent !important; }
.s1-bg { background: transparent !important; }
.alt-color { color: inherit; }

/* Feature/info sections */
.provide-world {
    padding: 3.5rem 0 !important;
}

/* Dark/CTA sections */
.why-trade,
.worldwide {
    background: #2B2B2B !important;
    padding: 3.5rem 0 !important;
}
/* Dark section text — target specific elements instead of wildcard */
.why-trade p, .why-trade span, .why-trade a, .why-trade li, .why-trade label,
.worldwide p, .worldwide span, .worldwide a, .worldwide li, .worldwide label {
    color: rgba(255,255,255,0.85) !important;
}
.why-trade h1, .why-trade h2, .why-trade h3, .why-trade h4, .why-trade h5, .why-trade h6,
.worldwide h1, .worldwide h2, .worldwide h3, .worldwide h4, .worldwide h5, .worldwide h6 {
    color: #fff !important;
}
/* Icons inside dark sections — handled in section 12 */
/* Buttons inside dark sections */
.why-trade .cmn-btn,
.worldwide .cmn-btn {
    background: #0c33f0 !important;
    border-color: #0c33f0 !important;
    color: #fff !important;
}
/* Borders / cards inside dark sections */
.why-trade .nb3-bg,
.worldwide .nb3-bg {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
/* Paragraphs */
.why-trade p,
.worldwide p {
    color: rgba(255,255,255,0.7) !important;
}
/* SVG images inside dark sections — make visible */
.why-trade img,
.worldwide img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
/* Keep normal appearance for non-icon content images */
.worldwide .worldwide_thumb img {
    filter: none;
    opacity: 1;
}
/* Tabler icon circles in dark sections */
.why-trade [style*="border-radius: 50%"],
.worldwide [style*="border-radius: 50%"] {
    background: rgba(255,255,255,0.12) !important;
}
/* Emoji icons in dark sections */
.why-trade .text-center .mb-4 div,
.worldwide .text-center .mb-4 div {
    font-size: 2.5rem;
}

/* FAQ section */
.faq {
    padding: 3.5rem 0 !important;
}

/* Legal documents section */
.legal-documents {
    padding: 3.5rem 0 !important;
}

/* MT4 platform section */
.mt4-platform {
    padding: 3.5rem 0 !important;
}

/* Regulation page */
.regulation {
    padding: 3.5rem 0 !important;
}

/* Platforms section */
.platforms {
    padding: 3.5rem 0 !important;
}

/* ── 3. KILL ALL pt-120 / pb-120 — sections already have padding above ── */
/* Catch-all: any section-level element with pt-120/pb-120 */
[class*="pt-120"] { padding-top: 3.5rem !important; }
[class*="pb-120"] { padding-bottom: 3.5rem !important; }
/* pt-120/pb-120 on inner rows/divs — zero them out */
.row.pt-120, .row.pb-120  { padding-top: 0 !important; padding-bottom: 0 !important; }
.col-12.pt-120, .col-12.pb-120 { padding-top: 0 !important; padding-bottom: 0 !important; }
/* mb/mt helpers used on inner elements */
.mb-lg-15 { margin-bottom: 2rem !important; }
.mt-xxl-8 { margin-top: 1.5rem !important; }

/* ── 4. CONTAINER — constrain sections to template container width (match footer) ── */
.trade_on,
.provide-world,
.why-trade,
.worldwide,
.regulation,
.platforms,
.faq,
.legal-documents,
.mt4-platform {
    max-width: 1270px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}
@media (max-width: 1399.98px) {
    .trade_on, .provide-world, .why-trade, .worldwide,
    .regulation, .platforms, .faq, .legal-documents, .mt4-platform {
        max-width: 1100px;
    }
}
@media (max-width: 1199.98px) {
    .trade_on, .provide-world, .why-trade, .worldwide,
    .regulation, .platforms, .faq, .legal-documents, .mt4-platform {
        max-width: 960px;
    }
}
@media (max-width: 991.98px) {
    .trade_on, .provide-world, .why-trade, .worldwide,
    .regulation, .platforms, .faq, .legal-documents, .mt4-platform {
        max-width: 720px;
    }
}
@media (max-width: 767.98px) {
    .trade_on, .provide-world, .why-trade, .worldwide,
    .regulation, .platforms, .faq, .legal-documents, .mt4-platform {
        max-width: 100%;
    }
}
/* The .container inside these sections already gets max-width from style.css.
   Just ensure position:relative sections don't create stacking issues. */
.trade_on.position-relative,
.provide-world.position-relative,
.why-trade.position-relative,
.worldwide.position-relative,
.faq.position-relative {
    overflow: hidden;
}

/* ── 5. HIDE decorative vector/animation images (they 404) ── */
.animation img, .animation.vector img {
    display: none !important;
}

/* Neutralize unknown utility classes from imported framework */
.z-0  { z-index: 0; }
.z-n1 { z-index: -1; }
.pseudo_element_after::after { display: none !important; }
.push_animat, .jello, .previewShapeRevX,
.previewSkew, .fadeInTopRight, .fadeInTopLeft,
.rotate { animation: none !important; }

/* ── 6. HERO SECTION — match template's carousel caption layout ── */
.trade_on__thumbs img {
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(65,138,227,0.12);
    max-width: 100%;
    height: auto;
}
.trade_on__content h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: #424242 !important;
    margin-bottom: 1rem;
}
.trade_on__content .heading {
    display: block;
    font-family: "Lato", sans-serif !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0c33f0 !important;
    margin-bottom: 0.6rem;
}
.trade_on__content p {
    color: #656565 !important;
    line-height: 1.7;
}
.trade_on__content ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}
.trade_on__content ul li {
    color: #656565 !important;
    padding: 0.3rem 0;
    font-size: 0.95rem;
}
.trade_on__content ul li i {
    color: #0c33f0 !important;
    margin-right: 0.5rem;
}

/* ── 7. SECTION HEADINGS — match template's heading style ── */
.heading__content {
    margin-bottom: 2.5rem !important;
}
.heading__content h3 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: #424242 !important;
    margin-bottom: 0.75rem;
}
.heading__content .heading {
    display: block;
    font-family: "Lato", sans-serif !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0c33f0 !important;
    margin-bottom: 0.5rem;
}
.heading__content p {
    color: #656565 !important;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Dark section heading overrides */
.why-trade .heading__content h3,
.worldwide .heading__content h3 {
    color: #fff !important;
}
.why-trade .heading__content p,
.worldwide .heading__content p {
    color: rgba(255,255,255,0.75) !important;
}
.why-trade .heading__content .heading,
.worldwide .heading__content .heading {
    color: rgba(255,255,255,0.6) !important;
}

/* ── 8. CARDS — use template's card style ── */
.nb3-bg {
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 14px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nb3-bg:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* Featured card (dark bg) */
.nb4-bg {
    background: #2B2B2B !important;
    border-radius: 14px !important;
    border: none !important;
}
.nb4-bg * { color: #fff !important; }
.nb4-bg .p1-color { color: #0c33f0 !important; }

/* ── 9. ICON BOXES — match template's icon-wrap style ── */
/* Gold icon boxes from imported pages → template dark */
[style*="background: rgb(237, 189, 31)"],
[style*="background: rgb(237,189,31)"],
[style*="background:rgb(237,189,31)"] {
    background: #2B2B2B !important;
    border-radius: 10px !important;
}
/* Icons/images inside dark icon boxes — invert to white */
[style*="background: rgb(237, 189, 31)"] img,
[style*="background: rgb(237,189,31)"] img {
    filter: brightness(0) invert(1) !important;
}
[style*="background: rgb(237, 189, 31)"] i,
[style*="background: rgb(237,189,31)"] i {
    color: #fff !important;
}

/* Step number circles */
[style*="background: rgb(237, 189, 31)"][style*="border-radius: 50%"],
[style*="background: rgb(237,189,31)"][style*="border-radius: 50%"] {
    background: #2B2B2B !important;
}
[style*="background: rgb(237, 189, 31)"][style*="border-radius: 50%"] i,
[style*="background: rgb(237,189,31)"][style*="border-radius: 50%"] i {
    color: #fff !important;
}

/* Icon containers in dark sections */
[style*="background: rgba(237, 189, 31"] {
    background: rgba(43,43,43,0.15) !important;
    border-radius: 50% !important;
}

/* ── 10. BUTTONS — match template's .btn.btn-primary ── */
.cmn-btn,
a.cmn-btn,
button.cmn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #0c33f0 !important;
    color: #fff !important;
    border: 2px solid #0c33f0 !important;
    border-radius: 50px !important;
    padding: 0.55rem 1.6rem !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(65,138,227,0.3) !important;
    cursor: pointer;
}
.cmn-btn:hover {
    background: #0a28c0 !important;
    border-color: #0a28c0 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(65,138,227,0.4) !important;
}
/* Outline variant */
.cmn-btn.outline-btn,
.cmn-btn.link {
    background: transparent !important;
    color: #0c33f0 !important;
    border-color: #0c33f0 !important;
    box-shadow: none !important;
}
.cmn-btn.outline-btn:hover,
.cmn-btn.link:hover {
    background: #0c33f0 !important;
    color: #fff !important;
}
/* White outline on dark sections */
.why-trade .cmn-btn.outline-btn,
.worldwide .cmn-btn.outline-btn {
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
}
.why-trade .cmn-btn.outline-btn:hover,
.worldwide .cmn-btn.outline-btn:hover {
    background: rgba(255,255,255,0.15) !important;
}
/* nb4-xxl-bg modifier — keep primary blue for buttons */
.nb4-xxl-bg {
    background: #0c33f0 !important;
    border-color: #0c33f0 !important;
    color: #fff !important;
}

/* ── 11. COLOR TOKENS ── */
.p1-color { color: #0c33f0 !important; }
.s1-color { color: #26d0ce !important; }
.p1-bg    { background: #2B2B2B !important; color: #fff !important; }

/* ── 12. TABLER ICONS — consistent colors ── */
.ti { font-style: normal; line-height: 1; }
.ti.fs-four { font-size: 1.25rem !important; }
.ti.fs-five { font-size: 1rem !important; }
.ti.fs-one  { font-size: 2.5rem !important; }

/* All tabler icons default to blue on light sections */
.ti { color: #0c33f0 !important; }
.ti.p1-color { color: #0c33f0 !important; }

/* Icons inside dark sections — white */
.why-trade .ti,
.worldwide .ti,
.nb4-bg .ti {
    color: #fff !important;
}

/* Font Awesome icons — blue on light, white on dark */
.fas, .far, .fab { transition: color 0.2s ease; }
.benefit-item i, .detail-item i { color: #0c33f0 !important; }
.why-trade .fas, .why-trade .far,
.worldwide .fas, .worldwide .far {
    color: #fff !important;
}
/* Keep specific FA icons blue everywhere (check marks, etc.) */
.trade_on__content .ti,
.provide-world .ti,
.faq .ti,
.regulation .ti,
.legal-documents .ti,
.mt4-platform .ti {
    color: #0c33f0 !important;
}

/* ── 13. FEATURE GRID CARDS — card style with hover shadow ── */
/* Light section cards — only the direct child gets the card */
.provide-world .col-lg-4 > div:first-child,
.provide-world .col-md-6 > div:first-child {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.provide-world .col-lg-4 > div:first-child:hover,
.provide-world .col-md-6 > div:first-child:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
}
/* Kill card styling on ALL nested divs inside the card */
.provide-world .col-lg-4 > div div,
.provide-world .col-md-6 > div div {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* .col-lg-6 wrappers (widgets etc) — no card */
.provide-world .col-lg-6 > div {
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Feature cards inside .why-trade dark sections */
.why-trade .col-lg-4 > .text-center,
.why-trade .col-md-6 > .text-center {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.why-trade .col-lg-4 > .text-center:hover,
.why-trade .col-md-6 > .text-center:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 10px 28px rgba(0,0,0,0.15) !important;
}
/* Feature cards inside .worldwide dark sections */
.worldwide .col-lg-4 > .text-center,
.worldwide .col-md-6 > .text-center {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.worldwide .col-lg-4 > .text-center:hover,
.worldwide .col-md-6 > .text-center:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 10px 28px rgba(0,0,0,0.15) !important;
}
/* Icon circles in dark sections */
.why-trade [style*="border-radius: 50%"],
.worldwide [style*="border-radius: 50%"] {
    background: rgba(255,255,255,0.12) !important;
}

/* ── 14. TABLE — match template table style ── */
.table thead th {
    background: #2B2B2B !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    border: none !important;
    padding: 1rem 1.2rem !important;
}
.table tbody td {
    padding: 0.85rem 1.2rem !important;
    vertical-align: middle;
    border-color: #dee2e6 !important;
    color: #656565 !important;
}
.table tbody tr:hover {
    background: rgba(65,138,227,0.04) !important;
}
/* Tables inside dark sections — force readable text colors */
section.why-trade .table thead th,
section.worldwide .table thead th {
    color: #fff !important;
}
section.why-trade .table tbody td,
section.worldwide .table tbody td {
    color: #fff !important;
    border-color: rgba(255,255,255,0.15) !important;
    background: transparent !important;
}
section.why-trade .table,
section.worldwide .table {
    border-color: rgba(255,255,255,0.15) !important;
}
section.why-trade .table thead[style],
section.worldwide .table thead[style] {
    background: rgba(255,255,255,0.1) !important;
}

/* ── 15. REGULATION PAGE CARDS ── */
.authority-card, .protection-card, .framework-card,
.document-card, .resolution-process, .external-resolution,
.update-card {
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 14px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.authority-card:hover, .protection-card:hover,
.framework-card:hover, .document-card:hover, .update-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
}
/* Icon colors — handled globally in section 12 */

/* ── 16. BADGE ── */
.badge.p1-bg {
    background: #0c33f0 !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 0.35em 0.85em;
    font-size: 0.78rem;
    font-weight: 600;
}
/* Keep p1-bg blue on small elements (buttons, badges), dark only on sections */
a.p1-bg, .cmn-btn.p1-bg, span.p1-bg {
    background: #0c33f0 !important;
}

/* ── 17. STEP NUMBERS ── */
.step-number {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    background: #0c33f0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* ── 18. ROUNDED HELPER ── */
.cus-rounded-1 { border-radius: 14px !important; }
.d-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── 19. SPACING HELPERS (keep gap/margin utilities) ── */
.gap-4  { gap: 1rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-3  { gap: 0.75rem !important; }
.gap-2  { gap: 0.5rem !important; }
.mx-ch  { max-width: 60ch; }
.mb-5   { margin-bottom: 1.25rem !important; }
.mb-6   { margin-bottom: 1.5rem !important; }
.mb-7   { margin-bottom: 1.75rem !important; }
.mb-8   { margin-bottom: 2rem !important; }
.mb-10  { margin-bottom: 2.5rem !important; }
.mt-6   { margin-top: 1.5rem !important; }
.mt-7   { margin-top: 1.75rem !important; }
.mt-8   { margin-top: 2rem !important; }
.mt-10  { margin-top: 2.5rem !important; }
.p-6    { padding: 1.5rem !important; }
.px-6   { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-6   { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-4    { padding: 1rem !important; }
.gy-6   { --bs-gutter-y: 1.5rem; }
.gy-10  { --bs-gutter-y: 2.5rem; }

/* ── 20. FONT SIZE HELPERS ── */
.fs-six     { font-size: 0.95rem !important; line-height: 1.7; color: #656565 !important; }
/* Override .fs-six color inside dark sections */
.why-trade .fs-six, .worldwide .fs-six { color: rgba(255,255,255,0.7) !important; }
.fs-five    { font-size: 1rem !important; }
.fs-four    { font-size: 1.1rem !important; }
.fs-six-up  { font-size: 0.9rem !important; }
.fs-one     { font-size: 2.2rem !important; }

/* ── 21. PARTNER PAGE IMAGES ── */
img.cus-rounded-1, .cus-rounded-1 img {
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ── 22. RESPONSIVE ── */
@media (max-width: 991px) {
    .trade_on { padding: 2.5rem 0 !important; }
    .provide-world, .why-trade, .worldwide, .platforms, .faq, .legal-documents, .mt4-platform { padding: 2.5rem 0 !important; }
    .trade_on__thumbs { margin-top: 2rem; }
    /* Stack hero columns on tablet */
    .trade_on .row { flex-direction: column; }
    .trade_on .col-10, .trade_on .col-sm-8, .trade_on .col-md-7 { width: 100%; max-width: 100%; }
}
@media (max-width: 767px) {
    .trade_on, .provide-world, .why-trade, .worldwide, .platforms, .regulation, .faq, .legal-documents, .mt4-platform {
        padding: 2rem 0 !important;
    }
    .cmn-btn { width: 100%; justify-content: center; }
    .heading__content h3 { font-size: 1.4rem; }
    /* Hero images — constrain on mobile */
    .trade_on__thumbs img {
        max-width: 220px !important;
        margin: 0 auto;
        display: block;
    }
    /* Stack columns vertically */
    .row { --bs-gutter-x: 0.75rem; }
    /* Cards full width */
    .col-lg-4, .col-lg-6, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
    /* Tables scroll horizontally */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table { font-size: 0.82rem; }
    table th, table td { padding: 0.6rem 0.75rem !important; white-space: nowrap; }
    /* Footer adjustments */
    .in-stena-footer .card-body { padding: 1rem !important; }
    .in-stena-footer h6 { font-size: 0.8rem; }
    /* Worldwide / mobile section image */
    .worldwide_thumb img { max-width: 280px !important; }
    /* Buttons stack */
    .d-flex.flex-wrap.gap-4 { flex-direction: column; }
    .d-flex.flex-wrap.gap-4 .cmn-btn { width: 100%; }
    /* Heading sizes */
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.1rem !important; }
    .trade_on__content h3 { font-size: 1.3rem !important; }
    /* Section headings */
    .heading__content { margin-bottom: 1.5rem !important; }
    .heading__content p { font-size: 0.9rem; }
    /* Step circles */
    .d-center[style*="width: 80px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }
    /* TradingView widgets */
    .tradingview-widget-container { max-width: 100%; overflow: hidden; }
    /* Icon images */
    img[width="60"] { width: 48px !important; height: 48px !important; }
}
/* Extra small phones */
@media (max-width: 375px) {
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    h3 { font-size: 1.15rem !important; }
    .cmn-btn { font-size: 0.8rem !important; padding: 0.5rem 1rem !important; }
    .trade_on__thumbs img { max-width: 180px !important; }
}

/* ── 22b. GLOBAL MOBILE IMAGE HANDLING ── */
img { max-width: 100%; height: auto; }
.trade_on__thumbs img { max-width: 100%; height: auto; }

/* ── 22c. PREVENT HORIZONTAL OVERFLOW ── */
body, html { overflow-x: hidden; }
/* Don't apply overflow hidden to sections/containers — it clips dropdowns and slideshow */

/* ── 22e. ICON WRAPS — black background ── */
.icon-wrap.bg-purple,
.icon-wrap.bg-salmon {
    background: #2B2B2B !important;
}
.icon-wrap.bg-purple i,
.icon-wrap.bg-salmon i {
    color: #fff !important;
}

/* ── 22d. SHOW SLIDESHOW BUTTONS ON MOBILE ── */
@media (max-width: 767.98px) {
    #slideshow .btn-hide-wrap {
        display: flex !important;
        justify-content: center;
    }
    #slideshow .btn-hide-wrap .btn { font-size: 0.85rem; }
}

/* ── 23. FAQ ACCORDION — match template style ── */
.faq .accordion-single {
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 14px !important;
}
.faq .accordion-btn {
    color: #424242 !important;
    font-family: "Lato", sans-serif !important;
    background: transparent !important;
    border: none !important;
}
.faq .accordion-btn::after {
    color: #0c33f0 !important;
}
.faq .accordion-btn.active::after {
    color: #0c33f0 !important;
}
.faq .content-body p {
    color: #656565 !important;
}
.faq .box-shadow {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ── 24. WORLDWIDE — dark background by default ── */
/* worldwide sections keep dark bg (they have white text) */

/* MT5 page: "Available on Tablet and Mobile" — no dark background */
.worldwide.pseudo_element_after {
    background: transparent !important;
}
.worldwide.pseudo_element_after h1, .worldwide.pseudo_element_after h2,
.worldwide.pseudo_element_after h3, .worldwide.pseudo_element_after h4,
.worldwide.pseudo_element_after h5, .worldwide.pseudo_element_after h6 {
    color: #424242 !important;
}
.worldwide.pseudo_element_after p, .worldwide.pseudo_element_after span,
.worldwide.pseudo_element_after a, .worldwide.pseudo_element_after li,
.worldwide.pseudo_element_after label {
    color: #656565 !important;
}
.worldwide.pseudo_element_after .s1-color {
    color: #0c33f0 !important;
}
.worldwide.pseudo_element_after .cmn-btn {
    background: #0c33f0 !important;
    border-color: #0c33f0 !important;
    color: #fff !important;
}
.worldwide.pseudo_element_after .ti {
    color: #0c33f0 !important;
}

/* ── 25. HEADING H1 — match template sizing on internal pages ── */
.heading__content h1 {
    font-family: "Aleo", sans-serif !important;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    color: #424242 !important;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}
.why-trade .heading__content h1,
.worldwide .heading__content h1 {
    color: #fff !important;
}

/* ── 26. STICKY HEADER — solid white background + single-row layout ── */
header {
    background: #fff;
}
/* Responsive logo */
@media (max-width: 767.98px) {
    header .navbar-brand img, header .header-logo { width: 160px !important; height: auto !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    header .navbar-brand img, header .header-logo { width: 200px !important; height: auto !important; }
}
/* Desktop single-row: navbar inline, no extra padding */
@media (min-width: 1200px) {
    header .navbar {
        padding: 0 !important;
        background: transparent !important;
    }
    header .navbar .navbar-nav {
        flex-direction: row;
    }
}
/* Mobile: fix double hamburger — keep only one, position it next to logo */
@media (max-width: 1199.98px) {
    header > .container {
        position: relative;
    }
    /* Only show one hamburger button — hide any extras */
    header > .container > .btn-mobile-navbar ~ .btn-mobile-navbar {
        display: none !important;
    }
    /* Position the hamburger in the mobile logo row — plain icon style */
    header > .container > .btn-mobile-navbar {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        padding: 8px !important;
    }
    header > .container > .btn-mobile-navbar i {
        color: #424242 !important;
        font-size: 1.5rem;
    }
}

/* Mobile modal — no extra padding needed, close button is fixed position */
header .sticky-nav {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
header .sticky-nav .in-dotted-decor {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
header .sticky-nav .navbar-brand img {
    width: 150px !important;
    height: 46px !important;
    transition: all 0.3s ease;
}
header .sticky-nav .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
header .sticky-nav .optional-link .btn {
    padding: 0.3rem 1rem !important;
    font-size: 0.85rem !important;
}
header .sticky-nav .icon-wrap {
    width: 28px !important;
    height: 28px !important;
}

/* ── 27. FOOTER — link hover ── */
.in-stena-footer a:hover {
    color: #0c33f0 !important;
    transition: color 0.2s ease;
}

/* ── 27b. GLOBAL PRIMARY COLOR — match logo ── */
.btn-primary, .bg-primary {
    background-color: #0c33f0 !important;
    border-color: #0c33f0 !important;
}
.btn-primary:hover {
    background-color: #0a28c0 !important;
    border-color: #0a28c0 !important;
}
.text-primary, a.text-primary { color: #0c33f0 !important; }
.in-icon-link .icon-wrap.bg-primary {
    background-color: #0c33f0 !important;
}
.in-icon-link .icon-wrap.bg-primary i,
.icon-wrap.bg-primary i,
.icon-wrap.bg-primary .fas,
.icon-wrap.bg-primary .far,
.icon-wrap.bg-primary .fab {
    color: #fff !important;
}

/* ── 28. DROPDOWN HOVER ON DESKTOP ── */
@media (min-width: 1200px) {
    header .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    header .nav-item.dropdown > .dropdown-menu {
        margin-top: 0;
    }
    /* Adjust slideshow margin since header is now single row */
    #slideshow {
        margin-top: -100px;
    }
}

/* ── 29. BANNER / SLIDESHOW — prevent clipping ── */
#slideshow {
    overflow: visible !important;
}
#slideshow .carousel-inner {
    overflow: visible !important;
}