Changing Icon Box colors when hovering Container with link

/* Add CSS ID "icon-container" in Container Advanced tab. Add CSS ID "icon-text" in Icon Box Advanced tab. Add css on Container Advanced tab > Custom CSS */
/* Name the CSS ID as desired and write it in the CSS code accordingly. It can be anything. */

/* GLOBAL*/
#icon-container #icon-text p,
#icon-container #icon-text h3 {
   transition: 0.3s all ease-in-out ;
}

#icon-container:hover #icon-text p,
#icon-container:hover #icon-text h3 {
   color: var(--e-global-color-4e3cea9);
}

#icon-container:hover #icon-text .elementor-icon {
   fill: var(--e-global-color-4e3cea9);
   transition: 0.3s all ease-in-out;
}

/*Widget css*/

#icon-container:hover #icon-text p {
   color: #BF844F;
    transition: 0.3s;
}

#icon-container:hover #icon-text .elementor-icon {
   background-color: #353535;
    transition: 0.3s;
}

#icon-container:hover #icon-text .elementor-icon {
   color: #ffffff;
    transition: 0.3s;
}

/* Use "fill:" for simple icon or "background-color:" for stacked icon */