@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;}

		#logoimg { max-height: 100px;}
		#header { background-image: url('images/supatone-banner-2.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#mobilehero { background-image: url('images/mobile dev banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#databasehero { background-image: url('images/database-hero-banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#itconsulthero { background-image: url('images/it consult banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#webdevhero { background-image: url('images/web dev banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#hackinghero { background-image: url('images/hacking hero banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#privacyhero { background-image: url('images/data privacy hero banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#cyberhero { background-image: url('images/cybersecurity hero banner.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; padding: 20px; }
		#navdiv { margin: 20px auto; overflow: hidden; color:#FFF; }
		#navleft { text-align:left;float:left; }
		#navright { text-align:right;float:right; }
		#navright a, #footer a { color: #FFF; padding: 12px; font-size: 18px;}
		.headerherodiv { padding: 140px 0; margin: 20px auto;}
		.headertitlediv, .producttitlediv { font-weight: normal;}
		.headertitle2div, .producttitle2div { font-weight: bold; }
		#servicebardiv{ position: absolute; top: 100vh; margin-top: -100px; left: calc(50vw - 440px);}
		#servicebarbox{ border-radius: 20px; background-color: #FFF; box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 8px 5px;}
		.servicebarservice {display: inline-block; margin: 10px; padding: 0px; text-align: center; width: 200px;}
		.servicebardivider {display: inline-block; margin-top: 10px; padding: 0px; text-align: center;}
		.whitesection {background-color: #FFF; color:#000;}
		.whitesection h2 { margin: 0; padding: 0; text-align: left;}
		.coursediv {color:#FFF; }
		.coursedivinner { background-color: rgb(46,75,127); background: linear-gradient(0deg, rgba(19,32,53,1) 0%, rgba(46,75,127,1) 100%); box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 8px 5px; border-radius: 20px;}
		.coursedivleft{display: inline-block; text-align: center;vertical-align: top; }
		.coursedivright{vertical-align: top; display: inline-block;}
		.abouttitle{font-size: 40px; font-weight: normal; text-align: left;}
		p {margin: 0 0 10px;}
		.description{ margin: 20px 20px 10px 0; text-align: justify;}
		.process{width:100%;max-width:100%;transition:all .3s ease;cursor:pointer;}
		.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%);}
		.productdiv{ width: 80%; margin: 40px auto;}
		  .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 */
		  }
		  .greensection{
			background-color: #2D7780; 
			background: linear-gradient(0deg, #c5eaf3 0%, #458bbc 100%);
		  }
		  .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) {
	/*.topnav a, .topnav div a{display: none;}
	.topnav a.icon {
	float: right;
	display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
	}
	.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
	}
	.modal-content {
	width: 100%;
	}*/
	#navdiv { width: 100%;}
	.headerherodiv { width: 100%;}
	#navright {display: none;}
	.whitesection h2 {font-size: 28px; }
	.headertitlediv, .producttitlediv h2 { font-size: 32px; }
	.headertitle2div, .producttitle2div h2 { font-size: 40px;  }
	#servicebardiv{display: none;}
	.coursediv {margin: 100px auto; padding: 10px; width: 90%;}
	.coursediv img { max-width: 90%;}
	.coursedivleft{width: 100%; margin: -100px 0 20px 0;}
	.coursedivright{width: 100%; margin: 0 0 20px; padding: 20px;}
	.servicedescription{width: 100%; padding: 40px;}
	.quote {line-height: 40px;}
	.project{max-width: 100%;}
	
}
@media screen and (min-width: 600px) {
	/*#logosm{display: inline;}
	#logolg{display: none;}*/
	#navdiv { width: 90%;}
	.headerherodiv { width: 90%;}
	#navright {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;  }
	#servicebardiv{display: none;}
	.coursediv {margin: 100px auto; padding: 20px; width: 90%;}
	.coursediv img { max-width: 90%;}
	.coursedivleft{width: 100%; margin: -100px 0 20px 0;}
	.coursedivright{width: 100%; margin: 0 0 30px; padding: 30px;}
	.servicedescription{width: 80%; padding: 40px;}
	.quote {line-height: 50px;}
	.project{max-width: 100%;}
}
/* tablet */
@media screen and (min-width: 768px) {
	/*#logosm{display: inline;}
	#logolg{display: none;}*/
	#navdiv { width: 80%;}
	.headerherodiv { width: 80%;}
	#navright {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;  }
	#servicebardiv{display: none;}
	.coursediv {margin: 100px auto; padding: 20px; width: 90%;}
	.coursediv img { max-width: 90%;}
	.coursedivleft{width: 50%; margin: -100px 0 20px 0;}
	.coursedivright{width: 49%; margin: 0 0 40px; padding-right: 40px;}
	.servicedescription{width: 75%; padding: 40px;}
	.quote {line-height: 60px;}
	.project{max-width: 120%;}
}
/* desktop */
@media screen and (min-width: 1024px) {
	/*#logosm{display: none;}
	#logolg{display: inline;}*/
	#navdiv { width: 80%;}
	.headerherodiv { width: 80%;}
	#navright {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;  }
	#servicebardiv{display: inline-block;}
	.coursediv {margin: 100px auto; padding: 20px; width: 80%;}
	.coursediv img { max-width: 340px;}
	.coursedivleft{width: 50%; margin: -100px 0 20px 0;}
	.coursedivright{width: 49%; margin: 0 0 40px; padding-right: 40px;}
	.servicedescription{width: 66%; padding: 40px;}
	.quote {line-height: 70px;}
	.project{max-width: 120%;}
}