Change colour of elements inside an Elementor container on hover

Please see this website: https://reasone29.sg-host.com/

The three boxes on the hero section, e.g. 'Full Conversion Packages', I want to change the colour of the elements (text and the button) when you hover over the container.

I can do CSS that changes the colour of the element when you hover over it directly, but I want it so all the elements change at the same time when you hover over the container and it turns blue.

I've tried various CSS codes but had no luck.

Thanks in advance.

Various CSS codes but no results:

.elementor-container:hover .elementor-element h1,
.elementor-container:hover .elementor-element h2,
.elementor-container:hover .elementor-element h3,
.elementor-container:hover .elementor-element h4,
.elementor-container:hover .elementor-element h5,
.elementor-container:hover .elementor-element h6 {
  color: #ff0000 !important;
}

.elementor-container:hover .elementor-element h1,
.elementor-container:hover .elementor-element h2 {
  color: #ff0000 !important;

I also tried the selector for the headings but still no luck.

I'm not sure as to what you want to achieve because the hex-code you're using in your code is red and not blue, as you indicated.

Either way, you can use IDs to make this work. Use the ID "opt-container" on the container that holds all 3 boxes and then the ID "opt-btn" on all 3 button elements. Then use the code below and this should make the text of all 3 boxes red and the button too, while the text color of the button remains white

Hover effect applies to all 3 boxes at once

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#opt-container:hover h3,
#opt-container:hover h6
{
    color: #ff0000;
}

#opt-container:hover #opt-btn
{
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff;
}

<!-- end snippet -->

If you want the entire box to change color on hover then you add the ID "opt-box" to each of the 3 containers and use the code below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#opt-container:hover #opt-box 
{
    background-color: #26ABE2;
}

<!-- end snippet -->

Hover effect applies to each box, individually

(In response to your comment:)
Use the 3 different IDs (classes would probably work too) for your boxes and call them "opt-box-1" "opt-box-2" and "opt-box-3". Also add the IDs (or classes) "opt-btn-1" "opt-btn-2" and "opt-btn-3". on the 3 button elements. Then use the code below to change the background on hover:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#opt-box-1:hover,
#opt-box-2:hover,
#opt-box-3:hover

{
    background-color: #26ABE2;
}

<!-- end snippet -->

The code below changes the font color (h3 and h6) on hover:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#opt-box-1:hover h3,
#opt-box-1:hover h6,
#opt-box-2:hover h3,
#opt-box-2:hover h6,
#opt-box-3:hover h3,
#opt-box-3:hover h6
{
    color: #ff0000;
}

<!-- end snippet -->