@charset "UTF-8";

body, html {
	font-family:"Lato", sans-serif;
	background-color:rgba(31,50,68,1.00);
	margin: 0 auto;
	font-style: normal;
	font-weight: 100;
	width: 100vw;
    height: 100%;
	overflow-x: hidden;
	font-size: 15px;

}
.center-logo {
	display:none;
}

.hide-robot {
	display:none;
	visibility: hidden;
	opacity: 0;
	
		}

.nav {

	position: fixed;
	width: 100%;
	padding: 0 1vw;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	box-sizing: border-box;
	background:rgba(255,255,255,1.00);
	top: 0;
	left: 0;
	overflow: hidden;
	z-index:99;
	border-bottom: 2px solid rgba(31,50,68,1.00);
	
}
.nav img {
	width: 20%;
	padding: 1vw 0;
	align-self: middle;

}
.nav-links {
align-self: center;
	
}

.nav-links a {
	align-self: center;
	padding: .5vw 1vw;
	border-radius: 1px;
	text-decoration: none;
	font-size: 20px;
	background:rgba(255,255,255,1.00);
	border-top: 2px solid rgba(41,46,46,1.00);
	border-bottom: 2px solid rgba(41,46,46,1.00);
	font-weight: 500;
	color:rgba(56,115,182,1.00);
	transition: 700ms ease;


}
.nav-links a:hover {
	background:rgba(56,115,182,1.00);
	color:white;

}
.nav-scroll {
  padding: 0 0.5vw; /* Reduce padding */

}

.nav-scroll img {
  width: 15%; /* Make the logo smaller */
  padding: 0.5vw 0;
}

.nav-scroll .nav-links a {
  font-size: 18px; /* Make the font size smaller */
  padding: 0.25vw 0.5vw;
}

.topBanner {
	display:flex;
	justify-content: space-around;
	box-sizing: border-box;
	width:100%;
	height: 100vh;
	color: white;

	background: rgba(30,50,67,1.00);
}
.bannerText {
	width: 50%;
	padding: 5vw 2vw 2vw 2vw;
	justify-content: center;
	align-self: center;

}
.bannerText h1 {
	font-size: 3rem;
	font-weight: 900;
}
.bannerText li, p {
	font-size:  1.5rem;
	font-weight: 400;
}
.button {
	padding: 1vw 3vw;
	font-size: 1.3rem;
	margin-top:2vw;
	background-color: rgba(56,115,182,1.00);
	font-weight: 600;
	color:white;
	border:none;
	border-radius: 25px;
	transition: 700ms ease;
}
.button:hover {
	background:#D9643E;
	color:white;
}
.bannerImg {
 width: 50%;
	justify-content: center;
	align-self: center;

	
}
.bannerImg img {
	width: 100%;
	height: auto;
	align-self: right;
	padding: 7vw 2vw 2vw 1vw;
	margin-left:-2vw;

}
.bannerImg h1 {
	color:rgba(49,129,192,1.00);
	padding-left: 5vw;
	margin-top: -2vw;
}
.keyPoints {
	display: flex;
	margin-top: 3vw;
	background: rgba(255,255,255,1.00);
	color:rgba(31,50,68,1.00);
	justify-content: space-around;
	padding: 3vw 2vw;
	
}
.point {
	display: flex;
	flex-direction: column;
	width: 33%;
	height: 300px;
	padding: 1vw 2vw;
	justify-content:space-around;
}
.point img {
	height: 60px;
	width: auto;
	align-self: flex-start;
}

