/* Stili base */



body {



  margin: 0;



  padding: 0;



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



  color: #000000;



  background-color: #FFFFFF;



  text-align: center;



  line-height: 1.6;



}







.responsive-img {



  max-width: 100%;



  height: auto;



  display: block; 



  margin-left: auto;



  margin-right: auto;



}







/* Header */



.main-header {



  display: flex;



  flex-wrap: wrap; 



  align-items: center;



  justify-content: space-between;



  padding: 15px 20px; 



  width: 100%;



  box-sizing: border-box;



  background-color: #FFFFFF;



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 



  color: #00467F;



}







.logo-container {



  flex-shrink: 0; 



}







.header-main-logo {



  width: 160px; 



  height: auto;



}







.main-nav {



  display: flex;



  flex-wrap: wrap; 



  gap: 10px; /* Leggermente ridotto il gap per adattarsi meglio */



  flex-grow: 1;



  justify-content: center; 



  align-items: center;



  background-color: #FF9933; /* SFONDO ARANCIONE SEMPRE PRESENTE */



  padding: 0.8rem;



  margin-top: 10px; /* Spazio se la nav va sotto il logo su mobile */



  border-radius: 5px; /* Aggiunto per estetica */



}







.nav-button {



  background-color: #00467F;



  border: none;



  color: #FFFFFF;



  padding: 10px 15px;



  margin: 0; /* Rimosso il margin, gestito dal gap del flex container .main-nav */



  font-size: 1rem;



  font-weight: bold;



  cursor: pointer;



  transition: background-color 0.3s ease, transform 0.2s;



  border-radius: 5px;



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



  text-decoration: none;



  text-align: center; 



}







.nav-button:hover {



  background-color: #001E38;



  transform: scale(1.05);



}







.page-container {



  padding-top: 20px;



  padding-bottom: 20px;



}







.section {



  padding: 20px;



  text-align: center;



  display: none; 



}







.section.active {



  display: block;



  max-width: 90%; 



  margin: 20px auto; 



  padding: 20px;



  border: 1px solid #00467F; 



  border-radius: 8px;



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



  background-color: #FFFFFF;



  transition: all 0.3s ease;



}







.hero-section {



  padding: 20px;



  margin-bottom: 20px;



}







.hero-title {



  font-size: 2.2em; 



  text-align: center;



  color: #00467F;



}







.gallery-section {



  padding: 20px;



  display: flex;



  align-items: center;



  justify-content: center;



}







.gallery-container {



  width: 100%;



  max-width: 450px; 



  height: auto;



}







.gallery-image-container {



  width: 100%;



  height: auto; 



}







.gallery-image-container img { 



  border-radius: 8px; 



}







.info-section {



  display: flex;



  flex-wrap: wrap; 



  align-items: center;



  justify-content: space-between;



  padding: 20px;



  gap: 20px; 



  margin-bottom: 20px;



}







.info-text {



  flex: 1 1 300px; 



  font-size: 1.1em; 



  line-height: 1.6;



}







.text-accent { 



  color: #FF9933;



  font-weight: bold;



}







.info-images {



  flex: 1 1 300px; 



  display: flex;



  gap: 15px; 



  justify-content: center; 



}







.info-img-item {



  width: calc(50% - 10px); 



  max-width: 180px; 



}







.mission-vision-section {



  display: flex;



  flex-wrap: wrap; 



  justify-content: space-between;



  padding: 20px;



  gap: 20px;



  font-size: 1.1em;



  line-height: 1.6;



  margin-bottom: 20px;



}







.mission-text, .vision-text {



  flex: 1 1 300px; 



  padding: 10px;



}







.mission-text {



  text-align: left;



}







.vision-text {



  text-align: right;



}







/* Sezione Partner MODIFICATA */



.partners-section {



  padding: 20px;



  text-align: center;



  margin-bottom: 20px;



}







.partners-section h2 {



  font-size: 1.8em;



  color: #00467F;



  margin-bottom: 20px;



}







