.banner-area{margin-top:115px;position:relative;z-index:10;overflow:hidden;@media #{$md}{margin-top:70px}@media #{$xs}{margin-top:70px}&::before{position:absolute;content:'';left:-310px;top:0;height:100%;width:75%;background:$grey;transform:skewX(10deg);z-index:-1;@media #{$laptop}{width:82%}@media #{$lg}{width:90%}@media #{$md}{width:106%}@media #{$xs}{width:100%;transform:skewX(0deg);left:0}}&::after{position:absolute;content:'';right:0;top:0;height:100%;width:50%;background-image:url(https://wellfert.com/wp-content/themes/wellfert/assets/images/banner-1.jpg);background-size:cover;background-position:right center;background-repeat:no-repeat;z-index:-2;@media #{$md}{background-position:-240px 0}}& .banner-bg{height:850px;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;align-items:center}& .banner-content{overflow:hidden;& .title{font-size:65px;font-weight:300;color:$black;line-height:80px;@media #{$lg}{font-size:50px;line-height:70px}@media #{$md}{font-size:46px;line-height:60px}@media #{$xs}{font-size:29px;line-height:40px}@media #{$sm}{font-size:50px;line-height:60px}& span{font-weight:600;text-transform:uppercase;@media #{$laptop}{font-size:62px}& span{font-weight:500;text-transform:capitalize;color:$theme-color-2}}}&>span{font-size:30px;text-transform:capitalize;letter-spacing:6px;padding-top:15px;font-weight:300;@media #{$lg}{font-size:24px}@media #{$xs}{font-size:14px}@media #{$sm}{font-size:26px}}& p{font-weight:500;line-height:26px;padding-right:35px;padding-top:25px;padding-bottom:30px;@media #{$xs}{padding-right:0;font-size:15px}}& ul{& li{display:inline-block;margin-right:18px;@media #{$xs}{margin-top:30px}@media #{$sm}{margin-top:0}}}}& .banner-shape-1{height:150px;width:150px;border-radius:50%;position:absolute;left:56%;bottom:75px;z-index:1;background:#ef5b51;transform:translateX(-50%);animation:scale-up-three linear 15s infinite;@media #{$xs}{display:none}}& .banner-shape-2{position:absolute;left:50px;top:150px;z-index:-1;animation:animationFramesOne linear 15s infinite;@media #{$xs}{display:none}}& .banner-shape-3{position:absolute;left:50px;bottom:100px;z-index:-1;animation:animationFramesThree linear 15s infinite;@media #{$xs}{display:none}}&.page-title{@media #{$xs}{background-position:66%}@media #{$sm}{background-position:60%}& .banner-bg{height:640px;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;align-items:center;& .page-title-content{& .title{font-size:65px;font-weight:700;color:$black;padding-bottom:20px;@media #{$xs}{font-size:36px}}& nav{display:inline-block;& .breadcrumb{background-color:#fff0;padding:0;& li{color:$theme-color-2;font-weight:500;font-size:24px;padding-left:0;@media #{$xs}{font-size:18px}& a{color:$black;padding-right:23px}}}}}}&::after{display:none}&::before{transform:skewX(0deg);width:100%;background:linear-gradient(90deg,rgb(255 255 255) 0%,#fff0 100%);left:0}& .banner-shape-1{@media #{$xs}{display:none}}}}.breadcrumb-item+.breadcrumb-item::before{content:"|";color:$theme-color-2;padding-right:23px}@keyframes animationFramesOne{0%{transform:translate(0,0) rotate(0deg)}20%{transform:translate(73px,-1px) rotate(36deg)}40%{transform:translate(141px,72px) rotate(72deg)}60%{transform:translate(83px,122px) rotate(108deg)}80%{transform:translate(-40px,72px) rotate(144deg)}100%{transform:translate(0,0) rotate(0deg)}}@-webkit-keyframes animationFramesOne{0%{-webkit-transform:translate(0,0) rotate(0deg)}20%{-webkit-transform:translate(73px,-1px) rotate(36deg)}40%{-webkit-transform:translate(141px,72px) rotate(72deg)}60%{-webkit-transform:translate(83px,122px) rotate(108deg)}80%{-webkit-transform:translate(-40px,72px) rotate(144deg)}100%{-webkit-transform:translate(0,0) rotate(0deg)}}@keyframes animationFramesThree{0%{transform:translate(165px,-179px)}100%{transform:translate(-346px,617px)}}@-webkit-keyframes animationFramesThree{0%{-webkit-transform:translate(165px,-179px)}100%{-webkit-transform:translate(-346px,617px)}}@-webkit-keyframes scale-up-three{0%{-webkit-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(.4);transform:scale(.4)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-three{0%{-webkit-transform:scale(1);transform:scale(1)}40%{-webkit-transform:scale(.4);transform:scale(.4)}100%{-webkit-transform:scale(1);transform:scale(1)}}.banner-area-2{height:880px;margin-top:120px;position:relative;@media #{$md}{margin-top:75px}@media #{$xs}{margin-top:75px;height:500px}@media #{$sm}{height:700px}&::before{position:absolute;content:'';left:0;top:0;height:100%;width:100%;background-color:rgb(1 84 247 / .2)}& .banner-flex{& .banner-content{max-width:665px;background:$white;padding:65px 40px 65px 65px;@media #{$md}{max-width:500px}@media #{$xs}{max-width:100%;padding:20px}@media #{$sm}{max-width:450px;padding:65px 40px 65px 65px}& .title{font-size:90px;color:$black;font-weight:700;line-height:90px;position:relative;@media #{$md}{font-size:70px;line-height:80px}@media #{$xs}{font-size:42px;line-height:52px}@media #{$sm}{font-size:60px;line-height:70px}&::before{position:absolute;content:'';left:-65px;top:0;height:100%;width:8px;background:$theme-color-2}}& p{font-weight:500;color:#8a8a8a;line-height:26px;padding-top:26px;padding-bottom:45px;@media #{$xs}{font-size:13px;padding-top:10px;padding-bottom:20px}@media #{$sm}{font-size:15px;padding-top:26px;padding-bottom:45px}}& ul{& li{display:inline-block;&:last-child{& a{color:$black;margin-left:35px;text-decoration:underline;font-size:15px;font-weight:600;@media #{$xs}{margin-top:20px}@media #{$sm}{margin-top:0}& i{padding-left:6px}}}}}}}&.banner-area-3{margin-top:0;position:relative;height:950px;z-index:10;&::before{position:absolute;content:'';left:0;top:0;height:100%;width:100%;background-color:rgb(14 43 92 / .86);z-index:-2}& .banner-content-3{& .title{color:$white;font-size:85px;line-height:95px;font-weight:700;@media #{$lg}{font-size:62px;line-height:72px}@media #{$md}{font-size:64px;line-height:74px}@media #{$xs}{font-size:28px;line-height:38px}@media #{$sm}{font-size:50px;line-height:60px}& span{font-style:italic}}& p{color:$white;font-size:20px;font-weight:500;padding-right:100px;line-height:32px;padding-top:33px;padding-bottom:40px;@media #{$xs}{padding-right:0;font-size:16px}@media #{$sm}{padding-right:100px}}& ul{& li{display:inline-block;&:first-child{margin-right:40px}& .play-btn{text-decoration:underline;font-size:15px;font-weight:600;color:$white;@media #{$xs}{margin-top:20px}@media #{$sm}{margin-top:0}& i{padding-left:8px}}}}}& .banner-thumb{position:absolute;right:0;bottom:0;text-align:right;z-index:-1;& img{width:90%;@media #{$lg}{width:75%}@media #{$md}{width:48%}@media #{$xs}{display:none}@media #{$sm}{width:55%;display:inline-block}}}}}.banner-play{width:80px;height:80px;background:#f86e03;text-align:center;border-radius:50%;line-height:80px;z-index:1;position:relative;&::before{position:absolute;content:'';left:0;top:0;height:100%;width:100%;border:1px solid $white;@include animation(ripple-white 1s linear infinite);border-radius:50%}&::after{position:absolute;content:'';left:0;top:0;height:100%;width:100%;border:1px solid $white;@include animation(ripple-white 1.5s linear infinite);border-radius:50%}& a{font-size:18px;position:relative;z-index:9;color:#fff}}@keyframes ripple-white{0%{opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}40%{opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}100%{opacity:0;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-o-transform:scale(1.4);transform:scale(1.4)}}