<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ 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: Abdullah Nahian
Author URI:
Version: 1.0
====/======== ===== ==/====/
CSS Index
====/======== =======/====/
01. Common Css
02. Section Title CSS
03. Header Area CSS
04. Slider Area CSS
05. About Area CSS
06. Service Area CSS
07. Skill Area CSS
08. Advertisement Area CSS
09. Portfolio Area CSS
10. Team Area CSS
11. Counter Up Area CSS
12. Price Area CSS
13. Testimonial Area CSS
14. Blog Area CSS
15. Contact Area CSS
16. Footer Area CSS
*/
/*
* ----------------------------------------------------
* 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: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
}
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;
}
