.sifency-circle-text {
    --circle-size: 150px;
    --animation-duration: 25s;
    --icon-color: #333;
    --icon-size: 2.5em;
    --hover-text-color: var(--e-global-color-primary);
    --transition-speed: 0.3s;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--circle-size);
    height: var(--circle-size);
    transition: transform var(--transition-speed) ease-in-out
}

.sifency-circle-text[href] {
    cursor: pointer
}

.sifency-circle-text[href],
.sifency-circle-text[href]:hover {
    text-decoration: none;
    color: inherit
}

.sifency-circle-text__svg {
    width: 100%;
    height: 100%;
    overflow: visible !important;
    animation: sifency-rotate var(--animation-duration) linear infinite
}

.sifency-circle-text__path {
    transition: fill var(--transition-speed) ease
}

.sifency-circle-text__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--icon-color);
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
    pointer-events: none
}

.sifency-circle-text__icon i,
.sifency-circle-text__icon svg {
    width: 1em;
    height: 1em;
    display: block
}

@keyframes sifency-rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.sifency-circle--hover-yes:hover .sifency-circle-text__svg {
    animation-play-state: paused
}

.sifency-circle-text:hover .sifency-circle-text__path {
    fill: var(--hover-text-color)
}