.hero-section {
      position: relative;
      width: 100%;
      height: auto;
      /* background: url('/mnt/data/0c1e6888-b347-48a5-944e-c377c56a2cc6.png') no-repeat center center/cover; */
      display: flex;
      align-items: center;
	  justify-content:center;
      padding: 1rem;
    }

    .overlay-card {
      background: rgba(0, 0, 0, 0.6);
      padding: 1rem;
      border-radius: 10px;
      max-width: 580px;
	  height:210px;
      color: #fff;
	  margin:30px;
    }

    .overlay-card h1 {
	  font-family: Century Gothic;
      font-size: 2rem;
      margin-bottom: 1rem;
	  font-weight:normal;
	  text-align:left;
	  padding-left: 0.5rem;
    }

    .overlay-card h2 {
	  font-family: Century Gothic;
      font-size: 1.1rem;
      font-weight: normal;
      margin-bottom: 1rem;
    }

    .overlay-card h3 {
	font-family: Century Gothic;
      font-size: 1rem;
      font-weight: normal;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
    }

    .play-icon {
      display: inline-flex;
      width: 50px;
      height: 50px;
      /* background: #444; */
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.5rem;
    }

 @media (max-width: 768px) {
  .hero-section {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* start from top, not centered */
    align-items: center;           /* horizontal centering */
    position: relative;
    height: 100vh;                 /* full viewport height */
  }

  .overlay-card {
    height: auto;
    margin: 20vh auto 0 auto;      /* push card down 20% of viewport */
    padding: 0.75rem;
    max-width: 90%;
    text-align: center;
  }

  .overlay-card h1 {
    font-size: 2rem;
  }

  .overlay-card h2 {
    font-size: 1.25rem;
  }

  .overlay-card h3 {
    font-size: 0.9rem;
  }

  .play-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}