/* PC */
@media screen and (min-width: 1400px) {
    .mobile-header {
        display: none;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    .mobile-header {
        display: none;
    }

    .hero .heading {
        font-size: 5.7rem;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px){
    .mobile-header {
        display: none;
    }

    .hero .heading {
        font-size: 4.8rem;
    }

    .hero .content-block {
        padding: 64px 0 0 80px;
    }

    .hero .hero-summary {
        right: -37px;
    }

    .features .images .feature1-img {
        width: 245px;
        height: 379px;
    }

    .features .body {
        gap: 0 20px;
    }
}

/* Tablet & Mobile */
@media screen and (max-width: 991.98px) {
    .body {
        position: relative;
    }
    .body .logo {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%);
    }
    .nav ul {
        display: none;
    }

    .toggle-menu svg {
        width: 24px;
        color: #666;
    }

    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity, visibility, 0.25s;
    }

    .menu-drawer {
        padding: 60px;
        position: fixed;
        inset: 0 40% 0 0;
        background: #fff;
        z-index: 2;
        transform: translateX(-100%);
        transition: transform, 0.25s;
    }

    .menu-drawer ul {
        margin-top: 32px;
    }

    .menu-drawer ul a {
        color: #333;
        display: block;
        padding: 14px;
        font-weight: 500;
    }

    .menu-checkbox:checked ~ .menu-overlay {
        opacity: 1;
        visibility: visible;
    }

    .menu-checkbox:checked ~ .menu-drawer {
        transform: translateX(0);
    }

    .media-block {
        display: none;
    }

    .hero .content-block {
        width: 100%;
        padding: 30px 0 0 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .popular .course-list {
        gap: 10px;
    }

    .features .images {
        display: flex;
        gap: 0 15px;
    }

    .features .images .feature1-img {
        width: 195px;
        height: 329px;
    }

    .features .images img {
        width: 350px;
        height: 320px;
    }

    .features .heading {
        font-size: 3.3rem;
    }

    .blog .blog-list {
        gap: 20px;
        margin-right: -20px;
    }

    .footer {
        padding: 96px 50px 0px;
    }
}

/* Mobile */
@media screen and (max-width: 767.98px) {
    .header .sign-up-btn {
        min-width: 115px;
        line-height: 50px;
    }

    .hero-cta {
        min-width: 140px;
        line-height: 50px;
    }

    .hero .heading {
        font-size: 4rem;
    }

    .hero .watch-video span {
        font-size: 1.6rem;
    }

    .hero .watch-video .icon {
        width: 30px;
        height: 30px;
    }

    .hero .desc {
        font-size: 1.6rem;
    }

    .popular {
        margin-top: 50px;
    }

    .popular .controls {
        display: none;
    }

    .popular .course-list {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .feedback-item blockquote {
        font-size: 1.6rem;
    }

    .blog .blog-top .desc {
        width: inherit;
    }

    .features .body {
        flex-direction: column;
    }

    .features .images .feature1-img {
        width: 100%;
    }

    .features .images .feature2-img {
        width: 100%;
        object-fit: cover;
    }

    .features .content {
        margin-top: 30px;
        width: 100%;
    }

    .features .images {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .features-2nd {
        margin-top: 10px;
    }

    .blog {
        margin-top: 10px;
    }

    .blog .item {
        width: calc(100% - 20px);
    }

    .blog .blog-list {
        margin-right: -20px;
    }

    .hero .stats strong {
        font-size: 3.4rem;
    }

    .footer {
        padding: 70px 5px 0px;
    }

    .footer .row {
        flex-direction: column;
    }

    .footer .row .column {
        width: 100% !important;
    }

    .footer .row .column .heading {
        margin-top: 50px;
    }
}