/* Loader container */
.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space between dots */
}

    /* Dots styling */
    .loading-dots span {
        width: 15px;
        height: 15px;
        background-color: #3498db; /* Blue color */
        border-radius: 50%; /* Make dots circular */
        animation: fade 1.5s infinite ease-in-out;
    }

        /* Delay each dot's animation */
        .loading-dots span:nth-child(1) {
            animation-delay: 0s;
        }

        .loading-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

/* Animation for the dots */
@keyframes fade {
    0%, 80%, 100% {
        opacity: 0; /* Fade out */
        transform: scale(0.8); /* Slight shrink */
    }

    40% {
        opacity: 1; /* Full visibility */
        transform: scale(1.2); /* Slight bounce */
    }
}