/* ============================================================================
   SERVICE HERO COMPONENT — THEME 5: CYBER NEON HUD (FUTURISTIC DARK SPACE)
   Prefix: ebhro-serv20
   ============================================================================ */

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

:root {
  --ebhro-serv20-bg: linear-gradient(135deg, #050510 0%, #0a081d 50%, #120d26 100%);
  --ebhro-serv20-text-primary: #ffffff;
  --ebhro-serv20-text-secondary: #cbd5e1;
  --ebhro-serv20-text-muted: #94a3b8;

  --ebhro-serv20-primary: #00f2fe;
  --ebhro-serv20-primary-hover: #4facfe;
  --ebhro-serv20-primary-light: rgba(0, 242, 254, 0.12);

  --ebhro-serv20-accent-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 40%, #9d4edd 100%);
  --ebhro-serv20-gold-accent: #ff007f;

  --ebhro-serv20-radius-sm: 4px;
  --ebhro-serv20-radius-md: 8px;
  --ebhro-serv20-radius-lg: 12px;

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

/* Cyber Holographic HUD Badge */
.ebhro-serv20-badge {
  border-radius: 4px !important;
  background: rgba(0, 242, 254, 0.06) !important;
  border: 1px solid #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
  letter-spacing: 1px;
}

.ebhro-serv20-badge-pulse {
  background: #00f2fe !important;
  box-shadow: 0 0 15px #00f2fe !important;
}

/* Sci-Fi Neon Visor Frame Media Card */
.ebhro-serv20-media-card {
  border-radius: 8px !important;
  padding: 8px !important;
  background: rgba(10, 8, 29, 0.95) !important;
  border: 1px solid rgba(0, 242, 254, 0.5) !important;
  box-shadow: 0 0 35px rgba(0, 242, 254, 0.25) !important;
  position: relative;
}

.ebhro-serv20-media-card::before,
.ebhro-serv20-media-card::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #00f2fe;
  z-index: 10;
}
.ebhro-serv20-media-card::before { top: -4px; right: -4px; border-left: none; border-bottom: none; box-shadow: 2px -2px 10px #00f2fe; }
.ebhro-serv20-media-card::after { bottom: -4px; left: -4px; border-right: none; border-top: none; box-shadow: -2px 2px 10px #00f2fe; }

.ebhro-serv20-media-img-wrapper {
  border-radius: 4px !important;
  height: 400px !important;
}

.ebhro-serv20-float-card {
  border-radius: 4px !important;
  background: rgba(10, 8, 29, 0.95) !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.2) !important;
}

.ebhro-serv20-float-pill {
  border-radius: 4px !important;
  background: #ff007f !important;
  box-shadow: 0 0 25px rgba(255, 0, 127, 0.6) !important;
}

/* Cyber Neon Cards */
.ebhro-serv20-features-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

.ebhro-serv20-feat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  border-radius: 8px !important;
  background: rgba(10, 8, 29, 0.85) !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  border-right: 4px solid #00f2fe !important;
  padding: 26px 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.ebhro-serv20-feat-card:hover {
  border-color: #00f2fe !important;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.4) !important;
  transform: translateY(-4px) !important;
}

.ebhro-serv20-feat-icon-wrapper {
  border-radius: 4px !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(0, 242, 254, 0.12) !important;
  color: #00f2fe !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  margin-bottom: 16px !important;
}

.ebhro-serv20-feat-title {
  width: 100% !important;
  font-size: 1.2rem !important;
  margin-bottom: 10px !important;
}

.ebhro-serv20-feat-desc {
  width: 100% !important;
  font-size: 0.94rem !important;
  line-height: 1.65 !important;
}