$main-header-height: 66vh;

.owl-carousel {
  padding: 0;
}

@include media-breakpoint-up(lg) {
  .owl-carousel {
    padding: 0 120px;
  }
}

.image-slider {
  padding: 0;
}

/* Owl - Nav */
.owl-carousel {
  .owl-stage {
    display: flex;
    min-width: 100vw;

    .card {
      .figure {
        flex: 1 1 50%;
      }

      .content {
        flex: 3 1 0%;
      }
    }
  }

  .owl-item {
    margin-bottom: 40px;
    
    @include media-breakpoint-down(md) {
      margin-bottom: 20px;
    }
    
    .item.h-100 {
      height: 100% !important;
    }
  }

  .owl-nav {
    z-index: 999;

    button.owl-prev,
    button.owl-next {
      min-width: inherit;
      width: 80px;
      height: 80px;
      display: inline-block;
      vertical-align: middle;
      text-indent: -99999px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      margin: -50px 0 0 0;
      z-index: 2;
      outline: 0;
      border: 3px solid $secondary-color;
      border-radius: 360px;

      &:before {
        width: 100%;
        height: 100%;
        font-family: "Font Awesome 5 Pro";
        font-weight: $font-weight-normal;
        font-size: $font-size-40;
        color: $secondary-color;
        line-height: $line-height-80;
        text-align: center;
        text-indent: 0;
        background: transparent;
        border: none;
        @include border-radius($border-radius);
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
      }

      &:hover,
      &:focus,
      &:active {
        border-color: $quaternary-color;

        &:before {
          color: $quaternary-color;
        }
      }

      &.owl-prev {
        left: 0;

        &:before {
          content: "\f053";
          padding-right: 3px;
        }
      }

      &.owl-next {
        right: 0;

        &:before {
          content: "\f054";
          padding-left: 3px;
        }
      }

      &.disabled {
        opacity: 0.7;
        cursor: default;
      }
    }

    &.disabled {
      display: none;
    }

    @include media-breakpoint-down(xxl) {

      button.owl-prev,
      button.owl-next {
        width: 60px;
        height: 60px;

        &:before {
          font-size: $font-size-32;
          line-height: $line-height-60;
        }
      }
    }

    @include media-breakpoint-down(md) {
      button.owl-prev.owl-prev {
        left: -8px;
      }

      button.owl-next.owl-next {
        right: -8px;
      }

      button.owl-prev,
      button.owl-next {
        width: 53px;
        height: 53px;
        margin: -33px 0 0 0;
        background: $primary-color;
        border: none;

        &:before {
          font-size: $font-size-32;
          line-height: 50px;
          box-shadow: none;
        }

        &:hover,
        &:focus,
        &:active {
          &:before {
            color: $quaternary-color;
            border-color: $quaternary-color;
          }
        }
      }
    }
  }

  &.slider-style-1 {
    .owl-nav {

      button.owl-prev::before,
      button.owl-next::before {
        box-shadow: none;
        background: none;
      }
    }
  }
}

/* Owl - Dots */
.owl-carousel {
  .owl-dots {
    width: 100%;
    float: none;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 0.5em;

    button.owl-dot {
      min-width: inherit;
      width: 16px;
      height: 16px;
      float: none;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      background: $quaternary-color;
      border: none;
      @include border-radius($border-radius);
      @include transition($btn-transition);
      cursor: pointer;
      padding: 0;
      margin: 7px;

      &:hover,
      &:focus,
      &:active,
      &.active {
        background: $secondary-color;
      }

      &.active {
        background: $secondary-color;
        box-shadow: $secondary-color 0 0 0 3px;
      }
    }

    &.disabled {
      display: none;
    }
  }
}

