Shuffle Components in Nightsable library

<section class="position-fixed top-0 start-0 d-flex align-items-center justify-content-center bg-black bg-opacity-25 w-100 h-100">
  <div class="position-relative px-4 py-12 mw-2xl w-100">
    <div class="position-relative pt-10 bg-black rounded-5 overflow-hidden" style="max-height: 640px;">
      <button class="btn p-0 position-absolute top-0 end-0 m-6"><img src="nightsable-assets/images/modals/close-icon.png"></button>
      <div class="px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 align-items-center">
          <h3 class="mb-0 fs-4 fw-medium text-white text-center">Followers</h3><span class="ms-5 text-secondary-light">(13022 members)</span>
        </div>
        <div class="position-relative">
          <button class="btn p-0 position-absolute top-50 start-0 ms-6 translate-middle-y"><img class="img-fluid" src="nightsable-assets/images/modals/search.svg" alt=""></button>
          <input class="ps-16 form-control bg-transparent" type="search" name="" id="" placeholder="Search contacts">
        </div>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar1.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Devon Lane</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn py-2 ms-auto btn-sm btn-outline-light fw-medium" href="#" style="width: 115px;">+ Follow</a>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar2.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Courtney Henry</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn btn-primary py-2 ms-auto btn-sm fw-medium" href="#" style="width: 115px;">Following</a>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar3.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Ralph Edwards</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn py-2 ms-auto btn-sm btn-outline-light fw-medium" href="#" style="width: 115px;">+ Follow</a>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar4.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Esther Howard</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn py-2 ms-auto btn-sm btn-outline-light fw-medium" href="#" style="width: 115px;">+ Follow</a>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar5.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Eleanor Pena</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn py-2 ms-auto btn-sm btn-outline-light fw-medium" href="#" style="width: 115px;">+ Follow</a>
      </div>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between px-10 py-4 border-bottom border-dark-light">
        <div class="d-flex mb-6 mb-sm-0 align-items-center"><img class="img-fluid" src="nightsable-assets/images/modals/avatar2.png" alt="">
          <div class="ps-6"><span class="d-block lh-1 fw-medium">Eleanor Pena</span><span class="fs-9 text-secondary-light">Amet minim mollit non deserunt ullamco </span></div>
        </div><a class="btn py-2 ms-auto btn-sm btn-outline-light fw-medium" href="#" style="width: 115px;">+ Follow</a>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Our Team</h1>
    </div>
    <div class="mw-md mx-auto mw-md-none">
      <div class="row mb-n8">
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block mb-8 fs-4">Jacob Jones</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle2.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block mb-8 fs-4">Cameron Williamson</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle3.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block mb-8 fs-4">Annette Black</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle4.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block mb-8 fs-4">Esther Howard</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle6.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block mb-8 fs-4">Cybersecurity Analyst</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 pt-8 pb-12 px-8 ps-sm-14 pe-sm-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/team/shadow.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-6 align-items-center justify-content-between"><img src="nightsable-assets/images/team/avatar-circle5.png" alt="">
                <div><a class="btn p-0 me-6" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2367)">
                        <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                      </g>
                    </svg></a><a class="btn p-0" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_191_2369)">
                        <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                        <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                        <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                        <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                      </g>
                    </svg></a></div>
              </div><span class="d-block fs-9 text-secondary-light">Full-Stack Developer</span><span class="d-block mb-8 fs-4">Jerome Bell</span>
              <p class="text-secondary-light mb-0">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>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center mt-14"><a class="btn btn-primary w-100 mw-xs fw-medium" href="#">See all team</a></div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Blog</h1>
    </div>
    <div class="mw-md mw-md-none mx-auto">
      <div class="row mb-n20">
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
        <div class="col-12 col-md-6 col-lg-4 mb-20"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper4.png" alt="">
            <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
            <div class="mw-sm">
              <h6 class="mb-4">Women in business</h6>
              <p class="text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
            </div></a></div>
      </div>
    </div>
  </div>
