/*COLORI DEI PILLAR e varie ed eventuali*/

.bianco {
  background-color: #fdfcf8;
  color: #013e38;
}


.verde {
  background-color: #ceedb2;
  color: #013e38;
}


.panna {
  background-color: #f3f0e9;
  color: #013e38;
  display: flex;
}

[id] {
  scroll-margin-top: 90px; 
}










/*HEADER PRINCIPALE*/
.testata{
  display: flex;
  justify-content: space-between; /* Pushes children to opposite ends */
  align-items: center;            /* Vertically centers logo and links */
  padding: 10px 5%;
}


/* Rimuoviamo i margini e il padding predefiniti */
.nav-links {
  display: flex;             /* Allinea gli elementi in riga */
  list-style: none;          /* Toglie i pallini della lista */     
  padding: 0;
  margin: 0;
  justify-content: center;   /* Opzionale: centra i link orizzontalmente */
}

/* Stilizziamo i singoli elementi della lista */
.nav-links li {
  font-family: "galvji";
  font-weight: 600;
}

/* Stilizziamo i link (i tag <a>) */
.nav-links a {
  display: block;            /* Rende cliccabile l'intera area del padding */
  color: #013e38;              /* Colore del testo */
  text-decoration: none;     /* Toglie la sottolineatura */
  padding: 15px 20px;        /* Spazio interno ai link */
  transition: 0.3s;          /* Animazione fluida per l'hover */
}

/* Effetto al passaggio del mouse */
.nav-links a:hover {
  background-color: #fdfcf8;    /* Cambia colore quando ci passi sopra */
}



















/*PILLAR CON LOGO E FOTO NELLO SFONDO*/

.entrata {
  position: relative;
  width: 100%;
  max-width: 100%; /* Adjust as needed */
}

.base_img {
  display: block;
  width : 100%;
  height: auto;
}

.scritta {
  position: absolute;
  bottom: 40%; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  width: 60%; /* Adjust as needed */
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.bottone{
  position: absolute;
  text-align: center;
  min-width: 20%;
  /*transform: translateX(-50%);*/
  background-color: #ceedb2;
  font-family: "galvji";
  color: #013e38;
  font-weight: 950;
  padding: 0.8% 2%;
  border-radius: 8px;
  font-size: large;
  border: none;
  letter-spacing: 2px;
}





















/* PRIMO PILLAR (il moscerino in 30 secondi)*/

.sinistra{
  /*display: flex;
  /*flex-direction: column;*/
  left: 40%;
  flex: 0 0 80%;
  }

.panna p{
  margin-left: 10%;
  margin-bottom: 2%;
  margin-right: 40%;
  font-family: "galvji";
  font-size: 25px;
}

.panna h1 {
  font-size: 80px !important; 
  margin-left: 10%;
  margin-bottom: 2%;
  font-family: "italic";
  font-weight: 600;
}

.destra{
  display: block;
}

.destra .sinistra{
  flex: 1;
}


.graf{
  height: 35%;
  width: 35%;
}

.dettaglio{
  position: relative;
  transform: translateY(10%);
  left: 30%;
}

.sfuso{
  position: relative;
  transform: translateY(-22%);
  right: 35%;
  width: 35%;
  height: 48%;
}

.mescita{
  position: relative;
  transform: translateY(150%);
  right: 5%;
}









/* SECONDO PILLAR DEL SITO (tavolo sociale)*/
.tavolo{
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20%;
}

.scritta_tavolo{
  flex: 1;
  max-width: 10 0%;
  padding-left: 5%;
}

.tavolo_img{
  flex: 1;
  text-align: right;
}

.tavolo_img img {
  max-width: 100%;
  height: auto;
  padding-top: 10%;
  padding-right: 3%;
  transform: translateY(35%);
} 

.tavolo h1{
  font-size: 700%;
  font-family: "italic";
  margin-left: 5%;
  padding-top: 6%;
  font-weight: 600;
  transform: scaleY(120%);
}

.tavolo h2{
  font-size: 200%;
  font-family: "galvji";
  margin-left: 5%;
  padding-bottom: 4%;
  font-weight: 600;
}

.tavolo p{
  margin-left: 5%;
  margin-bottom: 2%;
  font-family: "galvji";
  font-size: 200%;
  padding-top: 6%;
}

.tavolo button{
  margin-left: 2.5%;
  margin-top: 5%;
}














/*TERZO PILLAR CARDS*/

.grid-container {
  display: grid;
  /* Creiamo 3 colonne e 3 righe */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  align-items: center;
  justify-items: center;
  background-color: #d1e9b6; /* Il verde dello sfondo */
  min-height: 1%;
  padding-top: 4%;
  padding-bottom: 4%;
}

.central-text {
  grid-column: 2; /* Forza il testo nella colonna centrale */
  grid-row: 2;    /* Forza il testo nella riga centrale */
  font-family: "roman";
  font-size: 5vw; /* Si rimpicciolisce proporzionalmente alla finestra */
  color: #0c3b2e;
  white-space: nowrap;
  font-weight: 600;
  transform: scaleY(130%);
  font-weight: 600;
}

.central-text span {
  font-weight: 600;
}

.box {
  width: 80%;
  max-width: 300px; /* Limite massimo per non sgranare */
  height: 90%;
}

/* Posizionamento specifico per emulare lo screenshot */
.box-1 { grid-column: 1; grid-row: 1; margin-left: 99%;}
.box-2 { grid-column: 3; grid-row: 1; margin-right: 99%;}
.box-3 { grid-column: 1; grid-row: 2; margin-left: 48%;}
.box-4 { grid-column: 3; grid-row: 2; margin-right: 48%;}
.box-5 { grid-column: 1; grid-row: 3; margin-left: 99%;}
.box-6 { grid-column: 3; grid-row: 3; margin-right: 99%;}

















/*QUARTO PILLAR (LE CREAZIONI)*/
.galleria{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-bottom: 5%;
  padding-top: 2%;
}


.galleria_title{
 font-size: x-small;
 margin-left: 4%;
}

.galleria_title h1{
  font-family: "roman";
  font-weight: 600;
  transform: scaleY(90%) scaleX(90%);

}

.galleria_title span{
  font-family: "italic";
  font-weight: 600;
  transform: scaleY(130%) translateY(-6%);
  font-size: 8vw;
  /*transform: translateY(-1%);*/
}

.collage-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  background-color: #f4f1ea; /* Colore crema dello sfondo */
  flex-wrap: wrap;
  margin-left: 5%;
}

