/* ------------------------------------------------- HTML Elements -------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */



:root {
    --background-color: #39383E;
    /* --wrapper-width: 1500px;  questa classe commentata mi elimina il bordo grigio ai lati */
    --e-container-max-width: 1500px;
    --large-boxed-width: 1300px;
    --boxed-width: 1000px;
}

/* ????????? */
* {
    /* max-width: 99dvw; */
}

html,
body {
    height: 100%; 
    /* max-width: 100%!important;  */
}

body {
    background: linear-gradient(90deg, transparent 0%, white 25%, white 75%, transparent 100%), url('/wp-content/uploads/2025/09/sfondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    /* background-repeat: repeat-y; */
}
@media (min-width: 767px) {
    main{
        padding-top: 10em;
    }
}
@media (max-width: 767px) {
    main{
        padding-top: 6em;
    }
}

h2>em,
h3>em,
h4>em,
h5>em,
h6>em {
    color: var(--e-global-color-primary);
    font-style: normal;
}

h2.bullet-point::before,
h3.bullet-point::before,
h4.bullet-point::before,
h5.bullet-point::before,
h6.bullet-point::before {
    content: '';
    width: 0;
    height: 0;
    border-radius: 100%;
    background-color: var(--e-global-color-primary);
    display: block;
    position: relative;
    left: -30px;
    top: 30px;
}

h2.bullet-point,
h3.bullet-point,
h4.bullet-point,
h5.bullet-point,
h6.bullet-point {
    margin-left: 20px;
}


.bullet-point h2::before,
.bullet-point h3::before,
.bullet-point h4::before,
.bullet-point h5::before,
.bullet-point h6::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: var(--e-global-color-primary);
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 8px;
}

.bullet-point h2,
.bullet-point h3,
.bullet-point h4,
.bullet-point h5,
.bullet-point h6 {
    margin-left: 30px;
}


/* ---------------------------------------------------- Classes ----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */


.dialog-lightbox-message img{
    background-color: white;
}

.shape-divider img {
    /* filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.40));
    max */
    margin: 0 auto !important;
    width: 100%;
    z-index: 1 !important;
}

.black-band-left,
.black-band-right {
    position: fixed;
    background-color: var(--background-color);
    width: 0;
    height: 100%;
    top: 0;
    /* background-image: url('/wp-content/uploads/2025/09/hex_sfondo_black.png'); */
    background-size: 250%;
    z-index: 5;

}

.black-band-left::before,
.black-band-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--e-global-color-text);
    /* background-image: url('/wp-content/uploads/2025/09/hex_sfondo_black.png'); */
    /* background-size: 200%; */
    /* opacity: 8%; */
    /* nero al 50% di opacità */
}

.black-band-left::before {
    /* box-shadow: inset -8px 0 25px 0px rgba(0, 0, 0, 1); */
}

.black-band-right::before {
    /* box-shadow: inset 8px 0 25px 0px rgba(0, 0, 0, 1); */
}

.black-band-right {
    right: 0;
}


@media (min-width: 1460px) {

    /* … */
    .black-band-left,
    .black-band-right {
        width: calc((100dvw - var(--wrapper-width)) / 2);
    }
}

.boxed {
    margin: 0 auto !important;
    width: var(--boxed-width) !important;
}

.large-boxed {
    margin: 0 auto !important;
    width: var(--large-boxed-width) !important;
}

.boxed {
    margin: 0 auto !important;
    max-width: var(--boxed-width);
}


.large-shadow {
    box-shadow: 10px 15px 60px rgba(0, 0, 0, 0.25);
}

.large-shadow-img {
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
}


/* --------------------------------------------------- Animazioni --------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

.custom-animation-floating {
    animation: custom-animation-floating 3s ease-in-out infinite;
}

@keyframes custom-animation-floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.custom-animation-floating-sm {
    animation: custom-animation-floating-sm 5s ease-in-out infinite;
}

@keyframes custom-animation-floating-sm {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}


.custom-animation-pulse {
    animation: custom-animation-pulse 5s ease-in-out infinite;
}

@keyframes custom-animation-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* --------------------------------------------------- Header Logo Switching -------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Forza logo piccolo sempre - sovrascrive Elementor */
header .headerimg {
    display: none !important;
}

