body {

  font-family: Verdana, sans-serif;

  margin: 0;

  padding: 0;

  background-color: #f9fcff;

  color: #003366; /* Blu scuro ovunque */

}



/* Testata */

header {

  background-color: #b3dbff; /* azzurro chiaro più delicato */

  flex-wrap: nowrap;

  display: flex;

  align-items: center;

  padding: 15px 50px;

}

header h1 {

 flex: 1 1 auto; 

 max-width: 1100px; 

 text-align: center; 

 font-size: 2.2em; 

 color: #003366; 

 text-shadow: 2px 2px 5px rgba(0,0,0,0.6); 

  margin: 0 0; 

}



header .logo {

   display: flex; 

   align-items: center; /* lascia libero quanto basta, non farlo crescere */ 

   flex: 0 0 auto; 

   margin-right: 10px; /* spazio tra logo e h1, opzionale */

   margin-left: auto;

}



header .icons {

 display: flex; 

 align-items: center; 

 gap: 8px; /* spazio tra icone, opzionale */

 flex: 0 0 auto; 

 margin-right: auto; / spinge le icone verso la destra */ 

}

.popup {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.popup-content {

  position: absolute; /* IMPORTANTE per muoverla */

  top: 50%;

  left: 50%;

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

  background: #a2d8f6;

  width: 90%;

  max-width: 800px;

  height: 80%;

  border-radius: 10px;

  overflow: hidden;

}



.popup-header {

  height: 40px;

  background: #7ec8e3;

  cursor: grab;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  padding: 0 10px;

  position: sticky;

  top: 0;

  z-index: 10;

}



.popup-header:active {

  cursor: grabbing;

}



.popup-content iframe {

  width: 100%;

  height: 100%;

  border: none;

}





header .icons a,

header .icons button {

  background: none;

  border: none;

  cursor: pointer;

  padding: 0;

  text-decoration: none;

  font-size: 28px;

  color: #003366;

}

.icons {

  display: flex;

  align-items: center;

  gap: 10px; /* spaziatura tra icone */

  flex-wrap: wrap; /* importante su schermi piccoli */

}



.icons a {

  text-decoration: none;

  font-size: 24px;

  color: #003366;

 

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.contact-form input,

.contact-form textarea {

  padding: 12px;

  border: 1px solid #7ec8e3;

  border-radius: 8px;

  font-size: 1em;

}



.contact-form textarea {

  min-height: 180px;

  resize: vertical;

}



.contact-form button {

  align-self: flex-start;

  background: #003366;

  color: white;

  border: none;

  padding: 12px 20px;

  border-radius: 8px;

  cursor: pointer;

}



.contact-form button:hover {

  background: #005599;

}



header .icons img {

  width: 24px;

  height: auto;

  font-size: 24px !important; 

  vertical-align: middle;border: 

/* 1px solid red; */

}

header .icons .material-icons {

  font-size: 24px !important;  /* Imposta la dimensione per Material Icons */

  vertical-align: middle !important; 

 /*border: 1px solid yellow; */

}



/* Per FontAwesome */

header .fab {

  font-size: 22px !important;  /* Imposta la dimensione per FontAwesome */

  vertical-align: middle !important; 

 /*border:1px solid black; */

}

header .material-icons,

header .fab {

  vertical-align: middle;

}



/* Menu */

nav {

  background: white;

  padding: 10px 0;

  border: none; /* eliminata la riga sotto */

}



nav ul {

  list-style: none;

  display: flex;

  justify-content: center;

  padding: 0;

  margin: 0;



}



nav ul li {

  position: relative;

 /* margin: 0 20px; */

}

nav ul li a {

  color: #003366;

  /*font-weight: bold; */

  text-decoration: none;

  font-size: 1.2em;

  padding: 8px 15px;

  display: block;

  border-radius: 5px;

}



nav ul li :hover {

	background-color: #b3dbff; 

 // background-color: #f0f8ff; 

}



nav ul li:hover ul {

  display: block;

  background-color: #f0f8ff; 

}



nav ul li ul li {

  width: 100%;

}

/* Sotto-menù */

nav ul li ul {

  display: none;

  position: absolute;

   background-color: #f0f8ff;

//  background-color: #e1effc;

//  background-color: white;

   left: 0; /* evita lo spostamento a destra */

  list-style: none;

  padding: 0;

  margin: 0;

  top: 100%;

  left: 0;

  box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

nav ul li ul li {

background-color: ##f0f8ff;

}





nav ul li:hover ul {

  display: block;

}



nav ul li ul li a {

  background-color: ##f0f8ff;

  text-decoration: none;

 padding: 10px 15px; 

 white-space: nowrap;

  font-size: 1.2em;

  

  display: block;

  border-radius: 5px;

}



nav ul li ul li a:hover {

  background-color: #003366;

  color: #fff;

}

/* --- Cambia il colore della voce di menù principale quando il sottomenù è aperto --- */

nav ul li:focus-within > a,

nav ul li:hover > a {

	background-color: #b3dbff; 

//  background-color:	#c5e3fc;

//  background-color: #f0f8ff;   /* Aggiungi il colore di sfondo che preferisci */

  color: #003366;               /* Colore del testo rimane lo stesso */

}

/* Contenuti */



main {

  margin: 20px auto;

  max-width: 1100px;

  padding: 0 30px 0 30px; /* più spazio intorno */

}

  p {

/*      margin-bottom: 1em;*/

	  text-align: justify;

	  font-size: 1.2em;

	line-height: 1.6em;

	color: #003366;

    } 

   .image-centered {

      text-align: center;

      margin: 2em 0;

    }



    .image-centered img {

      max-width: 100%;



      height: auto;

      border-radius: 6px;

    }



.page-title {

  text-align: center;

  font-size: 3.1em;

/*  margin-bottom: 10px;*/

  margin-top: 0px;

  color: #003366;

  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}



.description {

  text-align: center;

  margin: 0 auto 40px auto;

  max-width: 1100px;

  font-size: 1.2em;

  line-height: 1.6em;

  color: #003366;

}







/* Cards */

/* Galleria di card */

.gallery {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* desktop */

  gap: 30px;

  padding: 20px 40px;

}



.card {

  display: flex;

  flex-direction: column;

  border-radius: 15px;

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

  overflow: hidden;

  background: #e0f2ff;

  height: 100%;

  flex-direction: column;

  justify-content: space-between;

}



.card img {

  width: 100%;

  display: block;

}



.card-info {

  background-color: #e0f2ff;

  padding: 20px;

  flex-grow: 1;

  

}



.card-info .title {

  font-weight: bold;

  text-align: center;

  margin-bottom: 15px;

  font-size: 1.2em;

  color: #003366;

}



.card-info .caption {

  text-align: justify;

  font-size: 1.2em;

  line-height: 1.6em;

  color: #003366;

  margin-bottom: 15px;

}

.fondo {

	align-text: bottom;

/*	border: 1px solid red;*/

	padding-bottom: 20px;

	padding-left: 20px;

}

/*.card-info button {*/

.fondo button {

  display: inline-block;

  padding: 10px 25px;

  border: 2px solid #003366;

  border-radius: 30px;

  background-color: transparent;

  color: #003366;

  font-weight: bold;

  font-size: 1.2em;

  cursor: pointer;

  transition: all 0.3s;



 }



.fondo button:hover {

  background-color: #003366;

  color: white;

}

footer {

  background-color: #003366;

  color: white;

//  display: grid;

//  grid-template-columns: repeat(3, 1fr);

//  gap: 30px;

  padding: 20px 0px;

  text-align: center;

//  margin-top: 40px;

}

.footer-container {

  display: flex;

  justify-content: space-between;

  margin-bottom: 20px;

  padding: 0 20px;

  

}



.footer-column {

  width: 30%; /* Ogni colonna occupa il 30% dello spazio */



  padding: 0 10px;

 display: flex;

  flex-direction: column;  /* Organizza il contenuto in colonna */

}



.footer-column h3 {

  font-size: 18px;

  color: white;

  margin-bottom: 10px;

 // text-align: left;

}

.footer-column-ul {

  list-style: none;

  padding: 0;

  margin: 0 auto 0 auto;

  text-align: left;

 // border: 1px solid white;

}



.footer-column ul {

  list-style: none;

  padding: 0;

  margin: 0;

 //  text-align: left;

}



.footer-column ul li {

  margin: 5px 0;

//    text-align: left;

}



.footer-column ul li a {

  color: white; /* Blu chiaro per i link */

  text-decoration: none;

}



.footer-column ul li a:hover {

  text-decoration: underline;

}



.footer-bottom {

  margin-top: 20px; /* Distanza dal contenuto sopra */

  padding: 10px;

  font-size: 14px;

  border-top: none; /* Rimuove il bordo superiore che può causare la riga grigia */

  background-color: #003366;  /* Stesso blu del footer */

  color: white;

  text-align: center;  /* Copyright centrato */

}



.footer-bottom p {

  margin: 0;

  color: white;

  text-align: center;

}







footer p {

  line-height: 1.5em;

}*/

/* Sezione team */

.team {

  display: flex;

  flex-direction: column;

  gap: 40px;

  margin-top: 30px;

}



.team-member {

  display: flex;

  align-items: flex-start;

  gap: 20px;

  margin-bottom:20px;

}



.team-member img {

  width: 180px;

  height: auto;

  border-radius: 15px;

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

}



.member-info h3 {

  font-size: 1.2em;

  margin: 0 0 10px;

  color: #003366;

  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}



.member-info p {

  font-size: 1.2em;

  line-height: 1.6em;

  text-align: justify;

  color: #003366;

}



/* Bottoni bandierine */

.flag {

  background: none;

  border: none;

  font-size: 1.2em;

  margin-left: 10px;

  cursor: pointer;

}

.image-centered {

  text-align: center;   /* centra il contenuto */

  margin: 2em 0;

}



.image-centered p {

  text-align: center;   /* centra il contenuto */

 

}	

.didascalia {

  text-align: center;   /* centra il contenuto */

 

}	

.grasso{

	  	font-weight: bold;

}

.menu-toggle {

  display: none;

  background: none;

  border: none;

  font-size: 1.2em;



  cursor: pointer;

  color: #003366;

  position: absolute;

  top: 10px;

  right: 15px;

}

#cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;



  background: #a2d8f6;

  color: #003366;



  padding: 15px;



  display: none;

/*  justify-content: space-between;*/

  justify-content: center;

  align-items: center;

  gap: 20px;



  z-index: 9999;



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

}



.cookie-text {

  font-size: 0.95em;

  line-height: 1.4em;

}



#cookie-banner a {

  color: #003366;

  font-weight: bold;

}



#accept-cookies {

  background: #003366;

  color: white;

  border: none;

  padding: 8px 18px;

  margin-left: 20px;

  border-radius: 6px;

  cursor: pointer;

  white-space: nowrap;

}



