/**
 * CUSTOM CSS - Dott.ssa Claudia Scumace
 * Sito Web Ginecologia e Ostetricia
 * ========================================
 */
#sppb-addon-8fb19a44-5265-48ab-9bbe-cb77e3c09432 img {
    border-radius: 0px;
    width: 100%!important;
    max-width: 100%!important;
    height: auto!important;
}


.img-fluid .sppb-addon-single-image-container  {
  
    width: 100%!important;
    max-width: 100%!important;
    height: auto!important;
}

.is_timeline_vt5 .mod-articles-category-introtext {
    font-size: clamp(1.0rem, 1vw + 0.74rem, 1.2rem);
    font-weight: normal;
      color: #5a5d62;
}

.is_timeline_vt5 .timeline__content {
    background-color: rgb(255, 255, 255, 0);
    color: #5a5d62;
    display: block;
    position: relative;
    border-radius: 0px;
    padding: 0rem;
}

.is_articletimeline .is_timeline_vt5 .noimage_timeline .timeline__content {
    padding-top: 0rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.is_articletimeline .mod-articles-category-introtext {
    margin: 5px 0 0px 0;
  
}

.box {
   
    background:#fff;
    border: 0.5px solid #ccc;
    border-radius: 12px;
      padding: clamp(20px, 4vw, 45px) clamp(15px, 4vw, 45px);

}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color:#152c5e!important;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #152c5e!important;
}

.article-details .article-full-image {
    margin-bottom: 0rem;
    padding: clamp(20px, 4vw, 45px) clamp(15px, 4vw, 45px);
    padding-bottom: 0px;
}

.article-details figcaption.caption {
    font-family: "Open Sans", sans-serif;
  line-height: 1.8;
  font-size: clamp(16px, 1.2vw, 18px); /* Ridotto il base: 22px era enorme per il testo scorrevole */
  color: #5a5d62;
  opacity:1;
}
a.carpenteria.text-decoration-none { color: #5a5d62;}


/* Nasconde il testo del titolo di default sulle miniature della gallery */
.profile-1 .ig-thumb-text {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Evita interferenze con i click sul blocco */
}

/* Mostra il testo fluidamente quando il mouse passa sopra il contenitore dell'immagine */
 .ig-grid-img-link:hover .ig-thumb-text {
    opacity: 1;
}


/* =================================================
   UNICO CSS: GRIGLIE 100% CROP FIT + STILE CARD (Universale)
   ================================================= */

/* 1. Reset dei contenitori principali (Gallerie e Menu Griglie) */
[id^="ig-thumbs-grid-"], .ig-thumbs-grid,
[id^="ig-menu-grid-"], .ig-menu-grid {
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px !important;
}

/* 2. Regolazione dei singoli blocchi/elementi a 3 colonne su desktop */
[id^="ig-thumbs-grid-"] .ig-thumbs-grid-block,
.ig-thumbs-grid .ig-thumbs-grid-block,
[id^="ig-menu-grid-"] .ig-menu-grid-item,
.ig-menu-grid .ig-menu-grid-item {
    width: calc(33.333% - 11px) !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
}

/* 3. Contenitore interno e proporzioni fisse uniformi (Aspect Ratio 4:3) */
[id^="ig-thumbs-grid-"] .ig-grid-img-link,
.ig-thumbs-grid .ig-grid-img-link,
[id^="ig-menu-grid-"] .ig-menu-image-inner,
.ig-menu-grid .ig-menu-image-inner {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    aspect-ratio: 4 / 3 !important; /* Modificabile es. in 16 / 9 */
    overflow: hidden;
    position: relative;
}

/* Assicura che il link wrapper del menu occupi tutto il blocco correttamente */
[id^="ig-menu-grid-"] .ig-menu-grid-link,
.ig-menu-grid .ig-menu-grid-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

/* 4. Crop Fit al 100%: L'immagine riempie il box tagliando l'eccedenza senza deformarsi */
[id^="ig-thumbs-grid-"] .ig-thumbs-grid-image,
.ig-thumbs-grid .ig-thumbs-grid-image,
[id^="ig-menu-grid-"] .ig-menu-grid-image,
.ig-menu-grid .ig-menu-grid-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 5. STILE GRAFICO (Gradiente & Tipografia stile Flipbox/Service Card) */
/* 1. Contenitore del testo: centrato verticalmente e orizzontalmente di base */
[id^="ig-menu-grid-"] .ig-menu-grid-text,
.ig-menu-grid .ig-menu-grid-text {
    background: transparent !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centrato verticalmente all'inizio */
    align-items: center !important;     /* Sempre centrato orizzontalmente */
    text-align: center !important;      /* Testo centrato */
    padding: 20px !important;
    z-index: 5;
    box-sizing: border-box;
    transition: justify-content 0.4s ease, padding 0.4s ease !important;
}

/* 2. Stile del titolo */
[id^="ig-menu-grid-"] .ig-menu-grid-text h4,
.ig-menu-grid .ig-menu-grid-text h4 {
    color: #fff !important;
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem);
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 5;
}

