html.no-scroll, body.no-scroll {
    overflow: hidden !important;
}

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0b0b;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader {
            position: relative;
            width: 100px;
            height: 16px;
        }
        .loader:before, .loader:after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 32px 0 #fff;
            left: 0;
            top: 0;
            animation: ballMoveX 2s linear infinite;
        }
        .loader:after {
            box-shadow: none;
            transform: translateX(64px) scale(1);
            z-index: 2;
            animation: none;
            animation: trfLoader 2s linear infinite;
        }

        @keyframes trfLoader {
            0%, 5% {
                transform: translateX(64px) scale(1);
                background: #FFF;
            }
            10% {
                transform: translateX(64px) scale(1);
                background: #ff3d00;
            }
            40% {
                transform: translateX(32px) scale(1.5);
                background: #ff3d00;
            }
            90%, 95% {
                transform: translateX(0px) scale(1);
                background: #ff3d00;
            }
            100% {
                transform: translateX(0px) scale(1);
                background: #FFF;
            }
        }
        @keyframes ballMoveX {
            0%, 10% { transform: translateX(0) }
            90%, 100% { transform: translateX(32px) }
        }