@charset "UTF-8";
/* CSS Document */
html, body {
  overflow-x: hidden;
}

.herobackground {
	width: 100vw;
	background: radial-gradient(circle, #D1EBFF, #78C3FB);
	height: 120vw;
	display: block;
	margin-top: -2vw;
}

.circlebackground {
	height: 100vw;
	display: block;
	background: #78C3FB;
	width: 50vw;
	margin-top: 0vw;
	position: relative;
	z-index: 1;
	clip-path: circle(50vw at 0vw 60vw );
	overflow: hidden;
}

.herotitle {
	font-family: 'poppins';
	font-size: 8vw;
	text-align: center;
	width: 100vw;
	padding-top: 5vw;
	z-index: 2;
	position: relative;
	margin-top: -85vw;
}

.herotitletwo {
	font-family: 'poppins';
	font-size: 4vw;
	text-align: center;
	width: 100vw;
	font-weight: lighter;
	margin-top: 0vw;
	z-index: 2;
	position: relative;
}

.contactusfor {
  position: relative;
  top: 0vw;
  z-index: 5;
}

.contactusbackground {
	width: 88vw;
	z-index: 1;
	height: 60vw;
	background: #193158;
	display: block;
	border-radius: 5vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-top: -80vw;
}

.contactformbackgound {
	width: 90vw;
	height: 135vw;
	background: white;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: -61vw;
	border-radius: 5vw;
	box-shadow: 0vw 0.05vw 2vw 1vw rgba(0, 0, 0, 0.3);
}

.contactinfotitle {
	color: white;
	font-size: 5vw;
	font-family: "poppins",sans-serif;
	position: absolute;
	top: 10px;
	display: block;
	width: 100%;
	text-align: center;
}

.contactinfopara {
	color: white;
	font-size: 3vw;
	font-family: "poppins",sans-serif;
	font-weight: lighter;
	position: relative;
	top: 10vw;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 85vw;
	text-align: left;
}

.emailsection p, .locationsection p {
	position: absolute;
	left: 30px;
}

.emailicon {
  width: 20px;
  height: 20px;
  background: white;
  clip-path: path("M 0,10 L 10,14 20,10 L 20,20 0,20 Z");
  border-radius: 3px;
}

.emailtopicon {
	width: 20px;
	height: 20px;
	background: white;
	position: absolute;
	top: 4px;
	clip-path: path("M 0,0 L 20,0 L 20,3 L 10,7 L 0,3");
	border-radius: 2px;
}

.emailsection {
	width: 85vw;
	height: 30px;
	background: none;
	position: relative;
	top: 18vw;
	display: flex;
	flex-direction: row;
	margin-left: auto;
	margin-right: auto;
	color: white;
	text-align: left;
	font-family: 'poppins';
	font-weight: lighter;
	font-size: 3vw;
}

.locationicon {
	width: 20px;
	height: 20px;
	background: white;
	clip-path: circle(8px at 10px 8px);
	position: absolute;
	left: 0px;
}

.locationminicircle {
	width: 20px;
	height: 20px;
	background: #193158;
	position: absolute;
	clip-path: circle(5px at 10px 8px);
}

.locationiconbotton {
	width: 20px;
	height: 20px;
	background: white;
	clip-path: path("M 4,9 L 18,8 A 20,20 0,0,1 10,20 A 20,20 0,0,1 2,9 ");
	top: 1px;
	position: absolute;
}
.locationsection {
	width: 85vw;
	height: 30px;
	background: none;
	position: relative;
	top: 25vw;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	color: white;
	text-align: left;
	font-family: 'poppins';
	font-weight: lighter;
	font-size: 3vw;
}

.contactform {
	position: absolute;
	top: 65vw;
	display: flex;
	flex-direction: column;
	width: 90vw;
}

.namecontainerform {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	display: flex;	
	gap: 20vw;
	margin-right: 13vw;
}

.fname, .sname {
	font-family: 'poppins';
	font-size: 4vw;
}

#fname, #sname {
	border: none;
	border-bottom: solid;
	border-bottom-width: 0.5px;
	width: 35vw;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 100;
}

.textboxcontainer {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	display: flex;	
	gap: 6vw;
	margin-left: -6vw;
}

.position, .yourmessage {
	font-family: 'poppins';
	font-size: 4vw;
	margin: 20px 0 0 20px;
}

#positiondrop, #yourmessage {
	border: none;
	border-bottom: solid;
	border-bottom-width: 0.5px;
	width: 76.5vw;
	margin-left: 20px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 100;
}

#yourmessage {
	padding-bottom: 40px;
}

#submitbutton {
	width: 60vw;
	height: 8vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	background: #061321;
	border: none;
	color: white;
	border-radius: 8px;
	transition: ease 0.3s;
	font-size: 3vw;
}

#submitbutton:hover {
	background: #0D4AA6;
}
.spacerformain {
	height: 5vw;
	width: 100vw;
}

@media (min-width: 650px) {
	
	.herobackground {height: 60vw;}
	
	.circlebackground {height: 100%;}
	
	.herotitle {position: relative; top: 38vw; font-size: 4vw;}
	
	.herotitletwo {top: 38vw; font-size: 2.5vw;}
	
	.contactusbackground {width: 40vw; margin-left: 3vw; height: 55vw; margin-top: -30vw;}
	
	.contactformbackgound {margin-left: auto; margin-right: auto; margin-top: -56vw; height: 57vw; width: 96vw;}
	
	.contactinfotitle {font-size: 2.5vw;}
	
	.contactinfopara {font-size: 1.5vw; width: 35vw; text-align: center;}
	
	.emailsection {width: 100%;}
		
	.emailsection p {font-size: 1.5vw; position: none; left: 0vw; text-align: center; width: 100%; margin-top: -0.5vw;}
	
	.emailicon, .emailtopicon {margin: -4px 0 0 6vw;}
	
	.locationsection {width: 100%;}
	
	.locationsection p {font-size: 1.5vw; position: none; text-align: center; width: 100%; left: 0vw; margin-top: -0.5vw;}
	
	.locationiconcontainer {position: absolute; left: 6vw;}
	
	.namecontainerform {margin: -62vw 0 0 36vw; gap: 15vw;}
	
	.namecontainerform label {font-size: 2vw;}
	
	.textboxcontainer {margin: 0vw 0 0 42vw; gap: 5.5vw;}
	
	#fname, #sname {width: 20vw;}
	
	.position {margin-left: 43.5vw; font-size: 2vw; width: 40vw;}
	
	#positiondrop {width: 50.5%; margin-left: 43.5vw;}
	
	.yourmessage {margin-left: 43.5vw; font-size: 2vw;}
	
	#yourmessage {width: 50.5%; margin-left: 43.5vw;}
	
	#submitbutton {width: 25vw; margin-left: 56vw; height: 3vw; font-size: 1.5vw;}
			
}

body {
	
	height: 100vh;
}