/* Hero - Main */
.hero-main {
  width: 100%;
  position: relative;
  overflow: hidden;

  a button {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 270px;
    transform: translate(0px, -50%);
    border: 3px solid $secondary-color;
    border-radius: 360px;
    color: $secondary-color;
    background: #000e1d80 0% 0% no-repeat padding-box;
    z-index: 2;

    &:hover {
      background: $primary-bg;
    }

    @include media-breakpoint-down(md) {
      height: 180px;
      width: 40px;
    }
  }

  @include media-breakpoint-down(md) {
    .owl-carousel .owl-nav.disabled {
      display: none;
    }
  }

  .btn-left {
    left: 100px;

    &:before {
      font-family: "Font Awesome 5 Pro";
      content: "\f053";
      font-size: $font-size-32;
      line-height: 270px;
    }

    @include media-breakpoint-down(md) {
      left: 25px;

      &:before {
        line-height: 180px;
      }
    }
  }

  .btn-right {
    right: 100px;

    &:before {
      font-family: "Font Awesome 5 Pro";
      content: "\f054";
      font-size: $font-size-32;
      line-height: 270px;
    }

    @include media-breakpoint-down(md) {
      right: 25px;

      &:before {
        line-height: 180px;
      }
    }
  }

  .slide-item {
    width: 100%;
    height: 75vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }

  .figure {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    margin: 0;

    iframe {
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      aspect-ratio: 16/9;
    }

    img {
      width: auto;
      height: 100%;
      object-fit: cover;
      max-width: inherit;
      max-height: inherit;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

      @include media-breakpoint-down(md) {
        min-width: initial;
        min-height: initial;
      }
    }

    &:before {
      content: "";
      width: 100%;
      height: 375px;
      float: left;
      background: $gradient-hero-blue;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      opacity: 1;

      @include media-breakpoint-down(sm) {
        height: 140px;
      }
    }
  }

  .video-item .figure {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    padding-bottom: max(#{$main-header-height}, 100vw * 0.56);
    width: max(calc(#{$main-header-height} * 1.77), 100vw);
  }

  .hero-cont {
    width: 100%;
    float: left;
    font-size: $font-size-18;
    color: $primary-color;
    line-height: $line-height-26;
    text-align: center;
    position: relative;
    z-index: 2;
    word-break: break-word;
    margin: auto;
    padding: 100px 0 0 0;

    &.hero-more-cont {
      padding: 0;
      z-index: 100;
    }

    img {
      width: auto;
      margin: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
    }

    h1 {
      font-family: $font-family-primary;
      font-weight: $font-weight-medium;
      font-size: $font-size-64;
      color: $primary-color;
      text-transform: uppercase;
      letter-spacing: 3.2px;
      text-shadow: 0px 2px 10px #0000004d;
    }

    p,
    li {
      a {
        color: $primary-color;
      }
    }

    .sub-title {
      font-family: $font-family-primary;
      font-weight: $font-weight-medium;
      font-size: $font-size-54;
      color: $primary-color;
      line-height: $line-height-70;
      padding-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 2.7px;
      text-shadow: 0px 2px 10px #0000004d;
    }

    .detail-title {
      h1 {
        font-weight: $font-weight-bold;
        font-size: 6.25rem;
      }

      p {
        font-weight: $font-weight-normal;
        font-size: $font-size-32;
        text-transform: uppercase;
      }

      @include media-breakpoint-down(md) {
        h1 {
          font-size: $font-size-40;
        }

        p {
          font-size: $font-size-18;
        }
      }
    }

    .aside {
      width: 100%;
      float: none;
      display: inline-block;
      vertical-align: top;
      margin: 0;
      padding: 0;
    }

    .content-header-container {
      display: flex;
      flex-flow: column wrap;

      &.float-left {
        align-items: flex-start;
        text-align: left;
      }

      &.float-right {
        align-items: flex-end;
        text-align: left;

      }

      &.align-center {
        align-items: center;
        text-align: center;
      }

      .header-title,
      .header-subtitle {
        padding: 10px 20px;
        border-radius: 8px;
        width: fit-content;
      }

      .header-subtitle {
        background: $secondary-color;
        margin-bottom: 10px;

        h2 {
          font-size: 20px;
          font-weight: 700;
          padding-bottom: 0;

          @include media-breakpoint-down(lg) {
            font-size: 20px;
          }

          @include media-breakpoint-down(md) {
            font-size: 16px;
          }
        }
      }

      .header-title {
        background: $tertiary-color;

        h1 {
          font-size: 40px;
          text-transform: none;
          font-weight: 700;
          padding-bottom: 0;

          @include media-breakpoint-down(xl) {
            font-size: 48px;
          }

          @include media-breakpoint-down(lg) {
            font-size: 40px;
          }

          @include media-breakpoint-down(md) {
            font-size: 35px;
          }

          @include media-breakpoint-down(sm) {
            font-size: 30px;
          }
        }
      }
    }
  }

  .owl-carousel {
    .owl-dots {
      position: absolute;
      bottom: 200px;
      left: 0;
      transform: translate(0, 0);
      margin: 0 0 3px 0;

      button.owl-dot {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.6);

        &:hover,
        &:focus,
        &:active,
        &.active {
          background: rgba(255, 255, 255, 0.6);
          transform: scale(0.75, 0.75);
        }

        &.active {
          background: $primary-color;
          box-shadow: $primary-color 0 0 0 3px;
        }
      }
    }
  }

  @include media-breakpoint-down(xl) {
    .hero-cont {
      .aside .sub-title {
        font-size: 2rem;
        line-height: 2.313rem;
      }
    }

    .owl-carousel {
      .owl-dots {
        bottom: 150px;
      }
    }
  }

  @include media-breakpoint-down(md) {
    .slide-item {
      .hero-cont {
        font-size: $font-size-18;
        line-height: $line-height-24;
      }
    }

    .hero-cont {
      font-size: $font-size-18;
      line-height: $line-height-24;

      h1 {
        font-size: $font-size-32;
      }
    }

    .owl-carousel {
      .owl-dots {
        bottom: 140px;
      }
    }
  }

  /* Video fallback: Static image placeholder image on mobile devices */
  .slider__background--video+.slider__background {
    display: none;
  }

  .row {
    .slider__background--video+.slider__background {
      display: block !important;
    }
  }

  .slider__background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    width: auto;
    height: auto;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  /*********************************************************************/
}

@include media-breakpoint-down(md) {
  main>.hero-main .slide-item.video-item {

    // video source,
    // .iframe-video,
    .mp4-video {
      display: none;
    }
  }

  .hero-main .figure .mp4-video.video-fallback-image,
  .hero-main .figure .iframe-video.video-fallback-image {
    display: none !important;
  }

  .row {

    .iframe-video,
    .mp4-video {
      display: block !important;
    }
  }
}

@include media-breakpoint-down(lg) {
  .row {

    .iframe-video,
    .mp4-video {
      width: 100vw;
    }
  }
}

.row {
  .video-item {
    min-height: 300px;

    @include media-breakpoint-down(md) {
      min-height: 180px;
    }

    .sub-title {
      display: none;
    }
  }

  .iframe-video,
  .mp4-video {
    width: 50vw;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    aspect-ratio: 1.7777777778;
  }
}

.hero-main .owl-carousel .slide-item {
  height: $main-header-height;

  /*Change only the variable, do not replace it with a value, because it is used on another place*/
  @include media-breakpoint-down(xl) {
    &.video-item {
      height: auto !important;
      min-height: auto !important;
      margin-top: 70px;

      .figure {
        left: 0;
        top: 0;
        transform: translate(0, 0);
        height: 100%;
        padding-bottom: initial;
        width: 100%;
        position: static;
        float: none;
        overflow: visible;

        iframe {
          position: static;
          width: 100%;
          height: 100%;
          transform: translate(0px, 0px);
        }
      }
    }

  }

  .hero-cont {
    @include media-breakpoint-down(xl) {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 0;
      transform: translate(-50%, -50%);

      h1 {
        padding-bottom: 0;
      }
    }

    @include media-breakpoint-down(sm) {
      position: static;
      top: 0;
      left: 0;
      padding: 0;
      transform: translate(0%, 0%);
      margin-top: 0px;

      h1 {
        font-size: 2.2rem;
      }

    }
  }
}

.hero-main .owl-carousel.image-slider .slide-item {
  height: $main-header-height;

  /*Change only the variable, do not replace it with a value, because it is used on another place*/
  @include media-breakpoint-down(xl) {
    &.image-item {
      height: auto !important;
      min-height: auto !important;
      margin-top: 70px;

      .figure {
        left: 0;
        top: 0;
        transform: translate(0, 0);
        height: 100%;
        padding-bottom: initial;
        width: 100%;
        position: static;
        float: none;
        overflow: visible;

        img {
          position: static;
          width: 100%;
          height: auto;
          transform: translate(0px, 0px);
        }
      }
    }

  }

  &.video-item {
      height: 72.5vh;
  }
}

/* Hero - Inner // Used on sample.html // */
.hero-inner {
  width: 100%;
  min-height: 750px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    width: 100%;
    height: 375px;
    float: left;
    background: $gradient-hero-blue;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0.9;
    display: none;
  }

  .figure {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    margin: 0;

    img {
      width: auto;
      height: auto;
      max-width: inherit;
      max-height: 100%;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    &:before {
      content: "";
      width: 100%;
      height: 375px;
      float: left;
      background: $gradient-hero-blue;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      opacity: 0.9;
    }
  }

  .hero-cont {
    width: 100%;
    float: left;
    font-size: $font-size-18;
    color: $primary-color;
    line-height: $line-height-26;
    text-align: center;
    position: relative;
    z-index: 2;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
    }

    h1 {
      font-family: $font-family-primary;
      text-transform: uppercase;
    }

    p,
    li {
      a {
        color: $primary-color;
      }
    }

    .sub-title {
      font-family: $font-family-primary;
      font-weight: $font-weight-bold;
      font-size: $font-size-32;
      color: $primary-color;
      line-height: $line-height-38;
      padding-bottom: 5px;
    }

    .aside {
      width: 100%;
      float: none;
      display: inline-block;
      vertical-align: top;
      padding: 0;
      margin: 0;
    }
  }

  @include media-breakpoint-down(xl) {
    min-height: 650px;

    .hero-cont {
      .sub-title {
        font-size: $font-size-26;
        line-height: $line-height-34;
      }
    }
  }

  @include media-breakpoint-down(md) {
    min-height: 400px;

    &:before {
      height: 383px;
    }

    .figure {
      &:before {
        height: 383px;
      }
    }

    .hero-cont {
      font-size: $font-size-18;
      line-height: $line-height-24;

      .sub-title {
        font-size: $font-size-18;
        line-height: $line-height-26;
      }
    }
  }
}

/* Hero - Inner2 // Used on sample.html // */
.hero-inner2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    width: 100%;
    height: 70%;
    float: left;
    background: $gradient-hero-white;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
  }

  .figure {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    margin: 0;

    img {
      width: auto;
      height: auto;
      max-width: inherit;
      max-height: inherit;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    &:before {
      content: "";
      width: 100%;
      height: 70%;
      float: left;
      background: $gradient-hero-white;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
    }
  }

  .hero-cont {
    width: 100%;
    float: left;
    font-size: $font-size-18;
    color: $primary-color;
    line-height: $line-height-26;
    text-align: center;
    position: relative;
    z-index: 2;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
    }

    h1 {
      font-family: $font-family-primary;
      text-transform: uppercase;
    }

    p,
    li {
      a {
        color: $primary-color;
      }
    }

    .sub-title {
      font-family: $font-family-primary;
      font-weight: $font-weight-bold;
      font-size: $font-size-32;
      color: $primary-color;
      line-height: $line-height-38;
      padding-bottom: 5px;
    }

    .aside {
      width: 100%;
      float: none;
      display: inline-block;
      vertical-align: top;
    }
  }

  @include media-breakpoint-down(xl) {
    .hero-cont {
      .sub-title {
        font-size: $font-size-26;
        line-height: $line-height-34;
      }
    }
  }

  @include media-breakpoint-down(md) {
    .hero-cont {
      font-size: $font-size-18;
      line-height: $line-height-24;

      .sub-title {
        font-size: $font-size-18;
        line-height: $line-height-26;
      }
    }
  }
}

