.header-main {
  .nav-wrap {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    @include media-breakpoint-down(xl) {
      &:before {
        background: white;
        opacity: 0.4;
      }
    }
  }

  .nav-bar {
    @include media-breakpoint-down(xl) {
      margin-top: 100px !important;
      padding-top: 0 !important;
      height: 10000px;

      &:before {
        top: 0 !important;
      }
    }
  }

  @include media-breakpoint-down(xl) {
    .overlay-menu {
      height: 10000px;
      top: 100px !important;
      backdrop-filter: none;
    }
  }

  .btn-book {
    @include media-breakpoint-down(xl) {
      width: 40px;
      margin: 0;
      right: 5%;
      top: 50%;
      transform: translate(0px, -50%);

      a {
        padding: 9px 6px;

        span.icon img {
          height: 30px;
          width: 30px;
          max-height: 30px;
          max-width: 30px;
        }
      }
    }
  }

  .alert-wrap2 {
    @include media-breakpoint-down(xl) {

      .inner-wrap {
        p {
          margin: 0 0 0 5%;
        }

        .alert-close-button {
          right: 5%;
        }
      }
    }
  }

  .menu-btn {
    @include media-breakpoint-down(xl) {
      height: 100px;

      .menu-bar,
      .menu-bar::before,
      .menu-bar::after {
        background: $quaternary-color;
      }
    }
  }

  .weather-info {
    @include media-breakpoint-down(md) {
      width: 100%;
      float: right;
      text-align: right;
      margin: 5% -15% 0 0;

      .btn-bx {
        margin: 0 4px 10px 4px;
      }
    }
  }

  .search-box {
    order: 1 !important;
    display: flex;
    align-items: center;
    right: -45px;

    @include media-breakpoint-down(xl) {
      right: 0px;
      top: auto;
      bottom: -50px;
    }

    form {
      background: $quaternary-color;
      border: none;

      input[type="submit"] {
        background: url(/fileadmin/user_upload/svg_icons/LOUPE.svg) no-repeat center center;
      }
    }
  }

  &#header-type-6 {
    #language_menu {
      right: 30px;
      top: 7px;

      @media (max-width: 1699px) {
        right: 10px;
      }

      @media (max-width: 1199px) {
        right: 7px;
        top: 15px;
      }
    }
  }
}


#header-type-6 .navbar {
  .menu-btn {
    height: auto;
  }

  .container {

    .nav-link {
      text-transform: uppercase;
      max-width: 100%;
      transition: max-width 0.4s;

      @include media-breakpoint-down(xl) {
        padding: 20px 0 10px 0;

        .nav-text {
          color: $black;
        }

        &.dropdown-toggle {
          position: relative;

          &::after {
            content: "";
            background: url(/fileadmin/user_upload/svg_icons/streamline-arrow-up-1--arrows-diagrams--48x48.svg);
            border: none;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            right: 0px;
            top: 21px;
            width: 18px;
            height: 18px;
            transform: rotate(180deg);
            transform-origin: center;
            margin-left: 0;
            vertical-align: 0;
            transition: 0.3s all;
          }

          &.show {
            &::after {
              transform: rotate(0deg);
            }
          }
        }
      }

      &.show {
        max-width: 100%;
        width: 100%;
        border-bottom: 3px solid #b23416;
      }

      &:hover {
        @include media-breakpoint-up(xl) {
          background: $secondary-color;
        }

        .nav-text {
          background: none;
        }
      }
    }

    .top-nav-wrapper {
      @include media-breakpoint-down(xl) {
        margin-top: 20px;
      }
    }

    background: #{$primary-color};
    color: $white;

    .btn-booking {
      background: $tertiary-color;
      width: auto;
      margin-left: 60px;

      .icon {
        position: relative;
        top: -1.5px;
      }

      .btn {
        border: none;
        padding: 0px 30px;
      }
    }

    .navbar-brand .brand-nav {
      transform: scale(1);
      padding: 0px 10px;
      display: flex;
      align-items: center;

      img {
        background: radial-gradient(ellipse, #FFFFFF 0%, #FFFFFF7A 50%, #FFFFFF00 70%);
        max-width: 100%;
        height: auto !important;
      }
    }
  }
}

