@media (max-width:767px) {
    .banner-img-item {
        height: 230px;
        background-size: 1100px;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .row.sec-padding {
        padding-bottom: 0!important;
    }
    .article-section .listing-meta {
        display: block !important;
    }
    .article-section .article-content p,.article-section .article-content{
        text-indent: 0!important;
    }
}

@media (min-width:768px) {
    .banner-img-item {
        height: 390px;
        background-size: 1880px;
        background-position: center top;
        background-repeat: no-repeat;
    }
}

@media (max-width:991px) {
    .topic-list-item {
        flex: 0 0 100%;
    }
    
    .teacher-detail .teacher-img {
        margin-bottom: 20px;
    }
    .teacher-detail .teacher-content {
        flex: 0 0 75%
    }
    .header .header-site-intr {
        display: none;
    }
    .header .header-menu-list {
        position: absolute;
        top: 77px;
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 2;
    }
    .full-width-md {
        max-width: 100%;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .banner-sidemenu {
        z-index: 200;
    }
    .banner-sidemenu {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        width: 260px;
        padding: 10px 15px;
        height: 400px;
    }
    .banner-sidemenu-title {
        width: 260px;
        font-size: 1.3rem;
        margin-bottom: 0;
        background-color: #248ee8;
        padding: 15px;
        color: #fff;
    }
    .header-bar {
        display: none;
    }
    #navBar {
        padding-bottom: 10px;
    }
    .navbar-nav-item a {
        color: #686868;
    }
    #navBar {
        padding: 20px;
        border-top: 1px solid #f2f2f2;
    }
    .table-responsive table {
        min-width: 700px;
    }
    .courseadv-swiper, .teacher-swiper {
        padding-bottom: 20px;
    }
    .courseadv-swiper .swiper-pagination, .teacher-swiper .swiper-pagination {
        bottom: 0;
    }
    .container-fluid {
        max-width: 100%;
    }
    .section-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .nav-list.d-flex li {
        flex: 0 0 auto;
        padding: 0 5px;
    }
    .nav-list.d-flex li:first-child {
        padding-left: 0;
    }
    .nav-list.d-flex li:last-child {
        padding-right: 0;
    }
    
    .footer .nav-title {
        font-size: 1rem;
    }
    .footer.sec-padding {
        padding: 40px 0;
    }
    
    .article-section .block-card {
        padding: 20px 0;
    }
    
    .article-section .block-card-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .article-section .block-card-body {
        max-height: 20vh;
        overflow-y: scroll;
    }
    
    .article-section .block-card-body .list-items-style-2 {
        padding: 0 15px;
    }
    
    .faq-section .list-items-style-2 li + li + li + li,
    .faq-section .question-list .question-item + .question-item + .question-item + .question-item {
        display: none;
    }
    
    .article-section .card-item .card-image {
        display: none;
    }
    
    .dashboard-sidebar {
      left: -20rem !important;
    }
    
    #sidebar-close, #sidebarToggleTop {
        display: block;
    }

    .article-list .list-items li a {
        flex: 0 0 80%;
    }
    
    .row-responsive .col, .row-responsive .col-1, .row-responsive .col-10, .row-responsive .col-11, .row-responsive .col-12, .row-responsive .col-2, .row-responsive .col-3, .row-responsive .col-4, .row-responsive .col-5, .row-responsive .col-6, .row-responsive .col-7, .row-responsive .col-8, .row-responsive .col-9, .row-responsive .col-auto, .row-responsive .col-lg, .row-responsive .col-lg-1, .row-responsive .col-lg-10, .row-responsive .col-lg-11, .row-responsive .col-lg-12, .row-responsive .col-lg-2, .row-responsive .col-lg-3, .row-responsive .col-lg-4, .row-responsive .col-lg-5, .row-responsive .col-lg-6, .row-responsive .col-lg-7, .row-responsive .col-lg-8, .row-responsive .col-lg-9, .row-responsive .col-lg-auto, .row-responsive .col-md, .row-responsive .col-md-1, .row-responsive .col-md-10, .row-responsive .col-md-11, .row-responsive .col-md-12, .row-responsive .col-md-2, .row-responsive .col-md-3, .row-responsive .col-md-4, .row-responsive .col-md-5, .row-responsive .col-md-6, .row-responsive .col-md-7, .row-responsive .col-md-8, .row-responsive .col-md-9, .row-responsive .col-md-auto, .row-responsive .col-sm, .row-responsive .col-sm-1, .row-responsive .col-sm-10, .row-responsive .col-sm-11, .row-responsive .col-sm-12, .row-responsive .col-sm-2, .row-responsive .col-sm-3, .row-responsive .col-sm-4, .row-responsive .col-sm-5, .row-responsive .col-sm-6, .row-responsive .col-sm-7, .row-responsive .col-sm-8, .row-responsive .col-sm-9, .row-responsive .col-sm-auto, .row-responsive .col-xl, .row-responsive .col-xl-1, .row-responsive .col-xl-10, .row-responsive .col-xl-11, .row-responsive .col-xl-12, .row-responsive .col-xl-2, .row-responsive .col-xl-3, .row-responsive .col-xl-4, .row-responsive .col-xl-5, .row-responsive .col-xl-6, .row-responsive .col-xl-7, .row-responsive .col-xl-8, .row-responsive .col-xl-9, .row-responsive .col-xl-auto {
        flex: 0 0 50% !important;
    }
    
    .list-items.course li {
        flex: 0 0 50% !important;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .teacher-detail .teacher-img {
        flex: 0 0 25%;
        margin-right: 1.5rem;
    }
    .teacher-detail .teacher-content {
        flex: 0 0 70%
    }
    .banner-sidemenu {
        z-index: 200;
    }
    .banner-sidemenu {
        position: absolute;
        top: 54px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        width: 260px;
        padding: 10px 15px;
        height: 400px;
    }
    .banner-sidemenu-title {
        width: 260px;
        font-size: 1.3rem;
        margin-bottom: 0;
        background-color: #248ee8;
        padding: 15px;
        color: #fff;
    }
    #navBar {
        padding-left: 0px;
    }
    
    .dashboard-sidebar{
        display: none;
    }
    
    .navbar-nav li:first-child a {
      padding-left: 0 !important;
    }
    
    .article-list .list-items li a {
        flex: 0 0 90%;
    }
    
    .topic-list-item {
        flex: 0 0 48.5%;
        padding: 10px 0;
        margin-bottom: 0 !important;
        border-bottom: 1px dotted #ebebeb;
    }
    
    .topic-list-item:nth-child(3n+1){
        margin-left: 0;
        margin-right: 0;
    }
    
    .topic-list {
        justify-content: space-between;
        margin-left: -25px;
        margin-right: -25px;
    }
}