.partners-grid {



  display: flex;



  flex-wrap: wrap; /* Permette agli item di andare a capo */



  justify-content: center; /* Centra gli item nella riga */



  gap: 20px; /* Spazio tra gli item dei partner */



}







.partner-item {



  display: flex;



  flex-direction: column; /* Logo sopra, nome sotto */



  align-items: center; /* Centra logo e nome */



  text-align: center;



  width: calc(50% - 20px); /* Due item per riga su schermi medi, con gap */



  max-width: 180px; /* Larghezza massima per un singolo item */



  margin-bottom: 20px;



}







.partner-logo {



  width: 120px; 



  max-width: 100%; 



  margin-bottom: 8px; /* Spazio tra logo e nome */



}



.partner-logo.tria-logo { 



    width: 170px; /* Leggermente aggiustato per il logo Tria */



}



.partner-name {



  font-size: 1em;



  color: #333;



  margin-top: 0;



}











/* Service Box (da services.html) */



.service-box {



  border: 1px solid #00467F;



  padding: 20px;



  margin: 15px auto;



  border-radius: 8px;



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



  transition: transform 0.3s ease, box-shadow 0.3s ease;



  text-align: center;



  display: flex;



  flex-direction: column;



  justify-content: space-between;



  background-color: #FFFFFF;



  max-width: 90%; 



}







@media (min-width: 600px) {



  .service-box {



    max-width: 55%; 



  }



}







.service-box:hover {



  transform: translateY(-5px); 



  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);



}







.service-box img { 



  width: 100%;



  max-height: 180px; 



  object-fit: cover;



  border-radius: 8px;



  margin-bottom: 15px;



}







.service-box h3 {



  font-size: 1.4em; 



  color: #00467F;



  margin-bottom: 10px;



}







.service-box p {



  font-size: 1em; 



  color: #000000;



  margin-bottom: 15px;



  flex-grow: 1; 



}







.service-box button {



  background-color: #FF9933;



  color: #FFFFFF;



  padding: 10px 18px; 



  margin-top: auto; 



  font-size: 1rem; 



  font-weight: bold;



  cursor: pointer;



  border: none;



  border-radius: 5px;



  transition: background-color 0.3s ease, transform 0.2s;



}







.service-box button:hover {



  background-color: #00467F;



  transform: scale(1.05);



}











/* Calcolatore (da calculator.html) */



#calculator h2 {



  font-size: 1.8em; 



  color: #00467F;



  margin-bottom: 20px;



}







.calc-wrapper {



  display: flex;



  flex-wrap: wrap; 



  align-items: flex-start; 



  justify-content: space-between;



  gap: 30px; 



}







.calc-form, .calc-chart {



  flex: 1 1 300px; 



}







.calc-form {



  display: flex;



  flex-direction: column;



  gap: 15px;



}







.calculator-input {



  display: flex;



  flex-direction: column;



  text-align: left;



}



.calculator-input label {



  margin-bottom: 5px;



  font-weight: bold;



  color: #00467F;



}



.calculator-input input[type="number"] {



  width: 100%;



  padding: 10px;



  border: 1px solid #CCCCCC;



  border-radius: 5px;



  font-size: 1rem;



  box-sizing: border-box;



}







.calc-chart {



  max-width: 100%; 



}







.calc-chart canvas {



  width: 100% !important;



  height: auto !important; 



  max-height: 400px; 



}







.calc-button {



  background-color: #00467F;



  color: #FFFFFF;



  padding: 12px 24px;



  margin-top: 10px; 



  font-size: 1.1em;



  border: none;



  border-radius: 5px;



  cursor: pointer;



  transition: background-color 0.3s ease, transform 0.2s;



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



  align-self: flex-start; 



}







.calc-button:hover {



  background-color: #001E38;



  transform: scale(1.05);



}







#result {



  margin-top: 20px;



  text-align: left;



  font-size: 1em;



  color: #333;



  line-height: 1.5;



}











/* Contatti (da contact.html) */



#contact h2 {



  font-size: 1.8em; 



  color: #00467F;



  margin-bottom: 20px;



}



