body {

    padding-top: 80px; /* Imposta un padding per lasciare spazio alla navbar */

}



.custom-img {

    width: 100%; /* L'immagine occupa il 100% della larghezza */

    height: 60vh; /* Altezza al 60% della viewport */

    object-fit: cover; /* Mantiene proporzioni senza distorsioni */

    display: block; /* Evita margini bianchi laterali indesiderati */

    object-position: center;

}



.container {

    max-width: 80%; /* O qualsiasi altra larghezza desiderata */

    margin: 0 auto; /* Centra la container */

}





.card-p {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 100%; /* Aumenta l'altezza della card-p (ad esempio al 85% dell'altezza di card-img) */

    margin-left: 0%;

    margin-right: -12%;

    position: relative;

    z-index: 10;

    padding-left: 1cm; /* Stringi un po' la card-p (puoi regolare il valore a piacere) */

    padding-right: 1cm; /* Stringi un po' la card-p */

}



.card-pNew {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 100%; /* Aumenta l'altezza della card-p (ad esempio al 85% dell'altezza di card-img) */

    margin-left: -12%;

    margin-right: -0%;

    position: relative;

    z-index: 10;

    padding-left: 1cm; /* Stringi un po' la card-p (puoi regolare il valore a piacere) */

    padding-right: 1cm; /* Stringi un po' la card-p */

}



.card-img {

    position: relative;

    z-index: 1;

}



.myP {

    padding: 20px;

    background-color: #f9f4e6;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    border-radius: 8px;

}



.card-title{

    color: #8b4513;

}



.card-text{

    color: #4a4a4a;

}







/* Stile generale */

.image-wrapper {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 75%; /* Mantiene il rapporto 4:3 */

}



.image-wrapper img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity 1.5s ease;

}



.image-wrapper .bw {

    opacity: 1;

    /*width: 100%;*/

}



.image-wrapper .color {

    opacity: 0;

}



.image-wrapper:hover .bw {

    opacity: 0;

}



.image-wrapper:hover .color {

    opacity: 1;

}



/* Rimuove gli spazi tra le colonne della prima riga */

.row.g-0 > .col-md-6 {

    margin-bottom: 0;

}



/* Spaziatura tra le righe */

.row.g-4 + .row.g-4 {

    margin-top: 2rem;

}







@media (max-width: 768px) {



    .custom-img {

        width: 100%;

        height: 58vh;              /* stessa altezza ovunque */

        object-fit: cover;         /* riempie sempre il box senza bande */

        object-position: top;      /* puoi usare center/top/bottom */

        display: block;

    }





    .container {

        max-width: 100%;

        width: 100%;

    }

    



    .undertitle{

        word-wrap: break-word;

        overflow-wrap: break-word;

    }





    .card {

        margin: 0 auto;

        border-radius: 8px;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

    

    /* Centralizza il testo */

    .card-body {

        padding: 20px;

        text-align: center;

    }

    

    /* Rendiamo la card più alta e ben centrata per i dispositivi mobili */

    .card-body .card-title {

        font-size: 1.25rem;

        margin-bottom: 15px;

    }

    

    .card-body .card-text {

        font-size: 1rem;

        line-height: 1.6;

    }

    

    /* Regola l'altezza delle card per dispositivi mobili */

    .card {

        margin-bottom: 20px;

    }



    

}