Changing IconBox Icon background with Custom CSS Class

Hello,

I was successful to target the IconList Icon backgrounds by applying a Custom CSS Class for the IconList Element (abtus) and then using the following code in quick CSS:

.abtus .avia-icon-list .iconlist_icon   { background-color: #3a7090; }
.abtus .avia-icon-list .iconlist_icon:hover   { background-color: #435960; }

However, when i tried same concept for IconBox Icon, it does not work. I used (homepg) as the Custom CSS Class applied to the IconBox Element and in quick css used the following code:

.printProducts .main_color.iconbox_top .iconbox_icon{ color: white; background-color: red; }
.printProducts .main_color.iconbox_top .iconbox_icon:hover{ color: red; background-color: #435960; }

I want to point out when i don’t add the Custom CSS Class in front for the IconBox, it changes the colour globally

.main_color.iconbox_top .iconbox_icon { color: #ffffff; background-color: #435960; }
.main_color.iconbox_top .iconbox_icon:hover{ color: #3a7090; background-color: #c3a400; }

Of course, i need to target each Iconbox icon individually.

Any help is appreciated.

Thank you