<section class="overflow-hidden">\n      <div class="container pt-16 pt-md-18 pb-20 pb-md-22">\n        <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center mb-15 mb-md-17">\n          <div class="col-lg-7 position-relative">\n            <div class="position-absolute d-none d-md-block" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-100" src="/assets/img/photos/blurry.png" alt=""></div>\n            <div class="row gx-md-5 gy-5">\n              <div class="col-md-6 col-xl-5 align-self-end">\n                <div class="card shadow-xl rounded-xl">\n                  <div class="card-body">\n                    <blockquote class="icon mb-0">\n                      <p>“Cum sociis natoque penatibus et magnis dis parturient montes.”</p>\n                      <div class="blockquote-details">\n                        <div class="info p-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                  <!--/.card-body -->\n                </div>\n                <!--/.card -->\n              </div>\n              <!--/column -->\n              <div class="col-md-6 align-self-end">\n                <div class="card shadow-xl rounded-xl">\n                  <div class="card-body">\n                    <blockquote class="icon mb-0">\n                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod.”</p>\n                      <div class="blockquote-details">\n                        <div class="info p-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                  <!--/.card-body -->\n                </div>\n                <!--/.card -->\n              </div>\n              <!--/column -->\n              <div class="col-md-6 col-xl-5 offset-xl-1">\n                <div class="card shadow-xl rounded-xl">\n                  <div class="card-body">\n                    <blockquote class="icon mb-0">\n                      <p>“Donec id elit non porta gravida at eget metus. Duis mollis est luctus commodo nisi erat.”</p>\n                      <div class="blockquote-details">\n                        <div class="info p-0">\n                          <h5 class="mb-1">Barclay Widerski</h5>\n                          <p class="mb-0">Sales Specialist</p>\n                        </div>\n                      </div>\n                    </blockquote>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.card -->\n              </div>\n              <!--/column -->\n              <div class="col-md-6 align-self-start">\n                <div class="card shadow-xl rounded-xl">\n                  <div class="card-body">\n                    <blockquote class="icon mb-0">\n                      <p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque.”</p>\n                      <div class="blockquote-details">\n                        <div class="info p-0">\n                          <h5 class="mb-1">Jackie Sanders</h5>\n                          <p class="mb-0">Investment Planner</p>\n                        </div>\n                      </div>\n                    </blockquote>\n                  </div>\n                  <!--/.card-body -->\n                </div>\n                <!--/.card -->\n              </div>\n              <!--/column -->\n            </div>\n            <!--/.row -->\n          </div>\n          <!--/column -->\n          <div class="col-lg-5">\n            <h2 class="display-2 mb-2 mt-lg-n6">Our Community</h2>\n            <p class="lead fs-lg mb-4">Customer satisfaction is our major goal. See what our clients are saying about our services.</p>\n            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod.</p>\n            <a href="#" class="btn btn-primary rounded-xl mt-3">All Testimonials</a>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="row gy-6">\n          <div class="col-lg-4">\n            <h2 class="display-2 mt-lg-18 mb-3">Our Pricing</h2>\n            <p class="lead fs-lg mb-3">We offer great prices, premium and quality products for your business.</p>\n            <p>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-xl 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-fuchsia">(Save 30%)</span></p>\n            </div>\n            <div class="row gy-6 position-relative mt-5">\n              <div class="col-md-6">\n                <div class="position-absolute pe-none d-none d-md-block" style="top: 55%; 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                <div class="pricing card shadow-xl rounded-xl">\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-primary mt-7 mb-8">\n                      <li><i class="uil uil-check fs-21"></i><span><strong>5</strong> Projects </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span><strong>100K</strong> API Access </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span><strong>200MB</strong> Storage </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span> Weekly <strong>Reports</strong></span></li>\n                      <li><i class="uil uil-check fs-21"></i><span> 7/24 <strong>Support</strong></span></li>\n                    </ul>\n                    <a href="#" class="btn btn-primary rounded-xl">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-xl rounded-xl">\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-primary mt-7 mb-8">\n                      <li><i class="uil uil-check fs-21"></i><span><strong>20</strong> Projects </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span><strong>300K</strong> API Access </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span><strong>500MB</strong> Storage </span></li>\n                      <li><i class="uil uil-check fs-21"></i><span> Weekly <strong>Reports</strong></span></li>\n                      <li><i class="uil uil-check fs-21"></i><span> 7/24 <strong>Support</strong></span></li>\n                    </ul>\n                    <a href="#" class="btn btn-primary rounded-xl">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>