.carousel  img {
    width: 100%;
    height: 500px;
    text-align: center;
}

.carousel h5,
.carousel P{
    color: black;
}

.carousel-item:before{
    content: "" ;
    position: absolute ;
    top: 0;
    left: 0;
    width: 100% ;
    height: 100% ;
    background-color: rgba(250, 250, 250, 0.200)   !important;
}


/*Metodo per inserire un segno diverso dai puntini. nel nostro caso il simbolo ">"*/
.carousel-control-next :before{
    content: "\f0a9";           /* Elemento da utilizzare (nel nostro esempio >*/
    font-family: "FontAwesome"; /* il font da utilizzare*/
    font-size: 35px;            /* grandezza dell'immagine (<) inserita */
    padding-left: 10px;        /* distanza tra il simbolo ed il testo*/
}

.carousel-control-prev :before{
    content: "\f0a8";           /* Elemento da utilizzare (nel nostro esempio >*/
    font-family: "FontAwesome"; /* il font da utilizzare*/
    font-size: 35px;            /* grandezza dell'immagine (<) inserita */
    padding-right: 10px;        /* distanza tra il simbolo ed il testo*/
}



.carousel-control-prev:hover {
    padding-right: 20px;
    transition: 0.7s;
}
.carousel-control-next:hover {
    padding-left: 20px;
    transition: 0.7s;
}

.carousel-control-prev-icon,
.carousel-control-next-icon
{
    background-image: none !important;
}

@media  screen and  (max-width: 678px) {
  
    .carousel  img {
        height: 250px;
    }
}