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

   1. REGOLE GLOBALI E FIX DI BASE

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



html, body {

    max-width: 100%;

    overflow-x: hidden;

    scroll-behavior: smooth;

    background-color: #e1dbd5;

}



#Fisioterapia, #Osteopatia, #Posturologia {

    scroll-margin-top: 100px;

}



/* ─── SIGLA DI BENVENUTO (INDEX) & Back to top ─── */



#spinner {

    background-color: #1a237e !important; /* Blu scuro istituzionale */

    z-index: 2147483647; /* Massima priorità per coprire tutto */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    

    /* IL TRUCCO ANTIFLASH: Parte spento e invisibile */

    display: none; 

    opacity: 0;

    

    /* Transizione fluida quando scompare */

    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;

}



/* Questa classe viene aggiunta dal JS SOLO alla prima visita */

#spinner.show {

    display: flex !important; /* Lo attiva come contenitore flessibile */

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 1 !important;

    visibility: visible !important;

    transition: none; /* Appare all'istante all'ingresso */

}



/* Icona 3D che ruota */

.spinner-icon {

    font-size: 4.5rem;

    color: #15b9d9;

    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.5));

    animation: ruota3D 2.5s infinite linear;

    margin: 40px 0; 

}



/* Nome dello studio elegante */

.spinner-brand {

    font-size: 1.2rem;

    font-weight: 300;

    color: #ffffff;

    letter-spacing: 6px;

    text-transform: uppercase;

    text-shadow: 0px 3px 10px rgba(0,0,0,0.5);

}



@keyframes ruota3D {

    0% { transform: rotateY(0deg); }

    100% { transform: rotateY(360deg); }

}



/* Contenitore e Testi */

.spinner-text-wrapper {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 60px;

}



.spinner-text {

    font-size: 3rem;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 2px;

    text-shadow: 0px 5px 15px rgba(0,0,0,0.4);

    transition: opacity 0.8s ease-in-out; 

}

/* Puntini animati */

.loading-dots {

    display: inline-block;

    width: 40px;

    text-align: left;

}

.loading-dots::after {

    content: '';

    animation: puntiniAnimati 1.5s steps(4, end) infinite;

}

@keyframes puntiniAnimati {

    0% { content: ''; }

    25% { content: '.'; }

    50% { content: '..'; }

    75% { content: '...'; }

    100% { content: ''; }

}



.back-to-top {

    position: fixed; right: 20px; bottom: 40px; width: 50px; height: 50px;

    display: flex; align-items: center; justify-content: center; z-index: 99;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.back-to-top.show-btn {

    opacity: 1;

}



/* --- BLOCCO SCROLL SITO (CARDS) --- */

body.body-locked { 

    overflow: hidden !important; 

    overscroll-behavior: none !important; 

}



/* --- FIX DEFINITIVO SCROLL GALLERIA FOTO --- */

html:has(body.lb-disable-scrolling),

body.lb-disable-scrolling {

    overflow: hidden !important;

    touch-action: none !important; /* Blocca il trascinamento col dito su cellulare */

}



/* Ferma lo scroll "elastico" se l'utente prova a trascinare lo sfondo scuro della foto */

.lightboxOverlay, .lightbox {

    overscroll-behavior: none !important;

    touch-action: none !important;

}



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

   2. BOTTONI

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

.btn { font-weight: 600; transition: .5s; }

/* Bottone icona circolare — usato esclusivamente dal back-to-top */

.btn-lg-square { width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; border-radius: 50%; }



.btn.btn-primary { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important; }

.btn.btn-primary:hover { 

    box-shadow: inset 300px 0 0 0 var(--bs-light), 0 8px 25px rgba(0, 0, 0, 0.20) !important; 

    color: var(--bs-primary) !important; 

    transform: translateY(-3px); 

}



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

   3. TITOLI DI SEZIONE

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

.section-title { max-width: 900px; text-align: center; margin: 0 auto; }

.section-title .sub-style, .sub-title {

    position: relative; display: inline-block; text-transform: uppercase; color: var(--bs-primary);

}



.section-title .sub-style::before, .sub-title::before {

    content: ""; width: 100px; position: absolute; top: 50%; transform: translateY(-50%); margin-top: 8px; border: 1px solid var(--bs-primary) !important;

}

.section-title .sub-style::after, .sub-title::after {

    content: ""; width: 50px; position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid var(--bs-primary) !important;

}



/* Posizionamento Linee */

.section-title .sub-style::before { left: 0; margin-left: -100px; }

.section-title .sub-style::after { left: 0; margin-bottom: 5px; margin-left: -50px; }

.sub-title::before { right: 0; margin-right: -100px; }

.sub-title::after { right: 0; margin-bottom: 8px; margin-right: -50px; }



/* Eccezioni per sfondi colorati */

.bg-primary .sub-title::before, .bg-primary .sub-title::after, .bg-primary .sub-style::before, .bg-primary .sub-style::after,

.contact .sub-title::before, .contact .sub-title::after, .contact .sub-style::before, .contact .sub-style::after,

.testimonial .sub-title::before, .testimonial .sub-title::after, .testimonial .sub-style::before, .testimonial .sub-style::after {

    border-color: #ffffff !important; background-color: #ffffff !important;

}



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

   4. TOPBAR E NAVBAR — DESKTOP

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



.navbar-light .navbar-nav .nav-link {

    font-family: 'Open Sans', sans-serif; position: relative; margin-right: 25px; padding: 35px 0 10px 0 !important;

    color: var(--bs-dark) !important; font-size: 16px; font-weight: 400; outline: none; transition: .5s;

}

.sticky-top.navbar-light .navbar-nav .nav-link { padding: 20px 0; color: var(--dark) !important; }

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active { color: var(--bs-primary) !important; }

.navbar-light .navbar-brand img { max-height: 50px; transition: .5s; }

.sticky-top.navbar-light .navbar-brand img { max-height: 45px; }



.navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 600; vertical-align: middle; margin-left: 8px; }

