<section>
<div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid grid-cols-1 gap-12 md:grid-cols-3 md:items-end">
<div class="lg:col-span-2">
<span
class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
>Process</span
>
<h1
class="text-4xl mt-4 font-semibold tracking-tight text-gray-900 lg:text-balance"
>
Simple steps to achieve your goals
</h1>
</div>
<p class="text-base font-medium mt-4 text-gray-500">
Follow these straightforward steps to streamline your process and
achieve success with ease.
</p>
</div>
<dl class="grid grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2 mt-12">
<div class="bg-gray-50 rounded-3xl">
<dt class="tracking-tight text-lg font-medium text-gray-900 p-8">
1. Choose your account type
</dt>
<dd class="text-sm text-gray-500 text-pretty p-8 border-t">
Decide whether you need a checking account, savings account, or both.
Each type has its own benefits and features.
</dd>
</div>
<div class="bg-blue-600 rounded-3xl">
<dt class="tracking-tight text-lg font-medium text-white p-8">
2. Gather required documents
</dt>
<dd
class="text-sm lg:text-balance text-gray-200 p-8 border-t border-white/20"
>
Collect necessary documents such as ID, proof of address, and Social
Security number. This ensures a smooth application process.
</dd>
</div>
<div class="bg-blue-950 rounded-3xl">
<dt class="tracking-tight text-lg font-medium text-white p-8">
3. Complete the application
</dt>
<dd
class="text-sm lg:text-balance text-gray-200 p-8 border-t border-white/20"
>
Fill out the application form online or at your local branch. Provide
accurate information to avoid delays.
</dd>
</div>
</dl>
</div>
</section>