/* ================= HERO VIDEO ================= */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*padding-top: 200px;   Qui decidi la distanza esatta dal top */
  /*justify-content: flex-start;   Allinea all'inizio (top) invece che al centro */
  justify-content: center;  /* centra verticalmente */
  align-items: center;
 }

/* ================= SECTION ================= */
.section {
  padding: 80px 0;
}

.section-title {
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 1.6em;
}

/* ================= OBJECTIVES ================= */
.obj-box {
  background: #fff;
  padding: 25px;
  height: 100%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  border-radius: 10px;
}
.obj-box h5 {
    font-size: 1.6em;
}
.obj-box-2 {
  background: #fff;
  padding: 0;
  height: 100%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  border-radius: 20px;
  overflow:hidden;
  border-bottom-left-radius: 0px;
  border:3px solid #fff;
}
.badge-tag {
	color: #fff;
	background:#287233;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.obj-number {
  font-size: 28px;
  font-weight: 700;
  color: #287233;
  margin-bottom: 10px;
}

/* ================= IMAGES ================= */
.img-rounded {
  border-radius: 12px;
  width: 100%;
  height: auto;
}


/* Dimensioni della gallery */
.swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 50px; /* Spazio per i pallini della paginazione */
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 450px;       /* Altezza fissa per coerenza */
    object-fit: cover;   /* Taglia l'immagine senza deformarla */
    border-radius: 12px;
}

/* Personalizzazione colori frecce (opzionale) */
.swiper-button-next, .swiper-button-prev {
    color: #0d6efd; 
}



.lab_hero {
  position: relative;
  height: 220px;
  overflow: hidden !important; 
  /*background: linear-gradient(135deg, #0f2027, #2c5364); */
  background:#fff;
  border:0px solid red;
}
.lab_button_layer{
    position:absolute;
    top:45px;       /* regola la posizione */
    left:0;
    right:0;
    z-index:10;
	border:0px solid green;
}
/* TRACK base */
.lab_wave_track {
  display: flex;
  width: 200%;
  position: absolute;
  left: 0;
   pointer-events: none;
   
}

/* SVG */
.lab_wave_track svg {
  width: 50%;
  height: 120px;
  display: block;
}

.lab_wave1{ z-index:20; }
.lab_wave2{ z-index:21; }
.lab_wave3{ z-index:22; }

/* Wave 1 (più veloce, sotto) */
.lab_wave1 {
  bottom: 20px;
  animation: lab_scroll 14s linear infinite;
  opacity: 0.6;
}

/* Wave 2 (media) */
.lab_wave2 {
  bottom: 10px;
  animation: lab_scroll_reverse 16s linear infinite;
  opacity: 0.4;
}

/* Wave 3 (più lenta, sopra) */
.lab_wave3 {
  bottom: 0px;
  animation: lab_scroll 18s linear infinite;
  opacity: 1;
}

/* Animazioni */
@keyframes lab_scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes lab_scroll_reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
/* onda davanti (bianca) */
.lab_wave1 svg path {
  fill: #c9eeff /* #7dd3fc */;
}

/* onde dietro (colorate) */
.lab_wave2 svg path {
  fill: #fff;
}

.lab_wave3 svg path {
  fill: #ffffff;
}

/* MENU LAB HERO */
/* === 1. STILI COMUNI === */
.badge-step {
    position: absolute; top: -15px; left: -15px;
    border: 3px solid #000; border-radius: 50%;
    background: #fff; width: 35px; height: 35px;
    color: #000; display: flex; align-items: center; justify-content: center;
    z-index: 10;
}

