/* =========================================================
   RECapBridge β€” Unified Styles (Bootstrap 5 friendly)
   ---------------------------------------------------------
   - Compact Promeritum-style navbar (dark links before scroll)
   - Homepage skyline background with overlay
   - Consistent cards, forms, buttons, tables
   - Select2 alignment
   ========================================================= */

/* ---------- Theme variables ---------- */
:root {
  --font-sans: "Inter","Segoe UI","Roboto",system-ui,-apple-system,sans-serif;
  --brand: #38bdf8;        /* cyan */
  --brand-600: #0ea5e9;
  --text: #0f172a;
  --muted: #6b7280;
  --bg: #f3f4f6;
  --card-bg: #ffffff;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 18px 45px rgba(15,23,42,0.10);
}

/* ---------- Base ---------- */
html, body {
  height: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Navbar ---------- */
.pg-navbar {
  background: rgba(15, 23, 42, 0.92) !important; /* deep navy */
  backdrop-filter: blur(12px);
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
  padding: 0.55rem 0;
  z-index: 1030;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

.pg-navbar.scrolled {
  background: rgba(15, 23, 42, 0.98) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.6);
}

/* Spacer so content isn't hidden under fixed nav */
.pg-nav-spacer {
  height: 56px;
}

/* Brand */
.pg-brand {
  color: #e5e7eb !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.pg-brand img {
  border-radius: 6px;
}

/* Menu links */
.pg-menu .nav-link {
  font-size: .85rem;
  padding: .35rem .65rem !important;
  color: #e5e7eb !important;
  opacity: .86;
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}
.pg-menu .nav-link:hover {
  color: #38bdf8 !important;
  opacity: 1;
}
.pg-menu .nav-link::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .15rem;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.pg-menu .nav-link:hover::after,
.pg-menu .nav-link.active::after {
  transform: scaleX(1);
}

/* CTA button */
.pg-cta {
  background: linear-gradient(135deg, #38bdf8, #22c55e);
  color: #0b1120 !important;
  border-radius: 999px;
  padding: .4rem 1.1rem;
  border: none;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.6), 0 14px 34px rgba(56,189,248,0.45);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.pg-cta:hover {
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 18px 40px rgba(56,189,248,0.8);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Navbar toggler (hamburger) */
.navbar-toggler {
  padding: .2rem .4rem !important;
}


.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.25rem;
  height: 1.25rem;
}



/* Optional divider between menu groups */
.pg-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(148, 163, 184, .5);
}


/* Hero section that receives the rotating city background */
/*
.hero {
  position: relative;
  min-height: 80vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
*/

/* ---------- Hero banner ---------- */
.hero-banner {
  border-radius: 0;
  overflow: visible;
}

.hero-banner .overlay {
  min-height: 72vh;
  display: flex;
  align-items: center;
  background: transparent;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 1.5rem;
  padding-bottom: 3.5rem;
  /* padding-left: 135px;   /* increase to move panels further right */
}

/* make hero columns stretch so both boxes align */
.hero-row > [class*="col-"] {
  display: flex;
}

.hero-card,
.hero-aside {
  width: 100%;
  height: 100%;
}

.hero-card {
  background: radial-gradient(circle at top left,
              rgba(56,189,248,0.18),
              rgba(15,23,42,0.95));
  border-radius: 24px;
  padding: 2.25rem 2.5rem;
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 24px 60px rgba(15,23,42,0.85);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.8);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e5e7eb;
  background: rgba(15,23,42,0.8);
  margin-bottom: 0.9rem;
}