.contact-info p {



  font-size: 1.1em;



  margin-bottom: 10px;



}



.contact-info strong {



  color: #00467F;



}



#contact .social { 



    margin-top: 20px;



}



#contact .social a {



    display: inline-block;



    margin: 0 10px;



    color: #FF9933;



    text-decoration: none;



    font-weight: bold;



}



#contact .social a:hover {



    color: #00467F;



}







/* Footer */



footer {



  background-color: #00467F;



  color: #FFFFFF;



  text-align: center;



  padding: 2rem 1rem; 



  margin-top: 2rem;



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



  width: 100%;



  box-sizing: border-box; 



}







footer .footer-container { 



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center; 



  gap: 1.5rem; 



  max-width: 1200px;



  width: 100%;



  margin: 0 auto; 



}







footer .social {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 1rem;



  width: 100%;



}







footer .social h3 {



  font-size: 1.2rem;



  font-weight: bold;



  margin-bottom: 0.5rem; 



}







.social-icons-container { 



  display: flex;



  flex-direction: column; 



  align-items: center;



  gap: 15px;



}







.social-icon {



  width: 35px; 



  height: 35px;



  vertical-align: middle;



}







.social-whatsapp-link {



  display: flex;



  align-items: center;



  gap: 8px;



  text-decoration: none;



  color: #FFFFFF;



}



.social-whatsapp-link:hover {



  opacity: 0.8;



}







.whatsapp-text {



  vertical-align: middle;



  color: #FFFFFF; 



  font-size: 0.9rem;



}







footer .company-info {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 0.5rem;



  width: 100%;



  font-size: 0.9rem; 



}







footer .company-info p {



  margin: 0.3rem 0; 



}







footer .legal {



  margin-top: 1rem;



  text-align: center;



  width: 100%;



  font-size: 0.85rem; 



}



footer .legal b {



    font-weight: bold; 



}







/* Popup (da services.html) */



#popup {



  display:none; 



  position:fixed; 



  top:50%; 



  left:50%; 



  transform:translate(-50%, -50%); 



  background-color:white; 



  padding:25px; 



  border:1px solid #ccc; 



  z-index:1000; 



  width: 85%; 



  max-width: 480px; 



  border-radius: 8px; 



  box-shadow: 0 5px 20px rgba(0,0,0,0.25);



}



#popup-header { 



  display: flex; 



  justify-content: space-between; 



  align-items: center; 



  border-bottom: 1px solid #eee; 



  padding-bottom: 10px; 



  margin-bottom: 15px;



}



#popup h4 {



  color: #00467F;



  font-size: 1.3em;



  margin: 0; 



}



#popup-close-btn { 



  background: none; 



  border: none; 



  font-size: 1.8em; 



  cursor: pointer; 



  color: #777;



  padding: 0;



  line-height: 1;



}



#popup-content {



  font-size: 1em;



  color: #333;



  text-align: left;



  line-height: 1.6;



}



#overlay { 



  display:none; 



  position:fixed; 



  top:0; 



  left:0; 



  width:100%; 



  height:100%; 



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



  z-index:999;



}











/* ------ Media Queries ------ */







