.hero-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #000;
}/* PER 100% ALTEZZA SU SAFARI */
@supports (-webkit-touch-callout: none) {
    .hero-slider {
    height: 100dvh;
    }
}
/* PER 100% ALTEZZA SU SAFARI */

/* SLIDES */
.slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	filter: blur(20px);
	transform: scale(1.1);
	transition:
    opacity 1.2s ease,
    filter 1.4s ease,
    transform 12s ease; /* slow movement */
	z-index: 0;           /* livello base */
}
/* Slide attiva */
.slide.active {
	opacity: 1;
	filter: blur(0);
	/*transform: scale(1.03); /* leggero movimento lento */
}
/* PARALLAX */
.slides-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1px;
	transform-style: preserve-3d;
}
.slide {
	transform: translateZ(-1px) scale(2) translateY(0);
}
/* OVERLAY SFUMATO */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Overlay sfumato */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0),
    rgba(0,0,0,0.20)470%,
    rgba(0,0,0,0.2)
  );
}

/* TESTI ANIMATI */
.hero-content {

}
.hero-content h1,
.hero-content h2,
.hero-content p {
    margin: 0;           /* azzera spazio automatico */
    padding: 0;
    line-height: normal; /* lascia il font gestire l’altezza */
	opacity: 0;
	transform: translateY(20px);
}	
.slide.active .line1 {
  animation: fadeUp 0.8s forwards ease 0.2s;
}

.slide.active .line2 {
  animation: fadeUp 0.8s forwards ease 0.5s;
}

.slide.active .line3 {
  animation: fadeUp 0.8s forwards ease 0.8s;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* HERO */
#fullhero  {
	display:block;
	width:100%;
	min-height:auto;
	margin:0 auto;
	padding:0;
	background:#FFF;
}
.hero-slider {
	position: relative;
	width: 100%;
	height: 260px;
	overflow: hidden;
	background: #000;
}
/* SLIDES */
.slide {
	background-image:url(../images/capacita-mobile.jpg);
}
/* TESTI ANIMATI */
.hero-content {
	position: relative;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -90%);
	text-align: center;
	color: white;
	width: 100%;             
	margin: 0 auto;
	padding:0 auto;	
/* DIMENSIONI CARATTERI HERO */
}
.hero-content h1 {
    font-family: var(--font-condensed);
    font-size: 4.30em; /* 56px */
    font-weight: 500;
	color: #D7D1C2;
    text-transform: uppercase;
    line-height:56px; 
    margin: auto 0; 
/* HERO */

}
/* STRUTTURA OPERATIVA */
#struttura {
	padding: 0 auto;
    text-align: center;
    width: 100%;
}
#struttura .container {
	display:inline-block;
	width:86%;
    max-width: 1420px;
    margin: 0 auto;
}
/* Titolo sezione */
#struttura .container h2 {
    font-family: var(--font-condensed);
    font-size: 3.07em; /* 40px */
	line-height:40px;
	font-weight:100;
    text-transform: uppercase;
    color: #0F4279;
	margin: 0 auto;
	padding-top:40px;
}
/* Sottotitolo */
#struttura .container h3 {
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
    font-weight: 400;
    color: #000;
	padding-bottom:5px;
}
/* Testo descrittivo */
#struttura .container p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight:100;
    color: #000;
    margin: 0 auto;
}	
/* STRUTTURA OPERATIVA */

/* AREE AZIENDA  */
#aree-azienda {
    width: 100%;
    text-align: center;
}
/* Contenitore centrale al 90% con max-width */
#aree-azienda .container {
    width: 80%;
    margin: 0 auto;
    display: block;
}
/* Bloccho stabilimento */
#aree-azienda .stabilimento {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: column;
    gap: 25px;
    margin:0;
	padding-bottom:20px;
	margin-bottom:0;
}
/* linea orizzontale */
.stabilimento {
	border-bottom:solid 1px #CCC;
}
/* Blocchi impianti */
#aree-azienda .impianti {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: column;
    gap: 25px;
    margin:0;
	padding-top:30px;
	padding-bottom:10px;
	margin-bottom:0;
}
/* Versione invertita (immagine a sinistra) */
#aree-azienda .impianti.invertita {
  /*  flex-direction: row-reverse;*/
	 flex-direction: column;
}
#aree-azienda .impianti.centrata {
	display:block;
}
#aree-azienda .impianti.centrata h2 {
	display:block;
	width:100%;
	padding-bottom:25px;
}
#aree-azienda .impianti.centrata p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight: 100;
    color: #000;
	padding-bottom:30px;
    margin: 0 auto;	
}	
.intro-text {
    margin: 0 auto 0 auto; /* centrato orizzontalmente, spazio sotto */
    text-align: center;     /* testo centrato */
}
/* VIDEO */
#video-container {
    display: grid;
	grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    justify-items: center;
    padding-bottom: 20px;
}
/* Verticali all'80% */
#video-container .vertical {
	width: 50%;
	max-width: 80%;
}
/* Orizzontale full width */
#video-container .horizontal {
	width: 100%;
	 max-width: none;
}
/* Box */
#video-container .video-box {
    background: #fff;
    padding: 10px;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
}
/* Proporzioni e dimensioni */
#video-container .vertical {
    aspect-ratio: 9 / 16;
    max-width: 300px; /* laterali più piccoli */
}
#video-container .horizontal {
    aspect-ratio: 16 / 9;
    max-width: 760px; /* centrale protagonista */
}
/* Video responsive */
#video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    background: #000;
}
/* Descrizione */
#video-container .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 12px;
    font-size: 1.30em; /*17px */
	line-height:24px;
