<section {{ $attributes }}>
    <div class="flex flex-wrap">
        <div class="w-full px-4">
            <div class="mx-auto mb-6 max-w-4xl text-center">
                <h2 class="mb-4 text-4xl font-bold text-dark sm:text-4xl md:text-5xl text-gray-700">
                    How does MagicExtract work?
                </h2>
                <p class="text-base text-gray-500 text-xl">
                    A short video introduction
                </p>
            </div>
        </div>
    </div>
    <div>
        <div class="flex flex-wrap">
            <div class="w-full lg:w-8/12 mx-auto mb-8 mt-4 lg:mt-0 order-2 md:order-2">
                <div class="relative w-full">
                    <div id="watch"
                         class="relative overflow-hidden border border-base-300 border border-8 border-base-300 rounded-xl">
                        <set-video-modal data-trigger-id="demo"></set-video-modal>
                        <a id="demo" class="group block relative overflow-hidden shadow-2xl"
                           data-event="Click Play Demo Video"
                           data-event-props="{&quot;location&quot;:&quot;Top of the landing page&quot;}"
                           href="#demo" data-event-initialized="true">
                            <div class="bg-black cursor-pointer">
                                <img class="group-hover:opacity-40 opacity-60 transition-opacity"
                                     alt="DocuSeal Demo"
                                     src="https://www.docuseal.co/packs/static/images/demo-180bc73e5d6c29193739.jpg"
                                     width="1920" height="1013">
                            </div>
                            <div
                                class="absolute top-0 bottom-0 right-0 left-0 flex justify-center items-center">
                                <div
                                    class="bg-white border border-base-200 rounded-full shadow-lg absolute cursor-pointer"
                                    style="margin-top: 103px">
                                    <div class="px-5 py-2">
                                        <span
                                            class="text-gray font-bold text-xs uppercase">Watch a Demo - 1 minute</span>
                                    </div>
                                </div>
                                <span
                                    class="bg-primary-500 rounded-full shadow-xl p-10 opacity-40 inline absolute w-14 h-14"></span>
                                <span class="bg-primary-500 rounded-full shadow-xl absolute"
                                      style="padding: 20px">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" width="44" height="44" viewBox="0 0 24 24"
                         stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round"
                         data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #e8e6e3;">
  <path stroke="none" d="M0 0h24v24H0z" fill="none" data-darkreader-inline-stroke=""
        style="--darkreader-inline-stroke: none;"></path>
  <path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" stroke-width="0"
        fill="currentColor" data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;"></path>
</svg>

                  </span>
                            </div>
                        </a></div>
                </div>
            </div>
        </div>
    </div>

</section>
