/* 平板设备 (768px - 992px) */
@media (max-width: 992px) {
    .main-nav {
        position: relative;
    }
    
   .nav-menu {
        display: none;
        flex-direction: column;
        position: fixed; /* 改为fixed定位 */
        top: 70px; /* header的高度 */
        left: 0;
        width: 100vw; /* 100%视窗宽度 */
        height: calc(100vh - 70px); /* 全屏高度减去header */
        background-color: white;
        z-index: 100;
        padding: 20px 0;
        overflow-y: auto; /* 允许滚动 */
        box-shadow: none; /* 去掉阴影，因为全屏了 */
    }
    

    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu li {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px 30px;
        border-bottom: 1px solid #eee;
    }
    
    .nav-menu a.active::after {
        display: none;
    }
    
    .nav-menu a.active {
        background-color: #f0f7ff;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .hero-content h2 {
        font-size: 32px;
    }
    
    .hero-buttons .cta-button {
        display: block;
        margin: 10px auto;
        max-width: 300px;
    }
    
    .services-grid, .teachers-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .courses-preview {
        grid-template-columns: 1fr;
    }
}

/* 手机设备 (小于768px) */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
    }
    
    .hero-section {
        padding: 70px 0;
    }
    
    .hero-content h2 {
        font-size: 28px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 28px;
        margin: 50px 0 30px;
    }
    
    .service-card, .course-card, .news-item, .teacher-card {
        padding: 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* 小手机设备 (小于480px) */
@media (max-width: 480px) {
    .logo-text h1 {
        font-size: 18px;
    }
    
    .logo-icon {
        font-size: 28px;
    }
    
    .hero-content h2 {
        font-size: 24px;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 16px;
    }
    
    .teachers-grid {
        grid-template-columns: 1fr;
    }
}