/* Soccer ball hover effect for submenu items */
.submenu-item,
.dropdown-item,
.navbar .nav-item .dropdown-menu a,
nav a.dropdown-item,
.navbar-nav .dropdown-menu a,
.mega-menu a,
.mobile-menu-list a,
.mobile-submenu-item a,
.sub-nav-item,
.sidebar-link,
.footer-links a {
    position: relative;
    transition: all 0.3s ease;
    overflow: visible;
}

.submenu-item::before,
.dropdown-item::before,
.navbar .nav-item .dropdown-menu a::before,
nav a.dropdown-item::before,
.navbar-nav .dropdown-menu a::before,
.mega-menu a::before, 
.mobile-menu-list a::before,
.mobile-submenu-item a::before,
.sub-nav-item::before,
.sidebar-link::before,
.footer-links a::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 20px;
    height: 20px;
    background-image: url('../soccer-ball.gif');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5;
}

.submenu-item:hover,
.dropdown-item:hover,
.navbar .nav-item .dropdown-menu a:hover,
nav a.dropdown-item:hover,
.navbar-nav .dropdown-menu a:hover,
.mega-menu a:hover,
.mobile-menu-list a:hover,
.mobile-submenu-item a:hover,
.sub-nav-item:hover,
.sidebar-link:hover,
.footer-links a:hover {
    background-color: rgba(240, 255, 250, 0.5);
    padding-left: 40px !important;
    color: #00a000 !important;
}

.submenu-item:hover::before,
.dropdown-item:hover::before,
.navbar .nav-item .dropdown-menu a:hover::before,
nav a.dropdown-item:hover::before,
.navbar-nav .dropdown-menu a:hover::before,
.mega-menu a:hover::before,
.mobile-menu-list a:hover::before,
.mobile-submenu-item a:hover::before,
.sub-nav-item:hover::before,
.sidebar-link:hover::before,
.footer-links a:hover::before {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

/* Special adjustment for footer links */
.footer-links a::before {
    background-image: url('../soccer-ball.gif');
    filter: brightness(1.5); /* Make it more visible on dark background */
}

.footer-links a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Override default GT icon hover effect when soccer ball gif is used */
.soccer-ball-hover.gt-icon-hover::before {
    content: none !important;
}

/* Fix for any potential overlap issues with other elements */
.dropdown-menu, .mega-menu, .submenu {
    overflow: visible !important;
}