@media (max-width:700px){

    .hero{
        flex-direction:column;
        padding:40px 10px;
    }

    .hero-text{
        text-align:center;
    }

    .hero-text h1{
        font-size:32px;
    }

    .hero-text h2{
        font-size:22px;
    }

    .hero-text p{
        font-size:17px;
    }

    .hero-image img{
        max-width:220px;
    }

    .feature-box{
        flex-direction:column;
        align-items:center;
    }

    .feature-box div{
        width:90%;
    }

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

    .menu{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

    .menu a{
        display:inline-block;
        margin:0;
    }

    .footer-menu{
        flex-direction:column;
        gap:12px;
    }

    .card{
        padding:25px;
    }

    .container{
        padding:30px 15px;
    }

}