.footer-embla .slick-prev,
.footer-embla .slick-next {
  height: 10px;
  width: 10px;
}

.footer-embla-container .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.header-menu a {
  text-decoration: none;
  color: #1f3e3c;
}

.hamburger {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  scale: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: background 0.2s;
  cursor: pointer;
}

.hamburger:is(:focus-visible) {
  outline-color: hsl(320 80% 50% / 0.5);
  outline-offset: 1rem;
  outline-width: 4px;
}

.hamburger svg:first-of-type {
  width: 65%;
}

.hamburger rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.unset rect {
  transform-box: unset;
}
[aria-pressed=true] rect { 
  transition: translate 0.2s, rotate 0.2s 0.3s;
}
rect {
  transition: rotate 0.2s 0s, translate 0.2s 0.2s;
}

[aria-pressed=true] rect:nth-of-type(1) {
  translate: 0 333%;
  rotate: -45deg;
}
[aria-pressed=true] rect:nth-of-type(2) {
  rotate: 45deg;
}
[aria-pressed=true] rect:nth-of-type(3) {
  translate: 0 -333%;
  rotate: 45deg;
}
[aria-pressed=true] svg {
  rotate: 90deg;
  transition: rotate 1s 0.4s;
}
.opac-cov {
  position: fixed;
  top: var(--menu-offset);
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #22222244;
  z-index: 9999999998;
  opacity: 0;
  transition: opacity 1.9s cubic-bezier(0.33, 1, 0.68, 1);
  display: none;
}

.opac-cov.fade-in {
  opacity: 1;
  display: block;
}


.menu-container {
  position: fixed;
  top: var(--menu-offset);
  bottom: 0;
  left: 0;
  z-index: 9999999999;
  pointer-events: none;
  letter-spacing: -0.66px;
}

#triangle {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999999999999;
  width: 100vw;
  height: 100vh;
}

.menu-container .open {
  pointer-events: auto;
}

.navigation--second-menu li {
  padding: 4px 0;
}

.navigation-menu,
.menu-link,
.close-button,
.luggage-button,
.menu-item,
.secondmenu ul,
.luggage-finder {
  cursor: pointer;
}

.menu-link {
  font-weight: 400;
  /* text-decoration: none; */
  color: black;
  position: relative;
  padding-bottom: 5px;
  font-size: 12px;
  transition: color 0.3s ease;
}

.navigation--second-menu .menu-link a{
  /* text-decoration: none; */
}

.navigation--second-menu .menu-link {
  /* text-decoration: none; */
}

.navigation-menu .r1 .main-menu-item {
  color: black;
}

.navigation-menu .r1:hover .main-menu-item {
  color: #666666;
}

.menu-list a{
  /* text-decoration: none; */
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  padding-left: 0px;
  font-size: 12px;
  justify-content: space-between;
}

.navigation-menu .menu-item .menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px; /* Adjust the gap between the text and underline as needed */
  width: 0; /* Set initial width to 0 */
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease-out; /* Add a smooth transition effect for width */
}

.navigation-menu .menu-item:hover .menu-link::after {
  width: 100%; /* Expand the underline on hover */
}

.navigation--second-menu .menu-item .menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px; /* Adjust the gap between the text and underline as needed */
  width: 0; /* Set initial width to 0 */
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease-out; /* Add a smooth transition effect for width */}

.navigation--second-menu .menu-item:hover .menu-link::after  {
  width: 100%; /* Expand the underline on hover */
}

.navigation--second-menu .menu-link {
  font-weight: 400;
  /* text-decoration: none; */
  color: black;
  position: relative;
  padding-bottom: 5px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.navigation--second-menu a {
  /* text-decoration: none; */
}

.navigation--second-menu .menu-link:hover {
  /* text-decoration: none; */
}

.menu-item:hover .menu-arrow {
  opacity: 1; /* Display the arrow on hover */
}

.menu-list
{
  font-weight: 400;
}
/*
.menu-list-links .menu-link {
  color: black;
  transition: color 0.3s ease;
}
*/
/*
.menu-list-links .menu-link:hover {
  color: grey;
}
*/
.july-logo {
  display: none;
}

.navigation-menu {
  position: relative;
  border-right: 1px solid lightgrey;
  padding: 8px 8px;
  width: calc((100vw) / 4);
  background: white;
  height: 100%;
  overflow: scroll;
  border-top: 1px solid black;
}

.navigation--second-menu {
  position: relative;
  border-right: 1px solid lightgrey;
  padding: 8px 8px;
  width: calc((100vw) / 4);
  background: white;
  height: 100%;
  overflow-y: scroll;
  border-top: 1px solid black;
}

.navigation--third-menu {
  border-top: 1px solid black;
  position: relative;
  width: calc((100vw) / 4);
  padding: 8px 8px;
  background: white;
  height: 100%;
}

.menu-list {
  list-style-type: none;
  padding: 10px 0;
  margin: 0;
}

.menu-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  background-color: rgba(0, 0, 0, 0.1);
}