@media (max-width: 768px) {



  #cookie-banner {

    flex-direction: column;

    text-align: center;

  }



}

@media (max-width: 768px) {

 

   /* Menu icon in alto a destra */

  .menu-toggle {

	display: block; /* mostra l’icona hamburger */

    position: absolute;

    top: 10px;

    right: 20px;

    background: none;

    border: none;

    font-size: 1.2em;

	font-weight: bold;

    color: #003366;

    cursor: pointer;

  }

  header { 

	  display: flex; 

	  align-items: left; 

	  justify-content:  space-between; 

	  padding: 12px 20px; 

	  background-color: #b3dbff; 

	  flex-wrap: wrap; 

  } 

   header .logo { 

	   display: flex; 

	   align-items: center; 

	   margin: 0 12px; 

	   flex: 0 0 auto; 

	  

   } 

   header h1 { 

	   display: inline-block; 

	   flex: 1 1 auto; 

	   text-align: left; 

	   margin: 0 12px; 

	   font-size: 2em; 

	   color: #003366; 

	   text-shadow: 2px 2px 5px rgba(0,0,0,0.6); 

	   white-space: nowrap;

}

   header .icons {

	   text-align: left; 

	   margin: 0 12px; 

	   

   }

/* Logo su mobile */



  

}



/* --- VERSIONE RESPONSIVE --- */

@media (max-width: 768px) {

  .footer-container {

    flex-direction: column; /* Imposta la direzione verticale per i dispositivi mobili */

    align-items: center;    /* Centra le colonne */

    padding: 0 10px;        /* Aggiunge un po' di spazio laterale */

  }



  .footer-column {

    width: 100%;            /* Ogni colonna occupa il 100% dello spazio */

    margin-bottom: 20px;    /* Aggiunge spazio tra le colonne */

  }



  .footer-bottom {

    text-align: center;     /* Allinea il testo del copyright al centro */

    margin-top: 20px;

  }

}



@media (max-width: 768px) {

  .image-centered img {

    width: 60%;  /* su tablet/cellulare: diventa più grande */

  }

}



@media (max-width: 480px) {

  .image-centered img {

    width: 80%;  /* su smartphone piccoli: ancora più grande */

	   /* Menu icon in alto a destra */

  .menu-toggle {

	display: block; /* mostra l’icona hamburger */

    position: absolute;

    top: 10px;

    right: 20px;

    background: none;

    border: none;

    font-size: 1.2em;

    color: #003366;

    cursor: pointer;

  }

  header { 

  display: flex; 

  align-items: 

  center; justify-content: space-between; padding: 12px 20px; background-color: #b3dbff; 

  flex-wrap: wrap; 

  } 

   header .logo { 

   display: flex;

   align-items: left;

   flex: 0 0 auto; 

   } 

   header h1 { 

   display: inline-block; flex: 1 1 auto; text-align: left; margin: 0 12px; font-size: 2em; color: #003366; text-shadow: 2px 2px 5px rgba(0,0,0,0.6); white-space: nowrap;

/* Logo su mobile */

  }

}

/* --- RESPONSIVE --- */

@media (max-width: 1024px) {

  .gallery {

    grid-template-columns: repeat(2, 1fr); /* tablet */

  }

}



@media (max-width: 768px) {

  .gallery {

    grid-template-columns: 1fr; /* smartphone */

  }

}

@media (max-width: 768px) {

 nav ul {

    flex-direction: column;    /* menù in verticale */

    align-items: flex-start;   /* allineato a sinistra */

	 display: none; /* nasconde il menù */

  }

 nav ul.show {

    display: flex; /* mostra quando attivo */

  }

  nav ul li {

    width: 100%;               /* ogni voce prende tutta la larghezza */

  }



  nav ul li a {

    padding: 12px 20px;        /* più comodo da cliccare */

    border-radius: 0;          /* senza arrotondamenti sui bordi */

    border-bottom: 1px solid #ddd; /* separatore sottile tra le voci */

  }



  nav ul li a:hover {

	  background-color: #b3dbff;

 //   background-color: #f0f8ff;

  }

 

  /* --- SOTTOMENU --- */

  nav ul li ul {

    display: none;             /* inizialmente nascosto */

    position: absolute;

    background-color: white;   /* sfondo bianco */

    top: 100%;

    left: 20%;

    width: 80%;               /* estende il sottomenù su tutta la larghezza */

    border-radius: 5px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* ombra leggera per il sottomenù */

    z-index: 999;              /* Aumenta il valore di z-index per farlo comparire sopra gli altri */

  }



  nav ul li:hover ul {

    display: block;            /* mostra il sottomenù al passaggio del mouse */

  }

 nav ul li.open > ul {

    display: block; /* apri sottomenù solo al click */

  }

  nav ul li ul li a {

    padding: 10px 15px;

    color: #003366;

    font-size: 1em;

  }



  nav ul li ul li a:hover {

    background-color: #003366;

  color: #fff;

  }

}