.fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh; /* Full viewport height */
}

.centered-box {
    padding: 14px;
    width: 600px; /* Box width */
    text-align: center;
}
/*image circle run*/
/* Image that will rotate */
.rotating-image {
    /*transform: translate(-50%, -150%);*/ /* Shift the image to the edge */
    width: 140px;
    height: 115px;
    border-radius: 50%; /* Optional: make the image round */
    animation: circleAnimation 4s linear infinite;
}

/* Keyframes for circular motion */
@keyframes circleAnimation {
    0% {
        transform: translate(-50%, -150%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -150%) rotate(360deg);
    }
}



/*loading*/
:root {
    --bg: #e3e4e8;
    --fg: #17181c;
    --c1: #f42f25;
    --c2: #f49725;
    --c3: #255ff4;
    --c4: #9725f4;
}

.pl1, .pl2 {
    justify-content: space-around;
}

.pl1__a, .pl1__b, .pl1__c, .pl2__a, .pl2__b, .pl2__c {
    border-radius: 20%;
    width: 10px;
    height: 10px;
    transform-origin: 25% 75%;
}

.pl1__a, .pl1__b, .pl1__c {
    animation: bounce1 2s linear infinite;
}

.pl2__a, .pl2__b, .pl2__c {
    animation: bounce2 3s linear infinite;
}

.pl3, .pl4 {
    justify-content: space-between;
}

.pl3__a, .pl3__b, .pl3__c, .pl3__d, .pl4__a, .pl4__b, .pl4__c, .pl4__d {
    width: 0.75em;
    height: 0.75em;
}

.pl3__a, .pl3__b, .pl3__c, .pl3__d {
    animation: bounce3 3s ease-in-out infinite;
    transform-origin: 50% 0;
}

.pl4 {
    align-items: flex-end;
}

.pl4__a, .pl4__b, .pl4__c, .pl4__d {
    animation: bounce4 3s linear infinite;
    transform-origin: 50% 100%;
}

.pl1, .pl2, .pl3, .pl4 {
    display: flex;
    margin: 1.5em;
    width: 4em;
    height: 2em;
}

.pl1__a, .pl2__a, .pl3__a, .pl4__a {
    background: white;
}

.pl1__b, .pl2__b, .pl3__b, .pl4__b {
    background: white;
    animation-delay: 0.1s;
}

.pl1__c, .pl2__c, .pl3__c, .pl4__c {
    background: white;
    animation-delay: 0.2s;
}

.pl3__d, .pl4__d {
    background: white;
    animation-delay: 0.3s;
}

/* Animations */
@keyframes bounce1 {
    from, to {
        transform: translateY(0) scale(1, 1);
        animation-timing-function: ease-in;
    }

    45% {
        transform: translateY(5em) scale(1, 1);
        animation-timing-function: linear;
    }

    50% {
        transform: translateY(5em) scale(1.5, 0.5);
        animation-timing-function: linear;
    }

    55% {
        transform: translateY(5em) scale(1, 1);
        animation-timing-function: ease-out;
    }
}

@keyframes bounce2 {
    from, to {
        transform: translateY(0) scale(1, 1);
        animation-timing-function: ease-in;
    }

    9%, 29%, 49%, 69% {
        transform: translateY(5em) scale(1, 1);
        animation-timing-function: linear;
    }

    10% {
        transform: translateY(5em) scale(1.5, 0.5);
        animation-timing-function: linear;
    }

    11%, 31%, 51%, 71%, 91% {
        transform: translateY(5em) scale(1, 1);
        animation-timing-function: ease-out;
    }

    20% {
        transform: translateY(2.5em) scale(1, 1);
        animation-timing-function: ease-in;
    }

    30% {
        transform: translateY(5em) scale(1.25, 0.75);
        animation-timing-function: linear;
    }

    40% {
        transform: translateY(3.75em) scale(1, 1);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateY(5em) scale(1.125, 0.875);
        animation-timing-function: linear;
    }

    60% {
        transform: translateY(4.375em) scale(1, 1);
        animation-timing-function: ease-in;
    }

    70% {
        transform: translateY(5em) scale(1.0625, 0.9375);
        animation-timing-function: linear;
    }

    85% {
        transform: translateY(5em) scale(1, 1);
        animation-timing-function: ease-in;
    }

    90% {
        transform: translateY(5em) scale(1.875, 0.125);
        animation-timing-function: ease-in-out;
    }
}

@keyframes bounce3 {
    from, 5%, 95%, to {
        transform: translateY(0) scaleY(1);
    }

    16.7% {
        transform: translateY(0) scaleY(8);
    }

    28.3%, 38.3% {
        transform: translateY(5.25em) scaleY(1);
    }

    50% {
        transform: translateY(2.625em) scaleY(4.5);
    }

    61.7%, 71.7% {
        transform: translateY(2.625em) scaleY(1);
    }

    83.3% {
        transform: translateY(0) scaleY(4.5);
    }
}

@keyframes bounce4 {
    from, 20%, 40%, 60%, 80%, to {
        transform: scaleY(1);
        animation-timing-function: ease-out;
    }

    10% {
        transform: scaleY(8);
        animation-timing-function: ease-in;
    }

    30% {
        transform: scaleY(4);
        animation-timing-function: ease-in;
    }

    50% {
        transform: scaleY(2);
        animation-timing-function: ease-in;
    }

    70% {
        transform: scaleY(1.5);
        animation-timing-function: ease-in;
    }
}