.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ——— Universal Header Styles ——— */

/* 0) Keep original transition and transparent base */
.siteheader {
  background-color: transparent !important;
  transition: background-color 0.7s ease, box-shadow 0.7s ease;
}

/* 1) Sticky effects - apply for both Elementor sticky class and .scrolled (JS) */
.elementor-sticky--effects.siteheader,
.siteheader.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* 2) Logo swap (same behavior for both sticky states) */
.siteheader .logo-main { display: block !important; }
.siteheader .logo-sticky { display: none !important; }

.elementor-sticky--effects.siteheader .logo-main,
.siteheader.scrolled .logo-main {
  display: none !important;
}
.elementor-sticky--effects.siteheader .logo-sticky,
.siteheader.scrolled .logo-sticky {
  display: block !important;
}

/* 3) Menu link color - Elementor nav + common theme menu .elementor-kit-7s */
.elementor-sticky--effects.siteheader .elementor-nav-menu a,
.siteheader.scrolled .elementor-nav-menu a,

/* common theme/nav .elementor-kit-7s - adjust or add any custom classes you use */
.elementor-sticky--effects.siteheader .main-navigation a,
.siteheader.scrolled .main-navigation a,
.elementor-sticky--effects.siteheader .site-nav a,
.siteheader.scrolled .site-nav a,
.elementor-sticky--effects.siteheader .primary-menu a,
.siteheader.scrolled .primary-menu a,
.elementor-sticky--effects.siteheader .menu a,
.siteheader.scrolled .menu a,
.elementor-sticky--effects.siteheader .wp-block-navigation__container a,
.siteheader.scrolled .wp-block-navigation__container a,
.elementor-sticky--effects.siteheader nav a,
.siteheader.scrolled nav a {
  color: #000000 !important;
}

/* 4) Buttons or CTA links inside menus when sticky */
.elementor-sticky--effects.siteheader .menu a.button,
.siteheader.scrolled .menu a.button,
.elementor-sticky--effects.siteheader .menu .button,
.siteheader.scrolled .menu .button,
.elementor-sticky--effects.siteheader a.button,
.siteheader.scrolled a.button {
  color: #000000 !important;
  border-color: #000000 !important;
  background: transparent !important;
}

/* 5) Mobile menu toggle / hamburger color */
.elementor-sticky--effects.siteheader .elementor-menu-toggle,
.siteheader.scrolled .elementor-menu-toggle,
.elementor-sticky--effects.siteheader .menu-toggle,
.siteheader.scrolled .menu-toggle,
.elementor-sticky--effects.siteheader .mobile-toggle,
.siteheader.scrolled .mobile-toggle,
.elementor-sticky--effects.siteheader .hamburger,
.siteheader.scrolled .hamburger {
  color: #000000 !important;
  fill: #000000 !important; /* for SVG icons */
}

/* 6) Logo SVG inline color handling (if logo is inline SVG) */
.elementor-sticky--effects.siteheader .site-logo svg path,
.siteheader.scrolled .site-logo svg path {
  fill: #000000 !important;
}

/* 7) Fallback: force most links inside header to black when sticky (broad) */
.elementor-sticky--effects.siteheader a,
.siteheader.scrolled a {
  color: #000000 !important;
}

/* ——— Mobile: inherit same behavior with responsive adjustments ——— */
@media (max-width: 768px) {
  .siteheader {
    background-color: transparent !important;
    transition: background-color 0.7s ease, box-shadow 0.7s ease;
  }

  .elementor-sticky--effects.siteheader,
  .siteheader.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* Logo swap mobile */
  .siteheader .logo-main { display: block !important; }
  .siteheader .logo-sticky { display: none !important; }
  .elementor-sticky--effects.siteheader .logo-main,
  .siteheader.scrolled .logo-main { display: none !important; }
  .elementor-sticky--effects.siteheader .logo-sticky,
  .siteheader.scrolled .logo-sticky { display: block !important; }

  /* Mobile menu toggle color */
  .elementor-sticky--effects.siteheader .elementor-menu-toggle,
  .siteheader.scrolled .elementor-menu-toggle,
  .elementor-sticky--effects.siteheader .menu-toggle,
  .siteheader.scrolled .menu-toggle {
    color: #000000 !important;
    fill: #000000 !important;
  }

  /* Buttons on sticky mobile */
  .elementor-sticky--effects.siteheader .elementor-button,
  .siteheader.scrolled .elementor-button {
    color: #fff !important;
    background-color: #0073e6 !important;
  }
}

/* ===== jKit hamburger: white by default, orange when sticky ===== */

/* Default (non-sticky) - ensure white visibility */
.siteheader .jkit-hamburger-menu,
.siteheader .jkit-hamburger-menu svg,
.siteheader .jkit-hamburger-menu svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  transition: color .18s ease, fill .18s ease;
}

/* Sticky / scrolled: change to AGEERA orange */
.siteheader.elementor-sticky--effects .jkit-hamburger-menu,
.siteheader.scrolled .jkit-hamburger-menu,
.siteheader.elementor-sticky--effects .jkit-hamburger-menu svg path,
.siteheader.scrolled .jkit-hamburger-menu svg path {
  color: #FC7C04 !important;
  fill: #FC7C04 !important;
}

/* If the SVG uses <path> only (as in your example), target path explicitly too */
.siteheader.elementor-sticky--effects .jkit-hamburger-menu svg path,
.siteheader.scrolled .jkit-hamburger-menu svg path {
  fill: #FC7C04 !important;
}

/* Keep hamburger orange while menu is open (if aria-expanded is used) */
.jkit-hamburger-menu[aria-expanded="true"],
.siteheader.elementor-sticky--effects .jkit-hamburger-menu[aria-expanded="true"],
.siteheader.scrolled .jkit-hamburger-menu[aria-expanded="true"] {
  color: #FC7C04 !important;
  fill: #FC7C04 !important;
}

/* Mobile scope (optional) - only applies on small screens */
@media (max-width: 991px) {
  .siteheader .jkit-hamburger-menu,
  .siteheader .jkit-hamburger-menu svg,
  .siteheader .jkit-hamburger-menu svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
  .siteheader.elementor-sticky--effects .jkit-hamburger-menu,
  .siteheader.scrolled .jkit-hamburger-menu {
    color: #FC7C04 !important;
    fill: #FC7C04 !important;
  }
}/* End custom CSS */