Responsive Pricing Card

<!-- AwesomeFont  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section class="bg-pricing">
            <div class="bg-overlay"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="text-center text-white">
                            <h6 class="pricing-title mb-0">Business Solution Plan </h6>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row justify-content-center">
                    <div class="col-lg-3 col-md-6 mt-4 pt-2">
                        <div class="pricing-box text-center bg-dark card border-0 px-4 py-5">
                            <div class="price-icon text-primary">
                                <i class="uim uim-circle-layer"></i>
                            </div>
                            <div class="card-body p-0">
                                <h5 class="text-white mt-5 fw-normal">Standard Plan</h5>
                                <p class="text-white-50 mt-3">dolorem eum fugiat quo voluptas nulla pariatur.</p>
                                <a href="#" class="btn custom-btn rounded-pill mt-4">Learn More <i class="fa fa-angle-right"></i></a>
                            </div>
                        </div><!--end pricing-box-->
                    </div><!--end col-->

                    <div class="col-lg-3 col-md-6 mt-4 pt-2">
                        <div class="pricing-box pricing-active text-center bg-dark card border-0 px-4 py-5">
                            <div class="price-icon text-primary">
                                <i class="uim uim-airplay"></i>
                            </div>
                            <div class="card-body p-0">
                                <h5 class="text-white mt-5 fw-normal">Professional Plan</h5>
                                <p class="text-white-50 mt-3">dolorem eum fugiat quo voluptas nulla pariatur.</p>
                                <a href="#" class="btn custom-btn rounded-pill mt-4">Learn More <i class="fa fa-angle-right"></i></a>
                            </div>
                        </div><!--end pricing-box-->
                    </div><!--end col-->

                    <div class="col-lg-3 col-md-6 mt-4 pt-2">
                        <div class="pricing-box text-center bg-dark card border-0 px-4 py-5">
                            <div class="price-icon text-primary">
                                <i class="uim uim-box"></i>
                            </div>
                            <div class="card-body p-0">
                                <h5 class="text-white mt-5 fw-normal">Enterprice Plan</h5>
                                <p class="text-white-50 mt-3">dolorem eum fugiat quo voluptas nulla pariatur.</p>
                                <a href="#" class="btn custom-btn rounded-pill mt-4">Learn More <i class="fa fa-angle-right"></i></a>
                            </div>
                        </div><!--end pricing-box-->
                    </div><!--end col-->
                    
                    <div class="col-lg-12 mt-4 pt-2">
                        <div class="text-center text-white-50">
                            <p class="mb-0">Learn more about how the platform can be useful for your organization</p>
                            <p class="mb-0"><a href="#" class="text-primary">Send a Meassage</a> or give us a call 1-234-567-7891.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section>

/*--- Google Font ---*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap");


body {
  font-family: "Inter", sans-serif;
}

a {
  text-decoration: none;
  outline: none;
}

.text-primary {
  color: #17e4c2 !important;
}

.bg-primary {
  background-color: #17e4c2 !important;
}

.bg-dark {
  background-color: #2e3c45 !important;
}

.btn {
  padding: 12px 30px;
  font-size: 15px;
}

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

.pricing-box {
  transition: all 0.5s ease;
}

.pricing-box .custom-btn {
  color: #17e4c2;
  border: 1px solid transparent;
  box-shadow: none;
  transition: all 0.5s ease;
}
.price-icon .uim-svg{
  transition: all 0.5s ease;
}

.pricing-box:hover,.pricing-active {
  background-color: #3f4e58 !important;
}

.pricing-box:hover .uim-svg,.pricing-active .uim-svg {
  transform: scale(1.3);
}

.pricing-box:hover .custom-btn,.pricing-active .custom-btn {
  color: #17e4c2;
  border: 1px solid #17e4c2;
}

.uim-svg svg {
  height: 40px;
  width: 40px;
}

@media (max-width: 992px) {
  .bg-pricing {
    height: auto;
    padding: 80px 0;
  }
}