@charset "utf-8";
/* CSS Document */

#hero-header {
  height: 400px;
  position: relative;
}

#hero-header.short {
  height: 250px;
}

#hero-header.background-image {
  background-size: cover;
}

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

#hero-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 9;
}

#hero-overlay.overlay-drkblue {
  background-color: rgba(10,45,73, 0.8);
}
#hero-overlay.overlay-blue {
  background-color: rgba(11,103,178, 0.8);
}
#hero-overlay.overlay-softblue {
  background-color: rgba(244, 247, 251, 0.8);
}
#hero-overlay.overlay-robotics {
  background-color: rgba(167, 31, 35, 0.8);
}
#hero-overlay.overlay-vision {
  background-color: rgba(76, 183, 77, 0.8);
}
#hero-overlay.overlay-motion {
  background-color: rgba(241, 90, 37, 0.8);
}
#hero-overlay.overlay-ai {
  background-color: rgba(79, 28, 84, 0.8);
}
#hero-header .hero-content {
  width: 100%;
}
#hero-header img, #hero-header h1, #hero-header p {
  margin: 0 0 12px!important;
}
#hero-header h1 {font-weight: 700; font-size: clamp(2rem, 1.6707rem + 1.4634vw, 3.5rem);}
#hero-header.short h1 {font-weight: 700; font-size: clamp(1.5rem, 1.6707rem + 1.4634vw, 2.5rem);}
#hero-header p {font-weight: 600; font-size: clamp(1rem, 0.5854rem + 0.7317vw, 1.75rem);}
#hero-header p a {font-size: clamp(0.75rem, 0.6677rem + 0.3659vw, 1.25rem); text-transform: uppercase;}
#hero-header img {width: clamp(18.75rem, 25.915vw + 12.919rem, 45.313rem);}
#hero-header.short img {max-width: 400px;}


@media (min-width: 767px) {
  #hero-header {height: 500px;}
  #hero-header.short {height: 300px;}
	
  #hero-overlay {background-color: initial!important;}
  #hero-overlay.overlay-drkblue { background-image: linear-gradient(to right, #0A2D49, transparent); }
  #hero-overlay.overlay-blue { background-image: linear-gradient(to right, #0B67B2, transparent); }
  #hero-overlay.overlay-softblue { background-image: linear-gradient(to right, #F4F7FB, transparent); }
  #hero-overlay.overlay-robotics { background-image: linear-gradient(to right, #A71F23, transparent); }
  #hero-overlay.overlay-vision { background-image: linear-gradient(to right, #4CB74D, transparent); }
  #hero-overlay.overlay-motion { background-image: linear-gradient(to right, #F15A25, transparent); }
  #hero-overlay.overlay-ai { background-image: linear-gradient(to right, #4F1C54, transparent); }
}