<section class="wrapper bg-light">\n      <div class="container py-14 py-md-16 pb-md-17">\n        <div class="row gx-md-5 gy-5 mt-n18 mt-md-n21 mb-14 mb-md-17">\n          <div class="col-md-6 col-xl-3">\n            <div class="card shadow-lg card-border-bottom border-soft-yellow">\n              <div class="card-body">\n                <img src="/assets/img/icons/lineal/browser.svg" class="svg-inject icon-svg icon-svg-md text-yellow mb-3" alt="" />\n                <h4>Content Marketing</h4>\n                <p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>\n                <a href="#" class="more hover link-yellow">Learn More</a>\n              </div>\n              <!--/.card-body -->\n            </div>\n            <!--/.card -->\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-xl-3">\n            <div class="card shadow-lg card-border-bottom border-soft-green">\n              <div class="card-body">\n                <img src="/assets/img/icons/lineal/chat-2.svg" class="svg-inject icon-svg icon-svg-md text-green mb-3" alt="" />\n                <h4>Social Engagement</h4>\n                <p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>\n                <a href="#" class="more hover link-green">Learn More</a>\n              </div>\n              <!--/.card-body -->\n            </div>\n            <!--/.card -->\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-xl-3">\n            <div class="card shadow-lg card-border-bottom border-soft-orange">\n              <div class="card-body">\n                <img src="/assets/img/icons/lineal/id-card.svg" class="svg-inject icon-svg icon-svg-md text-orange mb-3" alt="" />\n                <h4>Identity & Branding</h4>\n                <p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>\n                <a href="#" class="more hover link-orange">Learn More</a>\n              </div>\n              <!--/.card-body -->\n            </div>\n            <!--/.card -->\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-xl-3">\n            <div class="card shadow-lg card-border-bottom border-soft-blue">\n              <div class="card-body">\n                <img src="/assets/img/icons/lineal/gift.svg" class="svg-inject icon-svg icon-svg-md text-blue mb-3" alt="" />\n                <h4>Product Design</h4>\n                <p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>\n                <a href="#" class="more hover link-blue">Learn More</a>\n              </div>\n              <!--/.card-body -->\n            </div>\n            <!--/.card -->\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gx-lg-8 gx-xl-12 gy-10 mb-14 mb-md-17 align-items-center">\n          <div class="col-lg-7">\n            <figure><img class="w-auto" src="/assets/img/illustrations/i8.png" srcset="/assets/img/illustrations/i8@2x.png 2x" alt="" /></figure>\n          </div>\n          <!--/column -->\n          <div class="col-lg-5">\n            <h3 class="display-4 mb-7">Our three process steps on creating awesome projects.</h3>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <span class="icon btn btn-circle btn-soft-primary pe-none me-5"><span class="number fs-18">1</span></span>\n              </div>\n              <div>\n                <h4 class="mb-1">Collect Ideas</h4>\n                <p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus. Donec ullamcorper nulla non metus.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <span class="icon btn btn-circle btn-soft-primary pe-none me-5"><span class="number fs-18">2</span></span>\n              </div>\n              <div>\n                <h4 class="mb-1">Data Analysis</h4>\n                <p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna auctor fringilla augue.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row">\n              <div>\n                <span class="icon btn btn-circle btn-soft-primary pe-none me-5"><span class="number fs-18">3</span></span>\n              </div>\n              <div>\n                <h4 class="mb-1">Finalize Product</h4>\n                <p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed. Nulla vitae elit libero pharetra.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">\n          <div class="col-lg-7 order-lg-2">\n            <figure><img class="w-auto" src="/assets/img/illustrations/i2.png" srcset="/assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>\n          </div>\n          <!--/column -->\n          <div class="col-lg-5">\n            <h3 class="display-4 mb-7 mt-lg-10">Few reasons why our valued customers choose us.</h3>\n            <div class="accordion accordion-wrapper" id="accordionExample">\n              <div class="card plain accordion-item">\n                <div class="card-header" id="headingOne">\n                  <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>\n                </div>\n                <!--/.card-header -->\n                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">\n                  <div class="card-body">\n                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.accordion-collapse -->\n              </div>\n              <!--/.accordion-item -->\n              <div class="card plain accordion-item">\n                <div class="card-header" id="headingTwo">\n                  <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>\n                </div>\n                <!--/.card-header -->\n                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">\n                  <div class="card-body">\n                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.accordion-collapse -->\n              </div>\n              <!--/.accordion-item -->\n              <div class="card plain accordion-item">\n                <div class="card-header" id="headingThree">\n                  <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>\n                </div>\n                <!--/.card-header -->\n                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">\n                  <div class="card-body">\n                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.accordion-collapse -->\n              </div>\n              <!--/.accordion-item -->\n            </div>\n            <!--/.accordion -->\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n      </div>\n      <!-- /.container -->\n    </section>