/* ============================================================================
   SERVICE HERO COMPONENT — THEME 0: ITQAN BLUE DARK LUXURY
   Prefix: ebhro-serv20
   ============================================================================ */

@import url('./hero-serv1.css');

:root {
  /* ===== COLORS ===== */
  --ebhro-serv20-bg: linear-gradient(180deg, #050c1a 0%, #0a1628 50%, #050c1a 100%);
  --ebhro-serv20-text-primary: #ffffff;
  --ebhro-serv20-text-secondary: #94a3b8;
  --ebhro-serv20-text-muted: #64748b;

  --ebhro-serv20-primary: #4fc3f7;
  --ebhro-serv20-primary-hover: #0288d1;
  --ebhro-serv20-primary-light: rgba(79, 195, 247, 0.1);
  --ebhro-serv20-primary-border: rgba(79, 195, 247, 0.3);

  --ebhro-serv20-accent-gradient: linear-gradient(135deg, #4fc3f7 0%, #0288d1 50%, #d4af37 100%);
  --ebhro-serv20-gold-accent: #f59e0b;

  --ebhro-serv20-card-bg: rgba(14, 30, 56, 0.9);
  --ebhro-serv20-card-border: rgba(79, 195, 247, 0.2);
  --ebhro-serv20-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  --ebhro-serv20-orb-1: rgba(79, 195, 247, 0.15);
  --ebhro-serv20-orb-2: rgba(2, 136, 209, 0.12);
  --ebhro-serv20-orb-3: rgba(212, 175, 55, 0.08);

  --ebhro-serv20-media-card-bg: rgba(14, 30, 56, 0.85);
  --ebhro-serv20-media-border: 1px solid rgba(79, 195, 247, 0.25);
  --ebhro-serv20-media-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);

  --ebhro-serv20-float-card-bg: rgba(10, 25, 48, 0.95);
  --ebhro-serv20-float-card-border: 1px solid rgba(79, 195, 247, 0.3);
  --ebhro-serv20-float-card-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

  --ebhro-serv20-pill-bg: rgba(10, 25, 48, 0.95);
  --ebhro-serv20-pill-border: 1px solid rgba(245, 158, 11, 0.4);

  --ebhro-serv20-feat-bg: linear-gradient(145deg, rgba(14, 30, 56, 0.9) 0%, rgba(6, 18, 36, 0.96) 100%);
  --ebhro-serv20-feat-border: 1px solid rgba(79, 195, 247, 0.18);
  --ebhro-serv20-feat-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --ebhro-serv20-feat-hover-border: #4fc3f7;
  --ebhro-serv20-feat-hover-shadow: 0 15px 35px rgba(79, 195, 247, 0.2);

  --ebhro-serv20-font-family: 'Tajawal', 'Cairo', sans-serif;
}

.ebhro-serv20-hero {
  background: var(--ebhro-serv20-bg);
  position: relative;
  overflow: hidden;
}

.ebhro-serv20-title {
  color: #ffffff !important;
}

.ebhro-serv20-title-highlight {
  color: #f59e0b !important;
  background: linear-gradient(135deg, #f59e0b 0%, #4fc3f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ebhro-serv20-desc {
  color: #94a3b8 !important;
}

.ebhro-serv20-hl-item {
  color: #f1f5f9 !important;
}

.ebhro-serv20-hl-icon {
  color: #4fc3f7 !important;
}

.ebhro-serv20-badge {
  background: rgba(79, 195, 247, 0.12) !important;
  border: 1px solid rgba(79, 195, 247, 0.3) !important;
  color: #4fc3f7 !important;
}

.ebhro-serv20-fc-title {
  color: #f59e0b !important;
}

.ebhro-serv20-fc-subtitle {
  color: #94a3b8 !important;
}

.ebhro-serv20-float-pill {
  background: rgba(10, 25, 48, 0.95) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.ebhro-serv20-float-pill span {
  color: #ffffff !important;
}

.ebhro-serv20-float-pill i {
  color: #f59e0b !important;
}

.ebhro-serv20-feat-title {
  color: #4fc3f7 !important;
}

.ebhro-serv20-feat-desc {
  color: #94a3b8 !important;
}

.ebhro-serv20-sec-title {
  color: #ffffff !important;
}

.ebhro-serv20-sec-sub {
  color: #f59e0b !important;
}

.ebhro-serv20-btn-primary {
  background: linear-gradient(135deg, #4fc3f7 0%, #0288d1 100%) !important;
  color: #050c1a !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(79, 195, 247, 0.35) !important;
}

.ebhro-serv20-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(79, 195, 247, 0.5) !important;
}

.ebhro-serv20-anim-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}