.overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Overlay remains semi-transparent black */
            z-index: 99;
            display: flex;
            justify-content: center;
            align-items: center;

            transform: translateX(100%);
            visibility: hidden;
            transition: transform 0.6s ease-out, visibility 0.6s;
        }

        .overlay.is-visible {
            transform: translateX(0%);
            visibility: visible;
        }

        .loader-container {
            position: relative;
            z-index: 100;
        }

        /* --- C-Spinner Styles with new color --- */
        .c-spinner {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: relative;
            animation: spin 1.2s linear infinite;

            /* Updated background color for the C-shape */
            background: conic-gradient(from 90deg,
                                       rgba(66, 44, 56, 1) 0deg, /* New color */
                                       rgba(66, 44, 56, 1) 270deg, /* New color */
                                       transparent 270deg);

            mask-image: radial-gradient(circle at center, transparent 30px, black 30px);
            -webkit-mask-image: radial-gradient(circle at center, transparent 30px, black 30px);
        }

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