/* Professional Animated Loader */
#page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f4f6f9;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-preloader.preloader-visible {
    opacity: 1;
    visibility: visible;
}

.loader-container {
    position: relative;
    width: 120px;
    height: 120px;
    /* Add Flexbox to center content */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

.loader-logo {
    width: 80px;
    height: 80px;
    /* Ensure a perfect circle with 50% border-radius */
    border-radius: 50%;
    /* No need for 'overflow: hidden' here, as 'border-radius' handles it */
    overflow: hidden; 
    /* Remove 'position: absolute', 'top', and 'left' to allow flexbox to center it */
    position: relative; 
    top: auto;
    left: auto;
    z-index: 10;
    animation: loader-pulse 2s ease-in-out infinite;
}

.loader-logo img {
    width: 100%;
    height: 100%;
    /* Ensure the image fills the circular container */
    object-fit: cover;
}

.loader-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 5px solid transparent;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px #3498db, 0 0 25px #9b59b6, 0 0 35px #e74c3c;
}

/* Spinner Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loader Logo Pulse Animation */
@keyframes loader-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px #2ecc71;
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px #2ecc71;
    }
}