/* ---------------- NUOVO VIDEO CONTAINER ---------------- */
}
#video-container2 {
    display: grid;
	grid-template-columns: 1fr; /* una colonna sola */
    gap: 40px;                /* distanza tra i video */
    justify-items: center;    /* centra i video nelle colonne */
    margin: 20px auto 60px auto; /* margine superiore e centratura */
}
/* Box dei nuovi video */
#video-container2 .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column; /* video sopra, description sotto */
}

/* Video responsive */
#video-container2 .video-box video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Description testo */
#video-container2 .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 12px;
    font-size: 1.30em; /*17px */
	line-height:24px;
/* VIDEO */
}
/* Colonne */
#aree-azienda .col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Colonna testo: occupa tutto lo spazio disponibile */
#aree-azienda .col.testo {
    flex: 1;                  
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* Colonna immagine: larghezza fissa */
#aree-azienda .col.immagine {
    flex: 0 0 320px;          
    display: flex;
    flex-direction: column;	
	margin-left: auto;
    margin-right: auto;
	order: -1;   /* <--- l’immagine sale sopra */
}
/* Immagini */
#aree-azienda .col.immagine img {
    width: 100%;
    height: auto;
    max-width: 320px;         
    margin: 0;                
    margin-top: 10px;
    display: block;           
}
/* Titoli */
#aree-azienda h2,
#aree-azienda h3 {
    text-transform: uppercase;
    margin-bottom: 5px;
}
#aree-azienda h2 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
}
#aree-azienda h3 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
    margin-top: 10px;
}
/* Paragrafi */
#aree-azienda p {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
    color: #000;
	line-height: 26px;
}
/* ============================
   CHECKLIST (Font Awesome)
   ============================ */
#aree-azienda .checklist {
    list-style: none;
    padding-left: 5px;
    margin-bottom: 15px;
}
#aree-azienda .checklist li {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
	line-height: 26px;
    margin: 8px 0;
    padding-left: 35px;
    position: relative;
}
#aree-azienda .checklist li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c"; /* icona check */
    color: #0F4279;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}
/* AREE AZIENDA  */	


/* HERO PARCO MACCHINE */	
.hero-box {
	display:block;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    background-image: url('../images/hero-box.jpg'); /* sostituisci con il tuo sfondo */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 0 auto; /* per mobile */
}
.hero-box-content {
	display:inline-block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	padding-bottom:60px;
	background-image:url('../images/cuscinetto.png');
	background-size:219px 164px;
	background-repeat:no-repeat;
	background-position:top center;
}
.hero-box-content h2 {
    color: #D7D1C0;
    font-family: var(--font-condensed);
	font-weight:400;
    font-size: 3.07em; /* 40px */
	line-height:40px;
	text-transform:uppercase;
    margin: 60px 0 20px 0;
}
.hero-box-content h3 {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
	font-weight:100;
    margin: 0 0 40px 0;
}
.hero-box-content p {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	font-weight:100;
    line-height: 26px;
    margin: 0;
}
/* HERO PARCO MACCHINE */	

/* CAROUSEL*/
.owl-stage-outer {
    padding-bottom: 20px; /* lascia spazio per l’ombra */
	overflow: visible; /* consente all’ombra di uscire */
}
.owl-carousel, .owl-carousel .owl-item {
    display: block !important;
}
#carousel-boxes .container {
	position:relative;
    width: 80%;
    margin: 0 auto;    /* centra tutto */
}
#carousel-boxes {
    padding: 60px 0;
	padding-bottom:20px;
    background: #f9f9f9;
    text-align: center;
}
#carousel-boxes .carousel-item {
/*	max-width: 300px;      /* larghezza massima del box */
	height:auto;
    margin: 0 auto;        /* centra il box all’interno del carousel */
    background: #fff;
    padding: 20px;
  /*  border-radius: 8px;*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s; /* animazione al hover */
}
/* Effetto al passaggio del mouse */
#carousel-boxes .carousel-item:hover {
    transform: translateY(-5px); /* solleva leggermente il box */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