.hero-title {
  font-size: clamp(2.1rem, 2.9vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.hero-subtitle {
  font-size: 1rem;
  color: #e5e7eb;
  opacity: 0.95;
  margin-bottom: 0.75rem;
}

.hero-subtext {
  font-size: 0.92rem;
  color: rgba(226,232,240,0.9);
  margin-bottom: 1.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Accent button for hero */
.btn-accent {
  background: linear-gradient(135deg, #38bdf8, #22c55e);
  border: none;
  color: #0b1120;
  font-weight: 600;
  padding-inline: 1.4rem;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.6), 0 14px 32px rgba(56,189,248,0.6);
}
.btn-accent:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 18px 40px rgba(56,189,248,0.9);
}

/* Right-hand stats card – now visually matched to hero-card */
.hero-aside {
  background: radial-gradient(circle at top left,
              rgba(56,189,248,0.18),
              rgba(15,23,42,0.85));
  border-radius: 24px;
  padding: 1.8rem 1.9rem;
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 24px 60px rgba(15,23,42,0.85);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-stat + .hero-stat {
  margin-top: 0.9rem;
}

.hero-stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148,163,184,0.9);
}

.hero-stat-value {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
}

.hero-aside-note {
  font-size: 0.8rem;
  color: rgba(148,163,184,0.9);
  margin-top: 1.2rem;
}

/* Responsive tweak */
@media (max-width: 991.98px) {
  .hero-card {
    margin-bottom: 1.5rem;
  }
}

/* Desktop: move hero panels to the right */
@media (min-width: 992px) {   /* or 1024px, up to you */
  body.home-page .hero-inner {
    padding-left: 135px;      /* whatever value you liked */
  }
}


/* Fix right box typography + spacing */
.hero-aside-text {
  padding: 2.25rem 2.2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* stop vertical stretching */
  gap: 1rem;                   /* consistent spacing between paragraphs */
}

/* Match left typography exactly */
.hero-aside-text .hero-subtitle {
  font-size: 1rem;
  opacity: 0.95;
  margin: 0;
}

.hero-aside-text .hero-subtext {
  font-size: 0.92rem;
  color: rgba(226,232,240,0.9);
  margin: 0;
  line-height: 1.45;
}

/* Make column proportions balanced */
@media (min-width: 992px) {
  .hero-row .col-lg-7 { flex: 0 0 55%; }
  .hero-row .col-lg-5 { flex: 0 0 45%; }
}





/* ---------- MAIN HOME SECTIONS (UNDER HERO) ---------- */

/* Main content pod under the hero on the homepage */
.home-sections {
  margin-top: -1.5rem; /* pull up slightly towards hero */
  padding: 1.75rem 1.5rem 2rem;
  background: radial-gradient(circle at top,
              rgba(15,23,42,0.96),
              rgba(15,23,42,0.99));              
  border-radius: 24px 24px 18px 18px;
  box-shadow: 0 -10px 40px rgba(15,23,42,0.9);
}

/* Dark cards on the homepage only */
body.home-page .home-sections .card {
  background: rgba(15,23,42,0.97);
  border-radius: 18px;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 18px 40px rgba(15,23,42,0.9);
  color: #e5e7eb;
}

/* Titles/headings inside dark home sections */
body.home-page .home-sections .card-title,
body.home-page .home-sections h3,
body.home-page .home-sections h5 {
  color: #f9fafb;
}

/* Body copy and lists inside dark home sections */
body.home-page .home-sections p,
body.home-page .home-sections li {
  color: rgba(209,213,219,0.9);
}

/* Buttons inside the dark home sections */
body.home-page .home-sections .btn-outline-primary {
  border-color: #38bdf8;
  color: #e5e7eb;
}

body.home-page .home-sections .btn-outline-primary:hover {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0b1120;
}

/* ---------- Cards ---------- */
.card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.value-row .card {
  height: 100%;
  border-radius: 18px;
  padding-top: 0.15rem;
}

.value-row .card-title {
  font-weight: 600;
  font-size: 1.02rem;
}

.value-row .card-body p {
  font-size: 0.92rem;
  color: var(--muted);
}

.value-row ul {
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.card-title { font-weight: 600; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; }
.form-control,
.form-select {
  border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(25,135,84,.15);
}

/* Read-only look for detail view reuse */
.form-control-plaintext {
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: .5rem .75rem;
}

/* Section titles/subtitles (used on home and elsewhere) */
.section-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--muted);
}

.text-accent {
  color: #22c55e; /* or stick with brand if you prefer cyan */
}

.how-card {
  border-radius: 20px;
}

.how-list {
  font-size: 0.9rem;
  color: var(--muted);
}
.how-list li + li {
  margin-top: 0.25rem;
}

.reg-card {
  border-radius: 20px;
  border-style: dashed;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; }
