body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #c4c4ae;
  color: #333;
  margin: 0; /* Rimuove i margini predefiniti */
  padding: 0; /* Rimuove il padding */
  overflow-x: hidden;
}







.fixed-top {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  z-index: 1000;
  display: flex;
  justify-content: flex-start; /* Allinea gli elementi a sinistra */
  align-items: center;
  padding: 10px 20px; /* Padding generale per separare gli elementi dai bordi */
  box-sizing: border-box; /* Assicura che il padding venga incluso nella larghezza */
}

.fixed-top h1 {
  font-size: 24px;
  margin: 0;
  padding: 0;
  color: #eeeed6;
  display: inline-block; /* In modo che il titolo non occupi tutta la larghezza */
}

.fixed-top a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 20px;
  transition: color 0.3s;
  white-space: nowrap; /* Impedisce che i link vadano a capo */
  overflow: hidden; /* Nasconde il testo che esce fuori dal contenitore */
  text-overflow: ellipsis; /* Aggiunge i puntini di sospensione se il testo è troppo lungo */
}

.fixed-top a:hover {
  color: #ff9800;
}

/* Media Query per schermi con larghezza inferiore a 600px */
@media (max-width: 600px) {
  .fixed-top {
    flex-wrap: wrap; /* Permette agli elementi di andare su più righe */
    justify-content: center; /* Centra gli elementi */
    ;
  }

  /* Per i link successivi, metti due a due sulla stessa riga */
  .fixed-top a {
    display: inline-block  ; /* Ogni link sarà su una riga separata */
    margin: 0 5px; /* Aggiunge 10px di spazio a sinistra e a destra di ogni link */
    font-size: 10px;
  }

  
}

















.footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
}

.footer a {
  color: #ff9800;
  text-decoration: none;
}












#section {
  min-height: 700px; /* Altezza della sezione */
  align-items: center; /* Centra verticalmente */
  background-color: #c4c4ae;
  padding: 0 10px; /* Spazio interno */
}

/* Contenitore del testo */
.text-container {
  text-align: left; /* Testo allineato a sinistra */
  padding: 0; /* Rimuove padding extra */
}

.text-container h2 {
  font-size: 70px;
  margin: 0;
  color: #000;
}

@media (max-width: 600px) {
  #section {
    min-height: 500px; /* Altezza della sezione */
  }

  .text-container {
    text-align: left; /* Centra il testo su dispositivi più piccoli */
  }

  .text-container h2{
    font-size: 40px;
  }
}

.bg-image{
  background-image: url(../img/sfondo.def5-sezione.jpg); /* Sostituisci con il percorso della tua immagine */
  background-size: cover; /* L'immagine copre l'intero blocco */
  background-position: center; /* Centra l'immagine */
  
}

















/* Sezione 1 (Chi sono) */
.custom-section1 {
  padding: 20px 20px; /* Spaziatura interna */
}

.custom-section1 .custom-image {
  width: 100%; /* L'immagine occupa tutta la larghezza della colonna */
  height: auto; /* Mantieni proporzioni */
  object-fit: cover; /* Assicura che l'immagine sia ben ritagliata */
  border: 4px solid #8f8f7a; /* Aggiunge un bordo bianco molto sottile */
  border-radius: 10px; /* Arrotonda gli angoli */
}

.custom-section1 h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #4e4e42;
}

.custom-section1 p {
  font-size: 16px;
  color: #333;
}

@media (max-width: 400px) {
  .custom-section1 h1 {
    font-size: 35px;
  }
}









/* Sezione 2 (Cosa ho imparato) */
.row.section2 {
  background-color: #b9b99b; /* Colore di sfondo */
  padding: 80px 10px; /* Stesso padding del primo blocco */
  display: flex; /* Usa flexbox per allineamento */
  flex-wrap: wrap; /* Permetti il wrapping */
}

@media (max-width: 763px) {
  .row.section2 {
    padding: 60px 10px; /* Riduci il padding su schermi più piccoli */
  }

  .title {
    font-size: 28px; /* Riduci il font della title su schermi più piccoli */
  }

  .description {
    font-size: 12px; /* Riduci il font della descrizione su schermi più piccoli */
  }
}

/* Stile del contenuto del testo */
.section2 .title {
  font-size: 40px; /* Dimensione del titolo */
  font-weight: bold; /* Grassetto per il titolo */
  text-align: center; /* Testo centrato */
  color: #4e4e42;; /* Colore del testo */
  margin-bottom: 30px; /* Spazio sotto il titolo */
}

.section2 .description {
  font-size: 16px; /* Dimensione del paragrafo */
  text-align: center; /* Testo centrato */
  color: #000000; /* Colore del paragrafo */
  margin: 0 auto; /* Centra il testo */
  line-height: 1.6; /* Migliora leggibilità */
}

#liceo-scienze-umane {
  padding: 20px 20px; /* Spaziatura interna */
  margin-bottom: 3rem;
  display: flex;               /* Utilizza il layout flex per allineare i contenuti */
  align-items: stretch;        /* Allinea l'immagine e il testo verticalmente */
  flex: 1;                     /* Rende la colonna larga il 50% della row */
}

