/* Preloader styling */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease;
        /* Smooth fade effect */
    }

    /* Hidden state for smooth fade-out */
    #preloader.hidden {
        opacity: 0;
        visibility: hidden;
    }

    /* Loader container with logo */
    #loader-container {
        position: relative;
        width: 120px;
        height: 120px;
    }

    /* Spinner ring */
    #loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 10px solid #f3f3f3;
        border-top: 10px solid #009fc6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* Centered logo inside loader */
    #loader-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
    }

    /* Keyframes for spinning */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }