/* === Clean Dark Theme (text-focused) === */

/* General background */
body {
    background-color: #0a192f !important; /* deep navy */
    color: #e6f1ff !important; /* light text */
}

/* Headings and counters stay visible */
h1, h2, h3, h4, h5, h6,
.counter, .stat-number, .timer, .highlight-number {
    color: #ffffff !important;
}

/* Paragraphs and spans */
p, span, li, a {
    color: #dbeafe !important; /* softer light blue for readability */
}

/* Hero / banners stay dark-friendly */
.hero, .banner, .page-header {
    background: linear-gradient(135deg, #0f3460, #1a1a2e) !important;
    color: #ffffff !important;
}

/* Optional: footer contrast */
footer {
    background-color: #0f172a !important; /* darker navy */
    color: #94a3b8 !important; /* soft gray-blue */
}
/* General body background */
body {
    background-color: #0a192f !important; /* deep navy */
    color: #e6f1ff !important; /* light text */
}

/* Fix investment plan cards */
.card, .pricing-box, .plan-box, .feature-box {
    background-color: #112240 !important; /* dark navy card background */
    color: #e6f1ff !important; /* light text */
    border: 1px solid #233554 !important; /* subtle border */
    border-radius: 10px !important;
}

/* Headings and numbers inside plans */
.card h1, .card h2, .card h3,
.pricing-box h1, .pricing-box h2, .pricing-box h3,
.plan-box h1, .plan-box h2, .plan-box h3,
.feature-box h1, .feature-box h2, .feature-box h3 {
    color: #64ffda !important; /* teal highlight */
}

/* Buttons inside investment plans */
.card .btn, .pricing-box .btn, .plan-box .btn {
    background-color: #64ffda !important; /* teal button */
    color: #0a192f !important; /* dark text */
    font-weight: bold;
}

.card .btn:hover, .pricing-box .btn:hover, .plan-box .btn:hover {
    background-color: #45d3b2 !important; /* darker teal on hover */
    color: #fff !important;
}
/* Fix min/max investment amount text backgrounds */
.card p, .card span,
.pricing-box p, .pricing-box span,
.plan-box p, .plan-box span {
    background: transparent !important; /* remove white background */
    color: #e6f1ff !important; /* light text */
}

/* If they're inside special highlight boxes */
.card .amount-box, .pricing-box .amount-box, .plan-box .amount-box {
    background-color: #112240 !important; /* match dark card */
    color: #64ffda !important; /* teal highlight for amounts */
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
}
.card .amount-box, .pricing-box .amount-box, .plan-box .amount-box {
    background-color: #112240 !important; /* match dark card */
    color: #64ffda !important; /* teal highlight for amounts */
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
}
/* === Remove forced white backgrounds in investment plan areas === */
.card p, .card span, .card div,
.pricing-box p, .pricing-box span, .pricing-box div,
.plan-box p, .plan-box span, .plan-box div {
    background: transparent !important;
    background-color: transparent !important;
    color: #e6f1ff !important; /* keep text light */
}
/* Force remove any white background behind min/max text */
.card *[style*="background"],
.pricing-box *[style*="background"],
.plan-box *[style*="background"],
.feature-box *[style*="background"],
.card span, .card strong,
.pricing-box span, .pricing-box strong,
.plan-box span, .plan-box strong {
    background: transparent !important;
    background-color: transparent !important;
    color: #e6f1ff !important; /* light text on dark theme */
}
/* === Force-remove white badge background in the "plans" / timeline area === */
/* Targets the badge that shows $min - $max inside the .timeline-horizontal plan item */
.timeline-horizontal .badge,
.timeline-horizontal .badge[class*="bg-"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #64ffda !important;           /* change this to whatever text color you prefer */
    border: 1px solid rgba(255,255,255,0.06) !important; /* subtle border so the badge is visible */
    padding: 3px 8px !important;
    display: inline-block !important;
}

/* If the amount is inside a .badge anywhere in a .timeline-horizontal container */
.timeline-horizontal span.badge,
.timeline-horizontal .amount-box,
.timeline-horizontal .amount-box * {
    background: transparent !important;
    color: #64ffda !important;
}

/* Temporary debug outline — remove after testing */
/* .timeline-horizontal .badge { outline: 2px dashed lime !important; } */
/* FAQ Answer Fix */
.faq-answer, 
.faq-content, 
.accordion-body {
    color: #212529 !important;   /* dark readable text */
    background-color: #ffffff !important; /* white background */
    border: none !important; /* remove odd borders */
    box-shadow: none !important;
}
/* Fix FAQ/accordion answers visibility */
.accordion-body {
    background-color: #f9f9f9 !important; /* light gray */
    color: #222 !important;               /* dark text */
    border-radius: 6px;
    padding: 15px;
}

/* In case the text inside is still blue */
.accordion-body p,
.accordion-body span,
.accordion-body a {
    color: #222 !important;
}

/* Make borders visible */
.accordion-item {
    border: 1px solid #ddd !important;
    border-radius: 6px;
    overflow: hidden;
}
/* === Fix FAQ Answer Text & Numbers Visibility === */

/* General FAQ answer area */
.accordion-body {
    background-color: #f9f9f9 !important; /* light gray background */
    color: #111 !important;               /* dark text */
    border-radius: 6px;
    padding: 15px;
}

/* Ensure numbers & text inside are visible */
.accordion-body strong,
.accordion-body b,
.accordion-body .text-primary,
.accordion-body span,
.accordion-body p {
    color: #111 !important; /* force dark text */
}

/* Remove any hidden white backgrounds */
.accordion-body mark,
.accordion-body .highlight {
    background: transparent !important;
    color: #111 !important;
}

/* FAQ borders */
.accordion-item {
    border: 1px solid #ddd !important;
    border-radius: 6px;
    overflow: hidden;
}
/* === Force Fix for Investment Amount Visibility === */
.accordion-body span,
.accordion-body strong,
.accordion-body b,
.accordion-body .text-primary {
    background: transparent !important;
    background-color: transparent !important;
    color: #64ffda !important;  /* teal highlight so it's readable */
    font-weight: bold !important;
}
/* Fix numbers like <14ms, 1:200, 2100+ */
h1.text-primary,
h2.text-primary,
h3.text-primary,
.text-primary {
    background: transparent !important;
    color: #64ffda !important;   /* teal highlight for visibility */
    font-weight: bold !important;
}

/* === Navbar links fix for dark theme === */
.navbar .nav-link {
    color: #e6f1ff !important;   /* light text for visibility */
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #64ffda !important;   /* teal highlight on hover */
}

/* If dropdown items are too dark, fix them too */
.dropdown-menu {
    background-color: #112240 !important; /* dark background */
    border: 1px solid #233554 !important;
}

.dropdown-menu .dropdown-item {
    color: #e6f1ff !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #1a2c4a !important;
    color: #64ffda !important;
}
/* -------------------------
   Desktop: button-like nav
   Applies only on wide screens
   ------------------------- */
@media (min-width: 992px) {
  .navbar .nav-link {
    display: inline-block;
    background-color: #0d6efd !important; /* Get Started blue */
    color: #fff !important;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 0 6px;
    transition: background .18s ease, transform .18s ease;
    text-align: center;
  }

  .navbar .nav-link:hover {
    background-color: #0b5ed7 !important;
    transform: translateY(-1px);
  }

  /* dropdown items (desktop) */
  .navbar .dropdown-menu .dropdown-item {
    background: transparent !important;
    color: inherit !important;
    border-radius: 6px;
    margin: 4px 0;
  }
  .navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(13,110,253,0.12) !important;
  }
}