/* 3. Stato iniziale di descrizione e pulsante: nascosti con fade */
[id^="ig-menu-grid-"] .ig-menu-description,
.ig-menu-grid .ig-menu-description,
[id^="ig-menu-grid-"] .ig-menu-grid-text::after,
.ig-menu-grid .ig-menu-grid-text::after {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}

/* Descrizione centrata o con testo giustificato/centrato a seconda dei gusti */
[id^="ig-menu-grid-"] .ig-menu-description,
.ig-menu-grid .ig-menu-description {
    font-size: 0.85rem;
    color: #e0e0e0;
    text-align: center; /* Centrato anziché a sinistra */
    width: 100%;
    max-width: 400px; /* Evita che la lista si allarghi troppo sui box larghi */
}

/* Configurazione specifica del pulsante "Scopri la gallery" */
[id^="ig-menu-grid-"] .ig-menu-grid-text::after,
.ig-menu-grid .ig-menu-grid-text::after {
    content: "Scopri la gallery";
    display: inline-block;
    padding: 6px 16px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* =================================================
   AL PASSAGGIO DEL MOUSE (HOVER) - TUTTO CENTRATO
   ================================================= */

/* Sposta il contenuto verso l'alto per fare spazio, ma mantenendo TUTTO CENTRATO */
[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-grid-text,
.ig-menu-grid .ig-menu-grid-item:hover .ig-menu-grid-text {
    justify-content: center !important; /* Mantiene la centratura verticale complessiva o usa flex-start con un padding superiore */
    padding-top: 20px !important;
}

/* Soluzione alternativa più fluida per l'hover centrato: sposta leggermente in alto il blocco */
[id^="ig-menu-grid-"] .ig-menu-grid-item .ig-menu-grid-text {
    transform: translateY(0);
    transition: transform 0.4s ease !important;
}

[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-grid-text {
    transform: translateY(-15px); /* Solleva leggermente il blocco all'hover */
}

/* Rende visibili in dissolvenza (fade in) la descrizione e il pulsante all'hover */
[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-description,
.ig-menu-grid .ig-menu-grid-item:hover .ig-menu-description {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
    margin-top: 10px;
}

[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-grid-text::after,
.ig-menu-grid .ig-menu-grid-item:hover .ig-menu-grid-text::after {
    opacity: 1;
    visibility: visible;
    max-height: 50px;
    margin-top: 12px;
}

/* Stile interattivo del pulsante all'hover */
[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-grid-text::after {
    background: #fff;
    color: #072b3b;
}

/* Sfumatura dello sfondo all'hover */
[id^="ig-menu-grid-"] .ig-menu-grid-link::after,
.ig-menu-grid .ig-menu-grid-link::after {
    content: "";
    background: linear-gradient(to top, rgba(7, 43, 59, 0.9) 0%, rgba(7, 43, 59, 0.2) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease;
}

[id^="ig-menu-grid-"] .ig-menu-grid-item:hover .ig-menu-grid-link::after,
.ig-menu-grid .ig-menu-grid-item:hover .ig-menu-grid-link::after {
    background: linear-gradient(to top, rgba(7, 43, 59, 0.95) 0%, rgba(7, 43, 59, 0.6) 100%);
}

/* =================================================
   VERSIONE MOBILE (2 colonne su smartphone)
   ================================================= */
@media (max-width: 767px) {
    [id^="ig-thumbs-grid-"] .ig-thumbs-grid-block,
    .ig-thumbs-grid .ig-thumbs-grid-block,
    [id^="ig-menu-grid-"] .ig-menu-grid-item,
    .ig-menu-grid .ig-menu-grid-item {
        width: calc(50% - 8px) !important;
    }
}


/* =================================================
   CSS LIGHTBOX: FIX POSIZIONI, FRECCE E SPADZIATURA
   ================================================= */

/* 1. Sfondo immersivo ed elegante del Lightbox */
[id^="ig-lightbox-"].igui-lightbox {
    background: rgba(12, 14, 18, 0.94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}




/* 3. Pulsante di CHIUSURA (X) fisso in Alto a Destra */
[id^="ig-lightbox-"] .ig-lightbox-buttons {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
  
    margin: 0 !important;
}

[id^="ig-lightbox-"] .igui-close-large {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
    margin: 0 !important;
}

[id^="ig-lightbox-"] .igui-close-large:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: none !important; /* Elimina rotazioni o scatti */
}

[id^="ig-lightbox-"] .igui-close-large svg line {
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
}



/* 5. Fascia MINIATURE in Basso: Spaziatura e Padding corretti */
[id^="ig-lightbox-"] .ig-lightbox-bottom-wrapper {
    background: rgba(8, 10, 13, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 0 20px 0 !important; /* Padding sopra e sotto per staccare dal bordo */
    height: auto !important;
    box-sizing: border-box !important;
}

[id^="ig-lightbox-"] .ig-thumb-scroller {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

[id^="ig-lightbox-"] .ig-scroller-img-wrapper img {
    border-radius: 6px !important;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
    border: 2px solid transparent !important;
}

[id^="ig-lightbox-"] .ig-scroller-img-wrapper:hover img {
    opacity: 0.85;
}

[id^="ig-lightbox-"] .ig-scroller-img-wrapper.ig-active-thumb img {
    opacity: 1 !important;
    border-color: #ffffff !important;
    transform: none !important;
}

/* 6. Didascalia del Titolo */
[id^="ig-lightbox-"] .ig-lightbox-descriptions {
    color: #f1f5f9 !important;
    font-size: 0.9rem;
    padding-top: 8px !important;
    background: transparent !important;
}





/* ========================================
   IMPORT GOOGLE FONTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* ===================================================================
   1. STILI GENERALI E BODY
=================================================================== */
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.8;
  font-size: clamp(16px, 1.2vw, 18px); /* Ridotto il base: 22px era enorme per il testo scorrevole */
  color: #5a5d62;
}

.article-details .article-header, .article-info, .article-ratings-social-share,  h1.igallery_title, .sito .page-header {
  position: absolute!Important;
  top: -99999px!Important;
}

.breadcrumb {
  font-size: clamp(12px, 1.5vw, 14px);
  color: #eee;
  position: relative;
  z-index: 99;
}

/* ===================================================================
   2. TIPOGRAFIA (TITOLI RESPONSIVE)
=================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: "Raleway", sans-serif;
  line-height: 1.2;
}

/* Sistemati i clamp: ora scalano perfettamente da mobile a desktop senza rompere il layout */
h1, .h1 {
    font-size: clamp(1.4rem, 2vw + 0.8rem, 2.2rem);
    letter-spacing: 0.03em;
    font-weight: 700;
}
h2, .h2 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3.2rem);
  letter-spacing: 0.035em;
  font-weight: 600;
}

h3, .h3 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);
  font-weight: 500;
  color: #072b3b;
  letter-spacing: 0.01em;
  text-transform: uppercase; 
}

.h4 {
  font-size: clamp(1.3rem, 1.5vw + 0.9rem, 1.8rem) !important;
  line-height: 1.25;
  font-weight: 500;
  color: #072b3b;
  letter-spacing: 0.01em;
  text-transform: uppercase !important;
}

.h5 {
  font-size: clamp(1.1rem, 1vw + 0.8rem, 1.4rem);
  line-height: 1.3;
  font-weight: 500;
  color: #072b3b;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.section-tag {
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8251a;
  margin-bottom: 12px;
}

#section-id-960e3ffa-1398-4a09-aa4f-4878601b5943 .sppb-icon .sppb-icon-container {
    display: inline-flex;       /* Cambiato in flex per centrare l'icona */
    align-items: center;        /* Centra l'icona verticalmente */
    justify-content: center;    /* Centra l'icona orizzontalmente */
    
    width: 50px;                /* Scegli la dimensione che preferisci per il cerchio */
    aspect-ratio: 1 / 1;        /* Forza le proporzioni 1 a 1 (Quadrato perfetto) */
    border-radius: 50%;         /* Lo trasforma in un cerchio perfetto */
    

    
    /* Rimosso il padding fisso: con Flexbox e aspect-ratio non serve più 
       e rischiava solo di storcere l'icona se non era quadrata */
}

/* ===================================================================
   3. CLASSI DI UTILITÀ (HELPERS) & SEZIONI
=================================================================== */
.pt { padding-top: 3vw; }
.pb { padding-bottom: 3vw; }
.white { color: #fff; }

#sp-main-body {
  padding: clamp(10px, 2vw, 20px) 0px;
}

.sezione {
  padding: clamp(30px, 5vw, 80px) clamp(15px, 4vw, 45px);
}

.sezione-testo, .com-igallery #sp-main-body {
  padding: clamp(20px, 4vw, 45px) clamp(15px, 4vw, 45px);
}


.ig-des-filename {
    margin-bottom: 5px;
    font-weight: 700;
    color:#fff;
text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
}
.igui-padding-small {
    padding: 8px;
    
}

.igui-position-bottom {
    bottom: 0px;
    left: 0;
    right: 0;
    height: auto!important;
    max-height: 100vh; 
}
.ig-lightbox-descriptions-below {
  min-height: 150px!important;
    max-height: 100vh; /* Evita che esca dallo schermo se il contenuto è lunghissimo */
    padding-bottom: 15px;
    overflow-y: auto;
    max-width: 1600px;
      font-family: "Open Sans", sans-serif;
    margin: 0 auto;

}
.igui-light {

      font-family: "Open Sans", sans-serif;
       
    text-align: center; 
}
.igui-overlay-primary {
    color: rgba(255, 255, 255, 1);
      font-family: "Open Sans", sans-serif;
         text-transform: uppercase;
    text-align: center; 
    font-weight: 500;
}
.igui-lightbox-items img, .igui-lightbox-items iframe {
    max-height: 90% !important;
    max-width: 100% !important;
 
}

.igui-lightbox-toolbar {

     background: rgba(0, 0, 0, .0);
}



#start { 
  padding: clamp(30px, 5vw, 60px) clamp(15px, 4vw, 45px);
}


#contactForm .terms-container {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: left;
}
#contactForm .terms-container input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
#contactForm .terms-container label {
	font-size: 13px;
	color: #495057;
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
}
#contactForm .terms-container label a {
	color: #007bff;
	text-decoration: underline;
}
#contactForm .terms-container label a:hover {
	color: #0056b3;
}
/* ===================================================================
   4. COMPONENTI (HERO, CARDS, FEATURE LISTS)
=================================================================== */
/* Hero Section */
.hero-tag {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c90a0e;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-tag::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #c90a0e;
}

