/* ================= ULTRA FUTURISTIC FLOATING NAVBAR ================= */

.neo-nav {
  width: 95% !important;
  margin: 0 auto;
  border-radius: 22px;
  background: rgba(10, 20, 40, 0.30);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  padding: 12px 20px;
  border: 1px solid rgba(57,255,20,0.15); /* neon green border */
  box-shadow: 0 0 45px rgba(57,255,20,0.18); /* neon green glow */
  transition: 0.3s ease-in-out;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
.nav-logo {
  height: 34px;     /* adjust size */
  width: auto;
  filter: drop-shadow(0 0 4px rgba(0,255,120,0.4)); /* optional neon glow */
  margin-right: 8px;
}


@media (max-width: 1029px) {
  .brand-text {
    font-size: 1.0rem !important;
  }

}

/* Make navbar smaller on large screens */
@media (min-width: 992px) {
  .neo-nav {
    width: 78%;
  }
}

/* Brand */
.brand-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #39ff14 !important; /* neon green */
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

/* Nav links */
.neo-link {
  font-family: 'Audiowide', cursive;
  color: #e2ffe8 !important; /* lighter greenish white */
  font-size: 1rem;
  font-weight: 500;
  transition: 0.3s ease;
  position: relative;
  padding-bottom: 3px;
  display: flex;
  align-items: center;
}

/* Futuristic underline */
.neo-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #39ff14; /* neon green underline */
  border-radius: 20px;
  transition: 0.3s ease;
  transform: translateX(-50%);
}

.neo-link:hover {
  color: #39ff14 !important; /* neon green on hover */
}

.neo-link:hover::after {
  width: 55%;
}

/* BUY / CTA BUTTON */
.neo-btn {
  font-family: 'Audiowide', cursive;
  padding: 10px 30px;
  border-radius: 50px;
  background: linear-gradient(135deg, #39ff14, #2ecf0f);
  color: #000 !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.55); /* neon green glow */
  transition: 0.25s ease-in-out;
  display: flex;
  align-items: center;
}

.neo-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 32px rgba(57,255,20,0.9); /* stronger glow */
}

/* Toggler icon */
.neo-toggler {
  border: none;
  color: #39ff14; /* neon green */
  font-size: 1.4rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Mobile version */
@media (max-width: 991px) {
  .neo-nav {
    width: 95%;
    padding: 10px 0;
  }

  .neo-btn {
    margin-top: 10px;
    text-align: center;
    justify-content: center;
  }
}



/* ================= MOBILE RESPONSIVE FIXES ================= */
@media (max-width: 991px) {

  /* Navbar container */
  .neo-nav {
    width: 94%;
    padding: 10px 14px;
    border-radius: 18px;
    top: 15px;
  }

  /* BRAND TEXT (The Constructor) */
  .brand-text {
    font-size: 1.2rem;     /* smaller */
    letter-spacing: 1.5px; /* tighter for mobile */
  }

  /* Logo */
  .nav-logo {
    height: 26px; /* smaller logo */
    margin-right: 6px;
  }

  /* Nav links */
  .neo-link {
    font-size: 0.9rem !important; /* smaller */
    padding: 8px 0;
  }

  /* Underline fix */
  .neo-link::after {
    bottom: -2px;
  }

  /* CTA Button */
  .neo-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    width: 100%;
    margin-top: 12px;
    border-radius: 40px;
  }

  /* Toggler button */
  .neo-toggler {
    font-size: 1.2rem;
  }
}

/* =========== EXTRA SMALL PHONES (iPhone SE etc) =========== */
@media (max-width: 480px) {

  .neo-nav {
    padding: 8px 10px;
    border-radius: 15px;
  }

  .brand-text {
    font-size: 1.05rem; /* even smaller */
    letter-spacing: 1px;
  }

  .nav-logo {
    height: 22px;
  }

  .neo-link {
    font-size: 0.82rem !important;
  }

  .neo-btn {
    padding: 7px 18px;
    font-size: 0.8rem;
  }
}