What's your next destination?

              
                <!-- Hero -->
                <div class="bg-primary-dark position-relative pt-3 pt-md-0">
                  <div class="container">
                    <div class="d-none d-md-block col-md-6 position-absolute top-0 end-0 bg-img-center h-100" style="background-image: url(../assets/img/900x700/img6.jpg);"></div>
                    <div class="d-md-none mb-5 mb-md-0">
                      <img class="img-fluid" src="../assets/img/900x700/img2.jpg" alt="Image Description">
                    </div>

                    <div class="row align-items-lg-center content-space-b-1 content-space-md-3">
                      <div class="col-md-8 col-lg-6">
                        <!-- Heading -->
                        <div class="pe-lg-3 mb-7">
                          <p class="lead text-white">56 roles in 17 locations</p>
                          <h1 class="display-4 text-white">What's your next <span class="text-warning">destination?</span></h1>
                        </div>
                        <!-- End Heading -->

                        <a class="btn btn-primary" href="#openingPositions">Explore roles <i class="bi-chevron-right small ms-1"></i></a>
                      </div>
                      <!-- End Col -->

                      <div class="col-md-4 align-self-md-end position-relative z-1">
                        <div class="d-none d-md-block transform-0" style="margin-bottom: -12rem; margin-left: -5rem; margin-right: 10rem;">
                          <img class="img-fluid" src="../assets/img/600x600/img1.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Hero -->