/* Header - Main
----------------------------------------*/
.header-main {
  width: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;

  /* Language Menu */
  .language-menu {
    position: absolute;
    z-index: 99999;
    top: 10px;
    right: 90px;
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    text-decoration: none;

    a {
      width: 100%;
      display: block;
      height: 100%;

      > span {
        display: block;
      }

      &:hover {
        > span {
          border: 1px solid #fff;
          /*ToDo: Hier noch mit Variable die Sekundärfarbe des parks eintragen*/
        }
      }
    }

    li {
      float: left;
      background: lightgrey;
      padding: 5px 15px;
      margin-right: 5px;
      font-size: $font-size-12;
      border-radius: 360px;

      &.active {
        background: white;
      }

      &:before {
        display: none;
      }

      &:hover {
        background: white;
      }
    }

    .ff-round.ff-md {
      width: 40px;
      height: 40px;
    }
  }

  @media (min-width: 1400px) {
    .language-menu {
      top: 37px;
      right: 70px;
    }
  }

  @media (max-width: 1669px) and (min-width: 1552px) {
    .language-menu {
      right: 60px;
    }
  }

  @media (max-width: 1551px) and (min-width: 1400px) {
    .language-menu {
      right: 0;
    }
  }

  @media (max-width: 1399px) {
    .language-menu {
      top: 35px;
      right: calc(4%);
    }
  }

  @include media-breakpoint-down(xl) {
    .language-menu {
      top: 16px;
    }
  }

  @include media-breakpoint-down(xl) {
    .offcanvas,
    .offcanvas-backdrop {
      .offcanvas-body {
        padding: 40px 58px;
      }
    }
  }

  .logo-container {
    height: $header-height;

    img {
      height: $header-height;
    }
  }

  &.fixed {
    position: fixed;
  }

  .container {
    &.small {
      max-width: 1080px;
    }

    @include media-breakpoint-down(xl) {
      max-width: 100%;

      &.small {
        max-width: 100%;
      }
    }

    @include media-breakpoint-up(xxl) {
      &.small {
        max-width: 1200px;
      }
    }

    @include media-breakpoint-down(xxl) {
      &.small {
        .btn-booking {
          .btn {
            width: 45px;
            height: 45px;
            min-width: unset;

            .icon {
              margin-right: unset;
            }

            p {
              // display: none;
            }
          }
        }
      }

      .btn-booking {
        .btn {
          padding: 4px 14px 4px 14px !important;
          border-radius: 360px !important;
          min-width: unset !important;
          width: auto !important;
          height: auto !important;

          .icon {
            // margin-right: unset;
            display: none;
          }

          p {
            // display: none;
            font-size: 14px;
          }
        }
      }
    }

    @include media-breakpoint-down(lg) {
      .btn-booking {
        .btn {
          padding: 6px 14px 6px 14px !important;

          .icon {
            // margin-right: unset;
            // display: block;
            top: 0px;
            height: 20px !important;
            width: 20px !important;
          }

          // p {
          //     display: none;
          // }
        }
      }
    }
  }

  @include media-breakpoint-down(md) {
    .container {
      max-width: 100%;
    }
  }

  .navbar {
    height: $header-height;
    padding: 0;
    z-index: 100;

    @include media-breakpoint-down(xl) {
      height: $header-height-mobile;

      .navbar-brand {
        text-align: center;
        margin: auto !important;
      }

      .offcanvas {
        margin-top: -2px;

        .offcanvas-body {
          padding-bottom: 100px;
        }
      }
    }
  }

  .navbar-nav {
    position: relative;

    li {
      padding: 0;

      &:before {
        content: unset;
      }

      .nav-link {
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        @include media-breakpoint-down(xl) {
          line-height: unset;
          color: $tertiary-color;
          padding: 20px 0;
        }

        .nav-text {
          max-width: 100%;
          white-space: break-spaces;
          text-align: center;
          padding: 0 16px;
          border-radius: 360px;
          font-size: 1.25rem;

          @include media-breakpoint-down(xl) {
            text-align: left;
            transition: 0.3s all;
          }
        }
      }
    }

    // hover effect
    .nav-item {
      .nav-link {
        &:hover {
          .nav-text {
            color: $primary-color;
            background-color: $secondary-color;
          }
        }
      }
    }
  }

  .top-nav {
    width: 100%;
    height: 60px;
    float: left;
    text-align: center;
    background: $quaternary-color;
    opacity: 0.95;
    box-shadow: 0px 0px 30px #000000ab;
    border-radius: 0px 0px 8px 8px;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    position: relative;
    margin-bottom: 10px;

    .brand-nav {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      background: $primary-color;
      border-radius: 0 0 50px 50px;
      width: 150px;
      height: 50px;
      padding-bottom: 3px;

      img {
        height: 90%;
        display: inline-block;
        vertical-align: top;
      }
    }

    .bottom-right {
      position: absolute;
      bottom: 13px;
      right: 29px;

      a {
        font-size: 14px;
        color: $primary-color;
        line-height: 18px;

        &:after {
          background-image: url(/static_assets/Images/Layout_icons/long-arrow-right-white.svg);
        }

        &:hover,
        &:focus,
        &:active {
          color: $primary-color;
          opacity: 0.7;
        }
      }
    }

    &:hover {
      background: $secondary-color;
    }
  }

  .top-nav-active {
    background: $quaternary-color;
    height: 60px;
  }

  &.fixed {
    .top-nav {
      box-shadow: none;
      margin-top: -114px;

      @include media-breakpoint-down(xl) {
        margin-top: -79px;
      }
    }
  }

  .nav-cont {
    width: 100%;
    float: left;
    position: relative;
  }

  .nav-wrap {
    width: 100%;
    height: 120px;
    float: left;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: $box-shadow-box;
    position: relative;
    z-index: 10000;
    margin: 0 0 0 0;

    @include media-breakpoint-down(xl) {
      height: 100px;
      background: none;
      box-shadow: $box-shadow-none;
      margin: 0;

      &:before {
        content: "";
        width: 10000px;
        height: 100%;
        float: left;
        background: $primary-color;
        box-shadow: $box-shadow-box;
        position: absolute;
        top: 0;
        left: -5000px;
      }
    }
  }

  .btn-booking {
    line-height: $header-height;

    .btn {
      min-width: 0px;
      padding: 9px 30px;

      .icon {
        -webkit-mask-position: left center;
        mask-position: left center;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: left center;
        mask-position: left;
        vertical-align: middle;
      }
    }

    @include media-breakpoint-down(xl) {
      margin: 0 5% 0 0;
      line-height: $header-height-mobile;

      .btn {
        padding: 5px;
        min-width: unset;

        .icon {
          margin-right: unset;
          display: none;
        }
      }
    }

    @include media-breakpoint-down(sm) {
      .btn {
        border-radius: 12px;
        padding: 8px 12px;

        p {
          font-size: 14px;
        }
      }
    }
  }

  .search-box {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translate(0%, -50%);
    z-index: 11111;

    @include media-breakpoint-down(xxl) {
      right: -40px;
    }

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

    form {
      width: 40px;
      height: 40px;
      float: left;
      background: $gray-a2;
      @include border-radius($border-radius);
      -webkit-transition: all 0.25s ease-out;
      -moz-transition: all 0.25s ease-out;
      -o-transition: all 0.25s ease-out;
      transition: all 0.25s ease-out;

      select,
      textarea,
      input[type="text"],
      input[type="password"],
      input[type="datetime"],
      input[type="datetime-local"],
      input[type="date"],
      input[type="month"],
      input[type="time"],
      input[type="week"],
      input[type="number"],
      input[type="email"],
      input[type="url"],
      input[type="search"],
      input[type="tel"],
      input[type="color"],
      .uneditable-input {
        position: absolute;
        height: 40px;
        font-family: $font-family-primary;
        font-weight: $font-weight-medium;
        font-size: $font-size-20;
        color: $primary-color;
        line-height: $line-height-24;
        background: none;
        border: none;
        @include border-radius(0);
        box-shadow: $box-shadow-none;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        padding: 0;
        margin: 0;
        opacity: 0;
      }

      ::-webkit-input-placeholder,
      ::-webkit-textarea-placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      ::-moz-placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      ::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      .btn,
      .button,
      input[type="button"],
      input[type="submit"] {
        min-width: inherit;
        width: 40px;
        height: 40px;
        background: url(/static_assets/Images/Layout_icons/search.svg) no-repeat
          center center;
        background-size: 19px auto;
        box-shadow: $box-shadow-none;
        @include border-radius($border-radius);
        border: none;
        text-indent: -9999px;
        z-index: 1;
        padding: 0;
        margin: 0;

        &:hover,
        &:focus,
        &:active,
        &:active:focus,
        &.active,
        &.active:focus {
          background: url(/static_assets/Images/Layout_icons/search.svg)
            no-repeat center center;
          background-size: 19px auto;
        }
      }
    }

    &.btn-disabled {
      form {
        .btn,
        .button,
        input[type="button"],
        input[type="submit"] {
          cursor: not-allowed;
          pointer-events: none;
          opacity: 1;
        }
      }
    }

    &:hover,
    &:focus-visible,
    &.open {
      form {
        width: 335px;
        background: $quaternary-color;

        select,
        textarea,
        input[type="text"],
        input[type="password"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="date"],
        input[type="month"],
        input[type="time"],
        input[type="week"],
        input[type="number"],
        input[type="email"],
        input[type="url"],
        input[type="search"],
        input[type="tel"],
        input[type="color"],
        .uneditable-input {
          opacity: 1;
          padding-left: 40px;
        }
      }
    }

    @include media-breakpoint-down(xl) {
      width: 100%;
      height: 40px;
      float: left;
      position: relative;
      top: 0;
      right: 0;
      order: 1 !important;
      transform: translate(0px, 0px);
      margin-top: 20px;

      form {
        width: 100%;
        background: $quaternary-color;

        select,
        textarea,
        input[type="text"],
        input[type="password"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="date"],
        input[type="month"],
        input[type="time"],
        input[type="week"],
        input[type="number"],
        input[type="email"],
        input[type="url"],
        input[type="search"],
        input[type="tel"],
        input[type="color"],
        .uneditable-input {
          font-size: $font-size-18;
          line-height: $line-height-22;
          padding: 8px 25px 8px 48px;
        }

        .btn,
        .button,
        input[type="button"],
        input[type="submit"] {
          width: 55px;
        }
      }

      &:hover,
      &.open {
        form {
          width: 100%;
          background: $quaternary-color;
        }
      }
    }
  }

  .menu-btn {
    min-width: inherit;
    flex-wrap: wrap;
    align-items: center;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    position: relative;
    z-index: 10;
    padding: 0;
    margin: 0;
    display: none;
    margin-left: 5%;

    .menu-bar {
      width: 31px;
      height: 4px;
      float: left;
      background: $tertiary-color;
      @include border-radius($border-radius);
      text-indent: -99999px;
      -webkit-transition: all 0.25s ease-out;
      -moz-transition: all 0.25s ease-out;
      -o-transition: all 0.25s ease-out;
      transition: all 0.25s ease-out;
      position: relative;
      margin: 10px 0;

      &:before,
      &:after {
        content: "";
        width: 100%;
        height: 4px;
        float: left;
        background: $tertiary-color;
        @include border-radius($border-radius);
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        position: absolute;
        left: 0;
      }

      &:before {
        top: -10px;
      }

      &:after {
        top: 10px;
      }
    }

    &.active {
      .menu-bar {
        background: none;

        &:before,
        &:after {
          top: 0;
        }

        &:before {
          -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
        }

        &:after {
          -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
        }
      }
    }

    @include media-breakpoint-down(xl) {
      display: flex;
    }
  }
}

