<section class="wrapper bg-light">\n      <div class="container py-14 py-md-17">\n        <div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center mb-14 mb-md-19">\n          <div class="col-md-8 col-lg-6 position-relative">\n            <a href="/assets/media/movie.mp4" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>\n            <div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>\n            <figure class="rounded"><img src="/assets/img/photos/about8.jpg" srcset="/assets/img/photos/about8@2x.jpg 2x" alt=""></figure>\n          </div>\n          <!--/column -->\n          <div class="col-lg-5 col-xl-4 offset-lg-1">\n            <h2 class="fs-15 text-uppercase text-muted mb-3">How It Works?</h2>\n            <h3 class="display-4 mb-7">Here are the 3 working steps on success.</h3>\n            <div class="d-flex flex-row mb-5">\n              <div>\n                <img src="/assets/img/icons/lineal/shield.svg" class="svg-inject icon-svg icon-svg-md text-yellow me-5" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Secured Transactions</h4>\n                <p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row mb-5">\n              <div>\n                <img src="/assets/img/icons/lineal/savings.svg" class="svg-inject icon-svg icon-svg-md text-green me-5" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Bills Planning</h4>\n                <p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>\n              </div>\n            </div>\n            <div class="d-flex flex-row">\n              <div>\n                <img src="/assets/img/icons/lineal/loading.svg" class="svg-inject icon-svg icon-svg-md text-red me-5" alt="" />\n              </div>\n              <div>\n                <h4 class="mb-1">Always up to date</h4>\n                <p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>\n              </div>\n            </div>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gy-6 align-items-center">\n          <div class="col-lg-4">\n            <h2 class="fs-15 text-uppercase text-muted mb-3">Our Pricing</h2>\n            <h3 class="display-4 mb-5">We offer great and premium prices.</h3>\n            <p class="mb-5">Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>\n            <a href="#" class="btn btn-primary rounded mt-2">See All Prices</a>\n          </div>\n          <!--/column -->\n          <div class="col-lg-7 offset-lg-1 pricing-wrapper">\n            <div class="pricing-switcher-wrapper switcher justify-content-start justify-content-lg-end">\n              <p class="mb-0 pe-3">Monthly</p>\n              <div class="pricing-switchers">\n                <div class="pricing-switcher pricing-switcher-active"></div>\n                <div class="pricing-switcher"></div>\n                <div class="switcher-button bg-primary"></div>\n              </div>\n              <p class="mb-0 ps-3">Yearly <span class="text-red">(Save 30%)</span></p>\n            </div>\n            <div class="row gy-6 mt-5">\n              <div class="col-md-6">\n                <div class="pricing card shadow-lg">\n                  <div class="card-body pb-12">\n                    <div class="prices text-dark">\n                      <div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>\n                      <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>\n                    </div>\n                    <!--/.prices -->\n                    <h4 class="card-title mt-2">Premium Plan</h4>\n                    <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">\n                      <li><i class="uil uil-check"></i><span><strong>5</strong> Projects </span></li>\n                      <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>\n                      <li><i class="uil uil-check"></i><span><strong>200MB</strong> Storage </span></li>\n                      <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>\n                      <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>\n                    </ul>\n                    <a href="#" class="btn btn-primary rounded">Choose Plan</a>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.pricing -->\n              </div>\n              <!--/column -->\n              <div class="col-md-6 popular">\n                <div class="pricing card shadow-lg">\n                  <div class="card-body pb-12">\n                    <div class="prices text-dark">\n                      <div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>\n                      <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>\n                    </div>\n                    <!--/.prices -->\n                    <h4 class="card-title mt-2">Corporate Plan</h4>\n                    <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">\n                      <li><i class="uil uil-check"></i><span><strong>20</strong> Projects </span></li>\n                      <li><i class="uil uil-check"></i><span><strong>300K</strong> API Access </span></li>\n                      <li><i class="uil uil-check"></i><span><strong>500MB</strong> Storage </span></li>\n                      <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>\n                      <li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>\n                    </ul>\n                    <a href="#" class="btn btn-primary rounded">Choose Plan</a>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.pricing -->\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n      </div>\n      <!-- /.container -->\n    </section>