/* Homepage Clean & Prominent Tiles */

/* 1. Category headers */
h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  margin-top: 1rem !important;
  margin-bottom: 0.85rem !important;
}

/* 2. Service Cards - Bigger, taller, glassmorphic */
a.group,
div.service-card {
  min-height: 110px;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 3. Hover Effect */
a.group:hover {
  transform: translateY(-4px) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.3) !important;
}

/* 4. Large Icons */
a.group img,
a.group svg {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

/* 5. Big, Clear, Bright Status Badges */
span[class*="badge"],
div[class*="badge"],
span[class*="bg-emerald"],
span[class*="bg-green"] {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 8px !important;
  background-color: rgba(16, 185, 129, 0.35) !important;
  color: #4ade80 !important;
  border: 1.5px solid #22c55e !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.45) !important;
}