/* main.css - custom styling (Bootstrap-first) */

/* Google Font (Inter) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");

/* ===== Base / Global ===== */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;

  /* Dark tech background + SVG pattern (requirement) */
  background-color: #0F172A;
  color: rgba(248, 249, 250, 0.88);

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60H120M60 0V120' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(900px circle at 10% 10%, rgba(13,110,253,0.18), transparent 55%),
    radial-gradient(800px circle at 90% 20%, rgba(13,110,253,0.14), transparent 55%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto;
}

/* Keep headings readable on dark background */
h1, h2, h3, h4, h5, h6, label {
  color: #F8F9FA;
}

/* Optional: make default muted text on dark background */
.small,
.text-secondary {
  color: rgba(248, 249, 250, 0.75);
}

/* ===== Navbar ===== */
.navbar {
  background-color: transparent;
}

/* Make brand + links clear (Bootstrap already helps, this is extra safety) */
.navbar .navbar-brand,
.navbar .nav-link {
  color: rgba(248, 249, 250, 0.92);
}

.navbar .nav-link:hover {
  color: #F8F9FA;
}

/* ===== Buttons ===== */
.btn-primary {
  background-color: #2563EB;
  border-color: #2563EB;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #1E40AF;
  border-color: #1E40AF;
}

/* Nicer large buttons on landing */
.btn-lg {
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
}

/* ===== Images ===== */
img {
  border-radius: 16px;
}

/* ===== Cards ===== */
.card {
  background-color: #F8FAFC;
  color: #1E293B;
  border-radius: 16px;
  border: none;
}

/* Keep text inside cards readable (avoid white text issues) */
.card p,
.card small,
.card .text-muted,
.card a,
.card li {
  color: #1E293B;
}

.card .text-muted {
  color: rgba(30, 41, 59, 0.75);
}

.card h5,
.card .card-title {
  font-weight: 600;
  color: #0F172A;
}

/* ===== Sections spacing ===== */
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Dark dropdown look */
.dropdown-menu {
  background: rgba(87, 31, 83, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
}

.dropdown-item {
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

/* Hero subtitle fix (moved from inline CSS) */
.hero-subtitle {
  color: rgba(255, 255, 255, 0.75);
}