<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4 Boxes Section</title>

    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .box-card{
            transition: 0.3s;
            border-radius: 15px;
        }
        .box-card:hover{
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>

<!-- Section Start -->
<section class="py-5 bg-light">
    <div class="container">

        <!-- Heading -->
        <div class="text-center mb-5">
            <h1 class="fw-bold">One platform to accept payments, protect revenue, and control your finances</h1>
            
        </div>

        <!-- 4 Boxes -->
        <div class="row g-4">

            <!-- Box 1 -->
            <div class="col-md-3">
                <div class="card box-card text-center p-4">
                    <h4>Expand your business</h4>
                    <p>Easily add more payment methods and grow into new markets with local acquiring.</p>
                    <button class="btn btn-primary">Read More</button>
                </div>
            </div>

            <!-- Box 2 -->
            <div class="col-md-3">
                <div class="card box-card text-center p-4">
                    <h4>Connect online and offline</h4>
                    <p>Create superior customer experiences using cross-channel insights.</p>
                    <button class="btn btn-primary">Read More</button>
                </div>
            </div>

            <!-- Box 3 -->
            <div class="col-md-3">
                <div class="card box-card text-center p-4">
                    <h4>Uncover areas for growth</h4>
                    <p>Gain a deeper understanding of your business with all your global payment data in one place.

</p>
                    <button class="btn btn-primary">Read More</button>
                </div>
            </div>

            <!-- Box 4 -->
            <div class="col-md-3">
                <div class="card box-card text-center p-4">
                    <h4>Manage fraud at scale</h4>
                    <p>Protect your business by detecting and responding to fraud without impacting real transactions.</p>
                    <button class="btn btn-primary">Read More</button>
                </div>
            </div>

        </div>
    </div>
</section>

</body>
</html>
