@font-face {
  font-family: 'ParadroidMono'; /*a name to be used later*/
  src: url('ParadroidMono-Light.ttf'); /*URL to font*/
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

hr {
  margin-left: 10%;
  margin-right: 10%;
}

.logo2 {
  max-width: 100%; /* Assicura che l'immagine sia responsive e non ecceda la larghezza del suo contenitore */
  height: auto; /* Mantiene le proporzioni dell'immagine */
  min-width: 200px;
  width: 400px;
}

.logo3 {
  max-width: 100%; /* Assicura che l'immagine sia responsive e non ecceda la larghezza del suo contenitore */
  height: auto; /* Mantiene le proporzioni dell'immagine */
  min-width: 200px;
  width: 800px;
}

.full-screen-video, .parallax {
    position: relative;
    width: 100%;
    /* Rimuovi la seguente linea per altezza variabile */
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Aggiungi il seguente per assicurare un minimo di copertura ma consentire l'espansione */
    min-height: 50vh; /* Questo è opzionale, adattalo alle tue esigenze */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Overlay nero con opacità al 50% */
    z-index: 2; /* Si assicura che l'overlay sia sopra il video ma sotto il testo */
}

.full-screen-video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
}

.parallax {
    background-attachment: fixed; /* Importante per il parallax, ma potrebbe non essere necessario qui */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Overlay nero con opacità al 50% */
    z-index: 1;
}

.content .logo {
    font-size: 2em;
    color: white;
    
}

.content p, ul {
  margin-left: 10%;
  margin-right: 10%;
}

.content p a {
  color: orange; /* Colore del testo */
}

.content p a:visited {
  color: orange; /* Colore del testo */
}

/* Per i div con contenuto dinamico, potrebbe essere utile rimuovere l'allineamento centrale */
.content {
    /* Rimuovi o modifica queste regole se necessario per adattarsi al contenuto */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: relative;
    z-index: 2; /* Assicura che il testo sia sopra l'overlay */
    padding: 20px; /* Aggiungi padding per il contenuto */
    font-size: 1.5vw;
    text-align: center;
    color:white;
    font-family: 'ParadroidMono',Verdana, Geneva, sans-serif;
    font-weight: bold;
}

footer {
    background-color: #292d36;
    color: white;
    text-align: center;
    padding: 20px 10px;
}

footer a {
    color: orange;
    text-decoration: none;
}

.footer-container {
  display: flex;
  justify-content: space-between; /* Spazia uniformemente gli elementi */
  align-items: center; /* Centra verticalmente */
  max-width: 1200px; /* O la larghezza massima che preferisci */
  margin: 0 auto;
  padding: 0 20px;
  line-height: 0.5;
}

