/* ==================================
KREWO CUSTOM STICKY HEADER
================================== */

/* Keep header fixed while scrolling */
#masthead,
#hfe-site-header {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
}

/* Navy background at the top */
.krewo-header {
background-color: #102448 !important;
transition: background-color 0.35s ease,
box-shadow 0.35s ease;
}

/* Pure white background when scrolling */
.krewo-header.is-scrolled {
background-color: #FFFFFF !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.10);
}

/* Mobile menu icon turns dark when scrolling */
.krewo-header.is-scrolled .elementor-menu-toggle,
.krewo-header.is-scrolled .elementor-menu-toggle i,
.krewo-header.is-scrolled .elementor-menu-toggle svg {
color: #102448 !important;
fill: #102448 !important;
}

/* ==================================
MOBILE HERO SPACING FIX
================================== */

@media (max-width: 767px) {

body:not(.elementor-editor-active) #content {
padding-top: 80px;
}

}

/* KREWO hamburger icon - white at top */
.krewo-header:not(.is-scrolled) .elementor-menu-toggle,
.krewo-header:not(.is-scrolled) .elementor-menu-toggle i,
.krewo-header:not(.is-scrolled) .elementor-menu-toggle svg,
.krewo-header:not(.is-scrolled) .hfe-nav-menu__toggle,
.krewo-header:not(.is-scrolled) .hfe-nav-menu__toggle i,
.krewo-header:not(.is-scrolled) .hfe-nav-menu__toggle svg {
color: #FFFFFF !important;
fill: #FFFFFF !important;
}

/* Hamburger icon - navy when scrolling */
.krewo-header.is-scrolled .elementor-menu-toggle,
.krewo-header.is-scrolled .elementor-menu-toggle i,
.krewo-header.is-scrolled .elementor-menu-toggle svg,
.krewo-header.is-scrolled .hfe-nav-menu__toggle,
.krewo-header.is-scrolled .hfe-nav-menu__toggle i,
.krewo-header.is-scrolled .hfe-nav-menu__toggle svg {
color: #102448 !important;
fill: #102448 !important;
}

/* KREWO phone icon turns navy when scrolling */
.krewo-header.is-scrolled .elementor-icon,
.krewo-header.is-scrolled .elementor-icon i,
.krewo-header.is-scrolled .elementor-icon svg {
color: #102448 !important;
fill: #102448 !important;
}

/* Keep phone icon white at top */
.krewo-header:not(.is-scrolled) .elementor-icon,
.krewo-header:not(.is-scrolled) .elementor-icon i,
.krewo-header:not(.is-scrolled) .elementor-icon svg {
color: #FFFFFF !important;
fill: #FFFFFF !important;
}

/* KREWO Promise Animation Delays */
.krewo-promise-1.animated {
animation-delay: 0.1s !important;
}

.krewo-promise-2.animated {
animation-delay: 0.2s !important;
}

.krewo-promise-3.animated {
animation-delay: 0.3s !important;
}