/* ==========================================
   1. VARIABLES & ROOT
========================================== */
:root {
  --primary: #059669;        /* Deep Iris Green */
  --primary-light: #10b981;  /* Bright Iris Green */
  --bg-mint-light: #f0fdfa;
  --bg-gradient: linear-gradient(135deg, #f0fdfa 0%, #d1fae5 100%);
  --text-dark: #1e293b;      /* Refined Slate Dark */
  --text-muted: #64748b;     /* Refined Muted Gray */
  --border-light: #e2e8f0;   /* Top-bar style border */
}

/* ==========================================
   2. BASE STYLES
========================================== */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-mint-light);
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: var(--text-dark);
}

/* Strip all animations for 99% mobile users */
.animate-on-load, .img-hover-scale, .service-hover, .dep-card:hover, .service-card:hover {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ==========================================
   3. UNIFIED IMAGE SIZING
========================================== */
.card-header-img, .card-img-top {
  height: 220px !important;
  width: 100%;
  overflow: hidden;
  background: #e5e7eb;
}

.card-header-img img, .card-img-top {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================
   4. NAVIGATION
========================================== */
.navbar {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}

.nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
}

.nav-link:hover, .nav-link.active, .dropdown-item:hover {
    color: var(--primary) !important;
}

.dropdown-toggle.btn-outline-success {
  border: 2px solid var(--primary-light) !important;
  color: var(--primary) !important;
  background: transparent !important;
}

.dropdown-toggle.btn-outline-success:hover,
.dropdown-toggle.btn-outline-success.show,
.dropdown-toggle.btn-outline-success:active {
  background: linear-gradient(45deg, var(--primary), var(--primary-light)) !important;
  color: white !important;
  border-color: transparent !important;
}

/* ==========================================
   5. TOP CONTACT BAR & NEW DESIGN UTILITIES
========================================== */
.top-bar {
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border-light);
}

/* Small labels (e.g., OPHTHALMOLOGY) */
.text-muted-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* === MODIFIED: Phone numbers layout on top-bar === */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.contact-item .text-muted-label {
  margin-bottom: 1px;
}

.contact-link-clean {
  text-decoration: none;
  font-weight: 700;
  color: var(--text-dark);
  transition: color 0.2s ease;
  font-size: 0.85rem;           /* 35% smaller than default ~1.3rem */
}

.contact-link-clean:hover {
  color: var(--primary);
}

/* Standard Phone Icons in Blue/Primary */
.text-primary {
  color: #3b82f6 !important; /* Standard medical blue for icons to match header */
}

/* ==========================================
   6. BUTTONS (Glow-btn stays original green)
========================================== */
.glow-btn, .btn-success {
  background: linear-gradient(45deg, var(--primary-light), var(--primary)) !important;
  border: none !important;
  border-radius: 50px;
  color: white !important;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glow-btn:hover, .btn-success:hover {
  background: linear-gradient(45deg, var(--primary), var(--primary-light)) !important;
  color: white !important;
  transform: translateY(-1px);
}

/* ==========================================
   7. FOOTER & SERVICES
========================================== */
.footer-section {
  background: var(--bg-gradient) !important;
  padding: 50px 0 20px;
  border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.footer-links a, .nav-item.mx-3 a {
  color: var(--text-dark) !important;
  text-decoration: none;
}

.footer-links a:hover, .nav-item.mx-3 a:hover {
  color: var(--primary) !important;
}

/* ==========================================
   8. MOBILE SCALING
========================================== */
@media (max-width: 768px) {
  .hero-section .btn-lg {
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    width: auto !important;
  }

  h1.display-3, h1.display-4 { font-size: 1.8rem !important; }
  .navbar-brand img { height: 35px; }

  .contact-box {
    margin-bottom: 1.5rem;
  }
}

/* ==========================================
   9. MISC & UTILITIES
========================================== */
.back-to-top-futuristic {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--bg-mint-light) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.d-contents { display: contents; }

/* ==========================================
   10. PRINT OPTIMIZATION
========================================== */
@media print {
    nav, .navbar, .top-bar, .back-to-top-futuristic, footer, .btn {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}
/* ==========================================
   11. MISSION & VISION SECTION
========================================== */
.mission-card .card-body p,
.vision-card .card-body p {
    font-size: 0.95rem !important; /* 35% smaller than the 1.3rem default of fs-5 */
    line-height: 1.6;
}