.loader_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    background-color: rgba(255, 255, 255, 0.8); /* Optional background */
    position: relative; /* Needed for absolute positioning of the logo */
    overflow: hidden; /* To hide overflow */
}

.logo {
    position: absolute; /* Position logo absolutely */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust positioning */
    opacity: 0.1; /* Make logo semi-transparent */
    z-index: 1; /* Ensure logo is behind the loader */
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2; /* Ensure loader is above the logo */
}

.spinner {
    border: 8px solid #f3f3f3; /* Light gray background */
    border-top: 8px solid #3498db; /* Blue color */
    border-radius: 50%;
    width: 60px; /* Size of the spinner */
    height: 60px; /* Size of the spinner */
    animation: spin 1s linear infinite; /* Spin animation */
    margin-bottom: 20px; /* Space between spinner and text */
}

.loading_text {
    font-size: 24px; /* Text size */
    color: #333; /* Text color */
}

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