<section class="wrapper bg-light">\n      <div class="container py-14 py-md-18">\n        <div class="row gx-lg-8 gx-xl-12 gy-12 align-items-center mb-10 mb-md-13">\n          <div class="col-lg-6 position-relative">\n            <div class="btn btn-circle btn-primary pe-none position-absolute counter-wrapper flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">\n              <h3 class="text-white mb-1 mt-n2"><span class="counter counter-lg">20+</span></h3>\n              <p>Year Experience</p>\n            </div>\n            <div class="row gx-md-5 gy-5 align-items-center">\n              <div class="col-md-6">\n                <div class="row gx-md-5 gy-5">\n                  <div class="col-md-10 offset-md-2">\n                    <figure class="rounded"><img src="/assets/img/photos/ab1.jpg" srcset="/assets/img/photos/ab1@2x.jpg 2x" alt=""></figure>\n                  </div>\n                  <!--/column -->\n                  <div class="col-md-12">\n                    <figure class="rounded"><img src="/assets/img/photos/ab2.jpg" srcset="/assets/img/photos/ab2@2x.jpg 2x" alt=""></figure>\n                  </div>\n                  <!--/column -->\n                </div>\n                <!--/.row -->\n              </div>\n              <!--/column -->\n              <div class="col-md-6">\n                <figure class="rounded"><img src="/assets/img/photos/ab3.jpg" srcset="/assets/img/photos/ab3@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n          </div>\n          <!--/column -->\n          <div class="col-lg-6">\n            <h3 class="display-4 mb-5">We bring solutions to make life easier for our customers.</h3>\n            <p class="mb-7">Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.</p>\n            <div class="row gy-3">\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 quam ornare curabitur blandit consectetur.</span></li>\n                  <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare aenean leo.</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 euismod malesuada mollis nisl ornare sem.</span></li>\n                  <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Vivamus sagittis lacus augue rutrum maecenas.</span></li>\n                </ul>\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gx-lg-8 gx-xl-12 gy-8">\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/telephone-3.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">24/7 Support</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/shield.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Secure Payments</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/cloud-computing-3.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Daily Updates</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/analytics.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Market Research</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/settings.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">System Integration</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n          <div class="col-md-6 col-lg-4">\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/earth.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">SEO Services</h4>\n                <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <hr class="my-14 my-md-17" />\n        <div class="row gy-10 gy-sm-13 gx-lg-8 align-items-center">\n          <div class="col-lg-7 order-lg-2">\n            <div class="row gx-md-5 gy-5">\n              <div class="col-md-4 offset-md-2 align-self-end">\n                <figure class="rounded"><img src="/assets/img/photos/g1.jpg" srcset="/assets/img/photos/g1@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n              <div class="col-md-6 align-self-end">\n                <figure class="rounded"><img src="/assets/img/photos/g2.jpg" srcset="/assets/img/photos/g2@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n              <div class="col-md-6 offset-md-1">\n                <figure class="rounded"><img src="/assets/img/photos/g3.jpg" srcset="/assets/img/photos/g3@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n              <div class="col-md-4 align-self-start">\n                <figure class="rounded"><img src="/assets/img/photos/g4.jpg" srcset="/assets/img/photos/g4@2x.jpg 2x" alt=""></figure>\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n          </div>\n          <!--/column -->\n          <div class="col-lg-5">\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 scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</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 scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</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 scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</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>