:root {
            --background-dark: linear-gradient(to right, #0f2027, #203a43, #2c5364);
            --background-light: #f9f9f9;
            --text-dark: #ffffff;
            --text-light: #333333;
            --button-dark: #0078ff;
            --button-dark-hover: #0059cc;
            --button-light: #4caf50;
            --button-light-hover: #45a049;
            --card-dark: rgba(0, 0, 0, 0.75);
            --card-light: #ffffff;
            --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            --heading-dark: #f9d342;
            --heading-light: #0078ff;
        }

        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background: var(--background-dark);
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 100vh;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .container {
            text-align: center;
            background: var(--card-dark);
            padding: 20px;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            max-width: 90%;
            width: 600px;
            margin: 20px auto;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        h1 {
            font-size: 2.5rem;
            font-family: 'Roboto Slab', serif;
            margin-bottom: 20px;
            color: var(--heading-dark);
        }

        p {
            font-size: 1rem;
            margin: 0 0 30px;
            line-height: 1.6;
        }

        .cta-button {
            display: inline-block;
            padding: 12px 25px;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            background: var(--button-dark);
            border: none;
            border-radius: 8px;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .cta-button:hover {
            background: var(--button-dark-hover);
            transform: scale(1.05);
        }

        footer {
            text-align: center;
            font-size: 0.8rem;
            color: #b0b0b0;
            padding: 10px 0;
            background: rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease, color 0.3s ease;
        }

        footer a {
            color: var(--heading-dark);
            text-decoration: none;
            font-weight: 600;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Light Theme */
        body.light-theme {
            background: var(--background-light);
            color: var(--text-light);
        }

        body.light-theme .container {
            background: var(--card-light);
            color: var(--text-light);
        }

        body.light-theme h1 {
            color: var(--heading-light);
        }

        body.light-theme .cta-button {
            background: var(--button-light);
        }

        body.light-theme .cta-button:hover {
            background: var(--button-light-hover);
        }

        body.light-theme footer {
            background: rgba(255, 255, 255, 0.1);
        }

        body.light-theme footer a {
            color: var(--heading-light);
        }

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Default Logo (Dark Mode) */
.logo {
    content: url('images/logo-dark.png'); /* Default to dark mode logo */
    width: 256px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Light Mode Logo */
@media (prefers-color-scheme: light) {
    .logo {
        content: url('images/logo-light.png'); /* Use light mode logo */
    }
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Stack logo and text */
    }

    .logo {
        width: 256px; /* Reduce size for smaller screens */
        margin-bottom: 10px; /* Spacing below logo */
    }
}