@media (min-width: 768px) {



  .main-header {



    flex-wrap: nowrap; 



    padding: 20px;



  }



  .main-nav {



    justify-content: flex-end; 



    margin-left: auto; 



    margin-top: 0; 



    padding: 0.6rem 1rem; /* Leggermente aggiustato il padding */



    /* RIMOSSO: background-color: transparent; per mantenere lo sfondo arancione */



  }



  .nav-button { 



      margin: 0 5px; /* Ripristinato un piccolo margine per desktop se preferito */



  }



  .section.active {



    max-width: 70%; 



  }



  .hero-title {



    font-size: 2.5em; 



  }



  .info-section {



    flex-wrap: nowrap; 



  }



  .info-text {



    margin-right: 20px; 



    text-align: left;



  }



  .info-images {



    justify-content: flex-end; 



  }



  .mission-vision-section {



    flex-wrap: nowrap;



    font-size: 1.2em;



  }



  .mission-text {



    padding-right: 10px;



  }



  .vision-text {



    padding-left: 10px;



  }







  /* Partner Grid su Desktop */



  .partners-grid {



    justify-content: space-around; /* Distribuisce meglio gli item */



  }



  .partner-item {



     /* Per visualizzare circa 3-4 partner per riga su desktop */



    width: calc(25% - 20px); /* Esempio per 4 per riga, considera il gap */



    max-width: 200px; /* Aumenta leggermente la larghezza max per desktop */



  }



  .partner-logo {



    width: 150px; 



  }



  .partner-logo.tria-logo {



    width: 200px; /* Aumentato leggermente */



  }











  footer .footer-container {



    flex-direction: row;



    justify-content: space-around;



    align-items: flex-start;



    text-align: left; 



  }



  footer .social, footer .company-info, footer .legal {



    align-items: flex-start;



    width: auto; 



  }



  footer .social h3 {



      text-align: left;



  }



  .social-icons-container {



      flex-direction: row; 



      gap: 20px;



  }



  .social-whatsapp-link {



      flex-direction: row;



  }







  .calc-wrapper {



    flex-wrap: nowrap; 



  }



  .calc-form {



    align-self: stretch; 



  }



  .calc-button {



    align-self: flex-start;



  }



}







/* Per schermi più piccoli (tablet e telefono) */



@media (max-width: 767px) {



  .main-header {



    justify-content: center; 



  }



  .logo-container {



    margin-bottom: 10px; 



    width: 100%;



    text-align: center;



  }



  .header-main-logo {



    margin-left: auto;



    margin-right: auto;



  }



  .main-nav {



    width: 100%; 



    justify-content: center;



    margin-left: 0; 



    gap: 5px; 



  }



  .nav-button {



    flex-grow: 1; 



    font-size: 0.9rem;



    padding: 8px 10px;



    margin: 3px; /* Aggiunto un piccolo margine per i bottoni quando vanno a capo */



  }







  #home h1, .hero-title { 



    font-size: 1.8em;



  }



  #services h2, #contact h2, #calculator h2, .partners-section h2 {



    font-size: 1.5em; 



  }



  .info-text, .mission-text, .vision-text {



    text-align: center; 



    flex-basis: 100%; 



  }



  .info-images {



    justify-content: center; 



    flex-basis: 100%;



  }



  .info-img-item {



      width: 45%; 



      max-width: 150px;



  }







  .mission-vision-section {



    text-align: center;



  }



  .mission-text, .vision-text {



      text-align: center; 



  }



  



  /* Partner Grid su mobile */



  .partner-item {



    width: calc(80% - 20px); /* Un partner per riga, più largo */



    max-width: 280px; /* Permette di essere più grande su mobile */



  }







  .calc-wrapper {



    gap: 20px; 



  }



  .calc-form, .calc-chart {



    flex-basis: 100%; 



  }



  .calc-button {



      width: 100%; 



      text-align: center;



  }



  #result {



      font-size: 0.95em;



  }







  footer .company-info, footer .legal {



      text-align: center;



  }



  .social-icons-container {



      align-items: center; 



  }



  .social-whatsapp-link {



      justify-content: center; 



  }



}







/* Ulteriori aggiustamenti per schermi molto piccoli */



@media (max-width: 480px) {



  .main-header {



      padding: 10px 15px;



  }



  .header-main-logo {



    width: 130px;



  }



  .nav-button {



    font-size: 0.8rem;



    padding: 8px;



  }



  .section.active {



    padding: 15px;



    max-width: 95%;



  }



  .hero-title {



    font-size: 1.6em;



  }



  .info-img-item {



      width: 80%; 



      margin-bottom: 10px;



  }



  .info-images {



      flex-direction: column; 



      align-items: center;



  }



  



  /* Partner Grid su schermi molto piccoli */



  .partner-item {



      width: 90%; /* Quasi tutta la larghezza */



      max-width: none; /* Rimuove la larghezza massima se necessario */



  }



  .partner-logo {



    width: 100px;



  }



   .partner-logo.tria-logo {



    width: 140px;



  }











  #popup {



      width: 90%;



      padding: 20px;



  }



  #popup h4 {



      font-size: 1.1em;



  }



  #popup-content {



      font-size: 0.9em;



  }



}



