.max-elements-rotate-circle {
    position: relative;

    .max-elements-rotate-circle-content {
        position: relative;
        width: 220px;
        height: 220px;
        display: block;

        .icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 70px;
            width: 70px;
            border-radius: 50%;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #191919;

            svg {
                width: 18px;
                height: 18px;
                fill: #191919;
            }
        }

        .rotate-text {
            display: inline-block;
            font-weight: 300;
            text-transform: uppercase;
            position: absolute;
            left: 0;
            border-radius: 50%;
            color: #151515;

            &.st1 {
                animation: rotateText 20s linear infinite;
            }

            &.st2 {
                animation: rotateTextReverse 20s linear infinite;
            }
        }

        .rotate-circle svg {
            width: 220px;
            height: 220px;
            fill: #000;
            transform: scale(1);
        }

        .center-text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .image {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes rotateText {
            0% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes rotateTextReverse {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    }
}