/* Use Inter font */
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(to right top, #f1f5f9, #e2e8f0, #cbd5e1, #94a3b8, #64748b); /* Subtle gradient background */
        }

        /* Style for active category button */
        .category-button.active {
            background-image: linear-gradient(to right, #1e40af, #1d4ed8); /* Darker gradient for active */
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px); /* Slight lift effect */
        }

        /* Animation for course list */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .course-list-animate {
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* Ensure icons align nicely with text */
        .category-button i {
            margin-right: 0.5rem; /* Space between icon and text */
            width: 1.2em; /* Ensure icons have consistent width */
            text-align: center;
        }
        .course-link i {
             margin-right: 0.5rem;
        }