:root {
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    --backgroundColor: ;
    --mainColor: #2c2c2c;
    --secondaryColor: #D9D9D9;
    --thirdiaryColor: #EDEDED;
    --mainFont: 'Work Sans', sans-serif;
    --secondaryFont: var(--mainFont);
    --white: #ffffff;
    --black: #000000;
    --fontMargin: 0;
    --fontPadding: 0;
    --fontLineHeight: 1.19em;
    --h1SizeDesktop: 3rem;
    --h1SizeMobile: 2rem;
    --h1Weight: 400;
    --h2SizeDesktop: 2.25rem;
    --h2SizeMobile: 1.75rem;
    --h2Weight: 400;
    --h3SizeDesktop: 1.5rem;
    --h3Weight: 400;
    --h4SizeDesktop: 1.3rem;
    --h4Weight: 400;
    --textSizeDesktop: 1rem;
    --textWeight: 400;
    --textMargin: 0;
    --textPadding: 0;
    --ctaSizeDesktop: 0.8rem; 
    --ctaWeight: 400;
    --ctaColor: var(--mainColor);
    --subtitleSizeDesktop: 0.8rem;
    --subtitleWeight: 400;
    --semiBoldWeight: 600;
    --headerSectionBorderRadius: 0 0 200px 0;
    --bodyMargin: 0;
    --bodyPadding: 0;
    --sectionMargin: 0;
    --mainSectionPadding: 20vh 15vw 20vh 15vw;
    --finalSectionPadding: 0 5vw 15vh 5vw;
    --subSectionPadding: 24px 0 24px 0;
    --heroSectionPadding: 48px 15vw 48px 15vw;
    --accordionTextPadding: 12px;
    --mobileMenuPadding: 10vh 5vw 5vh 5vw;
    --mobileHeaderPadding: 2vh 5vw 2vh 5vw;
    --mobileBodyPadding: 10vh 5vw 10vh 5vw;
    --mobileHeroPadding: 5vh 5vw 5vh 5vw;
    --sectionGap: 24px;
    --innerSectionTitlesGap: 48px;
    --heroBannerMargin: 48px 5vw 48px 5vw;
    --heroBannerMarginTopBot: 48px 0;
    --heroBannerPadding: 90px 0 90px 0;
    --siteBorderRadius: 12px;
    --buttonBorderRadius: 24px;
    --buttonPadding: 6px 24px 6px 24px;
    --buttonWidth: fit-content;
    --buttonBackgroundColor: ;
    --buttonBorderAddColor: solid 1px;
    --buttonBorderHover: solid 1px var(--white);
    --innerPageHeroHeight: 800px;
    --innerPageHeroImgContainerHeight: 640px;
    --innerPageHeroImgContainerWidth: 620px;
    --innerPageHeroSmallBoxImgContainerBorderRadius: 12px 12px 12px 12px;
    --innerPageHeroImgContainerBorderRadius: 12px 12px 12px 120px;
    --innerPageSubHeroImgContainerBorderRadius: 12px 120px 12px 12px;
    --newsPageHeroImgContainerBorderRadius: 12px 12px 120px 12px;
    --servicePageImageContainerLeft: 12px 12px 120px 12px;
    --servicePageImageContainerRight: 120px 12px 12px 12px;
    --sectionTitleMarginBot: 48px;
    --photoContainerWidth: 411px;
    --photoContainerHeight: 408px;
    --smallPhotoContainerHeight: 84px;
    --smallPhotoContainerWidth: 84px;
    --smallPhotoContainerBorderRadius: 42px;
}

body {
    margin: var(--bodyMargin);
    padding: var(--bodyPadding);
    overflow-x: hidden;
    background-color: var(--white, #FFFFFF);
}

.watto-main {
    padding: var(--bodyPadding);
}

#watto-header-mobile {
    display: none;
}

#watto-footer-mobile {
    display: none;
}

h1 {
    display: flex;
    font-size: var(--h1SizeDesktop, 3em);
    font-weight: var(--h1Weight, 400);
    line-height: var(--fontLineHeight, 1.19em);
    margin: var(--textMargin);
}

h2 {
    font-size: var(--h2SizeDesktop, 2.25em);
    font-weight: var(--h2Weight, 400);
    line-height: var(--fontLineHeight, 1.19em);
    margin: var(--textMargin);
}

h3 {
    font-size: var(--h3SizeDesktop, 1.5em);
    font-weight: var(--h3Weight, 400);
    line-height: var(--fontLineHeight, 1.19em);
    margin: var(--textMargin);
}

