<div class="code-wrapper">
                  <div class="code-wrapper-inner">
                    <pre class="language-html"><code>&lt;section class=&quot;wrapper image-wrapper bg-image bg-overlay bg-overlay-400 bg-content text-white&quot; data-image-src=&quot;/assets/img/photos/bg4.jpg&quot;&gt;
  &lt;div class=&quot;container pt-18 pb-16&quot; style=&quot;z-index: 5; position:relative&quot;&gt;
    &lt;div class=&quot;row gx-0 gy-12 align-items-center&quot;&gt;
      &lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-6 content text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
        &lt;h1 class=&quot;display-2 mb-5 text-white&quot;&gt;Crafting project specific solutions with expertise.&lt;/h1&gt;
        &lt;p class=&quot;lead fs-lg lh-sm mb-7 pe-xl-10&quot;&gt;We&rsquo;re a creative company that focuses on establishing long-term relationships with customers.&lt;/p&gt;
        &lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
          &lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-white rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
          &lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-white rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-5 offset-lg-1&quot;&gt;
        &lt;div class=&quot;swiper-container dots-over shadow-lg&quot; data-margin=&quot;5&quot; data-nav=&quot;true&quot; data-dots=&quot;true&quot;&gt;
          &lt;div class=&quot;swiper&quot;&gt;
            &lt;div class=&quot;swiper-wrapper&quot;&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;/assets/img/photos/about21.jpg&quot; srcset=&quot;/assets/img/photos/about21@2x.jpg 2x&quot; class=&quot;rounded&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;&lt;a href=&quot;/assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-white btn-play ripple mx-auto mb-5 position-absolute&quot; style=&quot;top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;&quot; data-glightbox data-gallery=&quot;hero&quot;&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;img src=&quot;/assets/img/photos/about22.jpg&quot; srcset=&quot;/assets/img/photos/about22@2x.jpg 2x&quot; class=&quot;rounded&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;/assets/img/photos/about23.jpg&quot; srcset=&quot;/assets/img/photos/about23@2x.jpg 2x&quot; class=&quot;rounded&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-wrapper --&gt;
          &lt;/div&gt;
          &lt;!--/.swiper --&gt;
        &lt;/div&gt;
        &lt;!-- /.swiper-container --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>