Shuffle Components in Acros library

<section class="py-12 bg-gray-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-md ml-auto p-8 bg-gray-900 rounded-md">
      <button x-on:click="open = false" class="absolute top-0 right-0 m-7">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L8 8M15 15L8 8M8 8L15 1L1 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <h2 class="font-heading text-lg font-medium text-white mb-2">Sign up to our newsletter</h2>
      <p class="leading-7 text-white mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Remind me later</a></div>
    </div>
  </div>
</section>

<section class="relative h-screen py-24 sm:py-64 bg-gray-50">
  <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/http-codes/mountains.jpg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-lg">
      <span class="text-sm font-semibold uppercase">
        <span class="text-white">Error</span>
        <span class="text-green-500">404</span>
      </span>
      <h2 class="font-heading text-3xl sm:text-4xl text-white mt-2 mb-6">Page not found</h2>
      <p class="max-w-xl mx-auto text-lg leading-8 text-white mb-10">Sorry! We are unable to find the page you are looking for</p>
      <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Go back to home page</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Try again</a></div>
    </div>
  </div>
</section>

<section class="relative">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto lg:mx-0 py-18">
      <div class="mb-6">
        <span class="text-sm font-semibold uppercase">
          <span>create an</span>
          <span class="text-green-500">account</span>
        </span>
        <h4 class="max-w-xs font-heading text-3xl sm:text-4xl mt-2">Join our community</h4>
      </div>
      <form action="">
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">E-mail address</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type e-mail">
        </div>
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">Password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Type password">
        </div>
        <div class="mb-6">
          <label class="block text-sm leading-6 mb-2" for="">Repeat password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Repeat password">
        </div>
        <div class="flex items-center mb-6">
          <input class="w-4 h-4" type="checkbox" value="">
          <label class="ml-4 text-sm" for="">
            <span>By signing up, you agree to our</span>
            <a class="font-medium hover:underline" href="#">Terms,</a><a class="font-medium hover:underline" href="#">Data Policy,</a><a class="font-medium hover:underline" href="#">and Cookies Policy</a>
          </label>
        </div>
        <div class="text-right">
          <button class="block w-full py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" type="submit">Get Started</button>
        </div>
      </form>
    </div>
  </div>
  <img class="lg:absolute top-0 right-0 lg:w-1/2 h-112 w-full lg:h-full object-cover object-top" src="acros-assets/images/forms/work-2.jpg" alt="">
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-gray-900">
    <div class="flex items-center justify-between">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a class="inline-block" href="#">
              <img src="acros-assets/logo/logo-acros-white.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">About</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Company</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Services</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto hidden lg:flex items-center"><a class="inline-block mr-12 font-heading font-medium text-base text-white hover:text-gray-200" href="#">Log in</a><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a></div>
      <div class="w-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur backdrop-filter bg-gray-900 bg-opacity-50"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<div class="fixed z-50 bottom-0 w-full bg-gray-900" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4 py-6">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
        <img src="acros-assets/icons/cookies/cookie.svg" alt="">
      </div>
      <div class="w-full lg:w-3/5 px-4 mr-auto mb-8 lg:mb-0">
        <div class="max-w-2xl">
          <h4 class="font-heading text-white text-lg font-medium mb-2">Cookie Policy</h4>
          <p class="text-sm leading-6 text-white">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners.</p>
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="sm:flex items-center"><a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Decline</a></div>
      </div>
    </div>
  </div>
</div>