@include media-breakpoint-down(xxl) {
  #languageLightbox {
    .lightbox {
      overflow: hidden;

      .row {
        flex-direction: column;
      }
    }
  }
}

@include media-breakpoint-down(xl) {
  #header-type-1 .navbar .container .btn-booking .btn {
    width: 100% !important;
    height: auto !important;
    padding: 5px 14px 6px 14px !important;
  }

  #header-type-2 .navbar .container .btn-booking .btn,
  #header-type-5 .navbar .container .btn-booking .btn,
  #header-type-6 .navbar .container .btn-booking .btn {
    width: 100% !important;
    height: auto !important;
  }
}

/* Header Type 1
No full width, Logo bigger than navbar, Tickets Button rectangle: Drayton Manor, ...*/
#header-type-1,
#header-type-5,
#header-type-6 {
  .navbar {
    @include media-breakpoint-up(xl) {
      margin-top: 20px;
    }

    .container {
      background: $primary-color;

      @include media-breakpoint-up(lg) {
        box-shadow: 0px 5px 15px #0000001a;
      }

      .brand-nav {
        text-align: center;
        padding: 6px 0;

        @include media-breakpoint-up(xl) {
          transform: scale(1.5);
          padding: 0;
        }
      }

      .nav-link {
        color: #000000;
      }

      .btn-booking {
        @include media-breakpoint-up(xxl) {
          background: $secondary-color;
          margin-left: 20px;
          transition: all 0.25s;

          &:hover {
            background: $quaternary-color;
          }
        }

        .btn {
          color: $primary-color;

          @include media-breakpoint-up(xxl) {
            background: none;
            width: 100%;
            height: 100%;
            line-height: $header-height;
            padding: 0;
          }

          @include media-breakpoint-down(xxl) {
            background: $secondary-color;
            width: 45px;
            height: 45px;
            padding-top: 10px;
          }

          @include media-breakpoint-down(lg) {
            padding: 6px 14px 6px 14px !important;

            // p {
            //     display: none;
            // }
          }

          .icon {
            background: $primary-color;

            @include media-breakpoint-down(lg) {
              // margin-right: unset;
              // display: block;
              top: 0px;
              height: 20px !important;
              width: 20px !important;
            }
          }
        }
      }
    }
  }
}

