@media (max-width: 425px) {
    .hero {
        height: 60vh;
        text-align: center;
    }

    .hero h2 {
        font-size: 2.5rem;
    }

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

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

@media (max-width: 768px) {
    .about .item {
        text-align: center;
    }

    .about .item a {
        align-self: center;
    }

     .projects {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}