@include media-breakpoint-down(xxl) {
  #header-type-6 .navbar .container .btn-booking {
    background: none;
    text-align: right !important;
    margin-right: 20px;

    .btn {
      background: $tertiary-color;
      border-radius: $border-radius;
    }
  }
}

@include media-breakpoint-down(xl) {
  #header-type-6 .navbar .container .btn-booking {
    margin-right: 60px;
  }
}

@media (max-width: 520px) {
  #header-type-6 .navbar .container .btn-booking {
    margin-right: 70px;
    margin-left: 0px;
  }
}

header#header-type-6 .btn-booking p {
  color: $primary-color;
  font-weight: $font-weight-medium;

  .icon {
    margin-top: -8px
  }
}

#header-type-6 .navbar .container .brand-nav {


  @include media-breakpoint-up(xl) {
    transform: scale(1.13);
  }

  @include media-breakpoint-up(xxl) {
    transform: scale(2);
  }
}

#header-type-6 {
  .menu-btn {

    .menu-bar,
    .menu-bar:before,
    .menu-bar:after {
      background: #000000;
      height: 3px;
    }

    &:after {
      content: "Menu";
      color: $white;
      position: absolute;
      bottom: -8px;
      left: -2px;
      transform: translate(0px, 100%);
      text-transform: uppercase;
      font-size: $font-size-10;
      font-weight: $font-weight-light;
      transition: all 0.75s;
    }
  }

  .menu-btn.active {
    .menu-bar {
      background: none;
    }

    &:after {
      opacity: 0;
      transition: all 0.25s;
    }
  }

  .top-nav {
    background: $quaternary-color;
    float: none;
    height: 50px;
    display: flex !important;
    width: 100%;
    align-items: center;

    @include media-breakpoint-down(xl) {
      display: none !important;
    }

    .park-status-info {
      margin-top: 0px;

      @include media-breakpoint-down(lg) {
        display: none;
      }
    }

    >.row>a {
      display: none;
    }

    .row {
      justify-content: flex-end;
      width: 100%;
    }

    .top-nav-wrapper {
      display: flex;
      justify-content: flex-end;
      padding-right: 20px !important;
      align-items: center;

      @include media-breakpoint-down(lg) {
        width: 100%;
      }

      .top-nav-item {
        margin-bottom: 0px !important;

        .brand-nav {
          position: static;
          top: 0;
          left: 0;
          transform: translate(0%, 0);
          background: transparent;
          border-radius: 0 0 0px 0px;
          width: auto;
          height: auto;
          padding-bottom: 0;

          p {
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            padding: 0px 15px;
          }
        }
      }
    }
  }

  &.header-main.fixed .top-nav {
    margin-top: -50px;
  }
}

h2,
h3 {
  &.ce-headline-center {
    color: $secondary-color;
  }
}

// .hero-inner.hero-main.attraction-details {
//   .hero-cont {
//     padding: 0px 0px;

//     .aside header {
//       padding: 0px 0px;
//     }
//   }
// }

// main>.hero-main {

//   .slide-item.video-item video source,
//   .slide-item.video-item .iframe-video,
//   .slide-item.video-item .mp4-video {
//     display: block;
//   }

//   .owl-carousel {
//     margin-top: 0px;
//   }
// }

// .hero-main {
//   .figure:before {
//     opacity: 0.5;
//   }

//   .hero-cont {
//     .sub-title {
//       font-weight: $font-weight-bold;
//       letter-spacing: 0;
//       font-size: 2.6em;
//       text-transform: capitalize;

//       h2 {
//         font-weight: 700;
//       }
//     }

//     h1 {
//       font-weight: $font-weight-bold;
//       letter-spacing: 0;
//       font-size: 2.6em;
//       text-transform: capitalize;

