html {
    scroll-padding-top: 15%; /* offset quando clicco su un link specifico */
}
  
h1 {
    text-align: center;
    margin-top: 2%;
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    animation: in linear;
    animation-timeline: view();
}

/* carosello */

#myCarousel h3 {
    font-size: clamp(1.2rem, 3vw, 3rem);
}

.carousel-indicators {
    margin-bottom: 0;
}

.carousel-caption h3 {
    margin-bottom: 5%;
}


/* elenco servizi */
.serv p {
    margin-top: 2%;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    animation: in linear;
    animation-timeline: view();

    color: #fff;
}

/* .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    row-gap: 5%;
    column-gap: 2%;
    padding: 0 0;
    margin: 3% auto 10%; 
    width: 90%;
}

.grid img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50px;
    margin-left: auto;
    margin-right: auto;
    animation: in-img linear;
    animation-timeline: view();
}

.manutenzione {
    margin-top: 10%;
} */

.manutenzione, .realizzazione, .abbattimenti, .disinfestazioni, .bonifica {
    height: 250px;
    /* background-color: blue; */
    display: grid;

    grid-template-columns: 50% 50%;
}

.img {
    background-image: url(images/realizzazione.jpg);
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
    z-index: 0; 
}
.testo {
    background-color: #797878;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 5%;
}

.testo h1{
    color: #fff;
}

.testo:hover {
    background-color: #196601aa;
}


@media (prefers-reduced-motion: no-preference) {
    @keyframes in {
        0% { opacity: 0; }
        30% { opacity: 1; }
    }

    @keyframes in-img {
        0% { scale: 0.8; opacity: 0; }
        20% { scale: 1; opacity: 1; }
    }
}

@media (max-width: 700px) {
    .glyphicon-chevron-left img, .glyphicon-chevron-right img{
        width: 40px;
    } 


    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-prev,
    .carousel-control .icon-next {

      margin-top: -30px;
    }

    .manutenzione, .realizzazione, .abbattimenti, .disinfestazioni, .bonifica {
        height: 500px;
        grid-template-columns: 100%;
    }

    .img, .testo{
        height: 250px;

    }
}
@media (max-width: 700px) {
    html {
        scroll-padding-top: 8%; /* offset quando clicco su un link specifico */
    }

    .serv h1 {
        margin-left: 3%;
        margin-right: 3%;
    }

    .serv p {
        margin-left: 10%;
        margin-right: 10%;
    }

    /* .manutenzione {
        margin-top: 6%;
    } */

    .grid {
        margin-bottom: 40%;
    }

    .grid img {
        width: 80%;
        height: 200px;
    }
    .realizzazione .img,
    .abbattimenti .img,
    .disinfestazioni .img,
    .bonifica .img {
        order: 2;
    }

    .realizzazione .testo,
    .abbattimenti .testo,
    .disinfestazioni .testo,
    .bonifica .testo {
        order: 1;
    }

    
    .manutenzione, .realizzazione, .abbattimenti, .disinfestazioni, .bonifica {
        height: 400px;
    }

    .img, .testo{
        height: 200px;

    }
}