Logo is going back to white when hovering the header while scrolling

please help its urgent

hey guys when im scrolling the header items is proper as i wanted but as soon as i am hovering the header while scrolling it the logo goes back to white all things are fine except logo pls help urgent

transparent header this is good

when hovering it

this is when im scrolling looking nice

but as soon as i hovered the header in state of scrolling the logo goes white

below is css in header.liquid

{% unless settings.logo %} .header__heading-link .h2 { display: block !important; } .header__heading-link .header__heading-logo-wrapper { display: none; } {% endunless %} {% if section.settings.enable_transparent-header and section.settings.color-transparent %} .header-wrapper { background: transparent; position: absolute; width: 100%; top: 0; display: block; } .scrolled-past-header sticky-header { background: var(--gradient-background) !important; /* color: rgba(var(--color-foreground), 0.75); */ } /* .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{ color: rgba(var(--color-foreground), 0.75) !important; } */ .scrolled-past-header sticky-header .header__heading-link { display: block !important; } .scrolled-past-header sticky-header .logo-transparent { display: none !Important; } .header__heading-link { display: none; } .logo-transparent { display: block; } /* @media only screen and (min-width: 600px) { .list-menu__item, details[open]>.header__submenu { color: rgba(var(--color-foreground), 0.75) !important; background: transparent; } } */ @media only screen and (min-width: 600px) { .list-menu__item, details[open] > .header__submenu { color: {{ section.settings.color-transparent }} !important; background: transparent; color:white; } .header__icon.link, .header__active-menu-item, .disclosure__button, .header__heading-link .h2 { /* color: {{ section.settings.color-transparent }} !important; */ color:white } .scrolled-past-header sticky-header .list-menu__item, details[open] > .header__submenu { color: rgba(var(--color-foreground), 0.75) !important; } .scrolled-past-header sticky-header .header__icon.link, .scrolled-past-header sticky-header .header__active-menu-item, .scrolled-past-header sticky-header .disclosure__button, .header__heading-link .h2 { color: rgba(var(--color-foreground), 0.75) !important; } {% endif %} {% if section.settings.enable_transparent-header and section.settings.only-homepage and template != 'index' %} .header-wrapper { position: relative; background: var(--gradient-background); } .header__icon.link, .header__active-menu-item, .disclosure__button, .header__heading-link .h2 { color: rgba(var(--color-foreground), 0.75); } {% endif %} {% if section.settings.color-transparent and section.settings.only-homepage and section.settings.enable_transparent-header and template != 'index' %} @media only screen and (min-width: 600px) { .list-menu__item, details[open] > .header__submenu { color: rgba(var(--color-foreground), 0.75) !important; background: transparent; } } .header__icon.link, .header__active-menu-item, .disclosure__button, .header__heading-link .h2 { color: rgba(var(--color-foreground), 0.75) !important; } .header__heading-link { display: block; } .logo-transparent { display: none; } {% endif %} header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != "drawer" -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

base.css

.header__heading-link:hover .h2 {
color: rgb(var(–color-foreground));
}

.header__heading-link .h2 {
line-height: 1;
color: rgba(var(–color-foreground), 0.75);
}

.header__heading-logo {
height: auto;
max-width: 100%;
}

.header__heading-logo {
transition: filter 0.3s ease;
}

.header-wrapper:hover .header__heading-logo {
filter: invert(100%) grayscale(100%);

}

.header__heading-logo-wrapper {
width: 100%;
display: inline-block;
transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}