.header-main .menu-btn .menu-bar,
.header-main .menu-btn .menu-bar:before,
.header-main .menu-btn .menu-bar:after {
  background-color: $primary-color;
}

.header-main {
  .offcanvas .offcanvas-body {
    @include media-breakpoint-down(xl) {
      overflow-y: scroll;

      .dropdown-item {
        white-space: inherit;
      }

      .dropdown .dropdown-menu li a:before {
        top: 12px;
      }
    }
  }

  .btn-booking {
    @include media-breakpoint-up(xxl) {
      text-align: end !important;
    }
  }
}

#header-type-2 {
  .top-nav {
    background: $gold;

    .brand-nav {
      background: transparent;
      top: 50%;
      transform: translate(-50%, -50%);
      background: none;
      width: 100%;

      p {
        color: white;
        word-break: keep-all;
        white-space: nowrap;
        text-align: center;
        padding-top: 10px;

        &:hover {
          color: white;
        }
      }
    }

    &:hover {
      filter: brightness(90%);
    }

    &.top-nav-active {
      background: $secondary-cta-bg;

      &:hover {
        filter: brightness(90%);
      }
    }
  }

  @include media-breakpoint-down(lg) {
    &.fixed .park-status-info {
      margin-top: -170px;
    }
  }

  &:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
    background: transparent linear-gradient(180deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
  }

  .navbar {
    box-shadow: none;
    background: unset;
    // margin-bottom: 1rem;

    .brand-nav {
      text-align: left;

      @include media-breakpoint-down(xl) {
        text-align: center;
      }
    }

    .nav-link {
      color: $primary-color;
      max-width: 270px;

      @include media-breakpoint-down(xl) {
        color: $secondary-color;
      }
    }

    .btn-booking {
      @include media-breakpoint-down(xl) {
        margin: 0 5% 0 0;
      }

      .btn {
        border: none;

        &:hover,
        &:active,
        &:focus,
        &:active:focus {
          border: none;
          background: $secondary-color !important;
        }
      }
    }
  }
}

@media (max-width: 1199.98px) {
  .header-main .navbar .offcanvas .offcanvas-body {
    padding-bottom: 180px;
  }

  .header-main.fixed nav.navbar .offcanvas {
    top: 90px !important;
  }
}

.alert-wrap2 {
  @include media-breakpoint-down(xl) {
    border-radius: 0px !important;
  }
}

@media (max-width: 400px) {
  .tx-wabsolute-popup .alert-wrap2 .inner-wrap {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 16px;
    /* reduce excessive right padding */
    padding-left: 16px;
    /* ensure it doesn’t get cut from left */
    white-space: normal;
    /* allow wrapping */
  }

  .tx-wabsolute-popup .alert-wrap2 .inner-wrap p,
  .tx-wabsolute-popup .alert-wrap2 .inner-wrap strong {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    padding-bottom: 42px;
    padding-left: 16px;
  }
}