<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-lg-8 gx-xl-12 gy-10 mb-14 mb-md-18 align-items-center&quot;&gt;
      &lt;div class=&quot;col-lg-6 position-relative&quot;&gt;
        &lt;div class=&quot;shape bg-line leaf rounded-circle rellax w-17 h-17&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: -2rem; right: -0.6rem;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;shape bg-pale-violet rounded-circle rellax w-17 h-17&quot; data-rellax-speed=&quot;1&quot; style=&quot;bottom: -2rem; left: -0.4rem;&quot;&gt;&lt;/div&gt;
        &lt;figure class=&quot;rounded mb-0&quot;&gt;&lt;img src=&quot;/assets/img/photos/se3.jpg&quot; srcset=&quot;/assets/img/photos/se3@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
        &lt;h3 class=&quot;display-4 mb-4&quot;&gt;Package Design&lt;/h3&gt;
        &lt;p class=&quot;mb-5&quot;&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius.&lt;/p&gt;
        &lt;div class=&quot;row gy-3&quot;&gt;
          &lt;div class=&quot;col-xl-6&quot;&gt;
            &lt;ul class=&quot;icon-list bullet-bg bullet-soft-leaf mb-0&quot;&gt;
              &lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Aenean quam ornare curabitur blandit consectetur.&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Nullam quis risus eget urna mollis ornare aenean leo.&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-xl-6&quot;&gt;
            &lt;ul class=&quot;icon-list bullet-bg bullet-soft-leaf mb-0&quot;&gt;
              &lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Etiam porta euismod malesuada mollis nisl ornare sem.&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Vivamus sagittis lacus augue rutrum maecenas.&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
        &lt;/div&gt;
        &lt;!--/.row --&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-soft-leaf rounded-pill mt-6 mb-0&quot;&gt;More Details&lt;/a&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
    &lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
      &lt;div class=&quot;col-lg-6 order-lg-2 position-relative&quot;&gt;
        &lt;div class=&quot;shape bg-line aqua rounded-circle rellax w-17 h-17&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: -2rem; left: -0.6rem;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;shape bg-pale-red rounded-circle rellax w-17 h-17&quot; data-rellax-speed=&quot;1&quot; style=&quot;bottom: -2rem; right: -0.4rem;&quot;&gt;&lt;/div&gt;
        &lt;figure class=&quot;rounded mb-0&quot;&gt;&lt;img src=&quot;/assets/img/photos/se4.jpg&quot; srcset=&quot;/assets/img/photos/se4@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
        &lt;h3 class=&quot;display-4 mb-4&quot;&gt;Corporate Design&lt;/h3&gt;
        &lt;p class=&quot;mb-5&quot;&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.&lt;/p&gt;
        &lt;div class=&quot;row gy-3&quot;&gt;
          &lt;div class=&quot;col-xl-6&quot;&gt;
            &lt;ul class=&quot;icon-list bullet-bg bullet-soft-aqua mb-0&quot;&gt;
              &lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Aenean quam ornare curabitur blandit consectetur.&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Nullam quis risus eget urna mollis ornare aenean leo.&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-xl-6&quot;&gt;
            &lt;ul class=&quot;icon-list bullet-bg bullet-soft-aqua mb-0&quot;&gt;
              &lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Etiam porta euismod malesuada mollis nisl ornare sem.&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Vivamus sagittis lacus augue rutrum maecenas.&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
        &lt;/div&gt;
        &lt;!--/.row --&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-soft-aqua rounded-pill mt-6 mb-0&quot;&gt;More Details&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>