<div class="bg-white pt-12 lg:pt-24 pb-6">
    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
        <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
            <div class="max-w-3xl">
                <h2 class="fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black typing">
                    Why Decentralized AI Matters...
                </h2>
            </div> 
        </div>
    </div>
</div>

<style>
  @keyframes typing {
    from { max-width: 0 }
    to { max-width: 100% }
  }

  @keyframes blink {
    50% { border-color: transparent }
  }

  .typing {
    display: inline-block;
    overflow: hidden;
    white-space: normal; /* Allows wrapping */
    border-right: 4px solid black; /* Cursor effect */
    animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
    max-width: 100%; /* Ensures text expands naturally */
    word-break: break-word; /* Allows words to break onto a new line */
  }
</style>
