body.page-volunteer .page-hero {
  background-color: #1b4931;
  background-image:
    linear-gradient(135deg, rgba(8, 27, 17, 0.2), rgba(183, 238, 164, 0.08)),
    url("../images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.page-volunteer .spotlight-card {
  background:
    linear-gradient(145deg, rgba(10, 30, 76, 0.65), rgba(37, 99, 235, 0.58)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.page-volunteer .benefit-card,
.page-volunteer .step-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(244, 250, 245, 0.95)
  );
}

.page-volunteer .form-shell {
  background:
    radial-gradient(circle at top right, rgba(77, 159, 91, 0.08), transparent 24%),
    rgba(255, 255, 255, 0.97);
}

@media (max-width: 40rem) {
  .page-volunteer .benefit-card,
  .page-volunteer .step-card {
    padding: 1.05rem;
    border-radius: 1.1rem;
  }

  .page-volunteer .step-card strong {
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.7rem;
  }

  .page-volunteer .form-shell {
    padding: 1.1rem;
    border-radius: 1.2rem;
  }
}