Your IP : 3.138.102.163
/*========================================*/
/*------------- [_Home_Slider] -----------*/
/*========================================*/
//Home Banner 01
.home_banner_01 {
position: relative;
overflow: hidden;
@media screen and (max-width: 425px) {
max-height: 665px;
}
@media screen and (max-width: 320px) {
max-height: 635px;
}
.home-carousel {
position: relative;
.slide-item {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 185px 0px 200px 0px;
overflow: hidden;
@media (max-width: 1024px) {
padding: 135px 0px 150px 0px;
}
@media screen and (max-width: 425px) {
padding: 110px 0px 120px 0px;
}
background-color: #03031c;
.home-bottom-shape {
position: absolute;
bottom: -25px;
z-index: 3;
opacity: 0.5;
left: 0;
right: 0;
@media screen and (max-width: 1024px) {
bottom: 0px;
}
@media screen and (max-width: 768px) {
opacity: 0;
}
}
.shape {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0.5;
&.shape-1 {
opacity: 0.08;
}
&.shape-2 {
opacity: 0.35;
z-index: 3;
animation-name: float-y-axis;
animation-iteration-count: infinite;
animation-duration: 4s;
bottom: -30px;
animation-timing-function: linear;
@media screen and (max-width: 425px) {
display: none;
}
@media screen and (max-width: 768px) {
opacity: 0.1;
}
}
}
.image-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include transform(scale(1));
@include transition(all 6000ms linear);
z-index: 0;
}
.auto-container {
position: static;
max-width: 1380px;
padding: 0px 15px;
margin: 0 auto;
.content-box {
position: relative;
display: block;
z-index: 5;
width: 100%;
padding: 0 30px;
overflow: hidden;
@media screen and (max-width: 768px) {
text-align: center;
}
@media screen and (max-width: 425px) {
padding: 0 15px;
}
.home-carousel-title {
position: relative;
display: block;
font-size: 68px;
line-height: 82px;
font-weight: 900;
margin-bottom: 30px;
opacity: 0;
max-width: 720px;
z-index: 11;
color: #fff;
@include transform(translateY(100px));
@include transition(all 1000ms ease);
letter-spacing: 0.01em;
span {
&.text-obj1 {
position: relative;
&:after {
content: "";
position: absolute;
background: url(../images/objects/brush-obj1.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
z-index: -1;
height: 135px;
width: 323px;
top: -20px;
right: -50px;
transform: rotate(10deg);
opacity: 0.6;
animation: float-obj-x infinite 4s;
}
}
}
@media screen and (max-width: 768px) {
font-size: 64px;
max-width: 100%;
}
@media screen and (max-width: 425px) {
margin-bottom: 20px;
font-size: 48px;
line-height: 1.2;
}
@media screen and (max-width: 375px) {
font-size: 40px;
line-height: 1.2;
}
@media screen and (max-width: 320px) {
font-size: 32px;
line-height: 1.3;
}
}
.home-carousel-text {
color: #fff;
position: relative;
display: block;
margin-bottom: 50px;
font-size: 20px;
line-height: 36px;
opacity: 0;
max-width: 520px;
z-index: 11;
@include transform(translateY(100px));
@include transition(all 1300ms ease);
@media screen and (max-width: 768px) {
max-width: 100%;
}
@media screen and (max-width: 425px) {
font-size: 17px;
line-height: 30px;
}
@media screen and (max-width: 375px) {
font-size: 18px;
line-height: 30px;
}
@media screen and (max-width: 320px) {
margin-bottom: 35px;
font-size: 16px;
}
}
.btn-box {
position: relative;
opacity: 0;
z-index: 11;
@include transform(translateY(100px));
@include transition(all 1300ms ease);
}
}
}
&:after {
content: "";
background: #181854;
width: 600px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
mix-blend-mode: overlay;
z-index: 2;
transform: skewY(60deg) translateX(50px);
transition-delay: 0.8s;
opacity: 0;
transition-duration: 1200ms;
}
&::before {
position: absolute;
content: "";
width: 100%;
height: 105%;
background: linear-gradient(270deg, #0b0b2f00 0%, #151533e0 70%);
top: 0px;
right: 0px;
z-index: 2;
}
}
.active {
.image-layer {
@include transform(scale(1.12));
mix-blend-mode: luminosity;
}
.auto-container {
.content-box {
.home-carousel-title {
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;
}
.home-carousel-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: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
}
.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: 1600ms;
-moz-transition-delay: 1600ms;
-ms-transition-delay: 1600ms;
-o-transition-delay: 1600ms;
transition-delay: 1600ms;
}
}
}
}
.owl-nav {
@media screen and (max-width: 425px) {
display: none;
}
button {
background: #ffffff2e;
border: 1px solid rgba(var(--webex-primary-color-rgb), 0.05);
border-radius: 0;
&:hover {
background: rgba(var(--webex-primary-color-rgb), 0.4);
}
}
}
}
}
.home_banner_01 .slide-item .shape1 {
position: absolute;
left: -100px;
bottom: 50px;
width: 1100px;
height: 1000px;
border-radius: 55%;
background: var(--gradient-color1);
z-index: 1;
animation: float-obj-x infinite 4s;
opacity: 0.6;
}
.home_banner_01 .slide-item .shape2 {
position: absolute;
right: -200px;
bottom: -100px;
width: 330px;
height: 400px;
border-radius: 30%;
transform: rotate(45deg);
border: 3px solid rgba(var(--webex-primary-color-rgb), 0.75);
z-index: 2;
}
//Home Banner 02
.home_banner_02 {
position: relative;
overflow: hidden;
@media screen and (max-width: 425px) {
max-height: 680px;
}
@media screen and (max-width: 320px) {
max-height: 635px;
}
.home-carousel {
position: relative;
.slide-item {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 285px 0px 260px 0px;
overflow: hidden;
@media (max-width: 1024px) {
padding: 220px 0px 210px 0px;
}
@media screen and (max-width: 425px) {
padding: 180px 0px 110px 0px;
}
background-color: #03031c;
.home-bottom-shape {
position: absolute;
bottom: -25px;
z-index: 3;
opacity: 0.5;
left: 0;
right: 0;
@media screen and (max-width: 1024px) {
bottom: 0px;
}
@media screen and (max-width: 768px) {
opacity: 0;
}
}
.shape {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0.5;
&.shape-1 {
opacity: 0.08;
}
&.shape-2 {
opacity: 0.35;
z-index: 3;
animation-name: float-y-axis;
animation-iteration-count: infinite;
animation-duration: 4s;
bottom: -30px;
animation-timing-function: linear;
@media screen and (max-width: 425px) {
display: none;
}
@media screen and (max-width: 768px) {
opacity: 0.1;
}
}
}
.image-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include transform(scale(1));
@include transition(all 6000ms linear);
z-index: 0;
}
.auto-container {
position: static;
max-width: 1380px;
padding: 0px 15px;
margin: 0 auto;
.content-box {
position: relative;
display: block;
z-index: 5;
width: 100%;
padding: 0 30px;
overflow: hidden;
text-align: center;
margin: 0 auto;
@media screen and (max-width: 768px) {
text-align: center;
}
@media screen and (max-width: 425px) {
padding: 0 15px;
}
.home-carousel-title {
position: relative;
display: inline-block;
font-size: 68px;
line-height: 82px;
font-weight: 900;
margin-bottom: 30px;
opacity: 0;
max-width: 780px;
z-index: 11;
color: #fff;
@include transform(translateY(100px));
@include transition(all 1000ms ease);
letter-spacing: 0.01em;
span {
&.text-obj1 {
position: relative;
&:after {
content: "";
position: absolute;
background: url(../images/objects/brush-obj1.png);
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
z-index: -1;
height: 135px;
width: 323px;
top: -20px;
right: -50px;
transform: rotate(10deg);
opacity: 0.6;
animation: float-obj-x infinite 4s;
}
}
}
@media screen and (max-width: 768px) {
font-size: 64px;
max-width: 100%;
}
@media screen and (max-width: 425px) {
margin-bottom: 20px;
font-size: 48px;
line-height: 1.2;
}
@media screen and (max-width: 375px) {
font-size: 40px;
line-height: 1.2;
}
@media screen and (max-width: 320px) {
font-size: 32px;
line-height: 1.3;
}
}
.home-carousel-text {
color: #fff;
position: relative;
display: inline-block;
margin-bottom: 50px;
font-size: 20px;
line-height: 36px;
opacity: 0;
max-width: 600px;
z-index: 11;
@include transform(translateY(100px));
@include transition(all 1300ms ease);
@media screen and (max-width: 768px) {
max-width: 100%;
}
@media screen and (max-width: 425px) {
font-size: 17px;
line-height: 30px;
}
@media screen and (max-width: 375px) {
font-size: 18px;
line-height: 30px;
}
@media screen and (max-width: 320px) {
margin-bottom: 35px;
font-size: 16px;
}
}
.btn-box {
position: relative;
opacity: 0;
z-index: 11;
@include transform(translateY(100px));
@include transition(all 1300ms ease);
}
}
}
&:after {
content: "";
background: var(--gradient-color2);
width: 600px;
height: 230px;
position: absolute;
right: -250px;
bottom: -140px;
z-index: 2;
transform: skewY(140deg) translateX(50px);
opacity: 0;
transition-delay: 0.8s;
transition-duration: 1200ms;
}
&::before {
position: absolute;
content: "";
width: 100%;
height: 105%;
background: radial-gradient(#151533e0, #07020f96);
top: 0px;
right: 0px;
z-index: 2;
}
}
.active {
.image-layer {
@include transform(scale(1.12));
mix-blend-mode: luminosity;
}
.shape2 {
position: absolute;
left: -180px;
bottom: -60px;
width: 330px;
height: 400px;
border-radius: 0;
transform: rotate(34deg);
background: var(--gradient-color1);
z-index: 2;
filter: hue-rotate(8deg);
opacity: 0.5;
}
.auto-container {
.content-box {
.home-carousel-title {
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;
}
.home-carousel-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: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
}
.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: 1600ms;
-moz-transition-delay: 1600ms;
-ms-transition-delay: 1600ms;
-o-transition-delay: 1600ms;
transition-delay: 1600ms;
}
}
}
}
.owl-nav {
@media screen and (max-width: 425px) {
display: none;
}
button {
background: #ffffff2e;
border: 1px solid rgba(var(--webex-primary-color-rgb), 0.05);
border-radius: 0;
&:hover {
background: rgba(var(--webex-primary-color-rgb), 0.4);
}
}
}
}
}
.home_banner_02 .slide-item .shape1 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -680px;
width: 865px;
height: 800px;
border-radius: 50%;
background: var(--gradient-color2);
z-index: 1;
animation: float-obj-y infinite 4s;
opacity: 0.5;
}
.home_banner_02 .slide-item .shape2 {
left: -250px;
transition-duration: 1000ms;
}
//Home Banner 03
.home_banner_03 {
position: relative;
z-index: 2;
overflow: hidden;
.banner-img {
position: absolute;
top: 15px;
right: 10%;
z-index: 2;
@media screen and (max-width: 1700px) {
right: 0%;
}
@media screen and (max-width: 1400px) {
right: 2%;
width: 550px;
}
@media screen and (max-width: 1299px) {
right: -5%;
}
@media screen and (max-width: 991px) {
position: relative;
margin-top: 50px;
left: auto;
top: 0;
}
@media screen and (max-width: 528px) {
width: 425px;
}
@media screen and (max-width: 375px) {
width: 355px;
}
}
.banner-item {
position: relative;
z-index: 6;
margin: 200px 0 200px 0;
max-width: 600px;
@media screen and (max-width: 1400px) {
margin: 120px 0 120px 0;
}
@media screen and (max-width: 1299px) {
max-width: 500px;
}
@media screen and (max-width: 991px) {
margin-top: 60px;
}
.banner-subtitle {
color: var(--webex-primary-color);
display: block;
font-size: 16px;
letter-spacing: 0.02rem;
text-transform: uppercase;
}
.banner-title {
font-size: 64px;
@media screen and (max-width: 1299px) {
font-size: 54px;
}
@media screen and (max-width: 991px) {
font-size: 48px;
}
@media screen and (max-width: 991px) {
font-size: 38px;
}
@media screen and (max-width: 375px) {
font-size: 32px;
}
}
.home3-btn-group {
.video-button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 25px;
.button-text {
color: var(--heading-font-color);
font-size: 16px;
font-weight: 600;
line-height: 1.188;
text-transform: capitalize;
text-decoration: underline;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.play-icon {
position: relative;
width: 56px;
height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--webex-primary-color);
color: var(--text-white);
border-radius: 50%;
font-size: 14px;
margin-right: 20px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
&:after {
box-shadow: 0px 0px 10px 0px var(--webex-primary-color);
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
animation: pulse-border-2 1s ease-out infinite;
}
}
}
}
}
}
//Home Banner 04
.home_banner_04 {
position: relative;
z-index: 2;
overflow: hidden;
.banner-item {
padding: 110px 0;
.banner-subtitle {
color: var(--webex-primary-color);
display: block;
font-size: 16px;
letter-spacing: 0.02rem;
text-transform: uppercase;
}
.banner-title {
font-size: 64px;
@media screen and (max-width: 1299px) {
font-size: 54px;
}
@media screen and (max-width: 991px) {
font-size: 48px;
}
@media screen and (max-width: 375px) {
font-size: 32px;
}
}
}
.shape-1 {
position: absolute;
right: -90px;
margin: 0 auto;
top: -90px;
width: 300px;
height: 300px;
border-radius: 50%;
background: var(--gradient-color1);
z-index: 1;
animation: float-obj-y infinite 4s;
opacity: 0.1;
}
.shape-2 {
position: absolute;
left: 50px;
bottom: 65px;
width: 60px;
height: 60px;
transform: rotate(45deg);
background: var(--gradient-color1);
z-index: 2;
filter: hue-rotate(8deg);
opacity: 0.1;
animation: twinRotate infinite 6s;
}
}
//Home Banner 05
.home_banner_05 {
position: relative;
z-index: 2;
overflow: hidden;
.banner-item {
padding: 220px 0px 100px 0px;
.banner-subtitle {
color: var(--webex-primary-color);
display: block;
font-size: 16px;
letter-spacing: 0.02rem;
text-transform: uppercase;
}
.banner-title {
font-size: 64px;
@media screen and (max-width: 1299px) {
font-size: 54px;
}
@media screen and (max-width: 991px) {
font-size: 48px;
}
@media screen and (max-width: 375px) {
font-size: 32px;
}
}
.banner-thumb {
margin-right: -100px;
@media screen and (max-width: 1024px) {
margin-right: 0;
}
}
}
.shape-1 {
position: absolute;
right: -90px;
margin: 0 auto;
top: -90px;
width: 300px;
height: 300px;
border-radius: 50%;
background: var(--gradient-color1);
z-index: 1;
animation: float-obj-y infinite 4s;
opacity: 0.1;
}
.shape-2 {
position: absolute;
left: 50px;
bottom: 65px;
width: 60px;
height: 60px;
transform: rotate(45deg);
background: var(--gradient-color1);
z-index: 2;
filter: hue-rotate(8deg);
opacity: 0.1;
animation: twinRotate infinite 6s;
}
}
//Home Banner 06
.home_banner_06 {
position: relative;
z-index: 2;
overflow: hidden;
.banner-item {
.banner-info {
margin-top: -100px;
@media screen and (max-width: 768px) {
margin-top: 0;
}
}
.banner-subtitle {
color: var(--webex-primary-color);
display: block;
font-size: 16px;
letter-spacing: 0.02rem;
text-transform: uppercase;
}
.banner-title {
font-size: 64px;
@media screen and (max-width: 1299px) {
font-size: 54px;
}
@media screen and (max-width: 991px) {
font-size: 48px;
}
@media screen and (max-width: 991px) {
font-size: 38px;
}
@media screen and (max-width: 375px) {
font-size: 32px;
}
}
.banner-thumb {
margin-left: 100px;
position: relative;
@media screen and (max-width: 1024px) {
margin-left: 0;
}
&::after {
position: absolute;
right: 0;
bottom: 0;
content: "";
height: 100%;
width: 100%;
background: url(../images/bg/home6-img2.png);
background-repeat: no-repeat;
background-size: contain;
background-position: top;
z-index: -1;
animation: twinRotate infinite 190s;
}
}
}
.shape-1 {
position: absolute;
left: 0;
margin: 0 auto;
top: -205px;
width: 120px;
height: 600px;
background: var(--gradient-color1);
z-index: 1;
transform: rotate(31deg);
opacity: 0.1;
}
.shape-2 {
position: absolute;
right: 50px;
bottom: 70px;
width: 70px;
height: 70px;
transform: rotate(45deg);
background: var(--gradient-color1);
z-index: 2;
filter: hue-rotate(8deg);
opacity: 0.1;
animation: twinRotate infinite 6s;
}
}
.home_banner_01 .home-carousel .owl-item.active .slide-item:after {
opacity: 1;
transform: skewY(55deg) translateX(50px);
}
.home_banner_02 .home-carousel .owl-item.active .slide-item:after {
opacity: 0.3;
transform: skewY(140deg) translateX(50px);
right: -50px;
}
.home_banner_01 .home-carousel .owl-nav button.owl-prev,
.home_banner_01 .home-carousel .owl-nav button.owl-next,
.home_banner_02 .home-carousel .owl-nav button.owl-prev,
.home_banner_02 .home-carousel .owl-nav button.owl-next {
height: 65px;
width: 65px;
left: 0;
opacity: 0;
top: 45%;
border-radius: 8px;
visibility: visible;
@include transition(all 300ms ease);
}
.home_banner_01 .home-carousel .owl-nav button i,
.home_banner_02 .home-carousel .owl-nav button i {
line-height: 54px;
color: #ffffff;
}
.home_banner_01 .home-carousel .owl-nav button.owl-next,
.home_banner_02 .home-carousel .owl-nav button.owl-next {
right: 0;
left: auto;
}
.home_banner_01:hover .home-carousel .owl-nav button.owl-next,
.home_banner_02:hover .home-carousel .owl-nav button.owl-next {
right: 30px;
left: auto;
}
.home_banner_01:hover .home-carousel .owl-nav button.owl-prev,
.home_banner_02:hover .home-carousel .owl-nav button.owl-prev {
left: 30px;
}
.home_banner_01 .home-carousel .owl-nav:hover button.owl-prev,
.home_banner_01 .home-carousel .owl-nav:hover button.owl-next,
.home_banner_02 .home-carousel .owl-nav:hover button.owl-prev,
.home_banner_02 .home-carousel .owl-nav:hover button.owl-next {
opacity: 1;
visibility: visible;
}
.home_banner_01:hover .home-carousel .owl-nav button.owl-prev,
.home_banner_01:hover .home-carousel .owl-nav button.owl-next {
opacity: 1;
visibility: visible;
}
.home_banner_02:hover .home-carousel .owl-nav button.owl-prev,
.home_banner_02:hover .home-carousel .owl-nav button.owl-next {
opacity: 1;
visibility: visible;
}
.home_banner_01 .home-carousel .slide-item .truck-img-home1,
.home_banner_02 .home-carousel .slide-item .truck-img-home1 {
position: absolute;
display: block;
width: 760px;
z-index: 3;
bottom: 30px;
right: -100px;
animation: float-obj-x infinite 3s;
@media (max-width: 768px) {
display: none;
}
@media (max-width: 1024px) {
width: 560px;
right: -200px;
}
}