Position the arrow at the bottom of the full-height container before the fold?

Question

How can I position the arrow at the bottom of the container? I'm using Bootstrap-5 and just can't figure out all the position attributes for the life of it. It just sticks with the other text so far. I have tried a variety of things, but some guidance how to go about this would be great.

Thanks for taking the time to help a beginner. :)

.hero {
    position: relative;
    overflow: hidden;
  }
  
  @media screen and (min-width: 992px) {
    .hero {
      height: 100vh;
    }
  
    .custom-video,
    .news-detail-image {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
    }
  
    .sticky-wrapper {
      position: relative;
      bottom: 76px;
    }
  }
  
  .heroText {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    text-align: center;
  }

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    z-index: -100;
  }
  
  .custom-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <section class="hero" id="hero">
      <div class="heroText container">

       
        <h1 class=" text-white">TITLE OF MY PAGE</h1>
        <h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
        <a href="#events" class="mx-auto text-center position-absolute bottom-0 mb-2 hidden-phone"><i class="bi bi-arrow-down-short"></i></a>
      </div>

      <div class="videoWrapper">
        <img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
      </div>
      <div class="overlay"></div>
    </section>