/* -------------------------
   Mobile: stacked full-width buttons
   Clean, readable and tappable
   ------------------------- */
@media (max-width: 991.98px) {
  /* modal mobile nav container */
  #mobile-navbar .nav-link {
    display: block !important;
    width: 100% !important;
    background-color: #0d6efd !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  /* keep the small sub-items (accordion collapse) readable */
  #mobile-navbar .list-unstyled .nav-link:not(.px-0) {
    background: transparent !important;
    color: #0a192f !important; /* dark text for nested items */
    padding-left: 28px !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* If you use accordion/collapses inside mobile menu */
  #mobile-navbar .accordion-collapse .nav-link {
    background: transparent !important;
  }

  /* Make the modal body slightly padded and visible */
  .modal-body {
    padding: 18px !important;
    background-color: transparent !important;
  }

  /* Keep Get Started / Sign-in button emphasized if present */
  .optional-link .btn-primary,
  .modal-body .btn-primary {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
  }
}

/* Accessibility: increase tappable hit area on small screens */
@media (max-width: 575.98px) {
  #mobile-navbar .nav-link { padding: 14px 18px !important; font-size: 16px !important; }
}

/* Specific fix: ensure the "14ms / 1:200 / 2100+" numbers are readable */
.in-cirro-1 .border-decor h1,
.in-cirro-1 .border-decor h1.text-primary,
.in-cirro-1 .border-decor p {
  color: #ffffff !important;    /* force white for those stat headings */
}

