<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="service-area service3 section-padding-120 bg-gray" id="service">
<div class="container">
<div class="row g-5 justify-content-center">
<!-- Single Service Area-->
<div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
<div class="card service-card wow fadeInUp active" data-wow-delay="200ms" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
<div class="card-body">
<div class="icon"><i class="lni-android"></i></div>
<h4>Mobile Apps Developement</h4>
<p>It's crafted with the latest trend of design.</p>
</div>
</div>
</div>
<!-- Single Service Area-->
<div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
<div class="card service-card wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms; animation-name: fadeInUp;">
<div class="card-body">
<div class="icon"><i class="lni-pie-chart"></i></div>
<h4>Digital Content & SEO Marketing</h4>
<p>It's crafted with the latest trend of design.</p>
</div>
</div>
</div>
<!-- Single Service Area-->
<div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
<div class="card service-card wow fadeInUp" data-wow-delay="800ms" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 800ms; animation-name: fadeInUp;">
<div class="card-body">
<div class="icon"><i class="lni-wordpress"></i></div>
<h4>WordPress 5.0 Ultimate Solution</h4>
<p>It's crafted with the latest trend of design.</p>
</div>
</div>
</div>
</div>
</div>
</section>
.service-card {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
position: relative;
z-index: 1;
border-radius: 6px;
padding: 30px;
text-align: center;
-webkit-box-shadow: 0 12px 30px rgba(47, 91, 234, 0.05);
box-shadow: 0 12px 30px rgba(47, 91, 234, 0.05);
overflow: hidden; }
.service-card::after {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background-color: #ffffff;
opacity: 0.15;
top: 20px;
content: "";
left: 20px;
z-index: -1; }
.service-card .icon {
position: relative;
z-index: 10;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
display: block;
width: 80px;
height: 80px;
margin: 0 auto 45px;
background-color: #1f0757;
border-radius: 50%;
color: #ffffff;
font-size: 2rem; }
.service-card .icon i {
line-height: 80px; }
.service-card .icon::after {
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: "";
top: -10px;
left: -10px;
background-color: transparent;
border: 2px dashed #eeeeee;
border-radius: 50%;
z-index: -10; }
.service-card h4 {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin-bottom: 1rem; }
.service-card p {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin-bottom: 0; }
.service-card.active, .service-card:hover, .service-card:focus {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-box-shadow: 0 18px 56px rgba(47, 91, 234, 0.135);
box-shadow: 0 18px 56px rgba(47, 91, 234, 0.135);
background-color: #0811fb;
border-color: #0811fb; }
.service-card.active .icon::after, .service-card:hover .icon::after, .service-card:focus .icon::after {
border-color: rgba(255, 255, 255, 0.5); }
.service-card.active h4,
.service-card.active p, .service-card:hover h4,
.service-card:hover p, .service-card:focus h4,
.service-card:focus p {
color: #ffffff; }
.service-area {
position: relative;
z-index: 5; }
.service-area .row .col-12:nth-child(2) .icon {
background-color: #00b894; }
.service-area .row .col-12:nth-child(2) img {
display: none; }
.service-area .row .col-12:nth-child(3) .icon {
background-color: #fdd76e; }
.service-area .row .col-12:nth-child(3) img {
margin-left: -70px; }
.service-area .row .col-12:nth-child(4) .icon {
background-color: #00b894; }
.service-area .row .col-12:nth-child(5) .icon {
background-color: #fdd76e; }
.service-area .row .col-12:nth-child(5) img {
display: none; }
.service-area .row .col-12:nth-child(6) img {
margin-left: -70px; }
.service3 .service-card {
border: 0;
-webkit-box-shadow: none;
box-shadow: none; }
.service3 .service-card.active, .service3 .service-card:hover, .service3 .service-card:focus {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-box-shadow: 0 18px 56px rgba(47, 91, 234, 0.135);
box-shadow: 0 18px 56px rgba(47, 91, 234, 0.135);
background-color: #ffffff; }
.service3 .service-card.active::after, .service3 .service-card:hover::after, .service3 .service-card:focus::after {
background-color: #0811fb; }
.service3 .service-card.active .icon::after, .service3 .service-card:hover .icon::after, .service3 .service-card:focus .icon::after {
border-color: #ffffff; }
.service3 .service-card.active h4, .service3 .service-card:hover h4, .service3 .service-card:focus h4 {
color: #0811fb; }
.service3 .service-card.active p, .service3 .service-card:hover p, .service3 .service-card:focus p {
color: #8480ae; }
// :: Service Active Code
$('.service-card').on('mouseenter', function () {
$('.service-card').removeClass('active');
$(this).addClass('active');
})
// :: Animated Headline Active Code
if ($.fn.animatedHeadline) {
$('.animated--headline').animatedHeadline({
animationType: 'clip'
});
}
