.loading {
    position: relative;
    width: 18px;
    height: 18px;
    transform-style: preserve-3d;
    perspective: 800px;
    display:inline-block;
    vertical-align: sub;
}
.loading .arc {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 3px solid #ff0304;
}

.loading .arc:nth-child(1) {
    animation: rotate1 1.15s linear infinite;
}
.loading .arc:nth-child(2) {
    animation: rotate2 1.15s linear infinite;
}
.loading .arc:nth-child(3) {
    animation: rotate3 1.15s linear infinite;
}
.loading .arc:nth-child(1) {
    animation-delay: -0.8s;
}
.loading .arc:nth-child(2) {
    animation-delay: -0.4s;
}
.loading .arc:nth-child(3) {
    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);
    }
}
.arc.arc1{
    border-bottom: 3px solid #407cff;
}
.arc.arc2{
    border-bottom: 3px solid #f253f7;
}

.arc.arc3{
    border-bottom: 3px solid #ffffff;
}

.ai_span {
    background: linear-gradient(90deg, #ff8e44, #f91362, #35126a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}