@keyframes float-anim {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2px, -4px) rotate(0.5deg); }
    66% { transform: translate(-2px, 2px) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* === 2. DESKTOP (btn-lab) === */
.btn-lab {
    position: relative; width: 100%; min-height: 100px;
    border-radius: 15px; border: 5px solid rgba(255,255,255,0.5);
    background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; color: white; text-decoration: none;
    transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
.btn-lab:hover {
    animation: float-anim 3s ease-in-out infinite; /* Più lento: 2 secondi */
    border-color: #fff;
    box-shadow: 0 5px 15px rgba(255,255,255,0.2); /* Ombra più morbida */
    color: white;
	backdrop-filter: blur(0px);
}

/* --- STATO ATTIVO (CLICCATO) --- */
.active-lab {
    background: rgba(40, 114, 51, 0.5) !important; /* Background più solido */
    border-color: #fff !important; /* Bordo pieno */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    /*transform: scale(1.1); *//* Leggero zoom per evidenziarlo */
	
}

/* Opzionale: cambia colore al numero del badge quando attivo */
.active-lab .badge-step {
    background: #287233;
    color: #fff;
    border-color: #fff;
}


@media (min-width: 768px) {
    /* 1. Spazio tra le righe */
    .step-row:first-of-type {
        margin-bottom: 50px !important; 
    }
    
    .step-row .col-md-3 { position: relative; }
    
    /* === RIGA 1: Frecce verso DESTRA (1->2, 2->3, 3->4) === */
    .step-row:first-of-type .col-md-3:not(:first-child)::after {
        content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 2px;
        background: rgba(255,255,255,0.8); z-index: 1; transform: translate(-50%, -50%);
    }
    .step-row:first-of-type .col-md-3:not(:first-child) .btn-lab::before {
        content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
        border-left: 18px solid rgba(255,255,255,0.4); border-top: 25px solid transparent; border-bottom: 25px solid transparent;
        z-index: 6; transition: all 0.3s ease;
    }
    .step-row:first-of-type .col-md-3:not(:first-child) .btn-lab:hover::before {
        border-left-color: #fff; filter: drop-shadow(0 0 5px #fff);
    }

    /* === PONTE VERTICALE: Scende dal 4 al 5 === */
    /* Lo agganciamo al primo elemento della riga 2 (che visivamente è sotto il 4 grazie al reverse) */
    .step-row:last-of-type .col-md-3:first-child::after {
        content: ""; position: absolute; 
		left: 50%; 
		top: -24px; width: 2px; height: 52px;
        background: rgba(255,255,255,0.8); z-index: 1; transform: translate(-50%, -50%);
    }
    .step-row:last-of-type .col-md-3:first-child .btn-lab::before {
        content: ""; position: absolute; left: 50%; top: -35px; transform: translateX(-50%);
        border-top: 18px solid rgba(255,255,255,0.4); border-left: 25px solid transparent; border-right: 25px solid transparent;
        z-index: 6; transition: all 0.3s ease;
    }
    .step-row:last-of-type .col-md-3:first-child .btn-lab:hover::before {
        border-top-color: #fff; filter: drop-shadow(0 0 5px #fff);
    }

    /* === RIGA 2: Frecce verso SINISTRA (5->6, 6->7) === */
    /* Nota: Usiamo :not(:first-child) perché il 5 è il primo del DOM nella riga 2 */
    .step-row:last-of-type .col-md-3:not(:first-child)::after {
        content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 2px;
        background: rgba(255,255,255,0.8); z-index: 1; transform: translate(50%, -50%);
    }
    .step-row:last-of-type .col-md-3:not(:first-child) .btn-lab::before {
        content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
        border-right: 18px solid rgba(255,255,255,0.4); border-top: 25px solid transparent; border-bottom: 25px solid transparent;
        z-index: 6; transition: all 0.3s ease;
    }
    .step-row:last-of-type .col-md-3:not(:first-child) .btn-lab:hover::before {
        border-right-color: #fff; filter: drop-shadow(0 0 5px #fff);
    }
}



@media (max-width: 767px) {
    .step-row-mobile { position: relative; overflow: visible !important; margin-bottom: 40px; }
    .step-row-mobile .col-6 { position: relative; }

    /* Stile base pulsante mobile con aggiunta Shake */
    .btn-lab-mobile {
        position: relative; width: 100%; min-height: 80px;
        border-radius: 12px; border: 4px solid rgba(255,255,255,0.5);
        background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px);
        display: flex; align-items: center; justify-content: center;
        padding: 15px; color: white; text-decoration: none;
        transform: translate3d(0, 0, 0); backface-visibility: hidden;
    }

    /* Effetto Shake in Hover */
	.btn-lab-mobile:hover, .btn-lab-mobile:active {
        animation: float-anim 2.5s ease-in-out infinite; /* Ancora più dolce su mobile */
        border-color: #fff;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 10px rgba(255,255,255,0.2);
		backdrop-filter: blur(0px);
    }

    /* --- FRECCE ORIZZONTALI (1->2, 3->4, 5->6) --- */
    /* Riga 1 e 3: Freccia verso DESTRA sul secondo elemento */
    .step-row-mobile:nth-child(odd) .col-6:last-child::after {
        content: ""; position: absolute; 
		left: 0; top: 50%; 
		width: 22px; height: 4px;
        background: white; transform: translate(-50%, -50%); z-index: 1;
    }
    .step-row-mobile:nth-child(odd) .col-6:last-child .btn-lab-mobile::before {
        content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
        border-left: 20px solid rgba(255,255,255,0.4); 
		border-top: 25px solid transparent; 
		border-bottom: 25px solid transparent; z-index: 6;
    }

   
   /* Riga 2: Freccia verso SINISTRA sul primo elemento (che è il 4 causa reverse) */
    .step-row-mobile:nth-child(2) .col-6:last-child::after {
        content: ""; position: absolute; 
		right: 0; top: 50%; 
		width: 22px; height: 4px;
        background: white; transform: translate(50%, -50%); z-index: 1;
    }
    .step-row-mobile:nth-child(2) .col-6:last-child .btn-lab-mobile::before {
        content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
        border-right: 20px solid rgba(255,255,255,0.4); 
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent; z-index: 6;
    }

    /* --- PONTI VERTICALI (2->3, 4->5, 6->7) --- */
    /* Ponte scende dall'ultimo elemento della riga al primo della successiva */
    .step-row-mobile:nth-child(even) .col-6:first-child::after {
        content: ""; position: absolute; left: 50%; 
		top: -40px; 
		width: 4px; height: 40px;
        background: white; transform: translateX(-50%); z-index: 1;
    }
    .step-row-mobile:nth-child(even) .col-6:first-child .btn-lab-mobile::before {
        content: ""; position: absolute; left: 50%; 
		top: -30px; transform: translateX(-50%);
        border-top: 20px solid rgba(255,255,255,0.4); 
		border-left: 25px solid transparent; 
		border-right: 25px solid transparent; z-index: 6;
    }

    /* --- PONTE VERTICALE SINISTRO (4 -> 5) --- */
    .step-row-mobile:nth-child(3) .col-6:first-child::after {
        content: ""; position: absolute; left: 50%; 
		top: -40px; 
		width: 4px; height: 40px;
        background: white; transform: translateX(-50%); z-index: 1;
    }
    .step-row-mobile:nth-child(3) .col-6:first-child .btn-lab-mobile::before {
        content: ""; position: absolute; 
		left: 50%; 
		top: -30px; transform: translateX(-50%);
        border-top: 20px solid rgba(255,255,255,0.4); 
		border-left: 25px solid transparent;
		border-right: 25px solid transparent; z-index: 6;
        transition: all 0.3s ease;
    }

    /* Effetti Hover per tutte le punte */
   /* Hover generale per la luminosità */
    .btn-lab-mobile:hover::before { 
        filter: drop-shadow(0 0 5px white); 
    }
    /* 1. Hover Frecce verso DESTRA (Righe 1 e 3) */
    .step-row-mobile:nth-child(odd) .col-6:last-child .btn-lab-mobile:hover::before { 
        border-left-color: white !important; 
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
        border-right-color: transparent !important;
    }

    /* 2. Hover Frecce verso SINISTRA (Riga 2) */
    .step-row-mobile:nth-child(2) .col-6:last-child .btn-lab-mobile:hover::before { 
        border-right-color: white !important; 
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
        border-left-color: transparent !important;
    }

    /* 3. Hover Frecce verso il BASSO (Tutte le verticali) */
    .step-row-mobile .col-6:first-child .btn-lab-mobile:hover::before { 
        border-top-color: white !important; 
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
    }
}



.btn-lab-floating {
    position: relative;
    width: 100%;
    min-height: 80px;
    border-radius: 12px;
    border: 4px solid rgba(255,255,255,0.5);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    color: white;
    text-decoration: none;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;

    animation: pulse-float 3s infinite;
}

.btn-lab-floating:hover {
    animation: float-anim 3s ease-in-out infinite; /* Più lento: 2 secondi */
   color: white;
	backdrop-filter: blur(0px);
	
	background: rgba(40, 114, 51, 1) !important; /* Background più solido */
    border-color: #fff !important; /* Bordo pieno */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
}


@keyframes pulse-float {
 
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2px, -4px) rotate(0.5deg); }
    66% { transform: translate(-2px, 2px) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* end of: MENU LAB HERO */

#masthead .site-primary-header-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1250px !important;
}



