@media (max-width: 980px){

    body{
        background-image: var(--main-bg);
    }
}
@media (max-width: 980px){
    section.course-detail-sec .col-8{
        width: 100%;
    }
    section.about-learn-sec .col-7{
        width: 100%;
    }
    section.about-learn-sec .col-5{
        width: 100%;
        margin-top: 25px;
    }
    section.courses .owl-dots{
        display: none !important;
    }
    section.courses .owl-nav{
        display: none !important;
    }
    section.job-detail .col-8{
        width: 100%;
    }
    section.job-detail .col-4{
        width: 100%;
    }
}

@media (max-width: 540px){
    .popup__content{
        max-width: 360px !important;
        padding: 20px !important;
        top: 31% !important;
    }
    .popup__content h5{
        font-size: 20px;
    }
    section.about-learn-sec .owl-item img{
        height: 150px;
    }
    section.course-detail-sec .course-detail h2{
        font-size: 25px;
    }
    section.course-detail-sec .course-head-1 h5 {
        font-size: 18px;
    }
    section.about-learn-sec h3{
        font-size: 22px;
    }
    section.about-learn-sec .related-link{
        flex-wrap: wrap;
    }
    section.courses h2{
        font-size: 22px;
    }
    section.courses .card-img-top{
        height: auto;
    }
    .sec-line .sec-line1{
        width: 10%;
    }
    .sec-line .sec-line2{
        width: 20%;
    }
    .course-price td{
        width: 48%;
    word-wrap: break-word;
    }
    .course-price tr{
        display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    }
}

@media (max-width: 380px){

.popup__content{
    max-width: 310px !important;
}

}