/* page loading */


.page-loading {
    width: 100%;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F4F9FF;
}



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

    h1 {
        color: #031F42;
        font-size: 54px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    input {
        padding: 20px;
        width: 45%;
        border: none;
        outline: none;
        border-radius: 10px;
        // color: #A6A6A6;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}

.courses_content {


    h6 {
        color: #262626;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 26px;
    }
}

.courses_list {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .course-card {
        width: 24%;
    }

    .courses_card_btns {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 10px;

        .courses_card_btn {
            font-size: 12px;
            padding: 2px 5px;
            border: none;
            outline: none;
            color: white;
            border-radius: 3px;
        }
    }



    .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: 12px;
            font-weight: 600;
            margin-top: 10px;
            line-height: 20px;
        }

        h4 {
            color: #0071DC;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            margin-top: -5px;
        }
        p{
            color: rgb(115, 115, 0);
            font-size: 12px;
            line-height: 10px;
        }

    }



}



// responsive

@media (max-width:992px) {
    .courses_list{

        .course-card{
            width: 32%;
        }

    }
}


@media (max-width:768px) {
    .courses_list{

        .course-card{
            width: 49%;
        }

    }
}


@media (max-width:576px) {
    .courses_list{

        .course-card{
            width: 100%;

            img{
                width: 80% !important;
            }
        }

    }
}

