/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

:root {
  --c-green-deep:   #1A4D2E;
  --c-green-mid:    #2E7D52;
  --c-green-fresh:  #4CAF78;
  --c-green-light:  #D6EFE1;
  --c-cream:        #F9F6F0;
  --c-white:        #FFFFFF;
  --c-text-dark:    #111C16;
  --c-text-muted:   #5A7060;
}

.hero-clinic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-cream);
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  min-height: 80vh;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 40px;
}

.hero-clinic-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.clinic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-green-light);
  color: var(--c-green-deep);
  font-size: 14px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 24px;
}

.clinic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green-fresh);
}

.clinic-title {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-text-dark);
  margin-bottom: 16px;
}

.clinic-title em {
  font-style: normal;
  color: var(--c-green-mid);
}

.clinic-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin-bottom: 32px;
  max-width: 480px;
}

.btn-clinic-primary {
  background: var(--c-green-deep);
  color: var(--c-white) !important;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 20px rgba(26,77,46,.2);
  transition: 0.3s ease;
}

.btn-clinic-primary:hover {
  transform: translateY(-2px);
  background: var(--c-green-mid);
}

.clinic-stats {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 24px;
}

.clinic-stat-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--c-green-deep);
}

.clinic-stat-label {
  font-size: 13px;
  color: var(--c-text-muted);
}

.hero-clinic-visual {
  position: relative;
  background: linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green-mid) 100%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 380px;
}

.clinic-central-emoji {
  font-size: 90px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.2));
  z-index: 2;
}

.clinic-card {
  position: absolute;
  background: rgba(255,255,255,.96);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,.12);
  z-index: 3;
  font-family: 'Cairo', sans-serif;
}

.card-clinic-top {
  top: 40px; right: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.clinic-card-icon { font-size: 24px; }
.clinic-card-info strong { display: block; font-size: 13px; color: var(--c-text-dark); }
.clinic-card-info span { font-size: 11px; color: var(--c-green-mid); }

.card-clinic-bottom {
  bottom: 40px; left: 30px;
  width: 240px;
}
.card-clinic-bottom p { font-size: 12px; font-weight: 700; margin-bottom: 10px; }

.clinic-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.clinic-progress-label { font-size: 11px; width: 80px; color: var(--c-text-dark); }
.clinic-progress-bar-wrap {
  flex: 1; height: 6px; background: var(--c-green-light); border-radius: 3px; overflow: hidden;
}
.clinic-progress-bar { height: 100%; background: var(--c-green-fresh); }
.clinic-progress-pct { font-size: 11px; font-weight: 700; color: var(--c-green-deep); }

/* SERVICES */
.clinic-services {
  padding: 60px 20px;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
}
.clinic-section-label { color: var(--c-green-mid); font-weight: 700; font-size: 14px; margin-bottom: 8px;}
.clinic-section-title { font-size: 28px; font-weight: 900; color: var(--c-text-dark); margin-bottom: 8px; }
.clinic-section-sub { color: var(--c-text-muted); font-size: 15px; margin-bottom: 40px; }

.clinic-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.clinic-service-card {
  background: var(--c-cream);
  padding: 24px;
  border-radius: 16px;
  transition: 0.3s;
}
.clinic-service-card:hover { transform: translateY(-5px); }
.clinic-featured { background: var(--c-green-deep); color: var(--c-white); }
.clinic-service-icon { font-size: 32px; margin-bottom: 16px; }
.clinic-service-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.clinic-service-card p { font-size: 13px; line-height: 1.5; opacity: 0.9; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-clinic { grid-template-columns: 1fr; padding: 20px; }
  .hero-clinic-visual { min-height: 28px; margin-top: 20px; padding: 40px 0; }
  .card-clinic-top { top: 15px; right: 15px; }
  .card-clinic-bottom { bottom: 15px; left: 15px; width: 200px; }
  .clinic-title { font-size: 32px; }
}