@media (max-width: 1199px) {
    .row-responsive {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-top: 20px;
        margin-right: -10px;
        margin-left: -10px;
    }
    .row-responsive::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .3);
        -webkit-box-shadow: 0 0 1px rgb(255 255 255 / 50%);
    }
    .row-responsive::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
        height: 7px;
        background: #f2f2f2;
    }
    .row-responsive .col, .row-responsive .col-1, .row-responsive .col-10, .row-responsive .col-11, .row-responsive .col-12, .row-responsive .col-2, .row-responsive .col-3, .row-responsive .col-4, .row-responsive .col-5, .row-responsive .col-6, .row-responsive .col-7, .row-responsive .col-8, .row-responsive .col-9, .row-responsive .col-auto, .row-responsive .col-lg, .row-responsive .col-lg-1, .row-responsive .col-lg-10, .row-responsive .col-lg-11, .row-responsive .col-lg-12, .row-responsive .col-lg-2, .row-responsive .col-lg-3, .row-responsive .col-lg-4, .row-responsive .col-lg-5, .row-responsive .col-lg-6, .row-responsive .col-lg-7, .row-responsive .col-lg-8, .row-responsive .col-lg-9, .row-responsive .col-lg-auto, .row-responsive .col-md, .row-responsive .col-md-1, .row-responsive .col-md-10, .row-responsive .col-md-11, .row-responsive .col-md-12, .row-responsive .col-md-2, .row-responsive .col-md-3, .row-responsive .col-md-4, .row-responsive .col-md-5, .row-responsive .col-md-6, .row-responsive .col-md-7, .row-responsive .col-md-8, .row-responsive .col-md-9, .row-responsive .col-md-auto, .row-responsive .col-sm, .row-responsive .col-sm-1, .row-responsive .col-sm-10, .row-responsive .col-sm-11, .row-responsive .col-sm-12, .row-responsive .col-sm-2, .row-responsive .col-sm-3, .row-responsive .col-sm-4, .row-responsive .col-sm-5, .row-responsive .col-sm-6, .row-responsive .col-sm-7, .row-responsive .col-sm-8, .row-responsive .col-sm-9, .row-responsive .col-sm-auto, .row-responsive .col-xl, .row-responsive .col-xl-1, .row-responsive .col-xl-10, .row-responsive .col-xl-11, .row-responsive .col-xl-12, .row-responsive .col-xl-2, .row-responsive .col-xl-3, .row-responsive .col-xl-4, .row-responsive .col-xl-5, .row-responsive .col-xl-6, .row-responsive .col-xl-7, .row-responsive .col-xl-8, .row-responsive .col-xl-9, .row-responsive .col-xl-auto {
        flex: 0 0 100%;
    }
    
}

@media (min-width: 1200px) {
    .banner-sidemenu {
        display: block;
    }
    .teacher-detail .teacher-img {
        margin-right: 1.5rem;
    }
    #navBar {
        padding-left: 10px;
    }
    .banner-img-item {
        height: 400px;
        background-size: 1920px;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .courseadv-swiper .swiper-wrapper, .teacher-swiper .swiper-wrapper{
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .topic-list-item {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
        padding: 10px 15px;
    }
    
    .article-section .list-items li a {
        max-width: 85%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .about-content {
        margin-bottom: 50px;
        margin-top: 50px;
        padding-left: 0 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-content {
        margin-bottom: 50px;
        margin-top: 50px;
        padding-left: 0 !important;
    }
}