<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="feature-area section-padding-top" id="features_page">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xs-12 col-sm-8">
<div class="page-title text-center">
<h5 class="title">Features</h5>
<div class="space-10"></div>
<h3>Pwoerful Features As Always</h3>
<div class="space-60"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-rocket"></i>
</div>
<h4>Fast & Powerful</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-paperclip"></i>
</div>
<h4>Easily Editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-cloud-download"></i>
</div>
<h4>Cloud Storage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
</div>
<div class="hidden-xs hidden-sm col-md-4">
<figure class="mobile-image">
<img src="https://www.orioninfosolutions.com/assets/images/portfolio/mobile_app/hkclubbing/iphone-frame.png" alt="Feature Photo">
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-clock"></i>
</div>
<h4>Easy Notifications</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-laptop-phone"></i>
</div>
<h4>Fully Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
<div class="service-box">
<div class="box-icon">
<i class="lnr lnr-cog"></i>
</div>
<h4>Editable Layout</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="space-60"></div>
</div>
</div>
</div>
</section>
/*-- 6. Page-Title --*/
.page-title .title {
position: relative;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #8790af;
font-weight: 600;
}
.text-center.page-title .title:before,
.page-title .title:after {
content: '';
width: 50px;
height: 1px;
display: inline-block;
background-color: #e1e1e1;
margin: 0 15px;
-webkit-transform: translateY(-4px);
-ms-transform: translateY(-4px);
transform: translateY(-4px);
}
.section-padding-top {
padding-top: 120px;
}
.feature-area {
color: #ffffff;
background-color:#5e88fc;
background-image: url('');
background-position: bottom -120px center;
background-repeat: no-repeat;
background-size: auto 94%;
margin-bottom: 142px;
}
.feature-area .page-title .title {
color: #ffffff;
}
.feature-area .mobile-image {
margin-bottom: -142px;
}
.service-box {
position: relative;
padding-left: 100px;
}
.team-slide .owl-controls .owl-nav > div,
.service-box .box-icon {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 70px;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 72px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#482cbf+0,6ac6f0+100 */
background: rgb(72, 44, 191);
/* Old browsers */
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #3ACCE1 0%, #E31351 100%);
/* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(45deg, #3ACCE1 0%, #E31351 100%);
background: linear-gradient(45deg, #3ACCE1 0%, #E31351 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1);
overflow: hidden;
z-index: 1;
color: #E31351;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.team-slide .owl-controls .owl-nav > div:hover,
.service-box:hover .box-icon {
color: #ffffff;
}
.team-slide .owl-controls .owl-nav > div:before,
.service-box .box-icon:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index: -1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
opacity: 1;
}
.team-slide .owl-controls .owl-nav > div:hover:before,
.service-box:hover .box-icon:before {
opacity: 0;
}
.service-box h4 {
margin-bottom: 10px;
}
