.elementor-14465 .elementor-element.elementor-element-90deeae{--display:flex;}.elementor-14465 .elementor-element.elementor-element-40b02bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14465 .elementor-element.elementor-element-671b50a .elementor-icon-wrapper{text-align:center;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-14465 .elementor-element.elementor-element-40b02bc{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;--z-index:20;}.elementor-14465 .elementor-element.elementor-element-40b02bc.e-con{--align-self:center;--order:99999 /* order end hack */;}.elementor-14465 .elementor-element.elementor-element-9e2008e{text-align:start;}.elementor-14465 .elementor-element.elementor-element-9e2008e img{width:135px;}.elementor-14465 .elementor-element.elementor-element-671b50a .elementor-icon{font-size:20px;}.elementor-14465 .elementor-element.elementor-element-671b50a .elementor-icon svg{height:20px;}}/* Start custom CSS *//* Vertical Alignment of icon in product name */
.product-chevron i {
    margin-top: 8px;
}

/* ---------- HEADER CONTAINER ---------- */

/* Smooth background transition on full header (Header Desktop Temp) */
.header-hover {
    transition: background-color 0.3s ease;
}

/* Default menu text color (Elementor new Nav Menu) */
.header-hover .e-n-menu-title-text {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* When header is hovered: menu text becomes dark */
.header-hover:hover .e-n-menu-title-text {
    color: #000E1A !important;
}

/* ---------- LOGO SWAP (WHITE <-> BLACK) ---------- */

/* Logo wrapper becomes positioning context and keeps vertical centering */
.logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Remove any default margin from logo widgets */
.logo-wrap .logo-white,
.logo-wrap .logo-black {
    margin: 0;
}

/* Make sure the image widgets sit on top of each other */
.logo-wrap .logo-white,
.logo-wrap .logo-black {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Just to be safe, ensure the inner <img> behaves nicely */
.logo-wrap .logo-white img,
.logo-wrap .logo-black img {
    display: block;
}

/* Initial state: show white logo, hide black logo */
.logo-wrap .logo-white {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.logo-wrap .logo-black {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* On header hover: fade to black logo */
.header-hover:hover .logo-wrap .logo-white {
    opacity: 0;
}

.header-hover:hover .logo-wrap .logo-black {
    opacity: 1;
}

/* ---------- MOBILE MENU TOGGLE ---------- */

.header-hover .elementor-menu-toggle {
    color: #ffffff;
    transition: color 0.3s ease;
}

.header-hover:hover .elementor-menu-toggle {
    color: #000E1A;
}

/* ---------- CTA ICONS & BUTTON TEXT ---------- */

/* Icons (e.g., user icon, arrow in "Schedule a Demo") */
.header-hover .elementor-button-icon,
.header-hover .elementor-icon {
    color: #ffffff;
    transition: color 0.3s ease;
}

.header-hover:hover .elementor-button-icon,
.header-hover:hover .elementor-icon {
    color: #000E1A;
}

/* Button text color for non-solid buttons like "Schedule a Demo" */
.header-hover .elementor-button {
    color: #ffffff;
    transition: color 0.3s ease;
}

.header-hover:hover .elementor-button {
    color: #000E1A;
}

/******** Schedule a Demo – Full Swap ONLY ********/

/* Default state (dark header) */
.header-hover #header-contact-sales {
    color: #ffffff !important;
    border-color: #ffffff !important;
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Hover on entire header */
.header-hover:hover #header-contact-sales {
    color: #000E1A !important;
    border-color: #000E1A !important;
}

/* Force the icon to follow text color */
.header-hover #header-contact-sales .elementor-button-icon {
    color: #ffffff !important;
    fill: currentColor !important;
    transition: color 0.3s ease;
}

.header-hover:hover #header-contact-sales .elementor-button-icon {
    color: #000E1A !important;
    fill: currentColor !important;
}

/**************************************************************
 * DROP-DOWN / MEGA MENU — SMOOTH TRANSITION ONLY
 **************************************************************/

/* Smooth fade-in when the dropdown opens */
.e-n-menu-content {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* When menu is active → visible */
.e-n-menu-content.e-active {
    opacity: 1;
}

/* Smooth text transition */
.e-n-menu-content .e-n-menu-title-text {
    transition: color 0.25s ease;
}

/* Smooth icon transition */
.e-n-menu-content .elementor-icon,
.e-n-menu-content .elementor-button-icon {
    transition: color 0.25s ease, fill 0.25s ease;
}

/**************************************************************
 * SCROLL STATE CLASS (added via JS)
 * When page is scrolled down, header gets .header-scrolled
 * This locks in the "dark" look even when not hovered
 **************************************************************/

/* Menu items dark when scrolled */
.header-hover.header-scrolled .e-n-menu-title-text {
    color: #000E1A !important;
}

/* Logo swap when scrolled */
.header-hover.header-scrolled .logo-wrap .logo-white {
    opacity: 0;
}
.header-hover.header-scrolled .logo-wrap .logo-black {
    opacity: 1;
}

/* Mobile hamburger dark when scrolled */
.header-hover.header-scrolled .elementor-menu-toggle {
    color: #000E1A !important;
}

/* Icons follow dark color when scrolled */
.header-hover.header-scrolled .elementor-button-icon,
.header-hover.header-scrolled .elementor-icon {
    color: #000E1A !important;
}

/* Schedule a Demo dark when scrolled */
.header-hover.header-scrolled #header-contact-sales {
    color: #000E1A !important;
    border-color: #000E1A !important;
}

.header-hover.header-scrolled #header-contact-sales .elementor-button-icon {
    color: #000E1A !important;
    fill: currentColor !important;
}

/* Sign In text dark when scrolled */
.header-hover.header-scrolled #header-sign-in .elementor-button-text {
    color: #000E1A !important;
}/* End custom CSS */