/* 响应式设计 */
@media (max-width: 1024px) {
    .feature-card {
        width: 49%;


    }

}

@media (max-width: 768px) {

    .top {
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    .logo {
        display: flex;
        width: 100%;
        align-content: center;
        justify-content: center;
        text-align: center;
    }


    .nav {
        width: 0;
    }

    .menu {
        position: fixed;
        flex-direction: column;
        top: 100px;
        left: -320px;
        width: 300px;
        height: 100vh;
        background: rgba(9, 3, 3, 0.35);
        z-index: 900;
        transition: all 0.4s ease;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
        overflow-y: auto;

    }

    .menu.active {
        left: 0;
    }

    .menu.active a {
        color: white;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .menu-img{
        display: block;
    }
    .menu-img img{
       width: 4rem;
    }

    .feature-card {
        width: 49%;
    }
    .feature-card h3 {
    }





    .hero-content-left{
        padding-left: 5%;
    }
    .hero-content {
        width: 100%;
    }
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .publish-container {
        padding: 30px 20px;
    }
}