@media(max-width:991px){

    .navbar{
        padding:20px 5%;
    }

    .nav-links{
        display:none;
    }

    .hero{
        flex-direction:column;
        padding-top:160px;
    }

    .hero-left,
    .hero-right{
        width:100%;
    }

    .hero-left h1{
        font-size:50px;
        line-height:65px;
    }

    .hero-right{
        margin-top:50px;
    }

    .hero-card{
        width:100%;
        height:350px;
    }

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

    .about{
        flex-direction:column;
    }

    .about-left,
    .about-right{
        width:100%;
    }

    .cta-box{
        flex-direction:column;
        gap:30px;
        text-align:center;
    }

    .footer-container{
        grid-template-columns:1fr;
    }

}