.hero h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 6vw, 80px); /* Abbassato il minimo a 32px per i telefoni piccoli */
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.hero h1 em {
  font-style: normal;
  color: #c90a0e;
  display: block;
}
.hero-desc {
  font-size: 16px;
  font-weight: 300;
  color: #eee;
  max-width: 420px;
  line-height: 1.7;
  margin-bottom: 48px;
}

/* Box Angoli Decorativi (Fusion) */
.fusion-column-wrapper {
  position: relative;
  padding: clamp(20px, 4vw, 40px);
}
.fusion-column-wrapper::before, .fusion-column-wrapper::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 60px;
  border: 2px solid #db080f;
}
.fusion-column-wrapper::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.fusion-column-wrapper::after { bottom: 0; right: 0; border-top: 0; border-left: 0; }

/* Flipbox / Cards */
.sppb-flipbox-panel, .threeD-item {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 2;
}

.service-card {
  background: #ffffff;
  height: 100%;
  margin: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: background 0.25s;
  cursor: pointer;
}
.service-card .sppb-flipbox-front-title { color: #fff; font-weight: 300; position: relative; z-index: 5; }
.service-card .sppb-flipbox-front-paragraph, .sppb-flipbox-back-title { 
  color: #fff; 
  font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem); 
  text-transform: uppercase; 
  font-weight: 600; 
  position: relative; 
  z-index: 5; 
}
.sppb-flipbox-back-button { margin-top: 10px; }
.sppb-flipbox-panel .flip-box .flip-box-inner { position: relative; z-index: 5 !important; }

