Shuffle Components in Nightsable library

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Open positions</h2>
    </div>
  </div>
  <div class="mb-16 overflow-hidden">
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
      <div x-ref="slide1" class="flex-shrink-0 w-full">
        <div class="flex flex-wrap justify-between px-6 -m-5 lg:-m-10">
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Designer</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 w-full">
        <div class="flex flex-wrap justify-between px-6 -m-5 lg:-m-10">
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Software engineering</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Backend Developer</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 w-full">
        <div class="flex flex-wrap justify-between px-6 -m-5 lg:-m-10">
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 p-5 lg:p-10">
            <div class="relative text-center h-full px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
              <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
              <a class="group block mb-40 max-w-xs mx-auto" href="#">
                <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
              </a>
              <ul class="relative z-10 flex flex-wrap justify-center -m-2">
                <li class="flex flex-wrap items-center p-2">
                  <span class="mr-4 text-white">Miami</span>
                  <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
                  </svg>
                </li>
                <li class="flex flex-wrap items-center p-2">
                  <span class="text-white">Full Time</span>
                </li>
              </ul>
              <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap justify-center -m-4">
    <div class="w-auto p-4">
      <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex items-center justify-center hover:bg-gray-400 border border-gray-900 rounded-full transition duration-300" href="#" style="width: 87px; height: 87px;">
        <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.20312 15.4298L2.49812 9.72482C1.82437 9.05107 1.82437 7.94857 2.49812 7.27482L8.20312 1.56982" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
    <div class="w-auto p-4">
      <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center hover:bg-gray-400 border border-gray-900 rounded-full transition duration-300" href="#" style="width: 87px; height: 87px;">
        <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.79688 15.4298L7.50188 9.72482C8.17563 9.05107 8.17563 7.94857 7.50188 7.27482L1.79688 1.56982" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