.dropdown .dropdown-menu a:hover { background: var(--bs-primary); color: var(--bs-white); }



@media (min-width: 1200px) {

    .navbar .nav-item .dropdown-menu { display: block; visibility: hidden; top: 100%; transform: rotateX(-75deg); transform-origin: 0% 0%; border: 0; border-radius: 10px; transition: .5s; opacity: 0; }

}

.navbar .nav-item:hover .dropdown-menu { transform: rotateX(0deg); visibility: visible; background: var(--bs-light) !important; transition: .5s; opacity: 1; }



@media (min-width: 992px) {

    .navbar-light { position: absolute; width: 100%; top: 0; left: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); z-index: 999; }

    .sticky-top.navbar-light { position: fixed; background: var(--bs-light) !important; }

    .navbar-light .navbar-nav .nav-link::before { position: absolute; content: ""; width: 0; height: 2px; bottom: -1px; left: 50%; background: var(--bs-primary); transition: .5s; }

    .navbar-light .navbar-nav .nav-link:hover::before, .navbar-light .navbar-nav .nav-link.active::before { width: calc(100% - 2px); left: 1px; }



}



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

   5. HERO BANNER & HEADER

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

.header-static { width: 100%; overflow: hidden; }

.header-static .hero-img { object-fit: cover; height: calc(100vh - 45px); max-height: none; }

.header-static .overlay-scuro { background: rgba(0, 0, 0, 0.4); }



.bg-breadcrumb {

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/ChiSiamo/ChiSiamo.jpg) center center no-repeat;

    background-size: cover; padding: 160px 0 60px 0;

}

.bg-breadcrumb .breadcrumb-item a { color: var(--bs-white) !important; }



/* Testi animati in evidenza */

.titolo-principale { font-size: 120px !important; }

.sottotitolo { font-size: 40px !important; }

.animazione-testo { font-size: 45px !important; }

.cd-headline { line-height: 1.2; margin-top: 20px; }

.cd-words-wrapper { display: inline-block; position: relative; text-align: left; width: 250px; vertical-align: top; }

.cd-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }

.cd-words-wrapper b.is-visible { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }



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

   6. SEZIONI: SERVIZI, ABOUT, PERCHE' SCEGLIERCI

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

.spazio-servizi { margin-top: 140px; }



/* Regole Hover Card Base */

.service .service-item { box-shadow: none; }

.service .service-item .service-img { position: relative; overflow: hidden; z-index: 1; }

.service .service-item .service-img img { transition: 0.5s; height: 230px !important; width: 100% !important; object-fit: cover !important; }

.service .service-item .service-img::before { width: 100%; height: 0; position: absolute; content: ""; top: 0; left: 0; border-top-right-radius: 10px; border-top-left-radius: 10px; transition: 0.5s; z-index: 5; }