header .headerimgsm {
    display: block !important;
}

/* Ombra permanente sull'header */
header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Transizione smooth sul container */
.headercontainer {
    transition: all 0.3s ease;
}


/* Forza header piccolo sempre - applica stili menuMinor anche senza scroll */
.headerbackground {
    background-color: white !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    box-shadow: 0px 2px 5px #00000026 !important;
}

/* Fix FOUC colore menu homepage:                                                        */
/* Il menu è disegnato con testo chiaro (per header su hero scuro). Sulla homepage       */
/* il hero è nascosto da subito via CSS, ma JS aggiunge menuMinor con un leggero ritardo */
/* → i link appaiono grigi/bianchi su sfondo bianco finché Elementor non è pronto.       */
/* Solo da 1025px+: sotto quella soglia Elementor mostra il menu hamburger (mobile/tablet)*/
@media (min-width: 1025px) {
    body.home header .elementor-nav-menu .elementor-item,
    body.home header .elementor-nav-menu .elementor-item:focus,
    body.home header .elementor-nav-menu .elementor-item:visited {
        color: var(--e-global-color-text) !important;
    }
    /* Fix icona freccia sub-menu (.sub-arrow): su homepage è quasi invisibile (grigio chiaro) */
    /* perché eredita il colore di Elementor invece del testo scuro del menu.                  */
    body.home header .elementor-nav-menu .sub-arrow,
    body.home header .elementor-nav-menu .sub-arrow svg {
        color: var(--e-global-color-text) !important;
        fill: var(--e-global-color-text) !important;
        opacity: 1 !important;
    }
}

/* Fix menu mobile/tablet homepage (≤1024px): Elementor usa il menu hamburger fino a     */
/* 1024px, quindi mobile E tablet devono avere testo bianco (sfondo blu).                */
@media (max-width: 1024px) {
    body.home header .elementor-nav-menu--mobile .elementor-item,
    body.home header .elementor-nav-menu--mobile .elementor-item:focus,
    body.home header .elementor-nav-menu--mobile .elementor-item:visited,
    body.home header .elementor-nav-menu--mobile a.elementor-item {
        color: white !important;
    }
    /* Icona freccia sottovoci (sub-arrow) bianca su mobile/tablet homepage */
    body.home header .elementor-nav-menu--mobile .sub-arrow,
    body.home header .elementor-nav-menu--mobile .sub-arrow svg {
        color: white !important;
        fill: white !important;
        opacity: 1 !important;
    }
}

/* Sfondo blu unificato per il menu dropdown/mobile:                                     */
/* Il prefisso "header" aumenta la specificità e mantiene il colore corretto              */
/* sia con che senza la classe menuMinor (aggiunta/rimossa dal JS allo scroll).           */
/* Sfondo blu solo per il menu hamburger (mobile/tablet) */
header .elementor-nav-menu--mobile,
header .elementor-nav-menu--mobile ul {
    background-color: #052B5C !important;
}

/* Sfondo bianco per il dropdown desktop (sottovoci) */
header .elementor-nav-menu--dropdown,
header .elementor-nav-menu--dropdown ul {
    background-color: white !important;
}

/* Testo scuro (colore testo globale) per le voci del dropdown desktop                    */
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item,
header .elementor-nav-menu--dropdown .elementor-item,
header .elementor-nav-menu--dropdown .elementor-sub-item,
header nav.elementor-nav-menu--dropdown a.elementor-item,
header nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    color: var(--e-global-color-text) !important;
}

