Faq Components in Casper library

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 xl:w-2/5 px-4 pb-16 lg:pb-32">
        <div class="relative max-w-md mx-auto lg:mx-0">
          <div class="absolute top-0 left-0 -mt-80 -ml-40 w-170 h-170 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
          <div class="relative">
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-6">Getting Started</h2>
            <div class="pl-8 py-3 border-l-2 border-white border-opacity-10">
              <ul>
                <li class="mb-5">
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">Getting Started</span>
                  </a>
                </li>
                <li class="mb-5">
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">How we can collaborate</span>
                  </a>
                </li>
                <li class="mb-5">
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">How to use Coca</span>
                  </a>
                </li>
                <li>
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">How to subscription</span>
                  </a>
                </li>
              </ul>
            </div>
            <img class="block mt-14" src="casper-assets/services/robot-left-side.png" alt="">
          </div>
        </div>
      </div>
      <div class="relative w-full lg:w-1/2 xl:w-3/5 px-4">
        <div class="absolute bottom-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
        <div class="relative max-w-lg lg:max-w-none mx-auto">
          <div class="flex mb-12 px-8 h-18 items-center bg-white bg-opacity-10 rounded-full">
            <button class="inline-block text-white hover:text-violet-600">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.7099 20.29L17.9999 16.61C19.44 14.8144 20.1374 12.5353 19.9487 10.2413C19.76 7.94733 18.6996 5.81281 16.9854 4.27667C15.2713 2.74053 13.0337 1.91954 10.7328 1.9825C8.43194 2.04546 6.24263 2.98759 4.61505 4.61517C2.98747 6.24275 2.04534 8.43207 1.98237 10.7329C1.91941 13.0338 2.74041 15.2714 4.27655 16.9855C5.81269 18.6997 7.94721 19.7601 10.2412 19.9488C12.5352 20.1375 14.8143 19.4401 16.6099 18L20.2899 21.68C20.3829 21.7738 20.4935 21.8482 20.6153 21.8989C20.7372 21.9497 20.8679 21.9758 20.9999 21.9758C21.1319 21.9758 21.2626 21.9497 21.3845 21.8989C21.5063 21.8482 21.6169 21.7738 21.7099 21.68C21.8901 21.4936 21.9909 21.2444 21.9909 20.985C21.9909 20.7257 21.8901 20.4765 21.7099 20.29ZM10.9999 18C9.61544 18 8.26206 17.5895 7.11091 16.8203C5.95977 16.0511 5.06256 14.9579 4.53275 13.6788C4.00293 12.3997 3.86431 10.9923 4.13441 9.63439C4.4045 8.27653 5.07119 7.02925 6.05016 6.05028C7.02912 5.07131 8.27641 4.40463 9.63427 4.13453C10.9921 3.86443 12.3996 4.00306 13.6787 4.53287C14.9578 5.06268 16.051 5.95989 16.8202 7.11103C17.5894 8.26218 17.9999 9.61556 17.9999 11C17.9999 12.8565 17.2624 14.637 15.9497 15.9498C14.6369 17.2625 12.8564 18 10.9999 18Z" fill="currentColor"></path>
              </svg>
            </button>
            <input class="h-full w-full pl-6 py-6 bg-transparent text-base tracking-tight text-gray-400 placeholder-gray-500 outline-none" type="search" placeholder="Search question, keywords, articles">
          </div>
          <div>
            <h5 class="text-xl text-white font-medium tracking-tight mb-8">GETTING STARTED</h5>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full pb-6 mb-6 text-left border-b-2 border-white border-opacity-10">
              <div class="flex items-start justify-between">
                <div class="pr-4">
                  <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">Do you provide a complete design style?</h4>
                  <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="max-w-xl mt-2 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                  </div>
                </div>
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block text-white group-hover:text-violet-500 transform">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full pb-6 mb-6 text-left border-b-2 border-white border-opacity-10">
              <div class="flex items-start justify-between">
                <div class="pr-4">
                  <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">Do you have any terms &amp; conditions?</h4>
                  <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="max-w-xl mt-2 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                  </div>
                </div>
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block text-white group-hover:text-violet-500 transform">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full pb-6 mb-6 text-left border-b-2 border-white border-opacity-10">
              <div class="flex items-start justify-between">
                <div class="pr-4">
                  <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">How to apply Casper to our project?</h4>
                  <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="max-w-xl mt-2 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                  </div>
                </div>
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block text-white group-hover:text-violet-500 transform">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full pb-6 mb-6 text-left border-b-2 border-white border-opacity-10">
              <div class="flex items-start justify-between">
                <div class="pr-4">
                  <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">How was the Terms &amp; Condition?</h4>
                  <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="max-w-xl mt-2 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                  </div>
                </div>
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block text-white group-hover:text-violet-500 transform">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full pb-6 text-left border-b-2 border-white border-opacity-10">
              <div class="flex items-start justify-between">
                <div class="pr-4">
                  <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">How much we can buy this product?</h4>
                  <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="max-w-xl mt-2 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                  </div>
                </div>
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block text-white group-hover:text-violet-500 transform">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row">
      <div class="col-md-5 mb-14 mb-md-0">
        <div>
          <h2 class="h3 font-heading fw-medium text-white mb-6">Getting Started</h2>
          <div class="ps-8 py-4 mb-18 border-2 border-start border-secondary border-opacity-50">
            <ul class="list-unstyled display-5 mb-0">
              <li class="mb-5"><a class="d-flex align-items-center" href="#">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
                  </svg><span class="ms-3 text-primary">Getting Started</span></a></li>
              <li class="mb-5"><a class="d-flex align-items-center" href="#">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
                  </svg><span class="ms-3 text-white">How we can collaborate</span></a></li>
              <li class="mb-5"><a class="d-flex align-items-center" href="#">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
                  </svg><span class="ms-3 text-white">How to use Coca</span></a></li>
              <li><a class="d-flex align-items-center" href="#">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
                  </svg><span class="ms-3 text-white">How to subscription</span></a></li>
            </ul>
          </div><img class="img-fluid d-block mx-auto" style="width: 200px;" src="casper-assets/faq/robot-lg.png" alt=""/>
        </div>
      </div>
      <div class="col-md-7">
        <div class="mw-2xl ms-lg-auto">
          <div class="d-flex py-6 px-7 mb-14 align-items-center bg-secondary bg-opacity-25 text-light-light rounded-pill">
            <button class="btn me-7 btn-link p-0" type="">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.7099 20.29L17.9999 16.61C19.44 14.8144 20.1374 12.5353 19.9487 10.2413C19.76 7.94733 18.6996 5.81281 16.9854 4.27667C15.2713 2.74053 13.0337 1.91954 10.7328 1.9825C8.43194 2.04546 6.24263 2.98759 4.61505 4.61517C2.98747 6.24275 2.04534 8.43207 1.98237 10.7329C1.91941 13.0338 2.74041 15.2714 4.27655 16.9855C5.81269 18.6997 7.94721 19.7601 10.2412 19.9488C12.5352 20.1375 14.8143 19.4401 16.6099 18L20.2899 21.68C20.3829 21.7738 20.4935 21.8482 20.6153 21.8989C20.7372 21.9497 20.8679 21.9758 20.9999 21.9758C21.1319 21.9758 21.2626 21.9497 21.3845 21.8989C21.5063 21.8482 21.6169 21.7738 21.7099 21.68C21.8901 21.4936 21.9909 21.2444 21.9909 20.985C21.9909 20.7257 21.8901 20.4765 21.7099 20.29ZM10.9999 18C9.61544 18 8.26206 17.5895 7.11091 16.8203C5.95977 16.0511 5.06256 14.9579 4.53275 13.6788C4.00293 12.3997 3.86431 10.9923 4.13441 9.63439C4.4045 8.27653 5.07119 7.02925 6.05016 6.05028C7.02912 5.07131 8.27641 4.40463 9.63427 4.13453C10.9921 3.86443 12.3996 4.00306 13.6787 4.53287C14.9578 5.06268 16.051 5.95989 16.8202 7.11103C17.5894 8.26218 17.9999 9.61556 17.9999 11C17.9999 12.8565 17.2624 14.637 15.9497 15.9498C14.6369 17.2625 12.8564 18 10.9999 18Z" fill="white"></path>
              </svg>
            </button>
            <input class="form-control p-0 bg-transparent border-0" type="search" placeholder="Search question, keywords, articles"/>
          </div>
          <div>
            <h5 class="me-4 display-5 text-white fw-medium mb-8">GETTING STARTED</h5>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-primary fw-medium">Do you provide a complete design style?</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 8.46002L18.36 14.12C18.4537 14.213 18.5281 14.3236 18.5789 14.4454C18.6296 14.5673 18.6558 14.698 18.6558 14.83C18.6558 14.962 18.6296 15.0927 18.5789 15.2146C18.5281 15.3365 18.4537 15.4471 18.36 15.54C18.1726 15.7263 17.9191 15.8308 17.655 15.8308C17.3908 15.8308 17.1373 15.7263 16.95 15.54L11.95 10.59L6.99996 15.54C6.8126 15.7263 6.55915 15.8308 6.29496 15.8308C6.03078 15.8308 5.77733 15.7263 5.58996 15.54C5.49548 15.4474 5.42031 15.337 5.36881 15.2151C5.31731 15.0932 5.29051 14.9623 5.28996 14.83C5.29051 14.6977 5.31731 14.5668 5.36881 14.445C5.42031 14.3231 5.49548 14.2126 5.58996 14.12L11.24 8.46002C11.3336 8.35851 11.4473 8.27751 11.5738 8.2221C11.7003 8.16669 11.8369 8.13809 11.975 8.13809C12.1131 8.13809 12.2497 8.16669 12.3762 8.2221C12.5027 8.27751 12.6163 8.35851 12.71 8.46002Z" fill="#A766E9"></path>
                  </svg>
                </div>
                <div class="mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                </div>
              </div>
            </button>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-white fw-medium">Do you have any terms &amp; conditions?</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="white"></path>
                  </svg>
                </div>
                <div class="d-none mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                </div>
              </div>
            </button>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-white fw-medium">How to apply Casper to our project?</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="white"></path>
                  </svg>
                </div>
                <div class="d-none mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                </div>
              </div>
            </button>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-white fw-medium">How was the Terms &amp; Condition?</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="white"></path>
                  </svg>
                </div>
                <div class="d-none mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                </div>
              </div>
            </button>
            <button class="d-block w-100 bg-transparent text-start border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-white fw-medium">How much we can buy this product?</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 15.54L18.36 9.87998C18.4537 9.78702 18.5281 9.67642 18.5789 9.55456C18.6296 9.4327 18.6558 9.30199 18.6558 9.16998C18.6558 9.03797 18.6296 8.90726 18.5789 8.78541C18.5281 8.66355 18.4537 8.55294 18.36 8.45998C18.1726 8.27373 17.9191 8.16919 17.655 8.16919C17.3908 8.16919 17.1373 8.27373 16.95 8.45998L11.95 13.41L6.99996 8.45998C6.8126 8.27373 6.55915 8.16919 6.29496 8.16919C6.03078 8.16919 5.77733 8.27373 5.58996 8.45998C5.49548 8.5526 5.42031 8.66304 5.36881 8.78492C5.31731 8.90679 5.29051 9.03767 5.28996 9.16998C5.29051 9.30229 5.31731 9.43317 5.36881 9.55505C5.42031 9.67692 5.49548 9.78737 5.58996 9.87998L11.24 15.54C11.3336 15.6415 11.4473 15.7225 11.5738 15.7779C11.7003 15.8333 11.8369 15.8619 11.975 15.8619C12.1131 15.8619 12.2497 15.8333 12.3762 15.7779C12.5027 15.7225 12.6163 15.6415 12.71 15.54Z" fill="white"></path>
                  </svg>
                </div>
                <div class="d-none mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>