.btn-primary,
.btn-success {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover,
.btn-success:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-outline-secondary {
  border-color: #ced4da;
  color: #212529;
}
.btn-outline-secondary:hover {
  background: #f1f3f5;
  color: #212529;
}

/* Keep small spacing between inline buttons (e.g., in search list) */
.list-group-item .btn { margin-right: .5rem; }

/* ---------- Tables ---------- */
.table th {
  background-color: #f1f3f5;
}

/* ---------- Filters / search UI ---------- */

/* Base layout for filter cards */
.filter-box {
  border-radius: 18px;
  padding: 0.9rem 1rem;
}

/* Dark glass filters on non-home pages (e.g. Search) */
body:not(.home-page) .page-glass .filter-box {
  background: radial-gradient(circle at top left,
              rgba(15,23,42,0.96),
              rgba(15,23,42,0.98));
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 12px 30px rgba(15,23,42,0.9);
  color: #e5e7eb;
}

/* Labels above inputs */
body:not(.home-page) .page-glass .filter-box .form-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(148,163,184,0.95);
}

/* Inputs/selects inside filters */
body:not(.home-page) .page-glass .filter-box .form-control,
body:not(.home-page) .page-glass .filter-box .form-select {
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(51,65,85,0.95);
  color: #e5e7eb;
  border-radius: 14px;
}

/* Focus state */
body:not(.home-page) .page-glass .filter-box .form-control:focus,
body:not(.home-page) .page-glass .filter-box .form-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 0.12rem rgba(56,189,248,0.45);
  background: rgba(15,23,42,0.98);
}

/* Placeholder text */
body:not(.home-page) .page-glass .filter-box .form-control::placeholder {
  color: rgba(148,163,184,0.9);
}

/* Fix KPI card text on Admin Dashboard (dark cards) */
body:not(.home-page) .card .text-muted {
  color: rgba(226,232,240,0.85) !important; /* bright muted */
}

body:not(.home-page) .card .display-6 {
  color: #f8fafc !important; /* strong white numeric */
}

body:not(.home-page) .card h6 {
  color: rgba(148,163,184,0.95) !important; /* header label */
}

/* Make Export CSV buttons readable */
body:not(.home-page) .card .btn-outline-secondary {
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,0.6) !important;
}

body:not(.home-page) .card .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
}



/* ---------- Select2 alignment (base) ---------- */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: 38px;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  padding: .125rem .375rem;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 1.5;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100%;
}

/* Dark Select2 styling in filter boxes on non-home pages */
body:not(.home-page) .page-glass .filter-box .select2-container--default .select2-selection--multiple,
body:not(.home-page) .page-glass .filter-box .select2-container--default .select2-selection--single {
  background: rgba(15,23,42,0.98) !important;
  border: 1px solid rgba(51,65,85,0.95) !important;
  border-radius: 14px !important;
  min-height: 44px;
  padding: 6px 10px;
  color: #e5e7eb !important;
  display: flex;
  align-items: center;
}

body:not(.home-page) .page-glass .filter-box .select2-container--default .select2-selection__rendered {
  color: #e5e7eb !important;
  line-height: 1.4;
}

body:not(.home-page) .page-glass .filter-box .select2-container--default .select2-selection__placeholder {
  color: rgba(148,163,184,0.9) !important;
}

body:not(.home-page) .page-glass .filter-box .select2-container--default .select2-selection__arrow b {
  border-color: rgba(229,231,235,0.7) transparent transparent transparent !important;
}

/* ---------- Utilities ---------- */
.text-muted-70 { color: rgba(0,0,0,.7); }
.rounded-xl { border-radius: 1rem !important; }

/* ---------- Print helper ---------- */
@media print {
  .pg-navbar,
  .pg-nav-spacer,
  .btn,
  .alert,
  .navbar { display: none !important; }
  .card { box-shadow: none !important; border: none !important; }
  body { background: #fff !important; }
}

/* ---------- Homepage-only skyline background ---------- */
/* body.home-page {
  background-image: url("/static/img//skyline_lion_new.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
} */

/* Full-screen skyline backgrounds on all pages */

body.home-page,
body:not(.home-page) {
  background-size: cover;        /* Scale up/down to fill screen */
  background-position: center;   /* Keep the middle visible */
  background-repeat: no-repeat;  /* Stop the tiling on mobile */
  background-attachment: fixed;  /* Nice desktop parallax effect */
  min-height: 100vh;             /* Make sure page is at least viewport height */
}


/* ---------- Homepage-only skyline background (rotated by JS) ---------- */
/*
body.home-page {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
*/


body:not(.home-page) {
  background-image: url("/static/img/skyline.jpg");
}



/* Dark overlay for readability β€” single, uniform overlay */
body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15,23,42,0.78), rgba(0, 0, 0, 0.15));
  pointer-events: none;
  z-index: -1;
}