/* Testo bianco per le voci del menu hamburger (mobile/tablet - sfondo blu)               */
/* Copre tutti gli stati possibili compreso quando il sottomenu è aperto                  */
header .elementor-nav-menu--mobile .elementor-item,
header .elementor-nav-menu--mobile .elementor-sub-item,
header .elementor-nav-menu--mobile a.elementor-item,
header .elementor-nav-menu--mobile a.elementor-sub-item,
header .elementor-nav-menu--mobile a.elementor-item:link,
header .elementor-nav-menu--mobile a.elementor-item:visited,
header .elementor-nav-menu--mobile a.elementor-item:hover,
header .elementor-nav-menu--mobile a.elementor-item:active,
header .elementor-nav-menu--mobile a.elementor-item:focus,
header .elementor-nav-menu--mobile li.e--open > a.elementor-item,
header .elementor-nav-menu--mobile li.e--open > a,
header .elementor-nav-menu--mobile .elementor-item.elementor-item-active,
header .elementor-nav-menu--mobile .elementor-item.highlighted,
header .elementor-nav-menu--mobile .has-submenu.e--open > .elementor-item {
    color: white !important;
}

/* Icona freccia sottovoci (sub-arrow) bianca su tutte le pagine nel menu mobile/tablet  */
header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow,
header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow svg,
header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow svg path,
header .elementor-nav-menu--mobile .sub-arrow,
header .elementor-nav-menu--mobile .sub-arrow svg,
header .elementor-nav-menu--mobile .sub-arrow svg path {
    color: white !important;
    fill: white !important;
    opacity: 1 !important;
}
@media (max-width: 1024px) {
    header .elementor-nav-menu--mobile .sub-arrow .e-font-icon-svg,
    header .elementor-nav-menu--mobile .sub-arrow .e-fas-caret-down,
    header .elementor-nav-menu--mobile .sub-arrow .e-font-icon-svg path,
    header .elementor-nav-menu--mobile .sub-arrow .e-fas-caret-down path,
    header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow .e-font-icon-svg,
    header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow .e-fas-caret-down,
    header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow .e-font-icon-svg path,
    header .elementor-widget-nav-menu .elementor-nav-menu--mobile .sub-arrow .e-fas-caret-down path {
        color: white !important;
        fill: white !important;
        opacity: 1 !important;
    }
}

/* Hover sottovoci dropdown desktop */
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item:hover,
header .elementor-nav-menu--dropdown .elementor-sub-item:hover {
    color: white !important;
    background-color: #24526f !important;
}

/* Hover sottovoci menu mobile/tablet */
header .elementor-nav-menu--mobile .elementor-sub-item:hover {
    color: white !important;
    background-color: #24526f !important;
}

/* Hover voci principali nel menu mobile/dropdown (solo colore testo, nessun background) */
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:hover,
header .elementor-nav-menu--dropdown .elementor-item:hover,
header .elementor-nav-menu--mobile .elementor-item:hover {
    color: white !important;
}

/* Sottovoce attiva (current page) nel dropdown desktop */
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active,
header .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
    color: white !important;
    background-color: #24526f !important;
}

/* Sottovoce attiva nel menu mobile/tablet */
header .elementor-nav-menu--mobile .elementor-sub-item.elementor-item-active {
    color: white !important;
    background-color: #24526f !important;
}

/* Voce principale attiva (current page) */
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item-active,
header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
header .elementor-nav-menu--dropdown .elementor-item-active,
header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
header .elementor-nav-menu--mobile .elementor-item-active,
header .elementor-nav-menu--mobile .elementor-item.elementor-item-active {
    color: white !important;
}

/* Aumento dimensione testo di 2px per voci e sottovoci su mobile */
@media (max-width: 767px) {
    header .elementor-nav-menu--mobile .elementor-item,
    header .elementor-nav-menu--mobile .elementor-sub-item,
    header .elementor-nav-menu--mobile a.elementor-item,
    header .elementor-nav-menu--mobile a.elementor-sub-item {
        font-size: calc(1em + 2px) !important;
    }
}




/* Riduce padding-top del main */
@media (min-width: 767px) {
    main {
        padding-top: 5em !important; /* ridotto da 10em a 5em */
    }
}


/* Nascondi blocco hero solo in homepage */
body.home .elementor-element-519c2d1 {
    display: none !important;
}

/* --------------------------------------------------- Allineamento content a header -------------------------------- */
/* Il template Single Page (3865) usa --boxed-width: 1000px per i suoi container,                                   */
/* mentre l'header è a 1500px. Allinea il .e-con-inner alla stessa larghezza dell'header.                          */
/* ------------------------------------------------------------------------------------------------------------------ */
.elementor-3865 .e-con-boxed > .e-con-inner,
.elementor-3048 .e-con-boxed > .e-con-inner {
    max-width: 1500px !important;
}


