.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ===== Main menu (nav-menu widget) ===== */
/* margin-left:auto keeps the menu on the right, next to the Contact button */
#tcf-main-header .elementor-widget-nav-menu { --e-nav-menu-horizontal-menu-item-margin: 15px; --nav-menu-icon-size: 26px; width: auto; flex: 0 1 auto; margin-left: auto; }
#tcf-main-header .elementor-nav-menu .elementor-item { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; line-height: 1em; }
#tcf-main-header .elementor-nav-menu--main .elementor-item { color: #ffffff; fill: #ffffff; padding: 15px 0; }
#tcf-main-header .elementor-nav-menu--main .elementor-item:hover,
#tcf-main-header .elementor-nav-menu--main .elementor-item:focus,
#tcf-main-header .elementor-nav-menu--main .elementor-item.highlighted { color: #f6be00 !important; fill: #f6be00 !important; }
#tcf-main-header .elementor-nav-menu--main .sub-menu { background: #ffffff; border-radius: 25px; box-shadow: 0 0 20px rgba(0,0,0,.2); padding: 20px 25px; min-width: 240px !important; }
#tcf-main-header .elementor-nav-menu--main .sub-menu .sub-menu { margin-left: 10px; }
#tcf-main-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 400; color: #31006f !important; background: transparent !important; padding: 0 0 6px; border: 0; }
#tcf-main-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover { color: #ac4fc6 !important; }
#tcf-main-header .elementor-nav-menu--dropdown { background: #ffffff; }
#tcf-main-header .elementor-nav-menu--dropdown a { font-family: Poppins, sans-serif; color: #31006f; fill: #31006f; }
#tcf-main-header .elementor-nav-menu--dropdown a:hover,
#tcf-main-header .elementor-nav-menu--dropdown a.highlighted { color: #ac4fc6; background: transparent; }
#tcf-main-header .elementor-menu-toggle { width: 50px; height: 50px; border-radius: 50%; background: #31006f; color: #ffffff; fill: #ffffff; margin-left: auto; }
#tcf-main-header .elementor-menu-toggle svg { fill: #ffffff; }

/* ===== Scroll behaviour: transparent over the hero, white once scrolled =====
   The white background is a separate layer faded by opacity (same technique as the logos),
   so it reverses cleanly when scrolling back up. Elementor's own background/colour
   transitions are switched off here because they fight scroll-linked animations.
   Base (unscrolled) state: transparent bar, white logo visible, colour logo hidden. */
#tcf-main-header { transition: none !important; background-color: transparent; }
#tcf-main-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: #ffffff; opacity: 0; pointer-events: none; }
#tcf-logo-white, #tcf-logo-color { transition: none !important; }
#tcf-logo-color { opacity: 0; }

@keyframes tcfFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes tcfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcfLinkColor { from { color: #ffffff; fill: #ffffff; } to { color: #31006f; fill: #31006f; } }

/* Chrome, Edge, Safari: scroll-linked CSS animations */
@supports (animation-timeline: scroll()) {
  #tcf-main-header::before { animation: tcfFadeIn linear both; animation-timeline: scroll(root block); animation-range: 0px 60px; }
  #tcf-logo-white { animation: tcfFadeOut linear both; animation-timeline: scroll(root block); animation-range: 0px 60px; }
  #tcf-logo-color { animation: tcfFadeIn linear both; animation-timeline: scroll(root block); animation-range: 0px 60px; }
  #tcf-main-header .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { transition: none !important; animation: tcfLinkColor linear both; animation-timeline: scroll(root block); animation-range: 0px 60px; }
}

/* Firefox (no scroll-driven animations).
   Default: the scrolled look (white bar, colour logo, purple links).
   When the "Header scroll state" Custom Code script is running it adds .tcf-scroll-js to <html>,
   and .tcf-scrolled once the page passes 60px; above that point the bar goes transparent again. */
@supports not (animation-timeline: scroll()) {
  #tcf-main-header::before { opacity: 1; }
  #tcf-logo-white { opacity: 0; }
  #tcf-logo-color { opacity: 1; }
  #tcf-main-header .elementor-nav-menu--main .elementor-item { color: #31006f; fill: #31006f; }

  html.tcf-scroll-js #tcf-main-header::before,
  html.tcf-scroll-js #tcf-logo-white,
  html.tcf-scroll-js #tcf-logo-color { transition: opacity .3s ease !important; }
  html.tcf-scroll-js #tcf-main-header .elementor-nav-menu--main .elementor-item { transition: color .3s ease, fill .3s ease !important; }

  html.tcf-scroll-js:not(.tcf-scrolled) #tcf-main-header::before { opacity: 0; }
  html.tcf-scroll-js:not(.tcf-scrolled) #tcf-logo-white { opacity: 1; }
  html.tcf-scroll-js:not(.tcf-scrolled) #tcf-logo-color { opacity: 0; }
  html.tcf-scroll-js:not(.tcf-scrolled) #tcf-main-header .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { color: #ffffff; fill: #ffffff; }
}

/* Tablet & mobile: hamburger menu, solid white bar, colour logo (all browsers) */
@media (max-width: 1024px) {
  #tcf-main-header::before { animation: none !important; opacity: 1 !important; }
  #tcf-logo-white { animation: none !important; opacity: 0 !important; }
  #tcf-logo-color { animation: none !important; opacity: 1 !important; }
}/* End custom CSS */