/* iOS fallback */
/* @supports (-webkit-touch-callout: none) {
  body.home-page {
    background-attachment: scroll;
  }
} */


/* iOS / mobile Safari: disable fixed backgrounds to avoid jank */
/*
@supports (-webkit-touch-callout: none) {
  body.home-page,
  body:not(.home-page) {
    background-attachment: scroll;
  }
}
*/


body.home-page footer a {
  color: #cfe8ff !important;
  text-decoration: underline;
}

/* Make footer fully transparent on homepage */
body.home-page footer {
  background: transparent !important;
  color: #eee !important;
  border-top: none !important;
}

/* Footer text on non-home pages still readable on dark skyline */
body:not(.home-page) .page-glass footer {
  border-color: rgba(148,163,184,0.4) !important;
  color: rgba(226,232,240,0.7) !important;
}



/* ==========================================================
   DARK GLASS PAGE CONTAINER FOR NON-HOME PAGES
   Skyline background, but NO outer box
   ========================================================== */

/* Non-home pages: same skyline background as home */
/*  body:not(.home-page) {
  background-image: url("/static/img/skyline.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
} */

/* Dark radial overlay (same as homepage) */
body:not(.home-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15,23,42,0.78), rgba(0,0,0,0.22));
  pointer-events: none;
  z-index: -1;
}

/* Base wrapper used on all pages – layout only */
.page-glass {
  width: 100%;
}

/* Home page: wrapper is fully neutral (hero controls layout) */
body.home-page .page-glass {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}

/* Non-home pages: transparent wrapper, no box */
body:not(.home-page) .page-glass {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 960px;  /* controls text width only; adjust if you like */
  color: #e5e7eb;
}


/* Links on non-home pages */
body:not(.home-page) .page-glass a {
  color: #38bdf8 !important;
  text-decoration: underline;
}