.footer-logo img {
  width: 300px; /* Larghezza fissa del logo */
  height: auto; /* Mantiene le proporzioni del logo */
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.texto-animato {
    opacity: 0; /* Imposta l'opacità iniziale a 0 per nascondere il testo */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Aggiunge una transizione morbida */
}

.texto-animato.is-visible {
    animation: fadeInUp 1s ease forwards;
}


.social-links {
    display: flex; /* Crea una griglia orizzontale */
    justify-content: center; /* Centra gli elementi nella griglia */
    gap: 10px; /* Distanza tra le icone */
    min-height:auto;
    align-items: center;
    color: white;
  }
  
  .social-icon img {
    width: 40px; /* Dimensione delle icone */
    height: 40px; /* Dimensione delle icone */
    transition: transform 0.3s ease;  
  }
  
  .social-icon:hover img {
    transform: scale(1.1);  
  }
  

  .grid-container {
    display: grid;
    color: white;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adatta il numero di colonne alla larghezza del contenitore */
    
    padding: 20px; /* Padding intorno alla griglia */
    background-color: rgb(37, 36, 36);
    justify-content: center;
    font-family: 'Montserrat',Verdana, Geneva, sans-serif;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .profile-card {
    position: relative;
    width: 300px;
    height: 400px;
    font-family: 'ParadroidMono',Verdana, Geneva, sans-serif;
    overflow: hidden;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    
    opacity: 0; /* Inizialmente nascosto */
 

  }

  .animate {
    animation-name: fadeIn;
    animation-fill-mode: forwards; /* Mantiene l'elemento visibile dopo l'animazione */
    animation-duration: 1s; /
  }

 
  /*
  .profile-photo {
    width: 400px; /* Larghezza fissa per le foto */
   /* height: 400px; /* Altezza fissa per le foto */
   /* object-fit: cover; /* Assicura che la foto copra l'intera area senza distorcersi */
    /* border-radius: 50%; Rimuovi o commenta questa riga per foto non circolari */
   /* margin: 0 auto; /* Centra la foto orizzontalmente */
  /*}*/

  .profile-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: 0 auto;
  }
  
  .image-container {
    position: relative; /* Contenitore relativo per posizionare assolutamente l'overlay */
    width: auto; /* o specifica una larghezza */
    display: inline-block; /* Permette al contenitore di adattarsi alla dimensione dell'immagine */
  }

  .bio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Overlay semitrasparente */
    color: white;
    display: flex;
    flex-direction: column; /* Organizza il contenuto dell'overlay in colonna */
    justify-content: space-between; /* Spazia il contenuto tra alto e basso */
     
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;

  }

  .bio-overlay p {
    margin: 25px;
    text-align: justify; /* Giustifica il testo della biografia */
    text-align-last: center; /* Centra l'ultima linea del testo giustificato se necessario */
    text-justify: inter-word; /* Migliora la giustificazione */
    /*font-size: 1.2rem; */
  }

  .profile-card:hover .bio-overlay {
    opacity: 1;
    visibility: visible;
  }

   
 

  .profile-info h3, .profile-info p {
    margin: 5px 0; /* Margini verticali per nome, cognome e mansione */
    justify-content: center;
  }
  
  .social-icons a {
    margin: 0 5px; /* Gestisce lo spazio tra i link social */
    color: #FFF; /* Colore del testo per i link */
    text-decoration: none; /* Rimuove il sottolineamento */
  }

  
  

    
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');
  
  .divBtn{
    align-items: center;
  }

  .btn{
  font-family: Roboto, sans-serif;
  font-weight: 100;
  font-size: 1.6vw;
  color: #fff;
  background-color: #ffffff00;
  padding: 10px 30px;
  border: solid #ffffff 5px;
  box-shadow: none;
  border-radius: 0px;
  transition : 1000ms;
  transform: translateY(0);
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  cursor: pointer;
  font-family: proxima-nova;
  text-transform: uppercase;
  }

  .btn a {
    color: #FFF; /* Colore del testo per i link */
    text-decoration: none; /* Rimuove il sottolineamento */

  }
  
  .btn:hover{
  transition : 1000ms;
  padding: 10px 50px;
  transform : translateY(-0px);
  background-color: #ffffff00;
  color: #ffffff;
  border: solid 10px #737475;
  
  }


  .container {
    display: flex; /* Utilizza Flexbox */
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    gap: 20px; /* Distanza tra l'immagine e il testo */
  }
  
  .immagine {
    width: 250px; /* Imposta una larghezza fissa per l'immagine */
    height: auto; /* Mantiene le proporzioni dell'immagine */
  }
  
  .testo {
    flex: 1; /* Fa occupare al testo tutto lo spazio disponibile rimanente */
    padding: 20px; /* Aggiunge del padding intorno al testo */
    font-size: 1.5vw;
    text-align: center;
    color:white;
    font-family: 'ParadroidMono',Verdana, Geneva, sans-serif;
    z-index: 2;
    font-weight: bold;
  }


  @media only screen and (max-width: 768px) {
    .testo  {
      font-size: 4vw;
    }

    .content  {
      font-size: 4vw;
    }

    .bio-overlay p {
      font-size: 4vw;
    }

    .btn {
      font-size: 3.5vw;
    }

    .immagine {
      display: none;
    }


    .profile-card:active  {
      opacity: 1;
      visibility: visible;
    }
    hr {
      margin-left: 0;
      margin-right: 0;
    }

    .content p, ul {
      margin:0;
    }
  }