Shuffle Components in Nightsable library

<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;">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 mx-auto mw-lg-6xl">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="d-block h-100 py-14 px-10 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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/stats/card-blur.png" alt="">
            <div class="position-relative"><span class="d-block h2 mb-4">$1.5B+</span>
              <p class="text-secondary-light mb-20">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 is that it</p><a class="btn btn-link text-decoration-none text-white p-0" href="#"><span class="me-2 fs-7 fw-medium text-decoration-underline">Learn more</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 1.25L1 11.75" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.8781V1.25H1.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-12 col-lg-4 mb-8 mb-lg-0">
          <div class="d-block h-100 py-14 px-10 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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/stats/card-blur.png" alt="">
            <div class="position-relative"><span class="d-block h2 mb-4">100+</span>
              <p class="text-secondary-light mb-20">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 is that it</p><a class="btn btn-link text-decoration-none text-white p-0" href="#"><span class="me-2 fs-7 fw-medium text-decoration-underline">Learn more</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 1.25L1 11.75" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.8781V1.25H1.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-12 col-lg-4 mb-8 mb-lg-0">
          <div class="d-block h-100 py-14 px-10 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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/stats/card-blur.png" alt="">
            <div class="position-relative"><span class="d-block h2 mb-4">150+</span>
              <p class="text-secondary-light mb-20">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 is that it</p><a class="btn btn-link text-decoration-none text-white p-0" href="#"><span class="me-2 fs-7 fw-medium text-decoration-underline">Learn more</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 1.25L1 11.75" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.8781V1.25H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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 p-4 mw-lg w-100">
    <div class="position-relative p-6 py-12 bg-black rounded-5">
      <h3 class="mw-xs mx-auto mb-4 fs-4 fw-medium text-white text-center">Update payment method</h3>
      <p class="mb-10 text-white text-center mw-sm mx-auto">Update your credit card details</p>
      <form action="">
        <div class="position-relative mb-4"><span class="position-absolute top-50 end-0 me-6 translate-middle-y">
            <svg width="25" height="15" viewBox="0 0 25 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.0143 1.6051H9.45117V13.3964H16.0143V1.6051Z" fill="#F24E1E"></path>
              <path d="M9.88806 7.5C9.88806 5.10437 11.0143 2.97816 12.7424 1.60437C11.4706 0.604369 9.86621 0 8.11621 0C3.97058 0 0.616211 3.35437 0.616211 7.5C0.616211 11.6456 3.97058 15 8.11621 15C9.86621 15 11.4706 14.3956 12.7424 13.3956C11.0118 12.0413 9.88806 9.89563 9.88806 7.5Z" fill="#FF0000"></path>
              <path d="M24.8694 7.5C24.8694 11.6456 21.515 15 17.3694 15C15.6194 15 14.015 14.3956 12.7432 13.3956C14.4932 12.0194 15.5975 9.89563 15.5975 7.5C15.5975 5.10437 14.4713 2.97816 12.7432 1.60437C14.0126 0.604369 15.6169 0 17.367 0C21.515 0 24.8694 3.37621 24.8694 7.5Z" fill="#FFA800"></path>
            </svg></span>
          <input class="position-relative form-control bg-transparent" type="text" placeholder="Card number">
        </div>
        <div class="row mb-8">
          <div class="col-12 col-md-6 mb-4 mb-md-0">
            <input class="form-control bg-transparent" type="text" placeholder="Expiration">
          </div>
          <div class="col-12 col-md-6">
            <div class="position-relative"><img class="position-absolute top-50 end-0 me-6 translate-middle-y" src="nightsable-assets/images/modals/info.svg" alt="">
              <input class="form-control bg-transparent" type="text" placeholder="CVV">
            </div>
          </div>
        </div>
        <button class="btn mb-6 w-100 btn-primary fw-medium" type="submit">Confirm</button>
        <div class="text-center"><a class="btn btn-link fs-9 fw-medium p-0 text-white" href="#">Cancel</a></div>
      </form>
      <button class="btn p-0 position-absolute top-0 end-0 m-6"><img src="nightsable-assets/images/modals/close-icon.png"></button>
    </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-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-block btn ps-10 pe-14 pt-16 pb-14 text-start bg-secondary-dark bg-opacity-25 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/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative">
              <div class="d-inline-block px-5 py-3 mb-6 fs-9 border border-light-light rounded-pill">Get in touch</div>
              <h5 class="mb-6">Proof of Transfer</h5>
              <p class="pe-xl-20 lh-sm mb-40">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><span class="mt-auto">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span>
            </div></a></div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-block btn ps-10 pe-14 pt-16 pb-14 text-start bg-secondary-dark bg-opacity-25 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/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative">
              <div class="d-inline-block px-5 py-3 mb-6 fs-9 border border-light-light rounded-pill">Get in touch</div>
              <h5 class="mb-6">Proof of Transfer</h5>
              <p class="pe-xl-20 lh-sm mb-40">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><span class="mt-auto">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span>
            </div></a></div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-block btn ps-10 pe-14 pt-16 pb-14 text-start bg-secondary-dark bg-opacity-25 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/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative">
              <div class="d-inline-block px-5 py-3 mb-6 fs-9 border border-light-light rounded-pill">Get in touch</div>
              <h5 class="mb-6">Proof of Transfer</h5>
              <p class="pe-xl-20 lh-sm mb-40">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><span class="mt-auto">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span>
            </div></a></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="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h3 text-white mb-0" style="letter-spacing: -0.2rem;">What people are saying</h1>
    </div>
    <div class="mw-md mw-md-3xl mw-lg-4xl mx-auto mw-xl-none">
      <div class="row">
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" 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>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly</p>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small2.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 5 BC, making it over 2000 years</p>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small3.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</p>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small4.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of  de Finibus Bonorum et Malorum The Extremes of Good and Evil</p>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small5.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-4 mb-10">
          <div class="h-100 px-8 py-12 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" 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%);">
            <div class="position-relative">
              <p class="fs-5 text-white mb-6" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always.</p>
              <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/testimonials/avatar-small6.png" alt="">
                <div class="ms-6"><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
              </div>
            </div>
          </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"><a class="btn mb-32 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
    <div class="mw-md mx-auto">
      <div class="text-center">
        <h4 class="mb-4" style="letter-spacing: -0.1rem;">Log in to your account</h4><span class="d-block text-secondary-light mb-10">Good to have you back!</span>
        <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="py-12 pb-md-24 pb-lg-32 bg-black position-relative overflow-hidden">
  <div class="container position-relative"><a class="btn mb-32 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
    <div class="mw-md mx-auto">
      <div class="text-center">
        <h4 class="font-heading mb-4" style="letter-spacing: -0.1rem;">Log in to your account</h4><span class="d-block text-secondary-light mb-10">Good to have you back!</span>
        <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="bg-black position-relative overflow-hidden">
  <div class="container py-14">
    <div class="d-flex align-items-center justify-content-between position-relative"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt="">
      <div class="d-none d-lg-block flex-shrink-0 position-absolute top-50 start-50 translate-middle">
        <div class="d-flex gap-8 align-items-center justify-content-center"><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Contact</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Blog</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Our Storry</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Careers</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Privacy</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Terms</a></div>
      </div>
      <div>
        <select class="form-select bg-transparent" name="" id="">
          <option value="1">English</option>
          <option value="2">German</option>
          <option value="3">Polish</option>
        </select>
      </div>
    </div>
    <div class="d-lg-none mt-12">
      <div class="d-flex flex-wrap gap-8 align-items-center justify-content-center"><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Contact</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Blog</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Our Storry</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Careers</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Privacy</a><a class="btn p-0 fs-7 fw-medium text-secondary-light" href="#">Terms</a></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 w-100 mw-xl show align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex align-items-center">
        <div class="ps-8">
          <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5013 21.0833C16.7721 21.0833 21.0846 16.7708 21.0846 11.5C21.0846 6.22913 16.7721 1.91663 11.5013 1.91663C6.23047 1.91663 1.91797 6.22913 1.91797 11.5C1.91797 16.7708 6.23047 21.0833 11.5013 21.0833Z" stroke="white" stroke-width="1.4375" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11.5 7.66663V12.4583" stroke="white" stroke-width="1.4375" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11.4961 15.3334H11.5047" stroke="white" stroke-width="1.91667" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <div class="toast-body">Please check your email to confirm your address befere you can see that</div>
      </div>
    </div>
  </div>
