<section class="wrapper bg-gray">\n      <div class="container">\n        <div class="card shadow-none my-n13 my-md-n15 my-lg-n17">\n          <div class="card-body py-12 py-lg-14 px-lg-11 py-xl-16 px-xl-13">\n            <div class="row text-center">\n              <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">What We Do?</h2>\n                <h3 class="display-4 mb-9">The service we offer is specifically designed to meet your needs.</h3>\n              </div>\n              <!-- /column -->\n            </div>\n            <!-- /.row -->\n            <div class="row gx-md-8 gx-xl-12 gy-8 mb-14 mb-md-16 text-center">\n              <div class="col-md-4">\n                <div class="icon btn btn-block btn-lg btn-soft-purple pe-none mb-5"> <i class="uil uil-phone-volume"></i> </div>\n                <h4>24/7 Support</h4>\n                <p class="mb-3">Fusce dapibus tellus cursus porta tortor condimentum euismod massa justo vehicula sit amet et risus cras.</p>\n                <a href="#" class="more hover link-purple">Learn More</a>\n              </div>\n              <!--/column -->\n              <div class="col-md-4">\n                <div class="icon btn btn-block btn-lg btn-soft-green pe-none mb-5"> <i class="uil uil-shield-exclamation"></i> </div>\n                <h4>Secure Payments</h4>\n                <p class="mb-3">Fusce dapibus tellus cursus porta tortor condimentum euismod massa justo vehicula sit amet et risus cras.</p>\n                <a href="#" class="more hover link-green">Learn More</a>\n              </div>\n              <!--/column -->\n              <div class="col-md-4">\n                <div class="icon btn btn-block btn-lg btn-soft-orange pe-none mb-5"> <i class="uil uil-laptop-cloud"></i> </div>\n                <h4>Daily Updates</h4>\n                <p class="mb-3">Fusce dapibus tellus cursus porta tortor condimentum euismod massa justo vehicula sit amet et risus cras.</p>\n                <a href="#" class="more hover link-orange">Learn More</a>\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n            <div class="row gx-md-8 gx-xl-12 gy-10 align-items-center">\n              <div class="col-lg-6">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">Our Strategy</h2>\n                <h3 class="display-4 mb-5">3 working steps to organize our business projects.</h3>\n                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod eget. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus.</p>\n                <p class="mb-6">Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum consectetur.</p>\n                <a href="#" class="btn btn-primary rounded-pill mb-0">Learn More</a>\n              </div>\n              <!--/column -->\n              <div class="col-lg-6">\n                <div class="d-flex flex-row">\n                  <div>\n                    <span class="icon btn btn-block btn-lg btn-soft-purple pe-none mt-1 me-5"><span class="number fs-22">01</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. Fusce dapibus, tellus ac cursus commodo.</p>\n                  </div>\n                </div>\n                <div class="d-flex flex-row mt-8 ms-lg-10">\n                  <div>\n                    <span class="icon btn btn-block btn-lg btn-soft-green pe-none mt-1 me-5"><span class="number fs-22">02</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 tortor mauris condimentum fermentum.</p>\n                  </div>\n                </div>\n                <div class="d-flex flex-row mt-8">\n                  <div>\n                    <span class="icon btn btn-block btn-lg btn-soft-orange pe-none mt-1 me-5"><span class="number fs-22">03</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 massa justo sit amet risus consectetur magna elit.</p>\n                  </div>\n                </div>\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n            <hr class="my-14 my-md-16" />\n            <div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0 mb-11 align-items-end">\n              <div class="col-lg-4">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">Company Facts</h2>\n                <h3 class="display-4 mb-0">We are proud of our works</h3>\n              </div>\n              <!-- /column -->\n              <div class="col-lg-8 mt-lg-2">\n                <div class="row align-items-center counter-wrapper gy-6 text-center">\n                  <div class="col-md-4">\n                    <h3 class="counter counter-lg">1000+</h3>\n                    <p>Completed Projects</p>\n                  </div>\n                  <!--/column -->\n                  <div class="col-md-4">\n                    <h3 class="counter counter-lg">500+</h3>\n                    <p>Happy Clients</p>\n                  </div>\n                  <!--/column -->\n                  <div class="col-md-4">\n                    <h3 class="counter counter-lg">150+</h3>\n                    <p>Awards Won</p>\n                  </div>\n                  <!--/column -->\n                </div>\n                <!--/.row -->\n              </div>\n              <!-- /column -->\n            </div>\n            <!-- /.row -->\n            <div class="card bg-gray shadow-lg mb-14 mb-md-17">\n              <div class="row gx-0">\n                <div class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start" data-image-src="/assets/img/photos/tm1.jpg">\n                </div>\n                <!--/column -->\n                <div class="col-lg-6">\n                  <div class="p-10 p-xl-13">\n                    <div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">\n                      <div class="swiper">\n                        <div class="swiper-wrapper">\n                          <div class="swiper-slide">\n                            <blockquote class="icon icon-top fs-lg text-center">\n                              <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper.”</p>\n                              <div class="blockquote-details justify-content-center text-center">\n                                <div class="info ps-0">\n                                  <h5 class="mb-1">Coriss Ambady</h5>\n                                  <p class="mb-0">Financial Analyst</p>\n                                </div>\n                              </div>\n                            </blockquote>\n                          </div>\n                          <!--/.swiper-slide -->\n                          <div class="swiper-slide">\n                            <blockquote class="icon icon-top fs-lg text-center">\n                              <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper.”</p>\n                              <div class="blockquote-details justify-content-center text-center">\n                                <div class="info ps-0">\n                                  <h5 class="mb-1">Cory Zamora</h5>\n                                  <p class="mb-0">Marketing Specialist</p>\n                                </div>\n                              </div>\n                            </blockquote>\n                          </div>\n                          <!--/.swiper-slide -->\n                          <div class="swiper-slide">\n                            <blockquote class="icon icon-top fs-lg text-center">\n                              <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper.”</p>\n                              <div class="blockquote-details justify-content-center text-center">\n                                <div class="info ps-0">\n                                  <h5 class="mb-1">Nikolas Brooten</h5>\n                                  <p class="mb-0">Sales Manager</p>\n                                </div>\n                              </div>\n                            </blockquote>\n                          </div>\n                          <!--/.swiper-slide -->\n                        </div>\n                        <!--/.swiper-wrapper -->\n                      </div>\n                      <!-- /.swiper -->\n                    </div>\n                    <!-- /.swiper-container -->\n                  </div>\n                  <!--/div -->\n                </div>\n                <!--/column -->\n              </div>\n              <!--/.row -->\n            </div>\n            <!-- /.card -->\n            <div class="row text-center">\n              <div class="col-lg-10 col-xl-10 col-xxl-8 mx-auto">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">Case Studies</h2>\n                <h3 class="display-4 mb-9">Check out some of our awesome projects with creative ideas and great design.</h3>\n              </div>\n              <!-- /column -->\n            </div>\n            <!-- /.row -->\n            <div class="swiper-container blog grid-view mb-18" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">\n              <div class="swiper">\n                <div class="swiper-wrapper">\n                  <div class="swiper-slide">\n                    <article>\n                      <figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="/assets/img/photos/b4.jpg" alt="" /></a>\n                        <figcaption>\n                          <h5 class="from-top mb-0">Read More</h5>\n                        </figcaption>\n                      </figure>\n                      <div class="post-header">\n                        <h2 class="post-title h3 mb-3"><a class="link-dark" href="/blog-post.html">Ligula tristique quis risus</a></h2>\n                      </div>\n                      <!-- /.post-header -->\n                      <div class="post-footer">\n                        <ul class="post-meta">\n                          <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2022</span></li>\n                          <li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Coding</a></li>\n                        </ul>\n                        <!-- /.post-meta -->\n                      </div>\n                      <!-- /.post-footer -->\n                    </article>\n                    <!-- /article -->\n                  </div>\n                  <!--/.swiper-slide -->\n                  <div class="swiper-slide">\n                    <article>\n                      <figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="/assets/img/photos/b5.jpg" alt="" /></a>\n                        <figcaption>\n                          <h5 class="from-top mb-0">Read More</h5>\n                        </figcaption>\n                      </figure>\n                      <div class="post-header">\n                        <h2 class="post-title h3 mb-3"><a class="link-dark" href="/blog-post.html">Nullam id dolor elit id nibh</a></h2>\n                      </div>\n                      <!-- /.post-header -->\n                      <div class="post-footer">\n                        <ul class="post-meta">\n                          <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2022</span></li>\n                          <li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Workspace</a></li>\n                        </ul>\n                        <!-- /.post-meta -->\n                      </div>\n                      <!-- /.post-footer -->\n                    </article>\n                    <!-- /article -->\n                  </div>\n                  <!--/.swiper-slide -->\n                  <div class="swiper-slide">\n                    <article>\n                      <figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="/assets/img/photos/b6.jpg" alt="" /></a>\n                        <figcaption>\n                          <h5 class="from-top mb-0">Read More</h5>\n                        </figcaption>\n                      </figure>\n                      <div class="post-header">\n                        <h2 class="post-title h3 mb-3"><a class="link-dark" href="/blog-post.html">Ultricies fusce porta elit</a></h2>\n                      </div>\n                      <!-- /.post-header -->\n                      <div class="post-footer">\n                        <ul class="post-meta">\n                          <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2022</span></li>\n                          <li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Meeting</a></li>\n                        </ul>\n                        <!-- /.post-meta -->\n                      </div>\n                      <!-- /.post-footer -->\n                    </article>\n                    <!-- /article -->\n                  </div>\n                  <!--/.swiper-slide -->\n                  <div class="swiper-slide">\n                    <article>\n                      <figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="/assets/img/photos/b7.jpg" alt="" /></a>\n                        <figcaption>\n                          <h5 class="from-top mb-0">Read More</h5>\n                        </figcaption>\n                      </figure>\n                      <div class="post-header">\n                        <h2 class="post-title h3 mb-3"><a class="link-dark" href="/blog-post.html">Morbi leo risus porta eget</a></h2>\n                      </div>\n                      <div class="post-footer">\n                        <ul class="post-meta">\n                          <li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2022</span></li>\n                          <li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Business Tips</a></li>\n                        </ul>\n                        <!-- /.post-meta -->\n                      </div>\n                      <!-- /.post-footer -->\n                    </article>\n                    <!-- /article -->\n                  </div>\n                  <!--/.swiper-slide -->\n                </div>\n                <!--/.swiper-wrapper -->\n              </div>\n              <!-- /.swiper -->\n            </div>\n            <!-- /.swiper-container -->\n            <hr class="my-14 my-md-16" />\n            <div class="row gx-lg-8 gx-xl-12 gy-10 mb-14 mb-md-17 align-items-center">\n              <div class="col-md-8 col-lg-6 order-lg-2">\n                <figure class="rounded"><img src="/assets/img/photos/about24.jpg" srcset="/assets/img/photos/about24@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n              <div class="col-lg-6">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">Our Team</h2>\n                <h3 class="display-4 mb-5">Save your time by choosing our professional team.</h3>\n                <p class="mb-6">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.</p>\n                <div class="row gy-3 gx-xl-8">\n                  <div class="col-xl-6">\n                    <ul class="icon-list bullet-bg bullet-soft-primary mb-0">\n                      <li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>\n                      <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>\n                    </ul>\n                  </div>\n                  <!--/column -->\n                  <div class="col-xl-6">\n                    <ul class="icon-list bullet-bg bullet-soft-primary mb-0">\n                      <li><span><i class="uil uil-check"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>\n                      <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>\n                    </ul>\n                  </div>\n                  <!--/column -->\n                </div>\n                <!--/.row -->\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n            <div class="row gy-10 gx-lg-8 gx-xl-12 mb-14 mb-md-16 align-items-center">\n              <div class="col-md-8 col-lg-6">\n                <figure class="rounded"><img src="/assets/img/photos/about25.jpg" srcset="/assets/img/photos/about25@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n              <div class="col-lg-6">\n                <h2 class="fs-15 text-uppercase text-muted mb-3">Why Choose Us?</h2>\n                <h3 class="display-4 mb-7">A 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 class="wrapper image-wrapper bg-auto no-overlay bg-image text-center bg-map" data-image-src="/assets/img/map.png">\n              <div class="container py-md-16 py-lg-18">\n                <div class="row">\n                  <div class="col-xl-11 col-xxl-9 mx-auto">\n                    <h3 class="display-4 mb-8 px-lg-8">We are trusted by over 5000+ clients. Join them now and grow your business.</h3>\n                  </div>\n                  <!-- /column -->\n                </div>\n                <!-- /.row -->\n                <div class="d-flex justify-content-center">\n                  <span><a class="btn btn-primary rounded-pill">Get Started</a></span>\n                </div>\n              </div>\n              <!-- /.container -->\n            </div>\n            <!-- /.wrapper -->\n          </div>\n          <!--/.card-body -->\n        </div>\n        <!--/.card -->\n      </div>\n      <!-- /.container -->\n    </section>