Gallery Grid

                    
                      <!-- Gallery Section -->
                      <div class="container">
                        <div class="row mx-n2">
                          <div class="col-6 col-md px-2 mb-3">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img17.jpg);"></div>
                          </div>
                          <div class="col-md-3 d-none d-md-block px-2 mb-3">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img6.jpg);"></div>
                          </div>
                          <div class="col-6 col-md px-2 mb-3">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img14.jpg);"></div>
                          </div>

                          <div class="w-100"></div>

                          <div class="col-6 col-md px-2 mb-3 mb-md-0">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img25.jpg);"></div>
                          </div>
                          <div class="col-md-4 d-none d-md-block px-2 mb-3 mb-md-0">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img16.jpg);"></div>
                          </div>
                          <div class="col-6 col-md px-2">
                            <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img12.jpg);"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Gallery Section -->
                    
                  

                    
                      <!-- Hero Section -->
                      <div class="position-relative">
                        <div class="container space-2 position-relative z-index-2">
                          <div class="row mx-n1 mx-sm-n2">
                            <div class="col-4 align-self-end px-1 px-sm-2 mb-2 mb-sm-3">
                              <div class="ml-md-8">
                                <img class="img-fluid rounded" src="../../assets/img/900x900/img1.jpg" alt="Image Description">
                              </div>
                            </div>
                            <div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
                              <!-- Video Block -->
                              <div id="youTubeVideoPlayer" class="video-player bg-dark d-none d-md-block rounded">
                                <img class="img-fluid video-player-preview rounded" src="../../assets/img/900x450/img14.jpg" alt="Image">

                                <!-- Play Button -->
                                <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                                   data-hs-video-player-options='{
                                     "videoId": "0qisGSwZym4",
                                     "parentSelector": "#youTubeVideoPlayer",
                                     "targetSelector": "#youTubeVideoIframe",
                                     "isAutoplay": true,
                                     "classMap": {
                                       "toggle": "video-player-played"
                                     }
                                   }'>
                                  <span class="video-player-icon">
                                    <i class="fas fa-play"></i>
                                  </span>
                                </a>
                                <!-- End Play Button -->

                                <!-- Video Iframe -->
                                <div class="embed-responsive embed-responsive-16by9 rounded">
                                  <div id="youTubeVideoIframe"></div>
                                </div>
                                <!-- End Video Iframe -->
                              </div>
                              <!-- End Video Block -->

                              <div class="d-md-none">
                                <img class="img-fluid rounded" src="../../assets/img/900x450/img14.jpg" alt="Image Description">
                              </div>
                            </div>
                            <div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
                              <img class="img-fluid rounded" src="../../assets/img/900x450/img13.jpg" alt="Image Description">
                            </div>
                            <div class="col-4 px-1 px-sm-2 mb-2 mb-sm-3">
                              <div class="mr-md-8">
                                <img class="img-fluid rounded" src="../../assets/img/750x750/img2.jpg" alt="Image Description">
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="position-absolute top-0 right-0 left-0 w-100 h-100 bg-img-hero mt-n11" style="background-image: url(../../assets/svg/components/abstract-shapes-12.svg);"></div>

                        <!-- SVG Shape -->
                        <figure class="position-absolute bottom-0 right-0 left-0 mb-11">
                          <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
                            <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
                          </svg>
                        </figure>
                        <!-- End SVG Shape -->
                      </div>
                      <!-- End Hero Section -->
                    
                  

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.fancybox.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of video player
                          $('.js-inline-video-player').each(function () {
                            var videoPlayer = new HSVideoPlayer($(this)).init();
                          });
                        });
                      </script>