/*-------------------------------
  Course Details Page CSS Start
--------------------------------*/
.course-details-page{
    .details-top-jumboron{
        background: #142546;
        padding: 70px 0px 70px;
        .content{
            flex: 1;
            padding-left: 10px;
            .left-area{
                .top-area{
                    margin-bottom: 10px;
                    p{
                        font-size: 14px;
                        margin-bottom: 0px;
                        color: #fff;
                        display: inline-block;
                        margin-right: 13px;
                        position: relative;
                        &::before{
                            position: absolute;
                            content: '';
                            width: 3px;
                            height: 3px;
                            border-radius: 50%;
                            background: #fff;
                            right: -10px;
                            top: 50%;
                            transform: translateY(-50%);

                        }
                        &:last-child{
                            margin-right: 0px;
                            &::before{
                                display: none;
                            }
                        }
                    }
                }
                .title{
                    font-size: 28px;
                    line-height: 38px;
                    font-weight: 700;
                    margin-bottom: 0px;
                    color: #fff;
                    margin-bottom: 17px;
                }
                .text{
                    font-size: 17px;
                    line-height: 27px;
                    margin-bottom: 0px;
                    color: #fff;
                }
                .reating-area{
                    margin: 10px 0px 10px;
                    .tag{
                        background: #f4c150;
                        display: inline-block;
                        font-weight: 600;
                        font-size: 12px;
                        padding: 1px 8px;
                        margin-right: 15px;
                        position: relative;
                        &::before{
                            position: absolute;
                            content: '';
                            left: 100%;
                            top: 0px;
                            width: 0;
                            height: 0;
                            border-top: 10px solid transparent;
                            border-left: 8px solid #f4c150;
                            border-bottom: 10px solid transparent;
                        }
                    }
                    .number{
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 700;
                        color: #fff;
                    }
                    .stars{
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 700;
                        color: #eb8a2f;
        
                    }
                    .total-star{
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 400;
                        color: #fff;
                    }
                    .enroll-counter{
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 400;
                        color: #fff;
                        margin-left: 12px;
                    }
                }
                .short-info{
                    li{
                        display: inline-block;
                        font-size: 14px;
                        margin-right: 12px;
                        position: relative;
                        color: #fff;
                        &::before{
                            position: absolute;
                            content: '';
                            width: 3px;
                            height: 3px;
                            border-radius: 50%;
                            background: #fff;
                            right: -10px;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        &:last-child{
                            margin-right: 0px;
                            &::before{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    .details-main-content{
        padding-bottom: 70px;
        .what-you-learn{
            margin-top: 50px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 4px;
            background: #fcfbff;
            .title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            }
            .learn-list{
                display: flex;
                flex-wrap: wrap;
                li{
                    max-width: 50%;
                    flex: 50%;
                    position: relative;
                    padding-left: 35px;
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 15px;
                    &::before{
                        position: absolute;
                        content: '\f00c';
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900;
                        left: 10px;
                        color: #17a2b8;
                    }
                    &:last-child{
                        margin-bottom: 0px;
                    }
                }
            }
        }
        .course-content{
            padding-top: 30px;
            .title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            }
            .content-accordion{
                .mycard{
                    margin-bottom: 10px;
                    .mycard-header{
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        background: #fcfbff;
                        .header-title{
                            padding: 12px 10px 12px 35px;
                            font-size: 14px;
                            border-radius: 3px;
                            display: flex;
                            justify-content: space-between;
                            position: relative;
                            &::before{
                                position: absolute;
                                font-family: 'Font Awesome 5 Free';
                                content: '\f067';
                                font-weight: 900;
                                left: 15px;
                                top: 50%;
                                transform: translateY(-50%);
                                font-size: 12px;

                            }
                            &[aria-expanded="true"]{
                                &::before{
                                    content: '\f068';
                                    font-family: 'Font Awesome 5 Free';
                                    font-weight: 900;
                                }
                            }
                        }
                    }
                    .mycard-body{
                        border-left: 1px solid rgba(0, 0, 0, 0.1);
                        border-right: 1px solid rgba(0, 0, 0, 0.1);
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                        .video-list{
                            .single-video{
                                display: flex;
                                justify-content: space-between;
                                font-size: 14px;
                                border-bottom: 1px solid rgba(0, 0, 0, 0.15);
                                padding: 12px 10px;
                                &:last-child{
                                    border-bottom: 0px;
                                }
                                .left{
                                    padding-left: 20px;
                                    i{
                                        margin-right: 10px;
                                    }
                                }
                                .right{
                                    .preview{
                                        display: inline-block;
                                        color: blueviolet;
                                        margin-right: 30px;
                                        &:hover{
                                            text-decoration: underline;
                                        }
                                    }
                                    .time{
                                        display: inline-block;
                                        text-align: right;
                                        width: 60px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .requirements-list{
            margin-top: 30px;
            .title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            }
            ul{
                padding-left: 20px;
                li{
                    font-size: 14px;
                    list-style-type: disc;
                }
            }
        }
        .course-description{
            margin-top: 30px;
            .title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            }
            
            ul{
                padding-left: 20px;
                li{
                    font-size: 14px;
                    list-style-type: disc;
                }
            }
            .description-content{
                font-size: 14px;
            }
        }
        .students-also-bought{
            display: block;
            margin-top: 30px;
            .header-title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            } 
            .single-course .content .title {
                height: 60px;
            }
            .owl-carousel{
                .owl-nav{
                    .owl-prev,
                    .owl-next {
                      font-size: 13px;
                      position: absolute;
                      top: -25px;
                      -webkit-transform: translateY(-50%);
                      -ms-transform: translateY(-50%);
                      transform: translateY(-50%);
                      text-align: center;
                      width: 20px;
                      height: 20px;
                      line-height: 19px;
                      opacity: 1;
                      background: #fff;
                      border: 1px solid #ff5500;
                      border-radius: 50%;
                      color: #ff5500;
                      -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
                      box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
                      -webkit-transition: 0.3s ease-in;
                      -moz-transition: 0.3s ease-in;
                      -o-transition: 0.3s ease-in;
                      transition: 0.3s ease-in;
                      &:hover{
                          background: $base-color;
                          color: #fff;
                      }
                    }
                    .owl-prev{
                        right: 25px;
                    }
                    .owl-next {
                        right: 0px;
                    }
                }
            }
        }
        .about-instructor{
            margin-top: 30px;
            .header-title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 15px;
            } 
            .about-instructor-content{
                display: flex;
                .about-left-content{
                    max-width: 40%;
                    flex: 40%;
                    .images{
                        img{
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                        }
                    }
                    .info-list{
                        margin-top: 10px;
                        li{
                            font-size: 14px;
                            line-height: 24px;
                            margin-bottom: 5px;
                            i{
                                font-size: 13px;
                                width: 20px;
                            }
                            span{
                                font-weight: 700;
                            }
                        }
                    }
                }
                .about-right-content{
                    max-width: 60%;
                    flex: 60%;
                    .name{
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 28px;
                        margin-bottom: 0px;
                    }
                    .job-title{
                        font-size: 14px;
                        line-height: 24px;
                        font-weight: 600;
                    }
                    .about-description{
                        font-size: 14px;
                        line-height: 24px; 
                    }
                }
            }
        }
        .course-review-area{
            margin-top: 30px;
            .header-title{
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 20px;
            } 
            .rating-report-box{
                display: flex;
                .rating-left-area{
                    text-align: center;
                    max-width: 25%;
                    flex: 25%;
                    align-self: center;
                    .rating-number{
                        display: block;
                        font-size: 50px;
                        line-height: 60px;
                        font-weight: 700;
                    }
                    .stars{
                        color: #f4c150;
                        font-size: 18px;
                    }
                    .text{
                        font-size: 14px;
                        line-height: 24px;
                        display: block;
                    }
                }
                .rating-right-area{
                    max-width: 75%;
                    flex: 75%;
                    .rating-progress-bar{
                        .progress{
                            margin-bottom: 15px;
                            height: 20px;
                            &:last-child{
                                margin-bottom: 0px;
                            }
                        }
                    }
                }
            }
            .user-review-area{
                margin-top: 40px;
                .user-single-review{
                    display: flex;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
                    padding-bottom: 15px;
                    margin-bottom: 20px;
                    .review-left{
                        max-width: 30%;
                        flex: 30%;
                        img{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            margin-bottom: 10px;
                        }
                        .name{
                            font-size: 14px;
                            font-weight: 600;
                            margin-bottom: 0px;
                        }
                        .time{
                            font-size: 14px;
                        }
                    }
                    .review-right{
                        max-width: 70%;
                        flex: 70%;
                        .stars{
                            color: #f4c150;
                            margin-bottom: 10px;
                            font-size: 14px;
                        }
                        .review-content{
                            font-size: 14px;
                            line-height: 24px;
                            margin-bottom: 0px;
                        }
                        .author-replay{
                            padding: 10px 15px;
                           margin-top: 15px;
                            font-size: 14px;
                            line-height: 24px;
                            margin-bottom: 0px; 
                            position: relative;
                            background: #fcfbff;
                            border: 1px solid rgba(0, 0, 0, 0.1);
                            &::before{
                                position: absolute;
                                content: '';
                                left: 30px;
                                bottom: 100%;
                                // background: #d1ecf1;
                                width: 0;
                                height: 0;
                                margin-bottom: 1px;
                                border-left: 10px solid transparent;
                                border-right: 10px solid transparent;
                                border-bottom: 10px solid rgba(0, 0, 0, 0.1);
                            }
                        }
                    }
                }
            }
        }
        .right-content{
            background: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 4px;
            margin-top: -312px;
            .video-area{
                position: relative;
                img{
                    width: 100%;
                }
                .popup-button{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    line-height: 60px;
                    background: rgba(0, 0, 0, 0.6);
                    color: #fff;
                    text-align: center;
                    font-size: 20px;
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                }
            }
            .price-area{
                padding: 20px 20px 20px;
                font-size: 28px;
                line-height: 30px;
                font-weight: 700;
                del{
                    font-size: 16px;
                    line-height: 30px;
                    font-weight: 400;
                    margin-right: 10px;
                }
                span{
                    font-size: 16px;
                    line-height: 30px;
                    font-weight: 400;
                }
            }
            .action-buttons{
                padding: 0px 20px 0px;
                a{
                    display: block;
                    text-align: center;
                    margin-bottom: 10px;
                    padding: 10px 10px;
                    color: #fff;
                    font-weight: 600;
                    border-radius: 4px;
                    font-size: 14px;
                    i{
                        margin-right: 7px;
                    }
                }
            }
            .course-includes{
                padding: 10px 20px 0px;
                .title{
                    font-size: 16px;
                    font-weight: 600;
                }
                .include-list{
                    li{
                        font-size: 14px;
                        line-height: 25px;
                        i{
                            width: 25px;
                            display: inline-block;
                            font-size: 13px;
                        }
                    }
                }
            }
            .coupon-area{
                padding: 20px 20px 20px;
                text-align: center;
                #apply-coupon{
                    color: blueviolet;
                    cursor: pointer;
                    font-size: 14px;
                    margin-bottom: 0px;
                    &:hover{
                        text-decoration: underline;
                    }
                }
                .coupon-form{
                    position: relative;
                    display: none;
                    input{
                        width: 100%;
                        height: 35px;
                        font-size: 14px;
                        padding: 0px 60px 0px 10px;
                        border: 1px solid rgba(0, 0, 0, 0.15);
                        border-radius: 3px;
                    }
                    button{
                        position: absolute;
                        right: 0px;
                        top: 0px;
                        height: 35px;
                        width: 60px;
                        background: $base-color;
                        border: 0px;
                        color: #fff;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}


/*-------------------------------
  Course Details Page CSS Start
--------------------------------*/