@media (min-width: 1500px) {}

@media (max-width: 1200px) {}

@media (max-width: 1024px) {}

@media (max-width: 991px) {

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        width: 100%;
        max-width: 100%;
        flex: auto;
    }.header-top {
        display: none;
    }
    
    .head-top ul.nav-head, .header-bottom .head-top .head-inner .form-head {
        display: none;
    }
    
    .res-menu {
        display: flex;
        align-items: center;
        -webkit-align-items: center;
    }
    
    .header-bottom .head-top .head-inner .menu-right .user-name .btn-user h3 {
        /* display: none; */
    }
    
    .header-bottom .head-top .head-inner .menu-right .user-name {
        margin-inline-end: 15px;
    }
    
    .res-menu .mobile-nav-toggler {
        width: 38px;
        text-align: center;
        height: 38px;
        line-height: 38px;
        background: var(--main-color);
        color: #fff;
        font-size: 20px;
        border-radius: 5px;
        display: block;
    }
    
    .search-box-btn.search-box-outer, .header-bottom .head-top .menu-right .search-box-btn.search-box-outer {
        /* margin: 0 6px !important; */
        /* margin-inline-start: 0; */
        /* display: none; */
    }
    
    .header-bottom {
        box-shadow: 0px 5px 16px #1f5e260a;
        background: rgb(255 255 255 / 58%);
    }
    
    .header-bottom .head-top {
        padding: 10px 0;
    }
    
    .header-bottom .head-top .logo {
        max-width: 80px;
    }
    
    .banner-inner {
        padding: 30px 0;
    }
    
    .text-slider h1 {
        text-align: center;
        font-size: 22px;
        margin: 0 0 20px;
    }
    
    .avail-block {
        display: block;
        padding: 12px;
        text-align: center;
    }
    
    .avail-block .img-block {
        width: 100%;
        height: 200px;
    }
    
    .avail-block .details {
        padding: 20px 0 0;
        width: 100%;
    }
    
    .avail-block .details h3 {
        max-width: 80%;
        margin: 0 auto;
    }
    
    .banner-inner .row {
        flex-direction: column-reverse;
    }
    
    .img-banner .img {
        height: 200px;
    }
    
    .img-banner::after {
        border-radius: 0px 12px;
    }
    
    .img-banner::before {
        width: 100px;
        height: 90px;
    }
    
    .img-banner {
        margin: 0 0 30px;
    }
    
    .more {
        justify-content: center;
        text-align: center;
        margin: 30px 0 0;
    }
    
    .courses-h {
        padding: 40px 0;
    }
    
    .title {
        margin: 0 0 30px;
    }
    
    .title h3 {
        font-size: 22px;
    }
    
    .tabs-courses .nav.nav-tabs .owl-dots {
        display: none;
    }
    
    .tabs-courses .nav.nav-tabs .owl-nav button.owl-next, .tabs-courses .nav.nav-tabs .owl-nav button.owl-prev {
        width: 30px;
        height: 30px;
        font-size: 12px;
        top: -30px;
    }
    
    .tabs-courses .nav.nav-tabs .owl-nav {
        top: auto;
    }
    
    .tabs-courses .nav.nav-tabs .nav-link {
        font-size: 14px;
        min-width: 100px;
        margin-inline-end: 11px;
        margin-top: 7px;
    }
    .review-h {
        padding: 40px 0 0;
    }
    
    .review-inner .review-block {
        min-height: auto;
        /* padding: 30px; */
    }
    
    .review-inner .review-block::before, .review-inner .review-block::after {
        font-size: 19px;
        margin: 10px 20px;
    }
    
    .review-inner .review-block .comment-block p {
        font-size: 16px;
        line-height: 26px;
    }
    
    .review-inner .review-block .comment-block {
        margin: 0 0 20px;
    }
    
    .review-inner .review-block .userName-review {
        margin: 0;
    }
    
    .competitions-h, .news-h, .team-h, .join-h, .app-h {
        padding: 40px 0;
    }
    
    .comp-block {
        /* display: block; */
    }
    
    .comp-block .img-block {
        width: 100%;
        /* height: 200px; */
    }
    
    .comp-block .details {
        padding: 20px 0 0;
        text-align: center;
        width: 100%;
    }
    
    .comp-block .details .name {
        font-size: 18px;
    }
    
    .comp-block .details p {
        font-size: 14px;
        line-height: 24px;
        max-height: 50px;
    }
    
    .comp-block .details .subscripNow {
        justify-content: center;
    }
    
    .owl-carousel .owl-dots {
        margin: 30px 0 0;
    }
    
    .all-students .item {
        /* max-width: 50%; */
        /* flex: 0 0 50%; */
        /* padding: 0 5px; */
    }
    
    .student-block {
        margin: 5px 0;
    }
    
    .clients-h {
        padding: 40px 0;
    }
    
    .down-app strong {
        margin: 0 0 10px;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .footer-bottom {
        text-align: center;
        padding: 15px 0 0;
    }
    
    .copyRight p {
        font-size: 14px;
        margin: 0 0 20px;
    }
    
    .logo-elryad {
        margin: 0 auto;
    }
    
    header .btn span {
        display: none;
    }
    
    header .btn-group .btn {
        width: 35px;
        min-width: auto;
        padding: 0;
        text-align: center;
        height: 35px;
        text-align: center;
        line-height: 35px;
        margin: 0 10px;
    }
    
    header .btn i {
        margin: 0 !important;
    }
    
    header .btn-group {
        margin-inline-end: 10px;
        /* display: none; */
    }
    
    .text-slider.text-banner {
        text-align: center;
    }
    
    .text-slider.text-banner p {
        font-size: 15px;
        line-height: 25px;
        margin: 20px 0;
    }
    
    .text-slider.text-banner h1 {
        font-size: 26px;
        line-height: 30px;
        margin: 0;
    }
    
    .text-banner .btn.btn-border {
        min-width: auto;
        min-height: auto;
        padding: 10px 20px;
    }
    
    .wrapper {
        width: 100%;
    }
    
    .spcial-block {
    margin: 15px 0;
}

.before-login .banner-inner {
    /* padding-bottom: 120px; */
}

.btn .res-span {
    display: inline-block !important;
    font-size: 11px;
}

header .btn-group .btn {
    width: auto;
    padding: 0 9px;
    line-height: 27px;
    min-height: 27px;
    height: 30px;
}

.header-bottom .head-top .head-inner .menu-right {
    align-items: center;
    -webkit-align-items: center;
}

header .btn i {
    position: relative;
    top: 1px;
}
.header-bottom .head-top .head-inner .menu-right .user-name .sub-user {
    left: 0;
    right: auto;
}

.second_nav.in_course .col-lg-4.col-5 {
    max-width: 40%;
    flex: 0 0 40%;
}

.second_nav.in_course .col-lg-4.col-7 {
    max-width: 60%;
    flex: 0 0 60%;
}

.second_nav .logo img {
    max-width: 65px;
}

.second_nav {
    padding: 10px 0;
}

.second_nav .settings .lang, .second_nav .settings .icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
}

