<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;section-frame overflow-hidden&quot;&gt;
  &lt;div class=&quot;wrapper bg-soft-primary&quot; style=&quot;border-radius: 1rem;&quot;&gt;
    &lt;div class=&quot;container py-17&quot;&gt;
      &lt;div class=&quot;row text-center&quot;&gt;
        &lt;div class=&quot;col-xl-11 col-xxl-10 mx-auto&quot;&gt;
          &lt;h2 class=&quot;fs-16 text-uppercase text-muted mb-3&quot;&gt;Company Facts&lt;/h2&gt;
          &lt;h3 class=&quot;display-4 mb-10 px-lg-20 px-xl-20&quot;&gt;Save your time and money by choosing our professional team.&lt;/h3&gt;
          &lt;div class=&quot;row gy-6 text-center&quot;&gt;
            &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
              &lt;div class=&quot;progressbar semi-circle purple&quot; data-value=&quot;75&quot;&gt;&lt;/div&gt;
              &lt;h4&gt;New Visitors&lt;/h4&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Maecenas faucibus mollis interdum. Aenean eu leo.&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /column --&gt;
            &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
              &lt;div class=&quot;progressbar semi-circle leaf&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
              &lt;h4&gt;Social Media&lt;/h4&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Maecenas faucibus mollis interdum. Aenean eu leo.&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /column --&gt;
            &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
              &lt;div class=&quot;progressbar semi-circle pink&quot; data-value=&quot;60&quot;&gt;&lt;/div&gt;
              &lt;h4&gt;Referrals&lt;/h4&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Maecenas faucibus mollis interdum. Aenean eu leo.&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /column --&gt;
            &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
              &lt;div class=&quot;progressbar semi-circle yellow&quot; data-value=&quot;90&quot;&gt;&lt;/div&gt;
              &lt;h4&gt;Search Engines&lt;/h4&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Maecenas faucibus mollis interdum. Aenean eu leo.&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /column --&gt;
          &lt;/div&gt;
          &lt;!-- /.row --&gt;
        &lt;/div&gt;
        &lt;!-- /column --&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
    &lt;/div&gt;
    &lt;!-- /.container --&gt;
  &lt;/div&gt;
  &lt;!-- /.wrapper --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>