.loader-container {
    position: absolute;
    width: 15rem;
    height: 15rem;
    margin: auto;
    top: 50%;
    left: 50%;
}

.loader-container .loader {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 0.2rem transparent;
    border-top-color: #09202e;
    border-left-color: #09202e;
    animation: loader 1.5s linear infinite;
    -webkit-animation: loader 1.5s linear infinite;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.loader-container .loader2 {
    position: absolute;
    width: 95%;
    height: 95%;
    border: solid 0.1rem transparent;
    border-top-color: #f8ba02;
    border-left-color: #f8ba02;
    animation: loader2 1.25s linear infinite;
    -webkit-animation: loader2 1.25s linear infinite;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.loader-container .loader3 img {
    position: absolute;
    width: 70%;
    height: 70%;
    animation: loader3 2s alternate infinite;
    -webkit-animation: loader3 5s alternate-reverse infinite;
    -moz-animation: loader3 2s alternate infinite;
    -ms-animation: loader3 2s alternate infinite;
    -o-animation: loader3 2s alternate infinite;

}

.row>* {
    padding-left: calc(var(--bs-gutter-x)* none) !important;
}

@keyframes loader {
    0% {
        transform: translate(-50%, -50%)rotate(0deg);
        -webkit-transform: translate(-50%, -50%)rotate(0deg);
        -moz-transform: translate(-50%, -50%)rotate(0deg);
        -ms-transform: translate(-50%, -50%)rotate(0deg);
        -o-transform: translate(-50%, -50%)rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes loader2 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        -moz-transform: translate(-50%, -50%) rotate(-360deg);
        -ms-transform: translate(-50%, -50%) rotate(-360deg);
        -o-transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes loader3 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        -webkit-transform: translate(-50%, -50%) scale(0);
        -moz-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        -o-transform: translate(-50%, -50%) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
        -moz-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        -o-transform: translate(-50%, -50%) scale(1);
    }
}