.white-toggle .mega-toggle-animated-box .mega-toggle-animated-inner,
.white-toggle .mega-toggle-animated-box .mega-toggle-animated-inner::before,
.white-toggle .mega-toggle-animated-box .mega-toggle-animated-inner::after {
    background-color: #ffffff !important;
}

#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background-color: #000000 !important;
    transition: background-color 0.3s ease-in-out;
}

/* Reset to default color when page-hero exists */
body:has(.page-hero) #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
body:has(.page-hero) #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
body:has(.page-hero) #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background-color: #ffffff !important;
}

/* Change toggle color to black when header has bg-white class */
body .bg-white #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
body .bg-white #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
body .bg-white #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background-color: #000000 !important;
}