.hero {
    position: relative;
    min-height: 640px;
    height: min(100vh, 780px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
      linear-gradient(to bottom, rgba(13, 42, 64, 0.50) 0%, rgba(13, 42, 64, 0.40) 46%, rgba(24, 53, 32, 0.55) 100%),
 
      url("../../assets/images/landscape/20260309 - drone lahaina.00_09_16_05.Still002.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 2rem 7.5rem;
    overflow: hidden;
  }

  .listen-button:hover {
    transform: translateY(-2px);
    background: #117a96;
  }