.service-card .sppb-flipbox-panel .sppb-flipbox-front:after {
  content: "";
  background: linear-gradient(rgb(7, 43, 59) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.service-card .sppb-flipbox-panel .sppb-flipbox-back:after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  background: #072b3ba6;
}

/* Stats */
.stats-bar { background: #152C5E; }
.sppb-animated-number { font-weight: 600; font-size: clamp(38px, 4vw, 52px); line-height: 1; color: #fff; }
.sppb-animated-number::after { font-size: 24px !important; color: #c90a0e !important; }
.sppb-animated-number-title { font-weight: 300; color: #fff; letter-spacing: 0.06em; margin-top: 6px; text-transform: uppercase; }

#servizi .service-title h4.sppb-addon-title, #settori .settore-item h4 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.04em;
  
  line-height: 1.1;
}

.contatti-section { background: #f7f6f4; }
#intervento { background: #f7f6f4; }
.info-box { background: #fff; padding: 28px 32px; }

/* Grid Features (Fatta Diventare Responsive ed Elastica) */
.about-features {
  display: grid;
  grid-template-columns: 1fr; /* Di base 1 colonna su Mobile */
  gap: 18px;
  margin-top: 40px;
}
.feature-item { display: flex; align-items: flex-start; gap: 12px; }
.feature-dot { width: 6px; height: 6px; background: #c90a0e; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }

#azienda .image-layout-preset-style-card .sppb-addon-image-layout-content {
  padding: clamp(40px, 6vw, 100px) clamp(20px, 4vw, 45px);
}

.settore-item {
  background: #fff;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: background 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.settore-item:hover { background: #fdf9f9; }
.settore-item .sppb-img-container {
  width: 52px; height: 52px;
  background: #c8251a14;
  border: 1px solid rgba(200, 37, 26, 0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settore-item .sppb-img-container img.sppb-img-responsive { padding: 10px; }

/* Strips */
.cert-strip {
  padding: clamp(20px, 5vw, 60px) clamp(15px, 4vw, 45px);
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  background: #fff;
}
.cert-label {
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a9896;
  flex-shrink: 0;
}
.red-strip {
  background: #152c5e;
  padding: clamp(20px, 5vw, 60px) clamp(15px, 4vw, 45px);
  color: #fff;
}
.red-strip h3 {
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ===================================================================
   5. HEADER & NAVIGAZIONE (DESKTOP BASE)
=================================================================== */
#sp-header {
  height: 110px;
  width: 100%;
  position: relative;
  z-index: 99;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  animation: spFadeIn 0.5s;
  background: #fff;
}


.itemid-101 #sp-header .burger-icon>span {
 
    background-color: #fff!important;

}


.itemid-101 #sp-header.header-sticky .burger-icon>span {
 
    background-color: #000!important;

}


.itemid-101 #sp-header { background: transparent; box-shadow: none; }

#sp-header.header-sticky, .itemid-101 #sp-header.header-sticky {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}
#sp-header.header-sticky .logo, #sp-header.header-sticky .logo-image {
  height: 50px !important;
  display: inline-flex;
  margin: 0;
  align-items: center;
}
#sp-header.header-sticky .contatti-menu { display: none !important; }
#sp-header .logo { height: 90px; display: inline-flex; margin: 0; align-items: center; }
.logo-image { height: 70px !important; margin: 0 auto; }
#sp-header #sp-logo { border-bottom: 0px !important; }

/* Contact elements in header */
.sp-contact-info li { display: inline-flex; margin: 0px 18px 0px 0px; font-size: 100%; white-space: nowrap; align-items: center; }
.sp-contact-info li a, .itemid-101 #sp-header.header-sticky .sp-contact-info li a { color: #252525; }
 .itemid-101 #sp-header .sp-contact-info li a { color: #fff; }

.itemid-101 #sp-header #sp-menu > div > div.col-12.d-flex.justify-content-end.pb-1.contatti-menu, 
.itemid-101 #sp-header #sp-menu > div > div:nth-child(2) > div > div.menu-with-offcanvas.d-flex.justify-content-between.align-items-end.flex-auto > nav {
  justify-content: center !important;
  transition: margin-left 0.4s ease-in-out, margin-right 0.4s ease-in-out;
  margin-left: auto; margin-right: auto;
}
.itemid-101 #sp-header.header-sticky #sp-menu > div > div.col-12.d-flex.justify-content-end.pb-1.contatti-menu, 
.itemid-101 #sp-header.header-sticky #sp-menu > div > div:nth-child(2) > div > div.menu-with-offcanvas.d-flex.justify-content-between.align-items-end.flex-auto > nav {
  margin-left: auto; margin-right: 0px;
  justify-content: flex-end !important;
}

.itemid-101 #sp-header #sp-logo {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  position: absolute; pointer-events: none;
}
.itemid-101 #sp-header.header-sticky #sp-logo { opacity: 1; visibility: visible; pointer-events: auto; position: relative; }


.offcanvas-menu .offcanvas-inner .sp-contact-info>li>a, .offcanvas-menu .offcanvas-inner .social-icons>li>a {
    opacity: 1; padding-left: 10px;
}


#sp-header .sp-contact-phone span, #sp-header .sp-contact-email span,
.itemid-101 #sp-header .sp-contact-phone span, .itemid-101 #sp-header .sp-contact-email span {
  aspect-ratio: 1 / 1; width: 35px;
  border: 1px solid #c90a0e; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  color: #fff; margin-right: 8px;
}
.itemid-101 #sp-header .sp-contact-phone span, .itemid-101 #sp-header .sp-contact-email span { border-color: #fff; }

#sp-menu ul.social-icons li.social-icon-linkedin {
  aspect-ratio: 1 / 1; width: 35px;
  background-color: #0073B1;
  display: flex; justify-content: center; align-items: center;
}
#sp-menu ul.social-icons li.social-icon-linkedin a { color: #fff; font-size: 25px; }

/* Megamenu Rules */
.itemid-101 #sp-header .sp-megamenu-parent>li>a, .itemid-101 #sp-header .sp-megamenu-parent>li>span { color: #fff; opacity: .8; }
.itemid-101 #sp-header .sp-megamenu-parent>li:hover>a { opacity: 1; }

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, .itemid-101 #sp-header.header-sticky .sp-megamenu-parent>li>a, .itemid-101 #sp-header.header-sticky .sp-megamenu-parent>li>span { color: #252525; }
.sp-megamenu-parent>li:hover>a { color: #000; }
.sp-megamenu-parent>li.active>a { color: #252525; }

#sp-menu ul li a.preventivo, .itemid-101 #sp-header.header-sticky #sp-menu ul li a.preventivo, #sp-menu ul li.active a.preventivo {
  padding: 0px 15px!important; text-transform: uppercase; color: #fff !important; background: #db080f!important; border: none; transition: background 0.2s !important;  
}
.itemid-101 #sp-header #sp-menu ul li a.preventivo { background: transparent; }
#sp-menu ul li a.preventivo:hover { background: #a01d14; }


.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  display: inline-block; padding: 0 15px; line-height: 60px; font-size: 14px; margin: 0;
}
#sp-menu .sp-megamenu-parent > li {
  font-family: "Raleway", sans-serif; font-weight: 400; font-size: 16px !important; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6967; text-decoration: none; transition: color 0.2s;
}
.sp-megamenu-parent > li.active > a { padding: 0 !important; font-weight: 500 !important; }
.sp-megamenu-wrapper > ul > li.active > a { border-bottom: 0px solid #111; background: none !important; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover { color: #000 !important; font-weight: 600; }
#sp-menu.menu-center .sp-megamenu-wrapper { justify-content: end; }







/* ============ SEZIONE SEO KEYWORDS ============ */
#sp-section-3 {
  background-color: #f8f9fa;

  border-top: 1px solid #e9ecef;
      padding: 40px 20px;
}

