body {
            background-color: #f8f9fa;
        }

        .category-card {
            cursor: pointer;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            border: 2px solid #e0f2f1;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        }

        .category-card.active {
            border-color: #00897b;
            background-color: #e0f2f1;
        }

        .category-card .bi {
            font-size: 2.5rem;
            color: #00897b;
            margin-bottom: 0.5rem;
        }

        .modal-header-custom {
            background-color: white;
            color: white;
            border-bottom: none;
            padding: 1.5rem;
            position: relative;
        }

        .modal-header-custom .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            opacity: 1;
        }

        .modal-title-custom {
            font-size: 1.75rem;
            font-weight: bold;
            text-align: center;
            width: 100%;
        }

        .modal-body {
            background: linear-gradient(to bottom, #ffffff 38%, #008080 38%);
            padding: 2rem;
        }

        .course-card-modal {
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            overflow: hidden;
            border: none;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .course-card-modal .card-img-top {
            height: 183px;
            object-fit: cover;
            width: 100%;
            object-position: top;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .course-card-modal .card-body {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .course-card-modal .provider-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .course-card-modal .provider-bar .provider-name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #363636;
            background-color: #f7f7f7; /* Background moved here */
            border: 1px solid #e0e0e0;   /* Border moved here */
            padding: 0.25rem 0.5rem;   /* Padding moved here */
            border-radius: 4px;        /* Added for a slightly rounded look */
        }

        .course-card-modal .provider-bar .demo-logo img {
            height: 25px;
            width: auto;
        }

        .course-card-modal .course-name-label,
        .course-card-modal .course-description-label {
            font-size: 0.75rem;
            color: #888;
            margin-bottom: 0.1rem;
        }

        .course-card-modal .course-name-link {
            font-size: 1.1rem;
            font-weight: bold;
            color: #333;
            text-decoration: none;
            display: block;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid #008080;
            transition: color 0.2s ease;
        }

        .course-card-modal .course-name-link:hover {
            color: #005959;
        }

        .course-card-modal .card-text {
            font-size: 0.9rem;
            color: #555;
            line-height: 1.5;
            flex-grow: 1;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid #008080;
        }

        .course-card-modal .card-footer-custom {
            background-color: white;
            border-top: none;
            padding: 0 1rem 1rem;
            text-align: left;
        }

        .course-card-modal .course-website {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.85rem;
        }

        .course-card-modal .course-website:hover {
            text-decoration: underline;
        }