<section class="relative py-16">
  <div class="absolute bottom-0 left-0 w-full h-64 bg-gray-50"></div>
  <div class="relative container px-4 mx-auto">
    <img class="absolute top-0 left-0 w-full" src="acros-assets/images/call-to-action/cta-2-bg.png" alt="">
    <div class="max-w-3xl mx-auto mb-12 text-center">
      <span class="text-sm font-semibold uppercase">
        <span>New</span>
        <span class="text-green-500">feature</span>
      </span>
      <h1 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Take quick action that increases your brand's regular profit.</h1>
      <p class="max-w-2xl mx-auto text-lg leading-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="relative w-full">
      <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 group flex items-center justify-center w-24 h-24 rounded-full overflow-hidden" href="#">
        <div class="absolute top-0 left-0 w-full h-full backdrop-blur backdrop-filter bg-gray-900 bg-opacity-50 group-hover:bg-opacity-40 group-hover:bg-gray-800 transition duration-150"></div>
        <span class="relative">
          <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1336 12.2449C13.1896 14.3409 7.89891 17.8875 5.19224 19.0262C4.76024 19.2075 3.65891 19.5915 3.42158 19.5969C2.91758 19.6129 2.43224 19.3302 2.19758 18.8769C2.10691 18.7009 1.84024 17.5515 1.75491 17.0395C1.50158 15.4822 1.37091 13.0635 1.37358 10.6315C1.37091 8.07955 1.51224 5.54621 1.79491 4.00488C1.86958 3.58888 2.08824 2.63155 2.15224 2.47688C2.27224 2.18888 2.49091 1.96221 2.75491 1.82088C2.95758 1.71155 3.18958 1.65288 3.42158 1.66088C3.65891 1.66621 4.62424 2.00488 4.95491 2.13555C7.56291 3.14888 13.0802 6.82355 15.1069 8.98355C15.2882 9.17821 15.7869 9.70088 15.8696 9.80755C16.0589 10.0475 16.1522 10.3382 16.1522 10.6315C16.1522 10.9035 16.0696 11.1809 15.8989 11.4129C15.8109 11.5329 15.3016 12.0662 15.1336 12.2449Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </a>
      <img class="block h-100 w-full rounded object-cover object-top" src="acros-assets/images/call-to-action/cta-3-women.png" alt="">
    </div>
  </div>
</section>

