/*
 * spidio.css
 * Custom overrides for SpidIO — loaded AFTER falcon/theme.min.css
 * This file fixes everything that was lost when the old SCSS was removed.
 * Do NOT put Tailwind or old Skote classes here.
 */

/* ==========================================================================
   1. RESET — remove any Next.js / old theme body defaults
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* Falcon uses Open Sans as body font */
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. NAVBAR — transparent start, smooth darken on scroll
   Falcon's theme.min.js handles the alpha via inline style when
   data-navbar-darken-on-scroll is present. We only need to ensure
   the navbar starts transparent and transitions smoothly.
   ========================================================================== */

/*
 * Navbar bg is controlled entirely by React useEffect + window.scrollY.
 * JS sets inline style: rgba(11,23,39, alpha) where alpha goes 0→1 on scroll.
 * CSS only handles mobile (always solid) and the transition timing.
 */
.spidio-navbar {
  /* Let JS inline style control background — no !important override here */
  transition: background-color 0.35s ease;
}

/* Mobile: always solid dark — JS scroll handler still runs but this wins */
@media (max-width: 991.98px) {
  .spidio-navbar {
    background-color: #0b1727 !important;
  }
}

/* Mobile collapsed menu — Falcon dark panel */
@media (max-width: 991.98px) {
  .spidio-navbar .navbar-collapse.show {
    background: #0b1727;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem 1.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .spidio-navbar .navbar-collapse.show .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .spidio-navbar .navbar-collapse.show .nav-link:last-child {
    border-bottom: none;
  }
  .spidio-navbar .navbar-collapse.show .btn-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.6rem 0;
    text-align: left;
    width: 100%;
  }
  .spidio-navbar .navbar-collapse.show .btn-outline-light {
    margin-top: 0.75rem;
    width: 100%;
  }
}

/* ==========================================================================
   3. LOGIN DROPDOWN — match Falcon's navbar-card-login width exactly
   Falcon sets min-width: 22rem at lg breakpoint in theme.css.
   Our dropdown needs the same. Also fix the dropdown-menu-card structure.
   ========================================================================== */
.spidio-navbar .dropdown-menu-card {
  padding: 0;
  border: 0;
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.175);
}

/* Match Falcon's navbar-card-login width */
@media (min-width: 992px) {
  .spidio-navbar .navbar-card-login {
    min-width: 22rem !important;
  }
}

/* Ensure dropdown appears correctly when toggled via React state */
.spidio-navbar .dropdown-menu.show {
  display: block;
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   4. CONTAINER WIDTH — ensure Falcon's full-width container is used
   The old Skote theme had $boxed-layout-width: 1300px which could 
   restrict width. Falcon uses Bootstrap 5 default container breakpoints.
   ========================================================================== */
.container {
  max-width: 100%;
  padding-right: calc(var(--falcon-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--falcon-gutter-x, 1.5rem) * 0.5);
}

@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ==========================================================================
   5. HERO SECTION — ensure content clears fixed navbar (70px height)
   The old SCSS had .hero-section { padding-top: 220px }
   Falcon uses pt-8 (7.5rem) + fixed navbar offset — we add navbar clearance.
   ========================================================================== */
#home {
  /* Falcon fixed navbar is ~57px. pt-8 in the row handles the rest. */
  padding-top: 57px;
}

/* ==========================================================================
   6. SECTION SPACING — replaces old .section { padding: 80px 0 }
   Falcon uses py-7 (5rem) which is already in theme.min.css.
   We just ensure consistency.
   ========================================================================== */
section {
  position: relative;
}

/* ==========================================================================
   7. BG-HOLDER / OVERLAY — must have position:relative on parent
   Falcon's .bg-holder is position:absolute so parent needs relative.
   The old theme had this via .section { position: relative }.
   ========================================================================== */
section.light,
section.py-0 {
  position: relative;
}

/* ==========================================================================
   8. FOOTER DARK SECTION — replaces old .landing-footer styles
   Falcon's bg-dark + light class handles this, but we add link colours.
   ========================================================================== */
.bg-dark .link-600 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-dark .link-600:hover,
.bg-dark .link-600:focus {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Back-to-top button */
.btn-back-to-top {
  position: absolute;
  right: 1.5rem;
  top: -1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.btn-back-to-top a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}
.btn-back-to-top a:hover {
  color: #fff;
}

/* ==========================================================================
   9. ICON GROUP — social icons in footer (Falcon class, ensure bg works)
   ========================================================================== */
.bg-dark .icon-item {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}
.bg-dark .icon-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   10. FAQ ACCORDION — clean Q&A separation
   ========================================================================== */
.faq-accordion .accordion-button {
  font-weight: 600;
  font-size: 0.875rem;
  color: #344050;
  background: #f9fbfd;
  border-left: 3px solid transparent;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e8edf3;
  box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: #2c7be5;
  background: #f0f6ff;
  border-left: 3px solid #2c7be5;
  border-bottom: 1px solid #d0e4ff;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(35%) sepia(80%) saturate(600%) hue-rotate(200deg);
}
.faq-accordion .accordion-body {
  background: #fff;
  border-left: 3px solid #2c7be5;
  border-bottom: 2px solid #e8edf3;
  padding: 1rem 1.25rem 1.25rem;
  color: #5e6e82;
  font-size: 0.875rem;
  line-height: 1.75;
}
.faq-accordion .accordion-item {
  border: none;
  margin-bottom: 4px;
  border-radius: 6px;
  overflow: hidden;
}
.faq-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   11. ROADMAP SWIPER — equal heights, clipped, centred arrows + pagination
   ========================================================================== */
.roadmap-outer {
  position: relative;
  overflow: hidden;
  padding: 0 40px 48px;
}
.roadmap-swiper .swiper-wrapper {
  align-items: stretch;
  transition-timing-function: ease-in-out !important;
}
.roadmap-swiper .swiper-slide {
  height: auto !important;
}
.roadmap-swiper {
  padding-bottom: 40px !important;
}
/* Arrows */
.roadmap-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 20px));
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #2c7be5;
  font-size: 12px;
}
.roadmap-nav-btn:hover { background: #f0f6ff; }
.roadmap-nav-btn.prev { left: 0; }
.roadmap-nav-btn.next { right: 0; }
.roadmap-nav-btn:disabled { opacity: 0.3; cursor: default; }
/* Pagination */
.roadmap-swiper .swiper-pagination {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap-swiper .swiper-pagination-bullet {
  margin: 0 4px;
  width: 8px;
  height: 8px;
  background: #b6c1d2;
  opacity: 1;
}
.roadmap-swiper .swiper-pagination-bullet-active {
  background: #2c7be5;
}

/* ==========================================================================
   12. STATS CARDS — colored left border, tinted bg
   ========================================================================== */
.stats-card {
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}
.stats-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   13. HIGHLIGHTS CARDS — square-ish feel, hover lift
   ========================================================================== */
.highlight-card {
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   14. MOBILE GLOBAL FIXES
   ========================================================================== */
@media (max-width: 575.98px) {
  .roadmap-outer {
    padding: 0 32px 48px;
  }
  .roadmap-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}


.customFooter .btn-back-to-top{top: -8.5rem; position:absolute !important; transform:none !important;}