/* BLOCCO 1: Stile per il video con padding superiore */
.chi-siamo-blocco1 {
    width: 100%;
    height: 600px; /* Altezza forzata */
    background-color: #f5f5f5; /* Cambia colore se necessario */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 0 0; /* Aggiunto padding superiore */
    box-sizing: border-box;
    padding-bottom: 0; /* Default desktop */
}

.video-container {
    max-width: 1200px;
    width: 100%;
    height: calc(100% - 30px); /* Ridotto per compensare il padding */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container iframe {
    width: 100%;
    max-width: 1200px;
    height: calc(100% - 40px); /* Adattato per mantenere il bilanciamento */
    border-radius: 20px; /* Angoli arrotondati */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aggiungiamo un'ombra per effetto estetico */
}

/* Stile per schermi piccoli (max-width: 768px) */
@media (max-width: 768px) {
    .chi-siamo-blocco1 {
        height: auto; /* Altezza dinamica per adattarsi al contenuto */
        padding: 20px 0 0 0; /* Riduciamo il padding */
    }

    .video-container {
        height: auto; /* Altezza dinamica */
    }

    .video-container iframe {
        height: 200px; /* Altezza specifica per schermi piccoli */
        border-radius: 15px; /* Riduciamo il raggio degli angoli */
    }

    .chi-siamo-blocco1 {
        padding-bottom: 20px; /* Aggiunto padding sotto al video su mobile */
    }
}

/* BLOCCO 2: Stile per immagine e testo su desktop */
.chi-siamo-blocco2 {
    width: 100%;
    background-color: #2c2c2c; /* Colore antracite */
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blocco2-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne su desktop */
    gap: 50px; /* Maggiore gap tra immagine e testo */
    align-items: center;
}

.blocco2-immagine img {
    width: 100%;
    border-radius: 20px; /* Angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leggera ombra */
}

.blocco2-testo {
    color: #ffffff; /* Testo bianco */
}

.blocco2-testo h2 {
    font-size: 2.4rem; /* Dimensione desktop */
    margin-bottom: 20px;
}

.blocco2-testo p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Stile responsivo per mobile */
@media (max-width: 768px) {
    .blocco2-container {
        grid-template-columns: 1fr; /* Una colonna su dispositivi mobili */
    }

    .blocco2-immagine {
        order: 2; /* Porta l'immagine dopo il testo */
    }

    .blocco2-testo {
        order: 1; /* Porta il testo prima dell'immagine */
    }

    .blocco2-testo h2 {
        font-size: 25px; /* Dimensione del titolo su mobile */
    }

    .blocco2-testo p {
        font-size: 16px; /* Dimensione della descrizione su mobile */
    }

    .blocco2-immagine img {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* Nascondi il pulsante "Leggi di più" e mostra tutto il testo su desktop */
@media (min-width: 769px) {
    #more-text {
      display: inline !important; /* Mostra sempre tutto il testo */
    }
    #read-more {
      display: none; /* Nascondi il pulsante su desktop */
    }
  }
  
  /* Nascondi parte del testo e mostra il pulsante su mobile */
  @media (max-width: 768px) {
    #more-text {
      display: none; /* Nasconde il testo aggiuntivo di default */
    }
    #read-more {
      display: inline-block; /* Mostra il pulsante su mobile */
      background-color: #dedacf;
      color: #000;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
    #read-more:hover {
      background-color: #00aaad;
    }
  }
  

/* BLOCCO 3: Stili Sezione Brand */
.chi-siamo-brands {
    background-color: #fff; /* Sfondo bianco */
    padding: 50px 20px;
}

.brands-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.brands-title {
    font-size: 2.4rem;
    margin-bottom: 20px;
}

.brands-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #666;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none; /* Rimuove la sottolineatura */
    padding: 10px; /* Ridotto padding per compattare l'altezza */
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    color: inherit; /* Mantiene il colore del testo */
}

