/* Preloader: loader ring around logo */
.loader.loader-around-logo {
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader.loader-around-logo .background,
.loader.loader-around-logo .spinner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.loader.loader-around-logo .background {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6),
        0 0px 4px 1px rgba(0, 0, 0, 0.3),
        0 1px 2px 1px rgba(0, 0, 0, 0) inset,
        0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
}

.loader.loader-around-logo .spinner {
    border: 2px solid transparent;
    border-top-color: #ae34db;
    box-shadow: 0 -4px 5px #ae34db4d;
    animation: spin 1s linear infinite;
}

.loader.loader-around-logo::before,
.loader.loader-around-logo::after {
    content: '';
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
.loader.loader-around-logo::after {
    box-shadow: 0 2px 0 #4400ff inset;
    animation: rotate 2s linear infinite;
}

.loader.loader-around-logo .logo.logo-preloader {
    position: relative;
    z-index: 2;
    width: 70px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    display: block;
}

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

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