</section>

<div class="position-fixed start-0 bottom-0 w-100 pb-10 px-4">
  <div class="d-flex justify-content-center">
    <div class="toast ps-4 w-100 mw-xs show align-items-center text-bg-dark bg-black border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex justify-content-center">
        <div class="toast-body">Your settings have been saved</div>
        <button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
</div>

<section class="pt-40 pt-sm-64 pt-lg-80 pb-10 position-relative overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;" src="nightsable-assets/images/testimonials/people.jpg" alt=""><img class="position-absolute top-0 start-0 w-100" src="nightsable-assets/images/testimonials/shadow-top.svg" alt=""><img class="position-absolute bottom-0 start-0 w-100" src="nightsable-assets/images/testimonials/shadow-bottom.svg" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto mx-lg-0 pt-40"><img class="d-block mb-8 img-fluid" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
      <p class="fs-4 text-white mb-8" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">“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”</p><span class="fw-light">Wade Warren</span><span>- Director of Media Operations, VICE Media</span>
    </div>
  </div>
</section>

<section class="bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-sm mw-md-lg mx-auto mx-md-0 pt-12 pb-80 pb-sm-12 py-lg-24 position-relative"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="mw-md font-heading mb-10" style="letter-spacing: -0.1rem;">Get a Nightsable App</h2>
      <div class="d-md-flex d-block mb-16">
        <div class="mw-xs pe-24">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 9.33301H28" stroke="white" stroke-width="2" stroke-linecap="round"></path>
            <path d="M8 16H24" stroke="white" stroke-width="2" stroke-linecap="round"></path>
            <path d="M13.334 22.667H18.6673" stroke="white" stroke-width="2" stroke-linecap="round"></path>
          </svg><span class="d-block fw-medium mt-4 mb-2">Basic</span>
          <p class="text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div>
        <div class="mw-xs pe-24">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.9994 25.4103H9.93944C6.46944 25.4103 5.01944 22.9303 6.69944 19.9003L9.81944 14.2803L12.7594 9.00027C14.5394 5.79027 17.4594 5.79027 19.2394 9.00027L22.1794 14.2903L25.2994 19.9103C26.9794 22.9403 25.5194 25.4203 22.0594 25.4203H15.9994V25.4103Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M25.4405 23.9996L16.0005 17.3896L6.56055 23.9996" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 7V17.39" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span class="d-block fw-medium mt-4 mb-2">Powered</span>
          <p class="text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div>
      </div><a class="btn btn-primary fw-medium" href="#">Get a free Nightsable App</a>
    </div><img class="position-absolute bottom-0 end-0 col-8 col-sm-9 col-md-8 me-sm-n20 me-xl-n0 img-fluid" src="nightsable-assets/images/application-section/phone3.png" alt="">
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-sm mx-auto mw-md-5xl">
      <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
        <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">About us</h1>
      </div>
      <div class="row align-items-center">
        <div class="col-md-6 mt-20 mt-md-0 order-last order-md-first"><img class="img-fluid d-block w-100 mw-md-xs mw-lg-md rounded-4" src="nightsable-assets/images/abouts/about.png" alt=""></div>
        <div class="col-md-6">
          <div class="mw-md ms-md-auto">
            <div class="mw-sm mw-xl-md"><span class="badge mb-4 text-primary">Nightsable Card</span>
              <h1 class="font-heading h3 text-white mb-8" style="letter-spacing: -0.2rem;">Making credit history with snazycard</h1>
            </div>
            <p class="mw-xs fs-7 text-secondary-light mb-10">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><a class="btn btn-outline-light-light fw-medium" href="#">Read more</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 pb-md-24 pb-lg-32 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="position-relative mw-lg mx-auto px-8 pt-10 pb-8 bg-dark bg-opacity-25 rounded-5">
      <button class="position-absolute top-0 end-0 me-6 mt-6 btn p-0"><img class="img-fluid" src="nightsable-assets/images/modals/close-icon.png" alt=""></button>
      <div class="text-center"><a class="btn mb-8 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
        <h5 class="font-heading mb-10" style="letter-spacing: -0.1rem;">Log in to your account</h5>
        <form action="">
          <input class="form-control bg-transparent mb-4" type="text" placeholder="Full name">
          <input class="form-control bg-transparent mb-4" type="email" placeholder="Enter your email">
          <div class="position-relative">
            <input class="form-control bg-transparent mb-6" type="password" placeholder="Password">
            <button class="position-absolute top-50 end-0 me-8 translate-middle-y btn p-0">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="url(#pattern0_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="url(#pattern1_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="url(#pattern2_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <button class="btn btn-primary w-100 fw-medium" type="submit">Sign up</button>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign up with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign up with Apple</span></a>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Features</h1>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 mb-10">
          <div class="px-8 px-lg-24 py-20 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="nightsable-assets/images/features/bg-gray.png" alt="">
            <div class="row align-items-center position-relative">
              <div class="col-lg-6 mb-10 mb-lg-0">
                <div class="mw-sm mx-auto text-center">
                  <h3 class="mb-6">Making credit history </h3>
                  <p class="text-secondary-light">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="col-lg-6"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/features/dashboard.png" alt=""></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 mb-10 mb-lg-0">
          <div class="h-100 px-8 px-lg-14 pt-14 pb-16 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="position-relative"><img class="img-fluid d-block mx-auto mb-14" src="nightsable-assets/images/features/cards.png" alt="">
              <div class="mw-sm mx-auto text-center">
                <h3 class="mb-6">Making credit history </h3>
                <p class="text-secondary-light">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>
        </div>
        <div class="col-12 col-lg-6">
          <div class="h-100 px-8 px-lg-14 pt-14 pb-16 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="position-relative">
              <div class="d-flex mb-14 flex-wrap mw-sm mx-auto justify-content-center gap-4">
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/figma.svg" alt=""></div>
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/notion.svg" alt=""></div>
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/slack.svg" alt=""></div>
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/spotify.svg" alt=""></div>
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/twitter.svg" alt=""></div>
                <div class="flex-shrink-0 d-flex align-items-center justify-content-center p-4 bg-secondary-dark bg-opacity-25 rounded-5" style="width: 97px; height: 97px;"><img class="img-fluid" src="nightsable-assets/logos/brands/desktop.svg" alt=""></div>
              </div>
              <div class="mw-sm mx-auto text-center">
                <h3 class="mb-6">Making credit history </h3>
                <p class="text-secondary-light">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>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-lg mx-auto text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Protecting you and your money</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="btn p-0 text-start rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute top-0 end-0 w-100 h-100" src="nightsable-assets/images/cards/bg-image1.png" alt="">
            <div class="position-absolute bottom-0 start-0 w-100 py-16" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.00) 6.77%, #000 100%);"></div>
            <div class="position-relative pt-60 px-8 pb-8"><span class="d-block fw-medium mb-1 text-primary fs-9">Nightsable Card</span>
              <h6 class="d-block fs-4 mb-8">Safeguarded with leading banks</h6>
              <div class="d-flex align-items-center"><span class="me-2">Learn more</span>
                <svg 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>
              </div>
            </div></a></div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="btn p-0 text-start rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute top-0 end-0 w-100 h-100" src="nightsable-assets/images/cards/bg-image2.png" alt="">
            <div class="position-absolute bottom-0 start-0 w-100 py-16" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.00) 6.77%, #000 100%);"></div>
            <div class="position-relative pt-60 px-8 pb-8"><span class="d-block fw-medium mb-1 text-primary fs-9">Nightsable Card</span>
              <h6 class="d-block fs-4 mb-8">Safeguarded with leading banks</h6>
              <div class="d-flex align-items-center"><span class="me-2">Learn more</span>
                <svg 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>
              </div>
            </div></a></div>
        <div class="col-12 col-lg-4"><a class="btn p-0 text-start rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute top-0 end-0 w-100 h-100" src="nightsable-assets/images/cards/bg-image3.png" alt="">
            <div class="position-absolute bottom-0 start-0 w-100 py-16" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.00) 6.77%, #000 100%);"></div>
            <div class="position-relative pt-60 px-8 pb-8"><span class="d-block fw-medium mb-1 text-primary fs-9">Nightsable Card</span>
              <h6 class="d-block fs-4 mb-8">Safeguarded with leading banks</h6>
              <div class="d-flex align-items-center"><span class="me-2">Learn more</span>
                <svg 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>
              </div>
            </div></a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mw-md-3xl mx-auto mw-xl-none">
      <div class="row align-items-end mb-24">
        <div class="col-md-6 mb-14 mb-md-0">
          <div class="mw-md"><img class="img-fluid mb-16" src="nightsable-assets/logos/logo.svg" alt="">
            <h6 class="fs-4 mb-10">Subscribe to get tips and tactics to grow the way you want.</h6>
            <form action="">
              <div class="position-relative">
                <input class="form-control bg-transparent" type="email" placeholder="Your email adress">
                <button class="position-absolute top-0 end-0 btn btn-primary p-0 h-100 rounded-2" type="submit" style="width: 60px;">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.4299L13.5019 11.7249C14.1756 11.0512 14.1756 9.9487 13.5019 9.27495L7.79688 3.56995" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
            </form>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex gap-20 gap-xl-32 justify-content-md-end">
            <div>
              <h6 class="mb-6 fs-7 fw-medium">About</h6>
              <ul class="list-unstyled mb-0">
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Contact</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Blog</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Our Storry</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Careers</a></li>
              </ul>
            </div>
            <div>
              <h6 class="mb-6 fs-7 fw-medium">Company</h6>
              <ul class="list-unstyled mb-0">
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Press</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Brand Assets</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Changelog</a></li>
                <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Help centre</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center justify-content-between"><span class="d-inline-block mb-12 mb-md-0 fs-9 fw-medium text-secondary-light">© 2023 Nightsablestudio.co</span>
        <div class="d-flex flex-wrap gap-12"><a class="btn btn-link p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/twitter-white.svg" alt=""></a><a class="btn btn-link p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/linkedin-white.svg" alt=""></a><a class="btn btn-link p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/tiktok-white.svg" alt=""></a><a class="btn btn-link p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/fb-white.svg" alt=""></a><a class="btn btn-link p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/instagram-white.svg" alt=""></a></div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-black">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
        </ul>
        <div class="ms-auto"><a class="btn me-4 btn-outline-light" href="#">Login</a><a class="btn btn-primary" href="#">Start now for free</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary-dark bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-black overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="d-inline-block text-decoration-none" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a><a class="navbar-close text-primary" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="nav flex-column my-auto">
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Home</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">About us</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Wallet</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Blog</a></li>
      </ul><a class="btn mt-8 w-100 btn-outline-light" href="#">Get in touch</a>
    </nav>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Why Nightsable Card?</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="mw-sm mw-lg-3xl mx-auto">
      <div class="row">
        <div class="col-lg-6 pb-12 mb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-dark border-opacity-50"></div>
          <div class="d-lg-none position-absolute bottom-0 end-0 w-100 border-bottom border-dark border-opacity-50"></div>
          <div class="mw-xs px-10 mx-auto text-center">
            <h6 class="h1 text-primary mb-8">80%</h6>
            <p class="fs-6 mb-6"><span class="d-block">feel lack of</span><span> companionship</span></p><span class="text-secondary-light">sometimes or often</span>
          </div>
        </div>
        <div class="col-lg-6 position-relative">
          <div class="mw-xs px-10 mx-auto text-center">
            <h6 class="h1 text-primary mb-8">70%</h6>
            <p class="fs-6 mb-6"><span class="d-block">feel</span><span>left out</span></p><span class="text-secondary-light">sometimes or often</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">FAQ</h1>
    </div>
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row mb-20">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="h-100 pt-12 pb-10 ps-8 pe-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="nightsable-assets/images/features/bg-gray.png" alt="">
            <div class="position-relative d-flex flex-column h-100 align-items-start">
              <h6 class="fs-5 mb-6">What are the limits for money transfers from the United States?</h6>
              <p class="pe-6 text-white text-opacity-50 mb-14">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p><a class="btn p-0 mt-auto" href="#"><span class="me-3 text-decoration-underline">Learn more</span>
                <svg 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="col-lg-4 mb-8 mb-lg-0">
          <div class="h-100 pt-12 pb-10 ps-8 pe-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="nightsable-assets/images/features/bg-gray.png" alt="">
            <div class="position-relative d-flex flex-column h-100 align-items-start">
              <h6 class="fs-5 mb-6">Is it safe to send money with Revolut?</h6>
              <p class="pe-6 text-white text-opacity-50 mb-14">Yes. Banking services are provided by Metropolitan Commercial Bank, Member FDIC.</p><a class="btn p-0 mt-auto" href="#"><span class="me-3 text-decoration-underline">Learn more</span>
                <svg 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="col-lg-4">
          <div class="h-100 pt-12 pb-10 ps-8 pe-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="nightsable-assets/images/features/bg-gray.png" alt="">
            <div class="position-relative d-flex flex-column h-100 align-items-start">
              <h6 class="fs-5 mb-6">How can I make an international transfer from the United States?</h6>
              <p class="pe-6 text-white text-opacity-50 mb-14">Enter your recipient's details. You'll usually need the recipient’s full name and their bank account number and bank code. Some payment methods and destination countries may require additional information.</p><a class="btn p-0 mt-auto" href="#"><span class="me-3 text-decoration-underline">Learn more</span>
                <svg 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 class="text-center"><a class="btn px-sm-14 btn-primary fw-medium" href="#">See full FAQ</a></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-sm mx-auto mw-md-none">
      <div class="row align-items-center">
        <div class="col-md-6 mb-14 mb-md-0">
          <div class="mw-md pe-lg-10 py-md-14"><span class="badge mb-4 text-primary">Nightsable Card</span>
            <h1 class="font-heading h4 text-white mb-6" style="letter-spacing: -0.2rem;">Industry insights you wan`t delete. Delivered to your inbox weekly</h1>
            <p class="text-secondary-light mb-10">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
            <form action="">
              <input class="form-control bg-transparent" type="email" placeholder="E-mail">
            </form>
            <button class="btn mt-6 btn-primary fw-medium" type="submit">Subscribe</button>
          </div>
        </div>
        <div class="col-md-6"><img class="d-block img-fluid h-100 w-100 mw-sm ms-md-auto ms-md-none mw-lg-none rounded-5" src="nightsable-assets/images/newsletter/man.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 col-xl-5 mb-12 mb-lg-0">
          <div><span class="badge mb-4 text-primary">Nightsable Card</span>
            <h2 class="font-heading mb-8" style="letter-spacing: -0.1rem;">Let`s work together!</h2>
            <p class="mw-sm text-secondary-light mb-12">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>
            <form action="">
              <input class="form-control bg-transparent mb-4" type="text" placeholder="First name">
              <input class="form-control bg-transparent mb-4" type="text" placeholder="Last name">
              <input class="form-control bg-transparent mb-4" type="email" placeholder="E-mail">
              <input class="form-control bg-transparent mb-4" type="text" placeholder="Company">
              <select class="form-select bg-transparent mb-4" name="" id="">
                <option value="1">What can we help you with?</option>
                <option value="2">Marketing</option>
                <option value="3">Sales</option>
              </select>
              <textarea class="form-control bg-transparent mb-4" name="" id="" placeholder="Message" style="resize: none; height: 256px;"></textarea>
              <button class="btn px-lg-14 btn-primary fw-medium" type="submit">Message</button>
            </form>
          </div>
        </div>
        <div class="col-lg-6 col-xl-7"><img class="img-fluid d-block mw-lg-md mw-xl-none ms-lg-auto rounded-5" src="nightsable-assets/images/contact/googlemap.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-20 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-0" style="letter-spacing: -0.1rem;">Open positions</h2>
    </div>
  </div>
  <div class="d-flex justify-content-center px-5 mb-16">
    <div class="flex-shrink-0 w-100 mw-md me-8 me-md-20"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
        <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
          <h6 class="fs-4 mb-40">Product Manager, Instagram Camera</h6>
          <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
        </div></a></div>
    <div class="flex-shrink-0 w-100 mw-md me-8 me-md-20"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
        <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">DESIGN</span>
          <h6 class="fs-4 mb-40">Senior Product Designer</h6>
          <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
        </div></a></div>
    <div class="flex-shrink-0 w-100 mw-md"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
        <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
          <h6 class="fs-4 mb-40">Customer Success Manager</h6>
          <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
        </div></a></div>
  </div>
  <div class="container">
    <div class="d-flex align-items-center justify-content-center gap-4"><a class="btn d-flex align-items-center justify-content-center p-0 btn-outline-secondary-light" href="#" style="width: 86px; height: 86px;">
        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.2031 17.4298L7.49812 11.7248C6.82437 11.0511 6.82437 9.94857 7.49812 9.27482L13.2031 3.56982" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a><a class="btn d-flex align-items-center justify-content-center p-0 btn-outline-secondary-light" href="#" style="width: 86px; height: 86px;">
        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.79688 17.4298L13.5019 11.7248C14.1756 11.0511 14.1756 9.94857 13.5019 9.27482L7.79688 3.56982" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Built for teams large and small</h1>
      <p class="mw-2xl mx-auto text-secondary-light">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="mw-lg mw-lg-4xl mx-auto">
      <div class="d-flex flex-wrap gap-8 gap-xl-10 align-items-center justify-content-center"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/rbs-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/nine-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/drift-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/seek-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/deloitte-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/wise-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/intel-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/lenovo-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/sonder-white.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/sendle-white.png" alt=""></div>
    </div>
  </div>
