.loader{
    width: 100% ;
    height: 100vh;
    background: black ;
    position: absolute;
    top:0 ;
    left:0 ;
}


#logo{
position: absolute ;
top: 50% ;
left : 50% ;
transform: translate(-50% , -50%)
}


#logo path{
    stroke-dasharray: 420px ;
    stroke-dashoffset: 420px ;
    animation : line-anim  4s infinite  ease-in-out ;
    animation-direction: alternate-reverse;
    stroke-opacity: 1


}

#logo1{
    position: absolute ;
    top: 50% ;
    left : 50% ;
    transform: translate(-50% , -50%) ;
    opacity: 0.2;

    }


#logo2{
    position: absolute ;
    top: 50% ;
    left : 50% ;
    transform: translate(-50% , -50%) ;
    opacity: 0.3;

    }
    #logo3{
        position: absolute ;
        top: 50% ;
        left : 50% ;
        transform: translate(-50% , -50%) ;
        opacity: 0.4;

        }

        #logo4{
            position: absolute ;
            top: 50% ;
            left : 50% ;
            transform: translate(-50% , -50%) ;
            opacity: 0.3;

            }


    #logo1 path{
        stroke-dasharray: 20px ;
        stroke-dashoffset: 20px ;
        animation : line-anim 2s infinite ease-in-out ;
        animation-direction: alternate-reverse;


    }

    #logo2 path{
        stroke-dasharray: 30px ;
        stroke-dashoffset: 30px ;
        animation : line-anim1 3s infinite ease-in-out ;
        animation-direction: alternate-reverse;


    }


    #logo3 path{
        stroke-dasharray: 220px ;
        stroke-dashoffset: 220px ;
        animation : line-anim1 4s infinite ease-in-out ;
        animation-direction: alternate-reverse;
        stroke-opacity: inherit

    }

    #logo4 path{
        stroke-dasharray: 700px ;
        stroke-dashoffset: 700px ;
        animation : line-anim1  4s infinite ease-in;
        animation-direction: alternate-reverse; }



@keyframes line-anim{
    to{
        stroke-dashoffset: 0 ;
         ;


    }
}



@keyframes line-anim1{
    to{
        stroke-dashoffset: 0 ;
        stroke-opacity: 0.9 ;


    }
}