/* Card del modulo */
#sp-section-3 .sp-module {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#sp-section-3 .sp-module:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Titolo della categoria */
#sp-section-3 .sp-module-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a252f;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #152c5e; /* Colore d'accento */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Reset e Layout della lista */
#sp-section-3 ul.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Spazio tra le pill */
}

/* Singoli elementi lista */
#sp-section-3 ul.menu li {
  margin: 0 !important;
  padding: 0 !important;
}

#sp-section-3 ul.menu li::before {
  display: none !important; /* Rimuove eventuali pallini del tema Joomla */
}

/* Link in stile "Tag / Badge" */
#sp-section-3 ul.menu li a {
  display: inline-block;
  padding: 6px 14px;
  background-color: #f1f3f5;
  color: #495057;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

/* Hover sui link */
#sp-section-3 ul.menu li a:hover {
  background-color: #152c5e;
  color: #ffffff;
  transform: scale(1.03);
}

/* Stato Attivo (Pagina Corrente) */
#sp-section-3 ul.menu li.active a,
#sp-section-3 ul.menu li.current a {
  background-color: #152c5e;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3);
}

/* Responsive per schermi piccoli */
@media (max-width: 991px) {
  #sp-section-3 .col-lg-3 {
    margin-bottom: 20px;
  }
}

