.banner-section{
position: relative;
overflow: hidden;
}
.banner-carousel .slide-item{
position: relative;
padding: 152px 0px 290px 0px;
background: rgba(0, 0, 0, 0.9); }
.banner-carousel .content-box{
max-width: 690px;
margin: 0 auto;
}
.banner-carousel .slide-item:before{
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(102, 145, 255, 0.7);
mix-blend-mode: multiply;
top: 0px;
right: 0px;
z-index: 1;
}
.banner-carousel .slide-item .image-layer{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity: 0.5;
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 .title-text{
font-size: 20px;
line-height: 30px;
font-weight: 500;
margin-bottom: 15px;
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 .title-text{
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: 700;
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: 18px;
line-height: 32px;
color: #fff;
margin-bottom: 23px;
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;
left: 0px;
top: 50%;
margin-top: -35px;
width: 100%;
opacity: 0.2;
transition: all 500ms ease;
}
.banner-section .banner-carousel:hover .owl-nav{
opacity: 1;
}
.banner-carousel .owl-nav button{
position: absolute;
display: inline-block;
top: 0px;
width: 70px;
height: 70px;
line-height: 76px;
background: #fff;
text-align: center;
font-size: 18px;
color: #222;
cursor: pointer;
transition: all 500ms ease;
}
.banner-carousel .owl-nav button.owl-prev{
left: 70px;
}
.banner-carousel .owl-nav button.owl-next{
right: 70px;
}
.banner-carousel .owl-nav button:hover{
color: #fff;
}
.banner-section .pattern-layer{
position: absolute;
left: 0px;
bottom: -2px;
width: 100%;
height: 78px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
z-index: 2;
}
.banner-section .mouse-btn-down{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100px;
font-size: 30px;
color: #fff;
z-index: 2;
cursor: pointer;
transition: all 500ms ease;
}
.banner-section .mouse-btn-down:hover{
transform: translateX(-50%) scale(1.5);
} .banner-style-two{
background: var(--secondary-color);
}
.banner-style-two .banner-carousel .slide-item .bg-layer{
position: absolute;
top: 0px;
right: 0px;
width: calc(50% + 30px);
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 0%);
}
.banner-style-two .banner-carousel .slide-item{
padding: 120px 0px 230px 0px;
background: transparent;
}
.banner-style-two .banner-carousel .slide-item:before{
display: none;
}
.banner-style-two .banner-carousel .slide-item .bg-layer:before{
position: absolute;
content: '';
background: rgba(255, 255, 255, 0.5);
width: 120px;
height: 100%;
left: 0px;
top: 0px;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%, 0% 0%);
}
.banner-style-two .banner-carousel .content-box{
margin: 0px;
max-width: 490px;
}
.banner-carousel .content-box h2 span{
color: var(--theme-color);
}
.banner-carousel .shape .shape-1{
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 433px;
background-repeat: no-repeat;
}
.banner-carousel .shape .shape-2{
position: absolute;
left: 40%;
top: 50px;
width: 192px;
height: 141px;
background-repeat: no-repeat;
} .banner-style-three{
position: relative;
}
.banner-style-three .banner-carousel .content-box{
margin: 0px;
max-width: 830px;
}
.banner-style-three .banner-carousel .slide-item:before{
background: #000;
opacity: 0.5;
mix-blend-mode: normal;
}
.banner-style-three .banner-carousel .slide-item .image-layer{
opacity: 1;
}
.banner-style-three .banner-carousel .content-box .title-text{
color: #fff !important;
}
.banner-style-three .banner-carousel .slide-item{
padding: 175px 0px 250px 0px;
}
.banner-style-three .owl-nav{
position: absolute;
top: 50%;
margin-top: -35px;
width: 100%;
left: 0px;
}
.banner-style-three .pattern-layer .pattern-1{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 55px;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 2;
background-repeat: repeat-x;
animation: slide 80s linear infinite;
-webkit-animation: slide 80s linear infinite;
}
.banner-style-three .pattern-layer .pattern-2{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 49px;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 2;
background-repeat: repeat-x;
animation: slide 80s linear infinite;
-webkit-animation: slide 80s linear infinite;
}