:root {
    --white-color: #fff;
    --bg-color: #f8fafc;
    --black-color: #1b1b1b;
    --black-color-dark: #000000;
    --purple-color: #7f00ff;
    --green-color: #16db65;
    --red-color: #E63946;
    --yellow-color: #FBE134;
    --primary-font: "Aspekta", sans-serif;
    --secondary-font: "Roboto", sans-serif;
    --tertiary-font: "Poppins", sans-serif;
    --other-font: "Work Sans", sans-serif;
    --shadow: 0 0 50px #00000010;
    --shadow-hover: 0 0 50px #16db6550;
    --stroke: 1px solid #00000020;
}

.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    align-content: center;
    background: var(--bg-color);
    z-index: 999999;
}

.loader {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #7f00ff50;
    transform-origin: top;
    display: grid;
    animation: l3-0 1s infinite linear;
}

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    background: #7f00ff80;
    border-radius: 50%;
    transform-origin: top;
    animation: inherit;
    animation-name: l3-1;
}

.loader::after {
    background: var(--purple-color);
    --s: 180deg;
}

@keyframes l3-0 {

    0%,
    20% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes l3-1 {
    50% {
        transform: rotate(var(--s, 90deg))
    }

    100% {
        transform: rotate(0)
    }
}

.btn-loader-white.mini-loader::before {
    border: 5px solid var(--white-color) !important;
}

.mini-loader {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}

.mini-loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--purple-color);
    animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

@media (max-width:640px) {
    .loader {
        width: 24px;
    }
}