/* --- STILE BASE --- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Segoe UI', sans-serif;

  background-color: #fdfaf6;

  color: #3e2c1c;

  line-height: 1.6;

  padding-bottom: 60px;

}



/* HEADER */

header {

  background-color: #a86c3a;

  color: #fff;

  padding: 20px;

  text-align: center;

}



header h1 {

  font-size: 2em;

}



nav ul {

  list-style: none;

  margin-top: 10px;

}



nav ul li {

  display: inline-block;

  margin: 0 10px;

}



nav ul li a {

  color: #fff;

  text-decoration: none;

  font-weight: bold;

}



/* HERO */

#hero {

  text-align: center;

  padding: 30px 15px;

  background-color: #f3e7db;

}



#hero img {

  max-width: 100%;

  height: auto;

  border-radius: 8px;

}



#hero h2 {

  font-size: 1.5em;

  margin: 15px 0;

}



.btn {

  background-color: #d17c3f;

  color: white;

  padding: 10px 20px;

  text-decoration: none;

  border-radius: 5px;

  font-weight: bold;

}



/* GALLERIA */

#galleria {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  padding: 20px 10px;

  background-color: #fff8f0;

}



.galleria-item {

  width: 90%;

  max-width: 300px;

  margin: 10px;

  text-align: center;

}



.galleria-item img {

  width: 100%;

  border-radius: 6px;

}



/* COLLEZIONE */

#collezione {

  padding: 30px 15px;

}



#collezione h2 {

  text-align: center;

  margin-bottom: 20px;

}



.prodotto {

  margin-bottom: 30px;

  text-align: center;

}



.prodotto img {

  width: 90%;

  max-width: 250px;

  border-radius: 6px;

}



/* CHI SIAMO */

#chi-siamo {

  padding: 30px 15px;

  text-align: center;

}



#chi-siamo img {

  width: 90%;

  max-width: 300px;

  margin: 10px;

  border-radius: 6px;

}



/* CONTATTI */

#contatti {

  padding: 30px 15px;

}



#contatti h2 {

  text-align: center;

  margin-bottom: 20px;

}



form {

  max-width: 500px;

  margin: auto;

}



label {

  display: block;

  margin-top: 15px;

  font-weight: bold;

}



input, textarea {

  width: 100%;

  padding: 10px;

  margin-top: 5px;

  border: 1px solid #ccc;

  border-radius: 4px;

}



button {

  margin-top: 20px;

  background-color: #a86c3a;

  color: white;

  padding: 10px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

}



/* FOOTER */

footer {

  background-color: #a86c3a;

  color: white;

  text-align: center;

  padding: 15px;

  position: relative;

  bottom: 0;

  width: 100%;

}



/* --- MEDIA QUERY PER SMARTPHONE --- */

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

  header h1 {

    font-size: 1.6em;

  }



  nav ul li {

    display: block;

    margin: 8px 0;

  }



  #hero h2 {

    font-size: 1.2em;

  }



  .btn {

    padding: 8px 16px;

    font-size: 0.9em;

  }



  #collezione h2,

  #chi-siamo h2,

  #contatti h2 {

    font-size: 1.4em;

  }



  input, textarea {

    font-size: 1em;

  }



  button {

    font-size: 1em;

  }

}

img {

  display: block;

  margin-left: auto;

  margin-right: auto;

  max-width: 100%;

  height: auto;

}