#liceo-scienze-umane .custom-image {
  width: 100%; /* L'immagine occupa tutta la larghezza della colonna */
  height: auto; /* Mantieni proporzioni */
  object-fit: cover; /* Assicura che l'immagine sia ben ritagliata */
  border: 4px solid #8f8f7a; /* Aggiunge un bordo bianco molto sottile */
  border-radius: 10px; /* Arrotonda gli angoli */
}

#universita {
  padding-bottom: 60px;
}

#section2 h4 {
  color: #000;
  margin-bottom: 1rem;
}

#universita .btn {
  color: #fff;
  text-decoration: underline; /* Sottolinea il link */
 
}

#liceo-scienze-umane .btn {
  color: #fff;
  text-decoration: underline; /* Sottolinea il link */
 
}


















/* Contenitore delle card */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
padding: 0 20px; /* Aggiunge 20px di spazio a sinistra e a destra */
padding-bottom: 20px;
}

/* Stile delle card */
.card {
background: #8f8f7a;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.5s ease;
}

/* Hover effect sulle card */
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Immagini delle card */
.card img {
width: 100%;
height: auto;
display: block;
}

/* Titolo delle card */
.card h3 {
font-size: 0.9em;
margin: 15px;
color: #333;
}

/* Testo delle card */
.card p {
font-size: 0.9em;
margin: 0 15px 15px;
color: #ffffff;
}

/* Link delle card */
.card a {
display: inline-block;
margin: 0 15px 15px;
text-decoration: none;
color: #007bff;
font-weight: bold;
}

.card a:hover {
text-decoration: underline;
}













#section3 {
  background-color: #b9b99b; /* Colore verde chiaro di sfondo */
  padding: 3rem 0;
}

#section3 h2 {
  color: #4e4e42;; /* Colore del titolo */
  font-size: 2.5rem;
  font-weight: bold;
}

#section3 p {
  color: #000000; /* Colore del testo */
  font-size: 16px;
}


#section3 .btn {
  color: #fff;
  text-decoration: underline;
}

#santa{
  padding: 20px 20px;
  padding-bottom: 40px;
}

#santa .custom-image {
  width: 100%; /* L'immagine occupa tutta la larghezza della colonna */
  height: auto; /* Mantiene il rapporto di aspetto */
  object-fit: cover; /* Adatta l'immagine senza distorsioni */
  border: 4px solid #8f8f7a; /* Aggiunge un bordo bianco molto sottile */
  border-radius: 10px; /* Arrotonda gli angoli */
}

#testo-santa {
  padding-bottom: 40px;
}









.row.section4 {
  background-color: #b9b99b; /* Colore di sfondo */
  padding: 80px 10px; /* Stesso padding del primo blocco */
  display: flex; /* Usa flexbox per allineamento */
  flex-wrap: wrap; /* Permetti il wrapping */
}

@media (max-width: 763px) {
  .row.section2 {
    padding: 60px 10px; /* Riduci il padding su schermi più piccoli */
  }

  .title {
    font-size: 28px; /* Riduci il font della title su schermi più piccoli */
  }

  .description {
    font-size: 12px; /* Riduci il font della descrizione su schermi più piccoli */
  }
}

/* Stile del contenuto del testo */
.section4 .title {
  font-size: 40px; /* Dimensione del titolo */
  font-weight: bold; /* Grassetto per il titolo */
  text-align: center; /* Testo centrato */
  color: #4e4e42;; /* Colore del testo */
  margin-bottom: 30px; /* Spazio sotto il titolo */
}



#collanine {
  padding: 20px 20px; /* Spaziatura interna */
  margin-bottom: 3rem;
  display: flex;               /* Utilizza il layout flex per allineare i contenuti */
  align-items: stretch;        /* Allinea l'immagine e il testo verticalmente */
  flex: 1;                     /* Rende la colonna larga il 50% della row */
}

#collanine .custom-image {
  width: 100%; /* L'immagine occupa tutta la larghezza della colonna */
  height: auto; /* Mantieni proporzioni */
  object-fit: cover; /* Assicura che l'immagine sia ben ritagliata */
  border: 4px solid #8f8f7a; /* Aggiunge un bordo bianco molto sottile */
  border-radius: 10px; /* Arrotonda gli angoli */
}



#danza {
  padding: 20px 20px; /* Spaziatura interna */
  margin-bottom: 3rem;
  display: flex;               /* Utilizza il layout flex per allineare i contenuti */
  align-items: stretch;        /* Allinea l'immagine e il testo verticalmente */
  flex: 1;                     /* Rende la colonna larga il 50% della row */
}

#danza .custom-image {
  width: 100%; /* L'immagine occupa tutta la larghezza della colonna */
  height: auto; /* Mantieni proporzioni */
  object-fit: cover; /* Assicura che l'immagine sia ben ritagliata */
  border: 4px solid #8f8f7a; /* Aggiunge un bordo bianco molto sottile */
  border-radius: 10px; /* Arrotonda gli angoli */
}