.vault-banner {
  position: relative;


  background:
    radial-gradient(120% 160% at 60% -50%,
      rgba(0,204,169,0.22),
      transparent 55%
    ),
    linear-gradient(180deg,
      rgba(7, 65, 66, 0.88),
      rgba(0, 22, 20, 0.92)
    ) !important;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* Glass edge highlights */
.vault-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Soft animated teal glow */
.vault-banner .glow {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 200%;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 204, 169, 0.22),
      transparent 65%
    );
  animation: glow-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Glow motion */
@keyframes glow-drift {
  0% { transform: translateX(-15%); }
  100% { transform: translateX(15%); }
}

/* Links */
.vault-banner a {
  color: #c9f4f0;
  text-decoration: none;
}

.vault-banner a:hover {
  text-shadow:
    0 0 6px rgba(0, 204, 169, 0.65),
    0 0 14px rgba(0, 204, 169, 0.35);
}


/* Dark dropdown panels */
.navbar .dropdown-menu {
  background-color: #1A1E23 !important;  /* deep dark */
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Dark dropdown items */
.navbar .dropdown-menu .dropdown-item {
  color: #EAEAEA !important;      /* light text */
  background-color: transparent !important;
}

/* Hover/focus state */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgba(0,0,0,0.25) !important;
  color: #FFF !important;
}

.navbar .navbar-nav .nav-item .nav-link {
    font-size: 14px !important;
}

/* ============================================================
   MATERIAL KIT - FORCE DARK MOBILE COLLAPSE (OVERRIDES WHITE OVERLAY)
   Paste AFTER material-kit.css / material-kit.min.css
   ============================================================ */

:root {
  --sg-nav-dark: #0D1217;
  --sg-nav-dark-2: #12171C;
  --sg-nav-surface: #1A1F25;
  --sg-nav-border: rgba(255,255,255,0.10);
  --sg-nav-text: rgba(255,255,255,0.92);
  --sg-nav-muted: rgba(255,255,255,0.72);
  --sg-nav-hover: rgba(255,255,255,0.06);
  --sg-teal: #00CCA9;
}

/* 1) The collapse container itself */
.navbar .navbar-collapse,
.navbar-collapse.collapse,
.navbar-collapse.collapsing,
.navbar-collapse.collapse.show {
 
  color: var(--sg-nav-text) !important;
}

/* 2) Material Kit often draws the mobile panel using pseudo-elements */
.navbar .navbar-collapse::before,
.navbar .navbar-collapse::after,
.navbar-collapse.collapse::before,
.navbar-collapse.collapse::after,
.navbar-collapse.show::before,
.navbar-collapse.show::after {
  content: "" !important;
  background: linear-gradient(180deg, var(--sg-nav-dark-2), var(--sg-nav-dark)) !important;
  opacity: 1 !important;
}

/* 3) Inner wrappers sometimes carry the white background */
.navbar .navbar-collapse .navbar-nav,
.navbar .navbar-collapse .container,
.navbar .navbar-collapse .container-fluid,
.navbar .navbar-collapse .row,
.navbar .navbar-collapse .col,
.navbar .navbar-collapse .dropdown,
.navbar .navbar-collapse .dropdown-menu {
  background-color: transparent !important;
}

/* 4) Give the panel an edge + depth */
.navbar-collapse.collapse.show {
  border-left: 1px solid var(--sg-nav-border) !important;
  box-shadow: -24px 0 48px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* 5) Links / toggles in the mobile panel */
.navbar .navbar-collapse a,
.navbar .navbar-collapse .nav-link,
.navbar .navbar-collapse .dropdown-toggle {
  color: var(--sg-nav-text) !important;
}

.navbar .navbar-collapse .nav-link:hover,
.navbar .navbar-collapse .dropdown-toggle:hover {
  background: var(--sg-nav-hover) !important;
  color: #fff !important;
}

/* 6) Section dividers (optional) */
.navbar .navbar-collapse .nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-top: 0px !important;
 
}

/* 7) Dropdown menus inside mobile collapse – make them dark */
.navbar .navbar-collapse .dropdown-menu {
  background: var(--sg-nav-surface) !important;
  border: 1px solid var(--sg-nav-border) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.55) !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
}

.navbar .navbar-collapse .dropdown-menu .dropdown-item {
  color: var(--sg-nav-text) !important;
  background: transparent !important;
  padding: 10px 18px !important;
}

.navbar .navbar-collapse .dropdown-menu .dropdown-item:hover,
.navbar .navbar-collapse .dropdown-menu .dropdown-item:focus {
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

/* 8) Carets */
.navbar .navbar-collapse .dropdown-toggle::after {
  border-top-color: var(--sg-nav-text) !important;
}

/* 9) If Material Kit uses "card/list-group" styles in collapse, kill the white */
.navbar .navbar-collapse .card,
.navbar .navbar-collapse .card-header,
.navbar .navbar-collapse .list-group-item {
  background: transparent !important;
  color: var(--sg-nav-text) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* 10) Optional: SG teal glow accent at top of the panel */
.navbar-collapse.collapse.show {
  box-shadow:
    -24px 0 48px rgba(0,0,0,0.55),
    -6px 0 24px rgba(0, 204, 169, 0.14) !important;
}

@media (max-width: 991px) {
    .navbar-collapse .navbar-nav .nav-item:after {
        /* width: calc(100% - 30px); */
        content: "";
        display: block;
        height: 1px;
        margin-left: 15px;
        background-color: transparent !important; 
    }
}


.sg-section-title {
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.sg-section-subtitle {
  margin-top: 10px;
  font-weight: 600;
}

.sg-section-intro {
  margin-top: 20px;
  color: rgba(255,255,255,0.72);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sg-why-icon {
  font-size: 32px;
  color: #00CCA9;
  margin-bottom: 16px;
}