@media (min-width: 1400px) {
}
@media (max-width: 1395px) {
  .login-top-ber > ul {
    gap: 10px;
  }
  .login-top-ber > ul > li > a {
    font-size: 14px;
  }
  p {
    font-size: 16px;
  }
  .sub-client-index p {
    font-size: 19px;
  }

  .language a {
    gap: 3px;
    font-size: 17px !important;
  }
  .img-advantages-index {
    height: 250px;
  }
  a {
    font-size: 17px;
  }
  .text-users-chat {
    width: 74%;
  }
  .img-live-course {
    width: 80px;
    height: 80px;
  }

  .archives .col-lg-3 {
    padding-right: 10px;
    padding-left: 10px;
  }
  .text-course-student h2 {
    font-size: 18px;
  }
  .text-course-student p {
    font-size: 16px;
  }
  .img-course-student {
    height: 175px;
  }
  .sub-payment-cart h3 {
    font-size: 19px;
  }
  .sub-payment-cart .sub-payment-methods ul li label {
    font-size: 19px;
  }
}

@media (max-width: 1200px) {
  .img-advantages-index {
    height: 250px;
  }
  .element ul li a {
    font-size: 16px;
  }
  .login-top-ber > ul {
    gap: 20px;
  }
  .btn-login a {
    padding: 0px 7px 5px;
  }
  p {
    line-height: 25px;
    font-size: 15px;
  }
  .sub-advantages-index {
    margin: 25px 0;
  }
  .element ul {
    gap: 15px;
  }

  .sub-header {
    min-height: 685px;
  }
  .element ul li a {
    font-size: 14px;
  }
  .info-top-bar > ul {
    gap: 20px;
  }
  .header-student .element ul {
    gap: 30px;
  }
  .text-users-chat {
    padding-left: 40px;
    width: 72%;
  }
  .img-users-chat {
    width: 50px;
    height: 50px;
  }
  .text-users-chat h2 {
    font-size: 16px;
  }
  .text-users-chat p {
    font-size: 13px;
  }
  .text-title-chat h2 {
    font-size: 18px;
  }
  .text-title-chat h2 {
    font-size: 18px;
    font-family: "font_bold";
  }
  .info-top-bar {
    display: flex;
    align-items: center;
    position: relative;
    gap: 20px;
  }
  .icon-user::after {
    right: -10px;
  }
  .main-info-top-bar > ul {
    gap: 15px;
  }
  .main-info-top-bar {
    width: 100%;
    gap: 20px;
  }
  .maps-contactus img {
    width: 100%;
    height: 100%;
  }
  .maps-contactus {
    height: 345px;
    margin: 20px 0;
  }
  .sub-info-contactus {
    margin: 20px;
  }
  .text-live-cours p {
    font-size: 15px;
  }
  .text-live-cours h5 {
    font-size: 10px;
    margin: 0;
    position: relative;
    color: #758494;
    padding-right: 10px;
  }
  .text-course-student p {
    flex-wrap: wrap;
    gap: 10px;
  }
  .text-course-student span {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .top-par .main-container {
    position: relative;
  }
  .element {
    display: none;
  }
  .login-top-ber {
    display: none;
  }
  .navicon {
    display: block;
  }
  .menu-div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .login-mune img {
    height: 40px;
    cursor: pointer;
    object-fit: contain;
    width: 40px;
    border-radius: 50%;
  }
  .dorp-mune-res {
    background: var(--color-white);
    padding: 20px 0;
    display: flex;
    position: absolute;
    align-items: center;
    border-radius: 10px;
    width: 180px;
    display: none;
    left: 0;
    justify-content: center;
    box-shadow: 0px 4px 7px #00000042;
  }
  .dorp-mune-res ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  .dorp-mune-res ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
    text-align: center;
    padding: 0 20px 15px;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .dorp-mune-res ul li:last-of-type {
    border-bottom: none;
    padding-bottom: 0px;
  }
  .text-sub-header {
    text-align: center;
  }
  .text-sub-header {
    text-align: center;
  }
  .sub-header {
    padding-top: 130px;
  }
  .img-sub-header {
    width: 60%;
    margin: 50px auto 0;
  }
  .text-sub-header p {
    width: 70%;
    margin-bottom: 20px;
    margin: 0 auto 20px;
  }
  .login-mune {
    position: relative;
  }
  .sub-header {
    padding-bottom: 115px;
  }
  .img-aboutus-index {
    margin: 20px auto;
  }
  .slider-client-index {
    width: 100%;
    padding: 30px 20px;
  }
  .main-img-aboutus-index {
    display: flex;
    align-items: center;
    position: relative;
    width: 75%;
    justify-content: center;
  }
  .sub-teachers-index {
    margin: 20px 0;
  }
  .sub-client-index p {
    font-size: 16px;
  }
  .text-dawnload-app {
    text-align: center;
  }
  .text-dawnload-app p {
    color: #f8f8f8;
    font-size: 22px;
    width: 90%;
    margin: 30px auto;
  }
  .links-download {
    justify-content: center;
    margin-bottom: 30px;
  }
  .text-advantages-index p {
    width: 80%;
    margin: 20px auto;
  }
  .element-footer {
    margin: 30px 0 0 0;
  }
  .text-sub-header h2,
  .text-sub-header h1 {
    font-family: "font_bold";
    font-size: 26px;
  }
  .text-sub-header h1 {
    margin: 5px 0;
  }
  .sub-header {
    overflow: hidden;
  }
  .header-pages .sub-header {
    min-height: 407px;
    padding-top: 160px !important;
  }
  .img-vision img {
    margin: 10px 0;
    max-width: 55%;
    margin: 20px auto 0;
  }
  .vision {
    margin: 20px 0;
  }
  .text-vision p {
    font-size: 17px;
    line-height: 29px;
  }
  .title-aboutus p {
    font-size: 15px;
    width: 90%;
  }
  .title-page h1 {
    font-size: 32px;
    color: var(--color-white);
  }
  .main-info-top-bar {
    display: none;
  }

  .menu-div .icon-user::after {
    display: none;
  }
  .users-chat {
    position: absolute;
    right: 0;
    z-index: 1;
    transition: 0.5s linear;
    top: 0;
    transform: translateX(110%);
  }
  .users-chat.active {
    transform: translateX(0%);
  }
  .mune-chat {
    display: block;
  }
  .img-users-chat {
    width: 35px;
    height: 35px;
  }
  .time-message h4 {
    font-size: 14px;
  }
  .number-messsage {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .text-users-chat p {
    margin-top: 0px;
  }
  .text-users-chat {
    padding-left: 12px;
    width: 73%;
  }
  .main-users-chat ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 0;
    position: relative;
    flex-wrap: wrap;
    border-top: 1px solid #eeeeee;
  }
  .users-chat {
    max-width: 75%;
  }
  .search-chat input::placeholder {
    font-size: 18px;
    font-family: "font_bold";
  }
  .search-chat::after {
    width: 20px;
    height: 20px;
  }
  .choose-verify ul li label {
    width: 100%;
  }
  .main-eidt-date p {
    font-size: 18px;
  }
  .modal-sm {
    max-width: 66%;
  }
}

@media (max-width: 768px) {
  .text-sub-header p {
    width: 100%;
    margin-bottom: 20px;
    margin: 0 auto 20px;
  }
  .img-sub-header {
    width: 90%;
    margin: 50px auto 0;
  }
  .profile-details-dropdown {
    width: 270px;
  }
  .notification-dropdown {
    padding: 0px 0 0;
    max-height: 340px;
    width: 285px;
  }
  .title-user-dropdown span {
    font-size: 18px;
    font-family: "font_bold";
  }

  .price-checkout span {
    font-size: 15px;
  }

  .price-checkout h2 {
    font-size: 16px;
  }
  .sub-text-checkout h3 {
    font-size: 18px;
  }

  .sub-payment-methods ul li label {
    padding-right: 20px;
    font-size: 16px;
  }
  .sub-payment-methods ul li label::after {
    transform: translateY(-33%);
    width: 15px;
    height: 15px;
  }
  .sub-payment-methods ul li input:checked ~ label::before {
    right: 3px;
    transform: translateY(-24%);
    width: 9px;
    height: 9px;
  }
  .form-payment-methods {
    width: 100%;
  }
  button.ctm-btn2 {
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 0;
  }
  .sub-payment-methods ul {
    gap: 16px;
    flex-wrap: wrap;
  }
  .form-register {
    width: 100%;
    margin: 30px auto 30px;
  }
  .choose-verify .title-register h2 {
    font-size: 18px;
  }
  .text-form-register h3 {
    color: var(--color-a);
    font-size: 18px;
  }
  .sub-courses-details {
    margin-top: 40px;
  }
  .links-tabs-courses ul li a {
    font-size: 14px;
  }
  .sub-content-courses {
    padding: 0 8px 0px;
  }

  .sub-content-courses ul {
    padding: 0 5px 5px;
  }
  .sub-content-courses ul li h4 {
    font-size: 13px;
  }
  .sub-content-courses ul li a span {
    font-size: 15px;
  }
  .sub-content-courses > h2 i {
    font-size: 15px;
  }
  .sub-content-courses > h2 {
    font-size: 16px;
    padding: 15px 5px;
  }
  .img-info-teacher-courses {
    width: 50px;
    height: 50px;
  }
  .text-title-teacher-courses h2 {
    font-size: 16px;
  }
  .text-title-teacher-courses p {
    color: var(--color-button);
    font-size: 14px;
    margin: 5px 0 0;
  }
  .btns-info-teacher-courses {
    margin: 30px 0 0;
    flex-wrap: wrap;
  }
  .btns-add-cart {
    flex-wrap: wrap;
  }
  .price-courses-details {
    font-size: 20px;
    margin: 0px 0 10px;
  }

  .sub-courses-details ul li span {
    font-size: 15px;
    font-family: "font_bold";
  }
  .sub-courses-details {
    padding: 10px;
  }
  .sub-courses-details ul li h3 {
    font-size: 15px;
  }

  .title-register h2 {
    font-size: 20px;
  }
  .forget-password .title-verfi-code {
    text-align: center;
    font-size: 16px;
    margin-bottom: 14px;
  }
  .forget-password .btn-register {
    margin-top: 15px;
  }
  .text-course-student h2 {
    font-size: 16px;
  }
  .img-course-student {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    height: 160px;
    position: relative;
  }
  .img-course-student {
    border-radius: 10px;
    height: 160px;
  }
  .text-course-student p {
    font-size: 14px;
  }
  .text-course-student span {
    font-size: 11px;
  }
  .search {
    margin: 30px auto;
    width: 95%;
  }
  .btn-register h3 {
    margin: 20px 0 0;
    font-size: 15px;
  }
  .forget-password-1 a {
    font-size: 17px;
    margin: 0px 0;
  }
  .login .btn-register {
    text-align: center;
    margin: 20px 0 0;
  }
  .text-product-cart h2 {
    font-size: 16px;
    width: 90%;
  }
  .text-product-cart p {
    font-size: 16px;
  }
  .text-product-cart span {
    color: var(--color-p);
    font-size: 14px !important;
  }
  .img-product-cart {
    width: 30%;
    height: 105px;
  }
  .about-teacher {
    padding: 25px 10px;
  }
  .sub-counter-index-teacher {
    text-align: center;
    margin: 25px 0;
  }
  .sub-counter-index-teacher p {
    font-size: 20px;
  }
  .sub-share-group ul li {
    display: flex;
    width: 25px;
  }
}

@media (max-width: 576px) {
  .mr-section {
    margin: 40px 0;
  }
  .img-sub-client-index {
    width: 100px;
    height: 100px;
  }
  .sub-client-index p {
    width: 100%;
    font-size: 13px;
  }
  .sub-client-index h4 {
    font-size: 16px;
    margin-top: 0px;
  }
  .slider-client-index {
    border-radius: 20px;
  }
  .title-start h2,
  .title-center h2 {
    font-size: 20px;
  }
  .courses-index,
  .dawnload-app {
    border-radius: 0;
  }
  .links-tabs ul li a {
    min-width: 150px;
  }
  .text-dawnload-app h2 {
    font-size: 23px;
    line-height: 35px;
  }
  .text-dawnload-app p {
    font-size: 17px;
    margin: 16px auto;
  }
  .text-counter-number {
    font-size: 23px;
  }
  .counter-box p {
    font-size: 16px;
  }
  .newsletter h2 {
    width: 100%;
  }
  .element-footer h2,
  .madia-footer h2 {
    font-family: "font_bold";
    padding-bottom: 25px;
    color: var(--color-white) !important;
    font-size: 20px;
    position: relative;
  }
  .text-teachers-index h2 {
    font-size: 19px;
  }
  .text-teachers-index p {
    font-size: 16px;
  }
  .menu_responsive {
    width: 300px;
  }
  .newsletter h2 {
    line-height: 30px;
    font-size: 16px;
  }
  .madia-footer {
    margin-top: 30px;
  }
  .text-advantages-index h2 {
    font-size: 18px;
  }
  .text-advantages-index p {
    width: 80%;
    margin: 5px auto;
  }
  .text-slider-services h2 {
    font-size: 21px;
  }
  .links-tabs ul li a {
    min-width: 120px;
    padding: 0 10px 5px !important;
  }
  .courses-index {
    padding: 40px 0 15px;
  }
  .main-img-aboutus-index::after {
    left: -10px;
  }
  .logo {
    max-width: 150px;
  }
  .header-student .logo {
    max-width: 125px;
  }
  .msg-send p {
    max-width: 100%;
  }
  .msg-receive p {
    max-width: 80%;
  }
  .img-msg {
    width: 30px;
    height: 30px;
  }
  .search-chat span {
    position: absolute;
    display: block;
    font-size: 12px;
    left: 0px;
    color: var(--color-p);
    top: 50%;
    transform: translateY(-50%);
  }
  .details-chat {
    height: 560px;
  }
  .title-chat {
    padding: 9px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .text-title-chat h2 {
    font-size: 15px;
  }
  .text-title-chat span {
    color: #27ae60;
    font-size: 16px;
  }
  .sub-form-chat {
    width: 70%;
  }
  .btns-form-chat {
    width: 30%;
    justify-content: flex-end;
  }
  .form-chat {
    padding-top: 20px;
    padding: 7px;
  }
  .title-page p {
    width: 100%;
    margin: 20px auto;
  }
  .title-page h1 {
    font-size: 19px;
  }
  .navigation-header a {
    font-size: 14px;
  }
  .navigation-header {
    font-size: 15px;
    gap: 5px;
    margin-top: 20px;
  }
  .choose-verify ul li label {
    width: 100%;
  }
  .logo-register {
    width: 126px;
  }
  .choose-verify .title-register h2 {
    font-size: 16px;
  }
  .sub-form-contactus .title-start {
    display: block;
  }
  .header-pages .sub-header {
    min-height: 375px;
  }
  .sub-form-contactus p {
    font-size: 19px;
  }
  .text-info-contactus h2 {
    font-size: 17px;
  }
  .img-info-contactus {
    width: 44px;
    height: 44px;
  }
  .sub-live-course {
    justify-content: center;
  }
  .main-eidt-date {
    flex-wrap: wrap;
  }
  .slider-courses .owl-nav {
    top: -56px;
  }
  .title-start a {
    font-size: 14px;
  }
  .free-live {
    font-size: 15px;
    height: 30px;
    margin: 10px 0 0;
  }

  .course-student .title-start h2,
  .course-student .title-center h2 {
    font-size: 16px;
  }
  .modal-sm {
    max-width: 100%;
  }

  .title-fliter-student {
    width: 95%;
    margin: 24px auto;
  }
  .title-fliter-student h2 {
    font-size: 17px;
    margin: auto;
  }
  .main-eidt-date p {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .owl-nav button {
    width: 30px;
    height: 30px;
  }
  .search button {
    width: 35px;
    height: 35px;
    top: 6px;
  }
  .end-fliter-student p {
    font-size: 12px;
    font-family: "font_bold";
  }
  .btn-register h3 a {
    font-size: 17px;
  }
  .type-gender h3 {
    font-size: 16px;
  }
  .main-type-gender ul li label {
    font-size: 16px;
  }
  .user-agreement label {
    font-size: 15px;
  }
  .fullscreen video[poster] {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .img-course-student {
    height: 190px;
  }
  .img-product-cart {
    width: 30%;
    height: 60px;
  }
  .text-product-cart h2 {
    font-size: 15px;
    width: 90%;
  }
  .text-product-cart p {
    margin: 4px 0;
    color: var(--color-a);
    font-size: 20px;
  }
  .price-cart h3 {
    font-size: 15px;
  }
  .price-cart span {
    font-size: 14px;
  }
  .details-cart ul li {
    font-size: 15px;
  }
  .details-cart h3 {
    font-size: 19px;
  }
  .form-eidt-group-page {
    width: 100%;
    text-align: center;
    margin: 60px auto;
  }

  .text-product-details > h2 {
    font-size: 17px;
  }
  .text-product-details > p {
    font-size: 15px;
  }
  .price-prodect h3 {
    font-size: 18px;
  }
  .price-prodect {
    margin-top: 20px;
    padding: 15px;
  }
  .img-products-details {
    min-height: auto;
    max-height: 365px;
  }
}
@media (max-width: 450px) {
}