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.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.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;
  }
}