@media (max-width: 768px){

    .navbar{
        flex-direction:column;
        gap:20px;
    }

    nav ul{
        flex-direction:column;
        text-align:center;
        gap:15px;
    }

    .hero h1{
        font-size:2rem;
    }

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

    .section-title{
        font-size:2rem;
    }

    .cards{
        grid-template-columns:1fr;
    }
}