/* Define a reusable keyframe animation for spinning */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Style the global loader container */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Add some transparency to the background */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style the spinner element */
.whirly-loader {
    width: 100px; /* Adjust the size of the loader */
    height: 100px; /* Adjust the size of the loader */
    border-radius: 50%; /* Ensure a perfect circle */
    border: 2px solid #1353aa; /* Adjust border color and thickness */
    border-top-color: transparent; /* Hide the top border to create a spinner */
    animation: spin 1.25s linear infinite; /* Apply the spinning animation */
    position: relative; /* Positioning context for the logo */
}

/* Style the logo */
.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the logo within the spinner */
    width: 100px; /* Adjust the size of the logo */
    height: 100px; /* Adjust the size of the logo */
    background-image: url('../img/logo.jpg'); /* Replace 'path_to_your_logo.png' with the path to your logo */
    background-size: cover; /* Ensure the logo fills the container */
    border-radius: 50%; /* Ensure a circular shape for the logo */
}