Services section using Bootstrap 5

<!--Unicons Icons-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">

<section class="bg-feature">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-5">
                        <div class="mb-4 mb-lg-0">
                            <h1 class="feature-title display-6 fw-bold position-relative">Advance features give you full control!</h1>
                            <p class="text-muted fs-5 lh-lg my-4 py-lg-3">No temporibus autem quibusdam et aut officiis debitis aut
                                rerum necessitatibus saepe ut.</p>
                            <p class="text-muted lh-lg mb-0">Aliquam erat volutpat. Aliquam diam nunc, pretium in sed
                                pharetra at libero. Aenean quis fringilla erat rhoncus arcu. Nunc risus risus, porttitor sed
                                urna amet.</p>
                        </div>
                    </div>
                    <!--end col-->

                    <div class="col-lg-7">
                        <div class="row justify-content-center">
                            <div class="col-xl-5 col-md-6 mt-4">
                                <div class="card text-white bg-gradient-info border-0 mt-md-5">
                                    <div class="card-body px-4 py-5">
                                        <i class="uil uil-channel-add" style="font-size:46px"></i>
                                        <h5 class="mt-3">User Friendly</h5>
                                        <p class="mt-3 mb-0">Cras fringilla in turpis sit amet rhoncus pharetra.</p>
                                    </div>
                                    <!--end card-body-->
                                </div>
                                <!--end card-->
                            </div>
                            <!--end col-->

                            <div class="col-xl-5 col-md-6 mt-4">
                                <div class="card text-white bg-gradient-purple border-0">
                                    <div class="card-body px-4 py-5">
                                        <i class="uil uil-create-dashboard" style="font-size: 46px;"></i>
                                        <h5 class="mt-3">Minimal Interface</h5>
                                        <p class="mt-3 mb-0">Cras fringilla in turpis sit amet rhoncus pharetra.</p>
                                    </div>
                                    <!--end card-body-->
                                </div>
                                <!--end card-->
                            </div>
                            <!--end col-->

                            <div class="col-xl-5 col-md-6 mt-4">
                                <div class="card text-white bg-gradient-warning border-0">
                                    <div class="card-body px-4 py-5">
                                        <i class="uil uil-envelope-alt" style="font-size: 46px"></i>
                                        <h5 class="mt-3">Fast Messaging</h5>
                                        <p class="mt-3 mb-0">Cras fringilla in turpis sit amet rhoncus pharetra.</p>
                                    </div>
                                    <!--end card-body-->
                                </div>
                                <!--end card-->
                            </div>
                            <!--end col-->

                            <div class="col-xl-5 col-md-6 mt-4">
                                <div class="card text-white bg-gradient-green border-0">
                                    <div class="card-body px-4 py-5">
                                        <i class="uil uil-unlock-alt" style="font-size: 46px;"></i>
                                        <h5 class="mt-3">Secure Monitoring</h5>
                                        <p class="mt-3 mb-0">Cras fringilla in turpis sit amet rhoncus pharetra.</p>
                                    </div>
                                    <!--end card-body-->
                                </div>
                                <!--end card-->
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
            </div>
            <!--end container-->
        </section>

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Poppins:wght@600&display=swap");

body {
  font-family: "Lato", sans-serif;
  color: #000000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
}

p {
  font-size: 18px;
}

.text-white {
  color: #ffffff !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-feature {
  background-image: url('../images/bg.jpg');
  background-position: center;
  display: flex;
  align-items: center;
  height: 100vh;
  position: relative;
}

.feature-title::before {
  content: "";
  background-color: #1fecb9;
  position: absolute;
  width: 66px;
  height: 3px;
  top: -28px;
  left: 0;
}

.bg-gradient-info {
  background-image: linear-gradient(45deg, #41b2e0, #08eaee);
}

.bg-gradient-purple {
  background-image: linear-gradient(45deg, #7e5ecd, #b67dee);
}

.bg-gradient-warning {
  background-image: linear-gradient(45deg, #f0af17, #f8d361);
}

.bg-gradient-green {
  background-image: linear-gradient(45deg, #2eac60, #2af088);
}

@media (min-width: 768px) {
  .bg-gradient-green {
    margin-top: -3rem;
  }
}

@media (max-width: 768px) {
  .bg-feature {
    height: auto;
    padding: 90px 0;
  }
}