Faq Components in Asitrastudio library

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-12">FAQ</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 px-4 mb-16 lg:mb-0">
        <div class="max-w-xs">
          <p class="text-xl text-coolGray-500">
            <span>Couldnt`t fint what you were looking for? write to us at</span>
            <a class="inline-block text-black hover:underline" href="mailto:">help@example.com</a>
          </p>
        </div>
      </div>
      <div class="w-full lg:w-8/12 px-4">
        <div class="lg:ml-auto mw-3xl">
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Cult Wine Investment involves investing in prestigious and limited-production wines known for their quality and collectability.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">What services do you provide?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Cult Wine Investment involves investing in exclusive, high-quality wines from prestigious vineyards or producers known for their limited production and desirability among collectors.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">Why should I invest in wine?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Wine investment offers diversification, potential for capital appreciation, and tangible assets with historical value.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">What kind of returns can I expect with wine investment?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Returns vary but historically, fine wine has shown attractive long-term growth potential.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">How does wine investing work?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Investors purchase wine for aging, store it under optimal conditions, and sell it when its value appreciates.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">Is investing in wine suitable for me?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Consider your goals, risk tolerance, and financial situation to determine if wine investment aligns with your strategy.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">Why is the minimum investment £10k?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">This amount ensures investors have sufficient stake for potential returns and covers associated costs effectively.</p>
            </div>
          </div>
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">Is investing in wine suitable for me?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="max-w-3xl mt-6 text-xl pr-10">Consult with financial advisors to assess if wine investment aligns with your broader financial objectives.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="has-mw-xs">
          <p class="is-size-6">
            <span class="has-text-grey">Couldnt&grave;t fint what you were looking for? write to us at</span>
            <a class="has-text-dark is-inline-block" href="mailto:">help@snazzy.co</a>
          </p>
        </div>
      </div>
      <div class="column is-8">
        <div class="has-mw-3xl ml-auto-desktop">
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What is Cult Wine Investment?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Cult Wine Investment involves investing in prestigious and limited-production wines known for their quality and collectability.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What services do you provide?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What is Cult Wine Investment?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Cult Wine Investment involves investing in exclusive, high-quality wines from prestigious vineyards or producers known for their limited production and desirability among collectors.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">Why should I invest in wine?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Wine investment offers diversification, potential for capital appreciation, and tangible assets with historical value.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What kind of returns can I expect with wine investment?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Returns vary but historically, fine wine has shown attractive long-term growth potential.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">How does wine investing work?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Investors purchase wine for aging, store it under optimal conditions, and sell it when its value appreciates.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">Is investing in wine suitable for me?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Consider your goals, risk tolerance, and financial situation to determine if wine investment aligns with your strategy.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">Why is the minimum investment £10k?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">This amount ensures investors have sufficient stake for potential returns and covers associated costs effectively.</p>
            </div>
          </div>
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">Is investing in wine suitable for me?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </button>
            </div>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Consult with financial advisors to assess if wine investment aligns with your broader financial objectives.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <h1 class="mb-12" >FAQ</h1>
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-xs">
          <p class="fs-7 text-light-dark"><span >Couldnt&grave;t fint what you were looking for? write to us at</span><span> </span><a class="d-inline-block text-dark" href="mailto:" >help@example.com</a></p>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="ms-lg-auto mw-3xl">
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >What services do you provide?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 7.51071L9.21179 3.26352L4.9646 7.51071" stroke="white" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 15.1585L9.21094 3.38249" stroke="white" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
            <p class="mw-2xl mt-6 mb-0 pe-10" >
              During this phase the design is developed to meet the required technical standards to meet building regulations and
              incorporate sustainability strategies.
            </p>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >Why should I invest in wine?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >What kind of returns can I expect with wine investment?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >How does wine investing work?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >Is investing in wine suitable for me?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >Why is the minimum investment &pound;10k?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >Is investing in wine suitable for me?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>