/* spinner2 CSS from Uiverse.io by PriyanshuGupta28 */
.spinner2 {
    position: relative; /* Changed from absolute to relative for inner alignment */
    width: 50px; /* Adjusted size for visibility */
    height: 50px;
    margin: auto;
}

    .spinner2 div {
        position: absolute;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: var(--accent-300) !important;
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
        animation: spinner2-fzua35 1s calc(var(--delay) * 1s) infinite ease;
    }

        .spinner2 div:nth-child(1) {
            --delay: 0.1;
            --rotation: 36;
            --translation: 150;
        }

        .spinner2 div:nth-child(2) {
            --delay: 0.2;
            --rotation: 72;
            --translation: 150;
        }

        .spinner2 div:nth-child(3) {
            --delay: 0.3;
            --rotation: 108;
            --translation: 150;
        }

        .spinner2 div:nth-child(4) {
            --delay: 0.4;
            --rotation: 144;
            --translation: 150;
        }

        .spinner2 div:nth-child(5) {
            --delay: 0.5;
            --rotation: 180;
            --translation: 150;
        }

        .spinner2 div:nth-child(6) {
            --delay: 0.6;
            --rotation: 216;
            --translation: 150;
        }

        .spinner2 div:nth-child(7) {
            --delay: 0.7;
            --rotation: 252;
            --translation: 150;
        }

        .spinner2 div:nth-child(8) {
            --delay: 0.8;
            --rotation: 288;
            --translation: 150;
        }

        .spinner2 div:nth-child(9) {
            --delay: 0.9;
            --rotation: 324;
            --translation: 150;
        }

        .spinner2 div:nth-child(10) {
            --delay: 1;
            --rotation: 360;
            --translation: 150;
        }

@keyframes spinner2-fzua35 {
    0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    }

    50% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
    }
}