body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #f8f9fa; /* Consistent light background */
        color: #343a40; /* Consistent text color */
    }

    #video-background {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1;
        background-size: cover;
        filter: brightness(60%) blur(2px);
    }

    /* Ensure modal backdrop transition is smooth */
    .modal-backdrop {
        transition: opacity 0.3s ease !important;
    }

    /* Spinner and logo container styles (kept consistent with original for visual effect) */
    .logo-circle-top {

    }

    .logo-circle-top img {
        width: 100%;
        height: 100%;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .spinner {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: 1px solid #00e1ff; /* Light blue accent */
        border-radius: 50%;
        animation: spin 1.4s linear infinite;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

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

    /* Main content hero sections */
    .hero-card {
        background-color: rgba(255, 255, 255, 0.1) !important; /* Slightly transparent white */
        color: #fff;
        backdrop-filter: blur(5px); /* Frosted glass effect */
        border: none;
        border-radius: 1.25rem; /* Consistent rounded corners */
        padding: 3rem; /* More padding */
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); /* Deeper shadow */
    }

    .hero-heading {
        color: #87ceeb; /* Softer blue for headings */
        font-weight: 700; /* Bolder headings */
    }

    .hero-text {
        color: rgba(255, 255, 255, 0.9); /* Slightly less opaque white for body text */
        font-size: 1.15rem; /* Slightly larger body text */
    }

    /* Feature cards below hero */
    .feature-card {
        background-color: rgba(255, 255, 255, 0.1) !important; /* Consistent transparent white */
        color: #fff;
        backdrop-filter: blur(5px); /* Frosted glass effect */
        border: none;
        border-radius: 1.25rem; /* Consistent rounded corners */
        padding: 3rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); /* Deeper shadow */
        height: 100%; /* Ensure cards are same height */
    }

    .feature-card h2 {
        color: #fff !important; /* Consistent heading color */
        font-weight: 700;
    }

    .feature-card p {
        color: rgba(255, 255, 255, 0.9);
    }

    /* Login Modal Specific Styles */
    #loginModal .modal-content {
        background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white for the modal */
        border-radius: 1.5rem; /* More rounded corners for the modal */
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25); /* Stronger shadow for modal */
        padding: 2rem; /* Inner padding for content */
    }

    #loginModal .modal-header {
        border-bottom: none; /* Remove header border */
        padding-bottom: 0;
    }

    #loginModal .modal-title {
        font-weight: 600;
        color: #212529; /* Dark text for modal title */
    }

    #loginModal .form-label {
        font-weight: 500;
        color: #495057; /* Darker labels */
        margin-bottom: 0.5rem;
    }

    /* Updated styles for input group to make icon appear inside */
    #loginModal .input-group {
        border: 1px solid #ced4da; /* Apply border to the whole input-group */
        border-radius: 0.75rem; /* Apply consistent border-radius */
        overflow: hidden; /* Ensures contents respect border-radius */
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow for the group */
    }

    #loginModal .input-group-text {
        background-color: transparent; /* Make background transparent */
        border: none; /* Remove border */
        color: #6c757d; /* Muted icon color */
        padding: 0.75rem 0.5rem 0.75rem 1rem; /* Adjust padding to push icon slightly right */
    }

    #loginModal .form-control {
        border: none; /* Remove individual input border */
        padding: 0.75rem 1rem 0.75rem 0.5rem; /* Adjust padding-left to account for icon */
        font-size: 1rem;
    }

    #loginModal .form-control:focus {
        box-shadow: none; /* Remove default focus shadow, we'll handle it on the input-group */
    }

    #loginModal .input-group:focus-within { /* Apply focus style to the whole group */
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

    #loginModal .btn-dark {
        background-color: #212529; /* Dark button background */
        border-color: #212529; /* Dark button border */
        border-radius: 2rem; /* Pill shape for buttons */
        padding: 0.75rem 1.5rem; /* More padding */
        font-weight: 600;
        transition: all 0.2s ease-in-out;
    }

    #loginModal .btn-dark:hover {
        background-color: #000000; /* Darker on hover */
        border-color: #000000;
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    #loginModal .alert {
        border-radius: 0.75rem; /* Rounded alerts */
        font-size: 0.9rem;
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
    }
    #loginModal .alert-danger {
        background-color: #f8d7da; /* Light red */
        color: #721c24; /* Dark red text */
        border-color: #f5c6cb;
    }
    #loginModal .alert-success {
        background-color: #d4edda; /* Light green */
        color: #155724; /* Dark green text */
        border-color: #c3e6cb;
    }

    .text-muted-subtle {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .btn-outline-warning {
        border-radius: 2rem;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.2s ease-in-out;
        border-color: rgba(255, 193, 7, 0.8) !important;
        color: rgba(255, 193, 7, 0.9) !important;
    }
    .btn-outline-warning:hover {
        background-color: rgba(255, 193, 7, 0.1) !important;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    /* Register link styling */
    #registerLink {
        color: #6c757d; /* Muted grey */
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease-in-out;
    }
    #registerLink:hover {
        color: #007bff; /* Bootstrap primary blue on hover */
    }