/*
Template Name: Driving
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************center_home****************/
.fade-carousel {
position: relative;
min-height: 600px;
}
.fade-carousel .carousel-inner .item {
min-height: 600px;
}
.fade-carousel .carousel-indicators > li {
margin: 0 4px;
opacity: .8;
}
.fade-carousel .carousel-indicators > li.active {
opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
position: absolute;
width:35%;
top: 70%;
left:80%;
z-index: 2;
text-transform:capitalize;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
background: rgba(0,43,94,.85);
padding:20px;
}


.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s; 
-ms-transition: 2s all ease-in-out .1s; 
-o-transition: 2s all ease-in-out .1s; 
transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s; 
-ms-transition: 2s all ease-in-out .1s; 
-o-transition: 2s all ease-in-out .1s; 
transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
opacity: 1;
}

/********************************/
/*          Custom Buttons      */
/********************************/

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
min-height: 600px;
background-repeat: no-repeat;
background-position:center;
}
.fade-carousel .slides .slide-1 {
background-image: url(../img/1.jpg);
background-position:center;
}
.fade-carousel .slides .slide-2 {
background-image: url(../img/2.jpg);
background-position:center;
}
.fade-carousel .slides .slide-3 {
background-image: url(../img/3.jpg);
background-position:center;
}
#center .carousel-indicators{
bottom:0;
left:50%;
}
.fade-carousel .carousel-indicators > li{
background: #fff;
border-color: #fff;
width:18px;
height:18px;
}
.fade-carousel .carousel-indicators > li.active{
width:18px;
height:18px;
background:#ffdd00;
border-color:#ffdd00;
}
/*********************center_home_end****************/

/*********************feature****************/
#feature{
padding-top:40px;
padding-bottom:40px; 
 }
.feature_2i{
border:2px solid #ffdd00;
padding:40px;
margin-left:5px;
margin-right:5px;
 }
.feature_2i2 span{
display:inline-block;
text-align:center;
width:60px;
height:60px;
line-height:56px;
background:#ffdd00;
border-radius:50%;
font-size:24px;
font-weight:bold;
border:3px solid #000; 
 }
.feature_2i{
position:relative; 
 }
.feature_2i2{
position:absolute;
top:30px;
left:-30px; 
 }
.feature_2{
margin-top:30px; 
 }
/*********************feature_end****************/

/*********************team****************/
#team{
padding-top:40px;
padding-bottom:40px;
background:#002b5e; 
 }
#team .hr_1{
border-color:#ffdd00; 
 }
.team_1i img{
border:5px solid #fff; 
 }
.team_1i ul li a{
background:none;
background:#fff;
border-radius:20px 10px 20px 10px;
width:35px;
height:35px;
font-size:14px;
 }
.team_1i ul li a i{
color:#000; 
line-height:35px;
 }
.team_1o{
margin-top:60px; 
 }
/*********************team_end****************/

/*********************courses****************/
#courses{
padding-top:40px;
padding-bottom:40px; 
 }
.courses_1i1 span{
font-size:50px;
display:inline-block;
text-align:center;
background:#ffdd00;
width:100px;
height:100px;
line-height:100px;
border-radius:50%; 
 }
.courses_1i2{
background:#ffdd00;
padding:30px 15px;
min-height:250px;
display:none; 
position:absolute;
top:0;
width:100%;
 }
.courses_1i1{
min-height:250px;
background:#f4f4f4;
padding-top:50px; 
 }
.courses_1i{
position:relative; 
 }
.courses_1i:hover .courses_1i2{
display:block; 
 }
/*********************courses_end****************/

/*********************testim****************/
#testim{
padding-top:40px;
padding-bottom:40px;
background:#002b5e;  
 }
.testim_1l1{
background:#fff;
padding:40px 40px 40px 60px; 
 }
.testim_1l1 blockquote{
padding-top:0;
padding-bottom:0;
margin:0;
border-color:#002b5e; 
 }
.testim_1l2 img{
border:5px solid #fff; 
 }
.testim_1l2:hover img{
border-color:#ffdd00; 
 }
.testim_1l{
position:relative;
 }
.testim_1l2{
position:absolute;
top:0;
padding-top:50px;
left:-50px;
 }
.testim_1{
margin-top:30px; 
 }
