<section class="pb-8 pt-14 bg-gray-900 overflow-hidden">
<div class="px-4 md:px-16 mx-auto">
<div class="flex flex-wrap justify-between items-center mb-16">
<div class="w-full lg:w-auto mb-14 lg:mb-0">
<div class="flex flex-wrap">
<div class="w-full lg:w-auto">
<a class="inline-block" href="#">
<img src="suncealand-assets/logos/suncealand-white.svg" alt="">
</a>
</div>
<div class="w-full lg:w-auto lg:ml-8">
<span class="text-gray-300">Stay connected</span>
</div>
</div>
</div>
<div class="w-full lg:w-auto">
<a class="inline-block py-7 px-6 md:pl-8 md:pr-18 bg-gray-700 hover:bg-gray-600 rounded-3xl" href="#">
<div class="flex flex-wrap md:flex-nowrap items-center">
<div class="flex-shrink-0 w-full md:w-auto mb-2 md:mb-0 md:mr-7">
<div class="relative w-11 h-11">
<img src="suncealand-assets/images/avatar-girl-banner.png" alt="">
<img class="w-5 h-5 animate-bounce absolute bottom-0 right-0 -mr-1 -mb-1" src="suncealand-assets/logos/chat-logo.svg" alt="">
</div>
</div>
<div class="w-full md:w-auto">
<h5 class="text-2xl font-medium text-white">Chat</h5>
<p class="text-xs text-gray-200">Have any question? Let’s chat!</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4 -mb-10">
<div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
<h4 class="font-medium text-gray-100 mb-4">About</h4>
<ul>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Story</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Creative Team</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Founders</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Why us</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">How we compare</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Our Mission</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Idea</a></li>
</ul>
</div>
<div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
<h4 class="font-medium text-gray-100 mb-4">Product</h4>
<ul class="mb-12">
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Plans</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Pricing</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Integrations</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Sign Up</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Careers</a></li>
</ul>
<div>
<h4 class="font-medium text-gray-100 mb-4">Free trial</h4>
<ul>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Create account</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Details</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Manage your ID</a></li>
</ul>
</div>
</div>
<div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
<h4 class="font-medium text-gray-100 mb-4">Follow</h4>
<ul>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">LinkedIn</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Twitter</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Snapchat</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Instagram</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Facebook</a></li>
</ul>
</div>
<div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
<h4 class="font-medium text-gray-100 mb-4">Application</h4>
<ul>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download Desktop</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download Mobile</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Your history</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">FAQ’s</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Integrations</a></li>
</ul>
</div>
<div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
<h4 class="font-medium text-gray-100 mb-4">Support</h4>
<ul>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">FAQ’s</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Live Chat</a></li>
<li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Hotline +442234480171</a></li>
<li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Messages</a></li>
</ul>
</div>
</div>
<div class="mt-20 mb-4 pb-3 border-b border-gray-500">
<div class="flex flex-wrap -mx-4 -mb-2">
<div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Privacy Policy</a></div>
<div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Terms of Use</a></div>
<div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Sales and Refunds</a></div>
<div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Legal</a></div>
<div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Site Map</a></div>
</div>
</div>
<p class="text-xs text-gray-200">Copyright © 2022 suncealand. All rights reserved.</p>
</div>
</section>