/* Dark black navbar */
.navbar {
  background-color: #000 !important;  /* Pure black */
  border-top: 1px solid #000 !important;  /* Darker border */
}

/* Topbar (email/phone) background */
.navbar ~ .container:first-child {
  background-color: #000 !important;  /* Very dark gray for topbar */
}

/* Navbar brand hover */
.navbar-brand:hover {
  opacity: 0.9;
}

/* Nav links hover */
.navbar-nav .nav-link:hover {
  color: #ffc107 !important;  /* Yellow hover to match your warning btn */
}
.topbar {
  background-color: #000;  /* Almost black */
}
.topbar .container {
  color: #fafafa;  /* Light gray text */
}
/* Hero section light yellow background */
.hero-section {
  min-height: 70vh;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 50%, #FFE082 100%);  /* Light yellow gradient */
  color: #000;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    /* Subtle GPS pattern/logo overlay */
    radial-gradient(circle at 20% 80%, rgba(255,235,59,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,235,59,0.08) 0%, transparent 50%),
    /* Optional: your company logo as faint background */
    url('/assets/images/logos/logo-watermark.png');
  background-size: cover, 200px 200px, cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 1;
}

.hero-section .badge {
  background: linear-gradient(45deg, #FFCA28, #FFB300) !important;
  box-shadow: 0 4px 15px rgba(255,202,40,0.4);
}

.hero-section h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-section .btn-warning {
  background: linear-gradient(45deg, #FFCA28, #FFB300);
  border: none;
  box-shadow: 0 4px 15px rgba(255,202,40,0.4);
  font-weight: 600;
}

.hero-section .btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,202,40,0.6);
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh;
  }
}