h4 {
    font-size: var(--h4SizeDesktop, 1.3em);
    font-weight: var(--h4Weight, 400);
    line-height: var(--fontLineHeight, 1.19em);
    margin: var(--textMargin);
}

p {
    font-size: var(--textSizeDesktop, 1em);
    font-weight: var(--textWeight, 400);
    line-height: var(--fontLineHeight, 1.19em);
    margin: var(--textMargin);
    padding: var(--textPadding);
}

a {
    font-weight: 500;
    line-height: var(--fontLineHeight, 1.19em);
    text-decoration: none;
    color: var(--secondaryColor);
    margin: var(--textMargin);
    padding: var(--textPadding);
}

.watto-megamenu-link {
    font-size: var(--h3SizeDesktop);
}

.watto-CTA {
    font-size: var(--ctaSizeDesktop);
}

.watto-accordion {
    width: 100%;
}

.watto-accordion-item {
    margin-bottom: 5px;
}

.watto-accordion-item-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--thirdiaryColor);
    cursor: pointer;
    border-bottom: var(--buttonBorderAddColor);
    z-index: 1;
    padding: var(--accordionTextPadding);
}

.watto-accordion-item-content {
    display: none;
    max-height: 0;
    transition: max-height 1s ease;
    padding: var(--accordionTextPadding);
    background-color: var(--white);
}

.watto-accordion-item-content.active {
    display: block; 
    max-height: 1000px;
}

.flex-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 0 0 0;
    z-index: 0;
}

.watto-inner-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--innerSectionTitlesGap)
}

.watto-final-section {
    position: relative;
    overflow: visible;
    min-height: 40vh;
    padding: var(--finalSectionPadding);
}

li {    
    font-size: var(--textSizeDesktop, 1em);
    font-weight: var(--textWeight, 400);
    line-height: var(--fontLineHeight, 1.19em);
}

form {
    margin: 0;
    padding: 0;
}

#preloader {
    position: fixed;
    inset: 0;
    background: var(--backgroundColor);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.megamenu {
    z-index: 2;
}

.watto-body {
    display: flex;
    flex-direction: column;
    padding: var(--mainSectionPadding);
    min-height: 50vh;
    gap: var(--sectionGap)
}

.watto-inner-page-hero-section {
    padding: var(--heroSectionPadding);
    display: flex;
    flex-direction: column;
    gap: var(--sectionGap);
    align-items: center;
    background-color: var(--thirdiaryColor);
    color: var(--mainColor);
    min-height: 20vh;
}

.watto-content-container {
    margin-bottom: var(--sectionMarginBot, 20vh);
}

.watto-inner-page-hero-section-info { 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sectionGap)
}

.watto-inner-page-hero-section-info-container {
    width: 50%;
}

.watto-inner-page-hero-section-image-container {
    background-color: var(--secondaryColor);
    height: var(--innerPageHeroImgContainerHeight);
    width: var(--innerPageHeroImgContainerWidth);
    border-radius: var(--innerPageHeroImgContainerBorderRadius);
    overflow: hidden;
}

.watto-inner-page-sub-hero-section-info {
    display: flex;
    flex-direction: row;
    gap: var(--sectionGap);
}

.watto-inner-page-sub-hero-section-image-container {
    background-color: var(--secondaryColor);
    height: var(--innerPageHeroImgContainerHeight);
    width: var(--innerPageHeroImgContainerWidth);
    border-radius: var(--innerPageSubHeroImgContainerBorderRadius);
    overflow: hidden;
}

.watto-dark-button {
    color: var(--white, white);
    text-decoration: none;
    background-color: var(--mainColor, black);
    padding: var(--buttonPadding, 6px 24px 6px 24px);
    border-radius: var(--buttonBorderRadius, 24px);
    border: var(--buttonBorderAddColor) var(--mainColor, black);
    font-size: var(--ctaSizeDesktop, 1rem);
    font-weight: var(--ctaWeight, 600);
    line-height: var(--fontLineHeight, 1.19em);
    width: fit-content;
}

.watto-light-button {
    color: var(--mainColor, white);
    text-decoration: none;
    background-color: var(--secondaryColor, white);
    padding: var(--buttonPadding, 6px 24px 6px 24px);
    border-radius: var(--buttonBorderRadius, 24px);
    border: var(--buttonBorderAddColor) var(--secondaryColor, white);
    font-size: var(--ctaSizeDesktop, 1rem);
    font-weight: var(--ctaWeight, 600);
    line-height: var(--fontLineHeight, 1.19em);
    width: fit-content;
}

