.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  background: linear-gradient(90deg, rgba(0, 30, 34, 1) 0%, rgb(23 51 55) 50%, rgba(15, 83, 92, 1) 100%);
  transition: opacity 1s ease, visibility 1s ease; 
  z-index: 9999;
}

.preloader.hidden-preloader {
  opacity: 0;
  visibility: hidden;
}


.preloader svg {
    width: 100%;
    height: 100%;
    max-width: 500px;
    margin: 32px;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-1 {
    -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
    animation: animate-svg-fill-1 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-2 {
    -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
    animation: animate-svg-fill-2 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-3 {
    -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
    animation: animate-svg-fill-3 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-4 {
    -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s both;
    animation: animate-svg-fill-4 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-5 {
    -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2000000000000002s both;
    animation: animate-svg-fill-5 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2000000000000002s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-6 {
    -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s both;
    animation: animate-svg-fill-6 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-7 {
    -webkit-animation: animate-svg-fill-7 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4000000000000001s both;
    animation: animate-svg-fill-7 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4000000000000001s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-8 {
    -webkit-animation: animate-svg-fill-8 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
    animation: animate-svg-fill-8 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

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

    100% {
        fill: rgb(237, 184, 110);
    }
}

.svg-elem-9 {
    -webkit-animation: animate-svg-fill-9 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s both;
    animation: animate-svg-fill-9 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s both;
}