 /* --- Preloader Styles --- */
        #preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #080025;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.8s ease, visibility 0.8s;
        }

        .loading-text {
            margin-top: 15px;
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.6;
        }

        /* New Circular Loader Styles */
        .loader-logo1 { /* Changed from .loader-logo */
            width: 150px; /* Consistent with HTML inline style */
            margin-bottom: 30px;
            filter: brightness(0) invert(1); /* Makes logo white if it's dark */
            animation: pulse 2s infinite ease-in-out;
        }

        .loader-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: relative;
            animation: pulse-circle 1.5s infinite ease-in-out;
        }

        .loader-circle::before,
        .loader-circle::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 3px solid transparent;
        }

        .loader-circle::before {
            width: 100%;
            height: 100%;
            border-top-color: var(--accent-gold); /* Use your accent color */
            border-left-color: var(--accent-gold);
            animation: spin 1.2s linear infinite;
        }

        .loader-circle::after {
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
            border-bottom-color: var(--primary-teal); /* Use another accent color */
            border-right-color: var(--primary-teal);
            animation: spin 1s linear infinite reverse;
        }

        .loading-text {
            margin-top: 25px; /* Adjusted margin */
            font-size: 0.8rem; /* Slightly larger */
            letter-spacing: 3px; /* More prominent */
            color: rgba(255, 255, 255, 0.8); /* White with opacity */
            animation: fadeInText 1s forwards 0.5s; /* Fade in after a delay */
        }
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }