Card grid for three service offerings.
<section class="py-5 bg-light">
<div class="container py-4">
<div class="text-center mb-5">
<h6 class="text-primary fw-bold text-uppercase" style="letter-spacing:2px;">Our Expertise</h6>
<h2 class="display-6 fw-bold">Premium Services</h2>
<div class="mx-auto mt-3 bg-primary" style="width:60px;height:3px;"></div>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0 shadow-sm service-card text-center p-4">
<div class="bg-primary-subtle text-primary rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-laptop fs-1"></i></div>
<h4 class="fw-bold mb-3">Web Development</h4>
<p class="text-muted mb-4">Custom coded, fully responsive web apps built with modern frameworks.</p>
<a href="#" class="text-primary fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0 shadow-sm service-card text-center p-4">
<div class="bg-success-subtle text-success rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-phone fs-1"></i></div>
<h4 class="fw-bold mb-3">Mobile Apps</h4>
<p class="text-muted mb-4">Native and cross-platform mobile experiences for iOS and Android.</p>
<a href="#" class="text-success fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0 shadow-sm service-card text-center p-4">
<div class="bg-warning-subtle text-warning rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-palette fs-1"></i></div>
<h4 class="fw-bold mb-3">UI/UX Design</h4>
<p class="text-muted mb-4">Intuitive interfaces that enhance every customer journey.</p>
<a href="#" class="text-warning fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
</div>
</div>
</div>
</div>
</section>