/* =========================================================
   RAMOLE EYE HOSPITAL - EYE CARE THEME
   Calm clinical teal + deep navy + soft aqua.
   Loaded last to keep the visual system consistent site-wide.
   ========================================================= */
:root {
  --eye-primary: #0F8B8D;
  --eye-primary-dark: #0B6F71;
  --eye-secondary: #27B3B0;
  --eye-navy: #173F4F;
  --eye-soft: #E7F8F7;
  --eye-pale: #F5FBFB;
  --eye-border: #C7E7E6;
  --eye-text: #334E5C;
}

body { color: var(--eye-text); background: #fff; }

.header { border-bottom: 3px solid var(--eye-soft); }
.logo { color: var(--eye-navy) !important; }
.nav-menu a { color: var(--eye-primary-dark) !important; }
.nav-menu > a:hover,
.nav-menu > a::after { color: var(--eye-primary) !important; background: var(--eye-secondary) !important; }
.nav-menu .dropdown-content a:hover { color: var(--eye-primary-dark) !important; background: var(--eye-soft) !important; }
.mobile-menu-toggle { color: var(--eye-primary-dark) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--eye-navy); }
.section-title, .content-wrapper h2, .get-in-touch-form-container h3,
.location-section h2 { color: var(--eye-primary) !important; }

button, input[type="submit"], .appointment-button-top,
.read-more, .btn, .button, .cta-button {
  background: var(--eye-primary) !important;
  border-color: var(--eye-primary) !important;
}
button:hover, input[type="submit"]:hover, .appointment-button-top:hover,
.read-more:hover, .btn:hover, .button:hover, .cta-button:hover {
  background: var(--eye-primary-dark) !important;
}

a { color: var(--eye-primary-dark); }
a:hover { color: var(--eye-primary); }

.content-section, .contact-info-form-section, .location-section,
.gallery-section, .faq-section { background-color: var(--eye-pale) !important; }

.contact-info-box, .map-container, .card, .service-card,
.gallery-item, .faq-item, .team-card {
  border-color: var(--eye-border);
}

.contact-item i, .contact-item h4 { color: var(--eye-primary) !important; }
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--eye-primary) !important;
  box-shadow: 0 0 0 3px rgba(15,139,141,.12) !important;
  outline: none;
}

.header-section::before {
  background: linear-gradient(90deg, rgba(11,111,113,.78), rgba(39,179,176,.48)) !important;
}

.footer-wrapper .main-footer {
  background: linear-gradient(135deg, #123B4B 0%, #0B5F66 100%) !important;
}
.footer-link:hover { color: #7DE0DD !important; }
.footer-section-item h3 { color: #BFF3F1 !important; }

.branch-addresses { margin: 0; }
.branch-address { margin: 0 0 12px; line-height: 1.55; }
.branch-address:last-child { margin-bottom: 0; }
.branch-label {
  display: inline-block;
  margin-bottom: 4px;
  color: #BFF3F1;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.branch-address.primary-branch {
  background: rgba(39,179,176,.14);
  border-left: 3px solid #7DE0DD;
  padding: 9px 10px;
  border-radius: 4px;
}
.contact-branch-list { display: grid; gap: 14px; }
.contact-branch {
  background: var(--eye-soft);
  border: 1px solid var(--eye-border);
  border-radius: 10px;
  padding: 13px 15px;
}
.contact-branch.primary-branch { border-left: 5px solid var(--eye-primary); }
.contact-branch strong { color: var(--eye-primary-dark); display: block; margin-bottom: 4px; }