Bootstrap Service section

<section class="section">
        <div class="effect-1"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mt-4 content">
                        <h1 class="fw-semibold">Services</h1>
                        <p class="text-white">We use our technical capabilities and experience to help organisations to help accelerate their adoption of AWS cloud technologies,
                            to achieve successful and sustainable business outcomes.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class='bx bx-headphone fs-1 icon'></i>
                                <h4 class="mt-3">Advisory & Consulting</h4>
                                <p class="text-white-50">Guide your future IT organisations by eliminating guesswork with our expertise</p>
                                <a href="#" class="stretched-link">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class='bx bx-cloud-drizzle fs-1 icon'></i>
                                <h4 class="mt-3">Cloud Migration </h4>
                                <p class="text-white-50">Migrate your applicatons and data to the cloud to archive your business ambinations faster</p>
                                <a href="#" class="stretched-link">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class='bx bxs-check-shield fs-1 icon'></i>
                                <h4 class="mt-3">Security & Compliance </h4>
                                <p class="text-white-50">Enable low risk business with a secure and compliant cloud.</p>
                                <a href="#" class="mt-3 stretched-link">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class='bx bx-sitemap fs-1 icon'></i>
                                <h4 class="mt-3">Well Architeched Framework</h4>
                                <p class="text-white-50">Learn, measure,and build using Architectural best practices.</p>
                                <a href="#" class="stretched-link">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class="ri-tools-line fs-1 icon"></i>
                                <h4 class="mt-3">Remote Working </h4>
                                <p class="text-white-50">Secure connectivity and productivity for remote workers. </p>
                                <a href="#" class=" card-link mt-auto ">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <i class='bx bx-cog fs-1 icon'></i>
                                <h4 class="mt-3">Cloud Dev & App Modernisation</h4>
                                <p class="text-white-50">Build Cloud first applications that deliver robust business value rapidly.</p>
                                <a href="#" class="stretched-link">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.section {
    padding: 90px 0;
    position: relative;
    background-color: currentColor;
}
.card {
    height: 294px;
    border: 0;
    margin-top: 70px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    background: linear-gradient(#ccffe500, #c6efb87c);
    border-radius: 80px 7px;
    transition: all 0.5s ease-in-out;

}
.card-body {
    padding: 35px;
}
.card-link{
    margin-top: 15px !important;
}
a {
    text-decoration: none;
    color: #05f0357a !important;
    font-weight: 500;
    text-align: bottom;
}
h1 {
    color: #78bf86;
}
i {
    color: #27c42f;
}
h4 {
    font-weight: 600;
    color: #fff;
}
.icon {
    height: 60px;
    width: 60px;
    border: 2px solid #27c42f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card:hover {
    transform: translateY(-35px);
}
.card:hover .icon {
    background-color: #27c42f;
    color: #fff;
    border: 2px dashed #27c42f;
}
@media (max-width: 1198px) {
    .card{
        height: 311px;
    }
    .card-body{
        padding: 32px;
    }
}