/* ===================================================================
   6. BOTTONI
=================================================================== */
.sppb-btn { text-transform: uppercase; border-radius: 0px; font-size: 18px; font-weight: 600; letter-spacing: 0.12em; }
.btn-primary, .sppb-btn-primary {
  background: #c90a0e !important; color: #fff; font-family: "Raleway", sans-serif; font-weight: 700; font-size: 18px!important; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0px!important; border: none; padding: 16px 40px; cursor: pointer; transition: background 0.2s; align-self: flex-start;
}
.btn-primary a, .sppb-btn-primary a { color: #fff !important; }
.btn-primary:hover, .sppb-btn-primary:hover { background: #a01d14 !important; color: #fff; }

.btn-secondary, .sppb-btn-secondary {
  background: #fff !important; color: #c90a0e; font-family: "Raleway", sans-serif; font-weight: 700; font-size: 18px!important; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0px!important; border: none; padding: 16px 40px; cursor: pointer; transition: background 0.2s;
}
.btn-secondary:hover, .sppb-btn-secondary:hover { opacity: 0.88; color: #c90a0e; }

.sppb-btn-info {
  font-family: "Raleway", sans-serif; font-weight: 700; background: #fff; font-size: 13px; letter-spacing: 0.06em; color: #3a3836; border: 1px solid rgba(0,0,0,0.18); text-transform: uppercase; transition: border-color 0.2s, color 0.2s, background 0.2s; cursor: pointer;
}
.sppb-btn-info:hover { border-color:#c8251a; color:#c8251a; background: rgba(200,37,26,0.08); }

/* ===================================================================
   7. INTERFACCIA COMPONENTI TERZI (SLIDER, CATALOGO, PAGES, FORMS)
=================================================================== */
/* Page titles */
.sp-page-title {
  position: relative; padding: 180px 0 40px !important; /* Ridotto il padding top assurdo su schermi piccoli */
  background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: cover !important; overflow: hidden; 
}
.sp-page-title:after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:linear-gradient(
    to right,
    rgb(15, 66, 119, 0.85) 0%,
    rgba(49, 91, 132, 0.65) 40%,
    rgba(96, 128, 159, 0.5) 75%,
    rgba(255, 255, 255, 0) 100%
  );


  z-index: 1;
}

.itemid-119 .sp-page-title {
   
    background-position: 50% 100% !important;
 
}


.sp-page-title .container { top: 0px!important; background: transparent!important; padding: 0px 15px 30px 15px!important; max-width: 1200px; z-index: 2; }
.sp-page-title .sp-page-title-sub-heading { position: relative; color:#fff; font-size: clamp(18px, 2.2vw, 24px); font-weight: 600 }
.sp-page-title .sp-page-title-heading { position: relative; z-index: 99; font-size: clamp(2rem, 3vw + 1rem, 4rem)!important; letter-spacing: 0.05em!important; font-weight: 700!important; line-height: 1.2!important; color: #fff!important; text-transform: uppercase; }

/* Slider Ken Burns */
.movie::before { content: ''; background: #000; opacity: .2; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 2; mix-blend-mode: multiply; }
#section-id-f5774585-15ce-4a84-b087-cf82a33dee33 { z-index: 20!important; }
.movie .sp-item.active .sp-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; animation-duration: 5.5s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-fill-mode: forwards; }
.movie .sp-item:nth-of-type(3n+1).active .sp-background { animation-name: kbf1; }
.movie .sp-item:nth-of-type(3n+2).active .sp-background { animation-name: kbf2; }
.movie .sp-item:nth-of-type(3n+3).active .sp-background { animation-name: kbf3; }
@keyframes kbf1 { 0% { transform: scale(1.0); } 100% { transform: scale(1.08) translateX(1%); } }
@keyframes kbf2 { 0% { transform: scale(1.12); } 100% { transform: scale(1.02) translateX(-1%); } }
@keyframes kbf3 { 0% { transform: scale(1.0); } 100% { transform: scale(1.09); } }

/* Catalogo e Form */
.djc_items .djc_image img { padding: 0px!important; }
.djc_items .djc_image a { overflow: hidden !important; position: relative; left: 0; }
.djc_items .djc_image a:hover::after { content: ""; position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4) ; z-index: 1 !important; cursor: pointer; }

.bfQuickMode section .bfbs5-row, .bfQuickMode section .row { margin-left: 0px!important; }
.bfQuickMode .form-inline .form-group { margin-right: 0px!important; }
.bfQuickMode .bfElemWrap .form-inline input[type="text"], .bfQuickMode .bfElemWrap .form-inline textarea, .bfQuickMode .bfElemWrap .form-inline select { max-width: 100%!important; }
.form-inline { position: relative; margin-bottom: 15px!important; }
.form-control { display: block; width: 100%; padding: 12px 16px; font-size: 1rem; color: #212529; background-color: #fff; border: 1px solid #ced4da; border-radius:0rem; }
.bfQuickMode .bfElemWrap label { color:#9a9896; font-family: "Raleway", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }

.bfQuickMode .bfElemWrap {
    margin-bottom: 0px!important;
}

#sp-right .form-inline {
    position: relative;
    margin-bottom: 5px !important;
}
#sp-right .bfQuickMode .bfElemWrap label {
    color: #9a9896;
    font-family: "Raleway", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#sp-right  .form-control {
    display: block;
    width: 100%;    padding: .375rem .75rem;
    font-size: 1rem;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0rem;
}
/* ===================================================================
   8. FOOTER & BOTTOM BAR
=================================================================== */
#sp-bottom { color: #fff !important; padding: 50px 20px; background: #152c5e; }
#sp-bottom .menu > li { font-size: 16px!important; font-weight: 300!important; color: rgba(255, 255, 255, 0.4)!important; text-decoration: none!important; line-height: normal !important; }
#sp-bottom .menu > li > a { padding: 0px; line-height: 30px!important; font-size: 16px!important; color: #fff; }

#sp-footer { color: #fff; padding: 20px; background: #152c5e; text-align: center; }
#sp-footer .container-inner { border-top: 1px solid rgba(255,255,255,0.2) !important; padding: 30px 10px; }
.white img {  filter: brightness(0) invert(1) !important; }
#sppb-addon-dbf2f7c6-67d0-46d7-ab93-92794d54eb55 img {
    border-radius: 0px;
    max-width: 600px;
    opacity:.8;
    width: 90%;
    height: auto;
}
/* Offcanvas mobile menu rules */
.offcanvas-menu .menu-parent > span { cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.offcanvas-menu .menu-parent > span::after{ content: "\f107"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif; font-weight: 900; margin-left: auto; transition: transform 0.3s; float: right; }
.offcanvas-menu .menu-parent.active > span::after { transform: rotate(180deg); }

/* Nasconde eventuali elementi di toggle nativi del template che creano la doppia freccia */
.offcanvas-menu .menu-parent > span .menu-toggler,
.offcanvas-menu .menu-parent > span .fa-angle-down,
.offcanvas-menu .menu-parent > span .fa-chevron-down,
.offcanvas-menu .menu-parent > span::before {
    display: none !important;
}


/* Container principale */
.moduletable {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px; /* Spazio tra le card */
  justify-content: center;
  align-items: stretch;
  padding: 15px 0;
}

/* Nasconde i div di clear interni che forzano l'andata a capo */
.moduletable > div[style*="clear"] {
  display: none !important;
}

/* Singola Card (Elemento) */
.moduletable .jd_module_link {
  /* Larghezza responsive estilo Bootstrap (4 su desktop, 2 su tablet, 1 su mobile) */
  flex: 1 1 calc(25% - 20px);
  min-width: 200px;
  max-width: 280px;
  
  /* Stile estetico (Card tipo Bootstrap) */
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  
  /* Disposizione interna dell'immagine e del testo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Effetto Hover stile moderno */
.moduletable .jd_module_link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: #0056b3; /* Opzionale: cambia colore al bordo al passaggio del mouse */
}

/* Immagine responsive proporzionata */
.moduletable .jd_module_pic {
  width: 100% !important;
  max-width: 120px !important; /* Limita la dimensione per un look pulito */
  height: auto !important;
  margin-bottom: 15px;
  object-fit: contain;
}

/* Testo / Link */
.moduletable .jd_module_link a:not(:has(img)) {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333333;
  text-decoration: none;
  line-height: 1.3;
}

.moduletable .jd_module_link:hover a:not(:has(img)) {
  color: #0056b3;
}

/* --- Adattamento Responsive --- */
@media (max-width: 768px) {
  .moduletable .jd_module_link {
    flex: 1 1 calc(50% - 20px); /* 2 per riga su tablet */
  }
}

@media (max-width: 480px) {
  .moduletable .jd_module_link {
    flex: 1 1 100%; /* 1 per riga su mobile */
    max-width: 100%;
  }
}

/* ===================================================================
   9. MEDIA QUERIES (RESPONSIVE STRUTTURATO)
=================================================================== */

/* 📱 DISPOSITIVI MOBILE (Fino a 767px) */
@media (max-width: 767px) {


  


  #sp-header { height: 75px; padding: 10px 0 !important; }
  .logo-image { height: 60px !important; }
  
  /* Forza l'allineamento verticale ed evita sovrapposizioni del menu mobile */
  #sp-header .row { align-items: center; justify-content: space-between; }
  
  .about-features { grid-template-columns: 1fr; } /* Assicura 1 colonna pulita */
  .settore-item { flex-direction: column; gap: 15px; } /* Impila icona e testo */
  
  .sp-page-title { padding: 140px 0 30px !important; }
  
  /* Flipbox / Cards */
.sppb-flipbox-panel, .threeD-item {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
}

/* 📑 TABLET / IPAD VERTICALE (Da 768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-features { grid-template-columns: 1fr 1fr; } /* Qui 2 colonne stanno comode */
  #sp-header { height: auto; padding: 10px 0 !important; }
  .logo-image { height: 55px !important; }
}

/* 💻 IPAD ORIZZONTALE E NOTEBOOK PICCOLI (Da 1024px a 1365px) */
@media (min-width: 1024px) and (max-width: 1365px) {
  .about-features { grid-template-columns: 1fr 1fr; }
  #sp-header .logo-image { height: 60px !important; }
  
  /* Riduce leggermente il padding per far stare il menu in linea se non passa ad offcanvas */
  .sp-megamenu-parent > li > a { padding: 0 10px; font-size: 13px; }
}

/* 🖥️ SCHERMI DESKTOP COMPATTI (Fino a 1365px generico - pulizia vecchio codice) */
@media (max-width: 1365px) {

  #sp-header.header-sticky { height: 50px !important; background: rgba(255, 255, 255, 0.98) !important; } /* Rimosso il nero opaco 0.95 che spezzava il design bianco */
  #sp-header.header-sticky .logo-image { height: 40px !important; }
  
  .size-full2 img, .size-full img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
}

/* 🛑 RECOLA SPECIFICA PER TAGLIO MENU SU DESKTOP LARGO */
@media (min-width: 1024px) {
  
    .itemid-117 #sp-main-body{
  background: linear-gradient(to right, #f2f2f2 50%, #ffffff 50%);
  
  
  /* Se questa regola serve a nascondere voci extra su desktop, mantenuta ma ripulita */
  #sp-menu > div > nav > ul > li:nth-child(n + 5) { 
    /* display: none!important; */ /* Nota: scommenta se hai davvero bisogno di segare il menu dal 5° elemento in poi */
  }
}

/* 🖥️ SCHERMI GRANDI (Monitor Desktop Wide) */
@media (min-width: 1400px) {
  body .sppb-row-container, body .sppb-container, .container {
    max-width: 1348px !important;
  }
  
  
}
}