/* Target Elementor Header - Adjust selector if needed */
.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent !important; /* Start transparent */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* State when scrolled down */
.elementor-location-header.is-scrolled {
    background-color: #ffffff !important; /* Becomes white */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Adds shadow */
}

/* 
   LOGO FIX: 
   If your logo is white (for the transparent header), it will disappear against the white scrolled header.
   This inverts the logo color when scrolled to make it visible (e.g., white -> black).
*/
.elementor-location-header.is-scrolled .elementor-widget-theme-site-logo img,
.elementor-location-header.is-scrolled .site-logo img,
.elementor-location-header.is-scrolled .custom-logo-link img {
    filter: invert(1) brightness(0); /* Turns white logo to black */
    /* Use 'filter: none;' if your logo is already dark and disappearing for another reason */
}

/* Ensure body content isn't hidden behind the fixed header */
/* Only needed if the header wasn't already overlaying content */
/* You might need to add padding-top to your first section or body if content is cut off */