.image_planner_user {
    width           : 100%;
    height          : 552px;
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : -1;
    display         : flex;
    justify-content : flex-end;
    flex-direction  : column;
}

.main_container {
    /* backdrop-filter: blur(12px); */
    /* background: rgba(9, 10, 31, 1) ; */
    background:  rgba(9, 10, 31, 1);
}

.planner-banner {
    width           : 100%;
    display         : flex;
    justify-content : flex-start;
    flex-wrap       : wrap;
    padding         : 0 20px 30px 20px;
    margin-top      : 320px;
}

.planner-banner-background {
    width           : 100%;
    height          : 100%;
    display         : flex;
    justify-content : flex-end;
    flex-direction  : column;
    background      : transparent linear-gradient(360deg, #090A1F 0%, #090A1FD2 10%, #090A1F00 50%) 0 0 no-repeat padding-box;
}

.planner-data-container {
    width           : 50%;
    display         : flex;
    justify-content : flex-end;
    flex-direction  : column;
    min-width       : 300px;
    padding-bottom  : 20px;
    cursor          : default;
}

.planner_course_banner {
    font-size  : 50px;
    font-family: Montserrat, serif;
    font-weight: 800;
    color      : #FFFFFF;
    margin-bottom: 5px;
}

.planner_details_banner {
    width          : 100%;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: flex-start;
    color          : white;
    font-size      : 15px;
    /* margin-bottom  : 15px; */
    font-weight    : 500;
}

.planners_banner_views {
    max-width    : 65%;
    padding-right: 15px;
    border-right : 1px solid #a9a7a7;
}

.time_course_add {
    /* max-width     : 35%; */
    margin-left   : 15px;
}

.planner_description_banner {
    width          : 100%;
    max-width      : 401px;
    font-size      : 15px;
    font-family: Montserrat, serif;
    line-height    : 20px;
    font-weight    : 500;
    color          : #FFFFFF;

}

.video_course_planner {
    width            : 50%;
    /* height           : 298px; */
    display          : flex;
    justify-content  : flex-end;
    align-items      : flex-end;
}

.button_text {
    font-weight    : 600;
    font-size      : 15px;
    font-family: Montserrat, serif;
    color          : #090A1F;
}

.course_info_container {
    /* height          : 500px;
    height          : 100%; */
    display         : flex;
    justify-content : flex-end;
    flex-direction  : column;
}

.course_details_container {
    width    : 100%;
    display  : flex;
    flex-wrap: wrap;
    padding  : 0 0 15px 0;
}


.chapter_course {
    /* width         : 50%; */
    display        : flex;
    flex-direction : row;
    margin-right   : 20px;
}

.time_course {
    /* width         : 50%; */
    display        : flex;
    flex-direction : row;
}

.icon_course {
    width       : 19px;
    height      : 19px;
    margin-right: 5px;
}

.data_course {
    line-height     : 19px;
    font-family: Montserrat, serif;
    font-weight     : 400;
    font-size       : 15px;
    color           : #FFFFFF;
    display         : flex;
    align-items     : center;
}

.buy_button_container {
    width           : 100%;
    height          : 45px;
    display         : flex;
    justify-content : flex-start;
    align-items     : flex-start;
    margin-top      : 30px;
}

.buy_button {
    width           : 195px;
    min-width       : 100px;
    height          : 43px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    line-height     : 19px;
    font-family: Montserrat, serif;
    font-weight     : bold;
    font-size       : 15px;
    color           : #090A1F;
    background      : #58E7ED;
    border-radius   : 5px;
    cursor          : pointer;

}

.buy_button:focus, .buy_button:hover {
    border: none !important;
    outline: none;
    color: #090A1F;
    text-decoration: none !important;
}

.summary_course_container {
    width           : 50%;
    max-width      : 550px;
    display        : flex;
    flex-direction : column;
    padding        : 40px 20px 80px 20px;
    cursor        : default;
}

.summary_details_container {
    width           : 100%;
    display         : flex;
    flex-wrap       : wrap-reverse;
    justify-content : space-between;
    margin          : 20px 0 120px 0;
}

.chapters_courses {
    /*width           : 100%;*/
    width            : 50%;
    max-width        : 472px;
    display          : flex;
    flex-direction   : column;
    padding          : 40px 50px 0 0;
}

.container_chapter {
    width                   : 100%;
    min-height              : 53px;
    display                 : flex;
    align-items             : center;
    border-radius           : 8px;
    backdrop-filter         : blur(6px);
    -webkit-backdrop-filter : blur(6px);
    background              : #25263b;
    position                : relative;
    margin-bottom           : 13px;
    border: 1px solid rgba(255,255,255,.3);
}

.icon_play_prev {
    font-size: 3px;
    color: #0F0F0F;
}

.title_duration_container {
    display: flex;
    flex-direction: column;
    margin-left: 25px;
    padding: 10px 0;
}

.title_chapter {
    font-size   : 12px;
    color       : white;
    font-family : 'Montserrat', serif;
    font-weight : 600;
    cursor     : default;
}

.time_course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}

