
/* Stili personalizzati per il tuo sito web */
/* Cambia il colore di sfondo dell'intestazione */
header {
  background-color: #343a40; /* Colore di sfondo scuro */
  color: #ffffff; /* Testo bianco */
}

/* Stile personalizzato per il titolo dell'intestazione */
header h1 {
  font-size: 2.5rem;
}

/* Stile personalizzato per il menu di navigazione */
.navbar {
  background-color: #f8f9fa; /* Colore di sfondo del menu */
  border-bottom: 1px solid #e0e0e0; /* Bordo inferiore grigio */
}

/* Stile personalizzato per i link del menu di navigazione */
.navbar a.nav-link {
  color: #333; /* Colore dei link del menu */
  font-weight: bold; /* Testo in grassetto */
  transition: color 0.3s; /* Transizione del colore */
}

/* Cambia il colore dei link del menu al passaggio del mouse */
.navbar a.nav-link:hover {
  color: #007bff; /* Colore dei link al passaggio del mouse */
}

/* Stile personalizzato per il contenuto principale */
main {
  padding: 20px; /* Spaziatura interna */
}

/* Stile personalizzato per il footer */
footer {
  background-color: #343a40; /* Colore di sfondo scuro */
  color: #ffffff; /* Testo bianco */
}

/* Stile personalizzato per il testo del footer */
footer p {
  font-size: 0.9rem; /* Dimensione del testo più piccola */
  text-align: center; /* Allineamento al centro */
}

/* Stile per il link del footer */
footer a {
  color: #007bff; /* Colore del link nel footer */
  text-decoration: none; /* Rimuovi la sottolineatura del link */
  transition: color 0.3s; /* Transizione del colore */
}

/* Cambia il colore del link del footer al passaggio del mouse */
footer a:hover {
  color: #ffffff; /* Colore del link al passaggio del mouse */
}


/* Stili per le card della griglia di video e foto */
.card {
  border-radius: 10px; /* Bordi arrotondati */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra leggera */
  transition: transform 0.3s ease-in-out; /* Transizione fluida */
}

.card:hover {
  transform: scale(1.03); /* Effetto ingrandimento al passaggio del mouse */
}

/* Stili per le immagini e video nelle card */
.card-img-top {
  height: 200px; /* Altezza fissa per uniformità */
  object-fit: cover; /* Assicura che l'immagine/video copra l'area senza distorcersi */
  border-top-left-radius: 10px; /* Arrotonda gli angoli superiori */
  border-top-right-radius: 10px;
}

/* Stili per il testo all'interno delle card */
.card-title {
  font-size: 1.2em; /* Dimensione del titolo */
  color: #333; /* Colore del titolo */
}

.card-text {
  font-size: 1em; /* Dimensione del testo */
  color: #555; /* Colore del testo */
}

.btn-primary {
  background-color: #007bff; /* Colore di sfondo del pulsante */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Ombra leggera */
}

.btn-primary:hover {
  background-color: #0056b3; /* Colore di sfondo al passaggio del mouse */
}

body::before {
  content: "";
  position: fixed; /* o 'absolute' se più appropriato per il tuo layout */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('immages/videoalfa.png') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.5; /* Regola questo valore per controllare la trasparenza */
  z-index: -1; /* Assicurati che lo sfondo sia dietro tutto il resto */
}
video {
  pointer-events: auto; /* Impedisce il click destro sulle immagini e sui video */
}
video::-webkit-media-controls-enclosure {
  overflow: hidden;
}
video::-webkit-media-controls-panel {
  width: calc(100% + 30px); /* Nasconde il pulsante di download spostandolo fuori dall'area visibile */
}
.about-wrapper{
  height: 100vh;
}
.about-left{
  background: #bdbcbc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
   
  
}
.about-left-content{
  box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
  -webkit-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
  -moz-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
}
/* Stili aggiuntivi specifici per la pagina "Chi Sono" */
.about-section {
  display: flex;
  height: 100vh;
}

.about-left, .about-right {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-left {
  background-color: #afacac; /* Nuovo colore per ridurre il contrasto */
    color: #fff; /* Colore del testo */
    padding: 20px;
    text-align: center;
}


.profile-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 50%; /* Cerchio completo per l'immagine */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Ombra per l'effetto 3D */
  width: 250px; /* Larghezza del contenitore */
  height: 250px; /* Altezza del contenitore */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.profile-container img {
  width: 100%; /* L'immagine si adatta alla larghezza del contenitore */
  height: 100%; /* L'immagine si adatta all'altezza del contenitore */
  object-fit: cover;
  border-radius: 50%;
}

.profile-img {
  width: 200px; /* Larghezza fissa */
  height: 200px; /* Altezza fissa */
  border-radius: 50%; /* Rende l'immagine circolare */
  overflow: hidden;
  margin: auto; /* Centra l'immagine nella colonna */
  display: flex; /* Utilizza flexbox per centrare l'immagine */
  align-items: center; /* Allineamento verticale */
  justify-content: center; /* Allineamento orizzontale */
}

h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.profile-img img {
  width: 100%;
  height: auto;
}

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.social-links a {
  color: #333; /* Colore per una migliore visibilità */
  margin: 0 10px;
  font-size: 20px; /* Dimensione leggermente ridotta */
}


.social-links a:hover {
  color: #007bff; /* Colore al passaggio del mouse */
}

.about-right {
  background-color: #fff;
  text-align: center;
  padding: 20px;
}

.about-right h1 {
  margin-bottom: 20px;
}

.btn-home {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-home:hover {
  background-color: #0056b3;
}

