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

/* carosello */

.carousel-inner h3 {
    color: #c3c3c3;
}

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

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

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



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

.verde-stabilizzato h1 {
    color: #144b00;
}

/* div dati */
.dati {
    background-color: #0d5627;
    /* margin-top: 5%; */
    color: #fff;
    padding: 5% 5%;
}

.dati h1 {
    margin-bottom: 3%;
}

.sotto h2 {
    font-size: clamp(1.4rem, 1.6vw, 1.7rem);
    animation: in linear;
    animation-timeline: view();
}

.sotto img {
    margin-bottom: 8%;
}

.sotto {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.sotto > div {
    text-align: center;
    padding: 1%;
}

.sotto p {
    animation: in linear;
    animation-timeline: view();
    margin: 5% auto;
    max-width: 75%;
    text-align: center;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    color: #fff;
    font-weight: 200;
}

.verde-stabilizzato {
    margin-top: 10%;
}




@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: 1200px) {
    .sotto {
        display: grid;
        grid-template-columns: 50% 50%;
    }

}

@media (max-width: 800px) {
    .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;
    }
}
@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%;
    } */

    .verde-stabilizzato {
        margin-top: 6%;
    }

    .sotto {
        display: grid;
        grid-template-columns: 100%;
    }


}