body {

background-color: white;

}
@media screen and (min-width: 768px) {

     h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 25px;
  color: white;

}
#titolo {
height: 150px;	
background-color: #2a289d;
background-size: cover;
text-align: left;
text-size: 30px;
padding-left: 40px;
border-radius: 25px; /* Angoli arrotondati */
}

}
.immagine-rotonda {
  border-radius: 15px; /* Arrotonda gli angoli */
  transition: border-radius 0.3s ease; /* Transizione morbida */
   border-radius: 10px; /* Consigliato insieme all'ombra */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sfumatura, posizione e colore */
  transition: box-shadow 0.3s ease;
}




@media screen and (max-width: 800px) {

     h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 25px;
  color: white;

}



}


a {
  text-decoration: none;
  color: #FF9D11;
  font-weight: bold; /* opzionale */
}



}

h2 {
  font-size: 25px;
  color: black;
  text-align: left; 
  padding: 20px; 
}

#imma {
background-color: #8CB1E8;

}

h6 {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  font-style: italic;
  text-align: left;
  padding: 40px;
  max-width: 600px; /* Migliora la leggibilità su schermi larghi */
  
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}


#testa {
 /*	background-image: url('sfondo.jpg'); */
 /* background-size: cover;  Copre l'intero contenitore */
  background-position: center; /* Centra l'immagine */
  background-repeat: repeat; /* Evita la ripetizione */
  height: 90px;  /* Altezza schermo intero */
 
 
}



img {
  float: left; /* o right */
  margin-right: 15px; /* Spazio opzionale tra immagine e testo */
}

#marchi {
width: 600px;
 

	
}

#contatti {
font-size: 20px;


}
input:valid { border-color: green; }
    input:invalid:not(:placeholder-shown) { border-color: red; }
    
    button { padding: 10px 15px; cursor: pointer; }
select:valid { border-color: green;}
select:invalid:not(:placeholder-shown) { border-color: red;}
	
	



    
#spedizioni {

background-color: white;
}    


#container {
	display: flex;
	justify-content: center;
	margin:10;
}

#richiesta {
	display: flex;
	justify-content: center;
}

#six, #dex {
	margin:0;
	padding:0;
	width:300;
	
}

#testaccia {
	display: flex;
	align-self: center;
}

#sfondo_form {
	background-color: #DFF6FE;
	padding: 25px; 
}

#mail_send {
background: '3472.jpg';	
}
	

/* Applica a tutti i campi di input e textarea nel form */
#signup_form input[type="text"],
#signup_form input[type="email"],
#signup_form textarea {
    width: 100%;       /* Occupa tutta la larghezza del contenitore */
    max-width: 400px;  /* Larghezza massima per schermi grandi */
    padding: 5px;     /* Spazio interno per migliorare la leggibilità */
    margin-bottom: 15px; /* Spazio tra i campi */
    box-sizing: border-box; /* Include padding e border nella larghezza totale */
  
}
#signup_form select {
width: 100%;       /* Occupa tutta la larghezza del contenitore */
    max-width: 400px;  /* Larghezza massima per schermi grandi */
    padding: 5px;     /* Spazio interno per migliorare la leggibilità */
    margin-bottom: 15px; /* Spazio tra i campi */
    box-sizing: border-box; /* Include padding e border nella larghezza totale */
 	
}

#accedi_form textarea {
	height: 5px;

}

textarea:valid { border-color: green; }
textarea:invalid:not(:placeholder-shown) { border-color: red; }


/* Contenitore principale */
.slider {
    background: white;
    height: 100px; /* Altezza della barra */
    margin: auto;
    overflow: hidden; /* Nasconde le immagini fuori dal box */
    position: relative;
    width: 40%; /* Larghezza della barra */
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
}

/* Animazione */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scorri di metà larghezza (immagini originali) */
}

/* Traccia delle immagini */
.slide-track {
	background color: #DFF6FE;
    display: flex;
    animation: scroll 20s linear infinite; /* Velocità scorrimento */
    width: calc(150px * 10); /* larghezza immagine * numero totale immagini (orig + doppie) */
}

/* Singola immagine */
.slide {
	background color: #DFF6FE;
    height: 80px;
    width: 90px; /* Larghezza singola immagine */
    display: flex;
    align-items: center;
    padding: 15px;
}

.slide img {
	background color: #DFF6FE;
    width: 80%;
    height: auto;
}

/* Opzionale: pausa al passaggio del mouse */
.slider:hover .slide-track {
    animation-play-state: paused;
}

.pulsante-stilizzato {
  width: 120px;	
  height: 24px;
  background-color: #007BFF; /* Colore sfondo */
  color: white; /* Colore testo */
  padding: 4px 24px; /* Spaziatura interna */
  border: none; /* Rimuove bordo predefinito */
  border-radius: 25px; /* Angoli arrotondati */
  cursor: pointer; /* Cursore a manina */
  font-size: 13px;
  font-family: Italic, Arial, sans-serif;
  transition: background-color 0.3s ease, transform 0.2s; /* Transizione fluida */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra */
}

/* Effetto Hover (al passaggio del mouse) */
.pulsante-stilizzato:hover {
  background-color: #0056b3; /* Sfondo più scuro */
  transform: translateY(-2px); /* Leggero sollevamento */
}

/* Effetto Active (al click) */
.pulsante-stilizzato:active {
  transform: translateY(1px); /* Effetto pressione */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.contenitore {
  overflow: hidden; /* Mantiene l'ingrandimento dentro i bordi */
  
}
.zoom-effect {
  transition: transform .2s; /* Effetto fluido */
}
.zoom-effect:hover {
  transform: scale(1.5); /* Ingrandisce l'immagine del 50% */
}