<section class="pb-14">
  <div class="container px-4 mx-auto">
    <div class="flex items-center py-4 mb-8">
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Home</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Blog</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs text-gray-300 font-medium uppercase" href="#">Article</a>
    </div>
    <div class="max-w-3xl mx-auto mb-12">
      <a class="inline-block font-heading text-green-500 hover:text-green-600 mb-2" href="#">#family</a>
      <h3 class="font-heading text-3xl sm:text-4xl mb-8">The generated Lorem Ipsum is therefore always free from repetition</h3>
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full mr-3" src="acros-assets/images/blog-content/man-32x32.png" alt="">
        <a class="text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        <div class="w-px h-8 mx-4 sm:mx-8 bg-gray-200"></div>
        <div class="flex items-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.09277 9.40421H20.9167" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 13.3097H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 13.3097H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 13.3097H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 17.1962H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 17.1962H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 17.1962H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.0438 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.9654 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2383 3.5791H7.77096C4.83427 3.5791 3 5.21504 3 8.22213V17.2718C3 20.3261 4.83427 21.9999 7.77096 21.9999H16.229C19.175 21.9999 21 20.3545 21 17.3474V8.22213C21.0092 5.21504 19.1842 3.5791 16.2383 3.5791Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <a class="ml-2 text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        </div>
      </div>
    </div>
    <img class="block w-full h-112 rounded-md object-cover" src="acros-assets/images/blog-content/people-1100x480.jpg" alt="">
    <div class="max-w-3xl mx-auto pt-12">
      <p class="text-lg leading-8 mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-md xl:max-w-lg">
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Our</span>
            <span class="text-green-500">Team</span>
          </div>
          <h1 class="font-heading text-3xl sm:text-4xl">Meet our awesome team. Lorem ipsum dolor sit amet boulique</h1>
        </div>
      </div>
      <div class="w-full lg:w-1/2 xl:w-auto ml-auto px-4">
        <div class="max-w-sm">
          <p class="leading-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-10">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/man-1-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Steven Johson</h4>
          <span class="leading-7 text-gray-300">CEO &amp; Founder</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/woman-1-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Justine Loren</h4>
          <span class="leading-7 text-gray-300">Assistant</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/woman-2-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Emma Witsel</h4>
          <span class="leading-7 text-gray-300">Marketing Manager</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/man-2-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Carl Axel</h4>
          <span class="leading-7 text-gray-300">Team Leader</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/man-1-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Steven Johson</h4>
          <span class="leading-7 text-gray-300">CEO &amp; Founder</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div>
          <img class="block w-full h-80 mb-4 rounded object-cover object-top" src="acros-assets/images/teams/woman-1-medium.jpg" alt="">
          <h4 class="font-heading leading-7 text-lg font-medium">Justine Loren</h4>
          <span class="leading-7 text-gray-300">Assistant</span>
          <div class="mt-2">
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
              </svg>
            </a>
            <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-18 pb-14 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap justify-center md:justify-between items-center mb-20">
      <div class="w-full md:hidden mb-12 text-center">
        <a class="inline-block" href="#">
          <img src="acros-assets/logo/logo-acros-column-white.svg" alt="">
        </a>
      </div>
      <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-16 text-center"><a class="inline-block mr-16 font-heading text-white" href="#">About</a><a class="inline-block font-heading text-white" href="#">Company</a></div>
      <div class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-auto">
        <a class="inline-block" href="#">
          <img src="acros-assets/logo/logo-acros-column-white.svg" alt="">
        </a>
      </div>
      <div class="w-full sm:w-auto text-center"><a class="inline-block mr-16 font-heading text-white" href="#">Services</a><a class="inline-block font-heading text-white" href="#">Testimonials</a></div>
      <div class="w-full md:hidden mt-12">
        <div class="flex flex-wrap items-center justify-center -mb-2">
          <a class="flex items-center justify-center w-12 h-12 mb-2 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              <mask id="mask0_37_110" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mb-2 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              <mask id="mask0_37_113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mb-2 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              <mask id="mask0_37_116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mb-2 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 2C4.685 2 2 4.75474 2 8.15226C2 10.871 3.719 13.1765 6.1025 13.9894C6.4025 14.0473 6.5125 13.8569 6.5125 13.6936C6.5125 13.5475 6.5075 13.1604 6.505 12.6475C4.836 13.0184 4.484 11.8221 4.484 11.8221C4.211 11.112 3.8165 10.9221 3.8165 10.9221C3.273 10.5407 3.8585 10.5486 3.8585 10.5486C4.461 10.5913 4.7775 11.1825 4.7775 11.1825C5.3125 12.1232 6.182 11.8513 6.525 11.6943C6.579 11.2962 6.7335 11.0254 6.905 10.8715C5.5725 10.7176 4.172 10.1886 4.172 7.83139C4.172 7.15992 4.4045 6.61106 4.7895 6.18063C4.722 6.02516 4.5195 5.3996 4.842 4.55231C4.842 4.55231 5.3445 4.38744 6.492 5.18308C6.972 5.04639 7.482 4.97856 7.992 4.97543C8.502 4.97856 9.012 5.04639 9.492 5.18308C10.632 4.38744 11.1345 4.55231 11.1345 4.55231C11.457 5.3996 11.2545 6.02516 11.1945 6.18063C11.577 6.61106 11.8095 7.15992 11.8095 7.83139C11.8095 10.1948 10.407 10.715 9.072 10.8663C9.282 11.051 9.477 11.4282 9.477 12.0047C9.477 12.828 9.4695 13.4896 9.4695 13.6894C9.4695 13.8506 9.5745 14.0431 9.882 13.9816C12.2825 13.1739 14 10.8668 14 8.15226C14 4.75474 11.3135 2 8 2V2Z" fill="white"></path>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.8 2H3.2C2.54 2 2 2.54 2 3.2V12.8C2 13.46 2.54 14 3.2 14H12.8C13.46 14 14 13.46 14 12.8V3.2C14 2.54 13.46 2 12.8 2ZM5.6 12.2H3.8V6.8H5.6V12.2ZM4.7 5.78C4.1 5.78 3.62 5.3 3.62 4.7C3.62 4.1 4.1 3.62 4.7 3.62C5.3 3.62 5.78 4.1 5.78 4.7C5.78 5.3 5.3 5.78 4.7 5.78ZM12.2 12.2H10.4V9.02C10.4 8.54002 9.98 8.12 9.5 8.12C9.02 8.12 8.6 8.54002 8.6 9.02V12.2H6.8V6.8H8.6V7.52C8.9 7.04 9.56 6.68 10.1 6.68C11.24 6.68 12.2 7.64 12.2 8.78V12.2Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="relative flex justify-between items-center">
      <div class="w-auto">
        <span class="mt-6 sm:mt-0 text-gray-300">2022 © Shuffle</span>
      </div>
      <div class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-auto">
        <div class="flex items-center">
          <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              <mask id="mask0_37_110" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              <mask id="mask0_37_113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              <mask id="mask0_37_116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 2C4.685 2 2 4.75474 2 8.15226C2 10.871 3.719 13.1765 6.1025 13.9894C6.4025 14.0473 6.5125 13.8569 6.5125 13.6936C6.5125 13.5475 6.5075 13.1604 6.505 12.6475C4.836 13.0184 4.484 11.8221 4.484 11.8221C4.211 11.112 3.8165 10.9221 3.8165 10.9221C3.273 10.5407 3.8585 10.5486 3.8585 10.5486C4.461 10.5913 4.7775 11.1825 4.7775 11.1825C5.3125 12.1232 6.182 11.8513 6.525 11.6943C6.579 11.2962 6.7335 11.0254 6.905 10.8715C5.5725 10.7176 4.172 10.1886 4.172 7.83139C4.172 7.15992 4.4045 6.61106 4.7895 6.18063C4.722 6.02516 4.5195 5.3996 4.842 4.55231C4.842 4.55231 5.3445 4.38744 6.492 5.18308C6.972 5.04639 7.482 4.97856 7.992 4.97543C8.502 4.97856 9.012 5.04639 9.492 5.18308C10.632 4.38744 11.1345 4.55231 11.1345 4.55231C11.457 5.3996 11.2545 6.02516 11.1945 6.18063C11.577 6.61106 11.8095 7.15992 11.8095 7.83139C11.8095 10.1948 10.407 10.715 9.072 10.8663C9.282 11.051 9.477 11.4282 9.477 12.0047C9.477 12.828 9.4695 13.4896 9.4695 13.6894C9.4695 13.8506 9.5745 14.0431 9.882 13.9816C12.2825 13.1739 14 10.8668 14 8.15226C14 4.75474 11.3135 2 8 2V2Z" fill="white"></path>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.8 2H3.2C2.54 2 2 2.54 2 3.2V12.8C2 13.46 2.54 14 3.2 14H12.8C13.46 14 14 13.46 14 12.8V3.2C14 2.54 13.46 2 12.8 2ZM5.6 12.2H3.8V6.8H5.6V12.2ZM4.7 5.78C4.1 5.78 3.62 5.3 3.62 4.7C3.62 4.1 4.1 3.62 4.7 3.62C5.3 3.62 5.78 4.1 5.78 4.7C5.78 5.3 5.3 5.78 4.7 5.78ZM12.2 12.2H10.4V9.02C10.4 8.54002 9.98 8.12 9.5 8.12C9.02 8.12 8.6 8.54002 8.6 9.02V12.2H6.8V6.8H8.6V7.52C8.9 7.04 9.56 6.68 10.1 6.68C11.24 6.68 12.2 7.64 12.2 8.78V12.2Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-auto"><a class="text-gray-300" href="#">Privacy Policy</a></div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
        <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-white': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-gray-50': !accordion }">1</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h3>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="leading-7 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
              </div>
            </div>
            <div class="flex-shrink-0 pt-2">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 1L7.99997 8L0.999968 1" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
            </div>
          </button>
          <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-white': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-gray-50': !accordion }">2</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Donec sed leo sit amet ante ornare laoreet in quis est?</h3>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="leading-7 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
              </div>
            </div>
            <div class="flex-shrink-0 pt-2">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 1L7.99997 8L0.999968 1" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
            </div>
          </button>
          <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-white': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-gray-50': !accordion }">3</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Mauris vitae ex ut lectus cursus ornare?</h3>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="leading-7 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
              </div>
            </div>
            <div class="flex-shrink-0 pt-2">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 1L7.99997 8L0.999968 1" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
            </div>
          </button>
          <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-white': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-gray-50': !accordion }">4</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Nam consequat, augue sed rutrum faucibus?</h3>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="leading-7 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
              </div>
            </div>
            <div class="flex-shrink-0 pt-2">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 1L7.99997 8L0.999968 1" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
            </div>
          </button>
          <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-white': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-gray-50': !accordion }">5</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Cras at ante non ligula pharetra elementum?</h3>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="leading-7 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
              </div>
            </div>
            <div class="flex-shrink-0 pt-2">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 1L7.99997 8L0.999968 1" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
            </div>
          </button>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">1</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">2</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">3</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">4</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">5</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">6</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="fixed z-50 bottom-0 w-full p-6" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="px-8 py-6 max-w-md bg-gray-900 rounded-md">
    <p class="font-heading text-lg text-white mb-6">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
    <div class="sm:flex items-center"><a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Decline</a></div>
  </div>
