.load-wrapper{
   z-index: 9000;
   position: fixed;
   animation: hide_preloader 0.5s ease-in-out forwards;
   animation-delay: 4.5s;
   background-color: rgb(240, 248, 255);
   width: 100%;
}
.loader-container{
    position: relative;
    width: 100%;
    height: 100vh;
}
.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: hide_logo 4s ease-in-out forwards;
    animation-delay: 2s;
    width: 42vh;
    
}

.preloader .loader-logo{
    width: 100%;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); */
    animation: popup 3s ease-in-out forwards;
    
}

@keyframes hide_logo{
    0%{
        opacity: 1;
        width: 42vh;
    }
    20%{
        background-color: transparent;
        width: 30vh;
    }
    100%{
        opacity: 0;
        background-color: transparent;
        left: 0;
        top: 0;
        z-index: -100;
        width: 80px;
    }
}

@keyframes popup{
    0%{
        transform: scale(0);
    }
    20%{
        transform: scale(1);
    }

    40%{
        transform: scale(1.6) rotateY(180deg);
    }
    50%{ 
        transform: scale(1) rotateY(360deg);
    }
    100%{
        transform: scale(1) rotateY(360deg);
    }
}

@keyframes hide_preloader{
    0%{
        opacity: 1;
        transform: translate(0%, 0%) scale(1);
    }
    80%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
        background-color: transparent;
        z-index: -100;
    }
}