#carousel-boxes .carousel-item img {
    width: 100%;
   /* max-width: 240px;*/
    margin: 0 auto 15px;
}
#carousel-boxes h3 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 1.53em; /* 20px */
	line-height:20px;
    margin-bottom: 5px;
	padding-left:17px;
	padding-right:17px;
	text-align:left;
    color: #0F4279;
    text-transform: uppercase;
}
#carousel-boxes .lineetta {
    display: block;
    width: 90%;
    height: 1px;
    background: #999;
    margin: 10px auto;
}
#carousel-boxes h4 {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.53em; /* 20px */
	line-height:20px;
    margin-bottom: 10px;
	padding-left:17px;
	padding-right:17px;
	text-align:left;
    color: #000;
}
#carousel-boxes p {
	font-family: var(--font-light);
	font-weight:400;
    font-size: 1.23em; /*16px */
	line-height:24px;
	text-align:left;
	padding-left:17px;
	padding-right:17px;
    color: #000;
	
/* FRECCE */
}
.owl-nav {
    position: absolute;
    top: 33%;
    width: 96%;
	margin-left:2%;
	margin-right:2%;
    display: flex !important;
    justify-content: space-between;
    transform: translateY(-33%);
    pointer-events: none;
    z-index: 1000;
}
/* Forza visibilità dots sempre */
.owl-dots {
    display: block !important;
	margin-top: 20px;
}
/* Singolo dot */
.owl-dots .owl-dot span {
    width: 14px;        /* prima erano ~8px */
    height: 14px;
    margin: 5px 7px;
    background: #ccc;
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Dot attivo più grande e colorato */
.owl-dots .owl-dot.active span {
    background: #0F4279; /* colore attivo */
    width: 18px;         /* leggermente più grande */
    height: 18px;
}

/* Frecce */
/* Contenitore frecce sotto gli items */
.owl-nav {
    position: relative;   /* relativo al carousel */
    display: flex;
    justify-content: center; /* centrato orizzontalmente */
    margin-top: 20px;     /* distanza dagli items */
    top: 0;               /* reset posizione assoluta */
    transform: none;      /* rimuove translateY */
}

/* Pulsanti frecce affiancati */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background: none !important;
    border: none !important;
    font-size: 2em;       /* grandezza frecce */
    margin: 0 15px;       /* distanza tra le due frecce */
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    pointer-events: all;
}

/* Rimuoviamo dots */
.owl-dots {
    display: none;
}
/* Stile delle frecce PNG */
.owl-arrow {
    width: 24px;     /* <-- PUOI AUMENTARE O DIMINUIRE */
    height: auto;
    pointer-events: all;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}
/* Effetto hover */
.owl-arrow:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* FRECCE */		
	
/* CAROUSEL */
/* ==========================
   RESPONSIVE BREAKPOINTS
   ========================== */
/* Layout tablet portrait: da 480 px a 820 px. Eredita stili da: Layout mobile. */
@media only screen and (min-width: 480px ) {
/* CONTAINER */
.gridContainer, .gridContainerMid, .gridContainerFull {
	width:100%;
	margin:0 auto;
	padding:0;
/* CONTAINER */
	
/* HERO */
}
#fullhero  {
	display:block;
	width:100%;
	min-height:auto;
	margin:0 auto;
	padding:0;
	background:#FFF;
}
.hero-slider {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: #000;
}
/* SLIDES */
.slide {
	background-image:url(../images/capacita-tablet.jpg);
}
/* TESTI ANIMATI */
.hero-content {
	position: relative;
	top: 90%;
	left: 0%;
	transform: translate(0%, -90%);
	text-align: right;
	color: white;
	width: 88%;             
	margin: 0 auto;
	padding:0 auto;	
/* DIMENSIONI CARATTERI HERO */
}
.hero-content h1 {
    font-family: var(--font-condensed);
    font-size: 5.07em; /* 66px */
    font-weight: 500;
	color: #D7D1C2;
    text-transform: uppercase;
    line-height:66px; 
    margin: auto 0; 
/* HERO */
	
/* STRUTTURA OPERATIVA */
}	
#struttura {
	padding: 0 auto;
    text-align: center;
    width: 100%;
}
#struttura .container {
	display:inline-block;
	width:86%;
    max-width: 1420px;
    margin: 0 auto;
}
/* Titolo sezione */
#struttura .container h2 {
    font-family: var(--font-condensed);
    font-size: 3.07em; /* 40px */
	line-height:40px;
	font-weight:100;
    text-transform: uppercase;
    color: #0F4279;
	margin: 0 auto;
	padding-top:50px;
}
/* Sottotitolo */
#struttura .container h3 {
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
    font-weight: 400;
    color: #000;
	padding-bottom:10px;
}
/* Testo descrittivo */
#struttura .container p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight: 100;
    color: #000;
    margin: 0 auto;
