.loader-hidden {
    display: none !important;
}

.body-no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed;
    width: 100%;
} 
 

 .loader {
z-index: 999999;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #949494;
            z-index: 10000;
        }

        .loader__container {
            position: relative;
        }

        .loader__svg  {
            position: absolute;
            opacity: 0;
            bottom: -100%;
        }

        .loader__svg--1 {
            left: -300px;
            animation: 3s appear infinite ease-in-out;
        }

        .loader__svg--2 {
            left: -150px;
            animation: 3s appear .2s infinite ease-in-out;
        }

        .loader__svg--3 {
            left: 0px;
            animation: 3s appear .3s infinite ease-in-out;
        }

        .loader__svg--4 {
            left: 150px;
            animation: 3s appear .4s infinite ease-in-out;
        }

        @keyframes appear {
            0% {
                opacity: 0;
                bottom: -100px;
            } 
            15% {
                opacity: 1;
                bottom: 10px;
            }
            20% {
                bottom: -10px;
            }
            23% {
                bottom: 5px;
            }
            26% {
                bottom: -5px;
            }
            40% {
                bottom: 0;
            }
            50% {
                opacity: 1;
                bottom: 0;
            }
            60%, 100% {
                opacity: 0;
                bottom: -100px;
            }
        }

        @media (max-width: 768px) {
            .loader__svg  {
                width: 100px;
            }

            .loader__svg--1 {
                left: -125px;
            }

            .loader__svg--2 {
                left: -75px;
            }

            .loader__svg--3 {
                left: -25px;
            }

            .loader__svg--4 {
                left: 25px;
            }

            @keyframes appear {
                0% {
                    opacity: 0;
                    bottom: -100px;
                } 
                15% {
                    opacity: 1;
                    bottom: 5px;
                }
                20% {
                    bottom: -5px;
                }
                23% {
                    bottom: 2px;
                }
                26% {
                    bottom: -2px;
                }
                40% {
                    bottom: 0;
                }
                50% {
                    opacity: 1;
                    bottom: 0;
                }
                60%, 100% {
                    opacity: 0;
                    bottom: -100px;
                }
            }
        }