/* Loader Styles */
 .loader {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1117;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, z-index 0.5s ease-in-out;
}

.loader.remove {
    opacity: 0;
    z-index: -1000;
}

.loader .ring {
    position: absolute;
    border: 8px solid transparent;
    border-radius: 50%;
    animation: spin 1.5s infinite ease-in-out;
}

.loader .ring.one {
    border-top: 8px solid #00A8E8; /* Cyan */
}

.loader .ring.two {
    border-top: 8px solid #3F72AF; /* Blue */
}

.loader .ring.three {
    border-top: 8px solid #84CEEB; /* Light Blue */
}

.loader::after {
    content: '';
    position: absolute;
    background: #00A8E8;
    border-radius: 50%;
}

/* Default Sizes for Rings */
.loader .ring.one {
    width: 120px;
    height: 120px;
    animation-delay: -0.2s;
}

.loader .ring.two {
    width: 90px;
    height: 90px;
    animation-delay: -0.4s;
}

.loader .ring.three {
    width: 70px;
    height: 70px;
    animation-delay: -0.6s;
}

.loader::after {
    width: 20px;
    height: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Media Query for Small Devices */
@media (max-width: 600px) {
    .loader .ring.one {
        width: 70px;
        height: 70px;
        border-width: 8px;
    }

    .loader .ring.two {
        width: 60px;
        height: 60px;
        border-width: 8px;
    }

    .loader .ring.three {
        width: 50px;
        height: 50px;
        border-width: 8px;
    }

    .loader::after {
        width: 12px;
        height: 12px;
    }
}

/* Media Query for Large Devices */
@media (min-width: 731px) {
    .loader .ring.one {
        width: 180px;
        height: 180px;
        border-width: 15px;
    }

    .loader .ring.two {
        width: 150px;
        height: 150px;
        border-width: 15px;
    }

    .loader .ring.three {
        width: 120px;
        height: 120px;
        border-width: 15px;
    }

    .loader::after {
        width: 30px;
        height: 30px;
    }
}