</div>

<section>
  <div class="bg-black">
    <div class="py-6 border-top border-secondary-dark">
      <div class="container">
        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '';">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a class="text-white opacity-75" href="#">Homepage</a></li>
            <div class="mx-4"><img class="img-fluid" src="nightsable-assets/images/breadcrumbs/star.svg" alt=""></div>
            <li class="breadcrumb-item active text-white opacity-75" aria-current="page">Services</li>
          </ol>
        </nav>
      </div>
    </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-0" style="letter-spacing: -0.2rem;">Built for teams large and small</h1>
    </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 py-md-24 bg-black bg-gradient position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="py-16 px-8 rounded-5" 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%);">
      <div class="mw-lg mw-lg-2xl mx-auto text-center"><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="mw-lg mx-auto 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="">
          <div class="d-flex mw-lg mx-auto w-100 flex-column gap-6 flex-sm-row">
            <input class="form-control h-100 bg-transparent" type="email" placeholder="E-mail">
            <button class="flex-shrink-0 btn btn-primary fw-medium" type="submit">Subscribe</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-black">
    <div class="container position-relative" 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 btn p-0">
        <svg width="57" height="16" viewBox="0 0 57 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="57" height="2" rx="1" fill="white"></rect>
          <rect y="14" width="57" height="2" rx="1" fill="white"></rect>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" 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>
    </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-14 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="pt-20 px-8 bg-dark bg-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-8 me-lg-20 mt-4 mt-lg-24 mt-lg-52" style="width: 64px;" src="nightsable-assets/images/application-section/star.png" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/application-section/lines2.png" alt="">
      <div class="mw-sm mw-lg-2xl mx-auto text-center position-relative"><span class="badge mb-4 text-primary">Nightsable Card</span>
        <h2 class="font-heading mb-4" style="letter-spacing: -0.1rem;">Get a Nightsable App</h2>
        <p class="text-secondary-light mb-8">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 is that</p>
        <div class="d-flex mw-xs mx-auto"><a class="btn me-4 p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/application-section/app-store-black.png" alt=""></a><a class="btn p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/application-section/google-play-black.png" alt=""></a></div>
      </div><img class="img-fluid d-block w-100 mw-4xl mx-auto position-relative" src="nightsable-assets/images/application-section/phone2.png" alt="">
    </div>
  </div>
