.banner-section{
position: relative;
overflow: hidden;
}
.banner-carousel .slide-item{
position: relative;
padding: 120px 0px 250px 0px;
}
.banner-carousel .content-box{
position: relative;
max-width: 650px;
z-index: 5;
}
.banner-carousel .slide-item:before{
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 32.16%, rgba(0, 0, 0, 0.3) 66.41%);
top: 0px;
right: 0px;
z-index: 1;
}
.banner-carousel .slide-item .image-layer{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
-webkit-transition: all 8000ms linear;
-moz-transition: all 8000ms linear;
-ms-transition: all 8000ms linear;
-o-transition: all 8000ms linear;
transition: all 8000ms linear;
}
.banner-carousel .active .slide-item .image-layer{
-webkit-transform:scale(1.25);
-ms-transform:scale(1.25);
transform:scale(1.25);
}
.banner-carousel .content-box h3{
font-size: 26px;
line-height: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 26px;
opacity: 0;
padding-left: 10px;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-carousel .content-box h3::before{
position: absolute;
content: '';
width: 3px;
height: 100%;
left: 0px;
top: -2px;
}
.banner-carousel .active .content-box h3{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.banner-carousel .content-box h2{
font-size: 70px;
line-height: 70px;
font-weight: 800;
color: #fff;
margin-bottom: 17px;
opacity: 0;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-carousel .active .content-box h2{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.banner-carousel .content-box p{
font-size: 20px;
line-height: 32px;
color: #fff;
margin-bottom: 32px;
opacity: 0;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-carousel .active .content-box p{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1200ms;
-moz-transition-delay: 1200ms;
-ms-transition-delay: 1200ms;
-o-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.banner-carousel .content-box .btn-box{
opacity: 0;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-carousel .active .content-box .btn-box{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1400ms;
-moz-transition-delay: 1400ms;
-ms-transition-delay: 1400ms;
-o-transition-delay: 1400ms;
transition-delay: 1400ms;
}
.banner-section .banner-carousel .owl-nav{
position: absolute;
right: 300px;
top: 30%;
}
.banner-carousel .owl-nav button{
position: relative;
display: block;
width: 60px;
height: 60px;
line-height: 66px;
background: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 18px;
border-radius: 50%;
color: #222;
cursor: pointer;
transition: all 500ms ease;
}
.banner-carousel .owl-nav button:hover{
color: #fff;
}
.banner-carousel .owl-nav button.owl-prev{
margin-bottom: 10px;
}
.banner-section .theme-btn-one{
box-shadow: none;
} .banner-style-two {
position: relative; padding: 190px 0px 90px 0px;
}
.banner-style-two .bg-layer{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.banner-style-two .bg-layer:before{
position: absolute;
content: '';
background-color: #000;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
opacity: 0.6;
}
.banner-style-two .content-box h3{
display: block;
font-size: 26px;
line-height: 32px;
font-weight: 600;
margin-bottom: 17px;
}
.banner-style-two .content-box h2{
display: block;
font-size: 70px;
line-height: 70px;
font-weight: 800;
color: #fff;
margin-bottom: 17px;
}
.banner-style-two .content-box p{
display: block;
font-size: 20px;
line-height: 28px;
color: #fff;
margin-bottom: 32px;
}
.banner-style-two .content-box .theme-btn-one{
background-color: transparent;
border: 2px solid #fff;
box-shadow: none;
padding: 19px 35px 13px 33px;
}
.banner-style-two .form-inner {
position: relative;
display: block;
background: #fff;
padding: 45px 30px 50px 30px;
border-radius: 15px; }
.banner-style-two .form-inner h3{
display: block;
font-size: 26px;
line-height: 34px;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
}
.banner-style-two .form-inner .form-group{
position: relative;
display: block;
margin-bottom: 20px;
}
.banner-style-two .form-inner .form-group:last-child{
margin-bottom: 0px;
}
.banner-style-two .form-inner .form-group input[type='text'],
.banner-style-two .form-inner .form-group input[type='email'],
.banner-style-two .form-inner .form-group input[type='tel'],
.banner-style-two .form-inner .form-group .nice-select{
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #F5F5F5;
border: 1px solid #F5F5F5;
font-size: 18px;
color: #6E6E6E;
padding: 10px 20px;
border-radius: 5px;
transition: all 500ms ease;
}
.banner-style-two .form-inner .form-group input:focus{
}
.banner-style-two .form-inner .form-group .select-box{
min-height: 50px;
} .banner-style-three{
background-color: #F5F5F5;
overflow: hidden;
}
.banner-style-three .banner-carousel .slide-item:before{
display: none;
}
.banner-style-three .banner-carousel .content-box h3{
}
.banner-style-three .banner-carousel .content-box h2,
.banner-style-three .banner-carousel .content-box p{
color: #222;
}
.banner-style-three .theme-btn-one{
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.1);
}
.banner-style-three .banner-carousel .slide-item{
padding: 204px 0px 210px 0px;
}
.banner-style-three .slide-item .shape-box{
position: absolute;
width: 370px;
height: 185px;
top: -15px;
right: -30px;
}
.banner-style-three .slide-item .shape-box .shape-1{
position: absolute;
top: 0px;
left: 0px;
width: 43px;
height: 32px;
background-repeat: none;
opacity: 0;
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-style-three .active .slide-item .shape-box .shape-1{
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.banner-style-three .slide-item .shape-box .shape-2{
position: absolute;
top: -158px;
right: -17px;
width: 45px;
height: 56px;
background-repeat: no-repeat;
opacity: 0;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-style-three .active .slide-item .shape-box .shape-2{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.banner-style-three .slide-item .shape-box .line{
position: absolute;
left: 50px;
top: -103px;
width: 306px;
height: 112px;
background-repeat: no-repeat;
}
.banner-style-three .pattern-layer .pattern-1{
position: absolute;
left: 0px;
top: -80px;
width: 390px;
height: 474px;
background-repeat: no-repeat;
}
.banner-style-three .pattern-layer .pattern-2{
position: absolute;
right: 280px;
top: 90px;
width: 223px;
height: 226px;
background-repeat: no-repeat;
}
.banner-style-three .pattern-layer .pattern-3{
position: absolute;
right: 240px;
top: 246px;
width: 200px;
height: 200px;
border: 20px solid #fff;
border-radius: 50%;
box-shadow: 0px 20px 60px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.banner-style-three .pattern-layer .pattern-4{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 416px;
background-repeat: repeat-x
}
.banner-style-three .slide-item .image-box{
position: absolute;
right: 280px;
bottom: 0px;
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.banner-style-three .active .slide-item .image-box{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.banner-style-three .owl-nav{
position: absolute;
top: 40%;
right: 70px;
}
.banner-style-three .owl-nav button{
background-color: #fff;
}