<section class="position-relative pt-20 pb-xl-32 bg-black overflow-hidden">
<div class="container mb-16 mb-xl-0">
<div class="row">
<div class="col-12 col-xl-6">
<h2 class="fs-10 text-white mb-16">Three steps to get started</h2>
<div class="row mb-12">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">1</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Create A Free Account</h3>
<p class="text-secondary-light mb-0">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
</div>
</div>
<div class="row mb-12">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">2</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Select Your Package</h3>
<p class="text-secondary-light mb-0">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
</div>
</div>
<div class="row">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">3</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Grow Business Fast</h3>
<p class="text-secondary-light mb-11">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
<button class="btn btn-light-light fs-20 px-11 py-4 text-uppercase border-0" type="button" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Get Started now</button>
</div>
</div>
</div>
</div>
</div>
<div class="ps-4 pl-xl-0 position-xl-absolute end-0 bottom-0">
<div class="position-relative d-flex justify-content-end">
<img class="img-fluid" src="gradia-assets/images/how-it-works/dashboard.png" alt="">
<div class="d-none d-xl-block position-absolute w-100" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%); height: 64px; top: -64px; left: 120px; border-top-left-radius: 25px; "></div>
</div>
</div>
</section>