/* STRUTTURA OPERATIVA */	

/* AREE AZIENDA  */
}
#aree-azienda {
    width: 100%;
    text-align: center;
}
/* Contenitore centrale al 90% con max-width */
#aree-azienda .container {
    width: 80%;
    margin: 0 auto;
    display: block;
}
/* Bloccho stabilimento */
#aree-azienda .stabilimento {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: column;
    gap: 25px;
    margin:0;
	padding-bottom:30px;
	margin-bottom:0;
}
/* linea orizzontale */
.stabilimento {
	border-bottom:solid 1px #CCC;
}
/* Blocchi impianti */
#aree-azienda .impianti {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: column;
    gap: 25px;
    margin:0;
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom:0;
}
/* Versione invertita (immagine a sinistra) */
#aree-azienda .impianti.invertita {
  /*  flex-direction: row-reverse;*/
	 flex-direction: column;
}
#aree-azienda .impianti.centrata {
	display:block;
}
#aree-azienda .impianti.centrata h2 {
	display:block;
	width:100%;
	padding-bottom:25px;
}
#aree-azienda .impianti.centrata p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight: 100;
    color: #000;
	padding-bottom:30px;
    margin: 0 auto;	
}	
.intro-text {
    margin: 0 auto 0 auto; /* centrato orizzontalmente, spazio sotto */
    text-align: center;     /* testo centrato */
}
/* VIDEO */
#video-container {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 0.9fr; /* laterali più piccoli, centrale più largo */
    gap: 40px;
    align-items: start;
    justify-items: center;
    padding-bottom: 30px;
}
/* Verticali all'80% */
#video-container .vertical {
	width: 50%;
	max-width: none;
}
/* Orizzontale full width */
#video-container .horizontal {
	width: 100%;
	 max-width: none;
}
/* Box */
#video-container .video-box {
    background: #fff;
    padding: 10px;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
}
/* Proporzioni e dimensioni */
#video-container .vertical {
    aspect-ratio: 9 / 16;
    max-width: 300px; /* laterali più piccoli */
}
#video-container .horizontal {
	margin-top:40px;
    aspect-ratio: 16 / 9;
    max-width: 760px; /* centrale protagonista */
}
/* Video responsive */
#video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    background: #000;
}
/* Descrizione */
#video-container .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 12px;
    font-size: 1.30em;
    line-height: 24px;
	
	
	
	
	/* ---------------- VIDEO CONTAINER PRINCIPALE ---------------- */
}
#video-container {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr 0.8fr;
    gap: 40px;
    align-items: center;
    justify-items: center;
    margin-top: 20px;
    padding-bottom: 0;
}
/* Box generico */
#video-container .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
}
/* Verticali */
#video-container .vertical {
    aspect-ratio: 9 / 16;
    max-width: 300px;
}
/* Orizzontale centrale */
#video-container .horizontal {
    aspect-ratio: 16 / 9;
    max-width: 760px;
}
/* Video responsive */
#video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
/* Descrizione */
#video-container .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.30em;
    line-height: 24px;
}
/* ---------------- NUOVO VIDEO CONTAINER ---------------- */
#video-container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* due colonne uguali */
    gap: 40px;                /* distanza tra i video */
    justify-items: center;    /* centra i video nelle colonne */
    margin: 40px auto 20px auto; /* margine superiore e centratura */
}

/* Box dei nuovi video */
#video-container2 .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column; /* video sopra, description sotto */
}

/* Video responsive */
#video-container2 .video-box video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Description testo */
#video-container2 .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.3em;
    line-height: 24px;
/* VIDEO */
}
/* Colonne */
#aree-azienda .col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Colonna testo: occupa tutto lo spazio disponibile */
#aree-azienda .col.testo {
    flex: 1;                  
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* Colonna immagine: larghezza fissa */
#aree-azienda .col.immagine {
    flex: 0 0 320px;          
    display: flex;
    flex-direction: column;	
	margin-left: auto;
    margin-right: auto;
	order: -1;   /* <--- l’immagine sale sopra */
}
/* Immagini */
#aree-azienda .col.immagine img {
    width: 100%;
    height: auto;
    max-width: 320px;         
    margin: 0;                
    margin-top: 10px;
    display: block;           
}
/* Titoli */
#aree-azienda h2,
#aree-azienda h3 {
    text-transform: uppercase;
    margin-bottom: 5px;
}
#aree-azienda h2 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
}
#aree-azienda h3 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
    margin-top: 10px;
}
/* Paragrafi */
#aree-azienda p {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
    color: #000;
	line-height: 26px;
}
/* ============================
   CHECKLIST (Font Awesome)
   ============================ */