/* Darker cards for non-home pages: matches hero-card aesthetic */
body:not(.home-page) .page-glass .card {
  background: rgba(30, 41, 59, 0.88); /* deep slate / translucent */
  color: #e5e7eb;                    /* light gray text */
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 18px;
  box-shadow:
    0 12px 32px rgba(15,23,42,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  margin-bottom: 1.35rem;
  backdrop-filter: blur(6px);
}

/* Slightly brighter headings inside dark cards */
body:not(.home-page) .page-glass .card-title,
body:not(.home-page) .page-glass h3,
body:not(.home-page) .page-glass h4,
body:not(.home-page) .page-glass h5 {
  color: #f8fafc !important;
}

/* Body copy tone */
body:not(.home-page) .page-glass .card p,
body:not(.home-page) .page-glass .card li {
  color: rgba(226,232,240,0.85);
}

/* Search results rows: make list-group items dark, not white */
body:not(.home-page) .page-glass .list-group-item {
  background: rgba(15, 23, 42, 0.96);          /* very dark slate */
  color: #e5e7eb;
  border-color: rgba(51, 65, 85, 0.9);         /* darker border */
}

/* Text inside result rows */
body:not(.home-page) .page-glass .list-group-item h5 {
  color: #f9fafb;
}

body:not(.home-page) .page-glass .list-group-item p {
  color: rgba(226, 232, 240, 0.9);
}

/* Buttons in result rows on dark background */
body:not(.home-page) .page-glass .list-group-item .btn-outline-primary {
  border-color: #38bdf8;
  color: #e5e7eb;
  background: transparent;
}

body:not(.home-page) .page-glass .list-group-item .btn-outline-primary:hover {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0b1120;
}

body:not(.home-page) .page-glass .list-group-item .btn-outline-secondary {
  border-color: #e5e7eb;
  color: #e5e7eb;
  background: transparent;
}

body:not(.home-page) .page-glass .list-group-item .btn-outline-secondary:hover {
  background: rgba(248,250,252,0.1);
}


/* ==========================================================
   FORCE DARK SELECT2 ON NON-HOME PAGES (Country filter etc.)
   ========================================================== */

body:not(.home-page) .select2-container--default .select2-selection--single,
body:not(.home-page) .select2-container--default .select2-selection--multiple {
  background: rgba(15,23,42,0.98) !important;
  border: 1px solid rgba(51,65,85,0.95) !important;
  border-radius: 14px !important;
  min-height: 44px;
  padding: 6px 10px;
  color: #e5e7eb !important;
  display: flex;
  align-items: center;
}

/* Text / placeholder inside Select2 */
body:not(.home-page) .select2-container--default .select2-selection__rendered {
  color: #e5e7eb !important;
  line-height: 1.4;
}

body:not(.home-page) .select2-container--default .select2-selection__placeholder {
  color: rgba(148,163,184,0.9) !important;
}

/* Dropdown arrow */
body:not(.home-page) .select2-container--default .select2-selection__arrow b {
  border-color: rgba(229,231,235,0.7) transparent transparent transparent !important;
}



/**********************************************************/

/* ==========================================================
   DARK ACCORDION FOR HOMEPAGE
   ========================================================== */

body.home-page .accordion-item {
  background: rgba(15,23,42,0.85) !important;
  border: 1px solid rgba(51,65,85,0.7) !important;
  border-radius: 14px !important;
  margin-bottom: 0.75rem;
  backdrop-filter: blur(8px);
}

body.home-page .accordion-button {
  background: rgba(15,23,42,0.6) !important;
  color: #e5e7eb !important;
  font-weight: 600;
  padding: 1rem 1.25rem;
  box-shadow: none !important;
  border-radius: 14px !important;
  z-index: 5;
  position: relative;
}

body.home-page .accordion-button:not(.collapsed) {
  background: rgba(30,41,59,0.75) !important;
  color: #fff !important;
}

/*
body.home-page .accordion-button::after {
  filter: invert(1) brightness(1.4);
} */

body.home-page .accordion-body {
  background: rgba(15,23,42,0.92) !important;
  color: rgba(226,232,240,0.92) !important;
  border-radius: 0 0 14px 14px !important;
  padding: 1.1rem 1.25rem 1.4rem;
}

body.home-page .accordion-body hr {
  border-color: rgba(255,255,255,0.08);
}

body.home-page .accordion-item:last-child {
  margin-bottom: 0;
}




/* === FIXED WHITE CHEVRONS – CLEAN AND BULLETPROOF === */

/* Override Bootstrap chevron entirely */
.accordion-button::after {
  content: "\203A";          /* Unicode: SINGLE RIGHT-POINTING ANGLE QUOTATION MARK › */
  font-size: 1.35rem;
  font-weight: 700;
  display: inline-block;
  color: #ffffff !important; /* pure white */
  background-image: none !important;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  margin-left: auto;
  opacity: 1 !important;
}

/* Expanded => rotate down */
.accordion-button:not(.collapsed)::after {
  transform: rotate(90deg);
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Ensure button text is white too */
.accordion-button {
  color: #ffffff !important;
}



/* ==========================================================
   FIX FOOTER ON HOME PAGE ONLY
   Makes the footer transparent and ensures it appears below
   the dark accordion box so the skyline shows behind it.
   ========================================================== */

/* Make the footer inside page-glass fully transparent on home */
body.home-page .page-glass footer {
    background: transparent !important;
    border-top-color: rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.75) !important;
}

/* Add breathing room under the home accordion so footer clears the dark box */
body.home-page .page-glass {
  padding-bottom: 4rem !important;
}


body.home-page footer {
  background: transparent !important;
  color: #eee !important;
}

body.home-page .page-glass {
    background: transparent !important;
    box-shadow: none !important;
}

/* --- FIX HOMEPAGE FOOTER DARK BACKGROUND OVERLAP --- */

/* Remove the heavy shadow at the bottom of the home-sections, so footer isn’t sitting on a dark surface */
body.home-page .home-sections {
    box-shadow: 0 -10px 40px rgba(15,23,42,0.9),
                0 0 0 rgba(0,0,0,0) !important; /* no downward shadow */
    padding-bottom: 4rem !important; /* create breathing space above footer */
}

/* Footer sits on real background, not on the dark box */
body.home-page footer {
    position: relative;
    z-index: 10;
    background: transparent !important;
}

/* Ensure the backdrop behind the footer is the real skyline */
body.home-page .page-glass {
    background: transparent !important;
    box-shadow: none !important;
}



/* Make homepage accordion visually identical to hero boxes */
body.home-page .accordion-item {
  background: radial-gradient(circle at top left,
              rgba(56,189,248,0.18),
              rgba(15,23,42,0.95)) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(148,163,184,0.55) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,0.85) !important;
  overflow: hidden;
}

body.home-page .accordion-button {
  background: rgba(15,23,42,0.55) !important;
  color: #e5e7eb !important;
  font-weight: 600;
  padding: 1rem 1.25rem;
  box-shadow: none !important;
}

