<div class="code-wrapper">
                  <div class="code-wrapper-inner">
                    <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-gray&quot;&gt;
  &lt;div class=&quot;overflow-hidden&quot;&gt;
    &lt;div class=&quot;container-fluid px-xl-0 pt-6 pb-10&quot;&gt;
      &lt;div class=&quot;swiper-container&quot; data-margin=&quot;30&quot; data-dots=&quot;true&quot; data-nav=&quot;true&quot; data-centered=&quot;true&quot; data-loop=&quot;true&quot; data-items-xxl=&quot;2&quot; data-items-xl=&quot;2&quot; data-items-lg=&quot;2&quot; data-items-md=&quot;1&quot; data-items-xs=&quot;1&quot;&gt;
        &lt;div class=&quot;swiper overflow-visible&quot;&gt;
          &lt;div class=&quot;swiper-wrapper&quot;&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf1.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf1.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf2.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf2.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf3.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf3.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf4.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf4.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf5.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf5.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&gt;
            &lt;div class=&quot;swiper-slide&quot;&gt;
              &lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;/assets/img/photos/cf6.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;/assets/img/photos/cf6.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;/div&gt;
            &lt;!--/.swiper-slide --&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;!-- /.cotnainer --&gt;
  &lt;/div&gt;
  &lt;!-- /.overflow-hidden --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>