.hero {
  display: flex;
  position: relative;
  position: relative;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
      rgba(125, 179, 198, 0.85),
      rgba(84, 164, 188, 0.85)
    ),
    url("https://mcybqxqlujczgclidnar.supabase.co/storage/v1/object/public/ajpd-storage/background.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  padding: 2rem;
  min-height: 80vh;
  overflow: hidden;
  color: white;
  text-align: center;
}
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll !important;
  }
}