/* ============================================================
   Ital Servizi - personalizzazioni sopra il tema Sanito
   ============================================================ */

/* Preloader: logo in evidenza su disco bianco al centro dello spinner,
   al posto delle lettere animate "italservizi" del tema. Il disco bianco
   serve perché il logo a colori non legge sul fondo blu del preloader. */
.handle-preloader .animation-preloader{
    position:relative;
}
.handle-preloader .animation-preloader .spinner{
    margin:0 auto;   /* via il margin-bottom:45px previsto per il testo, rimosso */
}
.handle-preloader .preloader-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:122px;
    height:122px;
    margin:0;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 35px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
    animation:preloader-logo-pulse 2s ease-in-out infinite;
}
.handle-preloader .preloader-logo img{
    width:104px;
    height:auto;
    border-radius:50%;
}
@keyframes preloader-logo-pulse{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    50%{transform:translate(-50%,-50%) scale(1.06);}
}
/* il disco segue le misure responsive dello spinner (8em / 7em) */
@media screen and (max-width:767px){
    .handle-preloader .preloader-logo{width:100px;height:100px;}
    .handle-preloader .preloader-logo img{width:84px;}
}
@media screen and (max-width:500px){
    .handle-preloader .preloader-logo{width:88px;height:88px;}
    .handle-preloader .preloader-logo img{width:74px;}
}

/* CTA blu "Richiedi un sopralluogo / Contattaci ora" (subscribe-section):
   telefono, email e icone erano azzurro su blu (tono su tono, illeggibili).
   Testi in bianco, icone e hover in giallo che richiama l'elmetto del logo. */
.subscribe-section{
    color:#fff;
}
.subscribe-section .text h3 i{
    color:#ffc107;
}
.subscribe-section .info li{
    color:#fff;
}
.subscribe-section .info li i{
    color:#ffc107;
}
.subscribe-section .info li a{
    color:#fff;
    font-weight:600;
}
.subscribe-section .info li a:hover{
    color:#ffc107;
}

/* Bottone "Richiedi un sopralluogo" nell'header: era #4547f8 su fascia blu
   (tono su tono). Giallo logo con testo blu scuro, hover giallo chiaro. */
.main-header.style-five .header-upper .right-column .theme-btn-four,
.main-header .page-header-mobile-info .btn-box .theme-btn-four{
    background:#ffc107;
    color:#0a267a !important;
}
.main-header.style-five .header-upper .right-column .theme-btn-four.thm-btn:before,
.main-header .page-header-mobile-info .btn-box .theme-btn-four.thm-btn:before{
    background:#ffd54f;
}

/* Footer: testi più leggibili sul blu scuro #0a267a (molti ereditavano
   il grigio scuro del body) e accento giallo sugli hover. */
.main-footer .footer-widget p,
.main-footer .links-list li a,
.main-footer .contact-widget .info li,
.main-footer .contact-widget .info li a{
    color:rgba(255,255,255,.85);
}
.main-footer .widget-title h4{
    color:#fff;
}
.main-footer .links-list li a:hover,
.main-footer .contact-widget .info li a:hover{
    color:#ffc107;
}
.main-footer .footer-bottom p{
    color:rgba(255,255,255,.75);
}

/* Footer: logo aziendale su disco bianco accanto al wordmark */
.main-footer .footer-logo-link{
    display:inline-flex;
    align-items:center;
    gap:14px;
}
.main-footer .footer-logo-disc{
    flex:0 0 auto;
    background:#fff;
    border-radius:50%;
    padding:2px;
    line-height:0;
}
.main-footer .footer-logo-disc img{
    width:58px;
    height:58px;
    border-radius:50%;
}

/* Form contatti (pagina Contatti): card bianca ben definita con bordo,
   accento blu in alto e campi "a tabellina" con bordi visibili, per rendere
   il form subito riconoscibile. Il submit del tema era grigio chiaro su
   bianco (#eceff6), quasi invisibile: ora è blu pieno. */
