/* sticky sub-menu */

.sticky-sub-menu {
    position: -webkit-sticky; /* For Safari support */
    position: sticky;
    top: var(--sticky-offset, 70px);
    z-index: 999; /* Keeps it above the page content */
    background-color: #eaf5ff82; /* Prevents transparency when scrolling over text */
	backdrop-filter: blur(10px);
}

.header-wrapper.stuck{
	box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.profile-sticky-col .is-sticky-column {
    /* Uses our new dynamic variable, falls back to 200px if JS hasn't fired */
    top: var(--profile-offset, 200px) !important;
}

/* 1. Safely hide Flatsome's native scroll dots */
.scroll-to-bullets {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 2. Set up the baseline underline animation on the text */
.sticky-sub-menu a.button span {
    display: inline;
    width: fit-content;
    text-decoration: none; 
    /* Pulls your exact underline effect from the stylesheet */
    background-image: linear-gradient(currentColor, currentColor); 
    background-size: 0% 2px; 
    background-position: left bottom; 
    background-repeat: no-repeat; 
    transition: background-size 0.2s ease-out; 
}

/* 3. Trigger the underline to expand on hover OR when 'active' */
.sticky-sub-menu a.button:hover span, 
.sticky-sub-menu a.button.active span {
    background-size: 100% 2px;
}

/* 4. Style the active state text colors */
.sticky-sub-menu a.button.active span {
    color: #2390ff !important; /* Your brand blue */
    font-weight: 700 !important;
}