.explore_courses {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    max-height: 85vh;
    overflow-y: scroll;
    scrollbar-width: none;



    .course_item {
        width: 32%;
        cursor: pointer;
    }

    .course_card_head {
        img {
            width: 100% !important;
            height: 220px;
            border-radius: 10px;
        }
    }


    .course-loading {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }


    .course-not-available {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .course_card_body {
        margin-top: 10px;

        button {
            font-size: 12px;
            padding: 2px 15px;
            border: none;
            background-color: #DCF4F6;
            outline: none;
            color: #44D9E1;
            border-radius: 3px;
        }

        h3 {
            color: #262626;
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
            line-height: 26px;
        }

        h4 {
            color: #0071DC;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            margin-top: -5px;
        }

        i{
            font-size: 14px;
        }

        p{
            font-size: 12px;
            line-height: 12px;
            margin-bottom: 0;
        }

    }



}

// .course_item {
//     min-height: 100px;
//     background-color: red;
//     width: 24%;
// }


.no_course_available {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;


    h2 {
        color: #262626;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}


// responsive



@media (max-width:992px) {
    

    .explore_courses {

        height: auto !important;
        overflow: visible !important;
        padding-bottom: 100px !important;

    }
}


@media (max-width:576px) {
    

    
    .course_item {
        width: 100% !important;
    }
}