Opacity not aplying correctly on Brave browser

Question

i am working on a website and i have a problem with an opacity transition on brave. i have a navbar at the top and an overlay that gets darker when i hover the navbar items, the thing is that the opacity on hover is .5 but sometimes it aplies as 1 and even stays active and only happens on brave browser.

this is the div that changes opacity

<div class="overlay"></div>

this is the code for one of the navbar items

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-target="#" id="dropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Personalized Tracking
        </a>
        <div class="dropdown-menu main-menu" aria-labelledby="dropdown3">
                    <a class="dropdown-item " href="link.html" rel="noopener noreferrer" target="_blank" >
                        <i class="far fa-info fa-fw" alt=""></i>
                        <span class="">About</span>
                    </a>
        </div>
    </li>

and this is the css that handles the hover

@media all and (min-width: 992px) {
.navbar .nav-item .main-menu {
    display:block;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in;
    margin-top: 0
}

.hp-second-navbar .nav-item.dropdown::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #212e4f;
    bottom: 0;
    right: 0;
    visibility: hidden;
    transition: .3s;
    opacity: 0;
    pointer-events: none
}

.hp-second-navbar .nav-item.dropdown:hover:before {
    opacity: .5;
    visibility: visible;
    pointer-events: none
}

.navbar .nav-item:hover .main-menu {
    transition: .3s ease-in;
    opacity: 1;
    visibility: visible
}

.navbar .nav-item:hover::after {
    width: 100%
}

.navbar .dropright .main-submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in;
    margin-top: 0
}

.navbar .dropright:hover .main-submenu {
    transition: .3s ease-in;
    opacity: 1;
    visibility: visible
}

.overlay {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #212e4f;
    bottom: 0;
    right: 0;
    visibility: hidden;
    transition: .3s;
    opacity: 0;
    pointer-events: none;
    z-index: 1031
}

.overlay.active {
    opacity: .5;
    visibility: visible;
    pointer-events: none
}

span[aria-owns="environments_listbox"] {
    width: 100%
}
}

i already have deactivated hardware acceleration and the blocking of ads and scripts on brave but still occurrs.

i also put the link to the site in case you cant replicate it. site that has this bug