<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;container py-14 py-md-16&quot;&gt;
    &lt;div class=&quot;row text-center&quot;&gt;
      &lt;div class=&quot;col-md-10 col-lg-9 col-xxl-7 mx-auto mb-12&quot;&gt;
        &lt;h2 class=&quot;fs-16 text-uppercase text-muted mb-3&quot;&gt;Our Services&lt;/h2&gt;
        &lt;h3 class=&quot;display-2 ls-sm px-xxl-8&quot;&gt;The service we offer is &lt;span class=&quot;underline-3 style-1 primary&quot;&gt;&lt;em&gt;designed&lt;/em&gt;&lt;/span&gt; to meet your business needs.&lt;/h3&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
    &lt;div class=&quot;row gy-10 align-items-center mb-15 mb-md-17&quot;&gt;
      &lt;div class=&quot;col-lg-7&quot;&gt;
        &lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;/assets/img/illustrations/i29.png&quot; srcset=&quot;/assets/img/illustrations/i29@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-4 ms-auto&quot;&gt;
        &lt;div class=&quot;svg-bg bg-pale-primary rounded mb-5&quot;&gt; &lt;img src=&quot;/assets/img/icons/solid/like.svg&quot; class=&quot;svg-inject icon-svg solid text-primary&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;
        &lt;h3 class=&quot;h1 post-title ls-sm mb-3&quot;&gt;Social Media Marketing&lt;/h3&gt;
        &lt;p&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus.&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;Fusce dapibus, tellus ac cursus commodo.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;a href=&quot;#&quot; class=&quot;more hover link-primary&quot;&gt;Learn More&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
    &lt;div class=&quot;row gy-10 align-items-center&quot;&gt;
      &lt;div class=&quot;col-lg-7 order-lg-2&quot;&gt;
        &lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;/assets/img/illustrations/i30.png&quot; srcset=&quot;/assets/img/illustrations/i30@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-4 me-auto&quot;&gt;
        &lt;div class=&quot;svg-bg bg-pale-green rounded mb-5&quot;&gt; &lt;img src=&quot;/assets/img/icons/solid/layout-2.svg&quot; class=&quot;svg-inject icon-svg solid text-green&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;
        &lt;h3 class=&quot;h1 post-title ls-sm mb-3&quot;&gt;Web Design &amp; Development&lt;/h3&gt;
        &lt;p&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus.&lt;/p&gt;
        &lt;ul class=&quot;icon-list bullet-bg bullet-soft-green&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;Fusce dapibus, tellus ac cursus commodo.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;a href=&quot;#&quot; class=&quot;more hover link-green&quot;&gt;Learn More&lt;/a&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>