.scale {
	width: 100%;
	display:flex;
	flex-direction: row;
	color: white;
	padding: 3vw 3vw;
	box-sizing: border-box;
	gap: 2vw;
}
.scale img {
	align-self: flex-start;
	margin-top: 3vw;
}
.scale p, li {
	font-size: 18px;
	font-weight: 300;
}
.how {
	width: 100%;
	box-sizing: border-box;
	background-color: white;
	color:rgba(31,50,68,1.00);
	padding: 3vw;
}
.howContainer {
	display:flex;
	gap: 3vw;

}
.how img {
	
}
.how li {
	font-weight: 400;
}
.video {
	width: 100%;
	box-sizing: border-box;
	margin-top: 2vw;
	padding: 2vw;
	display: flex;
	justify-content: space-between;
		color:#1F3244;
		background-color: white;
}
.video p {
	font-weight: 300;
}
.vidTxt {
	width: 70%;
	padding: 2vw;
}
.iframe {
	margin-right: 2vw;
	min-height: 300px;
	box-shadow: 2px 2px 5px rgba(100,100,100,.3);
	border: none;
	border-radius: 5px;
	overflow: hidden;
}
.pdf-box {
	display: flex;
	flex-wrap: wrap;

	min-height: 400px;
	
}
.pdf {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.download {
	cursor: pointer;
    padding: 1vw;
    width:33%;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
	border:none;
	box-shadow: 2px 2px 5px rgba(100,100,100,.3);
    transition: 700ms ease;
    background-color:rgba(255,255,255,1.00);
	color: rgba(104,104,104,1.00);
}

.download:hover {
    background: linear-gradient(145deg, #f4f4f4, #cecece);
    color: #888;
}
.reContain {
	background: white;
	padding: 3vw 2vw;
	color: #1F3244;
}
.resources {
	display: flex;
	gap: 2vw;
}
.connect {
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
	gap:2vw;
	color:white;
	padding: 3vw 2vw;
}
.connect p, li {
	font-size: 17px;
	font-weight: 300;
}
.conText {
	width: 50%;
	justify-content: space-between;
}
.conImg {
	display:flex;
	width: 50%;
justify-content: center;
	border: 2px solid rgba(203,203,203,1.00);
	padding: 1vw;
	box-sizing: border-box;
	gap:1vw;


}
.imageBox img:nth-child(1) {
	margin-top:6vw;
}
.imageBox img {
	width: 100%;
	height: auto;
align-self: baseline;

	
}
.imageBox {
	padding: 1vw;
	box-sizing: border-box;
	justify-content: baseline;
	align-items: baseline;
}
.contactInfo {
	background: white;
	display: flex;
	gap:6vw;
	padding: 3vw 4vw;

	color:#1F3244;
}
.contactInfo p {
	font-size: 1rem;
}
.contactInfo a {
	color:rgba(223,101,60,1.00);
}

.contactB {
	margin-top: 4vw;
	border: none;
	border-radius: 3px;
	
	width: 98%;
	background-color:#df653c;
	color: #1F3244;
	box-shadow: rgba(223, 101, 60, 0.4) 5px 5px, rgba(223, 101, 60, 0.3) 10px 10px, rgba(223, 101, 60, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
	transition: 700ms ease;
	
}
.contactB p {
	font-weight: 900;
	font-size: 1.5rem;
}
.contactB:hover {
	color: #df653c;
	background-color: #FFFFFF;
}
.water {
	width: 100%;
		padding: 4vw 2vw;
		box-sizing: border-box;
	justify-content: space-around;
	color: white; 
}
.waterC {
	display:flex;
	width: 100%;
	gap: 2vw;

}
.waterC img {
	width: 30%;
	border: 2px solid white;
	border-radius: 4px;

}
#contactForm {
	display: none;
	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  padding: 2vw;
  width: 60vw;
	
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  border-radius: 7px;
	-webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);

	z-index:999;	
}
#contactForm p {
	font-weight: 900;
	margin: 0;
	padding: 0;
	color:rgba(31,50,68,1.00);
}
.scheduleB {
	display: flex;
	flex-direction: column;
	gap: 1vw;
	justify-content: space-around;
	width: 80%;
	margin:1vw auto;
	
}
input, textarea {
	padding: 1vw;
	margin: .5vw;
	border-color: rgba(192, 192, 192, .8);
	border-radius: 7px;
	background-color: rgba(0,0,0,.1);
	box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
	box-sizing: border-box;
	
}


input::placeholder, textarea::placeholder {
	padding-left: 10px;
}
#contactForm input::placeholder, #contactForm textarea::placeholder {
	padding-left: 10px;
	color: rgba(79,0,134,1.00);
}
#contactForm .formBtnB {
		padding: 10px;
	color: rgba(31,50,68,1.00);

}
.radio {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.radio label {
	color: #3C3C3C;
}
#contactForm .radio input {
	align-self: center;

}