.brand-card h3 {
    font-size: 1.2rem; /* Ridotta dimensione del titolo */
    margin-bottom: 5px; /* Ridotto margine inferiore */
    color: #333;
    text-align: center; /* Allineamento uniforme */
    min-height: 40px; /* Ridotta altezza uniforme per i titoli */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-card p {
    font-size: 0.9rem; /* Ridotta dimensione del testo */
    color: #666;
    text-align: center; /* Allineamento uniforme */
    margin-bottom: 5px; /* Ridotto margine inferiore per compattare */
}

.brand-card img {
    width: 80px; /* Ridotta dimensione del logo */
    height: 80px; /* Ridotta altezza del logo */
    object-fit: contain; /* Mantiene le proporzioni del logo */
    margin: 0 auto; /* Centra il logo nella card */
    display: block;
}

.brand-card img[alt="ATECK"] {
    max-width: 70px; /* Ridotta dimensione per ATECK */
    height: auto;
}

.brand-card img[alt="Otto Bull"] {
    content: url("http://35.180.229.108/wp-content/uploads/2025/01/OTTOBULL-orizzontale.png"); /* Nuovo logo per Otto Bull */
}

/* Stili per Desktop */
@media (min-width: 769px) {
    .mobile-only,
    .popup,
    .popup-content {
        display: none; /* Nascondi completamente popup e contenuti legati al mobile su desktop */
    }
}

/* Stili per Mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .brands-title {
        font-size: 20px; /* Ridotta dimensione del titolo per mobile */
    }

    .brand-card p {
        font-size: 14px; /* Ridotta dimensione del testo per mobile */
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr); /* Due card per riga su mobile */
        gap: 10px; /* Ridotto gap tra le card */
    }

    .brand-card h3 {
        font-size: 16px; /* Ridotta dimensione del titolo per mobile */
    }

    .popup.hidden {
        display: none;
    }
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .popup-content {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        max-width: 320px; /* Aumenta la larghezza massima */
        min-height: 150px; /* Imposta un'altezza minima */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        word-wrap: break-word; /* Gestisce parole lunghe */
    }
    
    #full-description {
        white-space: normal; /* Consente l'andata a capo */
        overflow: visible;   /* Evita troncamenti */
        text-align: center;
        max-width: 90%; /* Limita la larghezza del testo */
        line-height: 1.4; /* Migliora la leggibilità */
        margin: 10px 0;
    }
    
    .popup-content img {
        width: 60px; /* Dimensione fissa del logo */
        height: auto;
        margin-bottom: 10px;
    }
    
    
    .popup-content .close-popup {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
    }
}


/* BLOCCO 4 */
/* Stile generale */
.chi-siamo-blocco4 {
    padding: 50px 20px;
    background-color: #ffffff; /* Sfondo bianco */
  }
  
  .blocco4-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .blocco4-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
  }
  
/* Contenitore del carosello - Più largo */
.carosello {
  display: flex;
  gap: 20px; /* Spaziatura tra le immagini */
  overflow-x: auto; /* Scroll orizzontale */
  margin-bottom: 20px;
  padding: 10px; /* Spaziatura attorno al carosello */
  justify-content: flex-start; /* Allinea gli elementi a sinistra */
  width: 100%; /* Occupa tutta la larghezza disponibile */
  max-width: 1200px; /* Aumenta la larghezza massima */
  margin-left: auto;
  margin-right: auto;
}

/* Slide del carosello */
.carosello-slide {
  flex: 0 0 280px; /* Aumenta la larghezza degli elementi */
  width: 280px;
  height: 200px; /* Altezza fissa per evitare immagini di diverse dimensioni */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stile per le immagini nel carosello */
.carosello-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene la proporzione senza deformazioni */
  display: block;
}


  
  /* Linguette */
  .linguette-testi {
    margin-top: 20px;
    background-color: #f9f9f9; /* Sfondo chiaro */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .linguette {
    display: flex;
    flex-wrap: wrap; /* Permette alle linguette di andare su più righe */
    gap: 10px;
    justify-content: space-between;
  }
  
  .linguetta {
    flex: 1 1 calc(33.33% - 10px); /* Ogni linguetta occupa 1/3 dello spazio con gap */
    text-align: center;
    padding: 10px;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid #ddd;
    background-color: #dedacf;
    color: #000; /* Testo nero per linguette non selezionate */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .linguetta.attiva {
    background-color: #00474f;
    color: #ffffff; /* Testo bianco per linguetta attiva */
    border-color: #00474f;
  }
  
  .linguetta:hover {
    background-color: #00474f;
    color: #ffffff;
  }
  
  .contenuti-testi {
    color: #333;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    
  }
  
  .testo-tab {
    display: none;
  }
  
  .testo-tab.attivo {
    display: block;
  }
  
  /* Responsività per mobile */
  @media (max-width: 768px) {
    .carosello-slide {
      flex: 0 0 80%; /* Immagini più grandi su mobile */
      max-width: 100%;
    }
  
    .linguette {
      flex-direction: column; /* Linguette in colonna su mobile */
      align-items: stretch;
    }
  
    /* Media query per mobile */
@media (max-width: 768px) {
  .linguetta {
    flex: 1 1 calc(33.33% - 10px); /* Linguette affiancate */
  }

.contenuti-testi {
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

}
  }