body{
    margin:0;
}
.hero {
    background-image: url("img/IMG_4270.jpeg");   
    background-size: cover;
    background-position: center;
    height:600px;
    position:relative;
    overflow:hidden;
}

/* SECONDA IMMAGINE CHE APPARE DURANTE LA TRANSIZIONE */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image: var(--next-bg);
    background-size: cover;
    background-position: center;

    opacity: 0;

    transition: opacity 1s ease;

    z-index: 0;
}


/* MENU E TESTI SOPRA L'IMMAGINE */

.hero > * {
    position: relative;
    z-index: 1;
}


.heroHome{
    background-image: url("img/99.jpg");  
    background-size: cover;
    background-position: center;
    height:600px;
}

.heroVeicoli{
    background-image: url("img/99.jpg"); 
    height: 600px;
    background-size: cover;
    background-position: center; 
}
 /*MENU */
nav{
    justify-content: center;
    padding: 20px;
    gap:50px;
    display: flex;
}
nav a {
    color:rgb(245, 210, 166);
    margin: 20px;
    text-decoration: none;
    font-size: 18px;
    font-family:'Times New Roman', Times, serif;
    font-weight: bold;
    
}
nav a:hover{
    color:rgb(23, 31, 23);
}
.spazio-bottone {
    justify-content:space-between;
    padding: 20px 40px;
    align-items: center;
    display: flex;
    background-color:rgb(200, 176, 145);
}
.spazio-bottone h2{
    margin: 0;
    font-style: oblique;
    font-size: 30px;
    color: rgb(220, 197, 165);
}
.spazio-bottone  nav a{
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid;
    background-color:#c8b89a;
    color:rgb(225, 224, 192);
    text-decoration:none;
    border-radius: 0;
    font-size: 16px;
}
.spazio-bottone  nav a:hover {
    background-color: #b17b3c;
}


/* ATTIVA LA TRANSIZIONE */
.hero.cambio::before{
    opacity:1;
}
.storia{
    margin: 80 px auto;
    width:90%;
    display: flex;
    text-align: center;
    color: #3e3d3d;
}

.separatore{
    width:1px;
    background-color: #d0d0d0;
}

.storia h2{
    font-size: 15px;
    color: #333333;
    margin-bottom: 15px;
}
.storia h1{
    font-size: 30px;
}
.colonna{
    width: 50%;
    box-sizing: border-box;
    padding:0 40px;
    font-family:'Times New Roman', Times, serif;
}
.colonna i{
    color: rgb(226, 180, 110);
      
      
}
.contatti{
    text-align: center;
    color:antiquewhite;
    padding: 100px;
    height: 200px;
    background-color: rgb(23, 31, 23);
    display: flex;
}
.contatti i{
    margin-right: 8px;
    color: white;
    font-size: 15px;
}
.contatti p{
    margin: 2px 0;
    font-size: 15px;
}

.servizi {
    list-style: none; 
    padding-top: 5%;
    margin-left: 30%;
    width: fit-content;
     color: rgb(60, 75, 61);
}
.servizi i { 
    display: inline-block;
    margin-right: 10px;
    font-size: 40px;
    margin-right: 25px 0;
   
}
.servizi li:hover i {
    transform: translateX(5px);
}
.servizi li:hover i:hover p{
    font-size: 10px;
}
.servizi li{
    text-align: left;
    font-size: 30px;
}
.percheNoi{
    display: flex;
    text-align:center;
    width: 100%;
    height: 350px;
    background-color:#7c886b;
}
.noi{
     width: 50%;
}
.noi img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    display:block;
}
.percheNoi p{
    padding-top: 7%;
    padding-left:10%;
    font-size:18px;
    
    margin-right: 60px;
    color:  #0b140c;
}
.scritta1,
.scritta2{
    display: block;
}
.scritta1{
    font-size: 55px;
    text-align: center;
    color: rgb(242, 212, 176);
    animation: sali 7s ease-in-out infinite;
}
.scritta2{
    font-size: 25px;
    color:  rgb(242, 212, 176);
    text-align: center;
    animation: scendi 7s ease-in-out infinite;
  
}
@keyframes sali {
    0% 
    {   transform: translateY(0);}
    10% 
    {   transform: translateY(-50px);}
    20%
    {
        transform: translateY(0);}
    100% 
    {   transform: translateY(0);}
}

.scritta3{
    display: block;
    animation: scendi 7s infinite;
    background-size: cover;
    background-position: center;
    text-align: center;
    color:rgb(23, 31, 23);
    font-size: 15px; 

}
@keyframes scendi {
    0% 
    {   transform: translateY(0);}
    10% 
    {   transform: translateY(50px);}
    20%
    {
        transform: translateY(0);}
    100% 
    {   transform: translateY(0);}
}