body.home-page .accordion-button:not(.collapsed) {
  background: rgba(15,23,42,0.70) !important;
  color: #fff !important;
}

/* Match text colors inside */
body.home-page .accordion-body {
  background: transparent !important;
  color: rgba(226,232,240,0.92) !important;
  padding: 1.25rem 1.5rem 1.5rem;
}

/* Ensure chevron stays white */
body.home-page .accordion-button::after {
  color: #ffffff !important;
  filter: none !important;
}


/* Inside hero-card accordion panel: match parent background perfectly */
.home-accordion-panel .accordion-item {
    background: transparent !important;
    border: none !important;
}

.home-accordion-panel .accordion-button {
    background: transparent !important;
    color: #e5e7eb !important;
    border: none !important;
    box-shadow: none !important;
}

.home-accordion-panel .accordion-button:not(.collapsed) {
    background: rgba(255,255,255,0.03) !important; /* optional tiny highlight */
    color: #fff !important;
}

.home-accordion-panel .accordion-body {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.10);
}


/* ============================================
   PERFECTLY MATCH ACCORDION TO HERO BOXES
   ============================================ */

/* Outer accordion container – already correct */
body.home-page .home-sections {
    background: rgba(15,23,42,0.85);
    border-radius: 24px;
    border: 1px solid rgba(148,163,184,0.45);
    box-shadow: 0 24px 60px rgba(15,23,42,0.85);
    backdrop-filter: blur(8px);
}

/* Make header buttons fully transparent */
body.home-page .accordion-button {
    background: transparent !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    border: 1px solid rgba(148,163,184,0.35) !important;
}

/* Expanded state: still transparent */
body.home-page .accordion-button:not(.collapsed) {
    background: transparent !important;
    border-color: rgba(148,163,184,0.55) !important;
    color: #ffffff !important;
}

/* Chevron stays clean white */
body.home-page .accordion-button::after {
    background-image: none !important;
    color: #ffffff !important;
    transform: rotate(0deg);
}
body.home-page .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

/* Accordion body matches main container exactly */
body.home-page .accordion-body {
    background: rgba(15,23,42,0.85) !important;
    border-radius: 0 0 16px 16px !important;
    color: rgba(226,232,240,0.92) !important;
}


/* ==========================================================
   DARKEN THIRD-LEVEL CARDS INSIDE FAQ SECTION
   ========================================================== */

body.home-page #faqSubAccordion .card {
  background: rgba(15,23,42,0.92) !important;
  border: 1px solid rgba(51,65,85,0.7) !important;
  border-radius: 14px !important;
  color: rgba(226,232,240,0.92) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

/* Headings inside the dark cards */
body.home-page #faqSubAccordion .card h5 {
  color: #f8fafc !important;
}

/* Normal paragraph text inside cards */
body.home-page #faqSubAccordion .card p {
  color: rgba(226,232,240,0.92) !important;
}


/* Improve readability of Eligibility buttons inside accodion */
body.home-page #eligCollapse .btn-outline-primary {
  border-color: rgba(255,255,255,0.6) !important;
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.05) !important;
  font-weight: 600;
  border-width: 1.5px;
  padding-inline: 1.1rem;
}

body.home-page #eligCollapse .btn-outline-primary:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #0b1120 !important;
}


body.home-page #investorsCollapse .btn-outline-primary {
  border-color: rgba(255,255,255,0.6) !important;
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.05) !important;
  font-weight: 600;
  border-width: 1.5px;
  padding-inline: 1.1rem;
}

body.home-page #investorsCollapse .btn-outline-primary:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #0b1120 !important;
}


body.home-page #contactCollapse .btn-outline-primary {
  border-color: rgba(255,255,255,0.6) !important;
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.05) !important;
  font-weight: 600;
  border-width: 1.5px;
  padding-inline: 1.1rem;
}

body.home-page #contactCollapse .btn-outline-primary:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #0b1120 !important;
}



body.home-page #developersCollapse .btn-outline-primary {
  border-color: rgba(255,255,255,0.6) !important;
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.05) !important;
  font-weight: 600;
  border-width: 1.5px;
  padding-inline: 1.1rem;
}

body.home-page #developersCollapse .btn-outline-primary:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #0b1120 !important;
}






/* -----------------------------------------------------------
   MATCH CONTACT SECTION TO ELIGIBILITY & REGULATORY
   ----------------------------------------------------------- */