@media (max-width:800px) {
	.waterC {
	display:flex;
		flex-direction: column;
	width: 100%;
	gap: 2vw;

}
	.waterC img {
	width: 90%;
	border: 2px solid white;
	border-radius: 4px;

}

	.topBanner {
	flex-direction: column;
		width:100%;
		height: auto;
		margin-top: 7vw;
		padding-bottom: 7vw;
}
.bannerText {
	width: 96%;
	

}
.bannerText h1 {
	font-size: 1.8rem;
	font-weight: 900;
}
.bannerText li, p {
	font-size:  1.1rem;
	font-weight: 400;
}
	.bannerImg {
		width: 90%;
	}
	.keyPoints {
	display: flex;
		flex-direction: column;
	margin-top: 4vw;

	
}
.point {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 220px;
	padding: 1vw 4vw;
	justify-content:space-around;
}
.scale {
	width: 100%;
	display:flex;
	box-sizing: border-box;
	flex-direction: column;
	color: white;
	padding: 3vw 4vw;
	gap: 2vw;
}
.scale img {
	align-self: flex-start;
	margin-top: 3vw;
}
.scale p, li {
	font-size: 17px;
	font-weight: 300;
}
	.scale img {
		width: 98%;
	align-self: flex-start;
	margin-top: 3vw;
}
.how {
	width: 100%;
	box-sizing: border-box;
	background-color: white;
	color:rgba(31,50,68,1.00);
	padding: 3vw 4vw;
}
.howContainer {
	display:flex;
	flex-direction: column;
	gap: 3vw;

}
	.how img {
	width: 98%
}

	.video {
	
	margin-top: 2vw;
	padding: 2vw;
	display: flex;
		flex-direction: column;
	justify-content: space-between;

}



.download {
	cursor: pointer;
    padding: 1vw;
    width:33%;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
	border:none;
	box-shadow: 2px 2px 5px rgba(100,100,100,.3);
    transition: 700ms ease;
    background-color:rgba(255,255,255,1.00);
	color: rgba(104,104,104,1.00);
}

.download:hover {
    background: linear-gradient(145deg, #f4f4f4, #cecece);
    color: #888;
}
.reContain {
	
	background: white;
	padding: 3vw 2vw;
	color: #1F3244;
}
.resources {
	display: flex;
	flex-direction: column;
	gap: 4vw;
}
	.connect {
		flex-direction: column;
	}
	.conText {
	width: 94%;
}
.conImg {
	width: 94%;
}
}
@media (max-width: 600px) {

	.contactForm {
		width: 90%;
	}
}

@media (max-width:750px) {
		.inputs input {
		padding: 2vw;
	}
	input, textarea {
	padding: 2vw;
	margin: 1vw;
	border-color: rgba(192, 192, 192, .8);
	border-radius: 7px;
	background-color: rgba(0,0,0,.1);
	box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
	box-sizing: border-box;
	
}
	.radio {
	display: flex;
		flex-direction: column;
	justify-content:flex-start;
}
	.radio input {
		align-self: left;
	}
	.tabs {

	display:flex;
	flex-direction: column;
    justify-content: space-between;
}

.tabs a {
    cursor: pointer;
    padding: 2vw;
    width:100%;              
}

		.block {
		width: 100%;
		display: flex;
			flex-direction: column;
		justify-content: space-evenly;
		box-sizing: border-box;
		gap: 1vw;
	}
.block p {
	width: 90%;
	align-self: center;
}
.block img {
	width: 28%;
}

	
	.vid {
	width: 100%;
	display: block;
	margin: auto;
}

		#menu {

		border: none;
		box-shadow: 2px 2px 3px rgba(100,100,100,.4);
  width: 6vw;
  height: 6vw;
	align-self: center;
	margin-left: 1vw;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;

}

#menu span {
  width: 25px;
  height: 4px;
  background-color:rgba(41,46,46,1.00);
  border-radius: 3px;
  transition: 0.3s ease;
  transform-origin: center;

}

.open .line1 {
  transform: rotate(45deg) translateY(3px) translateX(4px);
}

.open .line2 {
  transform: rotate(-45deg) translateY(-3px) translateX(4px);
}

	.center-logo {
		display: flex;
		position: fixed;
		width: 100%;
	background-color: rgba(255,255,255,1.00);
		z-index: 99;

	}
	.center-logo img {
		display: block;
		width: 30%;
		margin: 0 auto;
		padding: 2vw 1vw;
	}

	.nav {
	display: none;
		width: 90vw;
		height: 70vh;
		margin-top: 12vw;
		box-shadow: 2px 2px 10px rgba(100,100,100,.3);
		border-radius:7px;
		background-color: rgba(255,255,255,1.00);

	}
	.nav-links {
	display:block;
	margin-top: 3.3vw;
		line-height: 2;

		
}
    .nav-links a {
	display: flex; 
	flex-direction: row;
	padding: 1vw;
		box-shadow: 1px 2px 5px rgba(0,0,0,.4);
		transition: 500ms ease-in;
		

}


	.logo {
		width: 80%;
		margin: 1.5vw 1vw;
	}
	.dropdown {
		overflow: scroll;
	}
	.dropdown-content {
    display: none;
    position:absolute;
    background-color: #fff;
    top: 7vw;
	width: 400px;
	height: 500px;
	border-radius: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	left: 0;
	margin-left: 20vw;
	overflow: scroll;		
	
}


}
@media (max-width: 700px) {
	.services {
		flex-direction: column;
	}
	.card {
		width: 80%;
		margin: 0 auto;
	}
	.card img {
		display: block;
		width: 50%;
		margin: 0 auto;
	}
	#contactForm {
		width: 80%;
	}
	input, textarea {
	padding: 1.5vw;
	margin: 1vw;
	border-color: rgba(192, 192, 192, .8);
	border-radius: 7px;
	background-color: rgba(0,0,0,.1);
	box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
	box-sizing: border-box;
	
}
}
@media (max-width:550px) {
			input, textarea {
	padding: 3vw;
	margin: 1.5vw;
	border-color: rgba(192, 192, 192, .8);
	border-radius: 7px;
	background-color: rgba(0,0,0,.1);
	box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
	box-sizing: border-box;
	
}
	
	#menu {
		height: 8vw;
		width: 8vw;
	}
	.center-logo img {
		width: 45%;
	}
}
@media (max-width:400px) {

	#logo-sml {
		width: 55vw;
	}
	.dropdown-content {

    width: 330px;
	height: 600px;
	margin-left: 10vw;
	
}
		#menu {
		height: 9.5vw;
		width: 9.5vw;
	}
	#menu span {
  width: 21px;
  height: 4px;

}
	  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
		.overlay-text {

	font-size: 5vw;
}
}