#aree-azienda .checklist {
    list-style: none;
    padding-left: 5px;
    margin-bottom: 15px;
}
#aree-azienda .checklist li {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
	line-height: 26px;
    margin: 8px 0;
    padding-left: 35px;
    position: relative;
}
#aree-azienda .checklist li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c"; /* icona check */
    color: #0F4279;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
/* AREE AZIENDA  */	
	
}
/* HERO PARCO MACCHINE */	
.hero-box {
	display:block;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    background-image: url('../images/hero-box.jpg'); /* sostituisci con il tuo sfondo */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 0 auto; /* per mobile */
}
.hero-box-content {
	display:inline-block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	padding-bottom:70px;
	background-image:url('../images/cuscinetto.png');
	background-size:219px 164px;
	background-repeat:no-repeat;
	background-position:top center;
}
.hero-box-content h2 {
    color: #D7D1C0;
    font-family: var(--font-condensed);
	font-weight:400;
    font-size: 3.07em; /* 40px */
	line-height:40px;
    margin: 60px 0 20px 0;
}
.hero-box-content h3 {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
	font-weight:100;
    margin: 0 0 40px 0;
}
.hero-box-content p {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	font-weight:100;
    line-height: 26px;
    margin: 0;
/* HERO PARCO MACCHINE */	

/* CAROUSEL */
}
#carousel-boxes .container {
	position:relative;
    width: 90%;
    max-width: 1420px; /* esempio */
    margin: 0 auto;    /* centra tutto */
}
#carousel-boxes {
    padding: 50px 0;
	padding-bottom:10px;
    background: #f9f9f9;
    text-align: center;
/* CAROUSEL */	
}	
}
/* Layout landscape: da 820 px a 1024 px max.  Eredita stili da: Layout mobile e Layout tablet portrait */
@media only screen and (min-width: 820px ) {
/* CONTAINER */
.gridContainer, .gridContainerMid  {
	width:100%;
	margin:0 auto;
	padding:0;
	max-width:1232px;
	min-width:768px;
/* CONTAINER */	

/* HERO */
}
#fullhero  {
	display:block;
	width:100%;
	min-height:auto;
	margin:0 auto;
	padding:0;
	background:#FFF;
}
.hero-slider {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: #000;
}
/* SLIDES */
.slide {
	background-image:url(../images/capacita-mid.jpg);
}
/* TESTI ANIMATI */
.hero-content {
	position: relative;
	top: 90%;
	left: 0%;
	transform: translate(0%, -90%);
	text-align: right;
	color: white;
	width: 88%;             
	margin: 0 auto;
	padding:0 auto;	
/* DIMENSIONI CARATTERI HERO */
}
.hero-content h1 {
    font-family: var(--font-condensed);
    font-size: 5.07em; /* 66px */
    font-weight: 500;
	color: #D7D1C2;
    text-transform: uppercase;
    line-height:66px; 
    margin: auto 0; 
/* HERO */
	
/*STRUTTURA OPERATIVA */
}	
#struttura {
	padding: 0 auto;
    text-align: center;
    width: 100%;
}
#struttura .container {
	display:inline-block;
	width:90%;
    max-width: 1420px;
    margin: 0 auto;
}
/* Titolo sezione */
#struttura .container h2 {
    font-family: var(--font-condensed);
    font-size: 3.07em; /* 40px */
	line-height:40px;
	font-weight:100;
    text-transform: uppercase;
    color: #0F4279;
	margin: 0 auto;
	padding-top:50px;
}
/* Sottotitolo */
#struttura .container h3 {
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
    font-weight: 400;
    color: #000;
	padding-bottom:10px;
}
/* Testo descrittivo */
#struttura .container p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight: 100;
    color: #000;
    margin: 0 auto;
/* STRUTTURA OPERATIVA */
	
