@charset "UTF-8";@font-face{font-family:'Poppins Regular';src:url('../fonts/Poppins-Regular.ttf');src:url('../fonts/Poppins-Regular.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'Poppins Bold';src:url('../fonts/Poppins-Bold.ttf');src:url('../fonts/Poppins-Bold.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'Poppins Light';src:url('../fonts/Poppins-Light.ttf');src:url('../fonts/Poppins-Light.ttf') format('truetype');font-weight:normal;font-style:normal;}
html, body, div, span, applet, object, iframe, header, footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;overflow-wrap: break-word;}
html,body{height:100%;background-color:#024B6C;font-family:'Poppins Regular', Helvetica, Arial, sans-serif;font-size:16px;color:#FFF;}
a{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:-webkit-transform 0.6s ease-in-out;transition:transform 0.6s ease-in-out;}

		#header { background-color: #024B6C; height: 100vh; padding: 20px; }
		#logoimg { max-height: 100px;}
		#navdiv, #secondnavdiv { margin: 20px auto; overflow: hidden; color:#FFF; }
		#navleft, #secondnavleft { text-align:left;float:left; }
		#navright, #secondnavright { text-align:right;float:right; }
		#navright a, #footer a { color: #FFF; padding: 12px; font-size: 18px;}
		#secondnavright a { color: #024B6C; padding: 12px; font-size: 18px;}
		#virtualaplogo { max-height: 80px;}
		.headerherodiv { padding: 140px 0; margin: 20px auto;}
		.headertitlediv, .producttitlediv { font-weight: normal;}
		.headertitle2div, .producttitle2div { font-weight: bold; }
		.whitesection {background-color: #FFF; color:#000;}
		.whitesection h2 { margin: 0; padding: 0; text-align: left;}
		.description{ margin: 20px 20px 10px 0; text-align: justify;}
		.h1, .h2, h1, h2 {margin-top: 20px;margin-bottom: 20px;}
		.h3, h3 {margin-top: 20px;margin-bottom: 10px;}
		.h4, h4 { margin-top: 10px; margin-bottom: 10px;}
		ul { list-style-image: url('../images/check.png'); margin-top: 0; margin-bottom: 10px; padding-inline-start: 40px;}
		ul li { margin: 10px 0;}
		.bluesection {background-color: #2e4c80; background: linear-gradient(0deg, #182843 0%, #2e4c80 100%);}
		.btnblue {
		  border: none; /* Remove borders */
		  border-radius: 10px;
		  padding: 14px 80px; /* Add some padding */
		  cursor: pointer; /* Add a pointer cursor on mouse-over */
		  background-color: #4573bc;
		  color: #FFF; /* Add a text color */
		  box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 4px 2px; 
		  transition: 0.3s;
		}
		.btnblue:hover {background-color: #FFF;
		  color: #4573bc;
		}
		.btnwhite {
		  border: none; /* Remove borders */
		  border-radius: 10px;
		  padding: 14px 80px; /* Add some padding */
		  cursor: pointer; /* Add a pointer cursor on mouse-over */
		  background-color: #FFF;
		  color: #4573bc;
		  box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 4px 2px; 
		  transition: 0.3s;
		}
		.btnwhite:hover {
		  background-color: #4573bc;
		  color: #FFF; /* Add a text color */
		}
		.iframevideo {
			max-width: 100%;
		}

		#bluethemebox{ width: 30px; height: 30px; background-color: #BEDEEF; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}
		#greythemebox{ width: 30px; height: 30px; background-color: #BBBBBB; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}
		#greenthemebox{ width: 30px; height: 30px; background-color: #A5DC8D; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}
		#blackthemebox{ width: 30px; height: 30px; background-color: #000000; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}
		#brownthemebox{ width: 30px; height: 30px; background-color: #D4B372; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}
		#whitethemebox{ width: 30px; height: 30px; background-color: #FFFFFF; border: 2px solid #FFF; border-radius: 5px; display: inline-block; margin-bottom: 20px;}

		.info {
		  background-color: #BEDEEF;
		  justify-content: center;
		  align-items: center;
		  padding: 20px;
		  font-size: 20px;
		  color: #5E5E5E;
		  font-weight: 200;
		  cursor: pointer;
		  transition: all .3s ease;
		  border-radius: 10px;
		  text-align: center;
		  margin-bottom: 20px;
		}
		.info img {
			max-width: 100%;
			max-height: 650px;
			margin-bottom: 10px;
		}
		.info a{
		  color: #5E5E5E;
		}

		/* Tooltip container */
		.ttip {
		  position: relative;
		  display: inline-block;
		  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
		}

		/* Tooltip text */
		.ttip .tooltiptext {
		  visibility: hidden;
		  width: 120px;
		  background-color: grey;
		  color: #fff;
		  text-align: center;
		  padding: 5px;
		  border-radius: 6px;
		  font-size: 12px;

		  /* Position the tooltip text - see examples below! */
		  position: absolute;
		  z-index: 1;
		  top: -5px;
		  right: 105%;
		  opacity: 0;
		  transition: opacity 1s;
		}

		/* Show the tooltip text when you mouse over the tooltip container */
		.ttip:hover .tooltiptext {
		  visibility: visible;
		  opacity: 1;
		}

		.ttip .tooltiptext::after {
		  content: " ";
		  position: absolute;
		  top: 50%;
		  left: 100%; /* To the right of the tooltip */
		  margin-top: -5px;
		  border-width: 5px;
		  border-style: solid;
		  border-color: transparent transparent transparent grey;
		}
		.greensection{
			background-color: #2D7780; 
			background: linear-gradient(0deg, #c5eaf3 0%, #458bbc 100%);
		}
		.testclient{ position: relative; float: right; display: inline-block; text-align: -webkit-center; margin: 100px 50px 0 50px;}
		.testquote{ position: relative; float: right; display: inline-block; background-image: url('images/customer review base_2.png'); background-size: contain; background-repeat: no-repeat; padding: 200px 50px; color:#000; max-width: 600px;}
		.project{    
			border-radius: 20px;
			box-shadow: rgba(0, 100, 150, 0.33) 0px 0px 4px 2px;
			transition:all .3s ease;
			filter: grayscale(80%);
			position: relative;
			z-index: 10;    
		}
		.project:hover {
			transition:all .3s ease;-webkit-filter:grayscale(0%);filter:grayscale(0%);
			z-index: 20;
		}
		input[type=text]{width: 100%; padding: 15px; border-radius: 10px; background-color: #B4C6E5; border: 0; color:#000;}
		::placeholder {
		  color: #333;
		  opacity: 1; /* Firefox */
		}
		::-ms-input-placeholder { /* Edge 12 -18 */
		  color: #333;
		}
		footer, #footer{ background-color: #132035; color: #FFF; padding: 40px 0; text-align: center;}
		#footernav {margin: 40px 0 20px;}

/* mobile */
@media screen and (max-width: 600px) {
	
	#navdiv { width: 100%;}
	.headerherodiv { width: 100%;}
	#navright, #secondnavright {display: none;}
	.whitesection h2 {font-size: 28px; }
	.headertitlediv, .producttitlediv h2 { font-size: 32px; }
	.headertitle2div, .producttitle2div h2 { font-size: 40px;  }
	.quote {line-height: 40px;}
	.project{max-width: 100%;}
	.testclient{ margin: 50px 25px 0 25px;}
	.testquote{ padding: 75px 25px; color:#000; max-width: 400px;}
}
@media screen and (min-width: 600px) {
	#navdiv { width: 90%;}
	.headerherodiv { width: 90%;}
	#navright, #secondnavright {display: block;}
	#herotitle{transform: translate(0, 150%); margin: 40px auto;}
	#herotitle h1{font-size: 40px; line-height: 54px;}
	#herotext{transform: translate(0, 25%); margin: 40px; width: 66%;}
	.whitesection h2 {font-size: 30px; }
	.headertitlediv, .producttitlediv h2 { font-size: 34px; }
	.headertitle2div, .producttitle2div h2 { font-size: 45px;  }
	.quote {line-height: 50px;}
	.project{max-width: 100%;}
	.testclient{ margin: 60px 30px 0 30px;}
	.testquote{ padding: 100px 30px; color:#000; max-width: 500px;}
}
/* tablet */
@media screen and (min-width: 768px) {
	#navdiv { width: 80%;}
	.headerherodiv { width: 80%;}
	#navright, #secondnavright {display: block;}
	#herotitle{transform: translate(0, 100%); margin: 20px auto;}
	#herotitle h1{font-size: 70px; line-height: 85px;}
	#herotext{transform: translate(0, 50%); margin: 80px; width: 66%;}
	.whitesection h2 {font-size: 35px; }
	.headertitlediv, .producttitlediv h2 { font-size: 36px; }
	.headertitle2div, .producttitle2div h2 { font-size: 50px;  }
	.quote {line-height: 60px;}
	.project{max-width: 120%;}
	.testclient{ margin: 75px 40px 0 40px;}
	.testquote{ padding: 150px 40px; color:#000; max-width: 600px;}
}
/* desktop */
@media screen and (min-width: 1024px) {
	#navdiv { width: 80%;}
	.headerherodiv { width: 80%;}
	#navright, #secondnavright {display: block;}
	#herotitle{transform: translate(0, 75%); margin: 0 auto;}
	#herotitle h1{font-size: 90px; line-height: 108px;}
	#herotext{transform: translate(0, 75%); margin: 100px; width: 66%;}
	.whitesection h2 {font-size: 40px; }
	.headertitlediv, .producttitlediv h2 { font-size: 40px; }
	.headertitle2div, .producttitle2div h2 { font-size: 60px;  }
	.quote {line-height: 70px;}
	.project{max-width: 120%;}
	.testclient{ margin: 100px 50px 0 50px;}
	.testquote{ padding: 200px 50px; color:#000; max-width: 600px;}
}