<section x-data="{ showContent: false }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Open positions</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Jacob Jones</h3>
            <p class="text-gray-300">Jacobl is outgoing and enjoys networking. He is a natural leader and is skilled at motivating others. Michael values hard work and expects the same from those around him. He is always striving for success and pushing himself to be the best.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image2.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">Cybersecurity Analyst</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Cameron Williamson</h3>
            <p class="text-gray-300">Cameron is introverted but enjoys spending time with close friends. She is curious and enjoys learning new things, which makes her a great problem solver. Sarah values honesty and loyalty in her relationships.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image3.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </div>
                  <div class="w-auto p-4">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">Full-Stack Developer</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Annette Black</h3>
            <p class="text-gray-300">Annette is outgoing and loves meeting new people. She is empathetic and enjoys helping others. Emma is passionate about social justice and is involved in several student organizations.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image4.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Esther Howard</h3>
            <p class="text-gray-300">Emily is creative and has a keen eye for design. She enjoys trying out new design techniques and experimenting with different mediums. She values collaboration and enjoys working with clients to create a design that perfectly meets their needs.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image5.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">Cybersecurity Analyst</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Brooklyn Simmons</h3>
            <p class="text-gray-300">Brooklyn is detail-oriented and enjoys solving complex problems. He is always looking for ways to improve his coding skills and stay up-to-date with the latest web technologies. Alex values teamwork and enjoys collaborating with designers.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image6.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Jerome Bell</h3>
            <p class="text-gray-300">Jeromeis organized and strategic, with a passion for marketing. She is skilled at analyzing data and using it to inform marketing decisions. Jasmine values communication and enjoys working with clients to understand their needs.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image5.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Jimmy Fox</h3>
            <p class="text-gray-300">Jeromeis organized and strategic, with a passion for marketing. She is skilled at analyzing data and using it to inform marketing decisions. Jasmine values communication and enjoys working with clients to understand their needs.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image6.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">John Wilson</h3>
            <p class="text-gray-300">Jeromeis organized and strategic, with a passion for marketing. She is skilled at analyzing data and using it to inform marketing decisions. Jasmine values communication and enjoys working with clients to understand their needs.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full py-8 px-12 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/team/image3.png" alt="">
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-4">
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-4">
                    <a href="#">
                      <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                        <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                        <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
            <h3 class="mb-8 text-3xl text-white tracking-3xl">Megan Truck</h3>
            <p class="text-gray-300">Jeromeis organized and strategic, with a passion for marketing. She is skilled at analyzing data and using it to inform marketing decisions. Jasmine values communication and enjoys working with clients to understand their needs.</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/team/shadow.png" alt="">
        </div>
      </div>
    </div>
    <div :class="{ 'hidden': showContent }" class="flex flex-wrap justify-center max-w-xs mx-auto">
      <div class="w-full">
        <a x-on:click.prevent="showContent = true" class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">See all team</a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-xl text-center mx-auto mb-20">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Check our stats</span>
      <h2 class="font-heading text-7xl text-white tracking-tighter-xl">About us</h2>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap lg:items-center -m-8 lg:-m-12">
        <div class="w-full md:w-1/2 p-8 lg:p-12">
          <div class="max-w-max mx-auto">
            <img class="rounded-3xl" src="nightsable-assets/images/abouts/about.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8 lg:p-12">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Check our stats</span>
          <h2 class="mb-6 text-6xl md:text-7xl text-white tracking-tighter">Making credit history with nightcard</h2>
          <p class="mb-10 text-white text-opacity-60 md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <img class="mb-20" src="nightsable-assets/logos/logo.svg" alt="">
    <div class="flex flex-wrap items-end -m-8 mb-20">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h3 class="mb-10 text-3xl text-white">Subscribe to get tips and tactics to grow the way you want.</h3>
          <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="block w-full py-5 pl-8 pr-24 text-lg text-gray-300 placeholder-gray-400 bg-transparent" type="text" placeholder="Your email adress" style="height: 72px;">
            <a class="absolute right-0 top-0 flex items-center justify-center px-8 h-full bg-green-400 hover:bg-green-500 rounded-3xl transition duration-300" href="#">
              <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.79687 15.4299L7.50188 9.72495C8.17563 9.0512 8.17563 7.9487 7.50188 7.27495L1.79688 1.56995" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap md:justify-end -m-8 lg:-m-20">
          <div class="w-full md:w-auto p-8 lg:p-20">
            <h3 class="mb-6 text-lg text-white font-medium">About</h3>
            <ul>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Contact</a></li>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Blog</a></li>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Our Story</a></li>
              <li><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Careers</a></li>
            </ul>
          </div>
          <div class="w-full md:w-auto p-8 lg:p-20">
            <h3 class="mb-6 text-lg text-white font-medium">Company</h3>
            <ul>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Press</a></li>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Brand Assets</a></li>
              <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Changelog</a></li>
              <li><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Help centre</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-between -m-4">
      <div class="w-auto p-4">
        <p class="text-white text-opacity-60 font-medium">© 2023 Nightsablestudio.co</p>
      </div>
      <div class="w-auto p-4">
        <ul class="flex flex-wrap items-center -m-2 sm:-m-5">
          <li class="p-2 sm:p-5">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/images/footers/twitter-white.svg" alt="">
            </a>
          </li>
          <li class="p-2 sm:p-5">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/images/footers/linkedin-white.svg" alt="">
            </a>
          </li>
          <li class="p-2 sm:p-5">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/images/footers/tiktok-wh.svg" alt="">
            </a>
          </li>
          <li class="p-2 sm:p-5">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/images/footers/fb-white.svg" alt="">
            </a>
          </li>
          <li class="p-2 sm:p-5">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/images/footers/instagram-white.svg" alt="">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full">
  <div class="py-5 bg-green-400">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full md:flex-1 p-4">
          <p class="text-sm text-black">We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.</p>
        </div>
        <div class="w-full md:w-auto p-4">
          <div class="flex flex-wrap items-center md:justify-end -m-4">
            <div class="w-auto p-4"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 text-sm text-white font-medium tracking-tighter border-2 border-green-400 bg-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Accept</a></div>
            <div class="w-auto p-4"><a class="inline-block text-black underline font-medium tracking-tighter transition duration-300" href="#">Privacy Policy</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap md:-m-8">
      <div class="w-full md:w-1/2 md:p-8">
        <div class="flex flex-col justify-center h-full">
          <div class="py-20 px-4 md:max-w-lg mx-auto">
            <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
            <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Industry insights you wan`t delete. Delivered to your inbox weekly</h2>
            <p class="mb-12 text-gray-300">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
            <div class="mb-6 md:max-w-sm border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
              <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
            </div>
            <a class="inline-block px-8 md:px-16 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Subscribe</a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 md:p-8">
        <div class="h-full">
          <img class="h-full mx-auto md:mr-0 object-cover rounded-5xl" src="nightsable-assets/images/newsletter/man2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="flex items-center gap-4 p-2">
    <a class="text-white font-normal text-opacity-70 underline" href="#">Homepage</a>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M12.8334 8.23334L9.00841 4.40834C8.85228 4.25313 8.64107 4.16602 8.42091 4.16602C8.20076 4.16602 7.98955 4.25313 7.83341 4.40834C7.75531 4.48581 7.69331 4.57798 7.651 4.67953C7.6087 4.78108 7.58691 4.89 7.58691 5.00001C7.58691 5.11002 7.6087 5.21894 7.651 5.32049C7.69331 5.42204 7.75531 5.51421 7.83341 5.59168L11.6667 9.40834C11.7449 9.48581 11.8068 9.57798 11.8492 9.67953C11.8915 9.78108 11.9132 9.89 11.9132 10C11.9132 10.11 11.8915 10.2189 11.8492 10.3205C11.8068 10.422 11.7449 10.5142 11.6667 10.5917L7.83341 14.4083C7.67649 14.5642 7.5879 14.7759 7.58712 14.9971C7.58633 15.2182 7.67343 15.4306 7.82925 15.5875C7.98506 15.7444 8.19683 15.833 8.41797 15.8338C8.6391 15.8346 8.85149 15.7475 9.00841 15.5917L12.8334 11.7667C13.3016 11.2979 13.5645 10.6625 13.5645 10C13.5645 9.33751 13.3016 8.70209 12.8334 8.23334Z" fill="white"></path>
      </svg>
    </span>
    <a class="text-white font-normal text-opacity-70 underline" href="#">Services</a>
  </div>
</section>

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-tighter-xl">Features</h2>
    </div>
    <div class="relative mb-10 py-20 px-16 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
      <div class="max-w-6xl mx-auto">
        <div class="relative z-10 flex flex-wrap items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <div class="max-w-md mx-auto text-center">
              <h2 class="mb-6 text-7xl text-white tracking-tighter-xl">Making credit history</h2>
              <p class="text-white text-opacity-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum i</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-8">
            <img class="mx-auto md:mr-0" src="nightsable-assets/images/features/dashboard.png" alt="">
          </div>
        </div>
      </div>
      <img class="absolute bottom-0 left-0" src="nightsable-assets/images/features/bg-gray.png" alt="">
    </div>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/2 p-5">
        <div class="relative px-16 pt-14 pb-16 h-full bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <img class="mb-14" src="nightsable-assets/images/features/cards.png" alt="">
          <div class="relative z-10 max-w-sm text-center mx-auto">
            <h2 class="mb-6 text-7xl text-white tracking-tighter">Making credit history</h2>
            <p class="text-white text-opacity-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum i</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-5">
        <div class="relative px-16 pt-14 pb-16 h-full bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="mb-14 max-w-sm mx-auto">
            <div class="flex flex-wrap justify-center">
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/figma.svg" alt="">
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/notion.svg" alt="">
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/slack.svg" alt="">
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/spotify.svg" alt="">
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/twitter.svg" alt="">
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-24 h-24 bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
                  <img src="nightsable-assets/logos/brands/desktop.svg" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="relative z-10 max-w-sm text-center mx-auto">
            <h2 class="mb-6 text-7xl text-white tracking-tighter">Making credit history</h2>
            <p class="text-white text-opacity-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum i</p>
          </div>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-9 overflow-hidden" style="background: url('nightsable-assets/images/testimonials/people.jpg'); background-repeat: no-repeat; background-size: cover;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="pt-64 lg:pt-96">
      <img class="mb-8" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
      <h2 class="mb-8 text-3xl text-white tracking-tighter leading-normal md:max-w-3xl">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h2>
      <p class="text-white">
        <span class="font-light">Wade Warren</span>
        <span>- Director of Media Operations, VICE Media</span>
      </p>
    </div>
  </div>
  <img class="absolute top-0 left-0 w-full" src="nightsable-assets/images/testimonials/shadow-top.svg" alt="">
  <img class="absolute bottom-0 left-0 w-full" src="nightsable-assets/images/testimonials/shadow-bottom.svg" alt="">
</section>

<section class="relative pt-28 md:py-28 bg-gray-900 bg-opacity-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h2 class="font-heading mb-10 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md">Get a Nightsable App</h2>
        <div class="mb-20 md:max-w-md">
          <div class="flex flex-wrap -m-2">
            <div class="w-full sm:w-1/2 p-2">
              <img class="mb-4" src="nightsable-assets/images/application-section/icon1.svg" alt="">
              <h4 class="mb-2.5 text-white font-medium">Basic</h4>
              <p class="text-gray-300">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
            <div class="w-full sm:w-1/2 p-2">
              <img class="mb-4" src="nightsable-assets/images/application-section/icon2.svg" alt="">
              <h4 class="mb-2.5 text-white font-medium">Powered</h4>
              <p class="text-gray-300">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
          </div>
        </div>
        <a class="inline-block mb-16 px-8 py-4 font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get a free Nightsable App</a>
      </div>
    </div>
  </div>
  <img class="md:absolute md:right-0 md:bottom-0 md:w-8/12 xl:w-auto" src="nightsable-assets/images/application-section/phone3.png" alt="">
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-4xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Built for teams large and small</h2>
      <p class="text-gray-300 md:max-w-2xl mx-auto">The Nightsable marketplace is a one-stop shop to find partners, apps and integrations–everything you need to increase agent productivity and streamline workflows with Nightsable.</p>
    </div>
    <div class="md:max-w-4xl mx-auto">
      <div class="flex flex-wrap items-center justify-center -m-6 mb-6">
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/rbs-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/nine-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/drift-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/seek-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/deloitte-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/wise-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/intel-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/lenovo-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/sonder-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/sendle-white.png" alt="">
        </div>
      </div>
      <a class="flex justify-center text-white mx-auto font-medium underline" href="#">See more</a>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Let`s work together!</h2>
          <p class="mb-8 text-gray-300">Let us help you become even greater at what you do.
