@media(max-width:768px){

    .top-bar .container{
        flex-direction:column;
        gap:5px;
        text-align:center;
    }

    .menu-toggle{
        display:block;
    }

    .main-nav{
        display:none;
        width:100%;
        margin-top:15px;
    }

    .main-nav.active{
        display:block;
    }

    .main-nav ul{
        flex-direction:column;
        gap:0;
    }

    .main-nav li{
        text-align:center;
        padding:12px 0;
        border-top:1px solid rgba(255,255,255,0.1);
    }

    .site-header .container{
        flex-wrap:wrap;
    }

    .logo a{
        font-size:20px;
    }

    .hero-section{
        padding:80px 20px;
    }

    .hero-section h1{
        font-size:30px;
        line-height:1.2;
    }

    .course-layout{
        flex-direction:column;
    }

    .course-title{
        font-size:28px;
    }
}