<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&quot;&gt;
    &lt;div class=&quot;card bg-soft-primary rounded-4 mt-2 mb-13 mb-md-17&quot;&gt;
      &lt;div class=&quot;card-body p-md-10 py-xl-11 px-xl-15&quot;&gt;
        &lt;div class=&quot;row gx-lg-8 gx-xl-0 gy-10 align-items-center&quot;&gt;
          &lt;div class=&quot;col-lg-6 order-lg-2 d-flex position-relative&quot;&gt;
            &lt;img class=&quot;img-fluid ms-auto mx-auto me-lg-8&quot; src=&quot;/assets/img/photos/co3.png&quot; srcset=&quot;/assets/img/photos/co3@2x.png 2x&quot; alt=&quot;&quot; data-cue=&quot;fadeIn&quot;&gt;
            &lt;div data-cue=&quot;slideInRight&quot; data-delay=&quot;300&quot;&gt;
              &lt;div class=&quot;card shadow-lg position-absolute&quot; style=&quot;bottom: 10%; right: -3%;&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;div class=&quot;icon btn btn-circle btn-md btn-soft-primary pe-none mx-auto me-3&quot;&gt; &lt;i class=&quot;uil uil-users-alt&quot;&gt;&lt;/i&gt; &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;h3 class=&quot;counter mb-0 text-nowrap&quot;&gt;25000+&lt;/h3&gt;
                      &lt;p class=&quot;fs-14 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&gt;
            &lt;!--/div --&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-lg-6 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&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&apos;re a 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-primary 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-primary rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
        &lt;/div&gt;
        &lt;!--/.row --&gt;
      &lt;/div&gt;
      &lt;!--/.card-body --&gt;
    &lt;/div&gt;
    &lt;!--/.card --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>