body{
	background-color: black;
}

.menu {
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo nero semi-trasparente */
    padding: 15px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.nav ul {
    list-style-type: none; /* Toglie i pallini */
    margin: 0;
    padding: 0;
    text-align: center; /* Centra i link */
}

.nav li {
    display: inline; /* Mette i link in orizzontale */
    margin: 0 20px;
}

.nav a {
    text-decoration: none; /* Toglie la sottolineatura */
    color: white; /* Scritta bianca */
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav a:hover {
    color: #ffcc00; /* Diventa giallo quando passi il mouse */
}

.esposizione-container {
    display: flex;             /* Attiva il layout flessibile */
    flex-direction: column;    /* Mette gli elementi uno sotto l'altro (colonna) */
    align-items: center;       /* Centra tutto orizzontalmente */
    justify-content: center;   /* Centra tutto verticalmente (se c'è altezza fissa) */
    min-height: 80vh;          /* Occupa almeno l'80% dell'altezza schermo */
    gap: 30px;                 /* Spazio automatico tra Titolo, Foto e Bottone */
    text-align: center;        /* Assicura che il testo sia centrato */
}

.intro h1 {
    font-size: 2.5rem;         /* Grandezza testo */
    color: white;              
    text-transform: uppercase; /* Tutto maiuscolo */
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 2px;       /* Spazia un po' le lettere */
}

.filter-buttons { 
	margin: 20px 0; text-align: center; 
	}
	.btn {
         padding: 10px 20px; margin: 0 5px; text-decoration: none; color: white; border-radius: 5px; font-weight: bold; border: none; cursor: pointer;
         }
         
.btn-all {
         background-color: #555; 
         }
         
.btn-auto {
         background-color: #007bff; 
         }
         
 .btn-moto { 
        background-color: #dc3545; 
        }
        
.btn:hover { 
        opacity: 0.8;
         }
         
.prezzo { 
        color: green; font-weight: bold; font-size: 1.2em; margin: 10px 0; 
        }
        
 .badge { 
        background-color: #eee; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; color: #333; 
        }
        
 .bar-container {
            display: inline-block;
            width: 300px;
            margin: 15px;
            vertical-align: top;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: white;
        }

        /* Forza le dimensioni delle immagini per tenerle ordinate */
.bar-container img.main-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
        }
        
.btn-dett {
    display: inline-block;
    padding: 15px 40px;        /* Spazio interno (Grasso) */
    background-color: #007bff; /* Colore Blu (o metti quello che vuoi) */
    color: white;              /* Testo bianco */
    text-decoration: none;     /* Toglie la sottolineatura */
    font-size: 1.2rem;         /* Testo grande */
    font-weight: bold;
    border-radius: 50px;       /* Bottone a pillola (molto arrotondato) */
    transition: transform 0.2s, background-color 0.2s; /* Animazione fluida */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* Effetto quando passi sopra col mouse */
.btn-dett:hover {
    background-color: #0056b3; /* Blu più scuro */
    transform: scale(1.05);    /* Si ingrandisce leggermente */
}