nav {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.39, 1.45);
}

nav.nav-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.39, 1.45);
  box-shadow: none !important;
  pointer-events: none;
}

ul.menu.active {
  height: 100vh;
  overflow-y: auto;
}

nav .menu,
nav .menu.active {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  padding: 0.5rem 1.25rem;
}

.menu .logo {
  padding: 0;
  list-style: none;
}

.full .logo,
.compact .logo {
  height: 2.25rem;
  width: 8rem;
}

.logo a {
  background-image: url("/assets/templates/images/logo.png");
  background-position: left;
  background-size: contain;
  height: 100%;
  width: 100%;
  display: inline-block;
  background-repeat: no-repeat;
  color: #fff;
}

.phone-mobile a::before {
  content: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.32667 2.94444C4.4 4.03222 4.58333 5.09556 4.87667 6.11L3.41 7.57667C2.90889 6.11 2.59111 4.55778 2.48111 2.94444H4.32667M16.3778 17.6356C17.4167 17.9289 18.48 18.1122 19.5556 18.1856V20.0067C17.9422 19.8967 16.39 19.5789 14.9111 19.09L16.3778 17.6356M5.5 0.5H1.22222C0.55 0.5 0 1.05 0 1.72222C0 13.1989 9.30111 22.5 20.7778 22.5C21.45 22.5 22 21.95 22 21.2778V17.0122C22 16.34 21.45 15.79 20.7778 15.79C19.2622 15.79 17.7833 15.5456 16.4144 15.0933C16.2922 15.0444 16.1578 15.0322 16.0356 15.0322C15.7178 15.0322 15.4122 15.1544 15.1678 15.3867L12.4789 18.0756C9.02 16.3033 6.18444 13.48 4.42444 10.0211L7.11333 7.33222C7.45556 6.99 7.55333 6.51333 7.41889 6.08556C6.96667 4.71667 6.72222 3.25 6.72222 1.72222C6.72222 1.05 6.17222 0.5 5.5 0.5Z' fill='var(--primary-color)' /%3E%3C/svg%3E");
  vertical-align: middle;
  display: inline-block;
}

.phone-mobile {
  margin-left: auto; /* Push icon right */
  list-style: none;
  padding-top: 0.35rem;
}

.phone-desktop {
  display: none;
}

.menu .item a,
.menu .selected .submenu .subitem a {
  color: var(--subheadline-color);
}

.menu .item.selected a,
.menu .item.selected .subitem.selected a {
  color: var(--main-color);
}

nav .menu li a,
nav .submenu li a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}

.menu .item a:hover,
.menu .item.selected a:hover,
nav .item.lang a:hover,
.menu .selected .submenu .subitem a:hover {
  color: var(--main-color);
}

nav .item {
  order: 2;
  width: 100%;
  display: none;
  background: #fff;
}

nav .item a {
  padding: 1rem 0 1rem 0;
}

nav .item ~ .item a {
  padding-top: 1rem; /* Set padding for all other items */
}

nav .menu.active {
  box-shadow: 0 2px 24px rgb(0 0 0 / 50%);
}

nav .active .item {
  display: block;
  font-size: 1.15rem;
  border-bottom: 1px solid #deeff2;
}

.submenu {
  display: none;
  list-style-type: none;
}

.subitem a {
  padding: 1.5rem 1.5rem 0.75rem 1.5rem;
}

.subitem:last-of-type a {
  padding-bottom: 0.75rem;
}

.submenu-active .submenu {
  display: block;
}

