/* Stile generale */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Barra di navigazione */
header {
    background-color: #FFFFFF; /* Bianco */
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 3px solid #7BA941; /* Verde */
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header .logo img {
    height: 50px; /* Altezza del logo */
    width: auto;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

header nav ul li a {
    color: #0F4A7D; /* Blu */
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    transition: color 0.3s;
}

header nav ul li a:hover {
    color: #7BA941; /* Verde */
}

/* Sezioni principali */
h1, h2 {
    color: #7BA941; /* Verde */
}

section {
    padding: 20px;
    text-align: center;
}

/* Introduzione */
.intro-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Sfondo chiaro */
}

.intro-section h1 {
    color: #0F4A7D; /* Blu */
    font-size: 2.5rem;
}

.intro-section p {
    color: #333;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Contenitore Chi Siamo */
.intro-container {
    display: flex; /* Posiziona testo e immagine affiancati */
    align-items: center; /* Allinea verticalmente al centro */
    justify-content: space-between; /* Spaziatura tra testo e immagine */
    gap: 20px; /* Spazio tra testo e immagine */
    max-width: 1200px; /* Larghezza massima del contenitore */
    margin: 0 auto; /* Centra il contenitore nella pagina */
    padding: 20px; /* Padding interno */
}

.intro-text {
    flex: 1; /* Occupa lo spazio rimanente */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    text-align: justify; /* Allinea il testo a sinistra */
    max-width: 600px; /* Larghezza massima per uniformare le righe */
    margin-right: 20px; /* Spazio tra il testo e la foto */
}

.intro-image {
    flex: 1; /* Occupa metà dello spazio */
    text-align: center; /* Centra l'immagine */
}

.intro-image img {
    max-width: 100%; /* L'immagine si adatta al contenitore */
    height: auto; /* Mantiene le proporzioni */
    border-radius: 10px; /* Angoli arrotondati */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effetto ombra */
}

/* Layout responsivo */
@media (max-width: 768px) {
    .intro-container {
        flex-direction: column; /* Impila testo e immagine verticalmente */
        text-align: center;
    }
    .intro-text, .intro-image {
        flex: none;
        width: 100%;
    }
}

/* Contatori */
.stats-section {
    background-color: #7BA941; /* Verde */
    color: #0F4A7D; /* Blu */
    padding: 50px 20px;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item h2 {
    font-size: 2.5rem;
    margin: 0;
    color: #0F4A7D; /* Blu */
}

.stat-item p {
    font-size: 1.2rem;
    margin: 5px 0 0;
    color: #0F4A7D; /* Blu */
}

/* Team */
.team-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Sfondo chiaro */
}

.team-section h2 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 30px;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spazio tra le immagini */
    justify-content: center; /* Centra gli elementi orizzontalmente */
    margin: 0 auto;
    max-width: 1200px; /* Limita la larghezza massima della griglia */
}

.team-member {
    flex: 1 1 calc(33.333% - 40px); /* 3 colonne con spaziatura di 20px */
    max-width: calc(33.333% - 40px);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    box-sizing: border-box;
}

.team-member:hover {
    transform: scale(1.05); /* Ingrandisce leggermente al passaggio del mouse */
}

.team-member img {
    width: 100%;
    height: 520px; /* Altezza fissa */
    object-fit: cover; /* Ritaglia l'immagine per riempire lo spazio */
    
    border-radius: 10px;
    transition: opacity 0.3s;
}

.team-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 74, 125, 0.8); /* Sovrapposizione blu trasparente */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.team-member:hover .team-info {
    opacity: 1; /* Mostra i dettagli al passaggio del mouse */
}

@media (max-width: 768px) {
    .team-member {
        flex: 1 1 calc(50% - 40px); /* 2 colonne su schermi medi */
        max-width: calc(50% - 40px);
    }
}

@media (max-width: 480px) {
    .team-member {
        flex: 1 1 100%; /* 1 colonna su schermi piccoli */
        max-width: 100%;
    }
}

/* Network e Collaborazioni */
.network-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #FFFFFF; /* Sfondo bianco */
}