/* --------------------------------------------------- Fix onda separator homepage ---------------------------------- */
/* Il contenitore del testo (ea3c879) scende sotto l'onda a risoluzioni > 1500px.                                   */
/* L'originale sviluppatore aveva gestito solo 1920px+ (margin-top: 8dvw) nel CSS di Elementor.                     */
/* Questa regola copre la fascia intermedia 1500px–1919px con valore proporzionalmente ridotto.                     */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Fascia mobile/tablet piccolo: stessa problematica dell'onda che scavalca il testo */
@media only screen and (min-width: 440px) and (max-width: 767px) {
    .elementor-element-ea3c879 {
        padding-top: 15dvw !important;
    }
}

@media only screen and (min-width: 1500px) and (max-width: 1800px) {
    .elementor-element-ea3c879 {
        padding-top: 6dvw !important;
    }
}

/* A 1920px+ scatta la regola Elementor originale (8dvw).                           */
/* Oltre 2200px l'onda cresce troppo in altezza e 8dvw non basta più.               */
@media only screen and (min-width: 1801px) {
    .elementor-element-ea3c879 {
        padding-top: 8dvw !important;
    }
}


/* --------------------------------------------------- Blog: bottone "Leggi" --------------------------------------- */
/* Applica la classe .btn-leggi all'elemento <a> che contiene la span.jet-listing-dynamic-link__label             */
/* ---------------------------------------------------------------------------------------------------------------- */

.btn-leggi {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #465F83 0%, #052B5C 100%);
    color: white !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.03em;
}

.btn-leggi:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: white !important;
}

.btn-leggi:active {
    transform: translateY(0);
    opacity: 1;
}

.btn-leggi .jet-listing-dynamic-link__label {
    color: inherit;
}


/* --------------------------------------------------- Bottoni Elementor (widget Button) --------------------------- */
/* Forza sfondo #052B5C su tutti i bottoni generati dal widget button di Elementor                                 */
/* ---------------------------------------------------------------------------------------------------------------- */

.elementor-widget-button .elementor-button {
    background-color: #2c4b74 !important;
    color: white !important;
    border-color: #2c4b74 !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.elementor-widget-button .elementor-button:hover {
    background-color: #2c4b74 !important;
    border-color: #0a3d80 !important;
    color: white !important;
    transform: translateY(-1px);
}

.elementor-widget-button .elementor-button:active {
    transform: translateY(0);
}


/* --------------------------------------------------- FAQ: stile titolo domanda ----------------------------------- */

.e-n-accordion-item-title {
    background-color: #2c4b74 !important;
    border-radius: 6px;
}

.e-n-accordion-item-title-text,
.e-n-accordion-item-title-icon svg {
    color: white !important;
    fill: white !important;
}

.e-n-accordion-item-title-text {
    font-size: 18px !important;
}


/* --------------------------------------------------- Footer mobile: testi centrati ------------------------------- */

@media only screen and (max-width: 767px) {
    .elementor-1132 .elementor-heading-title,
    .elementor-1132 .elementor-widget-text-editor,
    .elementor-1132 .elementor-widget-text-editor p,
    .elementor-1132 .elementor-nav-menu,
    .elementor-1132 .elementor-nav-menu .elementor-item,
    .elementor-1132 .elementor-icon-list-items,
    .elementor-1132 .elementor-icon-list-item,
    .elementor-1132 .elementor-icon-list-text,
    .elementor-1132 .elementor-shortcode,
    .elementor-1132 .elementor-widget-image {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Lista icone: centra la riga icona+testo */
    .elementor-1132 .elementor-icon-list-item {
        display: flex !important;
        justify-content: center !important;
    }

    /* Text editor widget: forza centramento con specificità alta */
    .elementor-1132 .elementor-element.elementor-element-c2f707d .elementor-widget-container,
    .elementor-1132 .elementor-widget-text-editor.elementor-element-c2f707d p,
    .elementor-1132 .elementor-element.elementor-element-c2f707d p {
        text-align: center !important;
    }
}