/* 1535px */
@media (max-width: 1535px) {
    /* courses */
    .course-title {
        font-size: 19px;
    }
    .course-footer {
        padding: 0;
        justify-content: center;
    }
    .price {
        padding: 6px 24px;
    }
    .details-btn {
        padding: 6px 24px;
    }
}
/* 1279px */
@media (max-width: 1279px) {
    /* features */
    .feature-card h3 {
        font-size: 16px;
    }
    .feature-card p {
        font-size: 15px;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 20px;
    }
    .feature-card {
        max-width: 380px;
    }

    /* courses */
    .course-card {
        flex-direction: column;
    }
    .card-image {
        width: 100% !important;
        max-width: 100% !important;
        /* height: 280px; */
    }
    .card-image .card-sm-img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .card-image .card-lg-img {
        display: none;
    }
    .course-title {
        font-size: 18px;
    }
    .course-footer {
        padding: 0;
        justify-content: center;
    }
    .price,
    .details-btn {
        padding: 6px 20px;
    }

    /* course page */
    .course-container {
        gap: 5px;
        flex-direction: row;
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* course page */
    .course-sidebar-container {
        width: 100%;
        max-width: 320px;
    }
    .course-sidebar {
        margin-top: -225px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    /* navbar */
    .navbar-mobile {
        display: flex;
    }

    .navbar-desktop {
        display: none !important;
    }

    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: block;
    }

    header .container {
        padding: 15px;
    }

    .logo {
        height: 35px;
    }
    .btn {
        font-size: 14px;
    }

    /* hero */
    .hero-text h1 {
        font-size: 32px;
    }

    /* features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* categories */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-card a {
        padding: 20px;
        font-size: 18px;
    }

    /* courses */
    /* .card-image {
        height: 180px;
    } */
    .course-card .course-title {
        font-size: 18px;
    }
    .subjects {
        gap: 2px;
    }
    .subjects span {
        font-size: 12px;
        padding: 6px 12px;
    }
    .course-info {
        grid-template-columns: repeat(1, 1fr);
    }
    .course-footer {
        gap: 8px;
    }
    .price,
    .details-btn {
        padding: 6px 20px;
    }

    /* about */
    .about-section .container {
        display: flex;
        flex-direction: column;
    }
    .about-section .about-title h2 {
        text-align: center;
    }
    .about-section .about-image {
        justify-content: center;
    }

    /* newsletter */
    .newsletter-section {
        flex-direction: column;
        gap: 30px;
    }

    /* footer */
    .footer .container {
        padding: 0;
    }
    .footer-top {
        /* flex-direction: column; */
        gap: 30px;
        padding: 20px;
    }

    .footer-top .footer-logo img {
        width: 130px;
    }

    .footer-top .footer-parteners img {
        width: 80px;
    }

    .footer-parteners {
        justify-content: center;
    }
    .footer-line {
        display: none;
    }

    .footer-description {
        padding: 0 20px;
        max-width: unset;
    }

    .footer-content {
        text-align: center;
        gap: 5px;
        margin-bottom: 5px;
        grid-template-columns: 1fr;
    }

    .footer-col {
        padding: 0 !important;
    }

    .footer-col .footer-contact {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-direction: column;
        height: 0px;
        overflow: hidden;
        transition: all 1s ease;
    }

    .footer-title {
        border-top: 2px solid var(--border-color);
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        margin: 0;
    }

    .footer-links {
        height: 0px;
        overflow: hidden;
        transition: all 1s ease;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .footer-links.active,
    .footer-contact.active {
        height: auto;
        overflow: visible;
        transition: all 1s ease;
    }

    .up {
        display: none;
    }

    .footer-title .down {
        display: unset;
    }

    /* course page */
    .course-page .page-title {
        padding-bottom: 210px;
    }

    .course-container {
        display: flex;
        flex-direction: column-reverse;
        /* justify-content: center; */
        width: 100%;
        align-items: center;
    }

    .course-container .course-sidebar-container {
        grid-template-columns: 1fr;
        max-width: 380px;
    }

    .course-tabs-conatiner {
        width: 100%;
    }

    .course-sidebar {
        margin-top: -210px;
    }

    .course-tabs-section {
        display: none;
    }

    .course-tabs-section.mobile-tab {
        display: block;
        width: 100%;
    }

}

/* 992px */
@media (max-width: 992px) {
    .navbar-mobile {
        padding: 13px;
    }
    header .logo {
        width: unset;
        height: 40px;
    }
    .navbar-mobile .auth .btn-login {
        padding: 5px 10px;
    }

    .hero-section {
        padding-top: 84px;
    }
    .hero-content {
        flex-direction: column;
        gap: 23px;
    }

    .hero-text {
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .platform-label {
        padding: 6px 9px;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .hero-text h1 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    .hero-text p {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .footer-col.contact-section .footer-title {
        width: 100%;
    }
}

/* 768px */
@media (max-width: 768px) {
    /* hero */
    .hero-image {
        justify-content: center;
    }

    .hero-text h1 {
        font-size: 26px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .hero-text a {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* features */
    .features-grid {
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
        gap: 20px;
    }
    .feature-card p {
        font-size: 16px;
    }

    /* categories */
    .categories-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* courses */
    .courses-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .course-card {
        max-width: 385px;
    }
    /* .card-image {
        height: 160px;
    } */
    .course-card .course-title {
        font-size: 16px;
    }
    .subjects {
        gap: 2px;
    }
    .subjects span {
        font-size: 12px;
        padding: 6px 12px;
    }
    .course-info {
        grid-template-columns: repeat(1, 1fr);
        flex-direction: column;
    }
    .course-footer {
        gap: 8px;
    }
    .price,
    .details-btn {
        padding: 6px 20px;
    }

    /* newsletter */
    .newsletter-section {
        flex-direction: column;
        gap: 30px;
    }
    .newsletter-form {
        flex-direction: row;
    }
    .newsletter-section .newsletter-text {
        width: 100%;
        padding: 0;
    }
    .newsletter-form {
        width: 100%;
    }
}

/* 576px */
@media (max-width: 576px) {
    /* courses */
    .course-card {
        max-width: 340px;
    }

    /* testimonials */
    .section-header {
        /* flex-direction: column; */
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .section-title {
        margin-bottom: 0;
    }
    /* newsletter */
    .newsletter-section .newsletter-text {
        text-align: center;
    }
    .newsletter-section h3 {
        font-size: 20px;
    }
    .newsletter-section p {
        font-size: 14px;
    }
    .newsletter-form {
        gap: 3px;
    }

    /* course page */
    .course-tabs {
        margin-top: 20px;
        gap: 5px !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
    }

    .course-content-section .container,
    .course-tabs-section.mobile-tab .container {
        padding: 0;
    }

    .course-tabs .tab {
        padding: 10px 2px;
        font-size: 15px;
    }

    .course-content-part {
        margin: 20px 0;
    }

    .course-content-part .title {
        font-size: 22px;
    }

    .course-content-body.body-section-about .learn-list li{
        display: grid;
        grid-template-columns: 1fr 9fr;
        align-items: start;
        justify-items: stretch;
    }

    .course-content-body.body-section-about .learn-list li svg{
        width: 24px !important;
        height: 24px !important;
    }

    .rating-container {
        padding: 10px;
    }

    .schedule-cell {
        font-size: 15px;
        padding: 10px;
    }

    .course-file-item, .lecture-item {
        padding: 10px;
        gap: 10px;
        display: flex;
        /* flex-wrap: wrap; */
    }

    .course-file-body,
    .lecture-item-body {
        flex-wrap: wrap;
        gap: 10px;
    }

    .course-file-name, .lecture-title {
        font-size: 15px;
    }

    /* models */
    .modal-content {
        width: 90%;
    }
    #viewPdfModal .modal-content {
        width: 100% !important;
        padding: 0 !important;
    }
    #viewPdfModal .modal-header {
        padding: 20px 10px 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .modal-header h2 {
        font-size: 20px;
    }

    .modal-body .sub-title {
        font-size: 15px;
    }

    .register-form .form-control, .login-form .form-control {
        padding: 10px;
    }

    .back-to-top {
        display: none;
        visibility: hidden;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
        visibility: hidden;
    }

    .banner-image {
        height: 205px !important;
    }
}