<section class="wrapper bg-light">\n        <div class="container py-15 py-md-17">\n          <div class="row">\n            <div class="col-lg-10 col-xl-8 mx-auto text-center">\n              <h2 class="fs-16 text-uppercase text-muted mb-3">Latest Projects</h2>\n              <h3 class="display-4 mb-10 px-xxl-10">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 grid-view mb-19" 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                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd7.jpg" srcset="/assets/img/photos/pd7@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project.html" class="link-dark">Cras Fermentum Sem</a></h2>\n                      <div class="post-category text-ash">Stationary</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n                <div class="swiper-slide">\n                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd8.jpg" srcset="/assets/img/photos/pd8@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project2.html" class="link-dark">Mollis Ipsum Mattis</a></h2>\n                      <div class="post-category text-ash">Magazine, Book</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n                <div class="swiper-slide">\n                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd9.jpg" srcset="/assets/img/photos/pd9@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project3.html" class="link-dark">Ipsum Ultricies Cursus</a></h2>\n                      <div class="post-category text-ash">Packaging</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n                <div class="swiper-slide">\n                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd10.jpg" srcset="/assets/img/photos/pd10@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project.html" class="link-dark">Inceptos Euismod Egestas</a></h2>\n                      <div class="post-category text-ash">Stationary, Branding</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n                <div class="swiper-slide">\n                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd11.jpg" srcset="/assets/img/photos/pd11@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project2.html" class="link-dark">Ipsum Mollis Vulputate</a></h2>\n                      <div class="post-category text-ash">Packaging</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n                <div class="swiper-slide">\n                  <figure class="rounded mb-6"><img src="/assets/img/photos/pd12.jpg" srcset="/assets/img/photos/pd12@2x.jpg 2x" alt="" /><a class="item-link" href="/assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>\n                  <div class="project-details d-flex justify-content-center flex-column">\n                    <div class="post-header">\n                      <h2 class="post-title h3"><a href="/single-project3.html" class="link-dark">Porta Ornare Cras</a></h2>\n                      <div class="post-category text-ash">Branding</div>\n                    </div>\n                    <!-- /.post-header -->\n                  </div>\n                  <!-- /.project-details -->\n                </div>\n                <!--/.swiper-slide -->\n              </div>\n              <!--/.swiper-wrapper -->\n            </div>\n            <!-- /.swiper -->\n          </div>\n          <!-- /.swiper-container -->\n          <hr class="dark my-14 my-md-17" />\n          <div class="row text-center">\n            <div class="col-md-11 col-lg-9 col-xl-8 mx-auto">\n              <h2 class="fs-16 text-uppercase text-muted mb-3">Our Pricing</h2>\n              <h3 class="display-4 mb-10 px-xxl-10">We offer great prices, premium products and quality service for your business.</h3>\n            </div>\n            <!-- /column -->\n          </div>\n          <!-- /.row -->\n          <div class="row">\n            <div class="col-xl-11 mx-auto">\n              <div class="pricing-wrapper mb-10 mb-md-14">\n                <div class="pricing-switcher-wrapper switcher">\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</p>\n                </div>\n                <div class="row gy-6 mt-3 mt-md-5">\n                  <div class="col-md-6 col-lg-4">\n                    <div class="pricing card shadow-lg">\n                      <div class="card-body">\n                        <div class="prices text-dark">\n                          <div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">9</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">99</span> <span class="price-duration">yr</span></div>\n                        </div>\n                        <!--/.prices -->\n                        <h4 class="card-title mt-2">Basic Plan</h4>\n                        <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8 text-start">\n                          <li><i class="uil uil-check"></i><span><strong>1</strong> Project </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>100MB</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 class="col-md-6 col-lg-4 popular">\n                    <div class="pricing card shadow-lg">\n                      <div class="card-body">\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 text-start">\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-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 class="col-md-6 offset-md-3 col-lg-4 offset-lg-0">\n                    <div class="pricing card shadow-lg">\n                      <div class="card-body">\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 text-start">\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              <!--/.pricing-wrapper -->\n              <div class="row gx-md-8 gx-xl-12 gy-10 mb-15">\n                <div class="col-lg-6">\n                  <div class="d-flex flex-row">\n                    <div>\n                      <span class="icon btn btn-sm btn-circle btn-primary pe-none me-5"><i class="uil uil-comment-exclamation"></i></span>\n                    </div>\n                    <div>\n                      <h4>Can I cancel my subscription?</h4>\n                      <p class="mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod maecenas.</p>\n                    </div>\n                  </div>\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-sm btn-circle btn-primary pe-none me-5"><i class="uil uil-comment-exclamation"></i></span>\n                    </div>\n                    <div>\n                      <h4>Which payment methods do you accept?</h4>\n                      <p class="mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod maecenas.</p>\n                    </div>\n                  </div>\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-sm btn-circle btn-primary pe-none me-5"><i class="uil uil-comment-exclamation"></i></span>\n                    </div>\n                    <div>\n                      <h4>How can I manage my Account?</h4>\n                      <p class="mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod maecenas.</p>\n                    </div>\n                  </div>\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-sm btn-circle btn-primary pe-none me-5"><i class="uil uil-comment-exclamation"></i></span>\n                    </div>\n                    <div>\n                      <h4>Is my credit card information secure?</h4>\n                      <p class="mb-0">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod maecenas.</p>\n                    </div>\n                  </div>\n                </div>\n                <!-- /column -->\n              </div>\n              <!-- /.row -->\n            </div>\n            <!-- /column -->\n          </div>\n          <!-- /.row -->\n        </div>\n        <!-- /.container -->\n      </section>