.hero-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 80px; /* space below the image */
  }

  .hero-banner img.hero-image {
    width: 100%;
    height: auto; /* keeps full resolution visible */
    object-fit: contain; /* shows full image */
    border-radius: 8px;
  }

  /* Give space between banner and Table of Contents */
  #toc {
    margin-top: 80px !important;
  }

  /* Optional: general section spacing */
  section {
    margin-top: 60px;
  }

  @media (max-width: 768px) {
    .hero-banner {
      margin-bottom: 60px;
    }
    #toc {
      margin-top: 60px !important;
    }
  }