/* AREE AZIENDA  */
}
#aree-azienda {
    width: 100%;
    text-align: center;
}
/* Contenitore centrale al 90% con max-width */
#aree-azienda .container {
    width: 90%;
    margin: 0 auto;
    display: block;
}
/* Bloccho stabilimento */
#aree-azienda .stabilimento {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: row; 
    gap: 70px;
    margin:0;
	padding-bottom:40px;
	margin-bottom:0;
}
/* linea orizzontale */
.stabilimento {
	border-bottom:solid 1px #CCC;
}
/* Blocchi impianti */
#aree-azienda .impianti {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
	flex-direction: row; 
    gap: 70px;
    margin:0;
	padding-top:30px;
	padding-bottom:50px;
	margin-bottom:0;
}
/* Versione invertita (immagine a sinistra) */
#aree-azienda .impianti.invertita {
	flex-direction: row-reverse !important; /* forza il reset */
}
#aree-azienda .impianti.centrata {
	display:block;
}
#aree-azienda .impianti.centrata h2 {
	display:block;
	width:100%;
	padding-bottom:25px;
}
#aree-azienda .impianti.centrata p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 26px;
	font-weight: 100;
    color: #000;
	padding-bottom:30px;
    margin: 0 auto;	
}	
.intro-text {
    margin: 0 auto 0 auto; /* centrato orizzontalmente, spazio sotto */
    text-align: center;     /* testo centrato */
/* ---------------- VIDEO CONTAINER PRINCIPALE ---------------- */
}
#video-container {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr 0.8fr;
    gap: 40px;
    align-items: center;
    justify-items: center;
    margin-top: 20px;
    padding-bottom: 0;
}
/* Box generico */
#video-container .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
}
/* Verticali */
#video-container .vertical {
    aspect-ratio: 9 / 16;
    max-width: 300px;
}
/* Orizzontale centrale */
#video-container .horizontal {
    aspect-ratio: 16 / 9;
    max-width: 760px;
}
/* Video responsive */
#video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
/* Descrizione */
#video-container .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.30em;
    line-height: 26px;
}
/* ---------------- NUOVO VIDEO CONTAINER ---------------- */
#video-container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* due colonne uguali */
    gap: 40px;                /* distanza tra i video */
    justify-items: center;    /* centra i video nelle colonne */
    margin: 40px auto 20px auto; /* margine superiore e centratura */
    max-width: 1200px;         /* larghezza massima del container */
}

/* Box dei nuovi video */
#video-container2 .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* stessa ombra dei box originali */
    text-align: center;
    width: 100%;
    border-radius: 0;          /* coerente con i box originali */
    display: flex;
    flex-direction: column;     /* video sopra, description sotto */
}

/* Orizzontale */
#video-container2 .video-box.horizontal {
    flex: 0 1 45%;             /* occupa fino al 45% dello spazio disponibile */
    max-width: 760px;          /* grandezza massima su desktop */
    width: 100%;               /* responsive */
}

/* Video responsive */
#video-container2 .video-box video {
    width: 100%;
    aspect-ratio: 16 / 9;      /* mantiene proporzioni corrette */
    object-fit: cover;
    display: block;
    background: #000;
    /* rimosso height: 100% per includere description nel box */
}

/* Description testo */
#video-container2 .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.30em;
    line-height: 26px;
/* VIDEO */
}
/* Colonne */
#aree-azienda .col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Colonna testo: occupa tutto lo spazio disponibile */
#aree-azienda .col.testo {
    flex: 1;                  
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* Colonna immagine: larghezza fissa */
#aree-azienda .col.immagine {
    flex: 0 0 370px;          
    display: flex;
    flex-direction: column;
	order: 0;   /* <--- resetto l'ordine */
}
/* Immagini */
#aree-azienda .col.immagine img {
    width: 100%;
    height: auto;
    max-width: 370px;         
    margin: 0;                
    margin-top: 70px;
    display: block;           
}
/* Titoli */
#aree-azienda h2,
#aree-azienda h3 {
    text-transform: uppercase;
    margin-bottom: 5px;
}
#aree-azienda h2 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
}
#aree-azienda h3 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.46em; /*32px; */
	line-height:32px;
    color: #0F4279;
    margin-top: 15px;
}
/* Paragrafi */
#aree-azienda p {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em;
    color: #000;
	line-height: 28px;
}
/* ============================
   CHECKLIST (Font Awesome)
   ============================ */
#aree-azienda .checklist {
    list-style: none;
    padding-left: 5px;
    margin-bottom: 15px;
}
#aree-azienda .checklist li {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
	line-height: 28px;
    margin: 8px 0;
    padding-left: 35px;
    position: relative;
}
#aree-azienda .checklist li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c"; /* icona check */
    color: #0F4279;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;	
/* AREE AZIENDA  */

}	
/* HERO PARCO MACCHINE */		
.hero-box {
	display:block;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    background-image: url('../images/hero-box.jpg'); /* sostituisci con il tuo sfondo */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 0 auto; /* per mobile */
}
.hero-box-content {
	display:inline-block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	padding-bottom:70px;
	background-image:url('../images/cuscinetto.png');
	background-size:219px 164px;
	background-repeat:no-repeat;
	background-position:top center;
}
.hero-box-content h2 {
    color: #D7D1C0;
    font-family: var(--font-condensed);
	font-weight:400;
    font-size: 3.07em; /* 40px */
	line-height:40px;
    margin: 60px 0 20px 0;
}
.hero-box-content h3 {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 2.0em; /*26px */
	line-height: 26px;
	font-weight:100;
    margin: 0 0 40px 0;
}
.hero-box-content p {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	font-weight:100;
    line-height: 26px;
    margin: 0;
/* HERO PARCO MACCHINE */	

/* CAROUSEL */
}
#carousel-boxes .container {
	position:relative;
    width: 90%;
    max-width: 1420px; /* esempio */
    margin: 0 auto;    /* centra tutto */
}
#carousel-boxes {
    padding: 70px 0;
	padding-bottom:30px;
    background: #f9f9f9;
    text-align: center;
