{% load static %}
<section id="contact" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold" style="color: #091a5c;">Let's Talk</h2>
            <p class="text-muted">Reach out directly through the contacts below.</p>
        </div>

        <div class="row g-3">
            <!-- Email Card -->
            <div class="col-12 col-md-4">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <i class="bi bi-envelope-fill fs-2 mb-2" style="color: #091a5c;"></i>
                        <h6 class="fw-bold">Email</h6>
                        <p class="mb-0">
                            <a href="mailto:ian@ianonyango.com" class="text-decoration-none">
                                ian@ianonyango.com
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Phone Card -->
            <div class="col-12 col-md-4">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <i class="bi bi-telephone-fill fs-2 mb-2" style="color: #091a5c;"></i>
                        <h6 class="fw-bold">Phone</h6>
                        <p class="mb-0">
                            <a href="tel:+254702925783" class="text-decoration-none">
                                +254 702 925 783
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Location Card -->
            <div class="col-12 col-md-4">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <i class="bi bi-geo-alt-fill fs-2 mb-2" style="color: #091a5c;"></i>
                        <h6 class="fw-bold">Location</h6>
                        <p class="mb-0">Westlands, Nairobi</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>