body {
  font-family: 'Poppins', sans-serif;
  color: #333;
}

.topbar {
  background-color: #007bff;
  font-size: 0.9rem;
}

.hero {
  background: linear-gradient(rgba(0, 61, 102, 0.5), rgba(0, 61, 102, 0.5)), 
              url('/SampleSites/Clinic/img/clinic1.jpg') center/cover no-repeat; /* Original url: img/clinic1.jpg */
  min-height: 80vh;
}

.hero h1, .hero p {
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.info-card, .service-card, .doctor-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover, .service-card:hover, .doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.footer {
  background-color: #0A2342;
}

#appointment {
  background-color: #f8f9fa;
}

#appointment h2 {
  font-size: 2rem;
}

#appointment form {
  border-left: 5px solid #007bff;
}

.contact-info {
  border-left: 5px solid #ffffff;
  line-height: 1.8;
}

.contact-info ul li i {
  color: #fff;
}

.required {
    color: #a63b23;
}

.valid {
    color: green;
}