/* CAROUSEL */		
}
}
/* Layout desktop: da 1024 px a superiori. Eredita stili da: Layout tablet landscape */
@media only screen and (min-width: 1024px ) {
/* CONTAINER */
.gridContainer {
	width:100%;
	margin:0 auto;
	padding:0;
	max-width:1232px;
	min-width:768px;
}
.gridContainerMid {
	width:100%;
	margin:0 auto;
	padding:0;
	max-width:1920px;
}
.gridContainerFull {
	width:100%;
	margin:0 auto;
	padding:0;
/*	max-width:1920px;*/
	min-width:768px;
/* CONTAINER */

/* HERO */
}
#fullhero  {
	display:block;
	width:100%;
	min-height:auto;
	margin:0 auto;
	padding:0;
	background:#FFF;
}
.hero-slider {
	position: relative;
	width: 100%;
	height: 360px;
	overflow: hidden;
	background: #000;
}
/* SLIDES */
.slide {
	background-image:url(../images/capacita-big.jpg);
}
/* TESTI ANIMATI */
.hero-content {
	position: relative;
	top: 90%;
	left: 0%;
	transform: translate(0%, -90%);
	text-align: right;
	color: white;
	width: 88%;             
	margin: 0 auto;
	padding:0 auto;	
/* DIMENSIONI CARATTERI HERO */
}
.hero-content h1 {
    font-family: var(--font-condensed);
    font-size: 5.76em; /* 75px */
    font-weight: 500;
	color: #D7D1C2;
    text-transform: uppercase;
    line-height:75px; 
    margin: auto 0; 
/* HERO */
	
/* STRUTTURA OPERATIVA */
}	
#struttura {
	padding: 0 auto;
    text-align: center;
    width: 100%;
}
#struttura .container {
	display:inline-block;
	width:90%;
    max-width: 1420px;
    margin: 0 auto;
}
/* Titolo sezione */
#struttura .container h2 {
    font-family: var(--font-condensed);
    font-size: 3.53em; /* 46px */
	line-height:46px;
	font-weight:400;
    text-transform: uppercase;
    color: #0F4279;
	margin: 0 auto;
	padding-top:70px;
}
/* Sottotitolo */
#struttura .container h3 {
    font-family: var(--font-light);
    font-size: 2.15em; /*28px */
	line-height: 28px;
    font-weight: 400;
    color: #000;
	padding-bottom:10px;
}
/* Testo descrittivo */
#struttura .container p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 28px;
	font-weight: 400;
    color: #000;
    margin: 0 auto;
/* STRUTTURA OPERATIVA */

/* AREE AZIENDA  */
}
#aree-azienda {
    width: 100%;
    text-align: center;
}
/* Contenitore centrale al 90% con max-width */
#aree-azienda .container {
    width: 90%;
    max-width: 1420px;
    margin: 0 auto;
    display: block;
}
/* Bloccho stabilimento */
#aree-azienda .stabilimento {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
    gap: 80px;
    margin:0;
	padding-bottom:50px;
	margin-bottom:0;
}
/* linea orizzontale */
.stabilimento {
	border-bottom:solid 1px #CCC;
}
/* Blocchi impianti */
#aree-azienda .impianti {
    display: flex;
    align-items: flex-start;   /* Allineamento alto */
    justify-content: center;
    gap: 80px;
    margin:0;
	padding-top:40px;
	padding-bottom:60px;
	margin-bottom:0;
}
/* Versione invertita (immagine a sinistra) */
#aree-azienda .impianti.invertita {
    flex-direction: row-reverse;
}
#aree-azienda .impianti.centrata {
	display:block;
}
#aree-azienda .impianti.centrata h2 {
	display:block;
	width:100%;
	padding-bottom:25px;
}
#aree-azienda .impianti.centrata p {
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	line-height: 28px;
	font-weight: 400;
    color: #000;
	padding-bottom:0;
    margin: 0 auto;	
}	
.intro-text {
    max-width: 1200px;       /* larghezza massima per miglior leggibilità */
    margin: 0 auto 0 auto; /* centrato orizzontalmente, spazio sotto */
    text-align: center;     /* testo centrato */
}
/* VIDEO */
/* ---------------- VIDEO CONTAINER PRINCIPALE ---------------- */
#video-container {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr 0.8fr;
    gap: 40px;
    align-items: center;
    justify-items: center;
    margin-top: 60px;
    padding-bottom: 0;
}
/* Box generico */
#video-container .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
}
/* Verticali */
#video-container .vertical {
    aspect-ratio: 9 / 16;
    max-width: 300px;
}
/* Orizzontale centrale */
#video-container .horizontal {
    aspect-ratio: 16 / 9;
    max-width: 760px;
}
/* Video responsive */
#video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
/* Descrizione */
#video-container .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.3em;
    line-height: 26px;
}
/* ---------------- NUOVO VIDEO CONTAINER ---------------- */
#video-container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* due colonne uguali */
    gap: 40px;                /* distanza tra i video */
    justify-items: center;    /* centra i video nelle colonne */
    margin: 40px auto 40px auto; /* margine superiore e centratura */
    flex-wrap: wrap;           /* permette di andare a capo su mobile */
    max-width: 1200px;         /* larghezza massima del container */
}

