Can’t edit Sticky Header Opacity

I got this code from the web to add sticky header to my wordpress website but I want to make the opacity 100% and when I edit it in the code it doesn’t take any effect on live site the far I can go is 0.99.
I just don’t want any transparency at all, that’s why I set Opacity to “1.0” in the code but it doesn’t render in the site.

header.sticky-header {
    --header-height: 90px;
    --opacity: 1.0;
    --shrink-me: 0.80;
    --sticky-background-color: #00000;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(99999px);
    backdrop-filter: blur(99999px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

• This topic was modified 4 years ago by Steven Stern (sterndata).

The page I need help with: [log in to see the link]