/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-header.css
   Layer: Header System
   Version: 2.4
========================================================= */


/* =========================================================
   1) GLOBAL SAFETY
========================================================= */

/* #region GLOBAL SAFETY */

header.jsc-header .jsc-header__left.e-con,
header.jsc-header .jsc-header__center.e-con,
header.jsc-header .jsc-header__right.e-con,
header.jsc-header .jsc-header__left.e-con > .e-con-inner,
header.jsc-header .jsc-header__center.e-con > .e-con-inner,
header.jsc-header .jsc-header__right.e-con > .e-con-inner{
  min-height: 0 !important;
  height: auto !important;
}

header.elementor-location-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--jsc-z-header) !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* #endregion GLOBAL SAFETY */


/* =========================================================
   2) HEADER SHELL
========================================================= */

/* #region HEADER SHELL */
header.jsc-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1 !important;
  padding: var(--jsc-space-xs) var(--jsc-space-lg);
  height: auto;
  min-height: 0;
  margin: 0;
  margin-block-start: 0;
  background: var(--jsc-surface-header);
  pointer-events: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  box-shadow: 0 1px 0 rgb(var(--jsc-rgb-mirage) / var(--jsc-o-06));
  border: 0;
  overflow: visible;
  transition:
    background var(--jsc-med) var(--jsc-ease),
    backdrop-filter var(--jsc-med) var(--jsc-ease),
    -webkit-backdrop-filter var(--jsc-med) var(--jsc-ease),
    box-shadow var(--jsc-med) var(--jsc-ease);
}

/* #endregion HEADER SHELL */


/* =========================================================
   3) SCROLL SURFACE
========================================================= */

/* #region SCROLL SURFACE */
header.jsc-header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--jsc-rule-hairline);
  background: var(--jsc-divider-dark);
  opacity: 0;
  transition: opacity var(--jsc-med) var(--jsc-ease);
  pointer-events: none;
}

header.jsc-header.jsc-scrolled{
  background: rgb(var(--jsc-rgb-white) / var(--jsc-o-70));
  backdrop-filter: blur(var(--jsc-header-blur));
  -webkit-backdrop-filter: blur(var(--jsc-header-blur)) !important;
  box-shadow:0 2px 18px rgb(var(--jsc-rgb-black) / var(--jsc-o-06));
}

header.jsc-header.jsc-scrolled::after{
  opacity: 1;
}

/* #endregion SCROLL SURFACE */


/* =========================================================
   4) HEADER LAYOUT
========================================================= */

/* #region HEADER LAYOUT */
header.jsc-header .jsc-header__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--jsc-module-col-gap);
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding var(--jsc-med) var(--jsc-ease);
  overflow: visible !important;
  height: auto;
  min-height: 0;
}

/* #endregion HEADER LAYOUT */


/* =========================================================
   5) CTA
========================================================= */

/* #region CTA */
header.jsc-header .jsc-cta-btn{
  flex: 0 0 auto;
  width: auto;
}

header.jsc-header .jsc-cta-btn a.elementor-button{
  background: var(--jsc-accent);
  color: var(--jsc-text-on-light);
  border-radius: var(--jsc-radius-pill);
  border: 1px solid transparent;
  transition:
    background var(--jsc-fast) var(--jsc-ease),
    color var(--jsc-fast) var(--jsc-ease),
    border-color var(--jsc-fast) var(--jsc-ease),
    box-shadow var(--jsc-med) var(--jsc-ease),
    padding var(--jsc-med) var(--jsc-ease),
    transform var(--jsc-fast) var(--jsc-ease);
}



header.jsc-header .jsc-cta-btn a.elementor-button:hover,
header.jsc-header .jsc-cta-btn a.elementor-button:focus-visible{
  background: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-10));
  color: var(--jsc-rgb-mirage);
  border-color: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-95));
  box-shadow:
    0 0 0 1px rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-35)),
    0 10px 28px var(--jsc-shadow-soft);
  transform: translateY(-1px);
}

header.jsc-header .jsc-cta-btn a.elementor-button:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-25)),
    0 6px 16px rgb(var(--jsc-rgb-black) / var(--jsc-o-15));
}

/* #endregion CTA */


/* =========================================================
   6) LOGO
========================================================= */

/* #region LOGO */
header.jsc-header .jsc-nav__logo{
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transform: translateZ(0);
  transition:
    transform var(--jsc-med) var(--jsc-ease),
    opacity var(--jsc-med) var(--jsc-ease);
}

header.jsc-header .jsc-nav__logo:hover{
  transform: translateY(-1px);
  opacity: 0.98;
}

header.jsc-header .jsc-logo__svg{
  display: block;
  width: auto;
  height: 45px;
}

header.jsc-header .jsc-logo__type{
  fill: var(--jsc-text-on-light);
}

header.jsc-header .jsc-logo__accent{
  fill: var(--jsc-accent);
}

header.jsc-header.jsc-scrolled .jsc-logo__type{
  fill: var(--jsc-text-on-light);
}

header.jsc-header.jsc-scrolled .jsc-logo__accent{
  fill: var(--jsc-accent);
}

header.jsc-header .jsc-logo:hover{
  transform: translateY(-1px);
  opacity: 0.98;
}

/* #endregion LOGO */




/* =========================================================
   7) ACCESSIBILITY + FOCUS
========================================================= */

/* #region ACCESSIBILITY + FOCUS */
header.jsc-header .jsc-cta-btn a.elementor-button:focus-visible,
header.jsc-header .jsc-logo:focus-visible{
  outline: var(--jsc-outline-w) solid var(--jsc-focus-strong);
  outline-offset: 4px;
  border-radius: var(--jsc-radius-sm);
}

/* #endregion ACCESSIBILITY + FOCUS */


/* =========================================================
   8) RESPONSIVE
========================================================= */

/* #region RESPONSIVE */
@media (max-width: 1199.98px){
  header.jsc-header{
    padding-inline: 7px var(--jsc-space-lg);
  }

  header.jsc-header .jsc-header__inner{
    padding-top: var(--jsc-space-sm);
    padding-bottom: var(--jsc-space-sm);
  }

  header.jsc-header .jsc-logo__svg{
    height: var(--jsc-box-md);
  }
}

@media (max-width: 767.98px){
  header.jsc-header{
    padding-inline: 3px var(--jsc-space-lg);
  }

  header.jsc-header .jsc-cta-btn a.elementor-button{
    padding: var(--jsc-space-2xs) var(--jsc-space-sm);
  }

  header.jsc-header .jsc-header__inner{
    column-gap: var(--jsc-space-sm) !important;
    padding-top: var(--jsc-space-xs);
    padding-bottom: var(--jsc-space-xs);
  }

  header.jsc-header .jsc-header__center{
    justify-content: flex-end !important;
  }

  header.jsc-header .jsc-logo__svg{
    height: var(--jsc-box-sm);
  }
}

/* #endregion RESPONSIVE */


/* =========================================================
   9) REDUCED MOTION
========================================================= */

/* #region REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  header.jsc-header,
  header.jsc-header *,
  header.jsc-header::after{
    transition: none !important;
    animation: none !important;
  }
}

/* #endregion REDUCED MOTION */