.menu-arrow-left,
.menu-arrow-right {
  width: 24px;
  transition: all 0.3s ease;
}

.menu-arrow-left {
  opacity: 1;
}

.menu-arrow-right {
  transform: rotate(180deg);
}

.secondmenu {
  display: none;
}

.thirdmenu {
  display: none;
}

.menu-item.open a {
  /* text-decoration: none; */
}

.menu-item:hover .secondmenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid lightgrey;
  padding: 10px;
  background-color: #fff;
}

.menu-item:hover .thirdmenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid lightgrey;
  padding: 10px;
  background-color: #fff;
}

.close-button {
  display: inline-block;
  padding: 10px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background-color: transparent;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  text-decoration: unset;
  color: #000;
}

.luggage-button {
  background-color: lightgrey;
  border: none;
  color: black;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}

.r1 {
  font-weight: 400;
}

.menu-item:after {
  display: block;
  margin-top: 5px;
  padding-bottom: 5px;
}

.navigation-container {
  display: flex;
  height: calc(100vh - var(--menu-offset));
}

.navigation-menu-wrapper {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.nmw-1:not(.open) {
  transform: translateX(calc(((100vw) / 4) * -1));
}

.nmw-2:not(.open) {
  transform: translateX(calc(((100vw) / 4) * -2));
}

.nmw-3:not(.open) {
  transform: translateX(calc(((100vw) / 4) * -3));
}

.nmw-1 {
  z-index: 3;
}

.nmw-2 {
  z-index: 2;
}

.nmw-3 {
  z-index: 1;
}

.navigation-menu-wrapper:not(.open) {}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  padding-left: 0px;
  font-size: 16px;
  justify-content: space-between;
}

.luggage-finder {
  position: relative;
  font-size: 12px;
  margin-right: 10px;
}

.luggage-finder-contaner {
  position: absolute;
  padding: 20px 0;
  bottom: 0;
}

.menu-item:not(.open) {
  color: black;
}

.back-button-container {
  display: none;
}

.navigation-container-relative {
  display: flex;
}

.top-center-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 60px;
}

.close-button-container {
  display: flex;
  margin: 0 10px;
}

.mobile-close-button-container {
  display: none;
}

.desktop-close-button-container {
  display: flex;
}

.back-button {
  display: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .mobile-scroll-padding {
    padding-bottom: 72px !important;
  }
  .navigation-menu {
    width: calc((100vw));
  }

  .nmw-1:not(.open) {
    transform: translateX(calc(((100vw)) * -1));
  }

  .nmw-2:not(.open) {
    transform: translateX(calc(((100vw)) * 2));
  }

  .nmw-3:not(.open) {
    transform: translateX(calc(((100vw)) * 3));
  }

  .nmw-1 {
    z-index: 1;
  }

  .nmw-2 {
    z-index: 2;
  }

  .nmw-3 {
    z-index: 3;
  }

  .mobile-close-button-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }

  .desktop-close-button-container {
    display: none;
  }

  .close-button-container {
    margin: 0;
  }

  .navigation-menu-wrapper {
    inset: 0;
    position: absolute;
  }

  .navigation-menu:not(.open) {
    /* display: none; */
  }

  .navigation--second:not(.open) {
    /* display: none; */
  }

  .navigation--third:not(.open) {
    /* display: none; */
  }

  .navigation--second-menu {
    border-top: 1px solid black;
    width: 100%;
    padding: 8px;
  }

  .navigation--third-menu {
    width: 100vw;
    height: 100%;
    margin-top: 0;
  }

  .navigation-container {
    padding: 0;
    position: fixed;
    inset: 0;
    top: var(--menu-offset);
  }

  .navigation-container-relative {
    position: relative;
    height: 100%;
    width: 100%;
  }

  .menu-item {
    padding: 12px 0;
  }

  .menu-item:not(.open) {
    color: black;
  }

  .back-button {
    display: block;
    text-decoration: underline;
    font-weight: 400;
  }

  .back-button-container {
    display: flex;
    width: 90%;
    color: grey;
    font-size: 14px;
    z-index: 2;
    position: absolute;
    align-items: center;
    cursor: pointer;
  }

  .sb-show-main.sb-main-padded {
    padding: 0;
  }

  .close-button-container {
    padding: 20px;
    padding-bottom: 10px;
    justify-content: space-between;
    display: flex;
    width: 90vw;
  }

  .july-logo {
    display: inline-block;
  }

  .menu-list {
    padding: 0;
  }

  .luggage-finder-contaner {
    padding: 0;
  }
}
.desktop-menu-item::before {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0px;
  left: 0;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  z-index: 5;
  background-color: black;
}

.desktop-menu-item:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.expanded-nav-item:before {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0px;
  left: 0;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  z-index: 5;
  background-color: black;
}

.expanded-nav-item:hover:before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.styled-external-link::before {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 6px;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  z-index: 5;
}

.styled-external-link:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}