@media screen and (max-width: 1024px) {
    
    nav img {width: 6%; height: 10vh;}
    nav ul li a {font-size: 32px;}
    nav button {width: 15%;margin-right: 10px;}
    .hero-text h1 {font-size: 28px;}
    .hero-text h2 {font-size: 24px;}
    .hero-text button {width: 35%;}
    .boxServiziTesto h3 {font-size: 28px;;margin-top: 5vh;}
    .boxServiziTesto p {font-family: 'Lato',sans-serif;font-size: 17px;color: #fff;text-align: center;width: 85%;}
    .boxServiziImmagine {height: 80vh;}
    .gallery-grid {grid-template-columns: repeat(3, 1fr);}
    .boxCall {text-align: center;}
    .boxCall button {padding: 10px;width: 25%;}

}

@media screen and (max-width: 768px) {

    nav ul {gap: 10px;}
    nav ul li a {font-size: 20px;}
    nav button {width: 20%;margin-right: 0px;}
    .hero-text {top: 25%;left: 5%;width: 60%;}
    .hero-text h1 {font-size: 28px;}
    .hero-text h2 {font-size: 24px;}
    .hero-text button {width: 40%;}
    #sezioneServizi {align-items: center;padding: 0 10px;}
    #sezioneServizi h2 {font-size: 28px;margin-bottom: 2vh;}
    .pServizi {font-size: 16px;padding: 0 5px;}
    .containerServizi {flex-direction: column;align-items: center;gap: 20px;margin-top: 3vh;margin-bottom: 3vh;}
.boxServiziTesto, .boxServiziImmagine
    .boxServiziTesto h3 {font-size: 24px;margin-top: 3vh;}
    .boxServiziTesto p {font-size: 16px;width: 90%;margin-left: 5%;margin-top: 2vh;}
    .boxServiziImmagine {width: 90%;height: 50vh;justify-content: center;align-items: center;}
    .boxServiziImmagine img {width: 100%;height: 100%;border: 1px solid white;}
    .boxServiziImmagine {margin-left: 10%;;width: 80%;height: 50vh;margin-top: 1vh;}
    .gallery-grid {grid-template-columns: repeat(2, 1fr);}
    .boxCall {text-align: center;}
    .boxCall h2 {font-size: 26px;}
    .boxCall p {font-size: 16px;}
    .boxCall button {padding: 10px;width: 40%;}
    /* Footer */
    .footer-container { flex-direction: column; text-align: center; }
    .footer-section { margin-bottom: 40px; }
    .social-icons, .payment-methods { justify-content: center; }
    
}

@media screen and (max-width: 480px) {

    nav {flex-direction: row;justify-content: space-between;align-items: center;}
    nav img {width: 12%;}
    nav ul {display: none;text-align: center;flex-direction: column;background-color: #000;position: absolute;top: 60px;right: 0;width: 100%;z-index: 999;padding: 20px 0;}
    nav ul.show {display: flex;}
    .hamburger {display: flex;}
    nav button {display: none;}
    .hero-text {top: 26%;left: 2%;width: 60%;}
    .hero-text h1 {font-size: 24px;}
    .hero-text h2 {font-size: 18px;}
    .hero img {width: 100%;height: 90vh;object-fit: cover;object-position: 75% center;}
    .hero-text button {width: 50%;}
    #sezioneServizi {align-items: center;padding: 0 10px;}
    #sezioneServizi h2 {font-size: 28px;margin-bottom: 2vh;}
    .pServizi {font-size: 16px;padding: 0 5px;}
    .containerServizi {flex-direction: column;align-items: center;gap: 20px;margin-top: 3vh;margin-bottom: 3vh;}
    .boxServiziTesto, .boxServiziImmagine {width: 100%;height: auto;}
    .boxServiziTesto h3 {font-size: 24px;margin-top: 3vh;}
    .boxServiziTesto p {font-size: 16px;width: 90%;margin-left: 5%;margin-top: 2vh;}
    .boxServiziImmagine {width: 90%;height: auto;margin: 0 auto;}
    .boxServiziImmagine img {width: 100%;height: auto;border: 1px solid white;}
    #sezioneGallery h2 {font-size: 36px;}
    #sezioneGallery p {font-size: 20px;}
    .gallery-grid {grid-template-columns: repeat(1, 1fr);}
    #sezioneCall img {object-fit: cover;}
    .boxCall {text-align: center;}
    .boxCall h2 {font-size: 26px;}
    .boxCall p {font-size: 16px;}
    .boxCall button {padding: 10px;width: 60%;}
    
}

@media screen and (max-width: 768px) {

    .hero-text {
        top: 28%;
        left: 5%;
        width: 75%;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .hero-text h1 em {
        font-size: 1.8rem;
    }

    .hero-text button {
        padding: 10px 20px;
    }

}

@media screen and (max-width: 480px) {

    .hero-text {
        top: 30%;
        left: 5%;
        width: 65%;
    }

    .hero-text h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .hero-text h1 em {
        font-size: 1.5rem;
    }

    .hero-text button {
        width: auto;
        padding: 10px 18px;
    }

}