.icon_duration {
    width: 8px;
    height: 8px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a1a2a8;
    margin-right: 12px;
}

.time_text {
    font-size   : 11px;
    color       : white;
    font-family : 'Montserrat', serif;
    font-weight : 400;
    cursor     : default;
}

.circle_unit {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 30px;
    background  : #25263b;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    position: absolute;
    top: 10px;
    left: -10px;

}

.number_chapter {
    font-size   : 13px;
    color       : white;
    font-family : 'Montserrat', serif;
    font-weight : 600;
    text-align: center;
    cursor     : default;
}


.title_summary {
    width             : 100%;
    line-height       : 16px;
    font-family: Montserrat, serif;
    font-weight       : 300;
    font-size         : 13px;
    color             : #FFFFFF;
    padding-bottom    : 20px;
    text-align        : start;
}
.description_course {
    width             : 100%;
    line-height       : 16px;
    font-family: Montserrat, serif;
    font-weight       : 300;
    font-size         : 13px;
    color             : #FFFFFF;
    text-align        : start;
    cursor     : default;
}

.preview_img_play {
    width                : 100%;
    height               : 100%;
    background-size      : cover !important;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    border-radius        : 3px;
    overflow             : hidden;
    position             : relative;
    display              : flex;
    justify-content      : center;
    background-repeat    : no-repeat !important;
}

.icon-play {
    width           : 47px;
    height          : 47px;
    position        : relative;
    color           : white;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 13px;
    padding         : 4px 10px;
    border-radius   : 50%;
    background      : #090A1F;
    top             : 117px;
    left            : 0;
    opacity         : 1;
}

.video_preview_player {
    width           : 100%;
    /* height          : 100%; */
    max-width       : 584px;
    border          : 1px solid #FFFFFF;
    border-radius   : 15px;
}
#video_course_preview {
    width           : 100%;
    max-width       : 584px;
    /* height: 198px; */
    outline         : none !important;
    display         : flex;
    justify-content : center;
    align-items     : center;
    /* border          : 1px solid #FFFFFF; */
    border-radius   : 15px;
}

.title-course {
    position        : relative;
    font-family     : Montserrat, serif;
    color           : white;
    font-weight     : 300;
    font-size       : 13px;
    text-shadow     : 0 3px 6px #0000005A;
    opacity         : 1;
    margin-top      : 16px;
    padding-bottom  : 10px;
    display         : flex;
    flex-direction  : row;
    align-items     : center;
}

.title-planer {
    width  : auto;
    cursor :pointer;
    padding-right: 5px;
}

.title-name-course {
    font-weight : 600;
    font-size   : 15px;
    cursor      :pointer;
    padding-left: 5px;
}

.mob_screen_cat{
    display: none;
}


@media screen and (max-width:800px) {
    .video_course_planner {
        width: 100%;
        justify-content: flex-start;
    }
}

@media screen and (max-width :660px) {

    .course_info_container {
        height         : 100%;
        display        : flex;
        /* align-items    : flex-end; */
        justify-content: flex-end;
        /* padding-bottom: 600px; */
    }

    .video_course_planner {
        width: 100%;
        /* height: 279px; */
        display: flex;
        justify-content: flex-start;
    }

    .planner-data-container {
        width          : 100%;
        display        : flex;
        justify-content: flex-end;
        flex-direction : column;
        min-width      : 100%;
        padding-bottom : 20px;
        /* padding-top    : 300px; */
        cursor         : default;
    }

    .planner_course_banner {
        padding-top: 30px;
        font-size: 30px;
    }

    .mob_screen_cat{
        display: block !important;
    }
    .summary_details_container {
        width           : 100%;
        display         : flex;
        flex-direction  : column-reverse;
    }

    .summary_course_container {
        width           : 100%;
        max-width      : 100%;
        display        : flex;
        flex-direction : column;
        padding        : 40px 20px 80px 20px;
        cursor        : default;
    }

    .chapters_courses {
        width            : 100%;
        max-width        : 100%;
        display          : flex;
        flex-direction   : column;
        padding          : 40px 20px 0 20px;
    }
    .container_chapter {
        max-width: 380px;
    }
}
@media screen and (max-width:600px) {
    .planner_course_banner {
        padding-top: 30px;
        font-size  : 25px;
    }
}