/*.loader {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 30px;*/
/*    margin-top: 20px;*/
/*    gap: 10px;*/
/*}*/

/*.progress-dot {*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    background-color: #2557a7;*/
/*    border-radius: 50%;*/
/*    animation: bounce 1s infinite ease-in-out;*/
/*}*/

/*!* Add a delay for each progress-dot to create the wave effect *!*/
/*.progress-dot:nth-child(1) {*/
/*    animation-delay: 0s;*/
/*}*/
/*.progress-dot:nth-child(2) {*/
/*    animation-delay: 0.1s;*/
/*}*/
/*.progress-dot:nth-child(3) {*/
/*    animation-delay: 0.2s;*/
/*}*/
/*.progress-dot:nth-child(4) {*/
/*    animation-delay: 0.3s;*/
/*}*/
/*.progress-dot:nth-child(5) {*/
/*    animation-delay: 0.4s;*/
/*}*/
/*.progress-dot:nth-child(6) {*/
/*    animation-delay: 0.5s;*/
/*}*/
/*.progress-dot:nth-child(7) {*/
/*    animation-delay: 0.6s;*/
/*}*/
/*.progress-dot:nth-child(8) {*/
/*    animation-delay: 0.7s;*/
/*}*/
/*.progress-dot:nth-child(9) {*/
/*    animation-delay: 0.8s;*/
/*}*/
/*.progress-dot:nth-child(10) {*/
/*    animation-delay: 0.9s;*/
/*}*/

/*@keyframes bounce {*/
/*    0%, 100% {*/
/*        transform: translateY(0);*/
/*    }*/
/*    50% {*/
/*        transform: translateY(-10px);*/
/*    }*/
/*}*/

.loader {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    gap: 0.25em;
    position: relative;
    overflow: hidden;
}

.word {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.word.left {
    color: #3470CA;
    animation: slideLeft 1.0s ease-in-out infinite alternate; /* Faster movement */
}

.word.middle {
    color: #004080;
    animation: bounceUpDown 1.0s ease-in-out infinite alternate; /* Faster movement */
}

.word.right {
    color: #3470CA;
    animation: slideRight 1.0s ease-in-out infinite alternate; /* Faster movement */
}

/* Keyframes */
@keyframes bounceUpDown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

@keyframes slideLeft {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

@keyframes slideRight {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(20px); }
    100% { transform: translateX(0); }
}