/*
 * Source: assets/main.css lines 27216-27750
 * Purpose: Header, navigation, dropdown and sticky header states
 */


.nav-item-link {
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-style: var(--tw-border-style);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #1a1a1c99;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .2s;
  border-width: 1px;
  border-color: #0000;
  border-radius: 3.40282e38px;
  transition-duration: .2s;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-item-link {
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  }
}

@media (hover: hover) {
  .nav-item-link:is(:where(.group\/nav):hover *) {
    border-color: var(--color-stroke-2);
    background-color: #fcfcfc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .nav-item-link:is(:where(.group\/nav):hover *) {
      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    }
  }

  .nav-item-link:is(:where(.group\/nav):hover *) {
    color: var(--color-secondary);
  }
}

.nav-item-link:where(.dark, .dark *) {
  color: #fcfcfc99;
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-item-link:where(.dark, .dark *) {
    color: color-mix(in oklab, var(--color-accent) 60%, transparent);
  }
}

@media (hover: hover) {
  .nav-item-link:is(:where(.group\/nav):hover *):where(.dark, .dark *) {
    border-color: var(--color-stroke-7);
    color: var(--color-accent);
    background-color: #0000;
  }
}

.nav-item-link-border {
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: 100%;
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #1a1a1c99;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .2s;
  transition-duration: .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-item-link-border {
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  }
}

@media (hover: hover) {
  .nav-item-link-border:is(:where(.group\/nav):hover *) {
    color: var(--color-secondary);
  }
}

.nav-item-link-border:before {
  content: var(--tw-content);
  content: var(--tw-content);
  bottom: calc(var(--spacing) * 0);
  content: var(--tw-content);
  left: calc(var(--spacing) * 0);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  transform-origin: 100%;
  content: var(--tw-content);
  --tw-scale-x: 0%;
  width: 100%;
  height: 1px;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  content: var(--tw-content);
  background-color: var(--color-secondary);
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .5s;
  content: var(--tw-content);
  --tw-content: "";
  content: var(--tw-content);
  transition-duration: .5s;
  position: absolute;
}

@media (hover: hover) {
  .nav-item-link-border:hover:before {
    content: var(--tw-content);
    transform-origin: 0;
    content: var(--tw-content);
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

.nav-item-link-border:where(.dark, .dark *) {
  color: var(--color-accent);
}

@media (hover: hover) {
  .nav-item-link-border:is(:where(.group\/nav):hover *):where(.dark, .dark *) {
    color: var(--color-accent);
  }
}

.nav-item-link-border:where(.dark, .dark *):before {
  content: var(--tw-content);
  background-color: var(--color-white);
}

.nav-item-link-white {
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: 100%;
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-accent);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .2s;
  transition-duration: .2s;
  display: flex;
  position: relative;
}

@media (hover: hover) {
  .nav-item-link-white:is(:where(.group\/nav):hover *) {
    color: var(--color-accent);
  }
}

.nav-item-link-white:before {
  content: var(--tw-content);
  content: var(--tw-content);
  bottom: calc(var(--spacing) * 0);
  content: var(--tw-content);
  left: calc(var(--spacing) * 0);
  content: var(--tw-content);
  content: var(--tw-content);
  height: 1px;
  width: calc(var(--spacing) * 0);
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .3s;
  content: var(--tw-content);
  --tw-content: "";
  content: var(--tw-content);
  transition-duration: .3s;
  position: absolute;
}

@media (hover: hover) {
  .nav-item-link-white:is(:where(.group\/nav):hover *):before {
    content: var(--tw-content);
    content: var(--tw-content);
    background-color: var(--color-accent);
    width: 100%;
  }
}

.nav-item-link-light {
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-style: var(--tw-border-style);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #fcfcfc99;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .2s;
  border-width: 1px;
  border-color: #0000;
  border-radius: 3.40282e38px;
  transition-duration: .2s;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-item-link-light {
    color: color-mix(in oklab, var(--color-accent) 60%, transparent);
  }
}

@media (hover: hover) {
  .nav-item-link-light:is(:where(.group\/nav):hover *) {
    border-color: var(--color-stroke-1);
    background-color: #fcfcfc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .nav-item-link-light:is(:where(.group\/nav):hover *) {
      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    }
  }

  .nav-item-link-light:is(:where(.group\/nav):hover *) {
    color: var(--color-accent);
  }
}

