.elementor-11 .elementor-element.elementor-element-7d2befb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-7d2befb:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-7d2befb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://babolin.info/wp-content/uploads/2025/06/Progetto-senza-titolo-1.png");background-position:center center;background-repeat:no-repeat;}.elementor-11 .elementor-element.elementor-element-7d2befb::before, .elementor-11 .elementor-element.elementor-element-7d2befb > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-7d2befb > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-7d2befb > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-7d2befb > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-7d2befb > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-17dcbad{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11 .elementor-element.elementor-element-17dcbad:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-17dcbad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-11 .elementor-element.elementor-element-850f396{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11 .elementor-element.elementor-element-c4d70af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11 .elementor-element.elementor-element-c4d70af:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-c4d70af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-11 .elementor-element.elementor-element-9e27173{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11 .elementor-element.elementor-element-1a479f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11 .elementor-element.elementor-element-1a479f9:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-1a479f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}:root{--page-title-display:none;}@media(min-width:1025px){.elementor-11 .elementor-element.elementor-element-7d2befb:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-7d2befb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-7d2befb *//* =========================================================
   HERO · CHI SIAMO (multisettore)
   ========================================================= */
.hero-about{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

.hero-about__content{
  position:relative;
  z-index:2;
  max-width:820px;
  padding:0 1rem;
}

/* Titolo */
.hero-about__title{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(2.1rem,5vw + 1rem,3.3rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 1rem;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.hero-about__title em{
  font-style:normal;
  color:var(--color-accent);                /* rosso brand */
}

/* Sottotitolo */
.hero-about__subtitle{
  font-size:clamp(1rem,1vw + .6rem,1.25rem);
  font-weight:500;
  margin:0 0 2rem;
}

/* CTA */
.hero-about__btn{
  display:inline-block;
  background:var(--color-accent);
  color:#fff;
  padding:.9rem 2.6rem;
  border-radius:4px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s;
}
.hero-about__btn:hover{background:var(--color-accent-d);}

/* Mobile tweaks */
@media(max-width:767px){
  .hero-about{min-height:50vh;}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-17dcbad *//* =========================================================
   SEZIONE 2 · ABOUT – VALORI
   ========================================================= */
.about-values{
  padding:3rem 1rem;
  background:var(--color-bg-alt);          /* grigio 100 */
  text-align:center;
}

.values__title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);
  font-weight:800;
  font-size:clamp(1.7rem,2vw + 1rem,2.2rem);
  margin-bottom:2rem;
}

/* ----- griglia 3 card ----- */
.values__grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:900px;
  margin-inline:auto;
}

/* ----- card ----- */
.values-card{
  background:#fff;
  border:1px solid var(--gray-400);
  border-radius:12px;
  padding:2rem 1.5rem 2.3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.values-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  border-color:var(--color-primary);
}

/* icona */
.values-icon{
  font-size:60px;                 /* sostituisci con SVG 60×60 se vuoi */
  color:var(--color-primary);
  margin-bottom:.7rem;
}

/* headline + testo */
.values-head{
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-primary);
  margin:.2rem 0 .6rem;
}
.values-text{
  font-size:.95rem;
  color:var(--gray-700);
  line-height:1.55;
  margin:0;
}

/* mobile icona leggermente più piccola */
@media(max-width:575px){
  .values-icon{font-size:48px;}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-850f396 *//* =========================================================
   TIMELINE · LA NOSTRA STORIA
   Desktop: alternata · Mobile: colonna, spine a sinistra, card a destra
   ========================================================= */

/* sezione */
.story-section{
  background:#fff;
  padding:3rem 1rem 3.5rem;
  text-align:center;
}
.st-title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);
  font-weight:800;
  font-size:clamp(1.7rem,2vw + 1rem,2.2rem);
  margin-bottom:2.2rem;
}

/* variabili + fallback */
:root{
  --spine-w: 56px;                         /* colonna centrale desktop */
  --card-bg: #f5f7fa;                      /* grigio chiaro card */
  --line: var(--gray-300, #d6dbe3);        /* linea verticale */
  --dot: var(--color-accent, #E31C24);     /* pallino rosso */
  --blue: var(--color-primary, #0A4EA8);   /* blu brand */
}

/* griglia timeline */
.tl-grid{
  display:grid;
  row-gap:1.8rem;
  max-width:1100px;
  margin-inline:auto;
}
.tl-row{
  display:grid;
  grid-template-columns:1fr var(--spine-w) 1fr; /* sx | spina | dx */
  column-gap:16px;
  align-items:stretch;                     /* spine e card stessa altezza riga */
  position:relative;
  min-height:120px;
}

/* spina + pallino (desktop) */
.tl-spine{
  grid-column:2;
  position:relative;
}
.tl-spine::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:2px; background:var(--line);
}
.tl-dot{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--dot); z-index:1;
}

/* card (desktop alternata) */
.tl-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.2rem 1.4rem;
  text-align:left;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  max-width:520px;
}
.tl-card.left{  grid-column:1; justify-self:end; }
.tl-card.right{ grid-column:3; justify-self:start; }

