* {

    margin: 0;

    padding: 0;

    font-family: sans-serif;

    box-sizing: border-box;

}

.navbar{

    background-color: transparent;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0); /* Ombra sottile */

    transition: background-color 0.3s ease;

}

.nav-link {

    font-size: 20px; /* Aumenta la dimensione del testo */

    color: white;

}

.nav-link:hover {

    font-size: 20px;

}

.nav-link.active {

    font-size: 20px; /* Leggermente più grande per evidenziare il link attivo */

}





/* Quando la navbar è fissa in alto (dopo lo scroll) e quando il menu è espanso */

.navbar.fixed-top,

.navbar.navbar-expanded {

    background-color: white !important; /* Sfondo bianco */

}

.navbar.fixed-top .nav-link,

.navbar.navbar-expanded .nav-link {

    color: #555 !important; /* Colore nero per le voci di menu */

}

.navbar.fixed-top .nav-link.active {

    color: #0085BE !important; /* Colore blu per il link attivo */

    font-weight: bold; /* Grassetto per il link attivo */

    font-size: 18px;

}

.navbar.fixed-top .nav-link:hover {

    color: #0085BE !important; /* Colore blu per il link attivo quando la navbar è fissa */

    border-bottom: 3px solid #C74843;

}



.banner{

    width: 100%;

    height: 100vh;

    background-image: linear-gradient(rgba(0,0,0,0.40),rgba(0,0,0,0.40));

    background-position: center;

    background-size: center;

    overflow: hidden;

}



.content{

    width: 100%;

    position: absolute;

    color: white;

    top: 68%;

    transform: translateY(-50%);

    /*text-align: center;*/

    text-align: left;

    padding-left: 5%;

}

.content img {

    width: 75vh;

    max-width: 100%; /* L'immagine si adatta alla larghezza del contenitore */

    height: auto; /* Mantiene le proporzioni originali */

    display: block; /* Evita spazi indesiderati sotto l'immagine */

    margin-left: -1.5%;

    margin-bottom: -2%;

}



.content p{

    font-size: 20px;

}

.description_responsive {

    text-align: left; /* Allinea il testo a sinistra */

    max-width: 60%; /* Limita la larghezza al 50% */

    font-size: 1.2rem; /* Imposta una dimensione di font adeguata */

    line-height: 1.6; /* Imposta una distanza tra le righe per migliorare la leggibilità */

}



button {

    width: 200px; /* Mantiene la larghezza fissa */

    padding: 15px; /* Imposta il padding generale */

    margin: 20px 5px; /* Aggiunge il margine attorno al bottone */

    text-align: center; /* Allinea il testo al centro */

    border-radius: 0; /* Rende il bottone rettangolare (senza bordi arrotondati) */

    color: white; /* Colore del testo */

    background-color: #c74843; /* Colore di sfondo */

    border: 2px solid #c74843; /* Colore del bordo per abbinare il colore di sfondo */

    font-size: 20px; /* Imposta la dimensione del testo */

    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */

    font-weight: 600; /* Imposta il peso del font */

}



.services{

    color: #c74843;

}

button:hover{

    background: #c7474380;

    transition: 0.5s;

}

button:hover{

    color: white;

}



.card {

    border-radius: 12px;

    transition: transform 0.3s ease-in-out;

    margin-left: 10px;

    margin-bottom: 10px;

    box-shadow: 6px 6px 12px rgba(199, 72, 67, 0.6) !important; /* Ombra rossa scura a destra e sotto */

}



.card:hover {

    transform: translateY(-5px);

}

.card i {

    color: #c74843;

}

.banner video {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 99vw;

    height: 100vh;

    object-fit: cover;

    z-index: -1;

}



a.text-decoration-none {

    color: inherit; /* Rimuove il colore blu e utilizza il colore ereditato (può essere il colore del testo) */

}



a.text-decoration-none:hover {

    color: inherit; /* Rimuove anche il colore durante il passaggio del mouse */

}





/* Centra il contenitore cnt-img */

.cnt-img {

    display: flex;                /* Usa Flexbox per centrare gli elementi */

    align-items: center;          /* Centra verticalmente */
    
    justify-content: center;

    flex-wrap: wrap;              /* Permette agli elementi di andare a capo, se necessario */

    min-height: 100vh;            /* Imposta l'altezza minima al 100% della viewport */

    padding-top: 5vh;

    padding-bottom: 1.5vh;          /* Aggiungi un margine sotto il contenitore per lasciare spazio al footer */

    background-color: rgba(199, 72, 67, 1);

}

