*{

  font-family: 'Montserrat', sans-serif;

}

/* CSS per l'header e menu hamburger responsive */



/* Header e nav */

header {

  background-color: #ffffff;

  padding-right: 50px;

}



nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

}



/* Logo */

nav img#logo {

  height: 150px;

  order: 0;

}



/* Menu normale desktop */

nav ul {

  list-style: none;

  display: flex;

  gap: 40px;

  margin: 0;

  padding: 0;

}



nav ul li {

  margin: 0;

}



nav a {

  text-decoration: none;

  color: #333;

  font-weight: bold;

  font-size: 20px;

}



nav a:hover {

  color: #007bff;

}



/* Bottone hamburger (nascosto su desktop) */

.menu-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 7px;

  padding: 15px;

  position: fixed;  /* Fisso in alto a sinistra */

  top: 20px;

  left: 20px;

  z-index: 1001;  /* Sopra tutto */

}



.menu-toggle div {

  width: 35px;

  height: 4px;

  background-color: #007bff;

  border-radius: 2px;

}



/* Sidebar */

.sidebar {

  display: flex; /* Sempre flex per poter usare transform */

  flex-direction: column;

  position: fixed;

  top: 0;

  left: 0; /* menu a sinistra */

  height: 100%;

  width: 260px; /* un po' più largo */

  background-color: #007bff;

  padding: 30px 20px;

  box-shadow: 2px 0 10px rgba(0,0,0,0.2);

  z-index: 999;

  transform: translateX(-100%);

  transition: transform 0.3s ease;

  pointer-events: none; /* Non cliccabile se nascosta */

  opacity: 0;

}



.sidebar.open {

  transform: translateX(0);

  pointer-events: auto; /* Cliccabile se visibile */

  opacity: 1;

}



.sidebar a {

  padding: 20px 10px;

  color: white;

  text-decoration: none;

  font-weight: 700;

  font-size: 1.3rem;

  border-bottom: 1px solid rgba(255,255,255,0.3);

  transition: background-color 0.3s ease;

  border-radius: 6px;

}



.sidebar a:hover {

  background-color: rgba(255,255,255,0.2);

}



/*css per la slideshow*/ 



body {

  margin: 0;

  font-family: sans-serif;

}



.slideshow-container {

  position: relative;

  width: 100%;

  height: 550px;

  overflow: hidden;

}



.slide {

  position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform: scale(1);

  transition: opacity 1s ease-in-out, transform 20s ease-in-out;

  z-index: 0;

}



.slide.active {

  opacity: 1;

  z-index: 1;

  transform: scale(1.6); /* zoom dolce */

}



.slideshow-overlay {

  position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  z-index: 2;

  display: flex;

  justify-content: center;

  align-items: center;

}



.slideshow-overlay a {

  padding: 1.2rem 3rem;

  background-color: #33a7eb;

  color: white;

  text-decoration: none;

  font-size: 1.5rem;

  font-weight: bold;

  border-radius: 6px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

  transition: background-color 0.3s ease;

}



.slideshow-overlay a:hover {

  background-color: #cadaee;

  color: #333;

}





/*css per i lavori*/





.lavori-svolti {

  padding: 40px 20px;

  background-color: #f9f9f9;

  text-align: center;

}



.lavori-svolti h2 {

  font-size: 40px;

  margin-bottom: 30px;

  color: #33a7eb;

}



.lavori-container {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: space-between;

}



.lavoro {

  flex: 1 1 calc(33.333% - 20px);

  background-color: #fff;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  overflow: hidden;

  transition: transform 0.3s ease;

}



.lavoro:hover {

  transform: translateY(-5px);

}



.lavoro img {

  width: 100%;

  height: 200px;

  object-fit: cover;

}



.lavoro h3 {

  padding: 15px;

  font-size: 18px;

  color: #222;

}



.bottone-container {

  margin-top: 30px;

}



.btn-lavori {

  display: inline-block;

  padding: 16px 26px;

  width: 450px;

  font-size: 18px;

  background-color: #007bff;

  color: white;

  border-radius: 8px;

  text-decoration: none;

  font-weight: bold;

  transition: background-color 0.3s;

}



.btn-lavori:hover {

  background-color: #0056b3;

}





/* Sfondo semi-trasparente fullscreen */

.modal {

  display: none; 

  position: fixed; 

  z-index: 1000; 

  padding-top: 60px; 

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%; 

  overflow: auto; 

  background-color: rgba(0,0,0,0.8);

}



/* Immagine ingrandita centrata */

.modal-content {

  margin: auto;

  display: block;

  max-width: 90%;

  max-height: 80vh;

  border-radius: 10px;

}



/* Bottone chiudi (X) */

.close {

  position: absolute;

  top: 20px;

  right: 35px;

  color: white;

  font-size: 40px;

  font-weight: bold;

  cursor: pointer;

  user-select: none;

  transition: color 0.3s;

}



.close:hover {

  color: #bbb;

}



.zoomable {

  width: 100%;

  height: 200px;

  object-fit: cover;

  transition: transform 0.3s ease, filter 0.3s ease;

  cursor: pointer;

}



.zoomable:hover {

  transform: scale(1.05);

  filter: brightness(70%);

}



/*css per servizi*/



.servizi-offerti {

  background-color: #fff;

  padding: 40px 20px;

  text-align: center;

}



.servizi-offerti h2 {

  font-size: 32px;

  margin-bottom: 30px;

  color: #222;

}



.servizi-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 25px;

}



.servizio {

  position: relative;

  flex: 1 1 calc(33.333% - 20px);

  background-color: #f7f7f7;

  padding: 25px 20px 40px;

  border-radius: 12px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  overflow: hidden;

  transition: box-shadow 0.3s ease;

  cursor: pointer;

}



