html.animations-paused *,
html.animations-paused *::before,
html.animations-paused *::after {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

.stop-animations-button:focus,
.stop-animations-button:focus-visible,
video:focus,
video:focus-visible {
    outline: 3px solid #E4003A;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-play-state: paused !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}




@media (hover:hover){
    #mainNav .stop-animations-button:hover{
        background: #fff;
        border: 1px solid #E4003A;
        color: #E4003A;
    }
}

#mainNav .stop-animations-button:active,
#mainNav .stop-animations-button:focus-visible{
    background: #fff;
    border: 1px solid #E4003A;
    color: #E4003A;
}
@media screen and (min-width: 1024px){
    #mainNav:has(.stop-animations-button){
        display: flex;
        justify-content: space-between;
        gap: 100px;
        align-items: center;
    }
}

.text-icon-anim .text,
.text-icon-anim .icon-anim {
    flex-basis: 50%;
}

.text-icon-anim.ratio-70-30 .text {
    flex-basis: 70%;
}

.text-icon-anim.ratio-70-30 .icon-anim {
    flex-basis: 30%;
}

.text-icon-anim.ratio-30-70 .text {
    flex-basis: 30%;
}

.text-icon-anim.ratio-30-70 .icon-anim {
    flex-basis: 70%;
}

.text-icon-anim .video-icon-animated {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 835px){
    .text-icon-anim .video-icon-animated {
        max-width: 100%;
    }
}