.contact-section .form-inner{
    max-width:960px;
    margin:0 auto;
    background:#fff;
    border:1px solid #dfe3f0;
    border-top:4px solid #3133d0;
    border-radius:10px;
    box-shadow:0 14px 40px rgba(10,38,122,.10);
    padding:45px 40px 40px;
}
.contact-section .form-inner .wpcf7-form-control-wrap{
    display:block;
}
.contact-section .form-inner .form-group{
    margin-bottom:20px;
}
.contact-section .form-inner input[type="text"],
.contact-section .form-inner input[type="email"],
.contact-section .form-inner input[type="tel"],
.contact-section .form-inner select,
.contact-section .form-inner .nice-select,
.contact-section .form-inner textarea{
    width:100%;
    background:#f6f7fb;
    border:1px solid #c9cee2;
    border-radius:6px;
    height:56px;
    line-height:26px;
    padding:14px 18px;
    font-size:15px;
    color:#262a4a;
    transition:border-color .25s, box-shadow .25s, background .25s;
}
.contact-section .form-inner textarea{
    height:150px;
    resize:vertical;
}
.contact-section .form-inner input:focus,
.contact-section .form-inner .nice-select:focus,
.contact-section .form-inner textarea:focus{
    background:#fff;
    border-color:#3133d0;
    box-shadow:0 0 0 3px rgba(49,51,208,.12);
    outline:none;
}
.contact-section .form-inner ::placeholder{
    color:#8a8fa8;
    opacity:1;
}
.contact-section .form-inner .theme-btn-three{
    background:#3133d0;
    color:#fff;
    padding:16px 48px;
    font-weight:700;
    border-radius:6px;
    cursor:pointer;
}
.contact-section .form-inner .theme-btn-three:hover{
    background:#0a267a;
    color:#fff;
}
@media (max-width:767px){
    .contact-section .form-inner{
        padding:30px 20px 25px;
    }
}

