/***************************************
* Animated Circuit Badge
***************************************/
.ifs-animated-circuit-badge {max-width:clamp(1010px, 70.14vw, 2000px);}
.ifs-animated-circuit-badge__image-bg {
    max-width:clamp(420px, 29.17vw, 1600px);
    transform:translate(-6%, 8%);
}

/* decoration */
.ifs-animated-circuit-badge__image-decoration {aspect-ratio:1920/376;}
.ifs-animated-circuit-badge__image-decoration img {opacity:0; transform:scale(0.6); transition:all 1.2s ease 0.6s;}

/* content */
.ifs-animated-circuit-badge__content {
    margin-top:-40px; max-width:clamp(782px, 50vw, 1800px);
    opacity:0; transform:translateY(60px); transition:all 0.8s ease 0.9s;
}

/* animation */
.ifs-animated-circuit-badge__image-bg img {opacity:0; transform:scale(0.8)}
.ifs-animated-circuit-badge.show-animation .ifs-animated-circuit-badge__image-bg img {
    animation:image-animation 1.5s ease forwards;
}
.ifs-animated-circuit-badge.show-animation .ifs-animated-circuit-badge__image-decoration img {
    opacity:1; transform:scale(1);
}
.ifs-animated-circuit-badge.show-content .ifs-animated-circuit-badge__content {
    opacity:1; transform:translateY(0);
}

/* layout no image */
.ifs-animated-circuit-badge.no-image .ifs-animated-circuit-badge__content {margin-top:40px;}


/***************************************
* Animated Circuit Badge - Responsive
***************************************/
@media only screen and (max-width:1024px) {
    .ifs-animated-circuit-badge__image-bg {width:40vw;}
}
@media only screen and (max-width:786px) {
    .ifs-animated-circuit-badge__content {margin-top:-20px;}
}
@media only screen and (max-width:480px) {
    .ifs-animated-circuit-badge__image-bg {width:45vw;}
    .ifs-animated-circuit-badge.no-image .ifs-animated-circuit-badge__content {margin-top:20px;}
}