/* Final note: higher specificity to beat theme CSS already loaded */
.navbar .nav-link,
#mobile-navbar .nav-link { -webkit-font-smoothing: antialiased; }
/* DEBUG — outline containers to see which one is causing the issue */
.section-header, .section-title-container, .card, .feature-box, .instrument-box {
  outline: 2px dashed red !important;
}
/* === Fix 'Start Trading' and 'Popular Instruments' white border === */
.section-header,
.section-title-container,
.start-trading,
.popular-instruments,
.section-header *,
.section-title-container * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important; /* make sure text is visible */
}
/* === Fix badges like 'Start trade' and 'Popular instruments' === */
.badge.bg-secondary,
.badge {
  background: transparent !important;   /* remove gray/white box */
  color: #64ffda !important;            /* teal highlight */
  font-weight: bold !important;
  border: 1px solid #64ffda !important; /* subtle border so it's visible */
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

/* Optional: Make smaller badges (like inline ones) readable */
p .badge {
  font-size: 0.9rem !important;
  padding: 4px 8px !important;
}
/* === Fix muted / secondary text on dark background === */
.text-muted,
.small,
.text-secondary {
  color: #dbeafe !important;   /* soft light blue */
}

/* If inside a badge or inline text */
p.text-muted,
span.text-muted {
  color: #dbeafe !important;
  background: transparent !important;
}
/* === Fix only the "Join a club of more than 480,000 traders" text === */
.in-cirro-3 h1 {
    color: #ffffff !important;          /* main text white */
    background: transparent !important; /* remove any hidden background */
}

.in-cirro-3 h1 .text-primary {
    color: #64ffda !important;          /* teal highlight for the number */
    background: transparent !important; /* ensure number background is clear */
}
/* === Force visible text for "Join a club of more than 480,000 traders" === */
section.in-cirro-3 h1 {
    color: #ffffff !important;          /* main text white */
    background: transparent !important; /* remove any hidden background */
    text-shadow: none !important;       /* remove any shadow that may obscure */
}

section.in-cirro-3 h1 span.text-primary {
    color: #64ffda !important;          /* teal highlight for the number */
    background: transparent !important; /* ensure number background is clear */
    text-shadow: none !important;
}
/* === Fix only the "Join a club of more than 480,000 traders" text === */
.in-cirro-17 h1 {
    color: #ffffff !important;          /* main text white */
    background: transparent !important; /* remove any hidden background */
}

.in-cirro-17 h1 .text-primary {
    color: #64ffda !important;          /* teal highlight for the number */
    background: transparent !important; /* ensure number background is clear */
    text-shadow: none !important;       /* remove any shadow */
}
/* Force fix for the specific "Join a club..." heading */
section.in-cirro-17 h1 {
    color: #ffffff !important;          /* main text white */
    background: transparent !important;
}

section.in-cirro-17 h1 span.text-primary {
    color: #64ffda !important;          /* number highlight */
    background: transparent !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Ensure parent containers don’t force text hidden */
section.in-cirro-17,
section.in-cirro-17 .container,
section.in-cirro-17 .row,
section.in-cirro-17 .col-12 {
    color: inherit !important;
    background: transparent !important;
}