/* Preloader overlay styles */
    #preloaderOverlay {
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    #pageLoader {
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Loader styles */
    .loader {
        width: 120px;
        height: 120px;
        position: relative;
        border: 10px solid #33b4b4; /* Adjust the border color */
        border-top: 10px solid #8FBC8F; /* Adjust the top border color */
        border-radius: 50%;
        animation: spin 1.5s linear infinite;
        margin-bottom: 16px; /* Adjust the spacing between the loader and text */
        overflow: hidden; /* Hide overflow for the jumping ball */
        position: relative;
    }

    .inner-loader {
        width: 100%;
        height: 100%;
        border: 8px solid transparent;
        border-top: 8px solid #8FBC8F; /* Adjust the top border color */
        border-radius: 50%;
        animation: spin 1s linear infinite reverse; /* Reverse the inner spinner animation */
    }

    /* Jumping ball styles */
    .jumping-ball {
        width: 20px;
        height: 20px;
        background-color: #FF6347; /* Initial color */
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        animation: jump 1s ease-in-out infinite, changeColor 3s ease-in-out infinite;
    }

    /* Text styles */
    .loader-text {
		color: #fff; /* Adjust the text color */
		font-size: 18px; /* Adjust the text size */
		font-weight: bold; /* Add font-weight for a bold appearance */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Add text shadow for better visibility */
		letter-spacing: 1px; /* Add letter-spacing for better readability */
    }

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

    @keyframes jump {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    @keyframes changeColor {
        0%, 25% { background-color: #FF6347; }
        50%, 75% { background-color: #00FF00; }
        100% { background-color: #FF6347; }
    }

	/* Bouncing balls styles */
    .bouncing-balls {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .ball {
        width: 20px;
        height: 20px;
        background-color: #3498db; /* Initial ball color */
        border-radius: 50%;
        position: absolute;
        animation: bounceBall 1.5s ease-in-out infinite;
    }

    /* Bouncing balls styles with pastel colors */
    .ball1 { animation-delay: 0.2s; background-color: #FFD700; } /* Pastel yellow */
    .ball2 { animation-delay: 0.4s; background-color: #FFA07A; } /* Light salmon */
    .ball3 { animation-delay: 0.6s; background-color: #98FB98; } /* Pale green */
    .ball4 { animation-delay: 0.8s; background-color: #ADD8E6; } /* Light blue */
    .ball5 { animation-delay: 1.0s; background-color: #FFC0CB; } /* Pink */

    @keyframes bounceBall {
        0%, 100% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(-30px) translateX(-30px); }
        50% { transform: translateY(0) translateX(0); }
        75% { transform: translateY(-30px) translateX(30px); }
    }

    /* Random color change */
    @keyframes changeColor {
        0%, 20% { background-color: #3498db; }
        40% { background-color: #e74c3c; }
        60% { background-color: #2ecc71; }
        80% { background-color: #f39c12; }
        100% { background-color: #3498db; }
    }