<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 ---------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!------ Include the above in your HEAD tag ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Header Area Start -->
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Service Section using Bootstrap!</h2>
<ul>
<li>9 Colors</li>
<li>10 Unique Design</li>
<li>Mobile Friendly</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Area End -->
<!-- Section Style 1 Start -->
<section class="style-1 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 1</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 1 End -->
<!-- Section Style 2 Start -->
<section class="style-2 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 2</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 2 End -->
<!-- Section Style 3 Start -->
<section class="style-3 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 3</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 3 End -->
<!-- Section Style 4 Start -->
<section class="style-4 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 4</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 4 End -->
<!-- Section Style 5 Start -->
<section class="style-5 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 5</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 5 End -->
<!-- Section Style 6 Start -->
<section class="style-6 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 6</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 6 End -->
<!-- Section Style 7 Start -->
<section class="style-7 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 7</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-globe"></i>
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-code"></i>
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-crop"></i>
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-star"></i>
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-lightbulb-o"></i>
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<i class="fa fa-heart"></i>
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 7 End -->
<!-- Section Style 8 Start -->
<section class="style-8 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 8</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-globe"></i>
</div>
<div class="box-content">
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-code"></i>
</div>
<div class="box-content">
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-crop"></i>
</div>
<div class="box-content">
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-star"></i>
</div>
<div class="box-content">
<h3>Branding</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="box-content">
<h3>User Friendly</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<div class="box-icon">
<i class="fa fa-heart"></i>
</div>
<div class="box-content">
<h3>24/7 Support</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 8 End -->
<!-- Section Style 9 Start -->
<section class="style-9 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 9</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<img src="img/service1.jpg" alt="" />
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<img src="img/service2.jpg" alt="" />
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<img src="img/service3.jpg" alt="" />
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 9 End -->
<!-- Section Style 10 Start -->
<section class="style-10 section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Service Style 10</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-service">
<img src="img/service1.jpg" alt="" />
<h3>Web Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<img src="img/service2.jpg" alt="" />
<h3>Web Development</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="single-service">
<img src="img/service3.jpg" alt="" />
<h3>Graphic Design</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p>
<a href="" class="border-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section Style 10 End -->
/*
Template Name: Bootstrap Service Section
Author: WPDeveloper28
Author URI:
Version: 1.0
/*
* ----------------------------------------------------
* 01. Reset CSS
* ----------------------------------------------------
*/
@import url('http://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');
body, html{
height:100%
}
.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.aligncenter {
display: block;
margin: 0 auto 15px;
}
img {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
color: #373737;
font-weight: 400;
line-height: 1.3
}
p{
color:#373737
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #000;
line-height: 1.8
}
a{
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:focus, input:focus, textarea:focus, button:focus {
outline: 0 solid;
text-decoration: none;
}
/* Common Css */
header {
text-align: center;
background-image: url('../img/service-bannar.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
color: #fff;
padding: 80px 0;
}
header:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #333;
z-index: -1;
opacity: .7;
}
header h2 {
color: #fff;
font-size: 45px;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header li {
display: inline-block;
background-color: #0bbbc1;
padding: 10px 25px;
font-size: 20px;
margin: 20px 10px;
border-radius: 3px;
}
.single-service {
margin-bottom: 60px;
}
.section-padding {
padding: 80px 0;
}
a.border-btn {
color: #fff;
background-color: #0bbbc1;
display: inline-block;
padding: 10px 30px;
border-radius: 3px;
margin-top: 20px;
font-weight: 500;
-webkit-transition:.4s;
transition: .4s;
position:relative;
overflow:hidden;
z-index:10;
text-decoration:none;
}
a.border-btn:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #333;
left: 0;
top: -100%;
border-radius: 3px;
-webkit-transition:.4s;
transition: .4s;
visibility: hidden;
z-index:-1
}
a.border-btn:hover:before {
visibility:visible;
top: 0;
}
.single-service h3 {
font-weight: 600;
font-size: 20px;
}
.single-service p {
font-weight: 300;
color: #333;
font-size: 14px;
}
/* Section Title Css */
.section-title {
text-align: center;
margin: 80px 0;
}
.section-title h2 {
position: relative;
display: inline-block;
padding-bottom: 25px;
}
.section-title h2:before {
position: absolute;
content: "";
width: 80px;
height: 3px;
background-color: #0bbbc1;
bottom: 0;
left: 50%;
margin-left: -40px;
}
.section-title h2:after {
position: absolute;
content: "";
width: 60px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
bottom: -10px;
margin-left: -30px;
}
/* Service Style 1 Css */
.style-1 .single-service {
text-align: center;
padding: 25px 40px;
box-shadow: 0 5px 30px -5px #ccc;
padding-bottom:20px
}
.style-1 .single-service i.fa {
color: #0bbbc1;
font-size: 40px;
margin: 20px 0;
}
/* Service Style 2 Css */
.style-2 .single-service {
box-shadow: 0 5px 30px -5px #ccc;
padding: 25px 40px;
}
.style-2 .single-service i.fa:after {
position: absolute;
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #0bbbc1;
border-bottom: 10px solid transparent;
bottom: -18px;
left: 50%;
margin-left: -10px;
}
.style-2 .single-service i.fa {
font-size: 30px;
color: #fff;
background-color: #0bbbc1;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: relative;
margin-bottom: 25px;
position:relative
}
/* Service Style 3 Css */
.style-3 .single-service {
text-align: center;
border: 1px solid #ddd;
padding: 25px 40px;
-webkit-transition:.4s;
transition: .4s;
}
.style-3 .single-service i.fa {
width: 60px;
height: 60px;
font-size: 30px;
line-height: 60px;
border: 1px solid #0bbbc1;
margin-bottom: 30px;
border-radius: 50%;
color: #0bbbc1;
-webkit-transition:.4s;
transition: .4s;
}
.style-3 .single-service:hover i.fa {
background-color: #0bbbc1;
color: #fff;
border-color: #0bbbc1;
}
.style-3 .single-service:hover {
box-shadow: -3px 3px 3px 0px #ddd;
}
/* Service Style 4 Css */
.style-4 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position:relative;
-webkit-transition:.3s;
transition:.3s;
text-align:center
}
.style-4 .single-service i.fa {
color: #0bbbc1;
font-size: 30px;
margin: 25px 0px;
border: 1px solid #0bbbc1;
text-align: center;
border-radius: 50%;
position: relative;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transition:.5s;
transition:.5s
}
.style-4 .single-service:after, .single-team:after {
position: absolute;
content: "";
width: 0%;
border-top: 3px solid #0bbbc1;
left: 0;
top: 0;
border-left: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility:hidden;
-webkit-transition:.5s;
transition:.5s
}
.style-4 .single-service:before, .single-team:before {
position: absolute;
content: "";
width: 0%;
border-bottom: 3px solid #0bbbc1;
right: 0;
bottom: 0;
border-right: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility:hidden;
-webkit-transition:.5s;
transition:.5s
}
.style-4 .single-service:hover:before, .single-service:hover:after{
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility:visible;
height:50%;
width:50%;
}
.style-4 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-4 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 20px;
font-size: 22px;
}
.style-4 .single-service p {
font-weight: 300;
}
.style-4 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: -25px;
left: 50%;
margin-left: -1.5px;
}
.style-4 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: -13px;
}
/* Service Style 5 Css */
.style-5 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position:relative;
-webkit-transition:.3s;
transition:.3s;
text-align:center
}
.style-5 .single-service i.fa {
color: #0bbbc1;
font-size: 30px;
margin: 25px 0px;
border: 1px solid #0bbbc1;
text-align: center;
border-radius: 50%;
position: relative;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transition:.5s;
transition:.5s
}
.style-5 .single-service:after{
position: absolute;
content: "";
width: 0%;
left: 0;
top: 0;
border-left: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-5 .single-service:before{
position: absolute;
content: "";
width: 0%;
right: 0;
bottom: 0;
border-right: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-5 .single-service:hover:before, .single-service:hover:after{
height:50%;
width:50%;
}
.style-5 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-5 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 20px;
font-size: 22px;
}
.style-5 .single-service p {
font-weight: 300;
}
.style-5 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: -25px;
left: 50%;
margin-left: -1.5px;
}
.style-5 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: -13px;
}
/* Service Style 6 Css */
.style-6 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position:relative;
-webkit-transition:.3s;
transition:.3s;
text-align:center;
border-bottom: 3px solid #0bbbc1;
padding-bottom:30px
}
.style-6 .single-service i.fa {
color: #0bbbc1;
font-size: 30px;
margin: 25px 0px;
border: 1px solid #0bbbc1;
text-align: center;
border-radius: 50%;
position: relative;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transition:.5s;
transition:.5s
}
.style-6 .single-service:after{
position: absolute;
content: "";
width: 0%;
left: 0;
top: 0;
border-left: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-6 .single-service:before{
position: absolute;
content: "";
width: 0%;
right: 0;
bottom: 0;
border-right: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-6 .single-service:hover:before, .single-service:hover:after{
height:50%;
width:50%;
}
.style-6 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-6 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 20px;
font-size: 22px;
}
.style-6 .single-service p {
font-weight: 300;
}
.style-6 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: -25px;
left: 50%;
margin-left: -1.5px;
}
.style-6 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: -13px;
}
.style-6 .single-service a.border-btn {
background-color: #0bbbc1;
position: absolute;
left: 50%;
margin-left: -70px;
margin-top: 10px;
z-index: 99;
}
/* Service Style 7 Css */
.style-7 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position:relative;
-webkit-transition:.3s;
transition:.3s;
text-align:center
}
.style-7 .single-service i.fa {
color: #0bbbc1;
font-size: 30px;
margin: 25px 0px;
border: 1px solid #0bbbc1;
text-align: center;
border-radius: 50%;
position: relative;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transition:.5s;
transition:.5s
}
.style-7 .single-service:after{
position: absolute;
content: "";
width: 0%;
left: 0;
top: 0;
border-top: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-7 .single-service:before{
position: absolute;
content: "";
width: 0%;
right: 0;
bottom: 0;
border-bottom: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-7 .single-service:hover:before, .single-service:hover:after{
height:50%;
width:50%;
}
.style-7 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-7 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 20px;
font-size: 22px;
}
.style-7 .single-service p {
font-weight: 300;
}
.style-7 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: -25px;
left: 50%;
margin-left: -1.5px;
}
.style-7 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: -13px;
}
/* Service Style 8 Css */
.style-8 .single-service:hover .box-icon i.fa {
border-radius: 50%;
background-color: #0bbbc1;
color: #fff;
border-color: #0bbbc1;
}
.box-icon {
float: left;
}
.box-content {
padding-left: 75px;
}
.box-icon i.fa {
border-radius: 0px;
text-align: center;
}
.box-content a {
margin-top: 5px;
}
.box-icon i.fa {
border-radius: 0px;
text-align: center;
border: 1px solid #0bbbc1;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 30px;
color: #0bbbc1;
-webkit-transition:.4s;
transition:.4s
}
.style-8 .single-service {
border-right: 3px solid #0bbbc1;
border-bottom: 3px solid #0bbbc1;
padding: 25px;
margin-bottom: 70px;
border-radius: 3px;
}
/* Service Style 9 Css */
.style-9 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position: relative;
-webkit-transition: .3s;
transition: .3s;
text-align: center;
padding-top: 238px;
}
.style-9 .single-service img {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.style-9 .single-service:after{
position: absolute;
content: "";
width: 0%;
left: 0;
top: 0;
border-left: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-9 .single-service:before{
position: absolute;
content: "";
width: 0%;
right: 0;
bottom: 0;
border-right: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-9 .single-service:hover:before, .single-service:hover:after{
height:50%;
width:50%;
}
.style-9 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-9 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 35px;
font-size: 22px;
}
.style-9 .single-service p {
font-weight: 300;
}
.style-9 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: 0px;
left: 50%;
margin-left: -1.5px;
}
.style-9 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: 12px;
}
.style-9 .single-service:hover img {
opacity: .7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.style-9 .single-service img {
-webkit-transition:.4s;
transition: .4s;
}
/* Service Style 10 Css */
.style-10 .single-service {
border: 1px solid #ddd;
padding: 25px 40px;
margin-bottom: 70px;
box-shadow: 0 5px 30px -5px #ccc;
position:relative;
-webkit-transition:.3s;
transition:.3s;
text-align:center;
border-bottom: 3px solid #0bbbc1;
padding-bottom:30px;
padding-top: 238px;
}
.style-10 .single-service img{
position:absolute;
left:0;
top:0;
width:100%
}
.style-10 .single-service:after{
position: absolute;
content: "";
width: 0%;
left: 0;
top: 0;
border-left: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-10 .single-service:before{
position: absolute;
content: "";
width: 0%;
right: 0;
bottom: 0;
border-right: 3px solid #0bbbc1;
height: 0%;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition:.5s;
transition:.5s
}
.style-10 .single-service:hover:before, .single-service:hover:after{
height:50%;
}
.style-10 .single-service:hover i.fa {
background-color: #0bbbc1;
border-color: #0bbbc1;
color: #fff;
}
.style-10 .single-service h3 {
position: relative;
font-weight: 400;
margin-top: 0px;
padding-top: 35px;
font-size: 22px;
}
.style-10 .single-service p {
font-weight: 300;
}
.style-10 .single-service h3:before {
position: absolute;
content: "";
width: 3px;
height: 12px;
background-color: #0bbbc1;
top: 0px;
left: 50%;
margin-left: -1.5px;
}
.style-10 .single-service h3:after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background-color: #0bbbc1;
left: 50%;
margin-left: -15px;
top: 12px;
}
.style-10 .single-service a.border-btn {
background-color: #0bbbc1;
position: absolute;
left: 50%;
margin-left: -70px;
margin-top: 10px;
z-index: 99;
}
.style-10 .single-service:hover img {
opacity: .7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.style-10 .single-service img {
-webkit-transition:.4s;
transition: .4s;
}
