.spinner-container {
                display: flex;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 9999;
                opacity: 1;
                justify-content: center;
                align-items: center;
            }

            .spinner-container.show {
                display: flex;
            }

            /* Apply fade-out animation when spinner container is hidden */


            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            @keyframes fadeOut {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }

            .spinner {
                position: relative;
                width: 60px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            /* Spinning border */
            .spinner-border2 {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: conic-gradient(#5d16ec, #0b43ff, #eb0ea5, #5d16ec);
                animation: spin 1.4s linear infinite;
                box-shadow: 0px 0px 150px -75px black;
                z-index: 1;
            }
            
            /* Static logo container */
            .logo-container {
                position: relative;
                width: 86%;
                height: auto;
                z-index: 2; /* Ensure it stays on top of the spinning border */
            }
            
            .logo-container svg {
                display: block;
                width: 100%;
                height: auto;
            }

            .spinner::before {
                content: "";
                background-color: transparent;
                position: absolute;
                width: 88%;
                height: 88%;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: inset 0px 0px 110px -70px black;
                border: 1px solid white;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            @keyframes spin-reverse {
                to {
                    transform: translate(-50%, -50%) rotate(-360deg); /* Reverse rotation for SVG */
                }
            }

            .spinner2 {
                z-index: 9999;
                position: fixed!important;
                top: 24px;
                right: 24px;
            }