.service .service-item:hover .service-img::before { height: 100%; background: rgba(21, 185, 217, .3); }

.service .service-item .service-img:hover img { transform: scale(1.3); }



.service .service-item .service-content { position: relative; z-index: 2; }

.service .service-item .service-content::before { width: 100%; height: 8px; position: absolute; content: ""; bottom: 0; left: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: rgba(21, 185, 217, .5); transition: 0.5s; z-index: 3; }

.service .service-item:hover .service-content::before { background: rgba(21, 185, 217, .5); height: 100%; }

.service .service-item .service-content .service-content-inner { transition: 0.5s; }

.service .service-item:hover .service-content .service-content-inner { position: relative; color: var(--bs-white) !important; z-index: 9; }

.service .service-item:hover .service-content .service-content-inner h5 { color: var(--bs-secondary); }



/* Perché Sceglierci */

.container-fluid.feature { margin-top: 60px; }

.feature .feature-item { position: relative; display: flex; border: 1px solid var(--bs-primary); border-radius: 10px; background: var(--bs-light); transition: 0.5s; }

.feature .feature-item::before { width: 0; height: 100%; content: ""; position: absolute; top: 0; left: 0; border-radius: 10px; transition: 0.5s; }

.feature .feature-item:hover::before { width: 100%; background: var(--bs-primary); }

.feature .feature-item .feature-icon { display: inline-flex; border-radius: 10px; transition: 0.5s; }

.feature .feature-item:hover .feature-icon, .feature .feature-item:hover .feature-content { position: relative; z-index: 2; }

.feature .feature-item:hover .feature-content { color: var(--bs-white); }

.feature .feature-item:hover .feature-content h5 { color: var(--bs-dark); }



/* Testimonial */

.testimonial { background: linear-gradient(rgba(21, 185, 217, 0.9), rgba(21, 185, 217, 0.9)), url(../img/carousel-1.jpg) center center no-repeat fixed; background-size: cover; }

.testimonial .section-title .sub-style, .testimonial .section-title .sub-title { color: #ffffff; }

.testimonial .testimonial-item .testimonial-inner { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 10px; background: transparent; }

.testimonial .testimonial-item .testimonial-inner .testimonial-inner-img { width: 100px; height: 100px; border-radius: 50%; border: 5px solid var(--bs-white); }

.testimonial .testimonial-carousel.owl-carousel { position: relative; }

.testimonial .testimonial-carousel .owl-nav .owl-prev, .testimonial .testimonial-carousel .owl-nav .owl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--bs-light); color: var(--bs-primary); transition: 0.5s; }

.testimonial .testimonial-carousel .owl-nav .owl-prev { left: -20px; }

.testimonial .testimonial-carousel .owl-nav .owl-next { right: -20px; }

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover, .testimonial .testimonial-carousel .owl-nav .owl-next:hover { box-shadow: inset 100px 0 0 0 var(--bs-primary) !important; color: var(--bs-white) !important; }



.testimonial-carousel .owl-dots { display: flex; justify-content: center; margin-top: 20px; }

.testimonial-carousel .owl-dots .owl-dot { width: 20px; height: 20px; border-radius: 50%; margin-right: 15px; border: 1px solid var(--bs-white); background: transparent; transition: 0.5s; }

.testimonial-carousel .owl-dots .owl-dot.active { background: var(--bs-secondary) !important; }

.testimonial-carousel .owl-dots .owl-dot span { position: relative; margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }

.testimonial-carousel .owl-dots .owl-dot span::after { content: ""; position: absolute; top: 50%; right: 1px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 8px; background: var(--bs-white); }

@media (min-width: 900px) { .testimonial .testimonial-carousel .testimonial-item .testimonial-inner p.fs-7 { font-size: 20px; } }



.avatar-initials { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: #ffffff; margin: 0 auto; border: 3px solid rgba(255, 255, 255, 0.2); text-transform: uppercase; }



/* Footer e Contatti */

.contact { background: linear-gradient(rgba(21, 185, 217, 0.902), rgba(21, 185, 217, 0.9)), url(../img/carousel-1.jpg) center center no-repeat fixed; background-size: cover; }

.footer { background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(../img/ChiSiamo/ChiSiamo.jpg) center center no-repeat; background-size: cover; }

.footer .footer-item a, .footer .footer-item p { line-height: 35px; }

.footer .footer-item a { color: var(--bs-body); transition: 0.5s; }

.footer .footer-item a:hover { letter-spacing: 2px; color: var(--bs-primary); }

.copyright { background: var(--bs-dark) !important; }



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

   7. FLIP CARDS 3D INTERATTIVE

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

.overlay-backdrop { 

    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); 

    z-index: 2147483640; display: none; opacity: 0; transition: opacity 0.6s ease;

}