/* Helper */
.object-position-bottom {
  object-position: bottom;
}

.object-position-top {
  object-position: top;
}

.filter-elements .owl-carousel,
.tx-wabs-attractions {
  .filter-element .slider-content-icon {
    height: 60px;
    width: 60px;
    margin-bottom: 0.5rem;
  }
}

.attraction-slider .owl-stage-outer {
  margin-bottom: 30px;
}

@include media-breakpoint-down(xxl) {
  .attraction-slider .owl-carousel .owl-nav {

    button.owl-next::before,
    button.owl-prev::before {
      line-height: 63px;
    }
  }
}

#accelerate-slider,
.hero-main {
  .owl-stage {
    display: block;
  }
}

#accelerate-slider {
  .owl-item {
    margin-bottom: 0;

    img {
      aspect-ratio: 5/3;
      object-fit: cover;
    }
  }
}

.image-slider {
  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  }
}

//special for header slider
.hero-main .owl-carousel .owl-item {
  margin-bottom: 0;
}

.hero-main .owl-carousel .slide-item.video-item .figure iframe.iframe-video+picture.slider__background {
  display: none;
}

.hero-main .owl-carousel .slide-item .figure {

  @include media-breakpoint-down(xl) {
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 767.98px) {
  .owl-carousel .owl-dots {
    display: none !important;
  }

}

@include media-breakpoint-down(sm) {

  .hero-main .owl-carousel .slide-item .hero-cont:not(.hero-more-cont) h1,
  .hero-main .owl-carousel .slide-item .hero-cont:not(.hero-more-cont) .sub-title {
    color: #000 !important;
    margin-top: 40px;
  }
}

.mobile-slider-five-col,.mobile-slider-four-col,.mobile-slider-three-col {
  .row-cols-sm-2>* {
    @include media-breakpoint-down(md) {
      width: 100%;
    }
  }
  .row {
    &.owl-carousel {
      @include media-breakpoint-down(md) {
        --bs-gutter-x: 0rem;
      }
      .owl-item {
        .col-sm-6 {
          @include media-breakpoint-down(md) {
            width: 100%;
          }
        }
      }
    }
  }
}

.mobile-slider-multi-row [class*="col-"] {
    @include media-breakpoint-down(md) {
      width: 100%;
    }
}