/* Logo testuale (wordmark) al posto dell'immagine del tema */
.logo-text{
    display:inline-block;
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:30px;
    line-height:1.1;
    color:#262a4a;
    letter-spacing:-.5px;
    text-transform:none;
    white-space:nowrap;
}
.logo-text span{color:#3133d0;}
.logo-text small{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:3px;
    color:#7a7d92;
    text-transform:uppercase;
    margin-top:2px;
}
.logo-text-light{color:#fff;}
.logo-text-light small{color:rgba(255,255,255,.6);}
.main-footer .logo-text{font-size:28px;}

/* Logo immagine reale nell'header */
.main-header .logo-box .logo{margin:0;}
.main-header .logo-box .logo img{max-height:64px;width:auto;}
.main-header .sticky-header .logo img{max-height:48px;width:auto;}
.main-header .logo-box{padding:12px 0;}

/* Liste valori / certificazioni con spunta */
.is-check-list{margin-top:15px;}
.is-check-list li{
    position:relative;
    padding-left:30px;
    margin-bottom:12px;
    font-size:17px;
    color:#262a4a;
    font-weight:500;
}
.is-check-list li:before{
    content:"\f00c";
    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    left:0;top:2px;
    color:#3133d0;
}

/* Badge certificazioni ISO */
.cert-badge{
    display:inline-block;
    padding:14px 26px;
    margin:8px;
    border:2px solid #e7e8f2;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:18px;
    color:#262a4a;
    background:#fff;
    transition:all .3s ease;
}

/* Pagina Contatti: il tema usa margin-top:-80px sulla card info per
   sovrapporla alla sezione precedente. Qui sopra c'è il titolo "Contattaci",
   quindi azzeriamo il margine negativo per dare respiro tra titolo e card. */
.contact-info-section .inner-container{
    margin-top:0;
}
.contact-info-section .sec-title{
    margin-bottom:50px;
}

/* Navbar: menu a sinistra e blocco destro (telefono+social) centrati
   verticalmente sulla stessa riga. Il tema usa float, qui passiamo a flex. */
.main-header.style-five .header-lower .outer-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/* neutralizza il clearfix che altrimenti crea pseudo-elementi flex vuoti */
.main-header.style-five .header-lower .outer-box:before,
.main-header.style-five .header-lower .outer-box:after{
    display:none;
}

/* Stessa logica per la sticky header: logo + menu a sinistra, social a destra,
   tutto centrato verticalmente (il tema la lasciava su float, disallineata). */
.main-header.style-five .sticky-header .outer-box{
    display:flex;
    align-items:center;
    gap:40px;
}
.main-header.style-five .sticky-header .outer-box:before,
.main-header.style-five .sticky-header .outer-box:after{
    display:none;
}
.main-header.style-five .sticky-header .menu-area{
    margin-right:auto;   /* spinge il blocco social a destra */
}

/* telefono + social sulla stessa riga, centrati verticalmente.
   Il tema style-five allinea solo .restore-option, non il nostro .support-box,
   quindi il telefono andava a capo sopra le icone social. */
.main-header.style-five .menu-right-content{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:0;
}
.main-header.style-five .menu-right-content .support-box{
    display:flex;
    align-items:center;
    line-height:1;
}
.main-header.style-five .menu-right-content .support-box i{
    margin-right:8px;
    font-size:18px;
    color:#3133d0;
}
.main-header.style-five .menu-right-content .support-box a{
    font-family:'Poppins',sans-serif;
    font-size:18px;
    font-weight:700;
    color:#3133d0;
    white-space:nowrap;
}
.main-header.style-five .menu-right-content .support-box a:hover{
    color:#0a267a;
}
.main-header.style-five .menu-right-content .social-links{
    display:flex;
    align-items:center;
    margin:0;
}
/* le icone social erano floatate: con flex il float è superfluo */
.main-header.style-five .menu-right-content .social-links li{
    float:none;
}
.cert-badge:hover{border-color:#3133d0;color:#3133d0;box-shadow:0 10px 30px rgba(49,51,208,.12);}

/* Home "Chi siamo": allinea verticalmente il testo con il checkbox.
   Il tema usava il checkbox in position:absolute con padding-left:75px sul testo,
   lasciando il testo ancorato in alto. Passiamo a flex centrato. */
.content_block_1 .content-box .inner-box .right-column li{
    display:flex;
    align-items:center;
    gap:20px;
    padding-left:0;
}
.content_block_1 .content-box .inner-box .right-column li i{
    position:static;
    top:auto;
    left:auto;
    flex-shrink:0;
}
.content_block_1 .content-box .inner-box .right-column li p{
    margin-bottom:0;
}

/* Home "Chi siamo": la foto grande (about-1.png è 600x720, non quadrata)
   con border-radius:50% diventava un ovale. La forziamo quadrata con
   object-fit:cover così resta un cerchio perfetto, come da reference. */
.image_block_1 .image-box .image-1 img{
    aspect-ratio:1/1;
    object-fit:cover;
}

/* Home highlights: il primo box (big-block) era pensato dal tema come card
   bianca con figura ritagliata + form CAP. Riusato come card con foto:
   la foto stava a dimensione naturale in basso a sx e il titolo scuro ci
   finiva sopra, illeggibile. Lo trasformiamo in una card con foto a
   copertura, overlay scuro e testo bianco, alla stessa altezza dei box laterali. */
.highlights-section .row{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
}
.highlights-section .big-column,
.highlights-section .small-column,
.highlights-section .big-block,
.highlights-section .small-block{
    display:flex;
}
.highlights-section .big-block,
.highlights-section .small-block,
.highlights-section .big-block .inner-box,
.highlights-section .small-block .inner-box{
    width:100%;
}
.highlights-section .big-block .inner-box{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-align:left;
    padding:40px 35px;
    min-height:400px;
}
/* foto come sfondo a copertura */
.highlights-section .big-block .inner-box .image-box{
    position:absolute;
    inset:0;
    margin:0;
}
.highlights-section .big-block .inner-box .image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* overlay scuro per leggibilità (riuso il div .shape esistente) */
.highlights-section .big-block .inner-box .shape{
    background-image:linear-gradient(180deg, rgba(10,38,122,.15) 0%, rgba(10,38,122,.55) 55%, rgba(10,38,122,.9) 100%) !important;
    z-index:1;
}
/* contenuto sopra l'overlay, in bianco */
.highlights-section .big-block .inner-box h4,
.highlights-section .big-block .inner-box p,
.highlights-section .big-block .inner-box .btn-box{
    position:relative;
    z-index:2;
}
.highlights-section .big-block .inner-box h4{
    color:#fff;
    margin-bottom:12px;
}
.highlights-section .big-block .inner-box p{
    color:rgba(255,255,255,.9);
    margin-bottom:0;
}

/* Nuovo logo a colori su sfondo trasparente: nella fascia superiore (blu)
   serve un backdrop bianco tondo per leggibilità. Nella sticky (fondo bianco)
   resta senza backdrop. */
.main-header.style-five .header-upper .logo-box .logo{
    display:inline-block;
    background:#fff;
    padding:2px;
    border-radius:50%;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    line-height:0;
}
.main-header.style-five .header-upper .logo-box .logo img{
    max-height:80px;
    border-radius:50%;
}

/* Fascia superiore (blu): logo, blocco Sede/Operativi e bottone erano
   posizionati indipendentemente (padding asimmetrico del logo + margin-top
   sulla right-column) e risultavano disallineati verticalmente.
   Centriamo tutto con flex. */
.main-header.style-five .header-upper .upper-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/* NB: NON toccare :before, è lo sfondo blu della fascia. Solo :after (clearfix). */
.main-header.style-five .header-upper .upper-inner:after{
    display:none;
}
.main-header.style-five .header-upper .logo-box{
    padding:16px 0;
}
.main-header.style-five .header-upper .right-column{
    margin-top:0;
}
.main-header.style-five .header-upper .info-list{
    display:flex;
    align-items:center;
    margin:0;
}
.main-header.style-five .header-upper .info-list li{
    float:none;
}

/* WP nav: equiparare la voce attiva del menu alla classe .current del tema */
.main-menu .navigation > li.current-menu-item > a,
.main-menu .navigation > li.current_page_item > a{
    color:#3133d0;
}

/* Navbar mobile (<= 1200px, quando si attiva .auto-hidden del tema):
   logo a sinistra, social a destra, hamburger all'estrema destra,
   telefono nascosto. Il logo mobile resta hidden su desktop. */
.main-header.style-five .header-lower .mobile-logo{
    display:none;
    margin:0;
}
.main-header.style-five .header-lower .mobile-logo img{
    max-height:48px;
    width:auto;
}
@media (max-width:1200px){
    .main-header.style-five .header-lower .outer-box{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }
    .main-header.style-five .header-lower .mobile-logo{
        display:inline-block;
        order:1;
        flex:0 0 auto;
    }
    .main-header.style-five .menu-right-content{
        order:2;
        margin-left:auto;
        margin-bottom:0;
    }
    .main-header.style-five .menu-right-content .support-box{
        display:none;
    }
    .main-header.style-five .header-lower .menu-area{
        order:3;
        flex:0 0 auto;
    }
    .main-header.style-five .menu-area .mobile-nav-toggler{
        margin-top:0;
        margin-left:0;
    }
}

/* Highlights big-block su mobile: il tema nasconde image-box e overlay e mette
   fondo grigio chiaro #eceff6, su cui il nostro testo bianco diventa invisibile.
   Ripristiniamo immagine + overlay come sul desktop. */
@media (max-width:1200px){
    .highlights-section .big-block .inner-box{
        background:transparent;
    }
    .highlights-section .big-block .inner-box .image-box{
        display:block;
    }
    .highlights-section .big-block .inner-box .shape{
        display:block;
    }
}