.watto-white-button {
    color: var(--mainColor, white);
    text-decoration: none;
    background-color: var(--white, white);
    padding: var(--buttonPadding, 6px 24px 6px 24px);
    border-radius: var(--buttonBorderRadius, 24px);
    border: var(--buttonBorderAddColor) var(--white, white);
    font-size: var(--ctaSizeDesktop, 1rem);
    font-weight: var(--ctaWeight, 600);
    line-height: var(--fontLineHeight, 1.19em);
    width: fit-content;
}

/*================================================
============CAMBIA I COLORI ======================
=================================================*/

.watto-dark-button:hover {
    text-decoration: none;
    color: var(--mainColor);
    background-color: var(--white, white);
    border: var(--buttonBorderAddColor) var(--mainColor);
    cursor: pointer;
}

.watto-light-button:hover {
    text-decoration: none;
    color: var(--mainColor);
    background-color: var(--mainColor, white);
    border: var(--buttonBorderAddColor) var(--secondaryColor);
    cursor: pointer;
}

.watto-white-button:hover {
    text-decoration: none;
    color: var(--white, white);
    background-color: var(--mainColor);
    border: var(--buttonBorderAddColor) var(--secondaryColor);
    cursor: pointer;
}

.watto-internal-page-dark-background {
    margin: 0;
    background-color: var(--thirdiaryColor);
}

.watto-internal-page-white-background {
    position: relative;
    margin: 0;
    background-color: var(--white, #ffffff);
}

.watto-second-section-content, .watto-third-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--sectionGap, 24px);
}

.watto-third-section-content-image-container {
    height: var(--photoContainerHeight);
    width: var(--photoContainerWidth);
    border-radius: var(--siteBorderRadius);
    background-color: var(--thirdiaryColor);
    overflow: hidden;
}

.watto-fourth-section-content-image-container {
    width: var(--smallPhotoContainerWidth);
    height: var(--smallPhotoContainerHeight);
    background-color: var(--secondaryColor);
    border-radius: var(--smallPhotoContainerBorderRadius, 42px);
    overflow: hidden;
}

/* Per il menu mobile, animazione di apertura e chiusura */
.height-zero {
    height: 0;
}

.height-auto {
    height: auto;
}

.watto-fourth-section-carousel {
    background-color: var(--thirdiaryColor);
    border-radius: var(--siteBorderRadius);
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.watto-fourth-section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sectionGap);
    min-width: 100%;
    box-sizing: border-box;
    padding: 10vh 30%;
}

.carousel-arrow {

    width: 94px;
    height: 94px;
    border-radius: 47px;

    background-color: rgba(255, 255, 255, 0);

    border: var(--buttonBorderAddColor) var(--mainColor);
    cursor: pointer;

}

.carousel-arrow.left {
    left: 15%;
}

.carousel-arrow.right {
    right: 15%;
}

.carousel-arrow:hover {
    opacity: 1;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--mainColor);
}

.related-separator {
    border: none;
    height: 2px;
    background-color: var(--mainColor);
    margin: 12px 0 12px 0;
    padding: 0;
    opacity: 0.2;
}

/* @media screen and (max-width: 768px) {

    #watto-header-desktop,
    #watto-footer-desktop {
        display: none;
    }

    #watto-header-mobile,
    #watto-footer-mobile {
        display: flex;
    }
} */

@media screen and (max-width: 768px) {
    .watto-body {
        padding: var(--mobileBodyPadding);
    }

    .watto-inner-page-hero-section {
        flex-direction: column;
        padding: var(--mobileHeroPadding);
    }

    .watto-inner-page-hero-section-info {
        flex-direction: column-reverse;
    }

    .watto-inner-page-hero-section-image-container, .watto-inner-page-hero-section-info-container {
        width: 100%;
    }

    .watto-inner-page-sub-hero-section-info {
        flex-direction: column;
    }

    .watto-inner-page-sub-hero-section-image-container {
        width: 100%;
    }

    .watto-fourth-section-content {
        padding: 5vh 5%;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;
    }

    .carousel-arrow svg {
        width: 26px;
        height: 12px;
    }

    .carousel-arrow.right {
        right: 0;
    }

    .carousel-arrow.left {
        left: 0;
    }

    .flex-section {
        gap: var(--sectionGap)
    }
}