</section>

<section class="position-fixed bottom-0 start-0 w-100">
  <div class="position-relative py-5 px-6 bg-black">
    <div class="container position-relative">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 col-xl-9 mb-8 mb-lg-0">
          <p class="fs-9 text-secondary-light mb-0">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="col-12 col-lg-5 col-xl-3">
          <div class="d-flex flex-column flex-sm-row gap-4 justify-content-lg-end align-items-center"><a class="btn btn-sm btn-primary fw-medium" href="#">Accept</a><a class="btn btn-sm p-0 fw-medium" href="#">Privacy Policy</a></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 mw-md-none">
      <div class="row align-items-center">
        <div class="col-md-6 mb-20 mb-md-0">
          <div class="mw-lg">
            <div class="mw-sm mw-xl-md"><span class="badge mb-4 text-primary">Check our stats</span>
              <h1 class="font-heading h3 text-white mb-8" style="letter-spacing: -0.2rem;">Making credit history with nightsable</h1>
            </div>
            <p class="fs-7 text-secondary-light mb-8">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 is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p><a class="btn btn-link p-0 text-white text-decoration-underline" href="#">Read more</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="mw-md-xs mw-lg-lg ms-auto">
            <div class="row">
              <div class="col-6"><img class="img-fluid d-block mb-8 w-100" src="nightsable-assets/images/abouts/img2.png" alt=""><img class="img-fluid d-block w-100" src="nightsable-assets/images/abouts/img4.png" alt=""></div>
              <div class="col-6 mt-20"><img class="img-fluid d-block mb-8 w-100" src="nightsable-assets/images/abouts/img3.png" alt=""><img class="img-fluid d-block w-100" src="nightsable-assets/images/abouts/img.png" alt=""></div>
            </div>
          </div>
        </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-16 text-center"><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-lg mx-auto text-secondary-light mb-16">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-14">
        <h5 class="fs-6 text-center mb-6">Services</h5>
        <div class="d-flex mw-2xl mx-auto mb-14 flex-wrap gap-3 justify-content-center"><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">Branding</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">UI / UX</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">Animation</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">3D Design</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">Content</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">Strategy &amp; consulting</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">User research</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">Other</a></div>
        <h5 class="fs-6 text-center mb-6">Your budget</h5>
        <div class="d-flex flex-wrap gap-3 justify-content-center"><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">2K-10K</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">10K-50K</a><a class="btn py-3 fs-9 fw-medium btn-outline-secondary text-white" href="#">More than 50K</a></div>
      </div>
      <div class="mw-2xl mx-auto">
        <form action="">
          <h5 class="fs-6 text-center mb-6">Details</h5>
          <div class="row mb-6">
            <div class="col-md-6 mb-4 mb-md-0">
              <input class="form-control bg-transparent" type="text" placeholder="Full name">
            </div>
            <div class="col-md-6">
              <input class="form-control bg-transparent" type="email" placeholder="E-mail">
            </div>
          </div>
          <button class="btn w-100 mb-6 btn-primary fw-medium" type="submit">Submit</button>
          <p class="text-secondary-light fs-9 mb-0">Your information will be used accordane with our Privacy Policy.  You may opf out at any time</p>
        </form>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="bg-black">
    <div class="py-6 border-top border-secondary-dark">
      <div class="container">
        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '';">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a class="text-white opacity-75 text-decoration-underline" href="#">Homepage</a></li><span class="mx-4">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
            <li class="breadcrumb-item active text-white opacity-75 text-decoration-underline" aria-current="page">Services</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>