/* triangolino verso la spina (solo desktop) */
.tl-card.left::after, .tl-card.right::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  border:8px solid transparent;
}
.tl-card.left::after{  right:-16px; border-left-color:var(--card-bg); }
.tl-card.right::after{ left:-16px;  border-right-color:var(--card-bg); }

/* contenuti */
.tl-year{
  display:inline-block;
  font-weight:800;
  color:var(--dot);
  font-size:1.05rem;
  letter-spacing:.3px;
  margin:0 0 .15rem;
}
.tl-head{
  margin:.05rem 0 .25rem;
  font-weight:700;
  color:var(--blue);
  font-size:1.05rem;
}
.tl-text{
  margin:0;
  color:var(--gray-700, #4a5568);
  font-size:.95rem;
  line-height:1.5;
}

/* hover desktop */
.tl-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  border-color:var(--blue);
}

/* =========================================================
   MOBILE (≤ 767px): colonna, spine a SINISTRA, card a DESTRA
   ========================================================= */
@media (max-width:767px){

  :root{ --spine-w: 28px; }

  .tl-row{
    grid-template-columns: var(--spine-w) 1fr;   /* spina | card */
    column-gap:12px;
    align-items:stretch;                          /* spina alta quanto la card */
    min-height:0;
  }

  /* spina a sinistra: linea piena + dot centrato con FLEX */
  .tl-spine{
    grid-column:1;
    position:relative;
    display:flex;                /* << robusto */
    align-items:center;          /* centra verticalmente il pallino */
    justify-content:center;      /* centra orizzontalmente */
  }
  .tl-spine::before{
    content:"";
    position:absolute;
    left:50%; transform:translateX(-50%);
    top:0; bottom:0;
    width:2px; background:var(--line);
  }
  .tl-dot{
    position:relative;           /* non più absolute */
    transform:none;
    width:12px; height:12px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--dot);
    z-index:1;
  }

  /* tutte le card a destra */
  .tl-card{
    grid-column:2;
    justify-self:stretch;
    max-width:none;
    padding:1rem 1.1rem;
  }

  /* triangolini nascosti su mobile; al loro posto un connettore orizzontale */
  .tl-card.left::after,
  .tl-card.right::after{ display:none; }

  .tl-card::before{
    content:"";
    position:absolute;
    left:-12px;                   /* dal bordo card verso la spina */
    top:50%; transform:translateY(-50%);
    width:12px; height:2px;
    background:var(--line);
  }

  .tl-grid{ row-gap:1.2rem; }
}
/* =========================================================
   OVERRIDE MOBILE (≤ 767px)
   Timeline: colonna singola, spine a sinistra, card allineate a destra
   ========================================================= */