.video-demo {
    width: 100%;
    max-width: 750px;
    height: auto;
display: block;
    margin: 0 auto;
	cursor:pointer;
}

.demo-card {
   /* max-width: 850px;*/
    margin: 40px auto;
    padding: 25px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
    line-height: 2em;
	font-size:1.3em;
}
.modal-body p {
	    line-height: 2em;
	font-size:1.3em;
	
}
.modal-header h4 {
	font-size:1.8em;
}
.container-wide {
    width: 100%;
    max-width: 1800px; /* oppure il valore che preferisci */
    margin: 0 auto;
	padding-left:30px; padding-right:30px;
}



.custom-link {
    color: #287233; /* colore Bootstrap primary */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.custom-link:hover {
    color: #76ae7e;
    text-decoration: none;
}

.custom-link:focus {
    color: #76ae7e;
    outline: 2px solid rgba(13, 110, 253, 0.25);
    outline-offset: 2px;
}

.custom-link:active {
    color: #287233;
}


.wave-divider{
    line-height:0;
	
}

.wave-divider-last{
    line-height:0;
	margin-bottom:-40px;
}
.wave-divider svg{
    display:block;
    width:100%;
    height:140px;
}

.smooth-transition {
    transition: transform 0.3s ease-out;
}



/* Tasto zoom 5 */
.btn-floating {
    transition: all .3s ease;
}

.btn-floating:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

#page {
	
	
	border:0px solid red;
	top:-20px;
	 
}



#imageContainer, #zoomableImage {
    touch-action: none !important;
}