.photo {
  background: white;
  padding: 10px 10px 30px 10px; /* Bordo bianco tipo Polaroid */
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2); /* Ombra per dare profondità */
  margin: -20px; /* Sovrappone leggermente le foto */
  transition: transform 0.3s ease;
  z-index: 1;
}

.photo img {
  width: 200px; /* Regola la dimensione */
  height: auto;
  display: block;
}

.caption {
  font-family: 'Comic Sans MS', cursive; /* Usa un font simile a quello dell'immagine */
  text-align: center;
  color: #1a4d32;
  font-weight: bold;
  margin-top: 10px;
  text-transform: uppercase;
}

/* Rotazioni differenziate per l'effetto casuale */
.photo-1 { transform: rotate(-5deg); }
.photo-2 { transform: rotate(3deg); margin-top: 20px; }
.photo-3 { transform: rotate(-2deg); }
.photo-4 { transform: rotate(4deg); }
.photo-5 { transform: rotate(-3deg); }
.photo-6 { transform: rotate(2deg); margin-top: 20px; }
.photo-7 { transform: rotate(-1deg); }
.photo-8 { transform: rotate(5deg); }

/* Effetto al passaggio del mouse */
.photo:hover {
  transform: scale(1.1) rotate(0deg);
  z-index: 10; /* Porta la foto in primo piano quando ci passi sopra */
}



















/* QUINTO PILLAR (CHI È GIOVANNI)*/
.descr_gio{
  text-align: center;
}


.gio_cont{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10%;
}

.descr_gio h1{
  font-family: "roman";
  font-size: 6vw;
  padding-bottom: 5%;
}

.descr_gio span{
  font-family: "italic";
  font-size: 6vw;
  font-weight: 600;
}

.foto_gio{
  flex:1;
}

.foto_gio img {
  width: 80%;
  height: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: rotate(-5deg);
  margin-left: 10%;
}

.bio_gio{
  flex:1;
  text-align: left;
  margin-left: 1%
}

.bio_gio h2{
  font-family: "galvji";
  font-size: 2vw;
  font-weight: 600;}

.bio_gio p{
  font-family: "galvji";
  font-size: 1.6vw;
}












/*FOOTER*/

.scrifoo{
  font-family: "italic";
  font-weight: 400;
  color: #e3dccc;
}

.mini_scri{
  font-family: "galvji";
  font-size: 1.8vw;
}

.giorno{
  font-weight: 600;
}

.container_foot {
  display: flex;
  gap: 10%; /* Optional: adds space between the divs */
  justify-content: space-between;
}

/* Optional styling to see the boxes */
.box_foot {
  padding: 3%;
  flex: 1; /* Optional: makes them all equal width */
}

.social{
  display: block  ;
  padding-right: 5%;
  padding-top: 20%;
  height: 100%;
  width: 100%;
}

.social iframe{
  height: 20vw;
  width: auto;
}

.container_foot a{
  color: #e3dccc;
  font-family: "roman";
  font-size: 2.5vw;
  padding-bottom: 1%;
}












@font-face {
  font-family: 'galvji';  /* You give it a name here (can be anything) */
  src: url('../font/Galvji.ttc'); /* Point to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'italic';  /* You give it a name here (can be anything) */
  src: url('../font/MinionVariableConcept-Italic.otf') format('opentype'); /* Point to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roman';  /* You give it a name here (can be anything) */
  src: url('../font/MinionVariableConcept-Roman.otf') format('opentype'); /* Point to the file */
  font-weight: normal;
  font-style: normal;
}

.galvji {
  font-family: "galvji";
}

.italic {
  font-family: "italic";
}

.roman {
  font-family: "roman";
}




.fotina{
  transition: transform 0.3s ease;
  z-index: 1;
}
.fotina:hover {
  transform: scale(1.3);
  z-index: 10; /* Porta la foto in primo piano quando ci passi sopra */
}












@media (min-width: 768px) {


}