/* ===== HERO BANNER===== */

.banner_hero {
  margin-top: 10rem;

  margin-bottom: 5rem;

  text-align: center;

  padding: 5rem 2rem;

  border-radius: 32px;

  background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%);

  border: 1px solid #dfe8ff;

  position: relative;

  overflow: hidden;
}

/* decorative glow */

.banner_hero::before {
  content: "";

  position: absolute;

  width: 350px;

  height: 350px;

  background: rgba(30, 90, 250, 0.08);

  border-radius: 50%;

  top: -120px;

  left: -120px;
}

.banner_hero::after {
  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  background: rgba(30, 90, 250, 0.06);

  border-radius: 50%;

  bottom: -120px;

  right: -120px;
}

/* heading */

.banner_hero h1 {
  font-size: 4.5rem;

  line-height: 1.1;

  margin-bottom: 1.5rem;

  color: var(--color-black);

  position: relative;

  z-index: 2;
}

/* subtitle */

.banner_hero p {
  font-size: 1.3rem;

  line-height: 1.8;

  color: #666;

  max-width: 700px;

  margin: 0 auto;

  position: relative;

  z-index: 2;
}

/* ===== TABLET ===== */

@media screen and (max-width: 1024px) {
  .banner_hero {
    padding: 4rem 2rem;
  }

  .banner_hero h1 {
    font-size: 3.4rem;
  }

  .banner_hero p {
    font-size: 1.1rem;
  }
}

/* ===== MOBILE ===== */

@media screen and (max-width: 600px) {
  .banner_hero {
    margin-top: 8rem;

    margin-bottom: 4rem;

    padding: 3rem 1.5rem;

    border-radius: 24px;
  }

  .banner_hero h1 {
    font-size: 2.4rem;

    margin-bottom: 1rem;
  }

  .banner_hero p {
    font-size: 1rem;

    line-height: 1.7;
  }
}