</div>

<section class="bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg py-20 mx-auto text-center">
      <span class="text-sm font-semibold uppercase">
        <span>Error</span>
        <span class="text-green-500">404</span>
      </span>
      <h2 class="font-heading text-3xl sm:text-4xl lg:text-5xl mt-2 mb-6">Page not found</h2>
      <p class="max-w-xl mx-auto text-lg leading-8 mb-10">Sorry! We are unable to find the page you are looking for</p>
      <div class="sm:flex items-center justify-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Go back to home page</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Try again</a></div>
    </div>
  </div>
  <img class="block w-full h-80 object-cover" src="acros-assets/images/http-codes/mountains-row.jpg" alt="">
</section>

<section class="py-16 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-lg mx-auto lg:mx-0 mb-6">
          <span class="text-sm font-semibold uppercase">
            <span class="text-white">sign up to our</span>
            <span class="text-green-500">newsletter</span>
          </span>
          <h2 class="font-heading text-3xl sm:text-4xl text-white mt-2">The standard chunk of Lorem Ipsum used since the 1500s</h2>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-lg mx-auto lg:mr-0 py-10 px-6 sm:px-12 bg-white rounded-md">
          <h3 class="font-heading font-medium text-2xl mb-4">Sign up to our newsletter</h3>
          <p class="leading-7 mb-8">There are many variations of passages of Lorem Ipsum available</p>
          <form action="">
            <input class="block w-full p-4 mb-4 font-heading text-gray-300 placeholder-gray-300 border border-gray-100 rounded-sm outline-none" type="text" placeholder="Name">
            <input class="block w-full p-4 mb-4 font-heading text-gray-300 placeholder-gray-300 border border-gray-100 rounded-sm outline-none" type="email" placeholder="E-mail">
            <button class="inline-block w-full py-4 px-6 text-center font-heading font-medium text-white text-base bg-green-500 hover:bg-green-600 rounded-sm transition duration-200" type="submit">Sign up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-14">
  <div class="container px-4 mx-auto">
    <div class="flex items-center py-4 mb-8">
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Home</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Blog</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs text-gray-300 font-medium uppercase" href="#">Article</a>
    </div>
    <img class="block w-full h-112 mb-12 rounded-md object-cover" src="acros-assets/images/blog-content/work-1100x400.jpg" alt="">
    <div class="max-w-3xl mx-auto">
      <a class="inline-block font-heading text-green-500 hover:text-green-600 mb-2" href="#">#family</a>
      <h3 class="font-heading text-3xl sm:text-4xl mb-8">The generated Lorem Ipsum is therefore always free from repetition</h3>
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full mr-3" src="acros-assets/images/blog-content/man-32x32.png" alt="">
        <a class="text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        <div class="w-px h-8 mx-4 sm:mx-8 bg-gray-200"></div>
        <div class="flex items-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.09277 9.40421H20.9167" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 13.3097H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 13.3097H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 13.3097H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 17.1962H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 17.1962H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 17.1962H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.0438 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.9654 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2383 3.5791H7.77096C4.83427 3.5791 3 5.21504 3 8.22213V17.2718C3 20.3261 4.83427 21.9999 7.77096 21.9999H16.229C19.175 21.9999 21 20.3545 21 17.3474V8.22213C21.0092 5.21504 19.1842 3.5791 16.2383 3.5791Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <a class="ml-2 text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        </div>
      </div>
    </div>
    <div class="max-w-3xl mx-auto pt-8">
      <p class="text-lg leading-8 mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <h3 class="font-heading text-lg font-medium mb-6">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto lg:mx-0 py-18">
      <div class="mb-6">
        <span class="text-sm font-semibold uppercase">Sign in</span>
        <h4 class="max-w-xs font-heading text-3xl sm:text-4xl mt-2">Join our community</h4>
      </div>
      <form action="">
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">E-mail address</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type e-mail">
        </div>
        <div class="mb-6">
          <label class="block text-sm leading-6 mb-2" for="">Password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Type password">
        </div>
        <div class="text-right mb-6">
          <button class="block w-full py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" type="submit">Sign in</button>
        </div>
        <a class="block font-heading text-center hover:underline mb-6" href="#">Forgot password</a>
        <a class="relative block px-3 py-4 mb-2 text-center bg-green-100 hover:bg-green-200 rounded-sm" href="#">
          <div class="absolute top-1/2 left-0 ml-3 transform -translate-y-1/2 flex items-center justify-center w-8 h-8 bg-white">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8182V8.51074H10.9054L11.1778 6.4417H9.08979V5.12092C9.08979 4.52207 9.25864 4.11397 10.1352 4.11397L11.2512 4.11352V2.26289C11.0582 2.23829 10.3957 2.18188 9.62456 2.18188C8.01431 2.18188 6.9119 3.14594 6.9119 4.91601V6.4417H5.09082V8.51074H6.9119V13.8182H9.08979Z" fill="#00CBA6"></path>
              <mask id="mask0_115_950" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8182V8.51074H10.9054L11.1778 6.4417H9.08979V5.12092C9.08979 4.52207 9.25864 4.11397 10.1352 4.11397L11.2512 4.11352V2.26289C11.0582 2.23829 10.3957 2.18188 9.62456 2.18188C8.01431 2.18188 6.9119 3.14594 6.9119 4.91601V6.4417H5.09082V8.51074H6.9119V13.8182H9.08979Z" fill="white"></path>
              </mask>
            </svg>
          </div>
          <span class="font-heading">Sign in with Facebook</span>
        </a>
        <a class="relative block px-3 py-4 mb-2 text-center bg-green-100 hover:bg-green-200 rounded-sm" href="#">
          <div class="absolute top-1/2 left-0 ml-3 transform -translate-y-1/2 flex items-center justify-center w-8 h-8 bg-white">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5453 4.0974C14.0902 4.29904 13.6019 4.43579 13.0889 4.49684C13.6128 4.18316 14.0137 3.68562 14.2038 3.09459C13.7124 3.38508 13.17 3.59601 12.5921 3.71035C12.1294 3.21667 11.4711 2.90918 10.741 2.90918C9.34035 2.90918 8.20465 4.04488 8.20465 5.4448C8.20465 5.64334 8.22705 5.83726 8.27033 6.02269C6.16273 5.91684 4.29386 4.90708 3.04305 3.37272C2.82441 3.74665 2.70002 4.18237 2.70002 4.64748C2.70002 5.52746 3.14813 6.30391 3.828 6.75817C3.41235 6.74427 3.02142 6.62993 2.67918 6.43987V6.47154C2.67918 7.69995 3.55374 8.72516 4.71338 8.95849C4.50091 9.01566 4.27687 9.04734 4.0451 9.04734C3.88132 9.04734 3.72293 9.03112 3.56764 9.00021C3.89057 10.0084 4.82695 10.7416 5.93639 10.7617C5.06877 11.4416 3.97479 11.8456 2.78657 11.8456C2.58184 11.8456 2.38019 11.8333 2.18164 11.8109C3.30421 12.5317 4.63691 12.952 6.06928 12.952C10.7349 12.952 13.2852 9.08752 13.2852 5.73607L13.2767 5.40773C13.775 5.05231 14.2061 4.60577 14.5453 4.0974Z" fill="#00CBA6"></path>
              <mask id="mask0_115_962" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5453 4.0974C14.0902 4.29904 13.6019 4.43579 13.0889 4.49684C13.6128 4.18316 14.0137 3.68562 14.2038 3.09459C13.7124 3.38508 13.17 3.59601 12.5921 3.71035C12.1294 3.21667 11.4711 2.90918 10.741 2.90918C9.34035 2.90918 8.20465 4.04488 8.20465 5.4448C8.20465 5.64334 8.22705 5.83726 8.27033 6.02269C6.16273 5.91684 4.29386 4.90708 3.04305 3.37272C2.82441 3.74665 2.70002 4.18237 2.70002 4.64748C2.70002 5.52746 3.14813 6.30391 3.828 6.75817C3.41235 6.74427 3.02142 6.62993 2.67918 6.43987V6.47154C2.67918 7.69995 3.55374 8.72516 4.71338 8.95849C4.50091 9.01566 4.27687 9.04734 4.0451 9.04734C3.88132 9.04734 3.72293 9.03112 3.56764 9.00021C3.89057 10.0084 4.82695 10.7416 5.93639 10.7617C5.06877 11.4416 3.97479 11.8456 2.78657 11.8456C2.58184 11.8456 2.38019 11.8333 2.18164 11.8109C3.30421 12.5317 4.63691 12.952 6.06928 12.952C10.7349 12.952 13.2852 9.08752 13.2852 5.73607L13.2767 5.40773C13.775 5.05231 14.2061 4.60577 14.5453 4.0974Z" fill="white"></path>
              </mask>
            </svg>
          </div>
          <span class="font-heading">Sign in with Twitter</span>
        </a>
      </form>
    </div>
  </div>
  <img class="lg:absolute top-0 right-0 lg:w-1/2 w-full h-112 lg:h-full object-cover object-top" src="acros-assets/images/forms/work-2.jpg" alt="">
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-gray-900">
    <div class="relative flex items-center justify-between">
      <div class="w-auto">
        <a class="inline-block" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="">
        </a>
      </div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:block">
        <ul class="flex items-center">
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">About</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Company</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Services</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="w-auto hidden lg:block"><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Contact</a></div>
      <div class="w-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-12 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-md ml-auto py-8 px-14 bg-white rounded-md">
      <div class="max-w-xs">
        <svg width="49" height="54" viewBox="0 0 49 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M43.5331 20.2485C43.5331 20.2485 42.0851 38.2085 41.2451 45.7739C40.8451 49.3872 38.6131 51.5045 34.9571 51.5712C27.9998 51.6965 21.0344 51.7045 14.0798 51.5579C10.5624 51.4859 8.36776 49.3419 7.97576 45.7925C7.13043 38.1605 5.69043 20.2485 5.69043 20.2485" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M47.2218 11.6392H2.00049" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M38.5082 11.6391C36.4149 11.6391 34.6122 10.1591 34.2016 8.10848L33.5536 4.86581C33.1536 3.36981 31.7989 2.33514 30.2549 2.33514H18.9669C17.4229 2.33514 16.0682 3.36981 15.6682 4.86581L15.0202 8.10848C14.6096 10.1591 12.8069 11.6391 10.7136 11.6391" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M31 44L33 20" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M19 44L17 20" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <h2 class="font-heading text-lg font-medium mt-6 mb-2">Sign up to our newsletter</h2>
        <p class="leading-7 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="sm:flex items-center justify-end"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Cancel</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Yes, delete</a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-end -mx-4 mb-12">
      <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
        <span class="text-sm font-semibold uppercase">Pricing</span>
        <h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="w-full xl:w-auto px-4">
        <p class="max-w-lg leading-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <h4 class="font-medium mb-6">It uses a dictionary of over:</h4>
        <ul>
          <li class="flex items-center mb-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
            </svg>
            <span class="ml-4">Complete documentation</span>
          </li>
          <li class="flex items-center mb-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
            </svg>
            <span class="ml-4">Working materials in Figma</span>
          </li>
          <li class="flex items-center mb-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
            </svg>
            <span class="ml-4">100GB cloud storage</span>
          </li>
          <li class="flex items-center mb-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
            </svg>
            <span class="ml-4">100GB cloud storage</span>
          </li>
          <li class="flex items-center">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
            </svg>
            <span class="ml-4">500 team members</span>
          </li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 md:mb-0">
        <div class="py-12 px-8 text-center bg-white rounded-md">
          <span class="font-heading font-medium text-lg">Individual</span>
          <div class="flex items-start justify-center mt-4 mb-4">
            <span class="font-heading font-medium text-lg">$</span>
            <span class="font-heading font-medium text-3xl leading-10">24,99</span>
          </div>
          <span>per year</span>
          <a class="block py-4 px-6 mt-18 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Try it for free</a>
          <span>1 editor per project</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="py-12 px-8 text-center bg-gray-900 rounded-md">
          <span class="font-heading font-medium text-white text-lg">Team</span>
          <div class="flex items-start justify-center mt-4 mb-4">
            <span class="font-heading font-medium text-white text-lg">$</span>
            <span class="font-heading font-medium text-white text-3xl leading-10">49,99</span>
          </div>
          <span class="text-white">per year</span>
          <a class="block py-4 px-6 mt-18 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Try it for free</a>
          <span class="text-white">Unlimited editors</span>
        </div>
      </div>
    </div>
  </div>
</section>