:root {
  --hero-overlay: radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 38%);
}

.hero-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
}

.bg-cta-hero {
  background: linear-gradient(180deg, rgba(9, 133, 178, 0.88), rgba(0, 87, 124, 0.92)),
    url('../images/contact-cta-bg.webp') center/cover no-repeat;
}

.icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(9, 133, 178, 0.12);
  border: 1px solid rgba(9, 133, 178, 0.2);
  display: grid;
  place-items: center;
}

.hero-section .hero-grid {
  position: relative;
  z-index: 1;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-section {
    background-position: center top;
  }
}

/* About Hero Section */
.about-hero {
  background: linear-gradient(135deg, #0985B2 0%, #00D700 100%);
  background-image: linear-gradient(135deg, rgba(9, 133, 178, 0.9) 0%, rgba(0, 215, 0, 0.1) 100%),
    url('../images/hereo-bg.webp') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 40%);
  pointer-events: none;
}

.about-hero h1,
.about-hero p {
  position: relative;
  z-index: 1;
}