/* 1. Container: Establishes a positioning context for its children */
.loading-container {
    /* Critical for absolute positioning of children */
    position: relative; 
    /* Good practice to define a size if the children don't fully cover it */
    width: 300px; /* Example width - adjust as needed */
    height: 300px; /* Example height - adjust as needed */
    margin: 50px auto; /* Centers the whole container on the page */
}

/* 2. Image: Absolute positioning and perfect centering */
.logo-center {
    position: absolute;
    z-index: 1; /* Puts the image underneath the loader */
    
    /* Perfect centering technique */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Ensure the image doesn't define the container size if it's too large */
    max-width: 100%; 
    height: auto;
}

/* 3. Loader: Absolute positioning and perfect centering, on top */
.loader {
    position: absolute;
    z-index: 2; /* Puts the loader on top of the image */

    /* Perfect centering technique */
    /* Note: We will include this transform in the @keyframes */
    top: 45%;
    left: 48.5%;
    transform: translate(-50%, -50%);
    
    /* Existing styling for appearance */
    width: 65px;
    height: 65px;
    border: 9px solid rgba(255, 255, 255, 0.61);
    border-top: 9px solid #e70e15;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

/* 4. Animation: Must include the centering transform */
@keyframes spin {
    /* Ensures the element remains perfectly centered while rotating */
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}