.overlay-backdrop.active { display: block; opacity: 1; }



.flip-card { background-color: transparent; width: 100%; height: 100%; min-height: 400px; perspective: 1000px; cursor: pointer; position: relative; z-index: 1; }

.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }

.flip-card-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; border-radius: 15px; z-index: 0; }



.flip-card-front, .flip-card-back { 

    position: absolute; width: 100%; height: 100%; border-radius: 15px; background-color: #ffffff; z-index: 1; 

    display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; 

    -webkit-backface-visibility: hidden; backface-visibility: hidden; border: none !important; 

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; 

}

.flip-card-back { transform: rotateY(180deg); padding: 20px !important; color: #333; -webkit-font-smoothing: antialiased; }



/* Stato Espanso PC */

.flip-card.expanded { 

    position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;

    width: 50vw; height: 85vh; max-width: 900px; max-height: 800px; z-index: 2147483647; 

    transform: none !important; animation: popIn 0.3s ease-out forwards;

}

@keyframes popIn { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }

.flip-card.expanded .flip-card-inner { transform: rotateY(180deg); }



/* Bottoni Chiusura Card */

.btn-close-custom { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border-radius: 50%; background-color: #212529; color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s ease; }

.btn-close-custom:hover { background-color: rgba(21, 185, 217, 0.9); color: #ffffff; transform: rotate(90deg); cursor: pointer; }

.btn-close-bottom { background-color: #212529; color: #ffffff; border: none; padding: 10px 35px; font-size: 16px; border-radius: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.3s ease; }

.btn-close-bottom:hover { background-color: rgba(21, 185, 217, 0.9); cursor: pointer; }



.fade-in-up { animation: fadeInUpCustom 0.8s ease-out forwards; }

@keyframes fadeInUpCustom { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }



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

   8. MAPPA & ORGANIGRAMMA

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

.transition-base { transition: all 0.4s ease-in-out; }

.map-hover-container:hover img { transform: scale(1.08); }

.map-hover-container:hover .map-overlay { opacity: 1 !important; }



.org-chart-spine { display: flex; flex-direction: column; width: 100%; max-width: 1000px; margin: 0 auto; padding-top: 20px; padding-bottom: 40px; position: relative; }

.org-row { display: flex; width: 100%; position: relative; }

.org-col-main { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0 !important; position: relative; }

.org-col-main::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background-color:#5b6066; transform: translateX(-50%); z-index: 1; }

.org-col-branch { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px 0 20px 30px !important; position: relative; }



.org-card { background: #ffffff; padding: 20px 25px; border-radius: 10px; width: 100%; max-width: 320px; text-align: center; position: relative; z-index: 2; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.org-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.card-blue { border-style: solid; border-color: var(--bs-primary); border-width: 5px 1px 3px 1px; box-shadow: 8px 10px rgba(0, 0, 0, 0.15) !important;}

.card-orange { border-style: solid; border-color: #ff7f50; border-width: 5px 1px 3px 1px; box-shadow: 8px 10px rgba(0, 0, 0, 0.15) !important;}

.card-green { border-style: solid; border-color: #28a745; border-width: 5px 1px 3px 1px; box-shadow: 8px 8px rgba(0, 0, 0, 0.15) !important;}

.card-yellow { border-style: solid; border-color: #ffc107; border-width: 5px 1px 3px 1px; box-shadow: 8px 10px rgba(0, 0, 0, 0.15) !important;}



.org-row:first-child .org-col-main::after { top: 50%; }

.collab-row .org-col-main::after { bottom: calc(100% - 55px) !important; } 

.collab-row .org-col-main { justify-content: flex-start; } 

.branch-row .org-col-main::before { content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 3px; background-color: #5b6066; z-index: 1; }

.branch-row .org-col-branch::before { content: ''; position: absolute; top: 50%; left: 0; width: 30px !important; height: 3px; background-color: #5b6066; z-index: 1; }

.collab-row .org-col-main::before { content: ''; position: absolute; top: 55px !important; left: 50%; width: 50%; height: 3px; background-color: #5b6066; z-index: 1; }

.collab-row .org-col-branch::before { content: ''; position: absolute; top: 55px !important; left: 0; width: 15px !important; height: 3px; background-color: #5b6066; z-index: 1; }

.collab-row .org-col-branch::after { content: ''; position: absolute; top: 55px !important; left: 15px !important; width: 3px; height: auto !important; bottom: 65px !important; background-color: #5b6066; z-index: 1; }

.collab-card::before { content: ''; position: absolute; top: 50%; left: -15px !important; width: 15px !important; height: 3px; background-color: #5b6066; z-index: 1; }



.ls-1 { letter-spacing: 1px; }

.text-orange { color: #ff7f50 !important; }

.bg-orange { background-color: #ff7f50 !important; }

.title-card { height: 70px; max-width: 280px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; }

.org-row:first-child .org-col-main { padding-bottom: 0 !important; }

.branch-row .org-col-main { padding: 5px 0 !important; }

.branch-row .org-col-branch { padding: 5px 0 5px 30px !important; }

.collab-row .title-card h5 { font-size: 1.1rem !important; }

.collab-card h6 { font-size: 1.15rem !important; }



/* Effetto 3D per la Card Contatti */

.maintenance-card {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);}



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

   9. GALLERY CHI SIAMO (STRUTTURA)

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

.feature-item-gallery {

    display: block;

    border-radius: 15px;

    overflow: hidden;

    position: relative;

    box-shadow: 0 8px 20px rgba(0,0,0,0.1);

}



.feature-img-box {

    position: relative;

    overflow: hidden;

    background-color: #000;

}



.feature-img-box img {

    width: 100%;

    height: 250px; 

    object-fit: cover;

    transition: transform 0.6s ease;

    display: block;

}



.feature-hover-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(26, 35, 126, 0.7); /* Blu Studio Xalus */

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.4s ease;

}



/* --- CENTRAGGIO PERFETTO LENTE E TESTO --- */

.feature-hover-text {

    display: flex;             /* Attiva Flexbox */

    flex-direction: column;    /* Dispone gli elementi in colonna (uno sotto l'altro) */

    align-items: center;       /* Centra orizzontalmente */

    justify-content: center;   /* Centra verticalmente */

    text-align: center;        /* Assicura che il testo sia centrato se va a capo */

    height: 100%;              /* Occupa tutta l'altezza dell'overlay */

    width: 100%;               /* Occupa tutta la larghezza dell'overlay */

}



/* Rimuove margini indesiderati per un allineamento pulito */

.feature-hover-text i {

    margin: 0 0 10px 0 !important; /* Aggiunge un piccolo spazio solo sotto l'icona */

}



.feature-hover-text h5 {

    margin: 0 !important;          /* Rimuove i margini di default del titolo */

}



/* --- SPOSTIAMO LA BARRA IN CIMA ALLA FOTO --- */

.lb-dataContainer {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    margin: 0 auto !important; /* FONDAMENTALE: centra la barra mantenendo la larghezza esatta della foto */

    padding-top: 0 !important;

    z-index: 1050 !important;

}



/* Rende il testo "Sala d'Attesa" leggibile in alto a sinistra */

.lb-data .lb-details {

    padding-top: 15px !important;

    padding-left: 10px !important;

    color: #2d2ad4 !important;

    text-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;

}



/* --- X ROSSA IN ALTO A DESTRA DENTRO LA CORNICE --- */

.lb-data .lb-close { 

    position: absolute !important; 

    top: 22px !important;       

    right: 5px !important;     

    background: none !important; 

    width: 50px !important; 

    height: 50px !important; 

    z-index: 1060 !important; 

    outline: none !important;

    display: block !important;

}



.lb-close::before { 

    content: '\f00d' !important; 

    font-family: 'Font Awesome 5 Free' !important; 

    font-weight: 900 !important; 

    color: #ff0000 !important; /* Rosso fuoco garantito */

    font-size: 45px !important; 

    position: absolute !important; 

    top: 0 !important; 

    right: 0 !important; 

    transition: 0.3s !important; 

    text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important; 

}



.lb-close:hover::before { 

    color: #cc0000 !important; /* Diventa più scura se ci passi sopra */

    transform: scale(1.2) !important; 

}





/* --- FRECCE LATERALI --- */

.lb-nav a.lb-prev, .lb-nav a.lb-next { 

    background: none !important; 

    opacity: 1 !important; 

    display: flex !important; 

    align-items: center; 

    transition: 0.3s; 

    text-decoration: none; 

}

.lb-nav a.lb-prev { justify-content: flex-start; padding-left: 20px; }

.lb-nav a.lb-next { justify-content: flex-end; padding-right: 20px; }



.lb-nav a.lb-prev::before { 

    content: '\f053'; font-family: 'Font Awesome 5 Free'; font-weight: 900; 

    color: white; font-size: 40px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); transition: 0.3s; 

}

.lb-nav a.lb-next::before { 

    content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; 

    color: white; font-size: 40px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); transition: 0.3s; 

}



.lb-nav a.lb-prev:hover::before, .lb-nav a.lb-next:hover::before { 

    transform: scale(1.2); 

    color: #15b9d9; 

}



/* Comportamento Desktop */

@media (min-width: 992px) {

    .feature-item-gallery:hover .feature-img-box img {

        transform: scale(1.1);

    }

    .feature-item-gallery:hover .feature-hover-overlay {

        opacity: 1;

    }

}





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

   =========================================================================

                 MEDIA QUERY UNIFICATA: SMARTPHONE & TABLET

                 (Tutte le regole per schermi sotto i 991.98px)

   =========================================================================

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

@media (max-width: 991.98px) {



    /* --- GALLERY MOBILE (DISATTIVATA) --- */

    .feature-item-gallery {

        pointer-events: none !important; /* Blocca click/popup */

    }

    .feature-hover-overlay {

        display: none !important;

    }

    .feature-img-box img {

        transform: none !important;

    }



    /* --- NAVBAR --- */

    .navbar-collapse .nav-link:not(.active):focus, .navbar-collapse .nav-link:not(.active):hover, .navbar-collapse .dropdown-toggle:not(.active):focus { color: var(--bs-dark) !important; background-color: transparent !important; }

    .navbar.navbar-expand-lg { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background-color: var(--bs-dark) !important; padding: 10px 15px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; }

    body { padding-top: 70px !important; }

    .navbar-brand { display: flex !important; align-items: center !important; max-width: 75% !important; overflow: hidden; }

    .navbar-brand img { width: 45px !important; height: 45px !important; max-height: 45px !important; border-radius: 50% !important; border: 2px solid #ffffff !important; object-fit: cover !important; padding: 0 !important; }

    .navbar-brand h1 { font-size: 1.1rem !important; color: #ffffff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-left: -5px !important; }

    .navbar-toggler { background-color: var(--bs-primary) !important; border: none !important; padding: 6px 10px !important; }

    .navbar-toggler .fa-bars { color: #ffffff !important; font-size: 1.2rem; }

    .navbar-collapse { background-color: #ffffff !important; border-radius: 10px !important; padding: 15px !important; margin-top: 15px !important; flex-basis: 100% !important; }

    .navbar-collapse .nav-link { color: var(--bs-dark) !important; border-bottom: 1px solid #eeeeee; padding: 12px 0 !important; }

    .navbar-collapse .nav-link:last-child { border-bottom: none; }

    .navbar-collapse .dropdown-menu { position: relative !important; float: none !important; border: none !important; background-color: #f8f9fa !important; padding: 10px !important; border-radius: 10px !important; margin-top: 5px !important; width: 100% !important; }

    #navbarCollapse .btn-primary { display: block !important; width: 100% !important; margin-top: 20px !important; }



    /* --- TESTI & SPAZI --- */

    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    .display-3 { font-size: 2.2rem !important; }

    .display-5 { font-size: 1.8rem !important; }

    p { font-size: 0.95rem; }

    .section-title, .service-content, .service-item h4, .display-1, .display-2, .display-3 { max-width: 100% !important; overflow: hidden !important; word-wrap: break-word !important; white-space: normal !important; }

    .section-title::before, .section-title::after { max-width: 50px !important; }

    .header-static .hero-img { height: calc(100vh - 70px) !important; object-fit: cover !important; }

    .titolo-principale { font-size: 55px !important; line-height: 1.1; }

    .sottotitolo { font-size: 24px !important; margin-top: 10px; }

    .animazione-testo { font-size: 28px !important; flex-direction: column; }

    .animazione-testo span.me-3 { margin-bottom: 5px; margin-right: 0 !important; }

    .cd-headline { font-size: 2rem !important; }

    .cd-words-wrapper { width: 180px; text-align: center !important; }

    .spazio-servizi { margin-top: 10px !important; }

    html, body { background-color: #f2f2f2 !important; }



    /* --- SCORRIMENTO ORIZZONTALE CARD --- */

    .service .row.justify-content-center, .feature .row.justify-content-center { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; justify-content: flex-start !important; padding-bottom: 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }

    .service .row.justify-content-center::-webkit-scrollbar, .feature .row.justify-content-center::-webkit-scrollbar { display: none; }

    .service .row.justify-content-center > div[class*="col-"], .feature .row.justify-content-center > div[class*="col-"] { flex: 0 0 85% !important; max-width: 85% !important; scroll-snap-align: center; }

    .service-item .service-img img, .flip-card-front img { height: 180px !important; width: 100% !important; object-fit: cover !important; }



    /* --- FLIP CARDS MOBILE (Dissolvenza invece di rotazione 3D) --- */

    .flip-card { perspective: none !important; }

    @keyframes fadeModalIn { from { opacity: 0; } to { opacity: 1; } }

    @keyframes fadeModalOut { from { opacity: 1; } to { opacity: 0; } }

    .flip-card.closing { animation: fadeModalOut 0.3s ease-in forwards !important; }

    .flip-card.expanded { width: 95vw !important; height: 85vh !important; max-height: none !important; animation: fadeModalIn 0.4s ease-out forwards !important; }

    .flip-card.expanded .flip-card-inner { transform: none !important; -webkit-transform: none !important; transition: none !important; }

    .flip-card-back { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease-in-out !important; }

    .flip-card.expanded .flip-card-front { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease-in-out !important; }

    .flip-card.expanded .flip-card-back { transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; z-index: 10 !important; display: flex !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }



    /* --- ORGANIGRAMMA MOBILE --- */

    .org-chart-spine { --spazio-linee: 30px; display: flex !important; flex-direction: column !important; padding: 10px 0 30px 0 !important; }

    .org-row, .org-col-main, .org-col-branch { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

    .org-col-main:empty, .org-col-branch:empty { display: none !important; }

    .org-row::before, .org-row::after, .org-col-main::before, .org-col-main::after, .org-col-branch::before, .org-col-branch::after, .collab-card::before, .collab-card::after, .org-card::before { display: none !important; content: none !important; }

    .org-row:nth-child(1) .org-card { transform: translate(0px, -20px) !important; } 

    .branch-row .org-card { transform: translate(-15px, -25px) !important; } 

    .org-row:nth-child(3) .org-card { transform: translate(0px, -30px) !important; } 

    .org-row:nth-child(4) .org-card { transform: translate(0px, -40px) !important; } 

    .collab-row .org-col-main .org-card { transform: translate(0px, -40px) !important; } 

    .collab-row .org-col-branch { transform: translate(0px, -40px) !important; } 

    .collab-row .org-col-branch .collab-card:nth-child(1), .collab-row .org-col-branch .collab-card:nth-child(2), .collab-row .org-col-branch .collab-card:nth-child(3) { transform: translate(0px, 0px) !important; } 

    .org-card, .collab-card, .title-card { width: 90% !important; max-width: 320px !important; display: flex !important; flex-direction: column !important; position: relative !important; margin: 0 0 var(--spazio-linee) 0 !important; }

    .org-card::after, .collab-card::after { content: '' !important; position: absolute !important; top: calc(100% + 3px) !important; left: 50% !important; transform: translateX(-50%) !important; width: 3px !important; height: var(--spazio-linee) !important; background-color: #8c8c8c !important; display: block !important; z-index: 1 !important; }

    .collab-card:last-child { margin-bottom: 0 !important; }

    .collab-card:last-child::after { display: none !important; }



    /* --- CAROSELLO --- */

    .testimonial .testimonial-carousel .owl-nav .owl-prev { margin-top: -190px; margin-left: 40px; }

    .testimonial .testimonial-carousel .owl-nav .owl-next { margin-top: -190px; margin-right: 40px; }



    /* --- BACK TO TOP (mobile) --- */

    .back-to-top {position: fixed; right: 20px; bottom: 40px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; z-index: 99;opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}

    .back-to-top.show-btn {opacity: 1; visibility: visible;

}

    /* --- PILLOLE BLU E BOX --- */

    .about, .container-fluid.feature { position: relative !important; margin-top: 40px !important; padding-top: 40px !important; }

    .about::before, .container-fluid.feature::before { content: '' !important; position: absolute !important; top: -2.5px !important; left: 50% !important; transform: translateX(-50%) !important; width: 250px !important; height: 5px !important; background-color: var(--bs-primary) !important; border-radius: 10px !important; }

    body:has(.bg-breadcrumb) .about::before { display: none !important; }

    body:has(.bg-breadcrumb) .about { margin-top: 0 !important; padding-top: 3rem !important; }

    

    .service .container > div.rounded { background-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 40px !important; margin-bottom: 30px !important; }



    /* --- BOTTONI "TUTTI I SERVIZI" MOBILE --- */

    .service .border-top { border: none !important; padding-top: 15px !important; padding-bottom: 0 !important; margin-bottom: 50px !important; display: flex; justify-content: center; }

    .service .border-top .btn { width: 85% !important; max-width: 320px; padding: 12px 20px !important; font-size: 16px !important; border-radius: 50px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; }



    /* --- FOTO DOTT. CARLINO (MOBILE) --- */

    .about .about-img { position: static !important; }

    .about .about-img .p-4 { padding: 1rem !important; }

    .about .about-img img.img-fluid { max-height: 190px !important; width: auto !important; max-width: 100%; }

    .about .about-img h4 { font-size: 1.3rem !important; }

    .about .about-img .row.g-3 h6 { font-size: 14px !important; }

    .about .about-img .row.g-3 ul li { font-size: 12px !important; line-height: 1.4 !important; }





    /* Rimuove l'effetto "rimbalzo" del popup Privacy quando si clicca fuori */

    .modal.modal-static, .modal-dialog,

    .modal.modal-static {

    animation: none !important;

    transform: none !important;

    }



    /* ─── POPUP PRIVACY: OTTIMIZZAZIONE MOBILE ─── */

    @media (max-width: 768px) {

    

    #privacyModal .modal-body {

        padding: 15px !important; 

    }

    

    #privacyModal h2, 

    #privacyModal h3, 

    #privacyModal h4 { 

        font-size: 1.2rem !important;

        margin-bottom: 10px !important;

        line-height: 1.3 !important;

    }

    

    #privacyModal p, 

    #privacyModal li { 

        font-size: 0.85rem !important; 

        line-height: 1.4 !important;

        margin-bottom: 10px !important;

    }

    

    #privacyModal .btn { 

        padding: 6px 15px !important;

        font-size: 0.9rem !important;

    }

    /* ─── CONTROLLO ALTEZZA POPUP E SCROLL INTERNO (MOBILE) ─── */

    

    #privacyModal .modal-dialog {

        margin: 5vh auto !important; 

    }



    #privacyModal .modal-content {

        max-height: 80vh !important; 

        overflow: hidden !important; 

    }



    #privacyModal .modal-body {

        max-height: 65vh !important; 

        overflow-y: auto !important; 

    }



    /* ─── RIMOZIONE TOTALE TASTO X (MOBILE) ─── */

    #privacyModal .modal-header button[data-bs-dismiss="modal"], 

    #privacyModal .modal-header .btn-close,

    #privacyModal .modal-header .close,

    #privacyModal .modal-header span[aria-hidden="true"] {

        display: none !important;

    }



    #privacyModal .modal-title {

        width: 100% !important;

        text-align: center !important;

        margin: 0 !important;

    }



    #privacyModal .modal-footer {

        justify-content: center !important;

        border-top: none !important;

    }



/* --- SCROLL ORIZZONTALE GALLERIA (SOLO MOBILE) --- */

    .galleria-mobile-scroll {

        flex-wrap: nowrap !important;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;

        padding-bottom: 40px !important; /* AUMENTATO: stacca la galleria da ciò che c'è sotto */

        gap: 15px !important;            /* NUOVO: crea spazio elegante tra una foto e l'altra */

        scrollbar-width: none; 

    }

    

    .galleria-mobile-scroll::-webkit-scrollbar {

        display: none; /* Nasconde la scrollbar su Chrome e Safari */

    }

    

    .galleria-mobile-scroll > div[class*="col-"] {

        flex: 0 0 85% !important; /* La card prende l'85% dello schermo */

        max-width: 85% !important;

        scroll-snap-align: center; /* Fa "scattare" la foto al centro quando scorri */

    }

    }

}