.about_hero {
    height: 100dvh;
    /* border-box: il padding sta DENTRO i 100dvh, così non sfora la viewport. */
    box-sizing: border-box;
    background-image: url('https://trcigftf.elementor.cloud/wp-content/uploads/2026/09/chi-siamo_hero_desktop-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 6.944vw 5.556vw 6.944vw;
    display: flex;
    flex-direction: row;
    gap: 11.667vw;
    align-items: end;
}

.about_hero_sx {
    display: flex;
    flex-direction: column;
    gap: 2.5vw;

}

.about_hero_sx_top {
    display: flex;
    flex-direction: column;
    gap: 1.389vw;
}

.about_hero_sx_loghi {
    display: flex;
    flex-direction: row;
    gap: 1.389vw;
    width: 40.486vw;
}

.about_hero_dx {
    display: flex;
    flex-direction: row;

    white-space: nowrap !important;
    gap: 3.194vw;
}

.about_imprenditore {
    flex-direction: column;
    display: flex;
    gap: 9.583vw;
    padding: 13.125vw 6.944vw 15.833vw 6.944vw;
}

.about_imprenditore_title {
    display: flex;
    flex-direction: column;
    gap: 2.222vw;
    align-items: center;
    justify-content: center;
    padding: 0 6.944vw;
}

.about_imprenditore_bottom {
    gap: 1.597vw;
    display: flex;
    flex-direction: row;
}

.about_imprenditore_bottom_box {
    display: flex;
    flex-direction: column;
    gap: 4.514vw;
    padding: 0 2.222vw;
    align-items: start;
    border-left: 1px solid var(--giallo);
    width: 25%;
}

.about_imprenditore_bottom_box_text {
    display: flex;
    flex-direction: column;
    gap: 0.833vw;
}

.about_imprenditore_bottom_box_icona {
    width: 3.958vw;
}

.about_ecosistema {
    margin: 0 1.389vw;
    background-color: var(--nero);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 17.431vw;
    padding: 3.958vw 0 11.25vw 0;
}

.about_ecosistema_top {
    display: flex;
    flex-direction: column;
    gap: 14vw;
    padding: 0 0;
}

.about_ecosistema_top_testo {
    display: flex;
    flex-direction: row;
    gap: 8.889vw;
    justify-content: space-between;
    padding: 0 5.556vw;
}

.about_ecosistema_top_testo>:first-child {
    width: 56%;
}

.about_ecosistema_top_testo>*:nth-child(2) {
    width: 44%;
}

.about_ecosistema_img {
    margin-top: -3.4722vw;
    padding: 0 5.556vw;
    align-items: center;
    justify-content: center;
    display: flex;
}

.about_ecosistema_img>img {
    width: 49.8611vw;
}

.about_ecosistema_bottom {
    display: flex;
    flex-direction: column;
    gap: 4.236vw;
}

.about_ecosistema_bottom_testo {
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
    width: 58%;
    padding: 0 5.556vw;
}

/* --- Carosello "Chi siamo" (Splide) --- */

/* Taglia le card che escono, niente scrollbar. */
.about_ecosistema_bottom_carosello {
    overflow: hidden;
    width: 100%;
}

/* Il gap tra le card lo gestisce Splide, non il CSS.
   align-items: stretch pareggia tutte le slide sull'altezza della più alta. */
.about_carosello_list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* La slide è un contenitore flex in colonna: così la card dentro può crescere
   fino a riempirla, senza usare height:100% (che con Splide va in tilt). */
.about_carosello_slide {
    width: 20.486vw;
    flex-shrink: 0;
    /* niente restringimento: se no le slide si sovrappongono */
    display: flex;
    flex-direction: column;
}

/* La reverse-column vale SOLO qui: le .card della home restano invariate.
   flex: 1 => la card riempie la slide stirata => tutte stessa altezza. */
.about_ecosistema_bottom_carosello .card {
    flex-direction: column-reverse;
    flex: 1;
    justify-content: space-between;
}

.about_ecosistema_bottom_carosello .text-semi-bold {
    font-size: 2.778vw !important;
}

.about_sedi {
    margin: 1.111vw 1.389vw 0 1.389vw;
    border-radius: 16px;
    background: var(--grigio-chiaro);
    padding: 10.139vw 5.556vw;
    display: flex;
    flex-direction: row;
    gap: 8.681vw;
    align-items: center;
}

.about_sedi_testo {
    display: flex;
    gap: 1.667vw;
    flex-direction: column;
    width: 36%;
}

.about_sedi_imgs {
    display: flex;
    gap: 1.667vw;
    flex-direction: row;
    width: 64%;
}

.about_sedi_imgs>* {
    height: 28vw;
    border-radius: 16px;
    display: flex;
    justify-content: end;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100% !important;
    flex-direction: column;
    padding-bottom: 2.778vw;
}

.about_dipendenti {
    display: flex;
    flex-direction: column;
    gap: 5.625vw;
    padding: 10.764vw 6.944vw 5.556vw 6.944vw;
}

.about_dipendenti_title {
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
    padding: 0 13.889vw;
    align-items: center;
    text-align: center;
}

.about_dipendenti_lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 colonne su desktop */
    row-gap: 2.222vw;
    column-gap: 1.389vw;
}

.about_dipendenti_card {
    display: flex;
    flex-direction: column;
    gap: 1.25vw;
}

.about_dipendenti_card>img {
    width: 100%;
    /* riempie la cella della grid (1/4 desk, 1/2 mobile) */
    height: 26.25vw;
    /* altezza fissa: l'immagine riempie il box senza deformarsi */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
}