.header-main .navbar-nav .nav-item {
  &.dropdown {
    .dropdown-menu {
      @include media-breakpoint-down(xl) {
        padding-left: 20px;
        padding-right: 20px;
      }

      .dropdown-item {
        > a {
          @include media-breakpoint-down(xl) {
            padding: 0;
            text-wrap: auto;
          }
        }
      }
    }
  }
}

#header-type-1 {
  #language_menu {
    @media (max-width: 1199px) {
      right: calc(6.6% + 52px);
    }
  }

  &.header-main .navbar-nav .nav-item {
    &.dropdown {
      .dropdown-menu {
        .dropdown-item {
          > a {
            @include media-breakpoint-down(xl) {
              padding: 0;
            }
          }
        }
      }
    }

    .nav-link {
      @include media-breakpoint-down(xl) {
        padding: 15px 20px 15px 0;
      }

      .nav-text {
        @include media-breakpoint-down(xl) {
          background-color: transparent;
          color: #000000;
          padding: 0;
        }
      }
    }
  }
}

/* Header Type 2
 Full width, small container: Touraine, Cobac, ...*/
#header-type-2 {
  .navbar {
    background: $primary-color;

    @include media-breakpoint-up(lg) {
      box-shadow: 0px 10px 15px #00000008;
    }

    .brand-nav {
      text-align: center;
      padding: 6px 0;

      @include media-breakpoint-up(lg) {
        padding: 15px 0;
      }
    }

    .nav-link {
      color: #000000;
      text-transform: uppercase;
    }

    .btn-booking {
      @include media-breakpoint-up(lg) {
        margin-left: 20px;
      }

      .btn {
        background: $tertiary-color;
        color: $primary-color;

        @include media-breakpoint-down(xl) {
          position: relative;
        }

        @include media-breakpoint-down(lg) {
          width: 45px;
          height: 45px;
        }

        &:hover {
          background: $tertiary-bg;
          box-shadow: none;
        }

        .icon {
          background: $primary-color;

          & + p {
            @include media-breakpoint-up(lg) {
              top: 0;
            }
          }
        }
      }
    }
  }

  &.header-main .navbar-nav .nav-item {
    &.dropdown {
      .dropdown-menu {
        .dropdown-item {
          > a {
            @include media-breakpoint-down(xl) {
              padding: 0;
            }
          }
        }
      }
    }

    .nav-link {
      @include media-breakpoint-down(xl) {
        padding: 15px 20px 15px 0;
      }

      .nav-text {
        @include media-breakpoint-down(xl) {
          background-color: transparent;
          color: #000000;
          padding: 0;
        }
      }
    }
  }
}

