/* === Reset & Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #121212;
  color: #e4e4e4;
  line-height: 1.6;
  /* removed global padding that caused odd gaps */
}

/* === Navbar (fixed logo sizing + cleaner active/hover) === */
header { background-color: #1e1e1e; border-bottom: 1px solid #444; }

/* Brand area */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px; /* keeps header steady even if logo is small */
}

/* Logo: responsive max-height, never stretches */
.navbar-brand img {
  display: block;
  height: auto;
  width: auto;
  max-height: clamp(40px, 6vw, 60px); /* bigger on all screens */
  object-fit: contain;
}

/* Brand text */
.navbar-brand span {
  font-size: 1.2rem;
  font-weight: 700;
  color: #00bfff;
}

/* Links */
.navbar .nav-link {
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  transition: color .2s ease, opacity .2s ease;
  margin-left: 1rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #00bfff;
}

.navbar .nav-link.active,
.navbar .nav-link.show {
  color: #ffffff;
  position: relative;
}
.navbar .nav-link.active::after,
.navbar .nav-link.show::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #00bfff;
  border-radius: 2px;
  opacity: .9;
}

/* Collapsed menu background only on mobile, not desktop */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #1f1f1f;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #2b2b2b;
    margin-top: 8px;
  }
  .navbar .nav-link { margin-left: 0; padding: .5rem 0; }
}

/* === Hero Section === */
.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #202020, #2c2c2c);
  border-radius: 10px;
  margin: 40px auto;
}

.hero h2 { font-size: 2.5rem; margin-bottom: 15px; }
.hero p  { font-size: 1.1rem; max-width: 700px; margin: 0 auto; color: #ccc; }

.call-button {
  display: inline-block; margin-top: 20px;
  background-color: #00bfff; color: #000;
  padding: 12px 24px; border-radius: 5px;
  text-decoration: none; font-weight: bold;
}
.call-button:hover { background-color: #00a7cc; }

/* === Services Page Styles === */
.service {
  border: 1px solid #333; padding: 20px; margin-bottom: 20px;
  border-radius: 8px; background-color: #1e1e1e;
}
.service h2 { font-size: 1.5em; color: #1e90ff; }
.service p.price { font-weight: bold; color: #76c7c0; }
.service .btn {
  margin-top: 10px; background-color: #1e90ff; color: white;
  border: none; padding: 10px 20px; cursor: pointer;
  font-size: 1em; border-radius: 5px; text-decoration: none; display: inline-block;
}
.service .btn:hover { background-color: #0066cc; }

.intro { text-align: center; margin-bottom: 40px; font-size: 1.2em; color: #ccc; }

/* === Forms === */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background-color: #2a2a2a; color: #fff;
  border: 1px solid #444; border-radius: 5px;
  padding: 10px; width: 100%; margin-bottom: 15px;
}
input::placeholder, textarea::placeholder { color: #999; }

/* === Buttons === */
.btn-primary {
  background-color: #00bfff; border-color: #00bfff; color: #000; font-weight: bold;
}
.btn-primary:hover { background-color: #00a7cc; border-color: #00a7cc; }
.btn-secondary { background-color: #444; border-color: #444; color: #fff; }
.btn-secondary:hover { background-color: #333; border-color: #333; }

/* === Headings === */
h1, h2, h3, h4 { color: #ffffff; }

/* === Footer === */
footer {
  background-color: #1a1a1a;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #888;
  margin-top: 60px;
}
footer a { color: #00bfff; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* === Contact Page Enhancements === */
.contact-info ul { padding-left: 20px; margin-top: 20px; list-style: none; }
.contact-info li { margin-bottom: 10px; font-size: 1rem; }
.contact-info a { color: #00bfff; text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }
.contact-info h2 { color: #00bfff; margin-bottom: 15px; }

/* === Mobile tweaks === */
@media (max-width: 768px) {
  form .mb-3 { margin-bottom: 1rem; }
  .contact-info li { font-size: 0.95rem; }
}

/* === Accessibility === */
button, a.btn, input[type="submit"] { outline: 2px solid transparent; outline-offset: 2px; }
button:focus, a.btn:focus, input[type="submit"]:focus { outline: 2px solid #00bfff; outline-offset: 2px; }