/* Ensure the menu is always fixed at the top */
.sticky-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    padding: 0px 0 !important; /* Thinner top bar */
    transition: background 0.4s ease-in-out, padding 0.3s ease-in-out, opacity 1s !important;
    background: rgba(45, 52, 69, 0) !important; /* Fully transparent at the top */
}

.sticky-menu-hidden {
    opacity: 0 !important;
    transition: none !important;
}

/* When the user scrolls down, fade to solid #2d3445 */
.sticky-menu.scrolled {
    background: rgba(45, 52, 69, 0.3) !important;
    backdrop-filter: blur(10px); /* Apply blur effect */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    padding: 0px 0 !important; /* Keep it thinner */
}

/* Fix for WordPress admin bar */
.admin-bar .sticky-menu {
    top: 32px !important; /* Default WP admin bar height */
}