/* Box dei nuovi video */
#video-container2 .video-box {
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* stessa ombra dei box originali */
    text-align: center;
    width: 100%;
    border-radius: 0;          /* coerente con i box originali */
    display: flex;
    flex-direction: column;     /* video sopra, description sotto */
}

/* Orizzontale */
#video-container2 .video-box.horizontal {
    flex: 0 1 45%;             /* occupa fino al 45% dello spazio disponibile */
    max-width: 760px;          /* grandezza massima su desktop */
    width: 100%;               /* responsive */
}

/* Video responsive */
#video-container2 .video-box video {
    width: 100%;
    aspect-ratio: 16 / 9;      /* mantiene proporzioni corrette */
    object-fit: cover;
    display: block;
    background: #000;
    /* rimosso height: 100% per includere description nel box */
}

/* Description testo */
#video-container2 .description {
    font-family: var(--font-light);
    font-weight: 400;
    color: #000;
    margin-top: 8px;
    font-size: 1.3em;
    line-height: 26px;

/* VIDEO */
}
/* Colonne */
#aree-azienda .col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Colonna testo: occupa tutto lo spazio disponibile */
#aree-azienda .col.testo {
    flex: 1;                  
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* Colonna immagine: larghezza fissa */
#aree-azienda .col.immagine {
    flex: 0 0 460px;          
    display: flex;
    flex-direction: column;
}
/* Immagini */
#aree-azienda .col.immagine img {
    width: 100%;
    height: auto;
    max-width: 460px;         
    margin: 0;                
    margin-top: 80px;
    display: block;           
}
/* Titoli */
#aree-azienda h2,
#aree-azienda h3 {
    text-transform: uppercase;
    margin-bottom: 10px;
}
#aree-azienda h2 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.76em; /*36px; */
	line-height:36px;
    color: #0F4279;
}
#aree-azienda h3 {
	font-family: var(--font-condensed);
	font-weight:100;
    font-size: 2.76em; /*36px; */
	line-height:36px;
    color: #0F4279;
    margin-top: 25px;
}
/* Paragrafi */
#aree-azienda p {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
    color: #000;
	line-height: 28px;
}
/* ============================
   CHECKLIST (Font Awesome)
   ============================ */
#aree-azienda .checklist {
    list-style: none;
    padding-left: 5px;
    margin-bottom: 15px;
}
#aree-azienda .checklist li {
	font-family: var(--font-light);
	font-weight:100;
    font-size: 1.38em; /*18px */
    color: #000;
	line-height: 28px;
    margin: 8px 0;
    padding-left: 35px;
    position: relative;
}
#aree-azienda .checklist li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c"; /* icona check */
    color: #0F4279;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
/* AREE AZIENDA  */

}
/* HERO PARCO MACCHINE */	
.hero-box {
	display:block;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    background-image: url('../images/hero-box.jpg'); /* sostituisci con il tuo sfondo */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 0 auto;
}
.hero-box-content {
	display:inline-block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	padding-bottom:80px;
    max-width: 1024px;/* opzionale per non avere testo troppo largo */	
	background-image:url('../images/cuscinetto.png');
	background-size:273px 205px;
	background-repeat:no-repeat;
	background-position:top center;
}
.hero-box-content h2 {
    color: #D7D1C0;
    font-family: var(--font-condensed);
	font-weight:400;
    font-size: 3.46em; /*45px */
	line-height:45px;
    margin: 80px 0 20px 0;
}
.hero-box-content h3 {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 2.15em; /* 28px */
	line-height:28px;
	font-weight:100;
    margin: 0 0 40px 0;
}
.hero-box-content p {
    color: #FFFFFF;
    font-family: var(--font-light);
    font-size: 1.38em; /*18px */
	font-weight:100;
    line-height: 28px;
    margin: 0;
/* HERO PARCO MACCHINE */

/* CAROUSEL */
}
#carousel-boxes .container {
	position:relative;
    width: 90%;
    max-width: 1420px; /* esempio */
    margin: 0 auto;    /* centra tutto */
}
#carousel-boxes {
    padding: 80px 0;
	padding-bottom:40px;
    background: #f9f9f9;
    text-align: center;
/* CAROUSEL */
}
}