/** *  F O N T S
    ==================================================================================*/ 

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap');

    /** *  V A R I A B I L I
    ==================================================================================*/


    :root {
        
        /** --------------- GESTIONE FONTS ----------------- */

        --font:             'Inter';
        --titoli:           'Libre Baskerville';
        --hand:             '';

        
         /** --------------- GESTIONE COLORI ----------------- */
        
        --main:             #384797;
        
        --grey:             #eaeae9;
        --sand:             #E7E1D5;
        
        --fontcolor:        #333;
        --linkfontcolor:    #666666;
        --bianco:           #fff;   
        --testi:            #444; 
        

        --fluid-h1: clamp(2.50rem, calc(2.00rem + 2.50vw), 4.50rem);
        --fluid-h2: clamp(2.25rem, calc(1.80rem + 2.25vw), 4.00rem);  
        --fluid-h3: clamp(1.75rem, calc(1.45rem + 1.50vw), 2.875rem); 
        --fluid-h4: clamp(1.25rem, calc(1.10rem + 0.75vw), 1.875rem);
        --fluid-h5: clamp(1.00rem, calc(0.925rem + 0.375vw), 1.375rem);

        
    }


    /** *    S T R U T T U R A
    ==================================================================================*/

    body, html { height: 100%;}

    body            		{ font-family: var(--font), sans-serif; background-color: var(--grey);  }

    .site-title             { background-image: url("../img/logo.svg"); text-indent: -9999px; display: block;  background-size: cover; }         
    .site-description       { display: none; }

    .container-fluid        { padding: 0; }

    .site-title             { text-indent: -9999px; display: block; background-repeat: no-repeat; background-size: cover; z-index: 9999; }   
    .site-description       { display: none; }

     #hero             { background-size: cover !important; background-image: url("../img/hero.jpg"); background-position-y:center; }

    #map                    { height: 700px; min-height: 400px;  }

    #contatti               { background-image: url("../img/contatti.webp"); background-size: cover; height: 100vh; padding: 40px; }
    
    #hero {
      position: relative; 
      display: flex;
      justify-content: center; 
      align-items: center;     
      height: 100vh; 
    }

    #claim   { display: block; z-index: 9999; text-align: center;}


    section                 { padding: 80px 0;}
    section.form            { background-color: #D9D9D9;  padding: 40px 0; margin: 0}


    .title                  { height: 100vh; background-size: cover; background-repeat: no-repeat;     display: flex;
    align-items: center; position: relative;}   

    .bianco                  { height: 100vh; background-size: cover; background-repeat: no-repeat;     display: flex;
    align-items: center; position: relative;}    
    .title   > div          { display: block; width: 40vw;}

    .testo              { margin: 80px; }

    .destra             { justify-content: right;   }
    .sinistra           { justify-content: left;   }

    footer              { position: relative; background-color: var(--sand); ; padding:80px 0; }

    .free               { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
    .free img           { width: 60px; height: auto; }
    .logo-footer        { width: 100px; height: auto; margin-bottom: 20px; }   

    
    .img-title-single-page      { overflow: hidden; position: relative; width: 100% !important; }
    .img-title-single-page      { background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover !important; }


    #title h2 { font-size: 60px; color: #fff;  letter-spacing: 2px;   text-transform: uppercase;  z-index: 2;}

    .img-testata { position: relative;}
    .img-opacity { background-color: rgba(0, 0, 0, 0.4); height: 100%; position: absolute; top: 0; width: 100%; z-index: 1;}

    .pagina         { padding: 80px;  }
    .contatti       { margin: 0 0 80px 0;  }


    .wp-block-media-text__media img { box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);}

            #hero::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.6);
                pointer-events: none;
            }

    .round  img  { border-radius: 15px;}


