<div class="relative w-full ct-docs-disable-nav-fixed">
    <div>
       <nav class="w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-0 bg-white shadow-md">
          <div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
             <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase text-blueGray-500" href="#/"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/creative-tim/logo.png" class="rounded-full mr-2" style="width: 30px;"><span>Creative Tim</span></a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
             <div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
                <ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                   <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-500">Elements</a></li>
                   <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-500">Sections</a></li>
                   <li class="relative">
                      <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-800" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
                      <div class="hidden  z-50">
                         <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a></div>
                      </div>
                   </li>
                </ul>
                <ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                   <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-blueGray-500" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a></li>
                   <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-blueGray-500" href="https://www.instagram.com/creativetimofficial/" target="_blank"><i class="fab fa-instagram text-lg leading-lg opacity-75 hover:opacity-50 text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Follow on Instagram</span></a></li>
                   <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-blueGray-500" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a></li>
                   <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-blueGray-500" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
                </ul>
             </div>
          </div>
       </nav>
       <div class="p-0 flex items-center overflow-hidden relative min-h-screen-75">
          <div class="absolute w-full h-full bg-cover bg-50 z-2" style="background-image: url('../../assets/img/illustrations/500.svg');"></div>
          <div class="absolute w-full h-full bg-blueGray-900 z-1"></div>
          <div class="container mx-auto px-4 z-3 pt-20 relative w-6/12">
             <div class="justify-center flex flex-wrap -mx-4 text-center">
                <h1 class="text-5xl font-bold text-white leading-tight mt-0 mb-24">Our tools help you save 3 weeks of development...</h1>
             </div>
          </div>
          <div class="w-full absolute text-white bottom-0 z-3">
             <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
                <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
                   <polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
                </svg>
             </div>
          </div>
       </div>
       <div class="container mx-auto px-4 z-3 -mt-64 pt-20 relative w-8/12">
          <div class="justify-center flex flex-wrap -mx-4">
             <div class="bg-white rounded-lg shadow-lg">
                <div class="text-center -mt-6">
                   <div class="bg-emerald-500 rounded-full h-16 w-16 inline-flex items-center justify-center"><i class="text-xl text-white fas fa-rocket"></i></div>
                </div>
                <p class="pt-6 pb-12 px-12 text-lg leading-relaxed text-center">We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.</p>
             </div>
          </div>
       </div>
    </div>
    <div class="mt-12 main">
       <section class="py-20">
          <div class="container mx-auto px-4">
             <div class="mb-12 flex flex-wrap -mx-4 justify-start">
                <div class="px-4 relative w-full lg:w-8/12 text-left">
                   <h6 class="mb-2 font-bold uppercase text-blueGray-800">Have you seen us?</h6>
                   <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Some of Our Pricing Plans</h3>
                   <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
                </div>
             </div>
             <div class="flex flex-wrap -mx-4 items-center">
                <div class="md:pr-0 px-4 relative w-full md:w-5/12">
                   <div class="shadow-lg rounded-lg text-center text-blueGray-500 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 bg-blueGray-800">
                      <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-700">
                         <h4 class="font-bold uppercase my-2 text-white">Freelancer Package</h4>
                      </div>
                      <div class="lg:px-12 px-4 py-5 flex-auto">
                         <div class="text-6xl font-normal leading-tight font-bold text-white">$249</div>
                         <span class="text-lg text-white opacity-50">Lifetime Access</span>
                         <ul class="mt-8 mb-8 list-none">
                            <li class="py-2">
                               <div class="flex items-center">
                                  <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fas fa-folder-open"></i></span>
                                  <h6 class="text-lg text-white opacity-75">Complete documentation</h6>
                               </div>
                            </li>
                            <li class="py-2">
                               <div class="flex items-center">
                                  <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fab fa-sketch"></i></span>
                                  <h6 class="text-lg text-white opacity-75">Working materials in Sketch</h6>
                               </div>
                            </li>
                            <li class="py-2">
                               <div class="flex items-center">
                                  <span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fas fa-archive"></i></span>
                                  <h6 class="text-lg text-white opacity-75">Unlimited cloud storage</h6>
                               </div>
                            </li>
                         </ul>
                         <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Buy Now</button>
                      </div>
                      <div class="bg-transparent mt-2 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-700"><a class="text-blueGray-500" href="javascript:;">More details...</a></div>
                   </div>
                </div>
                <div class="md:pl-0 px-4 relative w-full md:w-7/12">
                   <div class="bg-white text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
                      <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-300">
                         <h4 class="pt-2 text-2xl font-bold mt-0 mb-2 text-lightBlue-500">Enterprise Offer</h4>
                      </div>
                      <div class="lg:px-12 px-4 py-5 flex-auto">
                         <div class="leading-relaxed text-blueGray-500">What colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.</div>
                         <table class="mt-6 w-full mb-4 text-blueGray-700 border-collapse border border-solid border-blueGray-200">
                            <tbody>
                               <tr>
                                  <td class="text-center p-3 border-t border">24/7 Support</td>
                                  <td class="text-center p-3 border-t border">Design Tools</td>
                               </tr>
                               <tr>
                                  <td class="text-center p-3 border-t border">10.000 emails</td>
                                  <td class="text-center p-3 border-t border">Private Brand</td>
                               </tr>
                            </tbody>
                         </table>
                      </div>
                      <div class="bg-transparent mt-4 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-300"><a class="text-lightBlue-500" href="javascript:;">Contact Us</a></div>
                   </div>
                </div>
             </div>
          </div>
       </section>
       <div class="relative py-8">
          <div class="container mx-auto px-4">
             <div class="py-12">
                <div class="flex flex-wrap -mx-4 justify-center">
                   <div class="px-4 relative w-full text-center">
                      <span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded-full px-3">Fight hard</span>
                      <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">It's time to know</h2>
                      <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">Go and show them how strong you are. Leave them with their jaws to the ground, and hit them so that they faint on the ropes. Since you've got talent, you have to wear a crown.</p>
                   </div>
                </div>
                <div class="items-center flex flex-wrap -mx-4">
                   <div class="text-left px-4 relative w-full lg:w-4/12">
                      <div class="text-lightBlue-500 border-lightBlue-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-cog text-1625"></i></div>
                      <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Social Conversation</h6>
                      <p class="mb-2 text-blueGray-400">We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
                      <a class="text-lightBlue-500" href="javascript:;">More about us <i class="ml-1 fas fa-angle-right"></i></a>
                   </div>
                   <div class="text-left px-4 relative w-full lg:w-4/12">
                      <div class="text-emerald-500 border-emerald-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-atom text-1625"></i></div>
                      <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Analyze Performance</h6>
                      <p class="mb-2 text-blueGray-400">Don't get your heart broken by people we love, even that we give them all we have. Then we lose family over time. As we live, our hearts turn colder.</p>
                      <a class="text-lightBlue-500" href="javascript:;">Learn about our products <i class="ml-1 fas fa-angle-right"></i></a>
                   </div>
                   <div class="text-left px-4 relative w-full lg:w-4/12">
                      <div class="text-orange-500 border-orange-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-globe-europe text-1625"></i></div>
                      <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Measure Conversions</h6>
                      <p class="mb-2 text-blueGray-400">What else could rust the heart more over time? Blackgold. The time is now for it to be okay to be great. or being a bright color. For standing out.</p>
                      <a class="text-lightBlue-500" href="javascript:;">Check our documentation <i class="ml-1 fas fa-angle-right"></i></a>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="overflow-hidden contact-us-3 py-20">
          <div class="p-0 flex items-center relative min-h-400-px h-400-px max-h-999-px mb-50-px"><img alt="..." class="w-full" src="../../assets/img/illustrations/bg_contactus3.svg"></div>
          <div class="pt-12 container mx-auto px-4">
             <div class="mb-12 flex flex-wrap -mx-4 justify-center">
                <div class="px-4 relative w-full lg:w-8/12 text-center">
                   <h6 class="mb-2 text-lg font-bold uppercase text-lightBlue-500">We are here</h6>
                   <h2 class="text-4xl font-bold mt-0 mb-1 text-blueGray-700">Are you looking for answers?</h2>
                   <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">You have no idea who I am. You do not know me at all. Have you ever written a song line that a full crowd would shout when you enter the stage? I do not think so.</p>
                </div>
             </div>
             <div class="flex flex-wrap -mx-4 items-center justify-center -mt-6"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="mr-1 fas fa-comment"></i> Chat with us</button></div>
             <div class="flex flex-wrap -mx-4 mt-12">
                <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                   <div class="text-center py-6">
                      <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-map-marker-alt text-lg"></i></div>
                      <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Address</h4>
                      <div class="mb-4">
                         <p class="text-blueGray-500">12124 First Street, nr 54</p>
                      </div>
                   </div>
                </div>
                <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                   <div class="text-center py-6">
                      <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-envelope text-lg"></i></div>
                      <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Email</h4>
                      <div class="mb-4">
                         <p class="text-blueGray-500">[email protected]</p>
                      </div>
                   </div>
                </div>
                <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                   <div class="text-center py-6">
                      <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-mobile-alt text-lg"></i></div>
                      <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Phone</h4>
                      <div class="mb-4">
                         <p class="text-blueGray-500">+1(424) 535 3523</p>
                      </div>
                   </div>
                </div>
                <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12">
                   <div class="text-center py-6">
                      <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-user-circle text-lg"></i></div>
                      <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Contact</h4>
                      <div class="mb-4">
                         <p class="text-blueGray-500">Andrew Samian</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="py-12 bg-blueGray-800 project-2">
          <div class="container mx-auto px-4">
             <div class="mb-12">
                <div class="mb-12 flex flex-wrap -mx-4 justify-center">
                   <div class="px-4 relative w-full lg:w-8/12 text-center">
                      <h6 class="mb-2 text-lg font-bold uppercase text-teal-500">Have you seen us?</h6>
                      <h2 class="text-4xl font-bold mt-0 mb-1 text-white">Some of Our Awesome Projects</h2>
                      <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
                   </div>
                </div>
             </div>
             <div class="flex flex-wrap -mx-4">
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-lightBlue-500 text-white"><i class="fas fa-heart block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Message from team</h4>
                         <p class="text-blueGray-500 leading-relaxed">If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try.</p>
                         <div class="text-lightBlue-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">More details...</a></div>
                      </div>
                   </div>
                </div>
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-emerald-500 text-white"><i class="fas fa-book-reader block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Looking great</h4>
                         <p class="text-blueGray-500 leading-relaxed">You have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s motivating the doers.</p>
                         <div class="text-emerald-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">Check more</a></div>
                      </div>
                   </div>
                </div>
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-red-500 text-white"><i class="fas fa-rocket block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Developer first</h4>
                         <p class="text-blueGray-500 leading-relaxed">For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it? I shure can!</p>
                         <div class="text-red-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">Check more</a></div>
                      </div>
                   </div>
                </div>
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-blueGray-500 text-white"><i class="fas fa-heart block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Prepare launch</h4>
                         <p class="text-blueGray-500 leading-relaxed">Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out. It’s like a little kid, a little boy.</p>
                         <div class="text-blueGray-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">Check more</a></div>
                      </div>
                   </div>
                </div>
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-orange-500 text-white"><i class="fas fa-book-reader block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Premium Support</h4>
                         <p class="text-blueGray-500 leading-relaxed">Pink is obviously a better color. Everyone’s born confident, and everything’s taken away from you matters is the people who are sparked by it follow their dreams, too.</p>
                         <div class="text-orange-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">Check more</a></div>
                      </div>
                   </div>
                </div>
                <div class="px-4 mb-12 relative w-full md:w-4/12">
                   <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:z-2">
                      <div class="-mt-6 shadow-lg rounded-full mx-auto w-16 h-16 inline-flex justify-center items-center transition-all duration-300 ease-in-out transform group-hover:scale-75 bg-teal-500 text-white"><i class="fas fa-trophy block mx-auto text-xl"></i></div>
                      <div class="pt-8 pb-16 px-10 flex-auto relative overflow-hidden">
                         <h4 class="text-2xl font-bold mt-0 mb-2">Design tools</h4>
                         <p class="text-blueGray-500 leading-relaxed">Constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams the position that we want to be.</p>
                         <div class="text-teal-500 border-blueGray-200 opacity-0 rounded-b px-4 py-4 border-t absolute bottom-0 left-0 w-full text-center flex items-center justify-center transition-all duration-300 ease-in-out transform translate-y-1/2 group-hover:translate-y-0 group-hover:opacity-100"><a href="javascript:;">Check more</a></div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="bg-blueGray-800">
          <div class="py-12">
             <div class="my-12 container mx-auto px-4">
                <div class="mb-12 flex flex-wrap -mx-4 justify-center">
                   <div class="px-4 relative w-full lg:w-8/12 text-center">
                      <h6 class="mb-2 text-lg font-bold uppercase text-blueGray-200">Let's keep in contact</h6>
                      <h2 class="text-4xl font-bold mt-0 mb-1 text-white">Subscribe to our Newsletter</h2>
                      <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.</p>
                   </div>
                </div>
                <div class="flex flex-wrap -mx-4">
                   <div class="mx-auto px-4 relative w-full lg:w-7/12 w-10/12">
                      <div class="relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded-lg">
                         <div class="px-5 py-3 flex-auto">
                            <form class="my-0">
                               <div class="flex flex-wrap -mx-4">
                                  <div class="px-4 relative w-full sm:w-8/12 pt-4">
                                     <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fa fa-envelope"></i></span><input placeholder="Email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
                                  </div>
                                  <div class="px-4 sm:pl-0 relative w-full sm:w-4/12 text-right pt-4"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">Subscribe</button></div>
                               </div>
                            </form>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div class="pt-12 pb-4 border-b bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="justify-between items-center flex flex-wrap -mx-4">
             <div class="px-4 relative w-full lg:w-6/12">
                <h3 class="text-xl font-bold leading-normal mt-0">Thank you for supporting us!</h3>
                <h4 class="leading-normal mt-1 mb-2 text-blueGray-500">Let's get in touch on any of these platforms.</h4>
             </div>
             <div class="text-right pr-6 px-4 relative w-full lg:w-6/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-facebook"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-dribbble"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-github"></i></button></div>
          </div>
       </div>
    </div>
    <footer class="bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="items-center xl:justify-between flex flex-wrap -mx-4">
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <div class="text-center xl:text-left py-6 text-sm text-blueGray-500">Copyright © 2021<a href="https://www.creative-tim.com" target="_blank" class="font-semibold ml-1">Creative Tim</a>. All rights reserved.</div>
             </div>
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <ul class="justify-center xl:justify-end mx-auto flex flex-wrap list-none pl-0 mb-0">
                   <li><a href="https://www.creative-tim.com" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Creative Tim</a></li>
                   <li><a href="https://www.creative-tim.com/presentation" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">About us</a></li>
                   <li><a href="https://www.creative-tim.com/blog" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Blog</a></li>
                </ul>
             </div>
          </div>
       </div>
    </footer>
 </div>