/* min.css - NUOVE AGGIUNTE */







/* Contenitore generico per il contenuto principale delle pagine */



.content-wrapper {



  max-width: 1100px; /* Larghezza massima del contenuto */



  margin: 30px auto; /* Centra e aggiunge spazio sopra/sotto */



  padding: 25px;



  background-color: #FFFFFF; 



  border-radius: 8px; 



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombra più definita */



  text-align: left; /* Allinea il testo a sinistra di default per il contenuto */



}







/* Stile per la mappa responsive */



.map-responsive-wrapper {



  overflow: hidden;



  padding-bottom: 56.25%; /* Per un aspect ratio 16:9 */



  position: relative;



  height: 0;



  margin: 25px 0; /* Spazio sopra e sotto la mappa */



  border-radius: 8px; /* Angoli arrotondati per il contenitore della mappa */



  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Ombra leggera */



}







.map-responsive-wrapper iframe {



  left: 0;



  top: 0;



  height: 100%;



  width: 100%;



  position: absolute;



  border: 0; /* Rimuove il bordo di default dell'iframe */



}







/* Stili specifici per i titoli delle pagine interne */



.page-title {



  font-size: 2em; /* Dimensione consistente per i titoli di pagina */



  color: #00467F;



  text-align: center; /* Centra il titolo della pagina */



  margin-bottom: 30px;



}











/* Media query per .content-wrapper e .page-title */



@media (max-width: 767px) {



  .content-wrapper {



    margin: 20px 15px; /* Meno margine laterale su mobile */



    padding: 20px;



  }



  .page-title {



    font-size: 1.8em; /* Titolo leggermente più piccolo su mobile */



    margin-bottom: 20px;



  }



}







@media (max-width: 480px) {



  .content-wrapper {



    margin: 15px 10px;



    padding: 15px;



  }



   .page-title {



    font-size: 1.6em;



  }



}







/* Assicuriamoci che gli stili del footer per i link social siano corretti,



   dato che li useremo in tutte le pagine */



footer .social-icons-container a { /* Stile più specifico per i link nel footer */



    display: inline-flex; /* Per allineare icona e testo se presenti */



    align-items: center;



    text-decoration: none;



    color: #FFFFFF; /* Colore di default per il testo del link (es. WhatsApp) */



    transition: opacity 0.3s ease;



}



footer .social-icons-container a:hover {



    opacity: 0.8;



}



footer .social-whatsapp-link { /* Già definito, ma controlla la coerenza */



  /* display: flex; è già presente nel CSS precedente */



  /* align-items: center; è già presente */



  /* gap: 8px; è già presente */



}



footer .whatsapp-text { /* Già definito */



  /* vertical-align: middle; è già presente */



  /* color: #FFFFFF; è già presente */



  /* font-size: 0.9rem; è già presente */



}



/* min.css - Stili aggiuntivi per contact.html */



.contact-info-container {



    display: flex;



    flex-wrap: wrap;



    gap: 30px; /* Spazio tra i dettagli di contatto e i link social */



}







.contact-details, .contact-social-links {



    flex: 1 1 300px; /* Permette ai box di andare a capo e occupare spazio */



}







.contact-details h2, .contact-social-links h2 {



    font-size: 1.5em;



    color: #00467F;



    margin-bottom: 15px;



    border-bottom: 2px solid #FF9933;



    padding-bottom: 8px;



}







.contact-details p {



    margin-bottom: 12px;



    line-height: 1.7;



}



.contact-details p a {



    color: #FF9933;



    text-decoration: none;



    font-weight: bold;



}



.contact-details p a:hover {



    text-decoration: underline;



}







.social-page-links {



    display: flex;



    flex-direction: column; /* Link social uno sotto l'altro */



    gap: 15px;



}







