.elementor-29316 .elementor-element.elementor-element-21b7693{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;border-style:none;--border-style:none;--border-radius:100px 100px 100px 100px;box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.2);--margin-top:24px;--margin-bottom:100px;--margin-left:20px;--margin-right:20px;--padding-top:12px;--padding-bottom:12px;--padding-left:40px;--padding-right:40px;--z-index:9999;}.elementor-29316 .elementor-element.elementor-element-21b7693, .elementor-29316 .elementor-element.elementor-element-21b7693.thegem-e-con-layout-thegem{--content-width:1440px;}.elementor-29316 .elementor-element.elementor-element-b8bc407 img{width:100%;height:50px;}.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu-mobile__default.mobile-view .dl-menu,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu-mobile__default.mobile-view > .dl-submenu{top:calc(100% + 20px);}.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu__default.desktop-view ul.nav-menu > li.menu-item-has-children,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu__default.desktop-view ul.nav-menu > li.megamenu-template-enable{margin-bottom:-20px;padding-bottom:20px;}.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.desktop-view ul.nav-menu > li > a,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.thegem-te-menu__overlay.desktop-view ul.nav-menu li a,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.thegem-te-menu__overlay.desktop-view ul.nav-menu li .menu-item-parent-toggle{font-weight:300;}.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.desktop-view ul.nav-menu > li.menu-item-active > a,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.desktop-view ul.nav-menu > li.menu-item-active > a:hover,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.desktop-view ul.nav-menu > li.menu-item-current > a,
					.elementor-29316 .elementor-element.elementor-element-f7de7a5 .thegem-te-menu > nav.desktop-view ul.nav-menu > li.menu-item-current > a:hover{color:#020101 !important;}.elementor-29316 .elementor-element.elementor-element-0793926 .elementor-button{background-color:#7DFFF7;font-size:16px;font-weight:600;fill:#000000;color:#000000;border-radius:100px 100px 100px 100px;padding:16px 32px 16px 32px;}.elementor-29316 .elementor-element.elementor-element-0793926 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-29316 .elementor-element.elementor-element-6674acd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;border-style:none;--border-style:none;--border-radius:100px 100px 100px 100px;box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.2);--margin-top:24px;--margin-bottom:100px;--margin-left:24px;--margin-right:24px;--padding-top:12px;--padding-bottom:12px;--padding-left:40px;--padding-right:40px;--z-index:9999;}.elementor-29316 .elementor-element.elementor-element-3e5f1e2 img{width:100%;height:50px;}.elementor-29316 .elementor-element.elementor-element-42aae63 .thegem-te-menu-mobile__default.mobile-view .dl-menu,
					.elementor-29316 .elementor-element.elementor-element-42aae63 .thegem-te-menu-mobile__default.mobile-view > .dl-submenu{top:calc(100% + 20px);}.elementor-29316 .elementor-element.elementor-element-42aae63 .thegem-te-menu__default.desktop-view ul.nav-menu > li.menu-item-has-children,
					.elementor-29316 .elementor-element.elementor-element-42aae63 .thegem-te-menu__default.desktop-view ul.nav-menu > li.megamenu-template-enable{margin-bottom:-20px;padding-bottom:20px;}@media(max-width:767px){.elementor-29316 .elementor-element.elementor-element-6674acd{--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:8px;--margin-right:8px;}}/* Spazio per non far finire i contenuti sotto l'header fixed */
@media (min-width: 1024px) {
    #page {
        padding-top: 100px !important; /* Modifica questo valore per abbassare/alzare il contenuto del sito */
        
    }
}
/* 1. Reset degli stili nativi di TheGem Menu */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item {
    border: none !important;
}

.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item > a::after,
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item > a::before {
    display: none !important;
}

/* 2. Creazione della "Pillola" sul contenitore <li> (così include anche la freccina) */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item {
    background-color: transparent !important;
    border-radius: 50px !important;
    padding: 14px 24px !important; /* Dimensioni della pillola */
    margin: 0 4px !important; /* Spazio tra una voce e l'altra */
    transition: background-color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center;
}

/* 3. Effetto Hover: accende la pillola ciano SOLO al passaggio del mouse */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item:hover {
    background-color: #7df2eb !important;
}

/* Stile per la voce di menu attiva, differenziata senza il bottone */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.current-menu-item {
    background-color: transparent !important;
}

/* 4. Stile del Testo interno */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item > a {
    color: #000000 !important;
    padding: 0 !important; /* Il padding lo dà già la pillola <li> */
    background: transparent !important;
    line-height: 1 !important;
}