//       @include media-breakpoint-down(md) {
//         font-size: 2em;
//       }
//     }
//   }

//   @media screen and (max-width: 1199.98px) {

//     .owl-carousel.image-slider {
//       .slide-item.image-item {

//         .hero-cont {
//           top: 70%;

//           .sub-title {
//             font-size: 2rem;

//             h2 {
//               font-size: 1.4em;
//               line-height: 0.8;
//             }

//             h3,
//             .h3 {
//               font-size: 1em;
//               padding-bottom: 0px;
//             }
//           }
//         }
//       }
//     }
//   }
// }

@media (min-width: 1400px) {
  #header-type-6 .navbar .container .brand-nav {
    transform: scale(1.6);
  }
}

@media (max-width: 1199px) {
  #header-type-6 {
    .navbar {

      .offcanvas,
      .offcanvas-backdrop {
        top: 70px !important;

        .navbar-nav {
          .dropdown .dropdown-menu li a {
            white-space: normal;
            display: inline-block;

            &::before {
              top: 7px;
              left: 0;
              transform: translate(0, 0%);
            }
          }
        }
      }

      .container .brand-nav {
        max-width: 240px;

        p {
          color: #000;
          text-align: left;
        }
      }


    }
  }
}
@media (max-width: 767.98px) {
    .header-main .navbar-nav .park-status-info a {
        max-width: initial;
    }
}
@media (max-width: 480px) {
  #header-type-6 .navbar .container .navbar-brand {
    margin: 0 !important;
    width: 45% !important;
    height: auto !important;
  }

  .header-main .language-menu .ff-round.ff-md {
    width: 30px;
    height: 30px;
  }

  .header-main#header-type-6 #language_menu {
    top: 20px;
  }

  #header-type-6 .navbar .container .btn-booking {
    margin-right: 45px;
  }
}

// hero banner image design --------
.hero-inner.hero-main.attraction-details {
  .hero-cont {
    padding: 0;

    .aside {
      header {
        padding: 0;
      }
    }
  }
}

main>.hero-main {
  .slide-item.video-item {

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

  .owl-carousel {
    margin-top: 0;
  }
}

.hero-main {
  .figure {
    &:before {
      opacity: 0.5;
    }
  }

  .hero-cont {
    .content-header-container .header-title {
      padding: 7px 20px;
      h1,
      h2 {
        font-weight: 700;
        letter-spacing: 0;
        font-size: 1.5em;
      }
    }

    .sub-title {
      font-size: 1.125rem !important;
      padding: 0 !important;

      h1,
      h2 {
        font-weight: 700;
        letter-spacing: 0;
        font-size: 3.6em;
        @include media-breakpoint-down(lg) {
          font-size: 3em;
        }

        @include media-breakpoint-down(md) {
          font-size: 1.5em;
          color: #000;
          padding: 20px 0;
        }
      }
    }
  }

  .owl-carousel.image-slider {
    .slide-item {
      &.image-item {
        @include media-breakpoint-down(xl) {
          width: 100%;
          height: auto;
          padding-top: 70px;
          min-height: auto;

          .figure {
            position: static;
            width: 100%;
            height: auto;

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

          .hero-cont {
            width: 100%;
            float: none;
            padding: 0;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        @include media-breakpoint-down(md) {
          .hero-cont {
            position: static;
            top: 60%;
            left: 50%;
            transform: translate(0%, 0%);
            background: #fff;
            color: #000;
          }
        }
      }

      &.video-item {
        @include media-breakpoint-down(xl) {
          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;
          }

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

        @include media-breakpoint-down(md) {
          .hero-cont {
            position: static;
            top: 0%;
            left: 0;
            transform: translateY(0%);
            margin-bottom: 25px;
          }
        }
      }
    }
  }
}

@media (max-width: 1199.98px) {
    #header-type-6.header-main .navbar-nav .nav-item.dropdown .nav-link.show .nav-text {
        color: #000000 !important;
        background-color: transparent !important;
        padding: 0 0px !important;
    }
}