Service blocks
====================================== */

/* services images */
.content-bg1 { background-image: url("../img/content/feature-01.html"); }

@media screen and (max-width:991px){
    .sm-bg { min-height: 400px;}
 }

@media screen and (max-width:767px){
    .sm-bg { min-height: 320px;}
 }

/* services blocks */
.services-blocks { margin-top: -90px; }

@media screen and (max-width:1199px){
    .services-blocks { margin-top: -70px; }
}
@media screen and (max-width:991px){
    .services-blocks { margin-top: -50px; }
}

/* service simple */
.service-simple{ position:relative; background:#fff; border:1px solid #ececec; border-radius:5px; overflow:hidden; height:100%; -webkit-box-shadow:0 10px 30px 0 rgba(50, 50, 50, .16); -moz-box-shadow:0 10px 30px 0 rgba(50, 50, 50, .16); box-shadow:0 10px 30px 0 rgba(50, 50, 50, .16); }
.service-simple img{ width:100%; transition:all 0.5s ease 0s; }
.service-simple img:hover{ transform:scale(1.1); }
.service-simple-inner{ position:relative; padding:25px 25px 20px; }
.service-simple-inner p{ max-width:95%; }
.service-simple-inner a{ display:inline-block; }
.service-simple h4{ font-size:18px; line-height:normal; margin-bottom:0; }

/* services block one */
.owl-carousel .service-box{ margin:0 15px 25px 15px; }
.service-box{ background:#fff; overflow:hidden; border:1px solid #eee; border-radius:5px; -webkit-box-shadow:0 10px 20px 0 rgba(50, 50, 50, .12); -moz-box-shadow:0 10px 20px 0 rgba(50, 50, 50, .12); box-shadow:0 10px 20px 0 rgba(50, 50, 50, .12); margin:15px 0; -webkit-transition-duration:.3s; transition-duration:.3s; }
.service-inner-box{ padding:20px; }
.service-icon-box{ width:20%; max-width:50px; float:left; padding-top:2px; }
.service-content-box{ width:100%; float:center; }
.service-box .img-holder{ position:relative; }
.service-box .img-holder:before{ background-color:rgba(0, 26, 87, 0.6); bottom:0; content:""; height:100%; left:0; opacity:0; position:absolute; top:auto; transition:all 0.3s ease 0s; width:100%; z-index:10; }
.service-box:hover .img-holder:before{ opacity:1; }
.service-box .img-holder img{ width:100%; }
.service-box h3{ font-size:16px; margin-bottom:0; line-height:normal; font-weight:500; }
.service-box p{ color:#999; font-size:15px; font-weight:400; margin-top:5px; margin-bottom:0; }
.service-box i{ color:#49c0d0; font-size:28px; -webkit-transition-duration:0.3s; transition-duration:0.3s; }
.service-box:hover i{ color:#232323; }

/* services block two */
.services-block-two{ position:relative; }
.services-block-two .inner-box{ background:#ffffff; border:1px solid #ededed; border-radius:5px; padding:30px 30px 30px 95px; height:100%; position:relative; transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; transition-duration:.5s; -ms-transition-duration:.5s; -moz-transition-duration:.5s; -webkit-transition-duration:.5s; -o-transition-duration:.5s; }
.services-block-two p{ margin-bottom:0; }
.services-block-two h3{ margin-bottom:0; line-height:normal; display: inline-block; }
.services-block-two h3 a{ color:#3c3c3c; display:block; font-size:18px; font-weight:500; margin-bottom:10px; }
.services-block-two h3 a:hover { color:#49c0d0; }
.services-block-two h2{ bottom:0; color:#f0f0f0; font-size:36px; font-weight:600; right:10px; margin-bottom:0; position:absolute; }
.services-block-two .icon-box{ color:#49c0d0; font-size:36px; left:35px; position:absolute; top:35px; }
.services-block-two.dark .inner-box{ background:#000; border:1px solid #000; }
.services-block-two.dark .inner-box:hover{ background:#000; }
.services-block-two.dark .inner-box:hover h5 a, .services-block-two.dark .inner-box:hover p, .services-block-two.dark .inner-box:hover .icon-box{ color:#fff; }
.services-block-two.dark h3 a{ color:#6f6f6f; }
.services-block-two.dark h2{ color:rgba(255, 255, 255, 0.1); }
.services-block-two.dark .inner-box:hover h2{ color:rgba(255, 255, 255, 0.04); }
.services-block-two.dark .icon-box{ color:#6f6f6f; }

@media screen and (max-width:991px){
    .services-block-two h2{ font-size:36px; }
    .services-block-two h3 a{ font-size:18px; margin-bottom:10px; }
    .services-block-two .icon-box{ top:25px; left:21px; font-size:28px; }
    .services-block-two .inner-box{ padding:20px 20px 20px 75px; }
 }

/* services block three */
 .services-block-three > a{ display: block;  border: 3px solid #d5d5d5; border-radius: 0; text-align: center; background: #fff; padding: 20px; position: relative; }
 .services-block-three > a:before{ display: block; content: ""; width: 9%; height: 17%; position: absolute; bottom: -3px; right: -3px; border-bottom: 3px solid #49c0d0; border-right: 3px solid #49c0d0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
 .services-block-three > a:after{ display: block; content: ""; width: 9%; height: 17%; position: absolute; top: -3px; left: -3px; border-top: 3px solid #49c0d0; border-left: 3px solid #49c0d0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
 .services-block-three > a:hover{ opacity: 1; border-color: #d5d5d5; }
 .services-block-three > a:hover:before{ width: 95%; height: 90%; }
 .services-block-three > a:hover:after{ width: 95%; height: 90%; }
 .services-block-three i{ font-size: 32px; }
 .services-block-three p { margin-bottom: 0; }
 .services-block-three:hover p{ color: #232323; }
 .services-block-three h4{ color: #6f6f6f; font-size: 14px; margin-bottom: 10px; font-weight: 600; }
 .services-block-three:hover h4{ color: #232323; }

/* service-block */
.service-grids .service-block{ overflow:hidden; position:relative; }
.service-grids .img-holder{ position:relative; }
.service-grids .service-block:hover .img-holder:before{ opacity:1; }
.service-grids .service-block .details{ background-color:#fff; box-shadow:0 3px 13px rgba(0, 0, 0, 0.07); padding:45px 45px 50px; position:relative; text-align:center; transition:all 0.5s ease 0s; z-index:20; }
.service-grids .service-block .number{ background-color:#49c0d0; border-radius:75px; color:#fff; height:75px; font-size:30px; left:50%; line-height:75px; position:absolute; top:-37.5px; transform:translateX(-50%); width:75px; }
.service-grids .service-block .details h4{ color:#49c0d0; font-size:20px; margin:10px 0 15px 0; line-height:normal; }
.service-grids .service-block .details .read-more{ color:#49c0d0; font-weight:600; }

@media screen and (min-width:992px){
    .service-grids .service-block{ height:335px; }
    .service-grids .img-holder:before{ background-color:rgba(0, 26, 87, 0.6); bottom:20px; content:""; height:100%; left:0; opacity:0; position:absolute; top:auto; transition:all 0.3s ease 0s; width:100%; z-index:10; }
    .service-grids .service-block .details{ height:195px; position:absolute; top:168px; }
    .service-grids .service-block:hover .details{ height:230px; top:105px; }    
}

@media screen and (min-width:1200px){
    .service-grids .service-block{ height:370px; }
    .service-grids .service-block .details{ height:195px; position:absolute; top:205px; }
    .service-grids .service-block:hover .details{ height:230px; top:170px; }
}

@media (max-width:991px){
    .service-grids .service-block .details{ padding:45px 25px 35px; }
}

@media (max-width:767px){
    .service-grids .service-block .number{ height:65px; line-height:65px; top:-32.5px; width:65px; border-radius:65px; }
 }