<section class="wrapper overflow-hidden">\n      <div class="container py-15 py-md-17">\n        <div class="row">\n          <div class="col-md-11 col-lg-8 col-xl-7 col-xxl-6 mx-auto text-center">\n            <h2 class="display-2 mb-4">What makes us different?</h2>\n            <p class="lead fs-lg mb-11">Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>\n          </div>\n          <!-- /column -->\n        </div>\n        <!-- /.row -->\n        <div class="row gx-lg-0 gy-10 align-items-center mb-15 mb-md-17">\n          <div class="col-lg-7 position-relative">\n            <div class="position-absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-100" src="/assets/img/photos/blurry.png" alt=""></div>\n            <figure><img src="/assets/img/photos/mi1.png" srcset="/assets/img/photos/mi1@2x.png 2x" alt="" /></figure>\n          </div>\n          <!--/column -->\n          <div class="col-lg-4 ms-auto">\n            <h2 class="display-5 mb-2 mt-xxl-n10">Design</h2>\n            <p class="mb-8">Maecenas sed diam eget risus varius blandit sit amet non magna justo sit amet risus.</p>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/puzzle.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">UI/UX Design</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/pen-tool.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">Design System</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/share.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">Digital Branding</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gx-lg-0 gy-10 align-items-center">\n          <div class="col-lg-7 position-relative order-lg-2">\n            <div class="position-absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index: -1"><img class="w-100" src="/assets/img/photos/blurry.png" alt=""></div>\n            <figure><img src="/assets/img/photos/mi2.png" srcset="/assets/img/photos/mi2@2x.png 2x" alt="" /></figure>\n          </div>\n          <!--/column -->\n          <div class="col-lg-4 me-auto">\n            <h2 class="display-5 mb-2 mt-xxl-n10">Development</h2>\n            <p class="mb-8">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh fermentum.</p>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/devices.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">Responsive Website</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row mb-6">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/safe.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">Backup and Updates</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row">\n              <div>\n                <div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="/assets/img/icons/solid/globe-2.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>\n              </div>\n              <div>\n                <h4 class="mb-1">SEO Optimization</h4>\n                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n      </div>\n      <!-- /.container -->\n      <div class="container">\n        <div class="row">\n          <div class="col-md-11 col-lg-8 col-xl-7 col-xxl-6 mx-auto text-center">\n            <h2 class="display-2 mb-4">Creative. Smart. Awesome.</h2>\n            <p class="lead fs-lg mb-11">Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna.</p>\n          </div>\n          <!-- /column -->\n        </div>\n        <!-- /.row -->\n      </div>\n      <!-- /.container -->\n      <div class="swiper-container swiper-auto swiper-auto-xs mb-8" data-margin="40" data-nav="false" data-dots="false" data-centered="true" data-loop="true" data-items-auto="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">\n        <div class="swiper overflow-visible pe-none">\n          <div class="swiper-wrapper ticker">\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma8.jpg" srcset="/assets/img/photos/ma8@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma9.jpg" srcset="/assets/img/photos/ma9@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma10.jpg" srcset="/assets/img/photos/ma10@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma11.jpg" srcset="/assets/img/photos/ma11@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma12.jpg" srcset="/assets/img/photos/ma12@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma13.jpg" srcset="/assets/img/photos/ma13@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma14.jpg" srcset="/assets/img/photos/ma14@2x.jpg 2x" alt="" /></figure>\n            </div>\n          </div>\n          <!--/.swiper-wrapper -->\n        </div>\n        <!-- /.swiper -->\n      </div>\n      <!-- /.swiper-container -->\n      <div class="swiper-container swiper-auto swiper-auto-xs" data-margin="40" data-nav="false" data-dots="false" data-centered="true" data-loop="true" data-items-auto="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">\n        <div class="swiper overflow-visible pe-none" dir="rtl">\n          <div class="swiper-wrapper ticker">\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma1.jpg" srcset="/assets/img/photos/ma1@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma2.jpg" srcset="/assets/img/photos/ma2@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma3.jpg" srcset="/assets/img/photos/ma3@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma4.jpg" srcset="/assets/img/photos/ma4@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma5.jpg" srcset="/assets/img/photos/ma5@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma6.jpg" srcset="/assets/img/photos/ma6@2x.jpg 2x" alt="" /></figure>\n            </div>\n            <div class="swiper-slide">\n              <figure class="rounded-xl shadow-xl"><img src="/assets/img/photos/ma7.jpg" srcset="/assets/img/photos/ma7@2x.jpg 2x" alt="" /></figure>\n            </div>\n          </div>\n          <!--/.swiper-wrapper -->\n        </div>\n        <!-- /.swiper -->\n      </div>\n      <!-- /.swiper-container -->\n      <div class="text-center mt-8 mb-15 mb-md-18 mb-lg-25">\n        <a class="btn btn-lg btn-primary rounded-xl">See Our Projects</a>\n      </div>\n    </section>