Empower your finances for a brighter tomorrow

<!-- =======================
Main Banner START -->
<section class="pt-xl-8 pb-0 position-relative">
	<!-- background pattern -->
	<div class="position-absolute top-0 start-50 translate-middle-x mt-8">
		<img src="assets/images/elements/bg-pattern-5.png" alt="">
	</div>

	<div class="container pt-5 position-relative">
		<!-- Title and contents -->
		<div class="row">
			<div class="col-lg-8 mx-auto text-center">
				<!-- Pre info -->
				<span class="heading-color fw-semibold">Trusted by happy customers</span>
				<ul class="avatar-group mb-0 align-items-center justify-content-center mt-2">
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/05.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/04.jpg" alt="avatar">
					</li>
				</ul>

				<!-- Title -->
				<h1 class="my-4">Empower your <span class="text-primary">finances</span> for a brighter tomorrow</h1>
				<p class="mb-5">Whether you're planning for retirement, investing in your future, or seeking expert advice, our team is here to provide tailored solutions to meet your unique needs.</p>

				<!-- Button -->
				<div class="d-flex gap-1 gap-sm-3 flex-wrap justify-content-center">
					<a class="btn btn-lg btn-primary" href="#"><i class="bi bi-telephone-fill me-2"></i>Book a call</a>
					<button class="btn btn-lg btn-light border" type="button">Start Your Journey</button>
				</div>
			</div>
			<!-- Image -->
			<div class="col-12 mt-6 mt-xl-8">
				<img src="assets/images/bg/11.jpg" class="rounded" alt="">
			</div>

		</div>
		
		<!-- Card and images -->
		<div class="row g-4 justify-content-between align-items-center mt-5 mt-md-7 pt-2 d-none">
			<!-- Image -->
			<div class="col-md-6 col-lg-3 order-2">
				<img src="assets/images/about/19.jpg" class="rounded" alt="">
			</div>

			<!-- Finance card -->
			<div class="col-md-6 col-lg-5 order-1 order-md-2">
				<div class="card card-body bg-dark overflow-hidden p-4" data-bs-theme="dark">
					<!-- Decoration -->
					<figure class="position-absolute bottom-0 start-0 mb-n7">
						<svg opacity="0.05" width="235" height="201" viewBox="0 0 235 201" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M0.205078 64.3935C15.4403 56.5767 32.7667 52.1455 51.039 52.1455C112.826 52.1455 182.914 122.233 182.914 184.02C182.914 189.596 182.465 195.123 181.669 200.5H233.812C234.31 195.073 234.559 189.547 234.559 184.02C234.559 82.6509 152.408 0.5 51.039 0.5C33.4139 0.5 16.3365 2.98942 0.205078 7.66953V64.3935Z" fill="#fff"/>
							</svg>
					</figure>
					<!-- name and img -->
					<div class="d-flex justify-content-between align-items-center mb-4">
						<h6 class="mb-0 text-primary">Mizzle bank</h6>
						<img src="assets/images/elements/mastercard.svg" class="w-40px" alt="">
					</div>
					<!-- Chip image -->
					<img src="assets/images/elements/Chip.svg" class="w-50px mb-7" alt="">

					<!-- Account and Valid date -->
					<div class="d-flex justify-content-between mt-3">
						<!-- Account number -->
						<div>
							<span class="text-light small">Account number</span>
							<h4 class="mb-0">**** **** **** 7899</h4>
						</div>

						<!-- Account number -->
						<div class="text-end">
							<span class="text-light small">Valid date</span>
							<h5 class="mb-0">29/05</h5>
						</div>
					</div>
				</div>
			</div>

			<!-- Chart image -->
			<div class="col-md-6 col-lg-3 d-none d-lg-block order-md-3">
				<img src="assets/images/elements/saas-decoration/24.png" class="rounded shadow" alt="">
			</div>

		</div>
	</div>
</section>
<!-- =======================
Main Banner END -->