/* ==========================================================================
   3.7. Circle Text Loop - Modern Style
   ========================================================================== */
.sifency-circle-text {
  --circle-size: 180px;
  --animation-duration: 25s;
  --icon-color: #333;
  --icon-size: 2.5em; 
  --hover-text-color: var(--sifency-addons-themecolor);
  --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 {
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: fill var(--transition-speed) ease;
}
.sifency-circle-text__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--icon-size);
  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(0deg);
  }
  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);
}