.login_box.noti_box {
    margin: 0 5px;
}

.wrapper .next-slide, .wrapper .prev-slide {
    width: 30px;
    line-height: 30px;
    height: 30px;
    margin: 0 -6px;
}

.available-courses {
    display: flex;
    flex-wrap: wrap;
}

.available-courses .item {
    flex: 0 0 50%;
    max-width:  50%;
    padding: 0 10px;
}

.tab-inner .col-md-3 {
    max-width: 50%;
    flex: 0 0 50%;
}

.header-bottom .head-top .menu-right .lang i {
    display: none;
}

.animation-h {display: none;}

.top-students, .spcial-h {padding: 40px 0;}

.img-spcial.video-block {
    margin: 30px 0 0;
}

.img-spcial.video-block a::after {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
}

.text-review h1 {
    font-size: 25px;
    line-height: 35px;
}

.text-review {
    margin: 0 0 30px;
}

.review-inner {
    margin: 30px 0 0;
    height: auto;
}

.review-img-inner .item {}

.review-slider .item {
    padding: 0;
}

.join-text .title h3 {
    font-size: 22px;
}

.join-img {
    height: auto;
    margin: 30px 0 0;
}

.app-img {
    margin: 30px 0 0;
}

.logo-f {
    display: block;
    margin: 0 0 30px;
}

.logo-f .des-h {
    padding: 20px 0 0;
    width: 100%;
}

.header-bottom .head-top .menu-right .btn-group a {
    margin: 0 10px;
    font-size: 12px;
    margin-inline-end: 0;
}

.header-bottom .head-top .menu-right .btn-group .btn-login span {
    /* display: none; */
}

.header-bottom .head-top .menu-right .flag-h {
    display: none;
}

.btn-user h3 {
    /* display: none; */
}

html, body {
    overflow-x: hidden;
}

.header-bottom .head-top .menu-right .btn-group a i {
    display: none;
}

.header-bottom .head-top .menu-right .btn-group a.btn-login {
    color: var(--main-color);
}

.wrapper .nav-tabs {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    display: block;
    position: relative;
}

.nav-courses .tabs-courses .nav.nav-tabs li {
    display: inline-block;    
    float: none;
}

.user-name .sub-user {
    left: 0;
}

.form-in-h .form-group .btn.btn-form {
    min-width: 139px;
    min-height: 40px;
    font-size: 14px;
}

.myCourses_page .cour-block .add-cart-h {
    display: block;
    margin-top: 10px;
}

.myCourses_page .cour-block .add-cart-h .btn-cart, .myCourses_page .cour-block .add-cart-h .btn-bill {
    width: 100%;
    max-width: 100%;
    margin: 12px auto 0;
    display: flex;
}

}

@media (max-width: 768px) {
    
}

@media (max-width: 767px) {}

@media (max-width: 600px) {
    .container {
        max-width: 100%;
    }
    .available-courses .item {
    width: 100%;
    flex: auto;
    max-width: 100%;
}

.tab-inner .col-md-3 {
    max-width: 100%;
    flex: auto;
}

.comp-block {
    display: block;
}
}

@media (max-width: 480px) {}

@media (max-width: 390px) {}

@media (max-width: 360px) {}