.animation-container { position: absolute; width: 220px; height: 220px;  /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /*background: rgba(0, 0, 0, 0.5);*/ padding: 10px; display: flex; flex-direction: column; align-items: center; overflow: visible; transition: border-color 0.3s ease; }
.animation-container:hover {  /*border-color: rgba(255, 255, 255, 0.3);*/ }
.animation-container .animation-title { margin-bottom: 10px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; }
.animation-container .circle-container-footer { position: relative; width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; }
.animation-container .dot { position: absolute; border-radius: 50%; background: #fff; }
.animation-container .line { position: absolute; background: rgba(255, 255, 255, 0.5); transform-origin: 0% 50%; }
.animation-container .circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); }

/* Corner decorations */
.corner {display: none; position: absolute; width: 16px; height: 16px; color: white; opacity: 0; z-index: 10; pointer-events: none; transition: opacity 0.3s ease; }
.animation-container:hover .corner { opacity: 1; }
.top-left { top: -8px; left: -8px; transition-delay: 0s; }
.top-right { top: -8px; right: -8px; transform: rotate(90deg); transition-delay: 0.1s; }
.bottom-left { bottom: -8px; left: -8px; transform: rotate(-90deg); transition-delay: 0.2s; }
.bottom-right { bottom: -8px; right: -8px; transform: rotate(180deg); transition-delay: 0.3s; }

/*site*/
.cz1{top:65%; left: -100px; opacity: 0.95; }
.cz2{top: 18%; left: 19%; opacity: 0.8;}
.cz3{left:90%; top: 40%; opacity: 0.95;}
.cz4{top: 33%; left: 22%; opacity: 0.17;}
.cz5{top: 63%; left: 52%; opacity: 0.17;}

@media (max-width:1680px) {
 .cz1, .cz2, .cz3{ opacity: 0.25; }
}

/* Animation keyframes */
@-webkit-keyframes orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes reverseOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes reverseOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-webkit-keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.3; }
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.3; }
}
@-webkit-keyframes ripple {
  0% { transform: scale(0.1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes ripple {
  0% { transform: scale(0.1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}