/* === Global Colors === */
:root {
  --primary: #0BA0A8;
  --primary-dark: #067A81;
  --text-dark: #333;
  --white: #fff;
  --light-bg: #F3FAFA;
}

/* === Base === */
body {
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
  color: var(--text-dark);
}

/* === Navbar === */
.navbar {
  background: var(--white) !important;
  transition: 0.3s ease;
}

.navbar-brand,
.nav-link {
  color: var(--primary-dark) !important;
  font-weight: 600;
}

.navbar.scrolled {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* === Hero Carousel === */
#heroCarousel img {
  height: 100vh;
  object-fit: cover;
}

/* === Buttons === */
.btn-primary,
.btn-light {
  background: var(--primary);
  border: none;
  color: var(--white);
}

.btn-primary:hover,
.btn-light:hover {
  background: var(--primary-dark);
}

/* === Headings === */
h2, h4 {
  color: var(--primary-dark);
}

/* === Cards === */
.card {
  border: none;
  transition: 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);
}

.card h5 {
  color: var(--primary-dark);
}

/* === Testimonials === */
.carousel-item p {
  color: var(--primary-dark);
}

/* === FAQ === */
.accordion-button:not(.collapsed) {
  background: #d8f5f6;
  color: var(--primary-dark);
}

/* === Book Appointment === */
#book {
  background: var(--primary);
  color: var(--white);
}

/* === Contact === */
#contact a {
  text-decoration: none;
}

/* === Footer === */
footer {
  background: var(--primary-dark);
  color: var(--white);
}

/* === Mobile === */
@media (max-width: 768px) {
  .hero .display-4 {
    font-size: 2rem;
  }
}