body {
    background-color: #f4f4f4;
}

.card:hover {
    transform: translateY(-5px); /* Slightly moves the card upwards */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Enhances the shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-img-top {
    width: 100%; /* Ensure the image takes up the full width of the card */
    height: auto; /* Maintain the aspect ratio of the image */
    object-fit: contain; /* Prevent cropping by containing the image within the bounds */
    max-height: 200px; /* Limit the height to avoid overly tall images */
    background-color: #f8f9fa; /* Optional: Add a background color for padding effect */
    padding: 5px; /* Optional: Add padding around the image */
}

.bg-light-gray {
    background-color: #f5f5f5 !important;
}

h1.text-primary {
    color: #6b46c1 !important; /* Match your original purple */
    margin-top: 60px;
}

.btn-danger:hover {
    background-color: red !important; /* Matches your original red hover for unenroll */
}

.container .row .col-md-6 {
    margin-bottom: 1rem; /* Space between course cards */
}

.see-more-link {
    color: #1201fa7c; /* Matches the primary color */
    cursor: pointer;
    font-weight: medium;
    text-decoration: none;
    font-size: 12px;
}

.see-more-link:hover {
    color: #563d7c; /* Slightly darker shade for hover */
}

/* Desktop-specific styles (unchanged) */
h1.text-primary {
    color: #6b46c1 !important; /* Match your original purple */
    margin-top: 115px !important;
}

/* Responsive design for mobile view */
@media (max-width: 768px) {
    /* Adjust program name position for mobile */
    .program-name-container {
        background-color: #6b46c1; /* Make it prominent with the purple background */
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 999;
    }

    .program-name {
        color: white !important;
        font-size: 1.2rem;
        margin-top: 0;
        padding: 0;
    }

    .container.my-5 {
        padding-top: -90px !important; /* Ensure content is not overlapped by the fixed program name */
    }

    .card {
        margin: 10px 0; /* Add spacing between cards */
    }

    .card-img-top {
        max-height: 150px; /* Adjust image height for smaller screens */
    }

    .btn {
        font-size: 0.9rem; /* Resize buttons */
    }

    .see-more-link {
        font-size: 10px; /* Make the link smaller for mobile view */
    }

    .btn-success.btn-sm {
    padding: 6px 16px;
    font-size: 0.9rem;
    border-radius: 5px;
    background-color: #6b46c1;
    border: none;
    font-weight: 500;
    }

    .btn-success.btn-sm:hover {
        background-color: #6b46c1;
    }

}