/** Common Css**/



/* 1. Base Styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  background: #f8f9fa;
  color: #222;
}

@media (max-width: 991.98px) {
  html, body {
    font-size: 17px;
  }
}
@media (max-width: 767.98px) {
  html, body {
    font-size: 16px;
  }
}
@media (max-width: 575.98px) {
  html, body {
    font-size: 17px; /* Slightly larger for mobile readability */
  }
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6,
.navbar-nav .nav-link {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #222;
}
p, ul, li, a, span, label {
  font-size: 1rem;
  line-height: 1.6;
}

/* 3. Links */
a {
  color: #1976d2; /* Dark blue, good contrast */
  text-decoration: none;
  transition: color 0.2s;
}
a:hover, a:focus {
  color: #1565c0;
  text-decoration: underline;
}

/* 4. Custom Buttons */
/* Primary buttons and accents: blue */
.btn-primary {
  background: #1976d2;
  color: #fff;
  border: none;
}
.btn-primary:hover, .btn-primary:focus {
  background: #1565c0;
  color: #fff;
}
.btn-outline-primary {
  border: 1.5px solid #1976d2;
  color: #1976d2;
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: #1976d2;
  color: #fff;
}

/* Warning buttons and accents: green */
.btn-warning {
  background: #ffc107;
  color: #222;
}
.btn-warning:hover, .btn-warning:focus {
  background: #ff9800;
  color: #fff;
}
footer .btn-warning {
  color: #fff;
  background-color: #43a047;
  border: none;
}
footer .btn-warning:hover, footer .btn-warning:focus {
  background-color: #388e3c;
  color: #fff;
}
.btn-success {
  background: #388e3c;
  color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background: #388e3c;
  color: #fff;
}

/* 5. Navbar Customization */
.navbar-brand img {
  max-height: 48px;
}
.nav-link.active, .nav-link:focus {
  color: #ff9800 !important;
  font-weight: 700;
}

/* Bold the navbar items */
.navbar-nav .nav-link {
  font-weight: 700;
}

/* 6. Offer Section */
/* Offer section background: blue to green gradient */
.offer-section {
  background: linear-gradient(135deg, #1976d2 0%, #43a047 100%);
}
.offer-section .bg-dark {
  background-color: #222 !important;
  opacity: 0.92;
}
.offer-section .text-white {
  color: #fff !important;
}
@media (max-width: 575.98px) {
  .offer-section ul.list-unstyled {
    padding-left: 0.5rem;
  }
  .offer-section ul.list-unstyled li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  .offer-section ul.list-unstyled li i {
    min-width: 1.2em;
    margin-top: 0.15em;
  }
}

/* 7. Map Styles */
#serviceAreaMap,
#contactMap {
  width: 100%;
  min-height: 340px;
  height: 400px;
  max-height: 500px;
  border-radius: 0.5rem;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media (max-width: 991.98px) {
  #serviceAreaMap,
  #contactMap {
    min-height: 240px;
    height: 300px;
    max-height: 340px;
  }
}
@media (max-width: 575.98px) {
  #serviceAreaMap,
  #contactMap {
    min-height: 180px;
    height: 220px;
    max-height: 260px;
  }
}*/

/* 8. Forms */
input,
textarea {
  border: 1px solid #222 !important;
  border-radius: 0.25rem;
  background: #fff;
  outline: none;
}
input:focus,
textarea:focus {
  border: 1.5px solid #ff9800 !important;
  box-shadow: none;
}

/* 9. Footer */
footer {
  background: #222;
  color: #fff;
  font-size: 1rem;
}
footer a.text-white {
  color: #fff !important;
}
footer a.text-white:hover,
footer a.text-white.text-decoration-underline:hover {
  color: #ffd54f !important;
  text-decoration: underline !important;
}
footer .btn-warning {
  color: #fff;
  background-color: #43a047;
  border: none;
}
footer .btn-warning:hover, footer .btn-warning:focus {
  background-color: #388e3c;
  color: #fff;
}
footer .small, footer p.small {
  font-size: 1rem;
}

/* 10. Misc Utilities */
.text-primary {
  color: #1976d2 !important;
}
.text-success {
  color: #43a047 !important;
}
.text-warning {
  color: #43a047 !important;
}
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.rounded {
  border-radius: 0.5rem !important;
}

/* 11. Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* Ensure card images are equal in size and aspect ratio */
.card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.bg-light, .bg-light p, .bg-light h1, .bg-light h2, .bg-light a {
  color: #222 !important;
}