/* New header */
.header-nav {
  background-color: #81848D;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  max-width: min(1140px, 90%);
  margin: 0 auto;
  padding: 12px 0;
}

/* header logo */
.header-logo {
  width: 200px;
}

/* header menu */
.header-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;

  margin: 0;
}
.header-menu .header-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;

  text-decoration: none;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 14px;

  padding: 8px 12px;
  border-radius: 6px;

  transition: .2s all ease;
}
.header-menu .header-menu-item .header-menu-item-icon {
  filter: invert(95%) sepia(95%) saturate(20%) hue-rotate(354deg) brightness(105%) contrast(105%);
}
.header-menu .header-menu-item:hover {
  background-color: rgba(255, 255, 255, .3);

  transition: .2s all ease;
}

.header-menu .header-menu-item:hover .header-menu-item-icon {
  transform: rotate(180deg);
}

/* header menu drop down */
.header-menu-dropdown-container {
  position: absolute;
  width: 890px;

  background-color: #FFFFFF;
  
  top: 12%;
  left: 43%;
  
  z-index: 5;

  display: flex;
  justify-content: center;

  border-radius: 6px;
  overflow: hidden;
  padding: 0;

  box-shadow: 0px 0px 16px rgba(0, 0, 0, .1);
  /* pointer-events: none; */

  /* transition */
  /* opacity: 0; */
  visibility: hidden;
  opacity:0;
  transition:visibility 0.3s linear,opacity 0.3s linear;
}
.header-menu-dropdown-container-open {
  /* opacity: 1; */
  visibility: visible;
  opacity: 1;
  transition: all .3s ease;
}

.header-menu-dropdown-container-image {
  width: 45%;
  
  background-image: url("../@components/public/jpg/banners/combo_orbit_comfort_menu.jpg");
  background-position: center;
  background-size: cover;
}
.header-menu-dropdown {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;

}
.header-menu-dropdown-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.header-menu-dropdown-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header-menu-dropdown-item-wrapper a {
  text-decoration: none;
  color: #555;
  font-size: 12px;
  font-weight: 400;
}
.header-menu-dropdown-item-wrapper .header-menu-dropdown-item-title {
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
}
.header-menu-dropdown-item-title,
.header-menu-dropdown-item {
  padding: 4px 8px;
  border-radius: 6px;
}
.header-menu-dropdown-item-title:hover,
.header-menu-dropdown-item:hover {
  background-color: #EEEEEE;
}

/* header buttons */
.header-buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.header-buttons-container a {
  text-decoration: none;
}
.header-buttons-container a button {
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  cursor: pointer;
  transition: .2s all ease;

  margin: 0;
}
.header-buttons-container a button.header-button-primary {
  background-color: #003D68;
}
.header-buttons-container a button {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
}
.header-buttons-container a button.header-button-primary:hover {
  background-color: #005794;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .1);

  transition: .2s all ease;
  transform: scale(1.05);
}
.header-button-primary img {
  width: 20px;
  filter: invert(95%) sepia(95%) saturate(20%) hue-rotate(354deg) brightness(105%) contrast(105%);
}

/* Mobile menu Trigger */
.mobile-menu-trigger {
  display: none;
  
  border-radius: 8px;
  background-color: #003D68;
  padding: 8px;

  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: .2s all ease-in;
}
.mobile-menu-trigger:hover {
  transform: scale(1.1);
  transition: .2s all ease-in;
}
.mobile-menu-trigger .mobile-menu-trigger-img {
  filter: invert(95%) sepia(95%) saturate(20%) hue-rotate(354deg) brightness(105%) contrast(105%);
}

/* mobile menu */
.mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  transform: translateY(100%);
  transition: .2s all ease-in;

  position: fixed;
  overflow-y:scroll;
  overflow-x:hidden;

  inset: 0;
  background-color: #FFFFFF;

  z-index: 5;

  padding: 24px;
}

.mobile-menu-open {
  transform: translateY(0%);
  transition: .2s all ease-in;
}

.mobile-menu-header {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: end;
}

.close-menu {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s all ease-in;
}

.close-menu:hover {
  background-color: #d4d4d8;
  transform: scale(1.1);
  transition: .2s all ease-in;
}

.mobile-menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mobile-menu-item {
  width: 100%;
  border-bottom: 1px solid #003D68;

  padding: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  background-color: #FFFFFF;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 400;

  text-decoration: none !important;
  transition: .2s all ease-in-out !important;
}

.mobile-menu-item:hover {
  background-color: #e4e4e7;

  transition: .2s all ease-in-out;
}

.mobile-menu-submenu {
  transform: translateX(-100%);
  height: 0px;
  transition: .2s all ease;

  width: 100%;

  opacity: 0;
}

.mobile-submenu-open {
  transform: translateX(0%);
  height: 100%;
  transition: .2s all ease;

  opacity: 1;
}

.mobile-submenu-item,
.mobile-submenu-item-header {
  border-bottom: 1px solid #003D68;
  padding: 8px;

  color: #000000 !important;
  
  text-decoration: none !important;
  
  width: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-submenu-item {
  background-color: #f4f4f5;
  font-size: 14px;
  font-weight: 400;
}

.mobile-submenu-item-header {
  background-color: #e4e4e7;
  font-weight: bold;
}

.rotate-icon {
  transform: rotate(180deg);
}

@media (max-width: 1099px) {
  .header-menu {
    display: none;
  }

  .mobile-menu-trigger {
    display: flex;
  }

  .header-menu-dropdown-container {
    display: none;
  }
}

@media (max-width: 736px) {
  .header-buttons-container {
    display: none;
  }

  .header-logo {
    width: 200px;
  }
  .header-menu-dropdown-container {
    display: none;
  }
}