.cnt-img span {
    width: 100%;          /* Assicura che lo span occupi tutta la larghezza disponibile */
    text-align: center;   /* Centra il testo orizzontalmente */
}

.cnt-img h2{

    color: white;

    padding-top: 0vh;
    
    text-align: center;

}

.cnt-img p{

    color: white;

    padding-top: 1vh;

    padding-bottom: 2vh;
    
    text-align: center;

}

/* Aggiunge uno spazio tra le immagini */

.row {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;      /* Centra orizzontalmente tutte le colonne */

    margin: 0;                    /* Rimuove margini esterni tra le righe */

    padding: 0;                   /* Rimuove padding tra le righe */

}



/* Rimuove lo spazio tra le colonne */

.col-6, .col-sm-6, .col-md-4, .col-lg-3 {

    padding: 0;                   /* Rimuove i padding interni delle colonne */

}



/* Rimuove i margini tra le righe (completamente) */

.row > .col-6, .row > .col-sm-6, .row > .col-md-4, .row > .col-lg-3 {

    margin-bottom: 0 !important;   /* Elimina i margini verticali tra le righe */

}



/* Imposta il posizionamento delle immagini e l'effetto hover */

.image-wrapper {

    position: relative;

    width: 100%;                  /* Assicurati che la larghezza sia al 100% */

    height: 100%;                 /* Aggiungi altezza per mantenere la proporzione */

    overflow: hidden;

}



.image-wrapper img {

    width: 100%;

    height: 50vh; /* Altezza fissa per tutte le immagini */

    object-fit: cover; /* Impedisce la deformazione e riempie l'area */

}



/* L'immagine di default (bianco e nero) */

.image-default {

    display: block;

    width: 100%;

    height: auto;

    opacity: 1;                  /* L'immagine bianco e nero è visibile di default */

    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 

    opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);}



/* L'immagine che appare al passaggio del mouse */

.image-hover {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    opacity: 0;                  /* L'immagine colorata è invisibile di default */

    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 

    opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);}



/* Frase che appare quando l'immagine è colorata */

.caption {

    position: absolute;

    bottom: 7px;                

    left: 50%;                   

    width: 85%;

    transform: translateX(-50%); 

    font-size: 20px;

    color: white;                

    opacity: 0;                  

    transition: opacity 0.5s ease; 

    text-align: center;  /* Centra il testo orizzontalmente */

    font-weight: bold;   /* Imposta il testo in grassetto */

}





/* Quando si passa sopra l'immagine, nascondi l'immagine bianco e nero e mostra quella colorata */

.image-wrapper:hover .image-default {

    opacity: 0; /* Nasconde l'immagine bianco e nero al passaggio del mouse */

}



.image-wrapper:hover .image-hover {

    opacity: 0.9; /* Mostra l'immagine colorata al passaggio del mouse */

    transform: scale(2);

}



/* Quando si passa sopra l'immagine, mostra anche il testo */

.image-wrapper:hover .caption {

    opacity: 1; /* Mostra il testo */

    transition: opacity 0.5s ease

}



.prova {

    display: flex;

    justify-content: center; /* Centra orizzontalmente */

    align-items: center;     /* Centra verticalmente */

    height: 8vh;           /* Altezze sufficiente per centrare verticalmente */

    width: 100%;             /* Assicura che la larghezza prenda tutta la larghezza disponibile */

    text-align: center;      /* Centra il testo dentro il <p> */

}



.prova p {

    font-size: 18px;

    font-weight: bold;

    margin: 0;               /* Rimuove eventuali margini che potrebbero influire sul centramento */

}









#statsSection {

    display: flex;

    justify-content: flex-end;

    /*justify-content: center;*/

    align-items: center;

    margin: 0;

    padding: 0;

    height: 70vh; 

    background-image: url('../images/lavorazioni/lavoro31.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed; /* Mantiene lo sfondo fisso durante lo scroll */

    color: white;

    z-index: 1;

}



.number-row {

    display: flex;

    justify-content: center;

    align-items: center;

}



.number {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border: 3px solid white; /* Cambia colore se necessario */

    text-align: center;

    padding: 20px;

    margin: 15px;

    background-color: #c74843;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.stat {

    font-size: 2rem;

    font-weight: bold;

}



p {

    font-size: 1.2rem;

}











#ctaSection {

    display: flex;

    justify-content: center;

    align-items: center;

    color: black;

    text-align: center;

    padding: 50px 20px;

}