.network-section h2 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 20px;
}

.network-section p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.network-section ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
    text-align: left;
}

.network-section ul li {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

/* Footer */
footer {
    background-color: #99CC66; /* Verde chiaro */
    color: #FFFFFF; /* Bianco */
    padding: 20px;
    text-align: center;
    margin-top: auto;
}

/* Menu Hamburger */
.menu-toggle {
    display: none; /* Nascondi il bottone su schermi grandi */
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333; /* Colore delle tre linee */
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1100; /* Sopra il menu */
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostra il pulsante */
    }

    .nav-menu {
        display: none; /* Nascondi il menu di default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Copre l'intera finestra */
        background-color: #7BA941; /* Verde */
        flex-direction: column; /* Disposizione verticale */
        justify-content: center; /* Centra verticalmente gli elementi */
        align-items: center; /* Centra orizzontalmente gli elementi */
        gap: 20px; /* Spaziatura tra i link */
        z-index: 1000;
        padding: 0; /* Rimuovi padding extra */
    }

    .nav-menu.active {
        display: flex; /* Mostra il menu quando è attivo */
    }

    .nav-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-direction: column; /* Cambia disposizione in colonna */
        width: 100%; /* Fa sì che i link occupino tutta la larghezza */
        text-align: center;
    }

    .nav-menu ul li {
        width: 100%; /* Ogni link occupa tutta la larghezza disponibile */
    }

    .nav-menu ul li a {
        display: block; /* Trasforma i link in blocchi */
        font-size: 24px; /* Aumenta la dimensione del testo */
        color: #FFFFFF; /* Testo bianco */
        text-decoration: none;
        font-weight: bold;
        padding: 15px 0; /* Spaziatura verticale per i link */
        transition: background-color 0.3s, color 0.3s;
    }

    .nav-menu ul li a:hover {
        background-color: #99CC66; /* Verde chiaro */
        color: #333333; /* Colore grigio scuro al passaggio del mouse */
    }
}

/*Contenitore del logo */
	.logo-container {
	  display: flex;
	  justify-content: center; /*Centra orizzontalmente*/
	  align-items: center; /*Cetntra verticalmente*/
	  height:100vh; /*Occupa l'intera altezza della finestra */
	  margin: 0;
	  padding: 0;
	}
/*Logo adattivo*/
	.responsive-logo {
	  max-width: 80%; /*Il logo non supera l'80% della larghezza della finestra*/
	  height: auto; /*mantiene le proporzioni*/
	  object-fit: contain; /*Garantisce che l'immagine sia contenuta*/
	}



/* Sezione Progetti */
.projects-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Sfondo chiaro */
}

.projects-section h2 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 30px;
}

/* Griglia dei progetti */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spaziatura tra le card */
    justify-content: center; /* Centra orizzontalmente */
    margin: 0 auto;
    max-width: 1200px; /* Larghezza massima */
}


/* Card del progetto */
.projects-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #FFFFFF; /* Sfondo bianco */
}

.projects-section h2 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 30px;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne uguali */
    gap: 40px; /* Distanza costante tra le immagini */
    margin: 0 auto;
    max-width: 1200px; /* Larghezza massima */
    padding: 0; /* Elimina eventuale padding */
}

.project-card {
    aspect-ratio: 16 / 9; /* Mantiene una proporzione rettangolare 16:9 */
    overflow: hidden; /* Nasconde le parti dell'immagine che escono */
    position: relative; /* Imposta la posizione relativa */
    margin: 0; /* Rimuove margini extra */
    border: none; /* Rimuove il bordo */
}

.project-card:hover {
    transform: scale(1.05);
}

.project-card img {
    width: 100%; /* L'immagine occupa l'intera larghezza della griglia */
    height: 100%; /* L'altezza segue automaticamente quella della griglia */
    object-fit: cover; /* Ritaglia e zoomma l'immagine per coprire lo spazio */
    display: block; /* Elimina spazi indesiderati */
    border-radius: 10px; /* Angoli arrotondati */
}


