<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
  &lt;div class=&quot;container py-14 py-md-16&quot;&gt;
    &lt;div class=&quot;row gx-md-8 gy-10 align-items-center&quot;&gt;
      &lt;div class=&quot;col-lg-6 offset-lg-1 order-lg-2 position-relative&quot;&gt;
        &lt;figure class=&quot;rounded&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;/assets/img/photos/about27.jpg&quot; srcset=&quot;/assets/img/photos/about27@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
        &lt;div class=&quot;card shadow-lg position-absolute d-none d-md-block&quot; style=&quot;top: 15%; left: -7%&quot;&gt;
          &lt;div class=&quot;card-body py-4 px-5&quot;&gt;
            &lt;div class=&quot;d-flex flex-row align-items-center&quot;&gt;
              &lt;div&gt;
                &lt;img src=&quot;/assets/img/icons/solid/cloud-group.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3&quot; alt=&quot;&quot; /&gt;
                
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h3 class=&quot;fs-25 counter mb-0 text-nowrap&quot;&gt;25000+&lt;/h3&gt;
                &lt;p class=&quot;fs-16 lh-sm mb-0 text-nowrap&quot;&gt;Happy Clients&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
        &lt;div class=&quot;card shadow-lg position-absolute text-center d-none d-md-block&quot; style=&quot;bottom: 10%; left: -10%;&quot;&gt;
          &lt;div class=&quot;card-body p-6&quot;&gt;
            &lt;div class=&quot;progressbar semi-circle fuchsia mb-3&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
            &lt;h4 class=&quot;mb-0&quot;&gt;Time Saved&lt;/h4&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-5&quot;&gt;
        &lt;h2 class=&quot;fs-16 text-uppercase text-gradient gradient-1 mb-3&quot;&gt;What Makes Us Different?&lt;/h2&gt;
        &lt;h3 class=&quot;display-4 mb-4 me-lg-n5&quot;&gt;We make spending stress free so you have the perfect control.&lt;/h3&gt;
        &lt;p class=&quot;mb-6&quot;&gt;Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus. Integer posuere erat a ante venenatis dapibus posuere velit.&lt;/p&gt;
        &lt;ul class=&quot;icon-list bullet-bg bullet-soft-primary&quot;&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Aenean eu leo quam. Pellentesque ornare.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Nullam quis risus eget urna mollis ornare.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Donec id elit non mi porta gravida at eget.&lt;/li&gt;
        &lt;/ul&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>