#loader-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(28, 29, 41, 1);
display: flex;
justify-content: center;
align-items: center;
z-index: 999999; 
}

#loader-animation svg {
width: 250px; 
height: 250px;
}


@-webkit-keyframes animate-svg-stroke-1 {
0% {
stroke-dashoffset: 2137.269287109375px;
stroke-dasharray: 2137.269287109375px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 2137.269287109375px;
}
}

@keyframes animate-svg-stroke-1 {
0% {
stroke-dashoffset: 2137.269287109375px;
stroke-dasharray: 2137.269287109375px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 2137.269287109375px;
}
}

@-webkit-keyframes animate-svg-fill-1 {
0% {
fill: transparent;
}

100% {
fill: rgb(255, 255, 255);
}
}

@keyframes animate-svg-fill-1 {
0% {
fill: transparent;
}

100% {
fill: rgb(255, 255, 255);
}
}

.svg-elem-1 {
-webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.8s both;
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
       animate-svg-fill-1 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.8s both;
       animation-iteration-count: infinite;
       animation-direction: alternate;
}

@-webkit-keyframes animate-svg-stroke-2 {
0% {
stroke-dashoffset: 475.59375px;
stroke-dasharray: 475.59375px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 475.59375px;
}
}

@keyframes animate-svg-stroke-2 {
0% {
stroke-dashoffset: 475.59375px;
stroke-dasharray: 475.59375px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 475.59375px;
}
}

@-webkit-keyframes animate-svg-fill-2 {
0% {
fill: transparent;
}

100% {
fill: rgb(245, 105, 198);
}
}

@keyframes animate-svg-fill-2 {
0% {
fill: transparent;
}

100% {
fill: rgb(245, 105, 198);
}
}

.svg-elem-2 {
-webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
               animate-svg-fill-2 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.9s both;
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
       animate-svg-fill-2 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
0% {
stroke-dashoffset: 2849.187744140625px;
stroke-dasharray: 2849.187744140625px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 2849.187744140625px;
}
}

@keyframes animate-svg-stroke-3 {
0% {
stroke-dashoffset: 2849.187744140625px;
stroke-dasharray: 2849.187744140625px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 2849.187744140625px;
}
}

.svg-elem-3 {
-webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
               animate-svg-fill-3 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s both;
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
       animate-svg-fill-3 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
0% {
stroke-dashoffset: 633.7813720703125px;
stroke-dasharray: 633.7813720703125px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 633.7813720703125px;
}
}

@keyframes animate-svg-stroke-4 {
0% {
stroke-dashoffset: 633.7813720703125px;
stroke-dasharray: 633.7813720703125px;
}

100% {
stroke-dashoffset: 0;
stroke-dasharray: 633.7813720703125px;
}
}

.svg-elem-4 {
-webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
               animate-svg-fill-4 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s both;
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
       animate-svg-fill-4 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s both;
}