/* Replace the hover box image with a colored background at 50% opacity */
.colored-background-hover {
    background-image: none !important; /* Remove any existing background image */
    background-color: rgba(0, 123, 255, 0.5) !important; /* Blue color with 50% transparency */
}

/* If you need to target more specific elements inside the hover box */
.colored-background-hover .elementor-background-overlay {
    background-image: none !important;
    background-color: transparent !important;
}

/* Additional styling if needed */
.colored-background-hover .elementor-widget-container {
    background-image: none !important;
}

#colored-hover-box {
    background-image: none !important;
    background-color: rgba(0, 123, 255, 0.5) !important;
}