</section>

<section class="py-12 pb-md-24 pb-lg-32 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="position-relative mw-lg mx-auto px-8 pt-10 pb-8 bg-dark bg-opacity-25 rounded-5">
      <button class="position-absolute top-0 end-0 me-6 mt-6 btn p-0"><img class="img-fluid" src="nightsable-assets/images/modals/close-icon.png" alt=""></button>
      <div class="text-center"><a class="btn mb-8 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
        <h5 class="mb-10" style="letter-spacing: -0.1rem;">Log in to your account</h5>
        <form action="">
          <input class="form-control bg-transparent mb-4" type="email" placeholder="Enter your email">
          <div class="position-relative">
            <input class="form-control bg-transparent mb-6" type="password" placeholder="Password">
            <button class="position-absolute top-50 end-0 me-8 translate-middle-y btn p-0">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="url(#pattern0_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="url(#pattern1_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="url(#pattern2_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <button class="btn btn-primary mb-6 w-100 fw-medium" type="submit">Log in</button><a class="btn fs-9 ms-1 p-0 text-decoration-underline text-secondary-light" href="#">Forgot password?</a>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign in with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign in with Apple</span></a>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="position-fixed bottom-0 start-0 w-100 p-4">
  <div class="position-relative mw-md py-8 ps-8 pe-12 bg-black rounded-5"><a class="position-absolute top-0 end-0 m-6" href="#"><img src="nightsable-assets/images/cookies/close-white.png" alt=""></a>
    <div class="container position-relative">
      <div class="row align-items-center">
        <h3 class="mb-2 fs-6 fw-medium">Cookie Consent</h3>
        <p class="text-light mb-8">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 class="d-flex flex-column flex-sm-row gap-4"><a class="btn btn-primary fw-medium" href="#">Accept All Cookies</a><a class="btn btn-outline-light fw-medium" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>