.has-submenu > a::after {
  content: url("data:image/svg+xml,%3Csvg width='11' height='22' viewBox='0 0 11 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_604_821)'%3E%3Cpath d='M1.41328 8L5.23828 11.7085L9.06328 8L10.2383 9.1417L5.23828 14L0.238281 9.1417L1.41328 8Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_604_821'%3E%3Crect width='10' height='22' fill='%23333333' transform='translate(0.238281)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  padding-left: 0.25rem;
  height: 1.25rem;
}

/* 2nd level padding */
.submenu-active .submenu .subitem {
  padding-left: 1rem;
}

nav .book-button {
  padding-top: 0.75rem;
}

.menu .item.book-button a {
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: var(--text-on-dark);
  background: var(--primary);
}

nav .book-button a:hover {
  opacity: 0.8;
}
li.item.book-button {
  border: none;
}
nav .item.lang {
  padding-top: 2.25rem;
  padding-bottom: 1.5rem;
}

nav .item.lang a {
  justify-content: flex-start;
  line-height: 1.25rem;
  text-transform: uppercase;
}

nav .lang a::before {
  content: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_604_817)'%3E%3Cpath d='M10.992 3C6.576 3 3 6.584 3 11C3 15.416 6.576 19 10.992 19C15.416 19 19 15.416 19 11C19 6.584 15.416 3 10.992 3ZM16.536 7.8H14.176C13.92 6.8 13.552 5.84 13.072 4.952C14.544 5.456 15.768 6.48 16.536 7.8ZM11 4.632C11.664 5.592 12.184 6.656 12.528 7.8H9.472C9.816 6.656 10.336 5.592 11 4.632ZM4.808 12.6C4.68 12.088 4.6 11.552 4.6 11C4.6 10.448 4.68 9.912 4.808 9.4H7.512C7.448 9.928 7.4 10.456 7.4 11C7.4 11.544 7.448 12.072 7.512 12.6H4.808ZM5.464 14.2H7.824C8.08 15.2 8.448 16.16 8.928 17.048C7.456 16.544 6.232 15.528 5.464 14.2V14.2ZM7.824 7.8H5.464C6.232 6.472 7.456 5.456 8.928 4.952C8.448 5.84 8.08 6.8 7.824 7.8V7.8ZM11 17.368C10.336 16.408 9.816 15.344 9.472 14.2H12.528C12.184 15.344 11.664 16.408 11 17.368ZM12.872 12.6H9.128C9.056 12.072 9 11.544 9 11C9 10.456 9.056 9.92 9.128 9.4H12.872C12.944 9.92 13 10.456 13 11C13 11.544 12.944 12.072 12.872 12.6ZM13.072 17.048C13.552 16.16 13.92 15.2 14.176 14.2H16.536C15.768 15.52 14.544 16.544 13.072 17.048V17.048ZM14.488 12.6C14.552 12.072 14.6 11.544 14.6 11C14.6 10.456 14.552 9.928 14.488 9.4H17.192C17.32 9.912 17.4 10.448 17.4 11C17.4 11.552 17.32 12.088 17.192 12.6H14.488Z' fill='%23333333' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_604_817'%3E%3Crect width='22' height='22' fill='%23333333'  transform='translate(0.238281)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  padding-right: 0.25rem;
  height: 1.25rem;
}

nav .submenu .item.lang {
  padding: 0;
}

nav .toggle a i.bars {
  content: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1C0 0.447715 0.447715 0 1 0H21C21.5523 0 22 0.447715 22 1C22 1.55228 21.5523 2 21 2H1C0.447715 2 0 1.55228 0 1Z' fill='%23294C61'/%3E%3Cpath d='M0 11C0 10.4477 0.447715 10 1 10H21C21.5523 10 22 10.4477 22 11C22 11.5523 21.5523 12 21 12H1C0.447715 12 0 11.5523 0 11Z' fill='%23294C61'/%3E%3Cpath d='M0 21C0 20.4477 0.447715 20 1 20H21C21.5523 20 22 20.4477 22 21C22 21.5523 21.5523 22 21 22H1C0.447715 22 0 21.5523 0 21Z' fill='%23294C61'/%3E%3C/svg%3E%0A");
}

