body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}
		
.product-image{
	max-width: 100%;
}
		
iframe {
	max-width: 100%;
	max-height: 100%;
}
		

.navbar-transparent {
   background-color: white;
   background: white;
   border-color: transparent;
}

.navbar-brand {
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}




.navbar-nav {
    display: flex;
    align-items: center; /* Center the items vertically */
}

.app-store-link {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    height: 100%; /* Ensure the link fills the navbar's height */
    padding: 0; /* Remove padding so the image can fill the space */
}

.app-store-img {
    height: 100%;  /* Set the image height to 100% of its parent */
    width: auto;   /* Keep the aspect ratio of the image */
    max-height: 50px; /* You can control the size by setting a max height */
}




/* Styling for the larger button */
.large-app-store-link {
    display: flex;
    justify-content: center;
    align-items: center;
	gap: 2rem;
    height: 100%;
    padding: 0;
}

.large-app-store-img {
    height: 60px;   /* Increase the size of the image */
    width: auto;     /* Keep the aspect ratio */
    object-fit: contain;
	margin-bottom: 10px;
}



@media(min-width:767px) {
    .navbar {
        padding: 0px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

#discovery {
    height: 100%;
    padding-top: 10px;
    text-align: center;
    background: #ffffff;
}

#wire_frame, #video, #contact {
    height: 100%;
    padding-top: 40px;
    text-align: center;
    background: #ffffff;
}	
	
.product-image {
    margin: 10px; /* Adjust the value as needed */
}


.video-background-holder {
  position: relative;
  background-color: black;
  color: white;
  height: calc(100vh - 72px);
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.video-background-holder video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.video-background-content {
  position: relative;
  z-index: 2;
}

.video-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@import url(https://fonts.googleapis.com/css?family=Merriweather);
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background-color: white;
  background: white;
  font-family: 'Merriweather', sans-serif;
  margin: 0;
}
		
h1 {
  	text-transform: uppercase;
  	text-align: center;
	color:#fff;
	font-size:40px;
	font-weight:bold;
	line-height:49px;
  	text-shadow: 1px 1px 0 #222;
}
		
p.lead { 
	color:#fff;
	font-weight:bold;
	font-size:18px;
	line-height:24px;
}
		
h2 {
	text-transform: uppercase;
	font-weight: 900;
	color: #000;
	font-size:34px;
	line-height:41px;
}
		
#content h2 {
	font-weight: 550;
}
		
p { font-size:18px; line-height:28px; }
		
#contact_form label {
    font-weight: bold;
	font-size: 12px;
}	
		
form {
  max-width: 1000px;
  text-align: left;
  margin: 20px auto;
}

form label {
  margin: 0px;
}
		
form input {
  border: 0;
  outline: 0;
  padding: 0.5em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 0.2em;
  font-family: 'Merriweather', sans-serif;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
  background-color: #f8f8f8;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
  color: #f8f8f8;
  background: #316494;
  cursor: pointer;
}
form #input-submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}

footer {
	padding: 20px 10px 10px 10px;
	width: 100%;
    margin-top: 20px;
    text-align: center;
    background: #ffffff;
	border: 1px solid #f1f1f1;
}
		
footer p{
	font-weight: bold;
	font-size: 11px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}
		
.d-flex.h-100.text-center.align-items-center {
	padding-top:25%;	
}

@media (max-width: 480px) {
  .half {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}
.embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
		
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.row {margin:50px auto;}

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

	#frmContact div label {
    margin-left: 5px;
    text-align: left;
    display: block;
}
	label { text-align:left;}
	
	form .btnAction {
    color: #f8f8f8;
    background: #316494;
    cursor: pointer;
}
form input.demoInputBox {
    border: 1px;
    outline: 0;
    padding: 0.5em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
    width: 100%;
    margin-top: 0.2em;
    font-family: 'Merriweather', sans-serif;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    resize: none;
    background-color: #f8f8f8;
}
	.demoInputBox { width:100%;}
#frmContact {padding:10px;}
#frmContact div{margin-bottom: 15px}
#frmContact div label{margin-left: 5px}
.demoInputBox{padding:10px; background: #f8f8f8; border:#f8f8f8 1px solid; border-radius:4px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#316494;border:0;padding:10px 40px;color:#f8f8f8;border:#F0F0F0 1px solid; border-radius:4px;cursor: pointer; width:100%;}
















* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.2);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}