Fill out the following form and we will get back to you in the next 24 hours</p>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="First name">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Last Name">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <div class="relative overflow-hidden rounded-3xl">
              <select class="appearance-none pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
                <option hidden="">What can we help you with?</option>
                <option>Poland</option>
                <option>Norway</option>
                <option>France</option>
              </select>
              <svg class="absolute right-8 top-1/2 transform -translate-y-1/2" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.6004 1.4585L9.16706 6.89183C8.52539 7.5335 7.47539 7.5335 6.83372 6.89183L1.40039 1.4585" stroke="white" stroke-width="1.66667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <textarea class="mb-3 w-full px-6 py-4 text-gray-300 placeholder-gray-300 bg-transparent border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl resize-none" placeholder="Message" rows="9"></textarea>
          <div class="flex flex-wrap justify-end">
            <div class="w-auto"><a class="inline-block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Messge</a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <img class="rounded-5xl mx-auto md:mr-0" src="nightsable-assets/images/contact/googlemap.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative px-7 pt-10 pb-8 bg-gray-900 bg-opacity-30 max-w-lg mx-auto rounded-5xl">
      <div class="text-center mx-auto">
        <a class="mb-9 flex justify-center" href="#">
          <img src="nightsable-assets/logos/logo.svg" alt="">
        </a>
        <h3 class="mb-10 text-3xl font-medium text-white tracking-5xl">Log in to your account</h3>
        <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
        </div>
        <div class="mb-6 relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <img class="absolute right-7 top-1/2 transform -translate-y-1/2" src="nightsable-assets/images/sign-in/eyeslash.svg" alt="">
          <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="Password">
        </div>
        <a class="block mb-6 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a><a class="mb-10 inline-block text-sm text-gray-300 underline" href="#">Forgot password?</a>
        <div class="flex flex-wrap items-center mb-8">
          <div class="flex-1 bg-gray-900">
            <div class="h-px"></div>
          </div>
          <div class="px-5 text-xs text-gray-300 font-medium">or sign in with email</div>
          <div class="flex-1 bg-gray-900">
            <div class="h-px"></div>
          </div>
        </div>
        <div class="flex flex-wrap -1 mb-7">
          <div class="w-full p-1">
            <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
              <div class="mr-4 inline-block">
                <img src="nightsable-assets/images/sign-in/google.svg" alt="">
              </div>
              <span class="text-sm text-white font-medium">Sign in with Google</span>
            </a>
          </div>
          <div class="w-full p-1">
            <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
              <div class="mr-4 inline-block">
                <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
              </div>
              <span class="text-sm text-white font-medium">Sign in with Apple</span>
            </a>
          </div>
        </div>
      </div>
      <a class="absolute top-6 right-6" href="#">
        <img src="nightsable-assets/images/modals/close-icon.png">
      </a>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center -m-10">
          <div class="w-auto p-10">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block p-10">
            <ul class="flex items-center">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto hidden lg:block p-2">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
          </div>
          <div class="w-auto hidden lg:block p-2">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-black tracking-tighter bg-green-400 hover:bg-green-500 text-black border-2 border-green-400 focus:border-opacity-40 hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now for free</a></div>
          </div>
          <div class="w-auto lg:hidden p-2">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block text-center mb-4 px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a><a class="inline-block text-center px-8 py-4 text-black tracking-tighter bg-green-400 hover:bg-green-500 text-black border-2 border-green-400 focus:border-opacity-40 hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now for free</a></div>
      </div>
    </nav>
  </div>
