Pricing Sections

                  
                    <!-- Pricing start -->
                    <div id="pricing" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                      <div x-data="{ open: false }" class="container xl:max-w-6xl mx-auto px-4">
                        <!-- section header -->
                        <header class="text-center mx-auto mb-12">
                          <h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Our</span> Pricing</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
                          <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">Pay only fixed monthly fee and the rest we will handle for you!</p>
                        </header><!-- end section header -->

                        <!-- navigation -->
                        <div class="text-center mb-12 lg:mb-24">
                          <div class="flex justify-center mb-12 lg:mb-16">
                            <label class="flex items-center cursor-pointer justify-between mb-5">
                              <span>Monthly</span>
                              <input type="checkbox" id="js-checkbox" class="hidden">
                              <i @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()" class="relative inline-block w-24 h-7 border border-gray-200 dark:border-gray-700 rounded-xl transition mx-4">
                                <span :class="{ 'hidden': open, 'block': !(open) }" x-description="off" x-state:on="on" x-state:off="off" class="absolute ltr:left-0 rtl:right-0 w-10 h-6 rounded-xl bg-blue-700" ></span>
                                <span :class="{ 'block': open, 'hidden': !(open) }" x-description="on" x-state:on="on" x-state:off="off" class="absolute ltr:right-0 rtl:left-0 w-10 h-6 rounded-xl bg-blue-700"></span>
                              </i>
                              <span>Yearly</span>
                            </label>
                          </div>
                        </div>

                        <!-- row -->
                        <div class="flex flex-wrap flex-row -mx-4 justify-center">
                          <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4">
                            <div class="xl:px-2">
                              <!-- price table-->
                              <div class="relative bg-white shadow-xl border border-gray-100 dark:bg-gray-800 dark:border-gray-800 rounded-xl mb-12 wow fadeInLeft" data-wow-duration="1s">
                                <!-- pricing header -->
                                <header class="relative pt-12 px-16 pb-4">
                                  <h3 class="text-2xl leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Starter</h3>
                                  <p class="text-gray-500">Start Up</p>
                                  <div class="h-1 w-full bg-blue-500 mt-2 mb-5"></div>
                                  <div>
                                    <h4 :class="{ 'hidden': open, 'block': !(open) }" x-description="off" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$19.99 <span class="small fw-light">/Month</span></h4>
                                    <h4 :class="{ 'block': open, 'hidden': !(open) }" x-description="on" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$199.99 <span class="small fw-light">/Year</span></h4>
                                  </div>
                                </header><!-- end pricing header -->

                                <!-- pricing content -->
                                <div class="relative px-16 pb-12 text-gray-500">
                                  <div class="mb-8">
                                    <p class="mb-4">100 Employee</p>
                                    <p class="mb-4">Unlimited Features</p>
                                    <p class="mb-4">Presentation Software</p>
                                    <p class="mb-4">Project Management</p>
                                    <p class="mb-4">Event Management</p>
                                  </div>
                                  <a class="py-3 px-5 block text-center rounded-md leading-normal text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0" href="#">Get Started</a>
                                </div><!-- end pricing content -->
                              </div><!-- End price table-->
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4">
                            <div class="xl:px-2">
                              <!-- price table-->
                              <div class="relative bg-white shadow-xl border border-gray-100 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-800 rounded-xl lg:-mt-8 mb-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
                                <!-- ribbon -->
                                <div class="absolute top-0 ltr:right-0 ltr:text-right rtl:left-0 rtl:text-left w-36 h-36 text-sm">
                                  <span class="absolute top-4 ltr:right-0 rtl:left-0 px-4 py-2 block align-center shadow bg-yellow-300 text-gray-800">Popular</span>
                                </div>
                                <!-- pricing header -->
                                <div class="relative pt-12 px-16 pb-4">
                                  <h3 class="text-2xl leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Professional</h3>
                                  <p class="text-gray-500">Small Business</p>
                                  <div class="h-1 w-full bg-blue-500 mt-2 mb-5"></div>
                                  <div>
                                    <h4 :class="{ 'hidden': open, 'block': !(open) }" x-description="off" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$29.99 <span class="small fw-light">/Month</span></h4>
                                    <h4 :class="{ 'block': open, 'hidden': !(open) }" x-description="on" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$299.99 <span class="small fw-light">/Year</span></h4>
                                  </div>
                                </div><!-- end pricing header -->

                                <!-- pricing content -->
                                <div class="relative px-16 pb-12 text-gray-500">
                                  <div class="mb-8">
                                    <p class="mb-4">500 Employee</p>
                                    <p class="mb-4">Unlimited Features</p>
                                    <p class="mb-4">Presentation Software</p>
                                    <p class="mb-4">Project Management</p>
                                    <p class="mb-4">Event Management</p>
                                    <p class="mb-4">Most Popular</p>
                                  </div>
                                  <a class="py-3 px-5 block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" href="#">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="ltr:mr-2 rtl:ml-2 transform ltr:rotate-0 rtl:-rotate-90 inline-block" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>Get Started
                                  </a>
                                </div><!-- end pricing content -->
                              </div><!-- end pricing table -->
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4">
                            <div class="xl:px-2">
                              <!-- price table-->
                              <div class="relative bg-white shadow-xl border border-gray-100 dark:bg-gray-800 dark:border-gray-800 rounded-xl mb-12 wow fadeInRight" data-wow-duration="1s">
                                <!-- pricing header -->
                                <header class="relative pt-12 px-16 pb-4">
                                  <h3 class="text-2xl leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Expert</h3>
                                  <p class="text-gray-500">Big Business</p>
                                  <div class="h-1 w-full bg-blue-500 mt-2 mb-5"></div>
                                  <div>
                                    <h4 :class="{ 'hidden': open, 'block': !(open) }" x-description="off" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$39.99 <span class="small fw-light">/Month</span></h4>
                                    <h4 :class="{ 'block': open, 'hidden': !(open) }" x-description="on" x-state:on="on" x-state:off="off" class="text-2xl leading-normal mb-2 font-semibold text-blue-500">$399.99 <span class="small fw-light">/Year</span></h4>
                                  </div>
                                </header><!-- end pricing header -->

                                <!-- pricing content -->
                                <div class="relative px-16 pb-12 text-gray-500">
                                  <div class="mb-8">
                                    <p class="mb-4">1000 Employee</p>
                                    <p class="mb-4">Unlimited Features</p>
                                    <p class="mb-4">Presentation Software</p>
                                    <p class="mb-4">Project Management</p>
                                    <p class="mb-4">Event Management</p>
                                  </div>
                                  <a class="py-3 px-5 block text-center rounded-md leading-normal text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0" href="#">Get Started</a>
                                </div><!-- end pricing content -->
                              </div><!-- End price table-->
                            </div>
                          </div>
                        </div><!-- end row -->
                      </div>
                    </div><!-- End Pricing -->
                  
                

                  
                    <!-- Pricing start -->
                    <div id="pricing" class="relative py-20 lg:py-24 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <!-- section header -->
                        <header class="text-center mx-auto mb-12">
                          <h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">Our Pricing</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
                          <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">No additional costs. Pay only one time and free for next update!</p>
                        </header><!-- end section header -->

                        <div class="pt-6">
                          <div class="flex flex-wrap flex-row -mx-4 justify-center">
                            <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4 wow fadeInLeft" data-wow-duration="1s">
                              <div class="px-6 md:px-2 lg:px-4">
                                <!-- pricing table -->
                                <div class="relative py-16 px-12 mb-12 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 shadow-xl text-center rounded-md">
                                  <!-- pricing Title -->
                                  <h3 class="text-lg mb-4 font-semibold uppercase">Multisite</h3>
                                  <div class="pb-2">
                                    <h4 class="text-4xl mb-2 font-semibold text-blue-700"><small>$</small>119</h4>
                                  </div>
                                  <!-- pricing content -->
                                  <ul class="space-y-6 mt-4 mb-12">
                                    <li>Unlimited end products</li>
                                    <li>Personal or client</li>
                                    <li>Lifetime Update</li>
                                    <li>Supports 24/7</li>
                                    <li>Can't product sold</li>
                                    <li>Can't for generators</li>
                                  </ul>
                                  <!-- Pricing Button -->
                                  <div class="py-2">
                                    <a href="#" rel="noopener" class="py-3 px-5 -ml-1 rounded-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Buy Now</a>
                                  </div>
                                </div><!-- end pricing table -->
                              </div>
                            </div>

                            <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
                              <div class="px-6 md:px-2 lg:px-4">
                                <!-- pricing table -->
                                <div class="relative py-16 px-12 mb-12 lg:-mt-6 bg-blue-700 text-gray-100 border border-gray-200 dark:border-gray-700 shadow-xl text-center rounded-md">
                                  <!-- ribbon -->
                                  <div class="absolute top-0 ltr:right-0 ltr:text-right rtl:left-0 rtl:text-left w-36 h-36 text-sm">
                                    <span class="absolute top-4 ltr:right-0 rtl:left-0 px-4 py-2 block align-center shadow bg-yellow-300 text-gray-800">Popular</span>
                                  </div>
                                  <!-- pricing title -->
                                  <h3 class="text-lg mb-4 font-semibold uppercase text-white">Single</h3>
                                  <div class="pb-2">
                                    <h4 class="text-4xl mb-2 font-semibold text-yellow-300"><small>$</small>39</h4>
                                  </div>
                                  <!-- pricing content -->
                                  <ul class="space-y-6 mt-4 mb-12">
                                    <li>1 end products</li>
                                    <li>Personal or client</li>
                                    <li>Lifetime Update</li>
                                    <li>Supports 24/7</li>
                                    <li>Most Popular</li>
                                    <li>Can't product sold</li>
                                    <li>Can't for generators</li>
                                  </ul>
                                  <!-- Pricing Button -->
                                  <div class="py-2">
                                    <a href="#" rel="noopener" class="py-3 px-5 -ml-1 rounded-md leading-5 text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">
                                      Buy Now
                                    </a>
                                  </div>
                                </div><!-- end pricing table -->
                              </div>
                            </div>

                            <div class="flex-shrink max-w-full w-11/12 md:w-1/2 lg:w-1/3 px-4 wow fadeInRight" data-wow-duration="1s">
                              <div class="px-6 md:px-2 lg:px-4">
                                <!-- pricing table -->
                                <div class="relative py-16 px-12 mb-12 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 shadow-xl text-center rounded-md">
                                  <!-- pricing Title -->
                                  <h3 class="text-lg mb-4 font-semibold uppercase">Extended</h3>
                                  <div class="pb-2">
                                    <h4 class="text-4xl mb-2 font-semibold text-blue-700"><small>$</small>499</h4>
                                  </div>
                                  <!-- pricing content -->
                                  <ul class="space-y-6 mt-4 mb-12">
                                    <li>1 end products</li>
                                    <li>Personal or client</li>
                                    <li>Lifetime Update</li>
                                    <li>Supports 24/7</li>
                                    <li>Can Use in product sold</li>
                                    <li>Can't for generators</li>
                                  </ul>
                                  <!-- Pricing Button -->
                                  <div class="py-2">
                                    <a href="#" rel="noopener" class="py-3 px-5 -ml-1 rounded-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Buy Now</a>
                                  </div>
                                </div><!-- end pricing table -->
                              </div>
                            </div>

                            <div class="flex-shrink max-w-full w-full px-4">
                              <p class="text-center font-small mb-0">
                                <a class="text-gray-500" rel="noopener" href="#" target="_blank">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="inline ltr:mr-2 rtl:ml-2" fill="currentColor" width="1rem" height="1rem" viewBox="0 0 640 512"><path d="M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>
                                  Full license details
                                </a>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End pricing -->