.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 74, 125, 0.8); /* Sfondo blu trasparente */
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.project-card:hover .project-info {
    opacity: 1;
}

.project-info h3, .project-info p {
    margin: 5px 0;
}

.project-link {
    display: inline-block;
    margin-top: 10px;
    color: #7BA941; /* Verde */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.project-link:hover {
    color: #0F4A7D; /* Blu */
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr; /* 1 colonna su schermi piccoli */
    }
}

/* Immagine Principale e Anteprime */
.project-main-image {
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px auto;
    max-width: 1200px;
}

.project-main-image .main-image {
    width: 100%;
    max-width: 1000px; /* Limita la larghezza massima */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Contenitore delle anteprime */
.thumbnails {
    display: flex; /* Disposizione in riga */
    justify-content: center; /* Centra le immagini */
    gap: 10px; /* Spazio tra le anteprime */
    overflow-x: auto; /* Scroll orizzontale se necessario */
    padding: 10px 0;
}

.thumbnails img {
    width: 100px; /* Larghezza delle anteprime */
    height: 70px; /* Altezza uniforme */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.thumbnails img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Linea Separatrice */
.separator {
    width: 80%;
    margin: 20px auto;
    border: none;
    border-top: 2px solid #0F4A7D; /* Blu */
}

/* Sezione Dettaglio Progetto */
.project-detail {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Griglia per la sezione Dettaglio Progetto */
/* Stile della tabella */
.detail-table {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse; /* Rimuove spazi extra tra celle */
    table-layout: fixed; /* Celle con larghezza fissa */
    text-align: left;
}

/* Stile delle celle */
.detail-table td {
    vertical-align: top; /* Allinea il contenuto in alto */
    padding: 20px; /* Spazio interno delle celle */
}

/* Descrizione del Progetto */
.project-description {
    width: 66.66%; /* Due terzi della larghezza */
    color: #333;
}

.project-description h1 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 10px;
}

/* Stile per le informazioni */
.project-info {
    width: 33.33%; /* Un terzo della larghezza */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-info p {
    margin: 5px 0;
    color: #333;
    font-size: 0.9rem;
}

/* Adattamenti per schermi piccoli */
@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr; /* Passa a layout a colonna singola */
        gap: 10px;
    }
}


/* Griglia delle Immagini */
.project-gallery-grid {
    padding: 30px 20px;
    text-align: center;
}

.project-gallery-grid h2 {
    color: #0F4A7D; /* Blu */
    margin-bottom: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
}

.gallery-grid img {
    width: 100%;
    height: 200px; /* Altezza uniforme */
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.gallery-grid img:hover {
    transform: scale(1.05); /* Effetto zoom al passaggio del mouse */
}


/*stili per la pagina contatti*/
.contact-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #ffffff;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}

.contact-form,
.contact-info {
    flex: 1 1 45%;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form label {
    font-weight: bold;
    color: #0F4A7D;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.contact-form button {
    background-color: #7BA941;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #0F4A7D;
}

.contact-info p {
    margin-bottom: 10px;
    color: #333;
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
}

.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
}

.form-group-full {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}

.contact-form-grid label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #0F4A7D;
}

.contact-form-grid input,
.contact-form-grid textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.contact-form-grid button {
    align-self: flex-start;
    background-color: #7BA941;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.contact-form-grid button:hover {
    background-color: #0F4A7D;
}


/* STILI AGGIUNTIVI PER LA PAGINA SERVIZI */
.services-section {
  padding: 50px 20px;
  max-width: 1200px;
  margin: auto;
}

.services-intro {
  text-align: center;
  margin-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.service-card {
  background: #f9f9f9;
  padding: 25px;
  border-left: 5px solid #7BA941;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.service-card h3 {
  color: #0F4A7D;
  margin-bottom: 15px;
}

.service-card ul {
  padding-left: 20px;
  list-style-type: disc;
}

.cta {
  text-align: center;
  margin-top: 50px;
}

.cta a {
  background: #7BA941;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
}

.cta a:hover {
  background: #0F4A7D;
}