.loading-kodik {
    position: absolute;
  width: 5rem;
  height: 5rem;
  transform-style: preserve-3d;
  perspective: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading-kodik .arc {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom: 3px solid var(--primary-color);
}
.loading-kodik .arc:nth-child(1) {
animation: rotate1 1.15s linear infinite;
animation-delay: -0.8s;
}
.loading-kodik .arc:nth-child(2) {
animation: rotate2 1.15s linear infinite;
animation-delay: -0.4s;
}
.loading-kodik .arc:nth-child(3) {
animation: rotate3 1.15s linear infinite;
animation-delay: 0s;
}

@keyframes rotate1 {
from {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
}
to {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
}
}
@keyframes rotate2 {
from {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
}
to {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
}
}
@keyframes rotate3 {
from {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
}
to {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
}
}