/*********************testim_end****************/

/*********************pricing****************/
#pricing{
padding-top:40px;
padding-bottom:40px; 
 }
.pricing_1i{
margin-top:60px; 
 }
.pricing_1ibg{
background:#002b5e; 
 }
.pricing_1i1 h6{
border-bottom:1px solid #625e5e;
padding-bottom:15px; 
 }
.pricing_1i2 h3{
background:#002b5e;
display:inline-block;
width:120px;
height:120px;
line-height:120px;
border-radius:50%;
border:5px solid #ffdd00;
 }
.pricing_1i2{
position:absolute; 
width:100%;
top:-60px;
 }
.pricing_1i{
position:relative; 
 }
.pricing_1i1{
padding-top:85px;
padding-bottom:30px;
 }
.pricing_1ibg1{
background:#ffdd00; 
 }
.pricing_1i2bg h3{
background:#ffdd00;
border:5px solid #002b5e;  
 }
.pricing_1ibg1 h6{
border-bottom:1px solid #ffec6e; 
 }
.pricing_1ibg2{
background:#000; 
 }
.pricing_1i2bg1 h3{
background:#000;
border:5px solid #ffdd00;  
 }
.pricing_1ibg2 .button:hover{
 background:#002b5e!important; 
 }
.pricing_1o{
margin-top:30px; 
 }
/*********************pricing_end****************/

/*********************help****************/
#help{
padding-top:40px;
padding-bottom:75px;
background:#f4f4f4; 
 }
.help_1il{
background:#002b5e;
padding:15px 15px 15px 15px;
min-height:150px; 
 }
.help_1il span{
font-size:50px; 
 }
.help_1ir{
min-height:150px;
background:#ffdd00; 
 }
.help_1ir span a{
display:inline-block;
line-height:150px;
font-size:20px;
display:block; 
 }
/*********************help_end****************/

@media screen and (max-width : 767px){
.hero {
width: 100%;
left:50%;
text-align:left;
}
.hero p{
font-size:14px;
}
.hero h5{
text-align:center; 
}
#feature{
text-align:center; 
 }
.feature_2i2 {
top:-30px;
left:0;
text-align:center;
width:100%;
}
.feature_2i{
margin-top:40px; 
 }
.team_1i{
margin-bottom:15px; 
 }
.courses_1i{
margin-bottom:15px; 
text-align:center; 
 }
.testim_1l1{
padding:15px; 
 }
.testim_1l2{
position:static;
padding:0; 
 }
.testim_1l{
margin-bottom:15px; 
text-align:center; 
 }
.help_1i{
margin-top:15px; 
 }
.pricing_1i{
margin-top:70px; 
 }
.feature_2i1 p{
text-align:left; 
 }
.testim_1l1  p{
text-align:left;
 }
.testim_1l1 {
margin-bottom:15px;
 }
.help_1i .space_all{
padding:0; 
 }
}

@media (min-width:768px) and (max-width:991px) {
.hero {
width:40%;
left:75%;
top:65%;
}
.feature_2i2 span {
width: 40px;
height: 40px;
line-height: 36px;
font-size: 18px;
}
.feature_2i2 {
top:20px;
left:-20px;
}
.team_1i ul li{
margin-bottom:5px; 
 }
.courses_1i2 p{
font-size:12px; 
 }
.courses_1i2 h4{
font-size:16px; 
 }
.testim_1l2{
position:static;
padding:0; 
 }
.help_1il h4{
font-size:16px; 
 }
 }
@media (min-width:992px) and (max-width:1200px) {
.feature_2i2 span {
width: 40px;
height: 40px;
line-height: 36px;
font-size: 18px;
}
.feature_2i2 {
top:20px;
left:-20px;
}
.courses_1i2 p{
font-size:14px; 
 }
.courses_1i2 h4{
font-size:16px; 
 }
.testim_1l2{
position:static;
padding:0; 
 }
.help_1il h4{
font-size:18px; 
 }
  }
@media (min-width:1201px) and (max-width:1270px) {
.testim_1l2{
position:static;
padding:0; 
 }
.feature_2i2 span {
width: 40px;
height: 40px;
line-height: 36px;
font-size: 18px;
}
.feature_2i2 {
top:20px;
left:-20px;
}
 }
