/** banner-section **/



.banner-section{

  position: relative;

  overflow: hidden;

  background-color: #fff;

}



.banner-section .pattern-layer{

  position: absolute;

  left: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: bottom center;

}

  

.banner-carousel .slide-item{

  position: relative;

  padding: 100px 0px;

  overflow: hidden;

}



.banner-style-two .banner-carousel .slide-item:before{

  position: absolute;

  content: '';

  background: #022D1F;

  width: 100%;

  height: 100%;

  left: 0px;

  top: 0px;

  opacity: 0.7;

  z-index: 1;

}

  

.banner-carousel .content-box{

  max-width: 560px;

  padding:15px 30px;

}

  

.banner-carousel .slide-item .bg-layer{

  position: absolute;

  left:0;

  top:0;

  width:100%;

  height:100%;

  background-repeat: no-repeat;

  background-position: center 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 .bg-layer{

  -webkit-transform:scale(1.25);

  -ms-transform:scale(1.25);

  transform:scale(1.25);

}

  

.banner-carousel .content-box .upper-text{

  position: relative;

  display: inline-block;

  font-size: 12px;

  line-height: 20px;

  font-weight: 500;

  margin-bottom: 17px;

  color: #fff;

  border-radius: 4px;

  padding: 2px 12px;

  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 .upper-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: 56px;

  line-height: 64px;

  font-weight: 700;

  margin-bottom: 20px;

  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: 30px;

  color: var(--title-color);

  margin-bottom: 35px;

  max-width: 480px;

  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-carousel .image-box .image{

  position: relative;

  opacity: 0;

  -webkit-transform: translateX(50px);

  -moz-transform: translateX(50px);

  -ms-transform: translateX(50px);

  -o-transform: translateX(50px);

  transform: translateX(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 .image-box .image{

  opacity: 1;

  -webkit-transform: translateX(0);

  -moz-transform: translateX(0);

  -ms-transform: translateX(0);

  -o-transform: translateX(0);

  transform: translateX(0);

  -webkit-transition-delay: 1400ms;

  -moz-transition-delay: 1400ms;

  -ms-transition-delay: 1400ms;

  -o-transition-delay: 1400ms;

  transition-delay: 1400ms;

}



.banner-carousel .image-box{

  position: relative;

  display: block;

}



.banner-carousel .image-box img{

  max-width: none;

  float: left;

}



.banner-carousel .image-box .badge{

  position: absolute;

  top: 0px;

  right: -50px;

}



.banner-carousel .owl-dots{

  position: absolute;

  left: 45px;

  top: 50%;

  transform: translateY(-50%);

}



.banner-carousel.dots-style-one .owl-dots button{

  display: block;

  margin-bottom: 10px;

}



.banner-carousel .dots-style-one .owl-dots button:last-child{

  margin-bottom: 0px;

}





/** banner-style-two **/



.banner-style-two{

  position: relative;

}



.banner-style-two .content-box{

  position: relative;

  display: block;

  margin-bottom: 20px;

  overflow: hidden;

}



.banner-style-two .content-one{

  background: #FFBF42;

  border-radius: 5px;

  padding: 80px 80px 80px 60px;

}



.banner-style-two .content-one .popular-product{

  margin-bottom: 17px;

}



.banner-style-two .content-one h2{

  position: relative;

  display: block;

  font-size: 56px;

  line-height: 65px;

  font-weight: 700;

  max-width: 400px;

  margin-bottom: 29px;

}



.banner-style-two .content-one h3{

  display: block;

  font-size: 32px;

  line-height: 28px;

  font-weight: 400;

  margin-bottom: 80px;

}



.banner-style-two .content-one h3 span{

  font-weight: 600;

}



.banner-style-two .content-box .image{

  position: absolute;

  right: 0px;

  bottom: 0px;

}



.banner-style-two .content-box .image img{

  transition: all 5s ease;

}



.banner-style-two .content-box:hover .image img{

  transform: scale(1.5);

}



.banner-style-two .content-one .theme-btn{

  background: var(--title-color);

  color: #fff;

}



.banner-style-two .content-one .theme-btn span{



}



.banner-style-two .content-one .inner-box{

  max-width: 400px;

}



.banner-style-two .content-two{

  background: #FF7474;

  border-radius: 5px;

  padding: 34px 40px 40px 40px;

  margin-bottom: 20px;

}



.banner-style-two .content-two h2{

  display: block;

  font-size: 33px;

  line-height: 40px;

  color: #fff;

  margin-bottom: 6px;

}



.banner-style-two .content-two h4{

  display: block;

  font-size: 20px;

  line-height: 28px;

  color: #fff;

  margin-bottom: 65px;

}



.banner-style-two .content-two .theme-btn{

  padding: 6.5px 16px;

}



.banner-style-two .content-two .inner-box{

  max-width: 225px;

}



.banner-style-two .content-three{

  background: #34DAC6;

  border-radius: 5px;

  padding: 30px 30px 40px 30px;

  margin-bottom: 20px;

}



.banner-style-two .content-three .popular-product{

  margin-bottom: 12px;

}



.banner-style-two .content-three h2{

  position: relative;

  display: block;

  font-size: 33px;

  line-height: 39px;

  font-weight: 400;

  margin-bottom: 5px;

}



.banner-style-two .content-three h2 span{

  font-weight: 700;

}



.banner-style-two .content-three h4{

  display: block;

  font-size: 20px;

  line-height: 28px;

  font-weight: 400;

  margin-bottom: 33px;

}



.banner-style-two .content-three h4 span{

  font-size: 24px;

  font-weight: 700;

}



.banner-style-two .content-three .cs-countdown{

  position: relative;

  display: flex;

  align-items: center;

  width: 186px;

  background: linear-gradient(90deg, #FF6B00 0%, #FF6F8D 50.5%, #4286FF 100%);

  border-radius: 9px;

  padding: 4px 20px;

  justify-content: space-between;

}



.banner-style-two .content-three .cs-countdown h6{

  display: none;

}



.banner-style-two .content-three .cs-countdown span{

  position: relative;

  display: block;

  font-size: 20px;

  line-height: 28px;

  font-family: var(--title-font);

  color: #fff;

  font-weight: 600;

}



.banner-style-two .content-three .cs-countdown .count-col{

  position: relative;

}



.banner-style-two .content-three .cs-countdown .count-col:before{

  position: absolute;

  content: ':';

  top: -2px;

  right: -12px;

  font-size: 20px;

  line-height: 28px;

  font-family: var(--title-font);

  font-weight: 600;

  color: #fff;

}



.banner-style-two .content-three .cs-countdown .count-col:last-child:before{

  display: none;

}



.banner-style-two .content-three .inner-box{

  max-width: 200px;

}



.banner-style-two .content-column{

  padding: 0px 10px;

}



.banner-style-two .inner-container{

  position: relative;

  margin: 0px 5px;

}



.banner-style-two .pattern-layer{

  position: absolute;

  top: 60px;

  right: 0px;

  width: 275px;

  height: 520px;

  background-repeat: no-repeat;

}





/** banner-style-three **/



.banner-style-three{

  position: relative;

  padding: 30px 135px;

}



.banner-style-three .slide-item{

  border-radius: 10px;

  overflow: hidden;

  padding-right: 85px;

}



.banner-style-three .banner-carousel .slide-item{

  padding-top: 0px;

  padding-bottom: 0px;

}



.banner-carousel .content-box h3{

  font-size: 32px;

  line-height: 40px;

  font-weight: 400;

  margin-bottom: 40px;

  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 .content-box h3 span{

  font-weight: 600;

}

  

.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: 1100ms;

  -moz-transition-delay: 1100ms;

  -ms-transition-delay: 1100ms;

  -o-transition-delay: 1100ms;

  transition-delay: 1100ms;

}



.banner-style-three .banner-carousel .slide-item .btn-box .theme-btn{

  background: var(--title-color);

  color: #fff;

}



.banner-style-two.home-4 .content-one{

  background: #C3EBA4;

}



.banner-style-two.home-4 .content-two{

  background: #FFF3B4;

}



.banner-style-two.home-4 .content-three{

  background: #A3E9FF;

}



.banner-style-two.home-4 .content-two h2,

.banner-style-two.home-4 .content-two h4{

  color: var(--title-color);

}



.banner-style-two.home-5 .content-one h2{

  font-size: 64px;

  line-height: 72px;

  max-width: 100%;

}



.banner-style-two.home-5 .content-one .inner-box{

  max-width: 630px;

  z-index: 1;

}



.banner-style-two.home-5 .content-one .bg-layer{

  position: absolute;

  left: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  transition: all 10s ease;

}



.banner-style-two.home-5 .content-one:hover .bg-layer{

  transform: scale(1.5);

}



.banner-style-two.home-5 .content-one h3{

  color: #E92530;

}



.banner-style-two.home-5 .content-one{

  border-radius: 10px;

  overflow: hidden;

}



.banner-style-two .search-inner{

  position: relative;

  display: block;

  background: #F3F3F3;

  padding: 30px;

  border-radius: 10px;

}



.banner-style-two .search-inner .form-group{

  position: relative;

  margin-bottom: 21px;

}



.banner-style-two .search-inner .form-group .select-box{

  min-height: 50px;

}



.banner-style-two .search-inner .form-group .select-box .nice-select{

  position: relative;

  display: block;

  width: 100%;

  height: 50px;

  background: #fff;

  line-height: 54px;

  padding: 0px 20px;

  font-size: 16px;

  color: var(--title-color);

  border-radius: 5px;

  text-transform: capitalize;

}



.banner-style-two .search-inner .form-group .select-box .nice-select:before{

  color: var(--title-color);

  right: 20px;

}



.banner-style-two .search-inner .message-btn .theme-btn{

  background: var(--title-color);

  color: #fff;

  width: 100%;

}





/** rtl-css **/



.rtl .banner-carousel .content-box{

  text-align: right;

}



.rtl .banner-style-two{

  direction: ltr;

}



.rtl .banner-style-two .content-box .inner-box{

  position: relative;

  text-align: right;

  z-index: 1;

}



.rtl .banner-style-two .search-inner .form-group .select-box .nice-select{

  text-align: right;

}



.rtl .banner-style-two .search-inner .form-group .select-box .nice-select:before{

  right: inherit;

  left: 20px;

}



/** responsive-css **/



@media only screen and (max-width: 1200px){

  .banner-style-three{

    padding-left: 0px;

    padding-right: 0px;

  }

}



@media only screen and (max-width: 991px){

  .banner-carousel .content-box{

    max-width: 100%;

    margin-bottom: 30px;

  }



  .banner-carousel .slide-item{

    padding-top: 100px;

  }



  .banner-carousel .content-box p{

    max-width: 100%;

  }



  .banner-carousel.dots-style-one .owl-dots{

    display: none;

  }



  .banner-carousel .image-box img{

    max-width: 100%;

    float: none;

  }



  .banner-style-three .banner-carousel .slide-item{

    padding-top: 100px;

  }

}



@media only screen and (max-width: 767px){

  .banner-carousel .content-box h2{

    font-size: 40px;

    line-height: 50px;

  }



  .banner-style-two.home-5 .content-one h2{

    font-size: 40px;

    line-height: 50px;

  }

    .banner-carousel .slide-item {

      padding-top: 40px;
      padding-bottom: 40px;

    }

    .banner-carousel .image-box img{
      max-height: 288px;
      margin: 0 auto;
    }
}



@media only screen and (max-width: 599px){

  .banner-style-two .content-one{

    padding-left: 30px;

    padding-right: 30px;

  }



  .banner-style-two .content-one h2{

    font-size: 40px;

    line-height: 50px;

  }

}



@media only screen and (max-width: 499px){



}