<section class="position-fixed bottom-0 start-0 w-100">
  <div class="position-relative py-5 px-6 bg-primary">
    <div class="container position-relative">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 col-xl-9 mb-8 mb-lg-0">
          <p class="fs-9 text-dark mb-0">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="col-12 col-lg-5 col-xl-3">
          <div class="d-flex flex-column flex-sm-row gap-4 justify-content-lg-end align-items-center"><a class="btn btn-sm btn-black bg-black fw-medium" href="#">Accept</a><a class="btn btn-sm p-0 fw-medium text-black" href="#">Privacy Policy</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 pt-lg-20 pb-lg-24 bg-black position-relative overflow-hidden"><img class="position-absolute top-0 end-0 mt-24" src="nightsable-assets/images/blog-content/lines.png" alt=""><img class="position-absolute top-0 start-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <div class="container position-relative">
    <div class="pt-12 pt-md-20 pb-24 pb-sm-40 pb-lg-72 px-8 rounded-5 bg-primary">
      <div class="mw-md mx-auto text-center">
        <h3 class="fs-4 text-black mb-4">Women in business: an interview with Sarah Townsend</h3>
        <p class="mw-md mx-auto text-black mb-8">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="d-flex align-items-center justify-content-center"><img class="img-fluid" src="nightsable-assets/images/blog-content/avatar.png" alt=""><span class="ms-2 ms-sm-4 text-black fs-9 fw-medium">Wade Warren</span><span class="mx-2 mx-sm-4 text-black">·</span><span class="fs-9 text-black fw-medium">9 min read</span></div>
      </div>
    </div>
  </div>
  <div class="container mt-n12 mt-sm-n24 mt-lg-n52 position-relative">
    <div class="px-5 px-sm-8 px-md-12 px-lg-20 mb-8"><img class="img-fluid d-block w-100 rounded-4" src="nightsable-assets/images/blog-content/header.png" alt=""></div>
    <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-3xl mx-auto">
      <div class="pb-10 mb-10 border-bottom border-dark border-opacity-50">
        <p class="fs-5 text-light text-opacity-75 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      </div>
      <div class="mb-8">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <div class="ps-6 mb-8 border-start border-2 border-primary">
          <p class="fs-5 text-light text-opacity-75 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p><span class="fs-8 text-light text-opacity-75">— John Doe, CEO &amp; Founder</span>
        </div>
      </div>
      <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid d-block mb-4" src="nightsable-assets/images/blog-content/header2.png" alt=""><span class="fs-8 text-secondary-light">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</span>
      <div class="mt-8 mb-12">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-5 text-light text-opacity-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <p class="fs-5 text-light text-opacity-75 mb-6">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
        <ul class="list-unstyled text-light text-opacity-75 fs-5 mb-6">
          <li>1. Lectus id duis vitae porttitor enim gravida morbi.</li>
          <li>2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
          <li>3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
        </ul>
        <p class="fs-5 text-light text-opacity-75">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. Vivamus id pharetra massa. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</p>
      </div>
      <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center"><a class="btn btn-outline-light fw-medium" href="#">Copy Link</a>
        <div class="d-flex gap-4"><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5995 4.43344H14.1661V1.78344C13.4076 1.70456 12.6454 1.66562 11.8828 1.66677C9.61615 1.66677 8.06615 3.05011 8.06615 5.58344V7.76677H5.50781V10.7334H8.06615V18.3334H11.1328V10.7334H13.6828L14.0661 7.76677H11.1328V5.87511C11.1328 5.00011 11.3661 4.43344 12.5995 4.43344Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.3346 4.83326C17.7083 5.10501 17.0458 5.28465 16.368 5.3666C17.0831 4.93936 17.619 4.26725 17.8763 3.47493C17.2043 3.87498 16.4686 4.15684 15.7013 4.30826C15.1884 3.75207 14.5054 3.38184 13.7595 3.25564C13.0135 3.12944 12.2468 3.2544 11.5795 3.61092C10.9122 3.96745 10.3821 4.53537 10.0723 5.22563C9.76259 5.91588 9.69071 6.68942 9.86797 7.42493C8.50916 7.3562 7.18 7.00239 5.96685 6.38648C4.75369 5.77057 3.68367 4.90634 2.8263 3.84993C2.52558 4.37507 2.36757 4.96978 2.36797 5.57493C2.3669 6.13692 2.50482 6.69044 2.76943 7.18623C3.03405 7.68202 3.41715 8.10469 3.88464 8.4166C3.34128 8.40181 2.80954 8.25601 2.33464 7.9916V8.03326C2.33871 8.82067 2.61463 9.58251 3.11573 10.1899C3.61683 10.7973 4.31235 11.213 5.08464 11.3666C4.78735 11.4571 4.4787 11.5048 4.16797 11.5083C3.95288 11.5058 3.73832 11.4862 3.5263 11.4499C3.74623 12.1273 4.17182 12.7192 4.74386 13.1434C5.31591 13.5676 6.00595 13.8029 6.71797 13.8166C5.51564 14.7627 4.03121 15.279 2.5013 15.2833C2.22275 15.2842 1.94442 15.2675 1.66797 15.2333C3.22999 16.2418 5.05031 16.7772 6.90964 16.7749C8.19271 16.7883 9.46558 16.5458 10.6539 16.0617C11.8422 15.5775 12.9222 14.8615 13.8306 13.9553C14.7391 13.0492 15.4579 11.9711 15.9451 10.784C16.4323 9.59695 16.678 8.3247 16.668 7.0416C16.668 6.89993 16.668 6.74993 16.668 6.59993C17.3219 6.11227 17.8859 5.51445 18.3346 4.83326Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4513 4.55008C14.2535 4.55008 14.0602 4.60873 13.8957 4.71861C13.7313 4.82849 13.6031 4.98467 13.5274 5.1674C13.4517 5.35012 13.4319 5.55119 13.4705 5.74517C13.5091 5.93915 13.6043 6.11734 13.7442 6.25719C13.884 6.39704 14.0622 6.49228 14.2562 6.53087C14.4502 6.56945 14.6513 6.54965 14.834 6.47396C15.0167 6.39827 15.1729 6.2701 15.2828 6.10565C15.3927 5.9412 15.4513 5.74786 15.4513 5.55008C15.4513 5.28486 15.3459 5.03051 15.1584 4.84297C14.9709 4.65544 14.7165 4.55008 14.4513 4.55008ZM18.2846 6.56675C18.2684 5.87533 18.1389 5.19125 17.9013 4.54175C17.6894 3.98603 17.3596 3.48281 16.9346 3.06675C16.522 2.6396 16.0176 2.3119 15.4596 2.10841C14.8118 1.86355 14.127 1.73109 13.4346 1.71675C12.5513 1.66675 12.268 1.66675 10.0013 1.66675C7.73464 1.66675 7.4513 1.66675 6.56797 1.71675C5.8756 1.73109 5.19075 1.86355 4.54297 2.10841C3.98603 2.31396 3.48208 2.64138 3.06797 3.06675C2.64082 3.4794 2.31312 3.98378 2.10964 4.54175C1.86477 5.18953 1.73231 5.87438 1.71797 6.56675C1.66797 7.45008 1.66797 7.73342 1.66797 10.0001C1.66797 12.2667 1.66797 12.5501 1.71797 13.4334C1.73231 14.1258 1.86477 14.8106 2.10964 15.4584C2.31312 16.0164 2.64082 16.5208 3.06797 16.9334C3.48208 17.3588 3.98603 17.6862 4.54297 17.8917C5.19075 18.1366 5.8756 18.2691 6.56797 18.2834C7.4513 18.3334 7.73464 18.3334 10.0013 18.3334C12.268 18.3334 12.5513 18.3334 13.4346 18.2834C14.127 18.2691 14.8118 18.1366 15.4596 17.8917C16.0176 17.6883 16.522 17.3606 16.9346 16.9334C17.3615 16.5189 17.6916 16.0152 17.9013 15.4584C18.1389 14.8089 18.2684 14.1248 18.2846 13.4334C18.2846 12.5501 18.3346 12.2667 18.3346 10.0001C18.3346 7.73342 18.3346 7.45008 18.2846 6.56675ZM16.7846 13.3334C16.7786 13.8624 16.6828 14.3865 16.5013 14.8834C16.3682 15.2461 16.1545 15.5738 15.8763 15.8417C15.606 16.1172 15.279 16.3304 14.918 16.4667C14.4211 16.6482 13.8969 16.744 13.368 16.7501C12.5346 16.7917 12.2263 16.8001 10.0346 16.8001C7.84297 16.8001 7.53464 16.8001 6.7013 16.7501C6.15204 16.7604 5.60513 16.6758 5.08464 16.5001C4.73945 16.3568 4.42743 16.1441 4.16797 15.8751C3.89138 15.6074 3.68034 15.2794 3.5513 14.9167C3.34785 14.4127 3.23501 13.8767 3.21797 13.3334C3.21797 12.5001 3.16797 12.1917 3.16797 10.0001C3.16797 7.80842 3.16797 7.50008 3.21797 6.66675C3.2217 6.12596 3.32043 5.59004 3.50964 5.08341C3.65634 4.73167 3.88152 4.41813 4.16797 4.16675C4.42115 3.88022 4.73404 3.65266 5.08464 3.50008C5.59259 3.31678 6.12797 3.22098 6.66797 3.21675C7.5013 3.21675 7.80964 3.16675 10.0013 3.16675C12.193 3.16675 12.5013 3.16675 13.3346 3.21675C13.8636 3.22282 14.3877 3.31862 14.8846 3.50008C15.2633 3.64062 15.6032 3.86912 15.8763 4.16675C16.1494 4.42273 16.3628 4.73569 16.5013 5.08341C16.6865 5.59086 16.7824 6.12656 16.7846 6.66675C16.8263 7.50008 16.8346 7.80842 16.8346 10.0001C16.8346 12.1917 16.8263 12.5001 16.7846 13.3334ZM10.0013 5.72508C9.15614 5.72673 8.33044 5.97885 7.62851 6.4496C6.92659 6.92034 6.37995 7.58858 6.05766 8.36988C5.73538 9.15117 5.65191 10.0105 5.8178 10.8392C5.98369 11.6679 6.3915 12.4289 6.9897 13.0259C7.5879 13.6229 8.34964 14.0293 9.17869 14.1935C10.0077 14.3578 10.8669 14.2727 11.6475 13.9489C12.4282 13.6251 13.0954 13.0771 13.5647 12.3743C14.0341 11.6714 14.2846 10.8452 14.2846 10.0001C14.2857 9.43767 14.1756 8.88059 13.9607 8.36088C13.7457 7.84117 13.4301 7.36909 13.032 6.97179C12.634 6.57449 12.1613 6.25981 11.6411 6.04586C11.121 5.8319 10.5637 5.72288 10.0013 5.72508ZM10.0013 12.7751C9.45246 12.7751 8.91594 12.6123 8.45959 12.3074C8.00325 12.0025 7.64757 11.5691 7.43754 11.062C7.2275 10.555 7.17255 9.997 7.27962 9.45871C7.3867 8.92041 7.65099 8.42595 8.03908 8.03786C8.42717 7.64977 8.92163 7.38548 9.45993 7.2784C9.99822 7.17133 10.5562 7.22628 11.0632 7.43632C11.5703 7.64635 12.0037 8.00203 12.3086 8.45837C12.6136 8.91472 12.7763 9.45124 12.7763 10.0001C12.7763 10.3645 12.7045 10.7253 12.5651 11.062C12.4256 11.3987 12.2212 11.7046 11.9635 11.9623C11.7058 12.22 11.3999 12.4244 11.0632 12.5638C10.7266 12.7033 10.3657 12.7751 10.0013 12.7751Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mt-20 pt-16 border-top border-dark border-opacity-50">
      <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-none mx-auto"><span class="badge mb-4 text-primary">Nightsable Card</span>
        <h2 class="font-heading h2 text-white mb-16" style="letter-spacing: -0.2rem;">From the blog</h2>
        <div class="row">
          <div class="col-12 col-lg-4 mb-12 mb-lg-0"><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="mw-xs 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-lg-4 mb-12 mb-lg-0"><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="mw-xs 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-lg-4"><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="mw-xs 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>
  </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-14"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Compare our plans</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-12">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="d-inline-flex flex-column flex-sm-row align-items-center gap-8"><span class="fs-7">Billed monthly</span>
        <div class="d-inline-flex align-items-center bg-secondary-dark rounded-pill" style="padding: 2px;">
          <button class="btn bg-white p-0 rounded-pill" style="width: 30px; height: 30px;"></button>
          <button class="btn p-0 rounded-pill" style="width: 30px; height: 30px;"></button>
        </div>
        <div><span class="me-3 fs-7 text-secondary">Billed yearly</span><span class="d-inline-block px-3 py-1 lh-sm fs-9 text-primary border border-2 border-primary rounded-pill">SAVE 20%</span></div>
      </div>
    </div>
    <div class="pb-5 overflow-auto">
      <table class="table table-dark" style="min-width: max-content;">
        <thead>
          <tr>
            <th class="bg-transparent border-start border-top border-dark" scope="col"></th>
            <th class="bg-transparent border-start border-end border-dark border-top" scope="col" style="width: 280px;">
              <div class="py-8 px-8"><span class="d-block mb-3 fs-6 fw-medium">Basic</span>
                <div class="d-flex mb-7 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-1 pb-2 text-secondary-light fw-medium">/ month</span></div><a class="btn w-100 py-4 btn-primary" href="#">Buy now</a>
              </div>
            </th>
            <th class="bg-light bg-opacity-10 border-end border-top border-dark" scope="col" style="width: 280px;">
              <div class="py-8 px-8"><span class="d-block mb-3 fs-6 fw-medium">Business</span>
                <div class="d-flex mb-7 align-items-end"><span class="fs-2 lh-sm fw-medium">$20</span><span class="ms-1 pb-2 text-secondary-light fw-medium">/ month</span></div><a class="btn w-100 py-4 btn-primary" href="#">Buy now</a>
              </div>
            </th>
            <th class="bg-transparent border-end border-top border-dark" scope="col" style="width: 280px;">
              <div class="py-8 px-8"><span class="d-block mb-3 fs-6 fw-medium">Basic</span>
                <div class="d-flex mb-7 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-1 pb-2 text-secondary-light fw-medium">/ month</span></div><a class="btn w-100 py-4 btn-primary" href="#">Buy now</a>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 pb-6 pt-10"><span class="fs-6 fw-medium">Dropbox core features</span></div>
            </th>
            <td class="bg-transparent border-end border-dark"></td>
            <td class="bg-light bg-opacity-10 border-end border-dark"></td>
            <td class="bg-transparent border-end border-dark"></td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Storage</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">3,000 gb</span></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">3,000 gb</span></div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">3,000 gb</span></div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Users</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">1 user</span></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">3+ users</span></div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"><span class="d-inline-block fw-normal">3+ users</span></div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Best-in-class sync technology</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Anytime, anywhere access</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Easy and secure sharing</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">256-bit AES and SSL/TLS encryption</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 pb-6 pt-10"><span class="fs-6 fw-medium">Dropbox Sign core features</span></div>
            </th>
            <td class="bg-transparent border-end border-dark"></td>
            <td class="bg-light bg-opacity-10 border-end border-dark"></td>
            <td class="bg-transparent border-end border-dark"></td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Shared link controls</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">External sharing controls and reporting</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Alerts and notifications</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
          <tr>
            <th class="bg-transparent border-start border-end border-dark" scope="row">
              <div class="ps-8 py-5"><span class="d-inline-block me-3 fw-normal">Ransomware detection and recovery</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_174_1786)">
                    <path d="M7 0C3.1402 0 0 3.14024 0 7.00004C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7.00004C14 3.14024 10.8598 0 7 0ZM7 12.7273C3.84194 12.7273 1.27273 10.1581 1.27273 7.00004C1.27273 3.84202 3.84194 1.27273 7 1.27273C10.1581 1.27273 12.7273 3.84202 12.7273 7.00004C12.7273 10.1581 10.158 12.7273 7 12.7273Z" fill="#878787"></path>
                    <path d="M7.00066 2.96973C6.53289 2.96973 6.15234 3.35053 6.15234 3.81859C6.15234 4.28624 6.53289 4.6667 7.00066 4.6667C7.46843 4.6667 7.84897 4.28624 7.84897 3.81859C7.84897 3.35053 7.46843 2.96973 7.00066 2.96973Z" fill="#878787"></path>
                    <path d="M6.99964 5.93945C6.6482 5.93945 6.36328 6.22437 6.36328 6.57582V10.394C6.36328 10.7454 6.6482 11.0304 6.99964 11.0304C7.35109 11.0304 7.63601 10.7454 7.63601 10.394V6.57582C7.63601 6.22437 7.35109 5.93945 6.99964 5.93945Z" fill="#878787"></path>
                  </g>
                </svg>
              </div>
            </th>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center"></div>
            </td>
            <td class="bg-light bg-opacity-10 border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
            <td class="bg-transparent border-end border-dark">
              <div class="py-5 text-center">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="0.5" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                  <g clip-path="url(#clip0_174_1822)">
                    <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="#CCFF00"></path>
                  </g>
                </svg>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>