.elementor-504 .elementor-element.elementor-element-7f07cbf3{--display:flex;--position:fixed;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;bottom:0px;--z-index:10;}body:not(.rtl) .elementor-504 .elementor-element.elementor-element-7f07cbf3{right:0px;}body.rtl .elementor-504 .elementor-element.elementor-element-7f07cbf3{left:0px;}@media(max-width:767px){.elementor-504 .elementor-element.elementor-element-7f07cbf3{--width:21px;}}@media(min-width:768px){.elementor-504 .elementor-element.elementor-element-7f07cbf3{--width:21%;}}/* Start custom CSS for html, class: .elementor-element-4c378188 */.circle-container {
  position: fixed;
  bottom: calc(50vh - 60px);
  right: 20px;
  width: 120px; /* Regola le dimensioni del cerchio */
  height: 120px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: visible;
  touch-action: none;
}

.text {
  --char_length: 14;
  --inner_angle: calc(360 / var(--char_length));
  --character_width: 1.25;
  --radius: calc(var(--character_width, 1) * -2.5ch); /* Raggio maggiore per allargare il cerchio del testo */
  position: relative;
  color: black;
  font-size: 1rem; /* Font più piccolo */
  font-family: 'MostraNuova', sans-serif;
  font-weight: 300; /* Peso corretto */
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
  transform-origin: center;
}
.circle-container:hover .text {
  font-weight: 600; 
}
.char {
  position: absolute;
  top: 50%; /* Centra verticalmente rispetto al cerchio */
  left: 50%; /* Centra orizzontalmente rispetto al cerchio */
  transform: translate(-50%, -50%) rotate(calc(var(--inner_angle) * var(--char_index) * 1deg)) /* Cambiato il segno per rotazione corretta */
    translateY(var(--radius)); /* Ruota il testo attorno al cerchio */
}

@media (prefers-reduced-motion: no-preference) {
  .text {
    animation: spin 6s infinite linear;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg); /* Rotazione completa */
    }
  }
}

@media (max-width: 767px) {
  .circle-container {
    width: 90px;
    height: 90px;
  
  }

  .text {
    font-size: 0.85rem;
    --radius: calc(var(--character_width, 1) * -2ch); /* rimpicciolisce il raggio */
    
  }
}/* End custom CSS */