/* Stili per la home page */
#watto-home-contact-bubble {
    position: sticky;
    top: 18px;

    /* posizionamento a destra */
    margin-left: auto;
    margin-right: 72px;
    margin-top: 18px;

    /* dimensioni */
    height: 70px;
    width: 70px;
    border-radius: 50%;

    /* stile */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mainColor, black);

    z-index: 10;
}

#watto-home-hero-section {
    display: flex;
    justify-content: space-around;
    height: 78vh;
}

#watto-home-hero-banner {
    /*CAMBIARE IN PRODUZIONE*/
    height: 20vh;
    background-color: var(--secondaryColor);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    color: var(--white, white);
    gap: 24px;
    overflow: hidden;
    padding: 124px 48px 124px 48px;
}

#watto-home-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mainColor);
    mix-blend-mode: hue;
    z-index: 1;
    pointer-events: none;
}


#watto-home-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#watto-home-hero-content {
    display: flex;
    flex-direction: row;
    gap: 48px;
}

#watto-home-hero-banner-title {
    max-width: 40%;
}

#watto-home-hero-content-text-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

#watto-home-hero-banner-button {
    align-self: flex-start;
}

#watto-home-services-section-carousel-button {
    align-self: flex-end;
}

#watto-home-button-section-top-row,
#watto-home-button-section-bot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

#watto-home-button-section-bot-row>.last-section-buttons {
    width: 30%;
}

#watto-home-button-section-top-row>.last-section-buttons {
    width: 50%;
}

#watto-home-hero-scroller {
    position: relative;
    bottom: 47px;
    left: 90%;
    border: var(--buttonBorderAddColor) var(--mainColor);
    width: 94px;
    height: 94px;
    border-radius: 47px;
    background-color: rgba(255, 255, 255, 0);
    z-index: 1;
}

#watto-home-hero-scroller i {
    font-size: 64px;
}

/* SEZIONE SERVICES (anche se si chiama services)*/

#watto-home-services-div {
    margin-top: -112px;
}

#watto-home-services-section {
    height: 60vh;
}

.services-carousel-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    margin: 0;
}

.services-carousel {
    gap: 12px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* Distribuisce le schede */
    overflow-x: auto;
}

.services-card {
    background-color: var(--secondaryColor);
    width: 411px;
    height: 432px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.services-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--sectionGap, 24px);
    margin: 11px 14px;
    color: var(--white);
    font-family: var(--mainFont);
}

.services-card-date {
    font-size: 0.9vw;
    font-weight: 300;
}

.services-card-title {
    font-size: 1.1vw;
    font-weight: 500;
    margin-top: 5px;
}

/*FINE SEZIONE SERVICES*/

#watto-home-chi-siamo-section {
    position: relative;
    overflow: visible;
    min-height: 80vh;
}

#watto-home-chi-siamo-text,
#watto-home-chi-siamo-image-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
}

#watto-home-chi-siamo-text {
    left: -50vw;
    z-index: 3;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    gap: var(--sectionGap);
    padding: 5% 1% 5% 1%;
    color: var(--white, white);
    background-color: var(--mainColor);
    border-radius: var(--siteBorderRadius);
}

#watto-home-chi-siamo-image-container {
    right: -50vw;
    z-index: 1;
    height: 80vh;
    /*CAMBIARE QUANDO ESISTE UNA IMMAGINE */
    width: 70%;
    background-color: var(--secondaryColor);
    border-radius: 200px 12px 12px 12px;
}

#watto-home-button-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}



#watto-home-button-section-top-row>.last-section-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--white, #ffffff);
    color: var(--mainColor, #4358A3);
    border-radius: 12px;

    padding: 24px;
    text-decoration: none;
}

#watto-home-button-section-bot-row>.last-section-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--white, #ffffff);
    color: var(--mainColor, #4358A3);
    border-radius: 12px;

    padding: 24px;
    text-decoration: none;
}

.last-section-buttons {
    transition: transform .2s, box-shadow 0.2s;

}

.last-section-buttons:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 5px var(--black);
}

#last-section {
    display: flex;
    flex-direction: column;
}



/*FINAL SECTION*/


#watto-home-final-section-text,
#watto-home-final-section-image-container {
    position: absolute;
    top: 50%;

    transition: transform 0.1s linear;
}

#watto-home-final-section-image-container-mobile {
    display: none;
}

.watto-home-final-section-right-content-container {
        box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sectionGap);
    right: -50vw;
    z-index: 1;
    height: 50vh;
}

#watto-home-final-section-text {

    padding: 0 10% 0 20%;
    width: 70%;
    background-color: var(--secondaryColor);
    border-radius: var(--siteBorderRadius);

}

.watto-home-final-section-image-container {
    height: 50vh;
    left: -50vw;
    z-index: 3;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: var(--sectionGap);
    color: var(--white, white);
    background-color: var(--mainColor);
    border-radius: 12px 200px 12px 12px;
}

@media screen and (max-width: 768px) {
    #watto-home-hero-banner {
        padding: 48px 24px 48px 24px;
    }

    #watto-home-hero-banner-title {
        max-width: 100%;
    }

    #watto-home-hero-banner-text {
        max-width: 100%;
    }

    #watto-home-hero-content,
    #watto-home-hero-content-text-cta {
        flex-direction: column;
        gap: var(--sectionGap)
    }

    #watto-home-hero-scroller {
        left: 75%;
    }

    #watto-home-contact-bubble {
        display: none;
    }

    #watto-home-chi-siamo-text {
        max-width: 80%;
    }

    #watto-home-chi-siamo-image-container {
        max-width: 80%;
    }

    #watto-home-announcements-section {
        flex-direction: column;
    }

    .announcements-container {
        width: auto;
    }

    .events-carousel-icon {
        width: 34px;
        /* Dimensione icona per dispositivi mobili */
    }

    .events-carousel-title {
        font-size: 32px;
        /* Dimensione font per dispositivi mobili */
    }

    #watto-home-services-section-carousel-button {
        align-self: flex-start;
    }

    #watto-home-button-section-top-row,
    #watto-home-button-section-bot-row {
        flex-direction: column;
    }

    #watto-home-button-section-bot-row>.last-section-buttons {
        width: 90%;
    }

    #watto-home-button-section-top-row>.last-section-buttons {
        width: 90%;
    }

    .services-carousel-container {
        width: 100vw;
        /* Usa tutta la larghezza disponibile */
        padding: 0 0;
        /* Mantiene margini laterali */
    }

    .services-carousel {
        flex-wrap: nowrap;
        /* Impedisce che le schede vadano a capo */
        gap: 12px;
        overflow-x: scroll;
        /* Permette il touch scroll */
    }

    .services-card {
        flex: 0 0 90%;
        /* Mantiene le schede leggibili */
        max-width: 90vw;
        min-width: 280px;
        height: 400px;
    }

    .services-card-date {
        font-size: 16px;
    }

    .services-card-title {
        font-size: 24px;
    }

    #watto-home-final-section-left {
        display: none;
    }

    #watto-home-final-section-right {
        display: flex;
        flex-direction: column;
    }

    #watto-home-final-section-image-container-mobile {
        display: block;
    }
}