/* Header Type 3
Transparent header: Planete sauvage*/
#header-type-3 {
}

/* Header Type 4 */
#header-type-4 {
  .navbar {
    height: 153px;
  }

  .navbar-image {
    margin: 20px 0;
    height: 113px;
  }
}

#header-type-5 {
  .navbar {
    .navbar-nav {
      li.nav-item.dropdown.has-mega-menu {
        .nav-link {
          @include media-breakpoint-down(xl) {
            &.dropdown-toggle {
              .nav-text {
                &:after {
                  content: "";
                  font-family: "Font Awesome 5 Pro";
                  font-weight: 900;
                  font-size: 1.25rem;
                  border: none;
                  position: absolute;
                  right: 0px;
                }
              }

              &.show {
                .nav-text:after {
                  content: "";
                  font-family: "Font Awesome 5 Pro";
                  font-weight: 900;
                  font-size: 1.25rem;
                  border: none;
                  position: absolute;
                  right: 0px;
                }
              }
            }
          }
        }
      }

      li .nav-link .nav-text {
        @include media-breakpoint-down(xl) {
          padding: 0px;
        }
      }
    }
  }
}

#header-type-7 {
  .navbar {
    @include media-breakpoint-up(xl) {
      margin-top: 20px;
    }

    .container {
      background: $primary-color;

      @include media-breakpoint-up(lg) {
        box-shadow: 0px 5px 15px #0000001a;
      }

      .brand-nav {
        text-align: center;
        padding: 6px 0;

        @include media-breakpoint-up(xl) {
          transform: scale(1.5);
          padding: 0;
        }
      }

      .nav-link {
        color: #000000;
      }

      .btn-booking {
        @include media-breakpoint-up(xxl) {
          background: $secondary-color;
          margin-left: 20px;
          transition: all 0.25s;

          &:hover {
            background: $quaternary-color;
          }
        }

        @include media-breakpoint-down(xl) {
          margin-right: 80px;
        }

        .btn {
          color: $primary-color;

          @include media-breakpoint-up(xxl) {
            background: none;
            width: 100%;
            height: 100%;
            line-height: $header-height;
            padding: 0;
          }

          @include media-breakpoint-down(xxl) {
            background: $secondary-color;
            width: 45px;
            height: 45px;
            padding-top: 10px;
          }

          @include media-breakpoint-down(xxl) {
            padding: 0px 14px 6px 14px !important;
          }

          @include media-breakpoint-down(lg) {
            padding: 4px 14px 4px 14px !important;
          }

          .icon {
            background: $primary-color;
          }
        }
      }
    }

    .navbar-brand {
      @media (max-width: 399px) {
        width: 40%;
      }
    }

    .offcanvas-backdrop,
    .offcanvas {
      @include media-breakpoint-down(xl) {
        top: 75px !important;
        padding-bottom: 75px;
      }
    }

    .navbar-nav {
      li.nav-item.dropdown.has-mega-menu {
        ul.dropdown-menu.mega-menu-custom {
          @include media-breakpoint-down(xl) {
            display: none;
          }
        }

        .nav-link {
          @include media-breakpoint-down(xl) {
            &.dropdown-toggle {
              .nav-text {
                &:after {
                  content: "";
                  font-family: "Font Awesome 5 Pro";
                  font-weight: 900;
                  font-size: 1.25rem;
                  border: none;
                  position: absolute;
                  right: 0px;
                  color: #ffffff;
                }
              }

              &.show {
                .nav-text:after {
                  content: "";
                  font-family: "Font Awesome 5 Pro";
                  font-weight: 900;
                  font-size: 1.25rem;
                  border: none;
                  position: absolute;
                  right: 0px;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }

      li .nav-link .nav-text {
        @include media-breakpoint-down(xl) {
          padding: 0px;
          color: #fff;
        }
      }
    }
  }

  .search-box {
    @include media-breakpoint-down(xxl) {
      right: -20px;
    }

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

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

      input[type="submit"] {
        @include media-breakpoint-down(xxl) {
          width: 40px;
          height: 40px;
        }
      }

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

  .language-menu {
    @include media-breakpoint-down(xxl) {
      right: 20px;
    }
  }
}

/* Read - More */
.read-more {
  font-family: $font-family-primary;
  font-weight: $font-weight-bold;
  font-size: $font-size-14;
  line-height: $line-height-18;
  text-transform: uppercase;

  a {
    font-weight: inherit;
    text-decoration: $link-hover-decoration-none;
    position: relative;
    padding-right: 40px;

    &:after {
      content: "";
      width: 26px;
      height: 11px;
      background: url(/static_assets/Images/Layout_icons/long-arrow-right.svg)
        no-repeat right center;
      background-size: auto 11px;
      position: absolute;
      top: 50%;
      right: 0;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }

    &:hover,
    &:focus,
    &:active {
      text-decoration: $link-hover-decoration-underline;

      &:after {
        background-image: url(/static_assets/Images/Layout_icons/long-arrow-right-red.svg);
        animation: arrow 0.5s linear 1;
        -webkit-animation-name: arrow 0.5s linear 1;
      }
    }
  }
}

@include media-breakpoint-down(xl) {
  .hiddenscroll-menu {
    overflow: hidden;
  }
}

/* Alert - Visible */
.alert-visible {
  .header-main {
    .top-nav {
      display: block;
    }

    .alert-wrap2 {
      display: block;

      &.hideElement {
        display: none;
      }
    }

    @include media-breakpoint-down(xl) {
      .overlay-menu {
        top: 160px;
      }

      .nav-bar {
        padding: 160px 0 0 0;

        &:before {
          top: 160px;
        }
      }

      &.fixed {
        .overlay-menu {
          top: 100px;
        }

        .nav-bar {
          padding-top: 100px;

          &:before {
            top: 100px;
          }
        }
      }
    }

    @include media-breakpoint-down(md) {
      .overlay-menu {
        top: 140px;
      }

      .nav-bar {
        padding-top: 140px;

        &:before {
          top: 140px;
        }
      }

      &.fixed {
        .overlay-menu {
          top: 80px;
        }

        .nav-bar {
          padding-top: 80px;

          &:before {
            top: 80px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(xxl) {
  #header-type-2 .navbar .btn-booking .btn {
    position: relative;
  }
}

.header-main[data-convious-wb-pushed="true"] {
  .offcanvas.show,
  .offcanvas-backdrop {
    margin-top: 92px;
  }
}

// @media (max-width: 1023px) {
//     .btn-booking .icon {
//         display: none !important;
//     }
//   }
//   @media (max-width: 1399.98px) {
//     .header-main .container .btn-booking .btn p {
//         display: block;
//     }
//   }
.header-main {
  &#header-type-6 {
    #language_menu {
      right: 30px;
      top: 7px;

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

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

      @media (max-width: 480px) {
        right: 105px;
        top: 20px;
      }
    }

    .navbar {
      .menu-btn {
        height: auto;

        .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;
          display: none;
        }

        &.active {
          .menu-bar {
            background: none !important;
          }

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

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

#header-type-6 {
  .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 {
      @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;
      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;
  }

  @media (max-width: 1199.98px) {
    .navbar-nav {
      .nav-item.has-mega-menu {
        .nav-link {
          &.dropdown-toggle {
            .nav-text:after {
              content: "";
              font-family: "Font Awesome 5 Pro";
              font-weight: 900;
              font-size: 1.25rem;
              border: none;
              position: absolute;
              right: 0px;
              color: black;
            }

            &.show {
              .nav-text:after {
                content: "";
                font-family: "Font Awesome 5 Pro";
                font-weight: 900;
                font-size: 1.25rem;
                border: none;
                position: absolute;
                right: 0px;
                color: black;
              }
            }
          }
        }
      }
    }
  }
}

@mixin header-nav-text($header-id, $text-color, $bg-color, $padding: 0 16px) {
  #{$header-id} {
    &.header-main .navbar-nav .nav-item {
      &.dropdown {
        .nav-link {
          &.show {
            .nav-text {
              @include media-breakpoint-down(xl) {
                color: $text-color !important;
                background-color: $bg-color !important;
                padding: $padding !important;
              }
            }
          }
        }
      }
    }
  }
}

@for $i from 1 through 6 {
  @include header-nav-text(
    "#header-type-#{$i}",
    $primary-color,
    $secondary-color
  );
}