.header-main {

  .search-box:hover form,
  .search-box.open form {
    width: 200px;
    filter: brightness(1.5);
  }

  .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) {
      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;
      }
    }
  }

  @include media-breakpoint-down(sm) {
    .offcanvas .offcanvas-body {
      // padding: 15px;
    }
  }
}

#header-type-1 {
  @media (max-width: 1199.98px) {
    #language_menu {
      right: 140px;
    }
  }
    @media (max-width: 480px) {
    #language_menu {
      right: 125px;
    }
  }
  @media (max-width: 480px) {
    .navbar .navbar-brand {
      margin: 0 !important;
    }
   
  }
  .navbar {
    background-color: unset;

    @include media-breakpoint-up(xxl) {
      margin-top: 25px;
    }

    .container {
      background: $secondary-bg;

      .nav-text {
        color: $white;
        font-size: 18px;
        font-weight: 700;

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

      @include media-breakpoint-down(xxl) {
        .nav-link {
          padding: 10px 0px;
        }
      }

      @include media-breakpoint-up(xxl) {
        .btn-booking {
          background-color: $tertiary-color;
          border-radius: 0px;

          .btn {
            border-radius: 0px;
            border: none;

            &:hover,
            &:active,
            &:focus,
            &:active:focus {
              border: none;
              background-color: #fdd600;
              border-radius: 0px;
            }
          }
        }
      }

      @include media-breakpoint-down(xxl) {
        .menu-btn {
          height: unset;
        }

        .btn-booking {
          .btn {
            background: $tertiary-color;
            position: relative;

            .icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              @include media-breakpoint-down(lg) {
                position: static;
                transform: translate(0%, 0%);
              }
            }
          }
        }
      }
    }

    @media (max-width: 1199.98px) {
      .btn-booking {
        margin: 0 20px 0 0;
      }
    }
  }
}

@include media-breakpoint-down(xl) {
  .header-main {
    .menu-btn {
      margin-left: 5%;
      height: unset;

      .menu-bar {
        background: white;

        &:before,
        &:after {
          background: white;
        }
      }
    }
  }
}

@media(min-width: 1400px) {
  .header-main {
    .btn-booking {
      line-height: inherit;
    }
  }
}

/* Set GB flag instead of US flag icon -> WITHOUT CHANGING Iso-Code in sites-section in backend */
.fflag-en {
  background-position: center 3.3325%;
}

// #header-type-1 .navbar .container {
//   background: #0c3083;
// }