.banner-section {
  position: relative;
  overflow: hidden;
}

.banner-carousel {
  position: relative;
}

.banner-carousel .slide-item {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.banner-carousel .slide-item:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: var(--bg-color-one);
  top: 0px;
  right: 0px;
  opacity: 0.65;
  z-index: 1;
}

.banner-carousel .slide-item .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.banner-carousel .content-box {
  position: relative;
  display: block;
  max-width: 500px;
  height: 360px;
  width: 100%;
  z-index: 5;
}

.banner-carousel .content-box h6 {
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 26px;
  font-weight: 700;
  padding-left: 22px;
  text-transform: uppercase;
  padding-left: 22px;
  margin-bottom: 14px;
  opacity: 0;
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-carousel .content-box h6 i {
  position: absolute;
  left: 0px;
  top: 0px;
}

.banner-carousel .active .content-box h6 {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.banner-carousel .content-box h1 {
  position: relative;
  display: block;
  color: #ffffff;
  font-size: 62px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 21px;
  opacity: 0;.banner-carousel .content-box
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-carousel .active .content-box h1 {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.banner-carousel .content-box p {
  position: relative;
  display: block;
  color: #ffffff;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 33px;
  opacity: 0;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-carousel .active .content-box p {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.banner-carousel .content-box .theme_btn {
    background:none;
    color: #fff;
    border: 2px solid #fff;
    font-weight:700;
}

.banner-carousel .content-box .theme_btn:hover {
    background: rgba(255,255,255,.6);
}
.banner-carousel .content-box .btn-box {
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-carousel .active .content-box .btn-box {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.banner-carousel .content-box .btn-box .theme-btn {
  padding: 16.5px 40px;
}

.banner-section .owl-nav {
  position: absolute;
  top: 0%;
  bottom: 0;
  height: 60px;
  width: 100%;
}

.banner-section .owl-nav .owl-prev,
.banner-section .owl-nav .owl-next {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  color: #ffffff !important;
  text-align: center;
  border-radius:0;
  border: 2px solid #fff!important;
  cursor: pointer;
  background: transparent !important;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.banner-section .owl-nav .owl-prev {
  left: 50px;
}

.banner-section .owl-nav .owl-next {
  right: 50px;
}

.banner-section .owl-nav .owl-prev:hover,
.banner-section .owl-nav .owl-next:hover {
background:rgba(255,255,255,.6)!important;
}


/* Ocultamos por defecto la capa mobile */
.banner-carousel .slide-item .image-layer--mobile {
  display: none;
}

/* En mobile mostramos la capa mobile y ocultamos la desktop */
@media (max-width: 767px) {
  .banner-carousel .slide-item .image-layer {
    display: none;
  }
  .banner-carousel .slide-item .image-layer--mobile {
    display: block;
  }

.banner-carousel .slide-item img {width:100%;}
.banner-carousel .slide-item, .banner-carousel .auto-container {padding:0!important;}

  .banner-carousel .content-box {
    background: #333;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding:0 15px;
}
  .banner-carousel .content-box h1 {font-size:26px!important;}
  .banner-carousel .content-box h1, .banner-carousel .content-box p {margin-bottom:15px;}


}