.header-main {

  // .container{
  //   padding:0;
  //   max-width: 100%;
  // }

  .top-nav {
    background: #0186AFD9;
  }

  .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;
      margin: 0 0 0 10%;
      .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;
      }
    }
  }
}