/* Rotating Badge
----------------------------------------------- */

.rotating-badge .circle {
     transform: rotate(0deg);
     transition: transform 1s ease-in-out !important;
}

.rotating-badge .circle:hover {
     transform: rotate(-180deg);
     transition: transform 0.5s ease-in-out !important;
     border: none;
     cursor: pointer;
}

.rotating-badge .circle .icon {
     position: absolute;
     animation: rotateText 35s linear infinite;
     animation-direction: reverse;
     pointer-events: none;
}

.rotating-badge .circle .text {
     animation: rotateText 35s linear infinite;
     pointer-events: none;
}

.rotating-badge .circle .text .ring [style*=--index] {
     --radius: 9;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(calc(360deg / var(--total) * var(--index))) translateY(calc(var(--radius, 5) * -1ch));
}

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

     100% {
          transform: rotate(1turn);
     }
}