.about_dipendenti_card_testi {
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;

}

.about_dipendenti_card_testi>* {
    width: auto;
    text-align: center;
}

.about_carosello {
    display: flex;
    flex-direction: column;
    gap: 3.264vw;
    padding: 5.903vw 0 10.694vw 0;
}

.about_carosello>:first-child {
    padding-left: 6.944vw;
}

/* --- Carosello foto "La nostra quotidianità" (Splide) --- */

/* Taglia le slide che escono, niente scrollbar. */
.about_carosello_foto {
    overflow: hidden;
    width: 100%;
}

/* Il gap tra le slide lo gestisce Splide, non il CSS. */
.about_carosello_foto_list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Width fissa: decide quante slide si vedono (autoWidth di Splide). */
.about_carosello_foto_slide {
    width: 27.778vw;
}

/* L'immagine riempie la slide, altezza proporzionale, angoli arrotondati. */
.about_carosello_foto_slide>img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

@media screen and (max-width: 750px) {

    .about_dipendenti_lista {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colonne su mobile */
    }

    .about_dipendenti_card>img {
        height: 53.0769vw;
    }

    /* Solo mobile (e solo in Chi siamo, per via del selettore): allinea a sinistra. */
    .about_ecosistema_bottom_carosello .card {
        align-items: start;
    }

    .about_carosello_slide {
        width: 52.564vw;

    }

    .about_carosello_foto_slide {
        width: 60.769vw;
    }

    .about_hero {
        flex-direction: column;
        padding: 0 6.154vw 10.769vw 6.154vw;
        justify-content: end;
        gap: 9.744vw;
        align-items: start;
        background-image: url('https://trcigftf.elementor.cloud/wp-content/uploads/2026/09/chi-siamo_hero_mobile.jpg');

    }

    .about_hero_sx_top {
        gap: 2.8205vw;
    }

    .about_hero_sx_loghi {
        flex-wrap: wrap;
        width: 100%;
        gap: 5.128vw;
        align-items: start;
    }

    .about_hero_sx_loghi>img {
        height: 7.6923vw;
    }

    .about_hero_dx {
        gap: 2.051vw;
        align-items: center;
    }

    .about_imprenditore {
        padding: 15.385vw 6.154vw 25.641vw 6.154vw;
        gap: 15.385vw;
    }

    /* Eccezione SOLO per questo elemento: non tocca la classe footer_menu_title. */
    .about_imprenditore_label {
        font-size: 3.077vw !important;
    }

    .about_imprenditore_title {
        gap: 5.385vw;
        align-items: start;
        padding: 0;
    }

    .about_imprenditore_title>div {
        text-align: start !important;
    }

    .about_imprenditore_bottom {
        flex-direction: column;
        gap: 0;
    }

    .about_imprenditore_bottom_box {
        padding: 6.154vw 0;
        border-bottom: 1px solid var(--giallo);
        border-left: 0;
        gap: 6.154vw;
        flex-direction: row;
        width: 100%;
    }

    .about_imprenditore_bottom_box:nth-child(4) {
        border: none;
    }

    .about_imprenditore_bottom_box_icona {
        width: 10.256vw;
    }

    .about_imprenditore_bottom_box_text {
        gap: 1.538vw;
    }

    .about_imprenditore_title>:first-child {
        width: 156px;
    }

    .about_ecosistema {
        margin: 0 2.564vw;
        gap: 18.462vw;
        padding: 10.256vw 0 15.385vw 0;
    }

    .about_ecosistema_top {
        gap: 18.462vw;
        padding: 0 6.154vw;
    }

    .about_ecosistema_top_testo {
        flex-direction: column;
        width: auto;
        gap: 4.103vw;
    }

    .about_ecosistema_top_testo>:first-child,
    .about_ecosistema_top_testo>*:nth-child(2) {
        width: 100%;
    }

    .about_ecosistema_bottom {
        gap: 15.385vw;
    }

    .about_ecosistema_bottom_testo {
        width: auto;
        padding: 0 6.154vw;
        gap: 4.103vw;
    }

    .about_sedi {
        margin: 4.103vw 2.564vw 0 2.564vw;
        flex-direction: column;
        gap: 8.205vw;
        padding: 10.256vw 6.1538vw;
    }

    .about_sedi_testo {
        width: 100%;
    }

    .about_ecosistema_img {
        margin-top: 0;
    }

    .about_ecosistema_img>img {
        width: 83vw;
    }

    .about_sedi_imgs {
        width: 100%;
    }

    .about_sedi_imgs>.text-title-big {
        font-size: 6vw !important;
    }

    .about_sedi_testo {
        gap: 4.103vw;
    }

    .about_sedi_imgs {
        gap: 3.077vw;
    }

    .about_sedi_imgs>* {
        height: 37vw;
        padding-bottom: 4.615vw;
    }

    .about_dipendenti {
        padding: 25.641vw 6.41vw 12.821vw 6.41vw;
        gap: 10.256vw;
    }

    .about_dipendenti_title {
        padding: 0;
        gap: 4.103vw;
    }

    .about_dipendenti_lista {
        row-gap: 5.128vw;
        column-gap: 5.128vw;
    }

    .about_dipendenti_card {
        gap: 2.564vw;
    }

    .about_carosello {
        padding: 12.821vw 0 25.641vw 0;
        gap: 5.897vw;
    }

    .about_carosello>:first-child {
        padding-left: 6.41vw;
    }

    .about_ecosistema_bottom_carosello .text-semi-bold {
        font-size: 7.1795vw !important;
    }
}