/* ---------------- HERO-HEADER OF PLAYGROUND COMPONENTS ---------------- */
.hero {
  background: linear-gradient(135deg, #1d3557, #457b9d);
  color: #fff;
  text-align: center;
  padding: 0.5rem 0rem;
}

.hero h1 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0rem;
}

.hero p {
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}