/* Mobile Responsive Design */

@media(max-width:768px){

    body{
        width:100%;
    }


    nav{
        flex-direction:column;
        gap:15px;
    }


    nav ul{
        flex-direction:column;
        align-items:center;
        padding:0;
    }


    .logo img{
        width:120px;
    }


    .hero img{
        height:350px;
    }


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


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


    .service-container{
        flex-direction:column;
        align-items:center;
    }


    .card{
        width:90%;
    }


    .gallery img{
        width:90%;
        height:auto;
    }


    .top-bar{
        font-size:12px;
    }

}