.veicoli {
    width: 100%;
    text-align: center;
}

.veicoli h2 {
    font-size: 44px;
    color: antiquewhite;
}
.sottotitolo {
    color: antiquewhite;
    margin-bottom: 40px;
}

.spazio-bianco{
    height:30px;
}
.contenitore-veicoli {
    display: flex;
    gap: 10px;
    margin-left:30px;
    margin-right: 30px;
}
.veicolo {
    width: 33%;
}
.img{
    position:relative;
}



.veicolo img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.veicolo h3 {
    color: #333333;
}

.veicolo p {
    color: #666666;
    line-height: 1.6;
}
.veicolo p::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: red;
    margin: 8px auto 0;
}
.foto{
    background-image: url("img/v90.jpg");
    height: 600px;
    background-size: cover;
    background-position: center;
    text-align: center;
}
.contattaci {
    width: 70%;
    margin: 80px auto;
    text-align: center;
}

.contattaci h2 {
    color: #333333;
    margin-bottom: 40px;
}

.contattaci form {
    width: 70%;
    margin: auto;
}

.riga {
    display: flex;
    gap: 20px;
}

.riga div {
    width: 50%;
}

.contattaci label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    color: #555555;
}

.contattaci input,
.contattaci textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-family: inherit;
}

.contattaci textarea {
    height: 150px;
    resize: vertical;
}

.contattaci button {
    padding: 12px 30px;
    border: none;
    background-color: #333333;
    color: white;
    cursor: pointer;
}

.contattaci button:hover {
    background-color: #555555;
}
.contattaci h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: red;
    margin: 8px auto 0;
}
.fa-3d {
  font-size: 80px;      /* Dimensione dell'icona */
  color: #647463;       /* Colore frontale (es. Azzurro) */
  
  /* L'effetto 3D si ottiene accumulando ombre compatte */
  text-shadow: 
    1px 1px 0px hsl(112, 12%, 24%),
    2px 2px 0px hsl(112, 12%, 24%),
    3px 3px 0px hsl(112, 12%, 24%),
    4px 4px 0px hsl(112, 12%, 24%),
    5px 5px 0px hsl(112, 12%, 24%),
    6px 6px 5px rgba(37, 9, 69, 0.3); /* Ombra morbida finale per dare stacco */
}

/* ADATTAMENTO PER TELEFONI */
@media screen and (max-width: 600px) {

    nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        gap: 0;
        padding: 10px 4px;
        width: 100%;
        box-sizing: border-box;
    }

    nav a {
        margin: 0px;
        font-size: 13px;
        white-space: nowrap;
    }

    .hero,
    .heroHome,
    .heroVeicoli {
        height: 300px;
    background-size: cover;
    background-position: center;
        width:100%;
    }
    .contenitore-veicoli {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .veicolo {
    width: 90%;
}
    .img{
        position:center;
    }

     .contatti {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
        gap: 30px;
    }

    .colonna {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .contatti p {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    /* SEZIONE PERCHÉ NOI */
    .percheNoi {
        flex-direction: column;
        height: auto;
    }

    .noi {
        width: 100%;
    }

    .noi img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    .percheNoi p {
        padding: 20px;
        margin: 0;
        font-size: 16px;
    }

    /* TESTI ANIMATI */
    .scritta1 {
        font-size: 32px;
    }

    .scritta2 {
        font-size: 18px;
    }

    /* SEZIONE CON BOTTONE */
    .spazio-bottone {
        flex-direction: column;
        gap: 15px;
        padding: 25px 15px;
        text-align: center;
    }

    .spazio-bottone h2 {
        font-size: 22px;
    }

    .spazio-bottone nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        padding: 0;
    }

    .spazio-bottone nav a {
        box-sizing: border-box;
        display: inline-block;
        padding: 10px 14px;
        font-size: 14px;
        white-space: normal;
        max-width: 100%;
    }
    .servizi {
    list-style: none; 
    padding-top: 5%;
    margin-left: 20%;
    width: fit-content;
     color: rgb(60, 75, 61);
}
.servizi i { 
    display: inline-block;
    margin-right: 10px;
    font-size: 30px;
    align-items: center;
}
.storia h2{
    font-size: 14px;
    color: #333333;
    margin-bottom: 15px;
}
.storia h1{
    font-size: 20px;
}
.storia{
    margin: 80 px auto;
    width:90%;
    display: flex;
    text-align: center;
    color: #3e3d3d;
}

.separatore{
    width:1px;
    background-color: #d0d0d0;
}
}