@media (max-width: 768px){
    .projects{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media (max-width: 445px) {
    .header .header-container{
        padding-inline: 30px;
    }

    .hero{
        height: 70vh;
    }

    .hero h2{
        font-size: 2rem;
        margin-right: 0;
    }


    .about{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .about .item{
        text-align: center;
    }

    .about .item .btn-know-more{
        align-self: center;
    }

    .services{
        grid-template-columns: 1fr;

    }

    .projects{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}