#sticky-header{
position: fixed!important;
width: 100%;
top:0px!important;
}
.sticky {
background-color:#295E67!important;    
transition: all 0.6s ease;	
border-bottom:1px solid #E2DCD2;
}
.lang-item img{
    width: 20px!important;
    height: 14px!important;
}
.hero-home{
    margin-top:85px;
    min-height: calc(100vh - 85px);
}


.hero-z {
    position: relative;
    overflow: hidden;
    background-color: #295E67;
}

.hero-z::before {
        content: "";
    position: absolute;
    top: 0px;
    left: unset;
    width: 41%;
    height: 100%;
    /* background-image: url(/wp-content/uploads/2026/09/zaccardi-z-filigrana.svg); */
    background-image: url(/wp-content/uploads/2026/09/zaccardi-z-oro.svg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    right: -6%;
}

/* il contenuto deve stare sopra la filigrana */
.hero-z > .e-con-inner {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Hero — filigrana Z che si disegna al caricamento
   Il container dell'hero ha la classe hero-zanimate
   ========================================================================== */
.z-disegno {
    position: absolute;
    right: -6%;
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    height: 110%;
    width: auto;
    aspect-ratio: 1474 / 1791;
    display: block;
    opacity: 1;
}

.hero-zanimate {
    position: relative;
    overflow: hidden;
}

/* il wrapper del widget HTML non deve fare da riferimento:
   è alto zero e ci schiaccia dentro lo strato */
.hero-zanimate .elementor-widget-html {
    position: static;
}

/* il contenuto sale sopra la filigrana, uno per uno,
   così .e-con-inner resta non posizionato */
.hero-zanimate > .e-con-inner > *:not(.elementor-widget-html) {
    position: relative;
    z-index: 2;
}

@keyframes z-traccia { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes z-riempi  { from { opacity: 0; } to { opacity: 1; } }

.z-traccia { stroke-dasharray: 100; animation: z-traccia 2.4s cubic-bezier(.65, 0, .35, 1) both; }
.z-riempi  { animation: z-riempi 1.2s ease-out 1.6s both; fill: #fff;}

@media (max-width: 767px) {
    .z-disegno {
        right: -22% !important;
        top: auto !important;
        bottom: -4% !important;
        transform: none !important;
        height: 52% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .z-traccia, .z-riempi { animation: none; }
}
/* Foto in bianco e nero, colore al passaggio del mouse */

@media (hover: hover) {
    .img-bn {
        filter: grayscale(1);
        transform: scale(1);
        transition: filter .5s ease, transform .5s ease;
    }

    .img-bn:hover {
        filter: grayscale(0);
        transform: scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .img-bn {
        transition: none;
    }
    .img-bn:hover {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .hero-z::before {
        top: auto;
        left: auto;
        bottom: 0%;
        right: -12%;
        width: 85%;
        height: 55%;
        background-position: right bottom;
        opacity: .4;
    }
    .z-disegno {
        top: auto;
        left: auto;
        bottom: 0;
        right: -12%;
        transform: none;
        height: 65%;
        opacity: .4;
    }
}

@media (max-width: 767px) {
    .hero-z::before {
        width: 80%;
    }
    .z-disegno {
        height: 55%!important;
        right: -15%!important;
        bottom:-1%!important;
    }
}