.nav-item-link-light:where(.dark, .dark *) {
  color: #fcfcfc99;
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-item-link-light:where(.dark, .dark *) {
    color: color-mix(in oklab, var(--color-accent) 60%, transparent);
  }
}

@media (hover: hover) {
  .nav-item-link-light:is(:where(.group\/nav):hover *):where(.dark, .dark *) {
    background-color: #1a1a1c33;
    border-color: #0000;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .nav-item-link-light:is(:where(.group\/nav):hover *):where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
    }
  }

  .nav-item-link-light:is(:where(.group\/nav):hover *):where(.dark, .dark *) {
    color: var(--color-accent);
  }
}

.show-sidebar {
  --tw-translate-x: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.hide-sidebar {
  --tw-translate-x: 100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.active-menu {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.active-menu:where(.dark, .dark *) {
  color: var(--color-accent);
}

.is-cookie-true {
  top: calc(var(--spacing) * 13.5);
}

.is-cookie-false {
  top: calc(var(--spacing) * 5);
}

.top-nav {
  display: none;
}

.top-nav.visible {
  display: block;
}

.top-nav.hidden {
  display: none;
}

.scroll-header {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  top: calc(var(--spacing) * 2) !important;
}

.scroll-ai-voice-header {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  top: calc(var(--spacing) * 2) !important;
  background-color: #1a1a1ccc !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .scroll-ai-voice-header {
    background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent) !important;
  }
}

.header-two-scroll {
  top: calc(var(--spacing) * 4);
  --tw-backdrop-blur: blur(25px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  background-color: #1a1a1c66;
}

@supports (color: color-mix(in lab, red, red)) {
  .header-two-scroll {
    background-color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
  }
}

.header-two-scroll:where(.dark, .dark *) {
  background-color: #eaeceb1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .header-two-scroll:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-background-12) 10%, transparent);
  }
}

.header-three-scroll {
  padding-inline: calc(var(--spacing) * 0);
}

.header-four-scroll {
  padding-inline: calc(var(--spacing) * 5);
  --tw-backdrop-blur: blur(var(--blur-3xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  background-color: #0006;
}

@supports (color: color-mix(in lab, red, red)) {
  .header-four-scroll {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}

.header-four-scroll:where(.dark, .dark *) {
  background-color: #0000;
}

.header-five-scroll {
  top: calc(var(--spacing) * 4);
  background-color: var(--color-background-1);
  --tw-backdrop-blur: blur(15px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.header-five-scroll:where(.dark, .dark *) {
  background-color: var(--color-background-5);
}

.header-six-scroll {
  top: calc(var(--spacing) * 6);
  background-color: var(--color-background-7);
}

@media (min-width: 48rem) {
  .header-six-scroll {
    top: calc(var(--spacing) * 7);
  }
}

@media (min-width: 64rem) {
  .header-six-scroll {
    top: calc(var(--spacing) * 5);
  }
}

.financial-management-platform-header-scroll {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  top: calc(var(--spacing) * 2) !important;
}

.nav-item {
  position: relative;
}

.nav-item .nav-arrow {
  transition: transform .3s;
}

.nav-item.active .nav-arrow, .nav-item.menu-active .nav-arrow {
  transform: rotate(180deg);
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all .3s;
  transform: translateY(10px);
}

.mega-menu.active, .dropdown-menu.active, .customer-dropdown-menu.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-bridge, .dropdown-menu-bridge {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.nav-item.active .mega-menu-bridge, .nav-item.active .dropdown-menu-bridge {
  opacity: 1;
  pointer-events: auto;
}

.mega-menu.active, .dropdown-menu.active {
  transform: translateY(0);
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  transition: opacity .3s, transform .3s, pointer-events 0s .3s;
}

.mega-menu.active, .dropdown-menu.active, .customer-dropdown-menu.active {
  transition: opacity .3s, transform .3s, pointer-events;
}

.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  z-index: 50;
}

@media (max-width: 1279px) {
  .mega-menu, .dropdown-menu {
    display: none !important;
  }
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes menuSlideOut {
  from {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(10px)scale(.98);
  }
}

.mega-menu.active, .dropdown-menu.active {
  animation: .3s forwards menuSlideIn;
}

.nav-item:focus-within .nav-arrow {
  transform: rotate(180deg);
}

.nav-item:focus-within .mega-menu, .nav-item:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}