/* Match the dark slab background */
/*
body.home-page #contactCollapse .accordion-body {
  background: rgba(15, 23, 42, 0.92) !important;
  border-radius: 0 0 14px 14px !important;
  padding: 1.3rem 1.5rem 1.5rem !important;
  color: rgba(226,232,240,0.92) !important;
  border-top: 1px solid rgba(148,163,184,0.25);
}
*/

/* Make email + labels readable & consistent */
body.home-page #contactCollapse .accordion-body p,
body.home-page #contactCollapse .accordion-body h5 {
  color: rgba(226,232,240,0.92) !important;
  margin-bottom: 0.6rem;
}

/* Email link bright, like the buttons up top */

/*
body.home-page #contactCollapse .accordion-body a {
  color: #38bdf8 !important;
  font-weight: 600;
  text-decoration: underline;
}
*/
/* Button styling matches eligibility buttons */
/*
body.home-page #contactCollapse .accordion-body .btn {
  border-radius: 999px !important;
  padding: 0.35rem 1.2rem !important;
  font-weight: 600 !important;
}

body.home-page #contactCollapse .accordion-body .btn-outline-primary {
  border-color: #38bdf8 !important;
  color: #e5e7eb !important;
  background: transparent !important;
}

body.home-page #contactCollapse .accordion-body .btn-outline-primary:hover {
  background: #38bdf8 !important;
  color: #0b1120 !important;
}
*/
/* Make muted text readable on dark backgrounds (non-home pages) */
body:not(.home-page) .page-glass .text-muted {
  color: rgba(226,232,240,0.75) !important; /* light gray */
}

/* Auto-detect required fields and add an asterisk to their labels */
label[for]:has(+ input[required]),
label[for]:has(+ textarea[required]),
label[for]:has(+ select[required]) {
    position: relative;
}

label[for]:has(+ input[required])::after,
label[for]:has(+ textarea[required])::after,
label[for]:has(+ select[required])::after {
    content: " *";
    color: #e63946;
    font-weight: 700;
    margin-left: 4px;
}


/* Flash messages – glassy + more transparent */
.container.mt-3 .alert {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;

  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);

  background-color: rgba(15, 23, 42, 0.45);   /* lower opacity */
  color: #f1f5f9;

  backdrop-filter: blur(8px);                 /* lighter blur */
}

/* Default: no extra offset on small screens */
.container.mt-3 {
  padding-left: 0;
}

/* Desktop: align with hero */
@media (min-width: 992px) {
  .container.mt-3 {
    padding-left: 210px;
  }
}

/* Hero section with rotating city background */
/*
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
*/



/* Keep your text/content centered and readable */
/*
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
}
*/
/*
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 2.5rem;
  padding-bottom: 3.5rem; 
}
*/

/* Lion fixed to bottom-left of viewport on home page */
body.home-page .hero-lion {
  position: fixed;
  left: -2%;
  bottom: 0vh;
  max-height: 70vh;
  height: auto;
  width: auto;
  z-index: 0;          /* behind content but above background */
  pointer-events: none;
  
  
 filter:
  drop-shadow(12px 18px 30px rgba(0, 0, 0, 0.45))
  brightness(0.96)
  contrast(0.97)
  saturate(0.92)
  hue-rotate(-3deg);

 mask-image: radial-gradient(
  ellipse at center,
  rgba(0,0,0,1) 65%,
  rgba(0,0,0,0.85) 78%,
  rgba(0,0,0,0) 100%
);

 -webkit-mask-image: radial-gradient(
  ellipse at center,
  rgba(0,0,0,1) 65%,
  rgba(0,0,0,0.85) 78%,
  rgba(0,0,0,0) 100%
);
  
}

/* Optional: on small screens scale lion down a bit */
@media (max-width: 768px) {
  .hero-lion {
    max-height: 55vh;   /* smaller */
    left: 0;            /* bring it in a bit */
    bottom: -5vh;       /* push it slightly down so it doesn't cover text */    
  }
}


/* Full-screen rotating background layers (behind everything) */
.bg-rotator {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;                  /* behind overlay + lion */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

/* The currently visible layer */
.bg-rotator.bg-active {
  opacity: 1;
}



body.home-page .home-accordion-panel,
body.home-page .accordion-body .card{
  background: rgba(15, 23, 42, 0.0) !important;
  backdrop-filter: blur(1px);
}