.social-link-item {



    display: inline-flex; /* Allinea icona e testo */



    align-items: center;



    gap: 10px;



    padding: 10px 15px;



    background-color: #f0f0f0;



    border-radius: 5px;



    text-decoration: none;



    color: #333;



    font-weight: bold;



    transition: background-color 0.3s ease, color 0.3s ease;



}



.social-link-item:hover {



    background-color: #FF9933;



    color: #FFFFFF;



}



.social-link-icon {



    width: 24px; /* Dimensione per le icone nella pagina contatti */



    height: 24px;



}



/* min.css - Stili aggiuntivi per services.html */



.services-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Crea colonne responsive */



    gap: 25px; /* Spazio tra i box dei servizi */



}







/* Gli stili per .service-box, #popup, #overlay sono già presenti e dovrebbero funzionare bene.



   Potresti voler assicurare che le immagini dentro .service-box siano responsive.



   La classe .responsive-img dovrebbe già gestirle se applicata.



   Se non usi .responsive-img, aggiungi: */



.service-box img {



    width: 100%; /* Assicura che l'immagine occupi la larghezza del box */



    max-height: 200px; /* Altezza massima per l'immagine del servizio */



    object-fit: cover; /* Copre lo spazio mantenendo l'aspect ratio */



    border-radius: 8px 8px 0 0; /* Angoli arrotondati solo in alto se l'immagine è la prima cosa nel box */



    margin-bottom: 15px;



}







/* Stile per la classe active-page (opzionale, per evidenziare la pagina corrente nella nav) */



.nav-button.active-page {



    background-color: #001E38; /* Un colore leggermente diverso per la pagina attiva */



    /* O aggiungi un bordo, o cambia colore testo, etc. */



    /* Esempio con bordo inferiore:



    border-bottom: 3px solid #FFFFFF;



    padding-bottom: 7px; 



    */



}



/* min.css - Stili aggiuntivi per siamo.html */



.location-info p, .additional-location-info p {



    margin-bottom: 10px;



    line-height: 1.7;



}



.location-info p strong, .additional-location-info p strong {



    color: #00467F;



}







.additional-location-info {



    margin-top: 30px;



    padding-top: 20px;



    border-top: 1px solid #eee; /* Separatore leggero */



}



.additional-location-info h2 {



    font-size: 1.5em;



    color: #00467F;



    margin-bottom: 15px;



}

.partners-flex-container {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 32px;

            flex-wrap: wrap;

            margin-top: 20px;

          }



          .partner-item {

            display: flex;

            flex-direction: column;

            align-items: center;

            flex: 1 1 120px;

          }



          .partner-name {

            text-align: center;

            width: 100%;

          }



          .enlarged-logo {

            max-width: 140px;

            width: 100%;

            height: auto;

          }



          @media (max-width: 900px) {

            .partners-flex-container {

              flex-direction: column;

              gap: 24px;

            }

          }

    /* --- Sezione Notizie --- */

    .news-section {

      background-color: #FF9933;

      padding: 40px 20px;

      text-align: center;

      color: white;

    }



    .news-section h2 {

      font-size: 28px;

      margin-bottom: 20px;

    }



    .news-slider {

      position: relative;

      width: 80%;

      max-width: 300px;

      margin: 0 auto;

      overflow: hidden;

      border-radius: 12px;

    }



    .news-slide {

      display: none;

      transition: opacity 1s ease-in-out;

    }



    .news-slide.active {

      display: block;

    }



    .news-slide img {

      width: 100%;

      border-radius: 12px;

      cursor: pointer;

    }



    /* Modale per ingrandimento */

    .modal {

      display: none;

      position: fixed;

      z-index: 1000;

      left: 0;

      top: 0;

      width: 100%;

      height: 100%;

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

    }



    .modal-content {

      display: block;

      margin: auto;

      max-width: 90%;

      max-height: 90%;

      border-radius: 8px;

    }



    .close {

      position: absolute;

      top: 20px;

      right: 45px;

      color: white;

      font-size: 40px;

      cursor: pointer;

    }