@media (max-width: 767px){

  /* parametri regolabili */
  :root{
    --tl-line-left: 12px;        /* distanza della linea dal bordo sinistro */
    --tl-card-indent: 40px;      /* rientro card rispetto alla linea */
    --tl-dot-size: 12px;         /* diametro del pallino (senza bordo) */
    --tl-dot-offset: 1.1rem;     /* distanza del pallino dal top della card */
    --tl-line-color: var(--gray-300, #d6dbe3);
    --tl-dot-color: var(--color-accent, #E31C24);
  }

  /* niente più layout alternato: ogni riga diventa blocco */
  .tl-row{
    display:block !important;
    min-height:0 !important;
  }

  /* nascondi spine/colonna centrale/placeholder originali */
  .tl-spine,
  .tl-empty{
    display:none !important;
  }

  /* linea verticale unica a sinistra dell'intera sezione */
  .tl-grid{
    position:relative;
    row-gap: 1.2rem !important;          /* compattiamo un filo le righe */
  }
  .tl-grid::before{
    content:"";
    position:absolute;
    left:var(--tl-line-left);
    top:0; bottom:0;
    width:2px;
    background:var(--tl-line-color);
  }

  /* card a destra, tutte uguali */
  .tl-card{
    max-width:none !important;
    margin:0 0 14px calc(var(--tl-line-left) + var(--tl-card-indent));
    padding:1rem 1.1rem;
    position:relative;
    text-align:left;
  }
  .tl-card.left,
  .tl-card.right{
    grid-column:auto !important;
    justify-self:stretch !important;
  }

  /* disattiva i triangolini del layout desktop */
  .tl-card.left::after,
  .tl-card.right::after{
    display:none !important;
  }

  /* PALLINO per ogni card (ancorato alla card, ma allineato alla linea) */
  .tl-card::before{
    content:"";
    position:absolute;
    left: calc(-1 * var(--tl-card-indent));
    top: var(--tl-dot-offset);
    width: var(--tl-dot-size);
    height: var(--tl-dot-size);
    border-radius:50%;
    background:#fff;
    border:3px solid var(--tl-dot-color);
    transform: translateX(-50%);         /* centra il pallino sulla linea */
  }

  /* connettore orizzontale (lineetta che unisce pallino e card) */
  .tl-card::after{
    content:"";
    position:absolute;
    left: calc(-1 * var(--tl-card-indent) + var(--tl-dot-size)/2);
    top: calc(var(--tl-dot-offset) + var(--tl-dot-size)/2 - 1px);
    width: calc(var(--tl-card-indent) - var(--tl-dot-size)/2);
    height:2px;
    background: var(--tl-line-color);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c4d70af *//* =========================================================
   SEZIONE 4 · TEAM
   ========================================================= */
.about-team{
  padding:3rem 1rem;
  background:var(--color-bg-alt);          /* grigio 100 */
  text-align:center;
}

.team__title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);
  font-weight:800;
  font-size:clamp(1.7rem,2vw+1rem,2.2rem);
  margin-bottom:2rem;
}

/* ----- griglia ----- */
.team-grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:900px;
  margin-inline:auto;
}

/* ----- card ----- */
.team-card{
  background:#fff;
  border:1px solid var(--gray-400);
  border-radius:12px;
  padding:2rem 1.4rem 2.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .25s,box-shadow .25s;
}
.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* foto tonda */
.team-photo{
  width:160px;height:160px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:1rem;
}

/* testo */
.team-name{
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-primary);
  margin:0 0 .2rem;
}
.team-role{
  font-size:.9rem;
  color:var(--gray-700);
  margin:0;
}

/* mobile foto più piccola */
@media(max-width:575px){
  .team-photo{width:140px;height:140px;}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e27173 *//* =========================================================
   SEZIONE 5 · CERTIFICAZIONI & PARTNER STRIP
   ========================================================= */
.cert-section{
  padding:3rem 1rem;
  background:var(--color-bg);             /* bianco */
  text-align:center;
}

.cert-title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);             /* blu brand */
  font-weight:700;
  font-size:clamp(1.7rem,2vw+1rem,2.2rem);
  margin-bottom:2rem;
}

/* strip orizzontale mobile, centrato desktop */
.cert-strip{
  display:flex;
  gap:2.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
}
.cert-strip::-webkit-scrollbar{height:8px;}
.cert-strip::-webkit-scrollbar-thumb{
  background:var(--gray-400);border-radius:4px;
}

.cert-strip img{
  flex:0 0 160px;
  height:80px;
  object-fit:contain;
  opacity:.65;
  filter:grayscale(100%);
  scroll-snap-align:center;
  transition:opacity .2s,filter .2s,transform .2s;
}
.cert-strip img:hover{
  opacity:1;filter:none;transform:scale(1.06);
}

/* desktop: griglia centrata senza scrollbar */
@media(min-width:1024px){
  .cert-strip{
    overflow:visible;
    justify-content:center;
    padding-bottom:0;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a479f9 *//* =========================================================
   SEZIONE 6 · NUMERI ABOUT
   ========================================================= */
.about-numbers{
  padding:3.5rem 1rem 3rem;
  background:var(--color-bg-alt);          /* grigio 100 */
  text-align:center;
}

.numbers__title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);
  font-weight:800;
  font-size:clamp(1.7rem,2vw+1rem,2.2rem);
  margin-bottom:2.2rem;
}

/* ---- griglia ---- */
.numbers-grid{
  display:grid;
  gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:1000px;
  margin-inline:auto;
}

/* ---- card ---- */
.num-card{
  flex:1;
  background:#fff;
  border:1px solid var(--gray-400);
  border-radius:12px;
  padding:2rem 1.2rem 2.3rem;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .25s,box-shadow .25s;
}
.num-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* valori numerici */
.num-value{
  font-size:clamp(2.2rem,4vw + 1rem,3.3rem);
  font-weight:700;
  color:var(--color-accent);      /* rosso */
}
.num-unit{
  font-size:1.4rem;
  font-weight:700;
  color:var(--color-accent);
  margin-left:4px;
}

/* etichetta */
.num-label{
  margin-top:.4rem;
  font-size:1rem;
  font-weight:600;
  color:var(--gray-700);
}

/* mobile riduco un po’ il font */
@media(max-width:575px){
  .num-value{font-size:2rem;}
}/* End custom CSS */