/** *    LOGO
    ==================================================================================*/

        .logo { display: flex; flex-direction: column; } 
        .logo-inner { display: flex; flex-direction: row; align-items: center;  } 
        .logo-svg { width: 150px; height: 150px; display: block; flex-shrink: 0; transition: transform 0.55s cubic-bezier(0.34, 1.1, 0.64, 1); transform-origin: center center; }

        .logo-text-wrap {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex-shrink: 0;
          overflow: hidden;
          opacity: 0;
          transform: translateX(-12px);
          pointer-events: none;
          border-left: 1px solid rgba(255, 255, 255, 0.3);
          padding-left: 10px;      /* ridotto da 16px */
          margin-left: -20px;       /* ridotto/negativo per avvicinare al logo */          
            transition: opacity 0.35s ease 0.15s,
                      transform 0.35s ease 0.15s;
        }

        .logo-name {
          display: block;
          text-align: left;
          font-family: var(--font);
          font-weight: 400;
          font-size: 18px;
          letter-spacing: 0.12em;
          line-height: 21px;
          color: #fff;
          text-transform: uppercase;
          white-space: nowrap;
          text-indent: 0;
        }

        .logo-desc {
          display: block;
          text-align: left;
          font-weight: 300;
          font-size: 10px;
          letter-spacing: 0.3em;
          color: rgba(255, 255, 255, 0.5);
          text-transform: uppercase;
          margin-top: 6px;
          white-space: nowrap;
          text-indent: 0;
        }

        .logo:hover .logo-svg           { transform: scale(0.6); }
        .logo:hover .logo-text-wrap     { opacity: 1; transform: translateX(0); }

    /** *   COOKIE  ----------------------------- */

    #s-ttl img          { padding: 10px 0; }
    #cookie             { color:var(--maincolor); }

    /** *   BANDO  ----------------------------- */

    .eu         { display: block; margin-top: 40px; }
    .eu img     { width: 100px; height: auto; }
    .eu p       { width: 120px; line-height: 18px; font-size: 12px; }

    /** *   IMG SWAP  ----------------------------- */

    .img-hover-swap { position: relative; display: inline-block; /* o block, dipende dal layout */}
    .img-hover-swap .img-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease;}
    .img-hover-swap:hover .img-hover { opacity: 1;}
    .img-hover-swap .img-default { transition: opacity 0.4s ease;}
    .img-hover-swap:hover .img-default { opacity: 0;}

    /** *   FASI  ----------------------------- */

    
    .fase           { position: relative; margin-bottom: 40px;}
    .fase span      { font-size: 7rem; font-weight: 700; line-height: 1; color: var(--lightblu); }
    .fase img       { margin-bottom: 20px; }


    /** * A N I M A Z I O N I D I P A G I N A
    ==================================================================================*/

    .reveal         { position: relative; transform: translateY(150px); opacity: 0; transition: 2s all ease; }
    .reveal.active  { transform: translateY(0); opacity: 1; }

    
    /** *   TEAM SCHEDA SINGOLA  ----------------------------- */
    
    .single-staff #coprete  { display: none !important;}

     #single            { padding: 80px 0; }
    .title              { height: 80%; display: flex; align-items: flex-end; z-index: 9999; }

    .wpcf7-list-item    { margin: 0; }

    #info               { font-family: var(--titoli); border-top: 2px solid var(--maincolor); padding-top: 20px; margin-top: 80px; }

    .staff h3           { margin-top: 20px; }

    #address            { position: absolute; bottom: 50px; left: 40px; }
    #address p          { color: #fff; font-size: 18px; }
    #address a          { color: #fff; font-size: 18px; }
    #address a:hover    { color: #222529; text-decoration: underline; }

    /** *   NAVIGAZIONE POST  ----------------------------- */

    .post-navigation { border-top: 1px solid #ddd; position: relative; margin-top: 80px  }

    .post-navigation-inner {  max-width: 100%; padding: 30px 0; margin: 0 auto}
    .post-nav-prev,.post-nav-next { display: block; float: left; width: 47.5%}

    .post-navigation p { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--lightblu); margin-bottom: 8px; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--lightblu); }

    .post-navigation h4 { display: block; font-size: 2em; font-weight: 700; line-height: 130%; margin: 0}
    .post-navigation h4 a {
        color: var(--maincolor);
        text-decoration: none
    }

    .post-navigation h4 a:hover     { color: var(--lightblu);}

    .post-nav-next                  { float: right}

    .post-nav-next,.post-nav-next h4 { text-align: right}



        .wp-block-file {
            display: flex;
            align-items: center;
            height: 80px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            position: relative;
        }

        .wp-block-file a {
            display: flex;
            align-items: center;
            text-decoration: none !important;
            color: #333;
            text-transform: uppercase;
            font-size: 14px;
            width: 100%;
        }

        .wp-block-file a::before {
            content: "";
            display: inline-flex;
            width: 32px;
            height: 32px;
            margin-right: 16px;
            flex-shrink: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .wp-block-file a[href$=".docx"]::before, .wp-block-file a[href$=".doc"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232B579A'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath fill='%23fff' d='M14 2v6h6'/%3E%3Ctext x='4' y='20' font-size='5' fill='%23fff' font-family='Arial' font-weight='bold'%3EDOC%3C/text%3E%3C/svg%3E");
        }

        .wp-block-file a[href$=".pdf"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E53935'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath fill='%23fff' d='M14 2v6h6'/%3E%3Ctext x='4' y='20' font-size='5' fill='%23fff' font-family='Arial' font-weight='bold'%3EPDF%3C/text%3E%3C/svg%3E");
        }

        .wp-block-file a[href$=".xlsx"]::before, .wp-block-file a[href$=".xls"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23217346'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath fill='%23fff' d='M14 2v6h6'/%3E%3Ctext x='4' y='20' font-size='5' fill='%23fff' font-family='Arial' font-weight='bold'%3EXLS%3C/text%3E%3C/svg%3E");
        }

        .wp-block-file a[href$=".pptx"]::before, .wp-block-file a[href$=".ppt"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D04423'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath fill='%23fff' d='M14 2v6h6'/%3E%3Ctext x='4' y='20' font-size='5' fill='%23fff' font-family='Arial' font-weight='bold'%3EPPT%3C/text%3E%3C/svg%3E");
        }

        .wp-block-file a[href$=".zip"]::before, .wp-block-file a[href$=".rar"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath fill='%23fff' d='M14 2v6h6'/%3E%3Ctext x='4' y='20' font-size='5' fill='%23fff' font-family='Arial' font-weight='bold'%3EZIP%3C/text%3E%3C/svg%3E");
        }

        .wp-block-file {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .wp-block-file:hover {
            transform: translateY(-4px);
            box-shadow: rgba(99, 99, 99, 0.35) 0px 6px 16px 0px;
        }

        .wp-block-file {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .wp-block-file:hover {
            transform: translateY(-3px);
            box-shadow: rgba(99, 99, 99, 0.20) 0px 6px 16px 0px;
        }




    /** *   T I P O G R A F I A
    ==================================================================================*/
    
    html                    { font-size:62.5%; }
    .small                  { font-size: 12px;}

    h1, h2, h3, h4, h5, h6  { font-family: var(--titoli), sans-serif;  font-weight: 800;  }

    .title hr               { border: 1px solid var(--maincolor); width: 150px; opacity: 0.7; margin-top: 30px;}

    .wp-block-separator     { border: 1px solid var(--maincolor)!important; width: 150px !important; margin: 30px auto !important; }


    .nulla h2           { font-size: 36px; text-align: center !important;}
    .nulla h3           { text-align: center !important;}
    .nulla p            { font-size: 21px;  text-align: center !important; }

    .pagina h3 strong  { color: var(--maincolor); }
    
    strong  { color: var(--lightblu); }

    ul.experience li    { padding: 8px 0 !important; }
    

/** * TITOLI  ----------------------------------------------------------------------- */
    
    h1, h2, h3, h4, h5, h5, h6  { color: var(--main);}

    h1                      { font-size: var(--fluid-h1);  }
    h2                      { font-size: var(--fluid-h3);  }
    h3                      { font-size: var(--fluid-h3);  }
    h4                      { font-size: var(--fluid-h4);  }
    h5                      { font-size: var(--fluid-h5);  }

    #claim h1  { color: #fff; }
    #claim small  { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 5px; font-weight: 200;}
    
    h6                      { font-family: var(--hand), sans-serif; font-size: 14px; color:var(--maincolor); text-transform: uppercase; letter-spacing: 2px; font-weight: 300; margin-bottom: 40px; }

    .pagina h3  { margin: 60px 0 20px 0;  }

    #pagina h3::before {
        content: '';
        display: block;
        width: 100px;
        height: 1px;
        margin:0 auto;
        background: var(--maincolor);
        margin-bottom: .5rem;
    }


    blockquote {
        border-bottom: 1px solid var(--lightblu);
        border-top: 1px solid var(--lightblu);
        color: #042e6f;
        margin: 40px 0 0 0;
        overflow: hidden;
        padding: 3em 0;
        position: relative;
    }

    blockquote::before {
        content: '\201C';
        position: absolute;
        top: 120%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40em;
        color: var(--lightblu);
        opacity: 0.08;
        line-height: 1;
        pointer-events: none;
        z-index: 0;
    }

    blockquote p {
        text-align: center !important;
        text-transform: uppercase;
        font-size: 2em !important;
        letter-spacing: 1px;
        line-height: 1.5em;
        margin: 0 0 0.3em 0;
        position: relative;
        z-index: 1;
    }


/** * PARAGRAFI  ----------------------------------------------------------------------- */

    p                      { font-size: 1.5em;  font-weight: 300;  line-height: 170%; margin-bottom: 20px;  }
    .pagina p              { font-size: 1.5em; line-height: 160% !important;  }
    

    .gaptext                { max-width: 400px; margin-left: auto; margin-right: auto;}


/** * COLLEGAMENTI  ------------------------------------------------------------------- */

    a                     { text-decoration: none; position: relative; }
    a:link                { color: var(--maincolor); }
    a:focus               { color: var(--maincolor); outline: 0; }
    a:hover               { text-decoration:none; }
    a:visited             {  }

/** * LISTATI  ------------------------------------------------------------------------ */

    ul, ol                  { padding: 0; color: var(--testi); font-weight: 300; font-size: 1.5em; padding-left: 40px;  }

    ul li, ol li            { line-height: 170%; padding: 3px 0; }

    footer ul, footer ol    { color: var(--main); font-size: 10px !important; padding-left: 0px; }


/** *   --------------------------------------------------------------------------------- */

    #nav a                { color: var(--maincolor); ; margin-right: 20px; }  
    #nav a:hover          { color: var(--bianco);  }  
    #nav i                { font-size: 24px; }  


/** *   HOMEPAGE   -----------------------------------*/

    .home #nav a                { filter: brightness(0) invert(1); }
    .home #nav a.fissa:hover    { filter: none !important; }




/** *   FORM  -----------------------------*/

    .form h3    { font-size: 36px !important    ;}

    .form-control   { font-size: 1.4em; }
    .wpcf7-spinner  { visibility: hidden; display: none; }

    .wpcf7 label    { text-transform: uppercase; color:var(--lightblu); font-weight: 500; font-size: 13px; letter-spacing: 1px; }


/** *   MAPPA  -----------------------------*/

    .leaflet-popup-content p    { font-size: 13px; font-weight: 400; }



    /** *   PAGINA  -----------------------------*/

    .pagina p       { text-align: justify; hyphens: auto; line-height: 24px;}


    /** *   TEAM   -----------------------------*/

    .title h2        { font-size: 4.5em; font-weight: 700; color:var(--maincolor); text-transform: uppercase; }
    .title h3        { color:var(--lightblu); }

    .staff h3      { margin: 20px 0 0 0; }
    .staff h5      { font-weight: 700; color:var(--lightblu); text-transform: uppercase; margin:10px 0 40px 0; }
    .staff p       { font-weight: 400; color:var(--lightblu); }

    .staff          { right: 0; bottom: 0; height: 95%; width: auto; }

    #staff p        { text-align: left !important; hyphens: none !important;  }
    #staff .card          { min-height: 500px; }

 
    .card                       { transition: all .4s cubic-bezier(.22,.68,0,1.2); } 
    .card h2, .card .text-muted, .card p { transition: color .3s ease; } 
    .card img.staff             { transition: transform .4s cubic-bezier(.22,.68,0,1.2); } 

    .card:hover                 { background: #eee !important; transform: translateY(-6px); box-shadow: 0 20px 48px rgba(26,58,92,.28) !important; } 
    .card:hover h2              {  } 
    .card:hover .text-muted     {  } 
    .card:hover p               {  } 
    .card:hover img.staff       { transform: scale(1.10); }


    .subtitle   { text-transform: uppercase; letter-spacing: 2px; color: #ccc;}

    /** *   CONTATTACI -----------------------------*/

    #contatti              { font-family: var(--Ubuntu); color:var(--maincolor) !important; }
    #contatti h3           { font-size: 50px; margin-bottom: 20px;  }
    #contatti h4           { font-size: 18px; font-weight: 400;  }
    #contatti .contatto    { font-size: 18px; font-weight: 300; margin: 40px 0; }
    #contatti a            { font-size: 19px; font-weight: 500; position: relative; }
    .contatto img          { float: left; margin-right: 30px; }

    /** * a:hover effect -----------------------------*/

    footer a:not(.free):after  {
        
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 1px;
        bottom: -5px;
        left: 0;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
        
    }

    footer a:not(.free, .eu):after           { background-color: rgba(56, 71, 151, 0.8 ); }
    footer a:not(.free, .eu):hover:after     { transform: scaleX(1); transform-origin: bottom left; }


    /** *   FOOTER  -----------------------------*/

    footer p              { color: var(--main); font-size: 1.3em; }
    footer h2             { margin: 0 0 20px 0;  font-family: var(--font); color: var(--main); font-size: 1.5em; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
    footer h3             { margin: 0 0 20px 0;  font-family: var(--font); color: var(--main); font-size: 1.3em; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }

    footer ul li            { padding: 0 0 8px 0; list-style: none; }
    footer ul li a:link     { font-size: 1.3em; color: var(--main) !important; }
    footer ul li a:hover    { color: var(--second) !important; }
    footer ul li a:visited    { color: var(--second) ; }

    /** *   SITEMAP  -----------------------------*/

    ul.sitemap                  { column-count: 3; margin: 40px 0;}
    ul.sitemap li               { line-height: 26px; }
    ul.sitemap li a             { color: var(--maincolor); }
    ul.sitemap li a:hover       { color: var(--lightblu); }


    /** *   BUTTONS  -----------------------------*/

    .btn                  { font-family: var(--titoli), sans-serif; text-transform: uppercase; letter-spacing: 2px;  }

    .btn-outline-light              { padding: 7px 15px; color: var(--bianco) !important; } 
    .btn-outline-light:hover        { background-color: var(--maincolor); border-color: var(--maincolor); color: #fff; } 

    .btn-outline-primary            { color: var(--maincolor); border-color: var(--maincolor);}
    .btn-outline-primary:hover      { background-color: var(--maincolor); border-color: var(--maincolor);}

    .btn-primary                    { color: #fff !important; background-color: var(--maincolor); border-color: var(--maincolor); }
    .btn-primary:hover              { background-color: var(--lightblu); border-color: var(--lightblu); }

    .btn-primary.disabled, .btn-primary:disabled { background-color: #3e8e96; border-color: #3e8e96;}

    #call .btn            { font-size: 14px;  padding: 8px 20px; font-weight: 700; }
    #nav .btn             { padding: 5px 20px; }  
    .slide .btn           { font-size: 14px; }  

    .fissa                { font-size: 13px;  }

    .btn:focus { outline: none !important; } 
    .btn:focus { box-shadow: none; }

    /** * BTN EXPAND
        ==================================================================================*/
        
            /* contenitore dei bottoni */
            .expand-group { display: flex; align-items: center; gap: 40px;}

            /* default — già esistente, non tocchi nulla */
            a.expand     { background-color: var(--main); color: #fff; }

            /* variante chiara */
            a.expand--light                  { background: #fff; color: var(--main); }
            a.expand--light .first           { fill: #000; }
            a.expand--light .second path     { stroke: #000; }
            a.expand--light .loader          { border-color: #000; }

         

        a.expand {
            --button-height: 40px;
            overflow: hidden;
            outline: none;
            border-radius: 7px;
            padding: 12px 25px;
            font-size: 13px;
            letter-spacing: 2px;
            border: none;
            cursor: pointer;
            position: relative;
            transition: padding 0.3s;

            text-decoration: none;
            text-transform: uppercase;
            display: inline-flex;      /* ← aggiunto */
            align-items: center;       /* ← aggiunto */
            z-index: 12000;
        }

        .expand-icon {
            --icon-size: 10px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            height: var(--button-height);
            width: var(--button-height);
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateX(calc(var(--button-height) + 1px));
            transition: transform 0.3s;
        }

        .expand-icon > svg {
            height: var(--icon-size);
            width: var(--icon-size);
            transform: scale(1.5);
            transition: transform 0.3s;
        }

        .expand-icon > svg.second {
            display: none;
            transform: scale(0) translateY(50px);
            transition: transform 0.3s;
        }

        a.expand:hover,
        a.expand.loading {
            padding-right: calc(20px + var(--button-height));
            background-color: var(--main);
        }

        a.expand:hover > .expand-icon,
        a.expand.loading > .expand-icon {
            transform: translateX(0);
            transition: transform 0.3s 0.05s;
        }

        a.expand.loading > .expand-icon > svg {
            transform: scale(0);
        }

        @keyframes rotate {
            0% {
                transform: scale(0.3) rotateZ(0deg);
            }
            100% {
                transform: scale(0.3) rotateZ(360deg);
            }
        }

        .loader {
            --loader-size: 52px;
            height: var(--loader-size);
            width: var(--loader-size);
            border: 4px solid white;
            border-left-color: transparent;
            border-right-color: transparent;
            background-color: transparent;
            border-radius: 50%;
            animation: rotate 1.5s linear infinite;
            position: absolute;
            right: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s 0.3s;
        }

        a.expand.loading > span > span.loader {
            opacity: 1;
        }

        a.expand.loaded > span > span.loader {
            opacity: 0 !important;
        }

        a.expand.loaded > .expand-icon > svg.first {
            display: none;
        }

        a.expand.loaded > .expand-icon > svg.second {
            display: block;
        }

        a.expand.finished > .expand-icon > svg.second {
            transform: scale(1.5) translateY(0px);
        }


        a.expand--light:hover {
            color: #fff;
        }
        a.expand--light:hover .first { fill: #fff; }
        a.expand--light:hover .second path { stroke: #fff; }
        a.expand--light:hover .loader { border-color: #fff; }



    /** *    G U T E N B E R G
    ==================================================================================*/

    .alignwide          { margin: 32px calc(25% - 25vw); max-width: 100vw;}
    .alignwide img      { max-width: 1600px; display: inline; }
    
    .alignleft,.alignright  { margin-bottom: 20px;    width: 40%; }
    .alignleft              { float: left;	margin: 5px 40px 30px 0; }

    .alignfull              { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw;}

    .colonne-attestati {
        align-items: stretch !important;
    }

    .colonne-attestati .wp-block-column {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .colonne-attestati .wp-block-column .wp-block-image {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .colonne-attestati .wp-block-column .wp-block-image img {
        width: auto;
        max-width: 100%;
        max-height: 400px;
        height: auto;
        object-fit: contain;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5
        );    

        }


    /** * MENU
    ==================================================================================*/
   
    #toggle         { display: block; width: 30px; z-index: 13000 !important; }  

    .header-items   { position: absolute; top: 45px; right: 10px; z-index: 13000;}
    .header-items   { display: flex; align-items: center; flex: 1; text-align: right; justify-content: flex-end;}

    .icona          { font-size: 24px; color: #fff; margin: 0 20px;}
    a.icona:hover   { color:var(--giallo); }



    ul#main-menu             { z-index: 12000; position: relative; }
    ul#main-menu li          { list-style:none; padding: 0 10px;  } 
    ul#main-menu li a        { color: var(--main); font-size: 14px; font-weight: 800;  text-transform: uppercase; letter-spacing: 2px;  }    
    ul#main-menu li a:hover  { color: var(--maincolor);}    

        /* Underline animato - escludi dropdown toggle */
    ul#main-menu li a:not(.dropdown-toggle)::after {
        content: '';
        display: block;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .6s ease;
    }

    ul#main-menu li a:not(.dropdown-toggle):hover::after { transform: scaleX(1); }

    /* Freccina dropdown */
    ul#main-menu li a.dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.4em;
        vertical-align: 0.15em;
        content: "";
        border-top: 0.35em solid currentColor;
        border-right: 0.35em solid transparent;
        border-bottom: 0;
        border-left: 0.35em solid transparent;
        transition: transform 0.3s ease;
    }

    /* Ruota quando aperto */ 
    ul#main-menu li a.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } 

    /* Dropdown menu trasparente */ 
    ul#main-menu .dropdown-menu { background: transparent; border: none; box-shadow: none; padding: 0.5em 0; }

    /* Voci submenu stile uguale al menu principale */
    ul#main-menu .dropdown-menu .nav-item a.dropdown-item { background: transparent; color: var(--bianco); padding: 0.4em 1em; }
    ul#main-menu .dropdown-menu .nav-item a.dropdown-item:hover { color: var(--maincolor); }

    /* Underline animato uguale al menu principale */
    ul#main-menu .dropdown-menu .nav-item a.dropdown-item::after {
        content: '';
        display: block;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .6s ease;
    }

    ul#main-menu .dropdown-menu .nav-item a.dropdown-item:hover::after { transform: scaleX(1); } 
    ul#main-menu .dropdown-menu .nav-item a.dropdown-item:hover, ul#main-menu .dropdown-menu .nav-item a.dropdown-item:focus { background: transparent; } 
    ul#main-menu .dropdown-menu { margin-top: 0; left: -1em !important; }


/** *  BANNER CONTATTO  ------------------------------------------------------------------- */

    .contact-box {
        font-size: 21px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 35px 30px;
      border: 1.5px solid var(--main);
      border-radius: 8px;
      background: transparent;
      text-decoration: none;
      height: 100%;
      color: var(--main);
      transition: background 0.15s;
    }

 a.contact-box {

      color: var(--main);

    }
    .contact-box:hover {
        background: var(--main);
        border-color:  var(--main);
        color: #fff;
    }
  .contact-box:hover .btn__info {
      color: #fff;

    }

    .contact-box svg {
          width: 40px;
          height:40px;
          flex-shrink: 0;
        opacity: 0.8
    }

    .contact-box .btn__text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.2;
    }

    .contact-box .btn__info {
      font-size: 14px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 500;
    }



/** *  ------------------------------------------------------------------------------------------------------------- */


    /** *  R E S P O N S I V E
    ======================================================================================================================= */



    @media ( max-width: 1024px) {
        
        html, body { overflow-x: hidden; max-width: 100%;}
        * { box-sizing: border-box;} 
        
        #pagina { padding: 0 40px;}
        
        #fasi .sticky-top   { position: relative !important; height: auto !important; } 
        #fasi .col-5        { width: 100%; } 
        #fasi .offset-lg-1.col-6 { width: 100%; }
        
        .mobile-no  { display: none; }
        
                
        .expand-group           { display: flex; flex-direction: column; width: 100%; } 
        .expand-group .expand   { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }

        section.form        { padding: 40px 20px; margin: 0; }
        
        #staff .card        { min-height: unset; } 
        #staff .row         { flex-direction: column-reverse; } 
        #staff img.staff    { display: block; margin: 0 auto 1.5rem; max-width: 220px; } 
        #staff .expand      { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
        
        h4.titoletto    { font-size: 21px; margin: 40px 0;}
        
        .fase                   { margin: 20px 0; }
        
        .titolone  { font-size: 30px;   }
        
        .logo-svg                   { transition: none; } 
        .logo-text-wrap             { transition: none; } 
        .logo:hover .logo-svg       { transform: none; } 
        .logo:hover .logo-text-wrap { opacity: 0; transform: translateX(-12px); }
        
        #claim h1  {  font-size: 18px;  line-height: 130%; width: 80vw;}
        
        .navbar { padding: 0;}
        .navbar-toggler     { display: block; margin: 0 auto;}
        
        ul#main-menu        { text-align: center; background-color: #ddd; padding: 20px 0; }
        ul#main-menu li     { border-bottom: 1px solid #ccc; }
        ul#main-menu li:last-child     { border-bottom: none !important; }
        ul#main-menu li a   { text-align: center;}
        
        .navbar-toggler { border: none; padding: 0; box-shadow: none !important; margin-bottom: 20px;}
        .navbar-toggler { border: none; padding: 0; box-shadow: none !important;}
        .navbar-toggler:focus,.navbar-toggler:hover,.navbar-toggler:active { outline: none !important; box-shadow: none !important;}

        .navbar-toggler-icon {
            width: 32px;
            height: 32px;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23384797' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


    }

    @media ( min-width: 1024px) {
        
                .site-title             { display: block; width: 240px; height: 80px; }


            .home h3:not(footer h3) { font-size: 50px; }

            #call                   { bottom: 100px; }

            .staff, .fase span      { position: absolute;  }
            .fase span              {  left: -60px; top: 0;  }
            
            h4.titoletto            { font-size: 36px; margin: 0 0 80px 0;}
        
            ul.experience       { columns: 2; gap: 10rem; }
        
            .titolone  { font-size: 60px;   }
        
            .home #claim h1  {  font-size: 26px;  line-height: 120%; width: 40vw; text-transform: none; letter-spacing: 1px; }
            #claim h1        {  font-size: 34px;  line-height: 120%; width: 40vw; text-transform: uppercase; letter-spacing: 10px; font-weight: 400;}


        
    }

    /** * ==================================================================================*/

    @media (max-width: 480px) {

        .site-title             { display: block; width: 240px; height: 80px; margin: 20px auto; }
        .site-title a           { display: block; width: 240px; height: 80px; } 
        
        .button_container       { top: 40px; right: 20px; }
        
        .home #hero             { background-size: cover !important; background-position: -525px top !important  }
        #home .testo            { width: 90vw; height: auto; display: block; z-index: 2; }
        #home h3                { font-size: 21px; }
        
        .gut                    { padding: 0px 20px 40px 20px; }
        

        #call                   { bottom: 30px; }
        .logo                   { padding: 20px; }

        #home > section         { background-size: cover !important; background-position: center top !important;  }

        #hero                   { height: 300px;  padding:0 20px; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover; }
        .home #hero             { height: 80vh; background-position: center right !important;  }

        #coprete                { height: 60vh; margin-top: 110px; }

        #nav                    { display: none; right: 0; top: 100px; width: 100vw;     }
        #nav a                  { margin-right: 10px; }
        
        #single, .pagina        { padding:40px 20px;  }
        
        footer                  { text-align: center; }
        
        .scroll                 { display: none; }
        
        .wp-block-spacer                                      { height: 30px !important; }
        .wp-block-media-text .wp-block-media-text__media      { margin-bottom: 20px; }
        
         /** *   TEAM SCHEDA SINGOLA  ----------------------------- */
        
        .title > div     { width: 90vw; }    
        .title h2        { font-size: 2.8em; }
        .title h3        { font-size: 1.8em; }
        
         /** *   MENU  ------------------------------------------- */

        .menumain       { width: 80vw; }
        #address        { bottom: 30vh; }

        ul.nav li a     { font-size: 28px; }
        
         /** *   SLIDE CONTATTI  ------------------------------------------- */
        
        #contatti h3 { font-size: 36px; }
        
         /** *   BANDO  ------------------------------------------- */
        
        .eu p       { margin: 0 auto; }


      }

    /** * ==================================================================================*/

    @media (min-width: 480px) and (max-width: 760px) {

            .site-title             { display: block; width: 240px; height: 80px; }   
        .site-title a           { display: block; height: 85px; width: 300px; }

      }

    /** * ==================================================================================*/

    @media (min-device-width: 768px) and (max-device-width: 1024px)  and (orientation: landscape) {

         .site-title             { display: block; width: 240px; height: 80px; }   
        .site-title a           { display: block; width: 180px; height: 102px; }
        
         .home #hero             { height: 100vh;  padding: 40px; background-position: center top !important; }
        

    } 

    /** * ==================================================================================*/

    @media (min-width: 1024px) and (max-width: 1280px) {
        
 .site-title             { display: block; width: 240px; height: 80px; }
        .site-title a           { display: block; width: 180px; height: 102px; }
        
        #hero { 
            position: relative;  
            height: 50vh; 
            min-height: 400px; 
            padding: 40px; 
        }

        #coprete                { height: 90vh; }
        
        #home .testo            { width: 40vw; height: auto; display: block; z-index: 2; }
        #main-menu              { z-index: 20000; }
        
        #contatti               { min-height: 900px; }


    }



    /** * ==================================================================================*/

    @media (min-width: 1281px) {


        .site-title             { display: block; width: 240px; height: 80px; }
        
        header  { padding:20px 30px; }
        
        .home #hero { position: relative; height: 60vh; min-height: 500px; }
        #hero       { position: relative; height: 30vh; min-height: 350px; }

        #home .testo            { width: 40vw; height: auto; display: block; z-index: 2; }
        #main-menu              { z-index: 20000; }
        
        #contatti               { min-height: 900px; }

    }  


/** * =========  T H E E N D ========================================================================= */