.cta-container {

    max-width: auto;

}



.cta-container h2 {

    font-size: 2rem;

    margin-bottom: 10px;

}



.cta-container p {

    font-size: 1.2rem;

    margin-bottom: 20px;

}



.cta-button {

    display: inline-block;

    font-size: 1.2rem;

    text-decoration: none;

    transition: 0.3s ease-in-out;

    width: auto; /* Mantiene la larghezza fissa */

    padding: 15px; /* Imposta il padding generale */

    margin: 5px 5px; /* Aggiunge il margine attorno al bottone */

    text-align: center; /* Allinea il testo al centro */

    border-radius: 0; /* Rende il bottone rettangolare (senza bordi arrotondati) */

    color: white; /* Colore del testo */

    background-color: #c74843; /* Colore di sfondo */

    border: 2px solid #c74843; /* Colore del bordo per abbinare il colore di sfondo */

    font-size: 20px; /* Imposta la dimensione del testo */

    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */

    font-weight: 600; /* Imposta il peso del font */

}

.cta-button:hover {

    background: #c7474380;

    color: white;

    transition: 0.5s;

}







@media(max-width: 768px){

    .nav-link {

        font-size: 20px; /* Aumenta la dimensione del testo */

        color: black;

    }

    .navbar-toggler {

        border: none; /* Rimuove il bordo predefinito */

        outline: none; /* Evita contorni indesiderati */

        padding: 0;

        position: absolute;

        right: -40%; /* Allinea il bottone a destra */

    }



    /* Personalizzazione dell'icona del menu (hamburger) */

    .navbar-toggler-icon {

        background-image: none; /* Rimuove l'icona di default */

        width: 8vw;

        height: 0.5vh;

        background-color: #c74843; /* Colore delle righe */

        display: block;

        position: relative;

    }



    /* Righe superiori e inferiori */

    .navbar-toggler-icon::before,

    .navbar-toggler-icon::after {

        content: "";

        position: absolute;

        width: 8vw;

        height: 0.5vh;

        background-color: #c74843; /* Stesso colore */

        left: 0;

        transition: all 0.3s ease;

    }



    .navbar-toggler-icon::before {

        top: -8px;

    }



    .navbar-toggler-icon::after {

        top: 8px;

    }



    /* Il menu a tendina viene portato in primo piano */

    .navbar-collapse {

        background-color: white;

        padding: 10px;

        border-radius: 5px;

        position: absolute;

        top: 100%; /* Evita che copra il bottone */

        left: 0;

        width: 100%;

        z-index: 1050; /* Lo porta sopra gli altri elementi */

        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombra per maggiore visibilità */

    }

    .navbar-toggler:focus,

    .navbar-toggler:active {

        outline: none !important;

        box-shadow: none !important;

    }

    /* Navbar diventa bianca solo quando il menu è aperto */

    .navbar.navbar-expanded {

        background-color: white !important;

        transition: background-color 0.3s ease;

    }



    

    .content img {

        width: 75vh;

        max-width: 80%; /* L'immagine si adatta alla larghezza del contenitore */

        height: auto; /* Mantiene le proporzioni originali */

        display: block; /* Evita spazi indesiderati sotto l'immagine */

        margin-left: -1.5%;

    }

    .content h1{

        font-size: 65px;

        font-weight: 800;

    }

    .banner video{

        width: 99vw;

        height: 100vh;

    }

    .image-wrapper img {

        height: 40vh; /* Altezza fissa per tutte le immagini */

    }

    .image-default {

        opacity: 0; /* Nasconde l'immagine bianco e nero */

    }

    .image-hover {

        opacity: 1; /* Mostra l'immagine colorata */

    }

    .image-wrapper:hover .image-hover {

        opacity: 1; /* Mostra l'immagine colorata al passaggio del mouse */

    }

    

    .caption {

        position: absolute;

        bottom: 3px;                

        left: 50%;                   

        width: 95%;

        transform: translateX(-50%); 

        font-size: 15px;

        color: white;                

        opacity: 0;                  

        transition: opacity 0.5s ease; 

        text-align: center;  /* Centra il testo orizzontalmente */

        font-weight: bold;   /* Imposta il testo in grassetto */

    }

    

    .no-img {

        display: none;

    }

    #statsSection {

        background-attachment: scroll; /* disattiva fixed su iOS */

        height: 100vh;                 /* più affidabile di 100vh su iOS */

        /* in alternativa: min-height: 100dvh; */

        background-position: center center;

    }

}