.heading-image {
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  display:inline-block;
  margin-bottom: 60px;

  img {
    width: 100%;
    height: 500px;
    z-index: 10;

    @media (min-width: $breakpoint_lg) {
      height: auto;
    }
  }

  .icon {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 20;

    &.orange {
      background-color: $dark_orange;
    }

    .material-symbols {
      font-size: 3.125rem;
      color: $white;
    }

    @media (min-width: $breakpoint_lg) {
      bottom: 50px;
      right: 50px;
    }
  }

  @media (min-width: $breakpoint_lg) {
    border-radius: 100px;
  }
}

.heading-container {
  margin-bottom: 50px;

  h1 {
    padding-bottom: 20px;
  }
}

.illustration-wrapper {
  position: relative;
  min-height: 550px;
  z-index: 1;
  margin: -400px 0 50px 0;
  padding: 400px 0 100px;

  @media (max-width: $breakpoint_lg - 1) {
    .grid-layout {
      margin-top: 50px;
    }
  }

  .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;

    @media (min-width: $breakpoint_lg) {
      align-items: flex-start;
      text-align: inherit;
    }
  }

  .icon {
    width: 90px;
    height: 90px;
    border-radius: 90px;

    .material-symbols {
      font-size: 3.125rem;
      color: $white;
    }
  }

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: url('/static/svg/cms_plugins/wave.svg') repeat-x;
    background-size: cover;
    animation: wave-animation 10s linear infinite;
  }

  @keyframes wave-animation {
    from {
      background-position: 0 bottom;
    }
    to {
      background-position: -100vw bottom; /* Adjust to match SVG width */
    }
  }
}


.home-heading-wrapper {
  position: relative;
  margin: -400px 0 50px 0;
  padding: 400px 0 0 0;
  min-height: 550px;
  z-index: 1;
  
  .heading-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media (min-width: $breakpoint_lg) {
      text-align: inherit;
    }
  }
  
  .btn {
    margin: 40px 0 0 0;
  }

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: url('/static/svg/cms_plugins/wave.svg') repeat-x;
    background-size: cover;
    animation: wave-animation 10s linear infinite;
  }

  @keyframes wave-animation {
    from {
      background-position: 0 bottom;
    }
    to {
      background-position: -100vw bottom; /* Adjust to match SVG width */
    }
  }

  @media (min-width: $breakpoint_lg) {
    //height: 520px;
  }

}