
/** banner-section **/

.banner-section{
  position           : relative;
  width              : 100%;
  padding            : 110px 0px;
  background-size    : cover;
  background-repeat  : no-repeat;
  background-position: center;
}

.banner-section .bg-layer{
  position             : absolute;
  left                 : 0px;
  top                  : 0px;
  width                : 55%;
  height               : 100%;
  background-blend-mode: multiply;
  clip-path            : polygon(0% 0%, 100% 0%, 83% 100%, 0% 100%, 0% 0%);
  background-repeat    : no-repeat;
  background-size      : cover;
}

.banner-carousel{
  position: relative;
}

.banner-carousel .slide-item{
  position: relative;
}

.banner-section.style-one .banner-carousel .content-box{
  position          : relative;
  display           : block;
  background        : -webkit-linear-gradient(0deg, #eff4f7, #c0d1d9 100%);
  border-radius     : 20px;
  padding           : 70px 80px 77px 80px;
  overflow          : hidden;
  z-index           : 5;
  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-section.style-one .banner-carousel .active .content-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: 700ms;
  -moz-transition-delay   : 700ms;
  -ms-transition-delay    : 700ms;
  -o-transition-delay     : 700ms;
  transition-delay        : 700ms;
}

.banner-section.style-one .banner-carousel .content-box .text{
  position : relative;
  max-width: 450px;
  width    : 100%;
  z-index  : 5;
}

.banner-carousel .content-box .content-bg{
  position: absolute;
  bottom  : 0px;
  right   : 0px;
  z-index : 1;
}

.banner-carousel .content-box h2{
  display      : block;
  font-size    : 44px;
  line-height  : 54px;
  font-weight  : 700;
  margin-bottom: 21px;
}

.banner-carousel .content-box p{
  font-size    : 18px;
  line-height  : 30px;
  color        : #222;
  margin-bottom: 32px;
}

.banner-carousel .content-box .theme-btn-one{
  margin-right: 16px;
  padding     : 14px 45px 15px 45px;
}

.banner-btn{
  position      : relative;
  display       : inline-block;
  overflow      : hidden;
  vertical-align: middle;
  font-size     : 16px;
  line-height   : 25px;
  font-weight   : 700;
  color         : #002222;
  border        : 1px solid #b9c4cb;
  text-align    : center;
  padding       : 13px 40px 14px 40px;
  border-radius : 30px;
  z-index       : 1;
  transition    : all 500ms ease;
}

.banner-btn:hover{
  color: #ffffff;
}

.banner-btn:before{
  position  : absolute;
  content   : '';
  width     : 100%;
  height    : 100%;
  left      : 0px;
  top       : 0px;
  right     : 0px;
  transform : scale(0,0);
  z-index   : -1;
  transition: all 500ms ease;
}

.banner-btn:hover:before{
  transform: scale(1,1);
}

.banner-section.style-one .banner-carousel .content-box .shape .shape-1{
  position         : absolute;
  top              : 75px;
  right            : 40%;
  width            : 113px;
  height           : 113px;
  background-repeat: no-repeat;
  z-index          : 1;
}

.banner-section.style-one .banner-carousel .content-box .shape .shape-2{
  position         : absolute;
  top              : 50px;
  right            : 180px;
  width            : 113px;
  height           : 113px;
  background-repeat: no-repeat;
}

.banner-section.style-one .banner-carousel .content-box .shape .shape-3{
  position         : absolute;
  right            : 280px;
  bottom           : 40px;
  width            : 211px;
  height           : 211px;
  background-repeat: no-repeat;
}

.banner-section.style-one .banner-carousel .content-box .shape .shape-4{
  position         : absolute;
  right            : 320px;
  bottom           : 50px;
  width            : 113px;
  height           : 113px;
  background-repeat: no-repeat;
}

.banner-section.style-one .banner-carousel .content-box .shape .shape-5{
  position         : absolute;
  right            : 60px;
  top              : 80px;
  width            : 211px;
  height           : 211px;
  background-repeat: no-repeat;
}

/** banner-style-two **/

.banner-section.style-two{
  position  : relative;
  width     : 100%;
  overflow  : hidden;
  padding   : 0px;
  background: -webkit-linear-gradient(-90deg, #0d7a83, #162a41 100%);
}

.banner-section.style-two .content-box{
  position: relative;
  width   : 100%;
  padding : 143px 0px 155px 0px;
}

.banner-section.style-two .content-box .text{
  position : relative;
  display  : block;
  max-width: 550px;
  width    : 100%;
  z-index  : 5;
}

.banner-section.style-two .content-box .image-box{
  position          : absolute;
  right             : -80px;
  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-section.style-two .banner-carousel .active .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: 700ms;
  -moz-transition-delay   : 700ms;
  -ms-transition-delay    : 700ms;
  -o-transition-delay     : 700ms;
  transition-delay        : 700ms;
}

.banner-section.style-two .content-box h2{
  display           : block;
  font-size         : 60px;
  line-height       : 66px;
  color             : #fff;
  font-weight       : 800;
  margin-bottom     : 32px;
  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-section.style-two .banner-carousel .active 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: 700ms;
  -moz-transition-delay   : 700ms;
  -ms-transition-delay    : 700ms;
  -o-transition-delay     : 700ms;
  transition-delay        : 700ms;
}

.banner-section.style-two .content-box p{
  display           : block;
  font-size         : 18px;
  line-height       : 30px;
  color             : #fff;
  margin-bottom     : 42px;
  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-section.style-two .banner-carousel .active 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: 1000ms;
  -moz-transition-delay   : 1000ms;
  -ms-transition-delay    : 1000ms;
  -o-transition-delay     : 1000ms;
  transition-delay        : 1000ms;
}

.banner-section.style-two .content-box .btn-box{
  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-section.style-two .banner-carousel .active .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: 1300ms;
  -moz-transition-delay   : 1300ms;
  -ms-transition-delay    : 1300ms;
  -o-transition-delay     : 1300ms;
  transition-delay        : 1300ms;
}

.banner-btn-two{
  position     : relative;
  display      : inline-block;
  overflow     : hidden;
  font-size    : 17px;
  line-height  : 25px;
  font-weight  : 600;
  color        : #142441 !important;
  background   : #fff;
  text-align   : center;
  padding      : 14px 47px 15px 47px;
  border-radius: 30px;
  z-index      : 1;
  transition   : all 500ms ease;
}

.banner-btn-two:hover{
  color     : #fff !important;
  background: #142441;
}

.banner-btn-two:before{
  position  : absolute;
  content   : '';
  background: #142441;
  width     : 100%;
  height    : 100%;
  left      : 0px;
  top       : 0px;
  transform : scale(0,0);
  z-index   : -1;
  transition: all 500ms ease;
}

.banner-btn-two:hover:before{
  transform: scale(1,1);
}

.banner-section.style-two .pattern-layer .pattern-1{
  position           : absolute;
  left               : 0px;
  bottom             : 0px;
  width              : 100%;
  height             : 100%;
  background-size    : cover;
  background-repeat  : no-repeat;
  background-position: bottom center;
}

.banner-section.style-two .pattern-layer .pattern-2{
  position     : absolute;
  left         : -174px;
  top          : -461px;
  width        : 858px;
  height       : 858px;
  background   : rgba(25,173,168,0.1);
  border-radius: 50%;
}

.banner-section.style-two .content-box .image-box .support-box{
  position: absolute;
  top     : 190px;
  right   : -145px;
}

.banner-section.style-two .content-box .image-box .support-box a{
  position     : relative;
  display      : inline-block;
  font-size    : 20px;
  line-height  : 28px;
  color        : #142441;
  font-weight  : 600;
  background   : #fff;
  border-radius: 50px;
  padding      : 36px 40px 36px 105px;
}

.banner-section.style-two .content-box .image-box .support-box a i{
  position     : absolute;
  left         : 15px;
  top          : 15px;
  width        : 70px;
  height       : 70px;
  line-height  : 70px;
  background   : #dcf2f2;
  border-radius: 50%;
  font-size    : 30px;
  text-align   : center;
}

.banner-section.style-two .content-box .image-box .shape .shape-1{
  position     : absolute;
  left         : 40px;
  top          : 210px;
  width        : 307px;
  height       : 307px;
  border-radius: 50%;
  z-index      : -1;
}

.banner-section.style-two .content-box .image-box .shape .shape-2{
  position     : absolute;
  top          : 40px;
  right        : -40px;
  width        : 380px;
  height       : 380px;
  border-radius: 50%;
  border       : 1px solid rgba(255,255,255,0.5);
  z-index      : -1;
}

.banner-section .owl-nav{
  position : absolute;
  top      : 50%;
  transform: translateY(-50%);
  width    : 100%;
}

.banner-section .owl-nav button{
  position     : absolute;
  display      : inline-block;
  width        : 70px;
  height       : 70px;
  line-height  : 74px;
  border       : 1px solid rgba(255,255,255,0.4);
  background   : transparent;
  text-align   : center;
  border-radius: 50%;
  font-size    : 24px;
  color        : rgba(255,255,255,0.4);
  cursor       : pointer;
  transition   : all 500ms ease;
}

.banner-section .owl-nav .owl-prev{
  left: 50px;
}

.banner-section .owl-nav .owl-next{
  right: 50px;
}

.banner-section .owl-nav button:hover{
  background  : #fff;
  border-color: #fff;
  color       : #142441;
}


/** banner-style-three **/

.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 6000ms linear;
  -moz-transition    : all 6000ms linear;
  -ms-transition     : all 6000ms linear;
  -o-transition      : all 6000ms linear;
  transition         : all 6000ms linear;
}

.banner-carousel .active .slide-item .image-layer{
  -webkit-transform: scale(1.15);
  -ms-transform    : scale(1.15);
  transform        : scale(1.15);
}

.banner-section.style-three{
  padding: 0px 0px;
}

.banner-section.style-three .slide-item{
  padding: 186px 0px 146px 0px;
}

.banner-section.style-three .slide-item:before{
  position  : absolute;
  content   : '';
  background: #000;
  width     : 100%;
  height    : 100%;
  left      : 0px;
  top       : 0px;
  right     : 0px;
  opacity   : 0.5;
  z-index   : 1;
}

.banner-section.style-three .content-box{
  position : relative;
  max-width: 750px;
  margin   : 0 auto;
  padding  : 0px;
  z-index  : 5;
}

.banner-section.style-three .content-box h2{
  margin-bottom: 23px;
}


/** banner-style-four **/

.banner-section.style-four{
  position: relative;
  padding : 95px 0px 170px 0px;
}

.banner-section.style-four .pattern-layer{
  position           : absolute;
  left               : 0px;
  bottom             : 0px;
  width              : 100%;
  height             : 100%;
  background-size    : cover;
  background-repeat  : no-repeat;
  background-position: bottom center;
}

.banner-section.style-four .image-box{
  position          : relative;
  display           : block;
  opacity           : 0;
  -webkit-transform : translateX(100px);
  -moz-transform    : translateX(100px);
  -ms-transform     : translateX(100px);
  -o-transform      : translateX(100px);
  transform         : translateX(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-section.style-four .banner-carousel .active .image-box{
  opacity                 : 1;
  -webkit-transform       : translateX(0);
  -moz-transform          : translateX(0);
  -ms-transform           : translateX(0);
  -o-transform            : translateX(0);
  transform               : translateX(0);
  -webkit-transition-delay: 700ms;
  -moz-transition-delay   : 700ms;
  -ms-transition-delay    : 700ms;
  -o-transition-delay     : 700ms;
  transition-delay        : 700ms;
}

.banner-section.style-four .image-box .image img{
  max-width: 100%;
}

.banner-section.style-four .image-box .text{
  position     : absolute;
  top          : 115px;
  right        : -110px;
  width        : 230px;
  background   : #fff;
  border-radius: 30px;
  padding      : 50px 30px;
  text-align   : center;
  box-shadow   : 0 10px 30px rgba(34,182,175,0.1);
}

.banner-section.style-four .image-box .text h3{
  position     : relative;
  display      : inline-block;
  width        : 80px;
  height       : 80px;
  line-height  : 80px;
  background   : #142441;
  border-radius: 20px;
  text-align   : center;
  font-size    : 32px;
  color        : #fff;
  font-weight  : 700;
  margin-bottom: 34px;
}

.banner-section.style-four .image-box .admin-box{
  position     : absolute;
  left         : -100px;
  bottom       : 95px;
  width        : 350px;
  padding      : 30px 30px 35px 115px;
  background   : #fff;
  border-radius: 100px;
  box-shadow   : 0 10px 30px rgba(34,182,175,0.1);
}

.banner-section.style-four .image-box .admin-box .admin-thumb{
  position     : absolute;
  left         : 20px;
  top          : 20px;
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
}

.banner-section.style-four .image-box .admin-box .admin-thumb img{
  width        : 100%;
  border-radius: 50%;
}

.banner-section.style-four .image-box .admin-box h4{
  margin-bottom: 3px;
}

.banner-section.style-four .content-box h2{
  font-size         : 60px;
  line-height       : 66px;
  font-weight       : 800;
  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-section.style-four .banner-carousel .active .content-box h2{
  opacity                 : 1;
  -webkit-transform       : translateX(0);
  -moz-transform          : translateX(0);
  -ms-transform           : translateX(0);
  -o-transform            : translateX(0);
  transform               : translateX(0);
  -webkit-transition-delay: 700ms;
  -moz-transition-delay   : 700ms;
  -ms-transition-delay    : 700ms;
  -o-transition-delay     : 700ms;
  transition-delay        : 700ms;
}

.banner-section.style-four .content-box p{
  font-size         : 18px;
  line-height       : 30px;
  color             : #142441;
  margin-bottom     : 42px;
  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-section.style-four .banner-carousel .active .content-box p{
  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-section.style-four .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-section.style-four .banner-carousel .active .content-box .btn-box{
  opacity                 : 1;
  -webkit-transform       : translateX(0);
  -moz-transform          : translateX(0);
  -ms-transform           : translateX(0);
  -o-transform            : translateX(0);
  transform               : translateX(0);
  -webkit-transition-delay: 1300ms;
  -moz-transition-delay   : 1300ms;
  -ms-transition-delay    : 1300ms;
  -o-transition-delay     : 1300ms;
  transition-delay        : 1300ms;
}

.banner-section.style-four .owl-nav button{
  color       : #c0cccb;
  border-color: #c0cccb;
}

.banner-section.style-four .owl-nav button:hover{
  border-color: #fff;
  color       : #142441;
}

.banner-section.style-four .image-box .shape .shape-1{
  position         : absolute;
  left             : 0px;
  bottom           : 60px;
  width            : 173px;
  height           : 173px;
  background-repeat: no-repeat;
}

.banner-section.style-four .image-box .shape .shape-2{
  position         : absolute;
  right            : -80px;
  bottom           : 240px;
  width            : 173px;
  height           : 173px;
  background-repeat: no-repeat;
}

.banner-section.style-four .anim-icon .anim-icon-1{
  position         : absolute;
  left             : 0px;
  top              : 170px;
  width            : 292px;
  height           : 225px;
  background-repeat: no-repeat;
}

.banner-section.style-four .anim-icon .anim-icon-2{
  position         : absolute;
  left             : 44%;
  top              : 140px;
  width            : 53px;
  height           : 70px;
  background-repeat: no-repeat;
}

.banner-section.style-four .anim-icon .anim-icon-3{
  position         : absolute;
  top              : 130px;
  right            : 460px;
  width            : 66px;
  height           : 67px;
  background-repeat: no-repeat;
}

.banner-section.style-four .anim-icon .anim-icon-4{
  position         : absolute;
  right            : 0px;
  bottom           : 200px;
  width            : 395px;
  height           : 227px;
  background-repeat: no-repeat;
}

/** banner-style-five **/

.banner-section.style-five{
  background: #06194b;
  padding   : 125px 0px 225px 0px;
}

.banner-section.style-five .content-box h2,
.banner-section.style-five .content-box p{
  color: #fff;
}

.banner-section.style-five .content-box .banner-btn{
  color  : #fff;
  padding: 13px 43px 14px 43px;
}

.banner-section.style-five .image-box{
  position      : relative;
  margin        : 0px;
  padding-left  : 130px;
  padding-bottom: 30px;
  padding-top   : 50px;
}

.banner-section.style-five .image-box .image{
  position     : relative;
  display      : block;
  border-radius: 20px;
  z-index      : -1;
}

.banner-section.style-five .image-box .image:before{
  position     : absolute;
  content      : '';
  background   : #1e3060;
  width        : 100%;
  height       : 100%;
  top          : 30px;
  right        : 30px;
  border-radius: 20px;
}

.banner-section.style-five .image-box .image img{
  width        : 100%;
  border-radius: 20px;
}

.banner-section.style-five .image-box .admin-box{
  left         : 0px;
  bottom       : 85px;
  border-radius: 20px;
  padding      : 40px 20px 45px 125px;
}

.banner-section.style-five .image-box .admin-box .admin-thumb{
  left: 30px;
  top : 30px;
}

.banner-section.style-five .image-box .admin-box:before{
  position     : absolute;
  content      : '';
  width        : 100%;
  height       : 100%;
  right        : 20px;
  top          : 20px;
  border-radius: 20px;
  z-index      : -1;
}

.banner-section.style-five .image-box .shape .shape-3{
  position         : absolute;
  top              : 0px;
  right            : -105px;
  width            : 263px;
  height           : 263px;
  background-repeat: no-repeat;
}

.banner-section.style-five .image-box .shape .shape-4{
  position         : absolute;
  left             : 60px;
  bottom           : 120px;
  width            : 263px;
  height           : 263px;
  background-repeat: no-repeat;
  z-index          : -1;
}

.banner-section.style-five .pattern-layer .pattern-1{
  position         : absolute;
  left             : 240px;
  top              : 145px;
  width            : 263px;
  height           : 263px;
  background-repeat: no-repeat;
}

.banner-section.style-five .pattern-layer .pattern-2{
  position         : absolute;
  left             : 0px;
  top              : 0px;
  width            : 994px;
  height           : 100%;
  background-size  : cover;
  background-repeat: no-repeat;
}

.banner-section.style-five .pattern-layer .pattern-3{
  position         : absolute;
  right            : 0px;
  bottom           : 0px;
  width            : 524px;
  height           : 793px;
  background-repeat: no-repeat;
}

.banner-section.style-five .pattern-layer .pattern-4{
  position         : absolute;
  left             : 0px;
  bottom           : 0px;
  width            : 100%;
  height           : 156px;
  background-repeat: no-repeat;
  background-size  : cover;
}