.servizio img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  border-radius: 10px;

  display: block;

  margin-bottom: 15px;

  transition: filter 0.3s ease;

}



/* Overlay nascosto */

.overlay {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 80px; /* non copre il testo sotto */

  background-color: rgba(0, 0, 0, 0);

  transition: background-color 0.3s ease;

  border-radius: 12px 12px 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

}



/* Bottone "Scopri di più" dentro l’overlay */

.btn-scopri {

  padding: 10px 22px;

  background-color: #007bff;

  color: white;

  border-radius: 8px;

  text-decoration: none;

  font-weight: 600;

  font-size: 16px;

  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.5);

  transition: background-color 0.3s;

}



.btn-scopri:hover {

  background-color: #0056b3;

}



/* Effetto hover blocco */

.servizio:hover {

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

}



.servizio:hover img {

  filter: brightness(65%);

}



/* Mostro overlay al passaggio */

.servizio:hover .overlay {

  background-color: rgba(0, 0, 0, 0.35);

  opacity: 1;

  pointer-events: auto;

}



.servizio h3 {

  color: #007bff;

  margin-bottom: 10px;

}



.servizio p {

  color: #444;

  font-size: 16px;

  line-height: 1.4;

}





/*css per footer*/



footer {

  background-color: #1f1f1f;

  color: #f0f0f0;

  padding: 40px 20px;

  font-size: 14px;

}



.footer-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  max-width: 1200px;

  margin: auto;

  gap: 20px;

}



.footer-container div {

  flex: 1 1 200px;

}



.footer-links ul {

  list-style: none;

  padding: 0;

}



.footer-links ul li {

  margin-bottom: 8px;

}



footer a {

  color: #f0f0f0;

  text-decoration: none;

}



footer a:hover {

  text-decoration: underline;

}



.footer-bottom {

  text-align: center;

  margin-top: 30px;

  border-top: 1px solid #444;

  padding-top: 20px;

  font-size: 13px;

}



/*css per chi sono*/

.chi-siamo {

  background-color: #f9f9f9;

  padding: 60px 20px;

}



.chi-siamo .container {

  max-width: 900px;

  margin: auto;

  text-align: center;

}



.chi-siamo h2 {

  font-size: 32px;

  margin-bottom: 20px;

  color: #1f1f1f;

  border-bottom: 3px solid #007bff;

  display: inline-block;

  padding-bottom: 5px;

}



.chi-siamo p {

  font-size: 16px;

  color: #444;

  line-height: 1.8;

  margin-bottom: 20px;

}





/* CSS per contatti*/



.contattami {

  padding: 40px 20px;

  background-color: #eceaea;

}



.contattami-content {

  display: flex;

  max-width: 1200px;

  margin: 0 auto;

  gap: 40px; /* spazio tra form e immagine */

  align-items: center;

}



.form-container {

  flex: 1; /* prende più spazio */

  text-align: left;

}



.img-container {

  flex: 1.5; /* stessa larghezza del form */

  /* opzionale per l'immagine responsive */

}



.img-container img {

  margin-left: 150px;

  width: 100%;

  height: auto;

  border-radius: 10px;

  object-fit: cover;

}



.contattami h2 {

  font-size: 2em;

  margin-bottom: 10px;

  color: #007bff;

}



.contattami p {

  font-size: 1.1em;

  margin-bottom: 30px;

}



.form-contatto label {

  display: block;

  margin-bottom: 5px;

  font-weight: bold;

}



.form-contatto input,

.form-contatto textarea {

  width: 100%;

  padding: 10px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-radius: 6px;

  font-size: 1em;

}



.form-contatto button {

  background-color: #0066cc;

  color: white;

  padding: 12px 24px;

  border: none;

  border-radius: 6px;

  font-size: 1.1em;

  cursor: pointer;

  transition: background-color 0.3s;

}



.form-contatto button:hover {

  background-color: #004999;

}







@media (max-width: 768px) {

  /* HEADER */

  header nav #logo {

    position: static;

    display: block;

    margin: 0 auto 20px;

    max-width: 80%;

    height: auto;

  }



  header nav ul {

    display: none;

  }



  /* SLIDESHOW */

  .slideshow-container {

    max-width: 100%;

  }



  .slideshow-container .fade {

    padding: 10px;

  }



  /* BOTTONE LAVORI */

  .bottone-container .btn-lavori {

    width: 80%;

    margin: 10px auto;

    display: block;

  }



  /*lavori*/

   

  .lavoro h3{

    display: none;

  }



  /* SERVIZI */

  .sezione-servizi {

    flex-direction: column;

    align-items: center;

  }



  .servizio {

    margin: 15px 0;

    width: 90%;

  }



  /* CHI SIAMO */

  .chi-siamo .content {

    flex-direction: column;

  }



  .chi-siamo .text {

    padding-right: 0;

    text-align: center;

  }



  .chi-siamo .image img {

    max-width: 100%;

    margin-top: 20px;

  }

/*conttatti*/

  .contattami-content {

    flex-direction: column; 

    gap: 20px;              

    align-items: center;

  }



  .form-container {

    width: 100%;            

    max-width: 480px;  

    margin-right: 20px;       

    text-align: left;         

  }



  .img-container {

    width: 90%; 

    max-width: 320px;         

    margin: 0 auto;           

  }



  .img-container img {

    margin-left: 0;

    width: 90%;     

    height: auto;

    border-radius: 10px;

    object-fit: cover;

    display: block;

  }





  /* MENU MOBILE */

  .sidebar {

    width: 200px;

  }



  .menu-toggle {

    display: flex;

    top: 10px;

    right: 10px;

    position: absolute;

  }

}