.hero-main {
  //margin-top: 147px;

  .figure:before {
    display: none;
  }

  /*Image Slider Color Overlay*/
  .gradient-overlay-bottom,
  .gradient-overlay-top-bottom {
    .figure:before {
      background: transparent linear-gradient(180deg, #1a4e9a00 0%, #1a4e9a 100%);
      opacity: 0.6;
      display: block;
    }
  }

  .attraction-details {
    @include media-breakpoint-down(md) {
      height: 50vh;
    }
  }

  .slide-item,
  &.attraction-details>.figure {
    @include media-breakpoint-down(md) {
      height: 50vh;
    }

    @include media-breakpoint-up(lg) {
      &::before {
        display: block;
        opacity: 1;
        content: ' ';
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 16%)
      }
    }

    .hero-cont {

      /*Image Slider Title*/
      h1 {
        font-weight: $font-weight-black;
        letter-spacing: 0;
      }

      .sub-title {
        font-weight: $font-weight-bold;
        font-size: $font-size-32;
        line-height: $line-height-38;
        text-transform: none;
        letter-spacing: 0;

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

      .aside {
        padding: 0 8%;
      }

      .content-header-container {
        .header-subtitle {
          background: #C81511;
        }

        .header-title {
          background: #2E2F82;
        }

        .header-button {
          background: #C81511;
          border: none;
          color: $primary-color;
          text-transform: none;
        }
      }
    }
  }

  /* Slider Dots big & active bigger */
  .owl-carousel .owl-dots button.owl-dot {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.6);

    &.active {
      background: #ffffff;
      box-shadow: #ffffff 0 0 0 6px;
      width: 14px;
      height: 14px;
    }

    &:hover {
      transform: none;
    }
  }
}

/* Owl - Nav */
.owl-carousel {
  .owl-nav {

    button.owl-prev,
    button.owl-next {
      border-color: $tertiary-color;

      &:before {
        color: $tertiary-color;
        background: none;

        @include media-breakpoint-down(xxl) {
          line-height: 60px;
          box-shadow: none;
          background: white;
        }

        @include media-breakpoint-down(lg) {
          line-height: 4rem;
        }

        @include media-breakpoint-down(md) {
          line-height: 53px;
        }
      }

      &:hover,
      &:focus,
      &:active {
        border-color: #1dabeb;

        &:before {
          color: #1dabeb;
        }
      }
    }

  }
}

/* Owl - Dots */
.owl-carousel {
  .owl-dots {
    button.owl-dot {
      background: $tertiary-color;
      opacity: 0.6;

      &:hover,
      &:focus,
      &:active,
      &.active {
        background: $tertiary-color;
        opacity: 1;
      }

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

.hero-inner .hero-cont h1 {
  text-shadow: 0 0 10px #00000080;
}

.hero-main {
  margin-top: 90px;

  .owl-carousel {
    .owl-nav {

      button.owl-prev {
        left: 20px;
      }

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

    .slide-item {
      height: auto;
      min-height: auto;

      .figure {
        position: static;
        float: none;

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

      .hero-cont {
        position: absolute;
        top: 50%;
        left: 0;
        padding-top: 0;
        transform: translateY(-50%);
        padding: 0px 110px;
      }
    }
  }
}

@media (max-width: 1199.98px) {
  .hero-main .owl-carousel .owl-dots {
    bottom: 90px;
  }

  .hero-main .owl-carousel.image-slider .slide-item.image-item {
    margin-top: 0px;
  }
}

@media (max-width:1023.98px) {
  .hero-main .owl-carousel .owl-dots {
    bottom: 60px;
  }
}

@media (max-width: 767.98px) {
  .hero-main .owl-carousel .owl-dots {
    bottom: 220px;
  }

  .hero-main .owl-carousel .slide-item .hero-cont {
    padding: 0px 0px;
  }

  .container .py-4 .owl-carousel.center-large .owl-item .item[style="padding-bottom: 50px;"] {
    padding-bottom: 0px !important;
  }

}

@media (max-width: 575.98px) {

  .hero-main .owl-carousel .slide-item .hero-cont h1,
  .hero-main .owl-carousel .slide-item .hero-cont .h1 {
    color: #ffffff;
    margin-top: 0px;
  }
}

@media (max-width: 393.98px) {
  .hero-main .owl-carousel .owl-dots {
    bottom: 249px;
  }
}