<div class="maindemo-template">
                        <!-- Muse Section -->
                        <section class="muse-section" id="switch-content">
                          <div class="text-center">
                            <h2 class="h1">Simple pricing for any <br>designers and agencies</h2>
                            <div class="d-flex align-items-center justify-content-center my-4">
                              <span class="text-dark">Monthly</span>
                              <div class="form-check form-check-lg form-switch mb-0 mx-4">
                                <input class="form-check-input mr-0 bg-gray-300" onclick="toggleClass3()" type="checkbox" id="flexSwitchCheckChecked10">
                              </div>
                              <span class="text-dark">Yearly</span>
                            </div>
                          </div>
                          <div class="row mt-5 mb-1 mb-md-5">
                            <div class="col-md-6">
                              <div class="card rounded-12 p-4 border-gray-200 shadow-dark-80 transition-3d-hover h-100">
                                <div class="px-0 px-lg-3 py-0 py-md-2">
                                  <h4 class="text-uppercase mb-0">Free</h4>
                                  <h2 class="display-4">$<span class="monthly">0</span><span class="yearly">10</span></h2>
                                  <p class="mb-0">For personal projects</p>
                                  <hr class="my-4">
                                  <ul class="list-unstyled plan-list">
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Umlimited Projects</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Sketch, Figma, Adobe XD Plugin</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>3k+ Components Library</span> <a href="#"><img src="../assets/img/templates/info.svg" class="ml-1" alt="Check"></a></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Free Design Assets</span></li>
                                    <li><img src="../assets/img/templates/close1.svg" alt="Check"> <span>24/7 Support</span></li>
                                    <li><img src="../assets/img/templates/close1.svg" alt="Check"> <span>Free Updates</span></li>
                                  </ul>
                                  <div class="mt-4 mb-2 pt-2">
                                    <a href="javascript:void(0);" class="btn btn-xl btn-block btn-success">Subscribe</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="card rounded-12 p-4 border-gray-200 shadow-dark-80 transition-3d-hover h-100">
                                <div class="px-0 px-lg-3 py-0 py-md-2">
                                  <h4 class="text-uppercase mb-0">Pro</h4>
                                  <h2 class="display-4">$<span class="monthly">24</span><span class="yearly">49</span></h2>
                                  <p class="mb-0">For businesses</p>
                                  <hr class="my-4">
                                  <ul class="list-unstyled plan-list">
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Umlimited Projects</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Sketch, Figma, Adobe XD Plugin</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>3k+ Components Library</span> <a href="#"><img src="../assets/img/templates/info.svg" class="ml-1" alt="Check"></a></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Free Design Assets</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>24/7 Support</span></li>
                                    <li><img src="../assets/img/templates/check-heavy2.svg" alt="Check"> <span>Free Updates</span></li>
                                  </ul>
                                  <div class="mt-4 pt-2 mb-2">
                                    <a href="javascript:void(0);" class="btn btn-xl btn-block btn-success">Subscribe</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-10 m-auto text-center text-gray-600">
                              <p class="mb-0">This order process is provided by Paddle.com, who handle all payment services, invoicing and download links. Need more information? You can always reach us at <a href="mailto:support@fabrx.co" class="text-gray-600">support@fabrx.co</a></p>
                            </div>
                          </div>
                        </section>
                      </div>
                    
                  

                    
                      <script>
                        //Muse Switch Toggle JavaScript
                        var elem = document.getElementById("switch-content");
                        function toggleClass3(){
                          elem.classList.toggle("switch-hide");
                        }
                      </script>
                    
                  

                    
                      <div class="bg-black-800 saas-template">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <div class="row g-0 pt-4 mt-2">
                              <div class="col-xl-8 m-auto text-center">
                                <h2 class="display-3">Simple licensing</h2>
                                <h3 class="h4 mb-0 pb-md-3 mt-3">Design, build, collaborate, and bring your <br>ideas to life with the world.</h3>
                              </div>
                              <div class="w-100 d-flex justify-content-center mt-4">
                                <ul class="nav nav-segment nav-pills mb-7 bg-gray-800 rounded-pill" role="tablist">
                                  <li class="nav-item">
                                    <a class="nav-link active" data-toggle="pill" href="#pills-monthly" role="tab" aria-controls="pills-monthly" aria-selected="true">Monthly</a>
                                  </li>
                                  <li class="nav-item">
                                    <a class="nav-link" data-toggle="pill" href="#pills-yearly" role="tab" aria-controls="pills-yearly" aria-selected="false">Yearly <small class="less-value">-20%</small></a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                            <div class="tab-content">
                              <div class="tab-pane fade show active" id="pills-monthly">
                                <figure class="p-4 p-md-5 mt-md-5 mt-4 mb-0 rounded-12 bg-gray-800 has-theme-hover transition-3d-hover position-relative">
                                  <div class="px-md-4 py-2">
                                    <div class="row justify-content-between">
                                      <div class="col-xl-6 col-md-7">
                                        <h2>Enterprise</h2>
                                        <p class="fs-20 lh-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                                      </div>
                                      <div class="col-auto">
                                        <h3 class="display-2 mb-3">$24</h3>
                                        <a href="#" class="btn btn-xl btn-danger rounded-pill stretched-link">Subscribe</a>
                                      </div>
                                    </div>
                                  </div>
                                </figure>
                                <figure class="p-4 p-md-5 mt-md-5 mt-4 mb-0 rounded-12 bg-gray-800 has-theme-hover transition-3d-hover position-relative">
                                  <div class="px-md-4 py-2">
                                    <div class="row justify-content-between">
                                      <div class="col-xl-6 col-md-7">
                                        <h2>Starter</h2>
                                        <p class="fs-20 lh-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                                      </div>
                                      <div class="col-auto">
                                        <h3 class="display-2 mb-3">$12</h3>
                                        <a href="#" class="btn btn-xl btn-danger rounded-pill stretched-link">Subscribe</a>
                                      </div>
                                    </div>
                                  </div>
                                </figure>
                              </div>
                              <div class="tab-pane fade" id="pills-yearly">
                                <figure class="p-4 p-md-5 mt-md-5 mt-4 mb-0 rounded-12 bg-gray-800 has-theme-hover transition-3d-hover position-relative">
                                  <div class="px-md-4 py-2">
                                    <div class="row justify-content-between">
                                      <div class="col-xl-6 col-md-7">
                                        <h2>Enterprise</h2>
                                        <p class="fs-20 lh-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                                      </div>
                                      <div class="col-auto">
                                        <h3 class="display-2 mb-3">$49</h3>
                                        <a href="#" class="btn btn-xl btn-danger rounded-pill stretched-link">Subscribe</a>
                                      </div>
                                    </div>
                                  </div>
                                </figure>
                                <figure class="p-4 p-md-5 mt-md-5 mt-4 mb-0 rounded-12 bg-gray-800 has-theme-hover transition-3d-hover position-relative">
                                  <div class="px-md-4 py-2">
                                    <div class="row justify-content-between">
                                      <div class="col-xl-6 col-md-7">
                                        <h2>Starter</h2>
                                        <p class="fs-20 lh-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                                      </div>
                                      <div class="col-auto">
                                        <h3 class="display-2 mb-3">$29</h3>
                                        <a href="#" class="btn btn-xl btn-danger rounded-pill stretched-link">Subscribe</a>
                                      </div>
                                    </div>
                                  </div>
                                </figure>
                              </div>
                            </div>
                            <div class="row justify-content-center text-center pt-4 mt-3">
                              <div class="col-md-8">
                                <p class="small text-white lh-lg">This order process is provided by Paddle.com, who handle all payment services, invoicing and download links. Need more information? You can always reach us at <a href="mailto:support@fabrx.co" class="text-white">support@fabrx.co</a></p>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

                    
                      <div class="bg-gray-100 education-template">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <div class="row">
                              <div class="col-lg-10">
                                <h6 class="h1 mb-2 text-blue-600">Simple pricing</h6>
                                <h3 class="display-4 text-danger">Choose the perfect package</h3>
                              </div>
                            </div>
                            <div class="row mt-3 mt-md-5">
                              <div class="col-md-6">
                                <div class="card card-plan shadow-dark-80 p-4 p-lg-5 rounded-24">
                                  <div class="card-top">
                                    <h2 class="h1 text-blue-600"><span class="d-block h3 text-blue-600">Basic</span> $199<sup class="big ml-2 top-0"> Monthly</sup></h2>
                                    <span class="ml-auto"><img src="../assets/img/templates/trophy.svg" alt="img"></span>
                                  </div>
                                  <hr class="bg-blue-600 opacity-1">
                                  <ul class="plan-features py-2">
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Access to 250 courses</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Live interactions</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>100 hours per month</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Completion certificates</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Download videos</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Email support</span>
                                    </li>
                                  </ul>
                                  <a href="#" class="btn btn-xl btn-dark text-uppercase mt-2">SUBSCRIBE</a>
                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="card card-plan shadow-dark-80 p-4 p-lg-5 rounded-24">
                                  <div class="card-top">
                                    <h2 class="h1 text-blue-600"><span class="d-block h3 text-blue-600">Pro</span> $299<sup class="big ml-2 top-0"> Monthly</sup></h2>
                                    <span class="ml-auto"><img src="../assets/img/templates/target.svg" alt="img"></span>
                                  </div>
                                  <hr class="bg-blue-600 opacity-1">
                                  <ul class="plan-features py-2">
                                    <li>
                                      <small class="circle circle-sm"><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Access to all courses</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Live interactions</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Unlimited hours</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Completion certificates</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Download videos</span>
                                    </li>
                                    <li>
                                      <small><img src="../assets/img/templates/check-white.svg" alt="Check"></small>
                                      <span>Dedicated support</span>
                                    </li>
                                  </ul>
                                  <a href="#" class="btn btn-xl btn-dark text-uppercase mt-2">SUBSCRIBE</a>
                                </div>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

                    
                      <div class="bg-gray-100 saas3-template">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section" id="switch-content2">
                            <div class="text-center">
                              <h5>Pricing</h5>
                              <h2 class="h1">Choose the right plan for you</h2>
                              <div class="d-flex align-items-center justify-content-center my-4">
                                <span>Monthly</span>
                                <div class="form-check form-check-lg form-switch mb-0 mx-4">
                                  <input class="form-check-input mr-0 bg-gray-300" onclick="toggleClass()" type="checkbox" id="flexSwitchCheckChecked10">
                                </div>
                                <span>Yearly</span>
                              </div>
                            </div>
                            <div class="row mt-5 mb-1 mb-md-4">
                              <div class="col-md-6" data-aos="fade-up" data-aos-delay="600">
                                <div class="card rounded-12 p-4 p-lg-5 border-0 shadow-dark-80 transition-3d-hover h-100 text-center">
                                  <h4 class="mb-2">Starter</h4>
                                  <h2 class="display-3">$<span class="monthly">24</span><span class="yearly">48</span></h2>
                                  <p class="mb-0 big lh-lg">emailed to me! The product is seamless too, fully responsive, made with a lot of care and attention to detail.</p>
                                  <div class="mt-4 mb-2">
                                    <a href="javascript:void(0);" class="btn btn-xl btn-block btn-info">Subscribe</a>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-6" data-aos="fade-up" data-aos-delay="600">
                                <div class="card rounded-12 p-4 p-lg-5 border-0 shadow-dark-80 transition-3d-hover h-100 text-center">
                                  <h4 class="mb-2">Enterprise</h4>
                                  <h2 class="display-3">$<span class="monthly">48</span><span class="yearly">99+</span></h2>
                                  <p class="mb-0 big lh-lg">emailed to me! The product is seamless too, fully responsive, made with a lot of care and attention to detail.</p>
                                  <div class="mt-4 mb-2">
                                    <a href="javascript:void(0);" class="btn btn-xl btn-block btn-info">Subscribe</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-7 m-auto text-center text-gray-600 pt-md-3">
                                <p class="mb-0 small lh-lg">This order process is provided by Paddle.com, who handle all payment services, invoicing and download links. Need more information? You can always reach us at <a href="mailto:support@fabrx.co" class="text-gray-600">support@fabrx.co</a></p>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

                    
                      <div class="pricing-template">
                        <div class="bg-blue-500 pb-5">
                          <div class="container text-center py-5">
                            <h1 class="display-3 mb-5 pb-5 text-white">Simple pricing for <br class="d-none d-md-block"> individuals & startups</h1>
                          </div>
                          <br>
                          <br>
                        </div>
                        <section class="muse-section pt-0 top-less">
                          <div class="container">
                            <div class="row">
                              <div class="col-md-6 col-lg-4">
                                <div class="bg-white rounded-12 shadow-dark-80 p-4 mb-4">
                                  <div class="px-0 px-md-3 py-0 py-md-2">
                                    <h4 class="font-weight-medium mb-0">Free</h4>
                                    <h2 class="h1 d-flex align-items-center">$<span class="monthly">0</span><small class="ml-2 fs-16">/mo</small></h2>
                                    <ul class="list-unstyled plan-list mt-4 pb-2">
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>4k monthly emails</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>2k subscribers</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email scheduling</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Design library</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email support</span></li>
                                    </ul>
                                    <div class="mt-4 mb-2 pt-2">
                                      <a href="javascript:void(0);" class="btn btn-lg btn-block btn-soft-primary">Start Free <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                        <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                        <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
                                      </svg>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-6 col-lg-4">
                                <div class="bg-white rounded-12 shadow-dark-80 p-4 position-relative mb-4">
                                  <span class="badge text-uppercase text-primary bg-blue-50 position-absolute top-0 right-0">Popular</span>
                                  <div class="px-0 px-md-3 py-0 py-md-2">
                                    <h4 class="font-weight-medium mb-0">Pro</h4>
                                    <h2 class="h1 d-flex align-items-center">$<span class="monthly">24</span><small class="ml-2 fs-16">/mo</small></h2>
                                    <ul class="list-unstyled plan-list mt-4 pb-2">
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>12k monthly emails</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>5k subscribers</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email scheduling</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Design library</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email support</span></li>
                                    </ul>
                                    <div class="mt-4 mb-2 pt-2">
                                      <a href="javascript:void(0);" class="btn btn-lg btn-block btn-primary">Start Free <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                        <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                        <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
                                      </svg>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-6 col-lg-4">
                                <div class="bg-white rounded-12 shadow-dark-80 p-4 mb-4">
                                  <div class="px-0 px-md-3 py-0 py-md-2">
                                    <h4 class="font-weight-medium mb-0">Enterprise</h4>
                                    <h2 class="h1 d-flex align-items-center">$<span class="monthly">99</span><small class="ml-2 fs-16">/mo</small></h2>
                                    <ul class="list-unstyled plan-list mt-4 pb-2">
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>30k monthly emails</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>15k subscribers</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email scheduling</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Design library</span></li>
                                      <li><img src="../assets/img/pages/right-check.svg" alt="Check"> <span>Email support</span></li>
                                    </ul>
                                    <div class="mt-4 mb-2 pt-2">
                                      <a href="javascript:void(0);" class="btn btn-lg btn-block btn-soft-primary">Join Enterprise <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                        <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                        <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
                                      </svg>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </section>
                      </div>