@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

    .loader {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9999999999;
        transition: 1s;
    }

    .background-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
        opacity: 1;
    }

    .loader-parent {
        position: fixed;
        z-index: 999999999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 475px;
        height: 0;
    }

    .logo-loader {
        position: relative;
        z-index: 999999999;
        bottom : 65px;
        animation: video_loader 5s ease-in-out 0s infinite forwards, intro_opacity 2.5s ease-in-out 0s 1 forwards;
    }

    .loader-video {
        /* position: relative;
        z-index: 999999999;
        width: 470px;
        left: 0;
        top: 0;
        opacity: 0; */
    opacity: 1;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    width: 475px;
    height: 475px;
    }

    .loader-img {
        position: absolute;
        z-index: 999999999;
        width: 232px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -51%);
        opacity: .5;
        animation: loader_logo_opacity 5s ease-in-out 0s infinite forwards;
    }

    .background-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #393b3e;
        opacity: .98;
    }

    @keyframes intro_opacity {

        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
        
    }

    @keyframes video_loader {

        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
        
    }

    @keyframes loader_logo_opacity {

        0% {
            opacity: 0;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 0;
        }
        
    }

    .loader-content {
        position: relative;
        z-index: 999999999;
        text-align: center;
        margin-top: 50px
    }

    .loading {
        color: #e0e3ea;
        font-family: 'Tajawal';
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 1px;
        text-indent: 25px;
    }

    .loading .text-point:nth-child(1) {
        animation: t_point1 3.5s ease-in-out 0s infinite forwards;
    }

    .loading .text-point:nth-child(2) {
        animation: t_point2 3.5s ease-in-out 0s infinite forwards;
    }

    .loading .text-point:nth-child(3) {
        animation: t_point3 3.5s ease-in-out 0s infinite forwards;
    }

    @keyframes t_point1 {
        
        0% {
            opacity: 0;
        }

        24.9% {
            opacity: 0;
        }
        25% {
            opacity: 1;
        }

        50% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }

    }

    @keyframes t_point2 {
        
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        49.9% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }

    }

    @keyframes t_point3 {
        
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        74.9% {
            opacity: 0;
        }
        75% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }

    }

    .loading-content {
        color: #b4b4b4;
        font-family: 'Tajawal';
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    .loader-video-img {
        position: relative;
        width: 341px;
        left: 50%;
        top: 50%;
        transform: translate(-50.1%, -51%);
        opacity: 0;/**/
    }