.faq-hover {
	  background: transparent;
	  transition: background 0.4s ease-in-out;
	  position: relative;
	  overflow: hidden;
	}

	.faq-hover::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 50%;
	  width: 75%;
	  height: 100%;
	  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(11,19,65,0.87), rgba(255,255,255,0));
	  transform: translateX(-50%) scaleX(0);
	  transform-origin: center;
	  opacity: 0;
	  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
	  z-index: 0;
	}

	.faq-hover:hover::before {
	  transform: translateX(-50%) scaleX(1);
	  opacity: 1;
	}

	.faq-hover > * {
	  position: relative;
	  z-index: 1; /* ensures your text stays above the gradient */
	}
	
	.video-wrapper-modal {
	  box-shadow:
	 	0 0 44px rgba(255, 255, 255, 0.8), 
		0 0 62px rgba(7,57,111,0.80),   
		0 0 82px rgba(7,57,111, 0.65),    
		0 0 164px rgba(0, 0, 0, 0.9); 
	  margin: 0 auto;
	  max-width: 100%;
	  width: 90%; 
	 ;
	}	
	.tube-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 2rem;
}

.station {
  padding: 0.5rem 1rem; /* gives some breathing space */
  background-color: #0056b3;
  border-radius: 0.5rem; /* more of a rounded rectangle */
  color: white;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  min-width: 40px; /* keeps it from being too small */
  height: 40px;
  border: 2px solid white;
}
.station a {
  color: white;
  text-decoration: none;
}

.line {
  height: 6px;
  width: 80px;
  background-color: #FCFCFC;
  border-radius: 3px;
}

/* Highlights for current and done states */
.station.current {
  background-color: #162447;
  transform: scale(1.25);
}

.station.done {
  background-color: #5B8726;
}

.line.done {
  background-color: #5B8726;
}