<div class="relative bg-white isolate overflow-hidden py-12">
    <div class="mx-auto max-w-7xl px-4 lg:px-8">
        <div>
            <h1 class="fade-in text-balance text-4xl font-medium tracking-tight text-black lg:text-5xl">Our Technology
            </h1>
        </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 enables secure, efficient, and scalable data transfer between network nodes by optimizing data routing. It ensures that information takes the shortest path with the lowest latency, resulting in faster and more efficient communication.
                        <br><br>
                        The technology relies on end-to-end encryption, with each node uniquely identified by its own key pair, guaranteeing the security and privacy of data. This approach ensures that data remains confidential and authentic, strengthening the overall 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 was created to overcome the limitations of traditional networking protocols while promoting a more sustainable and eco-friendly digital ecosystem. Its goal is to transform digital communication, making it not only efficient and secure but also environmentally responsible.
                            <br><br>
                            The inspiration behind Mycelium comes from the need for a technology that can adapt to changing network conditions and continue to operate efficiently 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>
