<div class="relative bg-white isolate overflow-hidden  py-12">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div>
            <h1 class="fade-in text-balance text-4xl font-medium tracking-tight text-black lg:text-5xl">Why Mycelium:
            </h1>
            <h2 class="mt-4 mx-automax-w-3xl text-pretty lg:text-3xl text-xl font-normal text-black fade-in"> Redefining Digital Communication</h2>
        </div>
        <div class="relative grid lg:grid-cols-12 lg:gap-8">
            <!-- Left Content -->
            <div class="lg:col-span-6">
                <div class="mx-auto max-w-2xl lg:mx-0">
                    <p class="fade-in mt-2 text-lg lg:text-xl font-light text-black">
                        Mycelium facilitates secure, efficient, and scalable data transfer and communication among network nodes. It optimizes data routing, ensuring that information follows the shortest path in terms of latency, leading to faster and more efficient communication.
                        <br><br>
                        The technology relies on end-to-end encryption, where each node in the system is identified by a unique key pair, ensuring data security and privacy. This ensures that data remains confidential and authentic, enhancing the privacy and integrity of the network.
                        <br><br>
                    </p>
                </div>
            </div>

            <!-- Right Blockquote -->
            <div class="lg:col-span-6">
                <figure class=" mt-2 pl-8">
                    <blockquote class=" text-black fade-in px-6">
                        <p class="text-md leading-normal text-black font-normal">Mycelium is developed to address the limitations of traditional networking protocols and to contribute to a more sustainable and eco-conscious digital ecosystem. It strives to revolutionize digital communication, making it not only efficient and secure, but also environmentally responsible.<br><br>
                            The inspiration for Mycelium draws from the need for a technology that adapts to changing network conditions and operates efficiently, even in a rapidly evolving digital landscape.</p>
                    </blockquote>
                    <br>
                    <div class="mx-4">
                    <p class="fade-in mx-auto text-xl font-semibold tracking-tight text-black lg:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
                        Decentralized. Scalable. Intelligent.
                    </p>
                    </div>
                </figure>
            </div>
        </div>
    </div>
</div>



<style>
    .blockquote::before {
        content: open-quote;
        font-size: 4rem;
        position: absolute;
        top: -1rem;
        left: -1rem;
        color: #ffffff;
    }
</style>