</section>

<section class="pt-20 pb-24 bg-blueGray-950">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md mx-auto">Protecting you and your money</h2>
      <p class="mb-20 text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/cards/bg-image1.png" alt="">
          <div class="absolute bottom-0 left-0 w-full bg-gradient-card p-8">
            <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
            <a class="group inline-block max-w-sm" href="#">
              <h3 class="mb-4 text-3xl text-white tracking-3xl hover:underline">Safeguarded with leading banks</h3>
            </a>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/cards/bg-image2.png" alt="">
          <div class="absolute bottom-0 left-0 w-full bg-gradient-card p-8">
            <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
            <a class="group inline-block max-w-sm" href="#">
              <h3 class="mb-4 text-3xl text-white tracking-3xl hover:underline">Safeguarded with leading banks</h3>
            </a>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/cards/bg-image3.png" alt="">
          <div class="absolute bottom-0 left-0 w-full bg-gradient-card p-8">
            <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
            <a class="group inline-block max-w-sm" href="#">
              <h3 class="mb-4 text-3xl text-white tracking-3xl hover:underline">Safeguarded with leading banks</h3>
            </a>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative px-7 pt-10 pb-8 bg-gray-900 bg-opacity-30 max-w-lg mx-auto rounded-5xl">
      <div class="text-center mx-auto">
        <img class="mb-9 mx-auto" src="nightsable-assets/logos/logo.svg" alt="">
        <h3 class="mb-10 text-3xl font-medium text-white tracking-5xl">Lets Get Started</h3>
        <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Full name">
        </div>
        <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
        </div>
        <div class="mb-6 relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <img class="absolute right-7 top-1/2 transform -translate-y-1/2" src="nightsable-assets/images/sign-in/eyeslash.svg" alt="">
          <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="Password">
        </div>
        <a class="block mb-10 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Sign up</a>
        <div class="flex flex-wrap items-center mb-8">
          <div class="flex-1 bg-gray-900">
            <div class="h-px"></div>
          </div>
          <div class="px-5 text-xs text-gray-300 font-medium">or sign up with email</div>
          <div class="flex-1 bg-gray-900">
            <div class="h-px"></div>
          </div>
        </div>
        <div class="flex flex-wrap -1 mb-7">
          <div class="w-full p-1">
            <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
              <div class="mr-4 inline-block">
                <img src="nightsable-assets/images/sign-in/google.svg" alt="">
              </div>
              <span class="text-sm text-white font-medium">Sign up with Google</span>
            </a>
          </div>
          <div class="w-full p-1">
            <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
              <div class="mr-4 inline-block">
                <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
              </div>
              <span class="text-sm text-white font-medium">Sign up with Apple</span>
            </a>
          </div>
        </div>
      </div>
      <a class="absolute top-6 right-6" href="#">
        <img src="nightsable-assets/images/modals/close-icon.png">
      </a>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-8xl mx-auto">Why Nightsable Card?</h2>
      <p class="text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap divide-x divide-solid divide-gray-900 -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="text-center">
          <h3 class="mb-8 text-7xl lg:text-8xl xl:text-10xl text-green-400 tracking-8xl">80%</h3>
          <p class="mb-6 text-2xl text-white tracking-2xl w-56 mx-auto">feel lack of companionship</p>
          <p class="text-sm text-white">sometimes or often</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="text-center">
          <h3 class="mb-8 text-7xl lg:text-8xl xl:text-10xl text-green-400 tracking-8xl">70%</h3>
          <p class="mb-6 text-2xl text-white tracking-2xl w-24 mx-auto">feel left out</p>
          <p class="text-sm text-white">sometimes or often</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ showContent: false }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Our Team</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Jacob Jones</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle2.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Marvin McKinney</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle3.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Jenny Wilson</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle4.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Kristin Watson</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle5.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Robert Fox</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle6.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Kathryn Murphy</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle4.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Christian Lock</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle3.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Kelly Lindsey</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z" fill="#03A9F4"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-auto p-4">
                  <a class="inline-block" href="#">
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.86186 2.52273C5.86186 3.02168 5.71391 3.50942 5.43671 3.92428C5.1595 4.33914 4.76551 4.66248 4.30454 4.85342C3.84357 5.04436 3.33634 5.09432 2.84697 4.99698C2.35761 4.89964 1.90811 4.65937 1.5553 4.30656C1.20249 3.95376 0.962221 3.50425 0.864881 3.01489C0.767541 2.52553 0.817499 2.01829 1.00844 1.55732C1.19938 1.09635 1.52272 0.702357 1.93758 0.425156C2.35244 0.147955 2.84019 0 3.33913 0C4.0082 0 4.64987 0.265787 5.12297 0.73889C5.59608 1.21199 5.86186 1.85366 5.86186 2.52273Z" fill="white"></path>
                      <path d="M5.28941 6.7272V17.8726C5.28985 17.9548 5.27404 18.0363 5.24288 18.1124C5.21172 18.1885 5.16583 18.2577 5.10785 18.316C5.04987 18.3743 4.98093 18.4205 4.90501 18.4521C4.82909 18.4837 4.74768 18.4999 4.66545 18.4999H2.0065C1.92428 18.5001 1.84282 18.4841 1.76682 18.4528C1.69081 18.4214 1.62175 18.3753 1.56361 18.3172C1.50547 18.259 1.4594 18.19 1.42803 18.114C1.39667 18.038 1.38064 17.9565 1.38086 17.8743V6.7272C1.38086 6.56127 1.44678 6.40214 1.56411 6.28481C1.68144 6.16748 1.84057 6.10156 2.0065 6.10156H4.66545C4.83109 6.10201 4.98979 6.16812 5.10676 6.2854C5.22372 6.40268 5.28941 6.56156 5.28941 6.7272Z" fill="white"></path>
                      <path d="M19.1885 12.5292V17.9244C19.1887 18 19.174 18.0749 19.1451 18.1448C19.1163 18.2147 19.0739 18.2782 19.0205 18.3317C18.967 18.3851 18.9035 18.4275 18.8337 18.4563C18.7638 18.4851 18.6889 18.4998 18.6133 18.4996H15.7542C15.6786 18.4998 15.6037 18.4851 15.5338 18.4563C15.4639 18.4275 15.4004 18.3851 15.347 18.3317C15.2935 18.2782 15.2512 18.2147 15.2223 18.1448C15.1935 18.0749 15.1788 18 15.179 17.9244V12.6957C15.179 11.9153 15.4077 9.27821 13.139 9.27821C11.3815 9.27821 11.0232 11.0828 10.9526 11.8934V17.9244C10.9526 18.0755 10.8932 18.2206 10.7871 18.3282C10.6811 18.4358 10.5369 18.4974 10.3858 18.4996H7.62428C7.54883 18.4996 7.47412 18.4847 7.40443 18.4558C7.33474 18.4269 7.27144 18.3845 7.21816 18.3311C7.16489 18.2776 7.12268 18.2142 7.09395 18.1444C7.06523 18.0747 7.05056 17.9999 7.05078 17.9244V6.67812C7.05056 6.60267 7.06523 6.52791 7.09395 6.45814C7.12268 6.38836 7.16489 6.32494 7.21816 6.27151C7.27144 6.21808 7.33474 6.17568 7.40443 6.14676C7.47412 6.11783 7.54883 6.10294 7.62428 6.10294H10.3858C10.5384 6.10294 10.6847 6.16354 10.7925 6.27141C10.9004 6.37928 10.961 6.52558 10.961 6.67812V7.65021C11.6136 6.6714 12.5806 5.91626 14.6442 5.91626C19.2154 5.91626 19.1885 10.1847 19.1885 12.5292Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="{ 'hidden': showContent }" class="flex flex-wrap justify-center max-w-xs mx-auto">
      <div class="w-full">
        <a x-on:click.prevent="showContent = true" class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">See all team</a>
      </div>
    </div>
  </div>
</section>

<section x-data="{ showContent: false }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">FAQ</h2>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -m-1.5">
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">What are the limits for money transfers from the United States?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">Is it safe to send money with Revolut?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">How can I make an international transfer from the United States?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">How long does it take to send money abroad from the United States?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">Where can I transfer money to from the United States?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ showContent: false }" class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Open positions</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Software engineering</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Backend Developer</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Software engineering</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Backend Developer</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Software engineering</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Frontend Developer</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/career/shadow2.svg" alt="">
        </div>
      </div>
    </div>
    <div :class="{ 'hidden': showContent }" class="flex flex-wrap justify-center max-w-xs mx-auto mb-6">
      <div class="w-full">
        <a x-on:click.prevent="showContent = true" class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">See all positions</a>
      </div>
    </div>
  </div>
</section>