/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/parent/components/navigation/src/navigation.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap);
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/parent/components/navigation/src/navigation.scss (1) ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
::root {
  --nav-height: 12.8rem;
}

.navigation {
  --nav-bg: transparent;
  --nav-logo-fill: var(--blue-800);
  --nav-link-color: var(--white);
  --nav-link-color--active: var(--cyan-500);
  --nav-link-submenu-color: var(--blue-800);
  --sub-nav-bg: var(--white);
  --row-margin-inline: 4rem;
  position: fixed;
  z-index: 510;
  width: 100%;
  top: 0;
  background-color: var(--nav-bg);
  transition: 0.3s cubic-bezier(0.1, 0.38, 0.5, 0.84);
  overflow-x: clip;
}
.sidebar--is-expanded .navigation {
  z-index: 490;
}
@media (max-width: 767px) {
  .navigation {
    --nav-link-submenu-color: var(--white);
    --sub-menu-item-padding: 1.5rem;
  }
}
@media (min-width: 768px) {
  .nav--is-sticky .navigation, body:has(.twz-hero--form) .navigation {
    --nav-link-color: var(--text-color-dark);
    --nav-link-color--active: var(--cyan-700);
    --nav-bg: var(--navigation-sticky-bg, var(--cyan-500));
  }
}
.navigation:has(.twz-site-switcher.active) {
  --nav-bg: var(--navigation-sticky-bg, var(--blue-800));
}
@media (max-width: 767px) {
  .navigation:has(.twz-site-switcher.active) .navigation__wrapper {
    background-color: var(--blue-800);
  }
}
.navigation:has(.twz-site-switcher.active) .navigation__logo,
.navigation:has(.twz-site-switcher.active) .navigation__row {
  opacity: 0;
}
.navigation__wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(100% - var(--row-margin-inline));
  margin-inline: auto;
  background-color: var(--nav-bg);
  align-items: stretch;
  max-height: 6.5rem;
  transition: background-color 0.2s ease;
}
@media (max-width: 767px) {
  .navigation__wrapper {
    --nav-bg: var(--cyan-500);
    width: 100%;
    max-height: 5rem;
  }
}
.navigation__logo {
  --after-width: 8rem;
  background-color: var(--white);
  position: relative;
  margin-right: var(--after-width);
  padding: 3rem 0;
  transition: 0.2s cubic-bezier(0.1, 0.38, 0.5, 0.84);
  max-width: 12rem;
  align-self: flex-start;
  z-index: 2;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.1));
}
@media (max-width: 767px) {
  .navigation__logo {
    margin-left: calc(var(--row-margin-inline) / 2);
    padding: 2rem 0;
    z-index: 200;
  }
}
.navigation__logo:before {
  content: "";
  background-color: var(--white);
  width: calc(var(--space-to-screen) + 1px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  translate: calc(-100% + 1px) 0;
  z-index: -1;
}
.navigation__logo:after {
  content: "";
  height: 100%;
  width: calc(var(--after-width) + 1px);
  position: absolute;
  top: 0;
  right: 0;
  translate: calc(100% - 1px) 0;
  z-index: -1;
  background: linear-gradient(122deg, var(--white) 0%, var(--white) 50%, transparent 50%, transparent 100%);
}
.navigation__logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.navigation__logo svg {
  flex-shrink: 0;
}
.navigation__logo svg path,
.navigation__logo svg polygon {
  transition: 0.3s ease;
  fill: var(--nav-logo-fill);
}
.navigation__logo .logo {
  transition: 0.3s ease;
}
@media (max-width: 767px) {
  .navigation__logo .logo {
    width: 8.5rem;
    height: auto;
  }
}
.navigation__logo .logo svg {
  width: 100%;
  height: auto;
}
.navigation__row {
  transition: 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.navigation__row menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) {
  display: flex;
  justify-content: flex-end;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .navigation__row > .navigation__list-wrap > :where(menu, ul) {
    gap: 1rem;
  }
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li > a {
  background-color: var(--nav-link-bg);
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children {
  position: relative;
}
@media (max-width: 767px) {
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children {
    --sub-menu-bg: var(--blue-800);
    --offset-chevron: 6rem;
    padding-right: var(--offset-chevron);
  }
}
@media (min-width: 768px) {
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children:hover > a {
    position: relative;
  }
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children:hover > a svg {
    rotate: 180deg;
  }
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children:hover > a svg path {
    fill: var(--nav-link-color--active);
  }
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children:hover .sub-menu {
    display: block;
  }
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children.menu-item--active > a {
  position: relative;
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children.menu-item--active > a svg {
  rotate: 180deg;
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children.menu-item--active .sub-menu {
  display: block;
  pointer-events: unset;
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children > a {
  display: flex;
  gap: 0.7rem;
}
@media (max-width: 767px) {
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children > a {
    justify-content: space-between;
    position: relative;
  }
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children > a svg {
  height: 1em;
  width: 0.7em;
  transition: 0.2s ease;
  position: relative;
  top: 0.2em;
}
@media (max-width: 767px) {
  .navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children > a svg {
    margin-right: calc(-1 * var(--offset-chevron));
    z-index: 3;
  }
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children > a svg path {
  fill: var(--nav-link-color);
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children li a {
  color: var(--nav-link-submenu-color);
}
.navigation__row > .navigation__list-wrap > :where(menu, ul) > li.menu-item-has-children li a:hover {
  color: var(--nav-link-color--active);
}
.navigation .navigation__toggle {
  --togglesize: 5rem;
  order: 1;
  cursor: pointer;
  border: none;
  display: none;
}
@media (max-width: 767px) {
  .navigation .navigation__toggle {
    --hamburger-bg-color: var(--blue-800);
    width: var(--togglesize);
    height: 100%;
    display: block;
    position: relative;
    outline: 0;
    padding: 0;
    background-color: var(--hamburger-bg-color);
  }
}
.navigation .navigation__toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(3.5rem + 1px);
  height: 100%;
  background: linear-gradient(122deg, transparent 0%, transparent 50%, var(--blue-800) 50%, var(--blue-800) 100%);
  translate: calc(-100% + 1px) 0;
}
.navigation .navigation__toggle .hamburger {
  --toggler-bar-width: 2rem;
  --toggler-bar-height: 2px;
  --toggler-bar-spacing: 6px;
  --toggler-bar-color: var(--white);
  -webkit-appearance: none;
  transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 767px) {
  .navigation .navigation__toggle .hamburger {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: var(--toggler-bar-width);
    height: var(--toggler-bar-height);
    padding: 0;
    color: var(--toggler-bar-color);
    background: var(--toggler-bar-color);
    translate: -50% -50%;
    transition: all 0ms 100ms;
  }
  .navigation .navigation__toggle .hamburger:hover {
    outline: none;
  }
  .navigation .navigation__toggle .hamburger:before, .navigation .navigation__toggle .hamburger:after {
    content: "";
    position: absolute;
    transition: bottom 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms 180ms cubic-bezier(0.23, 1, 0.32, 1);
    height: var(--toggler-bar-height);
    background: var(--toggler-bar-color);
  }
  .navigation .navigation__toggle .hamburger::before {
    bottom: var(--toggler-bar-spacing);
    left: 0;
    width: var(--toggler-bar-width);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), bottom 200ms 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .navigation .navigation__toggle .hamburger::after {
    top: var(--toggler-bar-spacing);
    right: 0;
    width: calc(var(--toggler-bar-width) * 0.6);
    transition: rotate 200ms cubic-bezier(0.23, 1, 0.32, 1), top 200ms 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav--is-expanded .navigation .navigation__toggle .hamburger {
    background: rgba(255, 255, 255, 0);
  }
  .nav--is-expanded .navigation .navigation__toggle .hamburger:before, .nav--is-expanded .navigation .navigation__toggle .hamburger:after {
    background: var(--toggler-bar-color);
    width: var(--toggler-bar-width);
    transition: bottom 200ms cubic-bezier(0.23, 1, 0.32, 1), rotate 200ms 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav--is-expanded .navigation .navigation__toggle .hamburger::after {
    top: 0;
    rotate: 45deg;
  }
  .nav--is-expanded .navigation .navigation__toggle .hamburger::before {
    bottom: 0;
    rotate: -45deg;
  }
}
@media (max-width: 767px) {
  .navigation__list {
    display: flex;
    flex-direction: column;
    padding-inline: var(--nav-window-p-inline);
    margin-block: calc(var(--subpanel-height) + 4rem);
  }
}
@media (max-width: 767px) {
  .navigation__list-wrap {
    --theme-fs-base: 2.2rem;
    --nav-overlay-width: 95%;
    --nav-window-bg: var(--cyan-gradient);
    --subpanel-height: 6.5rem;
    --nav-window-p-inline: 5%;
    padding-top: 6rem;
    top: var(--nav-height);
    position: fixed;
    z-index: 150;
    height: calc(100% - var(--nav-height));
    width: 100%;
    left: 0;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
    background: var(--nav-window-bg);
  }
  .navigation__list-wrap:not(:has(.twz-site-switcher.active)) {
    overflow-x: clip;
  }
  .nav--is-expanded .navigation__list-wrap {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}
.navigation__list .sub-menu {
  display: none;
  position: absolute;
  min-width: 20ch;
  padding-top: var(--item-sub-offset, 2rem);
  background-color: var(--sub-menu-bg, var(--sub-nav-bg));
  top: 100%;
  left: var(--sub-menu-item-padding, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .navigation__list .sub-menu {
    pointer-events: none;
    width: calc(100% + var(--offset-chevron));
    display: none;
    overflow: clip;
    padding: 0;
    z-index: 1;
    list-style: none;
    margin: 0;
    position: static;
  }
}
.navigation__list .sub-menu li:first-of-type a {
  padding-top: var(--sub-menu-item-padding, 2rem);
}
.navigation__list .sub-menu li:last-of-type a {
  padding-bottom: var(--sub-menu-item-padding, 2rem);
}
.navigation__list .sub-menu a {
  padding: 1rem var(--sub-menu-item-padding, 2rem);
}
.navigation__list li :where(a, button) {
  --sub-menu-item-padding: 2rem;
  display: inline-block;
  font-size: var(--theme-fs-base);
  color: var(--nav-link-color, #fff);
  text-decoration: none;
  padding: var(--sub-menu-item-padding, 2rem);
}
.navigation__list li :where(a, button)::before {
  content: none;
}
.navigation__list li a:hover {
  color: var(--nav-link-color--active);
}
.navigation__list li button {
  all: unset;
}
.navigation__list li .item-data {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.navigation__list li .menu-subline {
  font-size: 1.2rem;
}
