.mega-menu-custom {
  background-color: $secondary-color;

  .sub-menu-list {
    h3 {
      color: $blue-dark;
      border-bottom: 1px solid $blue-dark;
    }

    ul li a {
      color: $secondary-color;

      &:before {
        display: none;
      }

      &:hover {
        color: $secondary-color;
        filter: brightness(1.1);
      }
    }
  }
}

.dropdown.has-mega-menu .mega-menu-custom .sub-menu-list ul li a {
  color: $secondary-color;
}

.offcanvas {
  background-color: $blue-dark;
}

@include media-breakpoint-up(xl) {
  .dropdown.has-mega-menu .mega-menu-custom .sub-menu-list ul li a {
    color: $secondary-color;
  }

  #header-type-6 .dropdown .dropdown-menu.mega-menu-custom {
    padding: 40px 20px;
    display: flex !important;
  }

  #header-type-6 .mega-menu-custom .sub-menu-list {
    padding: 10px;
  }

  #header-type-6 .mega-menu-custom .sub-menu-list ul {
    display: block;
  }

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

    .menu-bar {

      &:before,
      &:after {
        background: $secondary-color !important;
      }
    }
  }
}

// HomePage tab/mob bug fix
@media screen and (min-width: 1199px) and (max-width: 1549px) {
  #header-type-2 {
    &.header-main {
      .container-fluid {
        nav.navbar.navbar-expand-xl {
          a.navbar-brand {
            width: 12%;
          }

          .offcanvas.offcanvas-start.h-100 {
            .navbar-nav {
              justify-content: left !important;
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(xl) {
  .container-fluid {
    nav.navbar {
      &.navbar-expand-xl {
        .container {
          .menu-btn {
            &.navbar-toggler {
              background: $red-dark;
              border-radius: 50%;
              width: 42px;
              height: 42px;

              span.menu-bar {
                background: $white;
                margin: 10px 9px;
                width: 22.97px;

                &::after,
                &::before {
                  background-color: $white;
                }
              }

              &.active {
                span.menu-bar {
                  background: $background-transparent;
                }
              }
            }
          }

          .btn-booking {
            width: 100%;
            min-width: 120px;

            @include media-breakpoint-down(md) {
              left: 0;
            }

            a.btn {
              padding: 10px 20px !important;

              @include media-breakpoint-down(md) {
                padding: 5px 15px !important;
                right: 10px;
              }
            }
          }
        }
      }
    }
  }

  .footer-main {
    .pre-footer {
      .container:first-child {
        .row {
          .container.footer-container {
            .btn {
              max-width: 250px;
            }
          }
        }
      }
    }
  }
}

.navbar-nav .nav-item.dropdown:nth-child(6) {
  &:hover {
    .dropdown-menu {
      left: -20px;
      width: 230px !important;
    }
  }
}

@media (min-width: 1200px) {
  #header-type-2 {
    &.header-main {
      .navbar {
        .search-box {
          margin: 0px !important;

          form {
            input[type="text"] {
              color: $white !important;
              filter: brightness(1.1);
            }

            transition: width 0.35s ease,
            background-color 0.3s ease;
          }

          &.open,
          &:hover {
            form {
              width: 335px !important;
            }
          }
        }
      }
    }
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu,
  .dropdown>a:focus+.dropdown-menu,
  .dropdown-menu:focus-within {
    width: 280px;
    padding: 2rem 0;
    border-radius: 1rem;
  }
}