@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");
@import url("https://fonts.googleapis.com/cs·s2?family=Asap&family=Roboto:ital,wght@0,500;0,900;1,500&display=swap");

body{
  margin: 0px;
  padding: 0px;
  font-family: "Asap", sans-serif;
  background: #222;
}
*{
  box-sizing: border-box;
  scroll-behavior: smooth;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/*Navigation*/
nav{
  top: 0;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  width: 100%;
  position: fixed;
  z-index: 1;
  background: #222;
  box-shadow: 0px 1px 2px rgba(0,255,255,0.5), 
              0px 2px 4px rgba(0,255,255,0.5), 
              0px 4px 8px rgba(0,255,255,0.5), 
              0px 8px 16px rgba(0,255,255,0.5);
}
.logo a{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 2rem;
}
.menu{
  display: flex;
}
.menu a{
  height: 40px;
  margin: 10px;
  line-height: 43px;
  padding: 0 40px;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
}
.menu a:hover{
  color: #fff;
  background-color: #333;
  box-shadow: inset 0px 2px 4px rgba(0,255,255,0.3), 
              inset 0px 4px 8px rgba(0,255,255,0.3), 
              inset 0px 8px 16px rgba(0,255,255,0.3);
  transition: 0.2s;
  transform: translateY(2px);
}
/*Home*/
#main {
  width: 100%;
  height: 100vh;
}
.main-text{
  position: absolute;
  left: 25%;
  top: 40%;
  transform: translate(-13%,-42%);
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
}
.main-text h1{
  font-size: 3.5rem;
}
.main-text p{
  font-size: 2.5rem;
  margin: 25px 0px 25px;
}
/*Services*/
#services{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 25px;
}
.title{
  width: 100%;
  text-align: center;
}
.title p{
  color: #fff;
}
.title h2{
  color: #fff;
  position: relative;
  text-transform: uppercase;
  font-size: 3rem;
  margin-bottom: 30px;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0px;
}
.content h2{
  color: #fff;
}
.service-box {
  width: 400px;
  height: 350px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  margin: 10px;
  box-shadow: 0px 1px 2px rgba(0,255,255,0.5), 
              0px 2px 4px rgba(0,255,255,0.5), 
              0px 4px 8px rgba(0,255,255,0.5), 
              0px 8px 16px rgba(0,255,255,0.5);
  background-color: #222;
}
.service-box:hover{
  box-shadow: 0px 2px 4px rgba(0,255,255,0.7), 
              0px 4px 8px rgba(0,255,255,0.7), 
              0px 8px 16px rgba(0,255,255,0.7), 
              0px 12px 24px rgba(0,255,255,0.7);
  transform: translateY(-10px);
  transition: 0.2s;
}
.service-box p {
  text-align: center;
  width: 230px;
  margin: 0px 0px 20px 0px;
  color: #fff;
}
/*Contact*/
#contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 40px 0px;
}
.form{
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
}
.row{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-top: 20px;
}
.row2{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.row input, .row2 textarea{
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
  color: #fff;
  background: #0f0f0f;
  font-size: 15px;
  box-shadow: 0px 1px 2px rgba(0,255,255,0.5), 
              0px 2px 4px rgba(0,255,255,0.5), 
              0px 4px 8px rgba(0,255,255,0.5), 
              0px 8px 16px rgba(0,255,255,0.5);
  border-radius: 5px;
  font-family: 'Asap';
}
.row2 textarea{
  resize: none;
  height: 200px;
}
.row2 input[type='submit']{
  height: 40px;
  margin: 10px;
  width: 150px;
  line-height: 43px;
  padding: 0 40px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #000;
  border-radius: 5px;
  border: none;
  font-family: 'Asap';
}
.row2 input[type='submit']:hover{
  color: #fff;
  background-color: #222;
  box-shadow: inset 0px 2px 4px rgba(0,255,255,0.3), 
              inset 0px 4px 8px rgba(0,255,255,0.3), 
              inset 0px 8px 16px rgba(0,255,255,0.3);
  transition: 0.2s;
  transform: translateY(2px);
}
/* Banner */

	#banner {
		background-image: url("images/banner.jpg");
		background-size: cover;
		height: 28em;
		text-align: center;
		position: relative;
	}

		#banner header {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #212121;
			background: rgba(27, 27, 27, 0);
			color: #fff;
			padding: 1.5em 0;
		}

			#banner header h2 {
				display: inline-block;
				margin: 0;
				font-size: 1.25em;
				vertical-align: middle;
			}

				#banner header h2 em {
					opacity: 0.75;
				}

				#banner header h2 a {
					border-bottom-color: rgba(255, 255, 255, 0.5);
				}

					#banner header h2 a:hover {
						border-bottom-color: transparent;
					}

			#banner header .button {
				vertical-align: middle;
				margin-left: 1em;
			}
		/* Banner */

			#banner {
				height: 20em;
			}

				#banner header h2 {
					display: block;
				}

				#banner header .button {
					margin: 1em 0 0 0;
				}
		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				width: 100%;
				display: block;
			}