nav .toggle a i.close {
  content: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.08009 21.114C0.703934 20.7378 0.703934 20.1279 1.08009 19.7518L20.1504 0.681194C20.5266 0.305037 21.1365 0.305038 21.5126 0.681195V0.681195C21.8888 1.05735 21.8888 1.66722 21.5126 2.04338L11.9774 11.5787L2.44225 21.114C2.0661 21.4901 1.45624 21.4901 1.08009 21.114V21.114Z' fill='%23294C61'/%3E%3Cpath d='M0.681083 0.88617C1.05724 0.510013 1.6671 0.510013 2.04325 0.88617L21.1136 19.9567C21.4898 20.3329 21.4898 20.9428 21.1136 21.3189V21.3189C20.7375 21.6951 20.1276 21.6951 19.7514 21.3189L10.2163 11.7836L0.681083 2.24835C0.304931 1.8722 0.304931 1.26233 0.681083 0.88617V0.88617Z' fill='%23294C61'/%3E%3C/svg%3E%0A");
}

nav .toggle {
  list-style: none;
}

nav .toggle a,
nav .phone-mobile a {
  padding: 0.5rem;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* SMALL DESKTOPS 1024-1365 */
/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (min-width: 1024px) {
  nav {
    position: sticky;
  }

  nav.full .menu {
    padding: 1rem 2rem;
  }

  nav.compact a {
    font-size: 1rem;
  }

  nav.compact,
  nav.compact .menu {
    /*max-height: 3rem;
    padding: 0 2rem;*/
    background: var(--background-light);
  }

  .logo,
  nav.full,
  nav.compact {
    transition: all 0.4s cubic-bezier(0, 1.04, 0.58, 0.88);
  }

  .logo {
    margin-right: auto;
    order: 0;
  }

  .full .logo {
    width: 12rem;
    height: 3rem;
  }

  .compact .logo {
    width: 10rem;
    height: 2.5rem;
  }
  nav .phone-mobile {
    display: none;
  }

  nav .phone-desktop {
    display: inline-block;
    order: 2;
  }

  .menu {
    flex-wrap: nowrap;
    justify-content: flex-end;
    background: none;
    column-gap: 1rem;
  }

  .menu .item {
    display: block;
    padding: 0;
    background: transparent;
    width: auto;
    position: relative;
    font-size: var(--menu-item);
  }

  nav .menu,
  nav .menu.active {
    flex-wrap: nowrap;
  }

  .menu .item ~ .item a,
  .menu .item a {
    text-underline-offset: 1rem;
    padding: 0;
  }

  .menu .submenu-active .submenu {
    display: block;
    position: absolute;
    top: 3rem;
    left: -1.5rem;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: auto;
  }

  .compact .menu .submenu-active .submenu {
    background: rgba(77, 77, 79, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: auto;
  }
  nav .toggle {
    display: none;
  }

  nav .item.lang {
    padding: 1.25rem 2rem 1.5rem 0;
  }

  .menu .submenu-active .submenu .subitem {
    padding-left: 0;
    width: max-content;
  }

  .menu .item a,
  .menu .selected .submenu .subitem a {
    font-weight: normal;
    color: var(--subheadline-color);
    border: none;
    cursor: pointer;
  }

  .menu .item a:hover,
  .menu .item.selected a:hover,
  nav .item.lang a:hover,
  .menu .selected .submenu .subitem a:hover {
    color: var(--main-color);
  }

  .menu .item.selected a {
    color: var(--subheadline-color);
    border-bottom: 2px solid var(--main-color);
  }

  .menu .item.selected .subitem.selected a {
    color: var(--main-color);
    border: none;
  }

  .menu .item .submenu .subitem a {
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
  }

  .menu .item .submenu .subitem:first-of-type a {
    padding-top: 1.5rem;
  }

  .menu .item .submenu .subitem:last-of-type a {
    padding-bottom: 1.5rem;
  }

  .menu .item.book-button a {
    padding: 0.5rem 1rem;
    text-align: center;
  }

  .compact .menu .item.book-button a {
    padding: 0.25rem 1rem;
  }

  .menu li a,
  .submenu li a {
    justify-content: flex-start;
  }

  .has-submenu > a::after {
    content: url("data:image/svg+xml,%3Csvg width='6' height='5' viewBox='0 0 6 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.705 0.368774L3 2.65877L5.295 0.368774L6 1.07377L3 4.07377L-3.08165e-08 1.07377L0.705 0.368774Z' fill='%23294C61'/%3E%3C/svg%3E%0A");
    padding-left: 0.25rem;
    position: relative;
    top: -0.15rem;
  }

  nav .lang a::before {
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM16.92 6H13.97C13.65 4.75 13.19 3.55 12.59 2.44C14.43 3.07 15.96 4.35 16.92 6ZM10 2.04C10.83 3.24 11.48 4.57 11.91 6H8.09C8.52 4.57 9.17 3.24 10 2.04ZM2.26 12C2.1 11.36 2 10.69 2 10C2 9.31 2.1 8.64 2.26 8H5.64C5.56 8.66 5.5 9.32 5.5 10C5.5 10.68 5.56 11.34 5.64 12H2.26ZM3.08 14H6.03C6.35 15.25 6.81 16.45 7.41 17.56C5.57 16.93 4.04 15.66 3.08 14ZM6.03 6H3.08C4.04 4.34 5.57 3.07 7.41 2.44C6.81 3.55 6.35 4.75 6.03 6ZM10 17.96C9.17 16.76 8.52 15.43 8.09 14H11.91C11.48 15.43 10.83 16.76 10 17.96ZM12.34 12H7.66C7.57 11.34 7.5 10.68 7.5 10C7.5 9.32 7.57 8.65 7.66 8H12.34C12.43 8.65 12.5 9.32 12.5 10C12.5 10.68 12.43 11.34 12.34 12ZM12.59 17.56C13.19 16.45 13.65 15.25 13.97 14H16.92C15.96 15.65 14.43 16.93 12.59 17.56ZM14.36 12C14.44 11.34 14.5 10.68 14.5 10C14.5 9.32 14.44 8.66 14.36 8H17.74C17.9 8.64 18 9.31 18 10C18 10.69 17.9 11.36 17.74 12H14.36Z' fill='%23294C61'/%3E%3C/svg%3E%0A");
    padding-right: 0.5rem;
  }

  .phone-desktop a::before {
    content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.54 2.5C3.6 3.39 3.75 4.26 3.99 5.09L2.79 6.29C2.38 5.09 2.12 3.82 2.03 2.5H3.54ZM13.4 14.52C14.25 14.76 15.12 14.91 16 14.97V16.46C14.68 16.37 13.41 16.11 12.2 15.71L13.4 14.52ZM4.5 0.5H1C0.45 0.5 0 0.95 0 1.5C0 10.89 7.61 18.5 17 18.5C17.55 18.5 18 18.05 18 17.5V14.01C18 13.46 17.55 13.01 17 13.01C15.76 13.01 14.55 12.81 13.43 12.44C13.33 12.4 13.22 12.39 13.12 12.39C12.86 12.39 12.61 12.49 12.41 12.68L10.21 14.88C7.38 13.43 5.06 11.12 3.62 8.29L5.82 6.09C6.1 5.81 6.18 5.42 6.07 5.07C5.7 3.95 5.5 2.75 5.5 1.5C5.5 0.95 5.05 0.5 4.5 0.5Z' fill='%23294C61'/%3E%3C/svg%3E%0A");
    vertical-align: middle;
    display: inline-block;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------ */
/* MEDIUM DESKTOPS 1366-1559 */
/* ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (min-width: 1366px) {
  .full .logo {
    width: 12rem;
    height: 3rem;
  }

  nav .menu,
  nav .menu.active {
    column-gap: 3rem;
  }
}
