/* Initial state of the header with dark background and fully opaque */
body .custom-transparent-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0); /* Fully opaque dark background */
    transition: background-color 0.3s ease-out;
    z-index: 1000; /* Ensure it's above other content */
}

#header-title, #header-menu {
    color: #FFFFFF !important; /* White */
    transition: color 0.3s ease-out;
}

/* Change the site title color to black when the header is sticky */
.custom-transparent-header.elementor-sticky--effects .elementor-heading-title a {
    color: #000000 !important;
}

.custom-transparent-header.elementor-sticky--effects .menu-item a.elementor-item {
    color: #000000 !important; /* Ensures the menu item text becomes black */
}
/* Preserve active menu item color */
.custom-transparent-header.elementor-sticky--effects .menu-item a.elementor-item-active,
.custom-transparent-header.elementor-sticky--effects .menu-item a.elementor-item:hover {
    color: #00A443 !important; /* Active and Hover Color */
}

/* Adjusts the background color of the header when it's sticky to be slightly transparent */
body .custom-transparent-header.elementor-sticky--effects {
    background-color: rgba(255, 255, 255, 1) !important;
}

/* Ensures smooth transition for the background color */
body .custom-transparent-header {
    transition: background-color 0.3s ease !important;
}

/* Optional: Adjusts the minimum height of the header's container when sticky, if needed */
body .custom-transparent-header.elementor-sticky--effects > .elementor-container {
    min-height: 80px; /* Adjust as needed */
}

/* Optional: Ensures smooth transition for the container's minimum height, if height adjustment is used */
body .custom-transparent-header > .elementor-container {
    transition: min-height 0.3s ease !important;
}