/* 5. Mantiene il testo e la freccia neri durante l'hover */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item:hover > a,
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item:hover .menu-item-parent-toggle {
    color: #000000 !important;
}

/* 6. Fix per la freccina di TheGem (la avvicina al testo) */
.header-pillola-custom .thegem-te-menu .menu-item-parent-toggle {
    position: relative !important;
    margin-left: 8px !important;
    right: auto !important;
    top: auto !important;
}


/* =========================================
   CENTRATURA E HEADER FIXED
   ========================================= */
.header-pillola-custom {
    position: fixed !important;
    top: 25px !important; 
    left: 0 !important;   
    right: 0 !important;  
    z-index: 9999 !important; 
    
    max-width: 1400px !important; 
    width: 95% !important; 
    margin: 0 auto !important; 
    box-sizing: border-box !important; 
    overflow: visible !important; 
    
    /* FIX TRASPARENZA: Forza il bianco solido e blocca le opacità del tema */
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 50px !important; /* Assicura che la forma a pillola non venga sovrascritta */
}

/* 1. Trasforma lo span nativo di TheGem nella nostra freccia SVG */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item-has-children > .menu-item-parent-toggle {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 6px !important;
    /* Disegna una freccina chevron moderna nera */
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s ease !important;
}

/* 2. Nasconde eventuali icone vecchie dentro quello span */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item-has-children > .menu-item-parent-toggle::before,
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item-has-children > .menu-item-parent-toggle::after {
    display: none !important;
}

/* 3. Fa ruotare la freccina verso l'alto quando il menu è aperto (passaggio del mouse sul li) */
.header-pillola-custom .thegem-te-menu ul.nav-menu > li.menu-item-has-children:hover > .menu-item-parent-toggle {
    transform: rotate(180deg) !important;
}
/* --- HEADER MOBILE (Pillola Fluttuante e Centrata) --- */

/* Forza le dimensioni e la centratura del contenitore su mobile */
.header-mobile-custom {
    position: -webkit-sticky !important; /* Lo rende sticky anche su iPhone */
    position: sticky !important;
    top: 15px !important; /* Distanza dall'alto dello schermo */
    z-index: 9999 !important;
    
    /* La magia per staccarlo dai bordi */
    width: 92% !important; /* Occupa il 92% dello schermo */
    margin: 15px auto !important; /* "auto" lo forza esattamente al centro */
    left: 0 !important;
    right: 0 !important;
    
    /* Ripristina la forma a pillola nel caso il tema l'abbia tolta */
    border-radius: 50px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Sicurezza per i widget interni (evita che allarghino la scatola) */
.header-mobile-custom > .e-con-inner {
    width: 100% !important;
    padding: 10px 8px 10px 20px !important; /* Spazio ai lati del logo e dell'hamburger */
}


/* --- HAMBURGER: ASIMMETRICO --- */
.header-mobile-custom .menu-toggle span {
    border-radius: 10px !important; /* Punte arrotondate morbide */
    height: 3px !important; /* Spessore un po' più marcato */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    margin-left: auto !important; /* Allinea le linee a destra */
}

/* Accorcia la seconda e terza linea */
.header-mobile-custom .menu-toggle .menu-line-2 { width: 75% !important; }
.header-mobile-custom .menu-toggle .menu-line-3 { width: 50% !important; }

/* Hover/Tap: Si riallineano ed evidenziano in ciano */
.header-mobile-custom .menu-toggle:hover span,
.header-mobile-custom .menu-toggle:active span {
    width: 100% !important;
    background-color: #7df2eb !important;
}


/* =========================================
   OTTIMIZZAZIONE E FIX PILLOLA SU MOBILE
   ========================================= */
@media (max-width: 767px) {
    /* 1. Uccide le regole del tema che rompono il "fixed" su mobile */
    body, html, #page, .site-content, .elementor-page, .elementor-section-wrap {
        transform: none !important;
        perspective: none !important;
    }

    /* 2. Ribadisce la forzatura del fixed e ottimizza gli spazi */
    .header-pillola-custom {
        position: fixed !important;
        top: 15px !important; /* Meno spazio dal soffitto su smartphone */
        width: 92% !important; /* Si adatta meglio ai bordi */
        padding: 10px 15px !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* 3. Adegua lo spazio del sito sottostante */
    #page {
        padding-top: 10px !important; 
    }
}