/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
		background-color: #37c0fb;
		height: 40px;
		margin: 10px;
		width: 150px;
		line-height: 43px;
		padding: 0 40px;
		display: inline-block;
		font-size: 1rem;
		font-weight: 600;
		border-radius: 5px;
		border: none;
		border-radius: 5px;
		border: 0;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		padding: 0 1.5em;
		line-height: 2.75em;
		min-width: 9em;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
		letter-spacing: -0.025em;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: #50c8fc;
			color: #fff !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: #1eb8fb;
			color: #fff;
		}

		input[type="submit"].alt,
		input[type="reset"].alt,
		input[type="button"].alt,
		button.alt,
		.button.alt {
			background-color: #555555;
			color: #fff;
		}

			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="button"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #626262;
			}

			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			input[type="button"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #484848;
			}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}
/* Wrapper */

	.wrapper {
		padding: 5em 0 3em 0;
	}

		.wrapper.style1 {
			background: #fff;
		}

		.wrapper.style2 {
			background-color: #fff;
			background-image: url("images/bg02.png"), url("images/bg03.png"), url("images/bg01.png");
			background-position: top left,						bottom left,					top left;
			background-size: 100% 6em,						100% 6em,						auto;
			background-repeat: no-repeat,						no-repeat,						repeat;
		}

		.wrapper.style3 {
			background-color: #37c0fb;
			background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			color: #fff;
		}

			.wrapper.style3 .button {
				background: #fff;
				color: #474747;
			}

				.wrapper.style3 .button:hover {
					color: #37c0fb !important;
				}
/* Banner2 */

	#banner2 {
		background-image: url("");
		background-size: cover;
		height: 28em;
		text-align: center;
		position: relative;
	}

		#banner2 header {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #212121;
			background: rgba(27, 27, 27, 0);
			color: #fff;
			padding: 1.5em 0;
		}

			#banner2 header h2 {
				display: inline-block;
				margin: 0;
				font-size: 1.25em;
				vertical-align: middle;
			}

				#banner2 header h2 em {
					opacity: 0.75;
				}

				#banner2 header h2 a {
					border-bottom-color: rgba(255, 255, 255, 0.5);
				}

					#banner2 header h2 a:hover {
						border-bottom-color: transparent;
					}

			#banner2 header .button {
				vertical-align: middle;
				margin-left: 1em;
			}
		/* Banner2 */

			#banner2 {
				height: 20em;
			}

				#banner2 header h2 {
					display: block;
				}

				#banner2 header .button {
					margin: 1em 0 0 0;
				}
/* Header */

	#header {
		text-align: center;
		padding: 0em 0 0 0;
		background-color: #fff;
		background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");
		background-position: top left,					top left,					top left;
		background-size: 100% 6em,					100% 6em,					auto;
		background-repeat: no-repeat,					no-repeat,					repeat;
	}

		#header h1 {
			padding: 0 0 2.75em 0;
			margin: 0;
		}

			#header h1 a {
				font-size: 1.5em;
				letter-spacing: -0.025em;
				border: 0;
			}
/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		color: #999;
		font-size: 1.25em;
		position: relative;
		margin-top: -1.25em;
		margin-bottom: 2.25em;
	}

	header.major {
		text-align: center;
		margin: 0 0 2em 0;
	}

		header.major h2 {
			font-size: 2.25em;
		}

		header.major p {
			position: relative;
			border-top: solid 1px #e0e0e0;
			padding: 1em 0 0 0;
			margin: 0;
			top: -1em;
			font-size: 1.5em;
			letter-spacing: -0.025em;
		}
		/* CTA */

			#cta {
				padding: 1.5em 0;
			}

				#cta header h2 {
					display: block;
				}

				#cta header .button {
					margin: 1em 0 0 0;
				}
		/* Nav */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
				padding-top: 44px;
			}
a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
   
}
a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1){
    filter: hue-rotate(0deg);
}
a:nth-child(2){
    filter: hue-rotate(0deg);
}
a span{
    position: absolute;
    display: block;
}
a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}
.footer{
background:#000;
padding:30px 0px;
font-family: 'Play', sans-serif;
text-align:center;
}

.footer .row{
width:100%;
margin:1% 0%;
padding:0.6% 0%;
color:gray;
font-size:0.8em;
}

.footer .row a{
text-decoration:none;
color:gray;
transition:0.5s;
}

.footer .row a:hover{
color:#fff;
}

.footer .row ul{
width:100%;
}

.footer .row ul li{
display:inline-block;
margin:0px 30px;
}

.footer .row a i{
font-size:2em;
margin:0% 1%;
}

@media (max-width:720px){
.footer{
text-align:left;
padding:5%;
}
.footer .row ul li{
display:block;
margin:10px 0px;
text-align:left;
}
.footer .row a i{
margin:0% 3%;
}
/* Icon */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.major {
			text-align: center;
			cursor: default;
			background-color: #37c0fb;
			background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
			color: #fff;
			border-radius: 100%;
			display: inline-block;
			width: 5em;
			height: 5em;
			line-height: 5em;
			box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
			margin: 0 0 2em 0;
		}

			.icon.major:before {
				font-size: 36px;
			}