.already_enrolled {

    width: 100;
    height: 80vh;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

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

    button {
        padding: 10px 20px;
        border: none;
        outline: none;
        border-radius: 30px;
        background: #0071DC;
        color: #FFF;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
}

.enrollCourses {

    width: 100;
    height: 80vh;
    overflow: scroll;
    scrollbar-width: none;
    background-color: white;
    border-radius: 10px;
    padding: 20px;

    .enroll_content {

        display: flex;
        justify-content: center;
        flex-direction: column;

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

        p {
            color: #A6A6A6;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

        button {
            padding: 10px 20px;
            border: none;
            outline: none;
            border-radius: 30px;
            background: #0071DC;
            color: #FFF;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            width: 30%;
        }

        .tags {

            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            button {
                padding: 10px 20px;
                border: none;
                outline: none;
                border-radius: 10px;
                background: #F1F3F8;
                color: #262626;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                width: fit-content;
            }
        }
    }

    .enroll_img {

        img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
        }
    }


    .about_instructor {

        width: 100%;
        min-height: 100px;
        border-radius: 10px;
        background-color: #F1F3F8;
        padding: 20px;

        button {
            padding: 10px 20px;
            border: none;
            outline: none;
            border-radius: 10px;
            background: #ffffff;
            color: #262626;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            width: fit-content;
        }

        p {
            color: #A6A6A6;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
        }

        img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .instructor_metedata {

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

            p {
                color: #A6A6A6;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
    }

    .course_review {

        width: 100%;
        min-height: 200px;
        border-radius: 10px;
        background-color: #F1F3F8;
        padding: 20px;

        button {
            padding: 10px 20px;
            border: none;
            outline: none;
            border-radius: 10px;
            background: #ffffff;
            color: #262626;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            width: fit-content;
        }

        .review_item {
            width: 100%;
            min-height: 100px;
            border-radius: 10px;
            background-color: #0071DC;
            padding: 20px;

            h6 {
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }
        }
    }

}


// responsive

@media (max-width:992px) {


    .enrollCourses,
    .already_enrolled {

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



    }

    .enroll_content{

        button{
            width: fit-content !important;
        }
    
    }
}