body{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	width: 100%;
	cursor: default;
}

header{
	width: 90%;
	margin: 5% 5% 15% 5%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

header button{
	width: 120px;
	height: 35px;
	border: solid 2px hsl(322, 100%, 66%);
	background-color: transparent;
	border-radius: 50px;
	color: hsl(322, 100%, 66%);
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	cursor: pointer;
}

header button:hover{
	color: hsl(321, 100%, 78%);
	border-color: hsl(321, 100%, 78%);
}

.mainbtn{
	width: 250px;
	height: 60px;
	color: white;
	border-radius: 50px;
	font-family: 'Open Sans', sans-serif;
	border-style: none;
	background-color: hsl(322, 100%, 66%);
	font-weight: 600;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	cursor: pointer;
}

.mainbtn:hover, form button:hover{
	background-color: hsl(321, 100%, 78%);
}

main{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.s1{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10%;
	text-align: center;
}

.s1 h1{
	font-size: 50px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	margin-bottom: 0;
}

.s1 p{
	margin: 1% 30% 3% 30%;
	font-weight: 400;
}

.mainimg{
	width: 70%;
}

.s2{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	margin-top: 10%;
	padding-bottom: 15%;
	background: url("images/bg-section-top-desktop-1.svg") no-repeat bottom center / 100%;
}

.s2 div{
	margin: 0 18% 0 18%;
}

.s2 h2{
	font-size: 70px;
	font-weight: 700;
	margin: 0;
}

.s2 p{
	margin-top: 1%;
}

.s3, .s5, .s4{
	width: 100%;
	background-color: hsl(207, 100%, 98%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 2% 0 2% 0;
	align-items: center;
	gap: 2% 5%;
}

.s3 h3, .s5 h3{
	order: 1;
	margin-left: 15%;
	margin-bottom: 0;
	font-size: 45px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	padding-top: 5%;
}

.s3 img, .s5 img{
	order: 2;
	grid-row: span 2;
	width: 80%;
}

.s3 p, .s5 p{
	order: 3;
	margin-left: 15%;
	margin-top: 0;
	padding-bottom: 25%;
}

.s4{
	background: url("images/bg-section-bottom-desktop-1.svg") no-repeat top center / 100%,
				url("images/bg-section-top-desktop-2.svg") no-repeat bottom center / 100%;
				
	padding: 15% 0 15% 0;
}

.s4 img{
	grid-row: span 2;
	width: 80%;
	margin-left: 15%;
}

.s4 h3{
	margin-right: 15%;
	margin-bottom: 0;
	font-size: 45px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	padding-top: 5%;
}

.s4 p{
	margin-right: 15%;
	margin-top: 0;
	padding-bottom: 25%;	
}

.s6{
	background: url("images/bg-section-bottom-desktop-2.svg") no-repeat top center / 100%,
				url("images/bg-footer-top-desktop.svg") no-repeat bottom center / 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20% 0;
}

.s6 h3{
	font-size: 40px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}

footer{
	background-color: hsl(192, 100%, 9%);
	display: grid;
	grid-template-columns: auto auto;
	gap: 20% 5%;
	color: white;
	padding: 5% 10% 10% 10%;
}

footer img{
		filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(308deg) brightness(103%) contrast(101%);
}

.f1{
	display: flex;
	flex-direction: column;
}

.f1 span{
	margin-bottom: 5%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.f1 p{
	padding-right: 40%;
	margin: 5% 0;
}

.f1 span a{
	color: white;
	text-decoration: none;
	margin-left: 5%;
	font-size: 20px;
}

.f1 span img{
	width: 5%;
}

.logo{
	width: 30%;
}

form{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0 5%;
	margin-bottom: 7%;
}

form h4{
	grid-column: span 2;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 0;
}

form p{
	grid-column: span 2;
	padding-right: 35%;
	margin-top: 0;
}

form button{
	color: white;
	border-radius: 10px;
	font-family: 'Open Sans', sans-serif;
	border-style: none;
	background-color: hsl(322, 100%, 66%);
	font-weight: 600;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	cursor: pointer;
}

form input{
	border-radius: 10px;
	border-style: none;
	font-family: 'Open Sans', sans-serif;
	color: hsl(192, 100%, 9%);
	font-size: 15px;
	cursor: pointer;
	padding-left: 5%;
}

.social{
	width: 20%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.social img:hover{
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(62%) sepia(17%) saturate(7033%) hue-rotate(182deg) brightness(103%) contrast(97%);
}

input:invalid {
  border: 2px solid red;
}

@media (max-width: 800px){
	header img{
		width: 35%;
	}
	
	.s1 h1{
		font-size: 30px;
		padding: 3% 10%;
	}
	
	.s1 p{
		margin: 3% 12%;
	}
	
	.s1 button{
		margin-top: 7%;
	}
	
	.s2{
		flex-direction: column;
		align-items: center;
		background-image: url("images/bg-section-top-mobile-1.svg");
	}
	
	.s2 div{
		margin: 10% 0;
	}
	
	.s3, .s4, .s5{
		display: flex;
		flex-direction: column;
		padding: 15% 0 5% 0;
		align-items: center;
		text-align: center;
	}
	
	.s3 img, .s4 img, .s5 img{
		order: 1;
		width: 70%;
	}
	
	.s3 h3, .s4 h3, .s5 h3{
		order: 2;
		margin: 15% 10% 0 10%;
		font-size: 35px;
	}
	
	.s3 p, .s4 p, .s5 p{
		order: 3;
		margin:5% 10% 0 10%;
	}
	
	.s4{
		background-image: url("images/bg-section-bottom-mobile-1.svg"),
						  url("images/bg-section-top-mobile-2.svg");
		padding-bottom: 15%;
	}
	
	.s4 img{
		margin: 15% 0 0 0;
	}
	
	.s6{
		text-align: center;
		padding-bottom: 80%;
		background-image: url("images/bg-section-bottom-mobile-2.svg"),
						  url("images/bg-footer-top-mobile.svg");
	}
	
	.s6 h3{
		font-size: 30px;
	}
	
	footer{
		display: flex;
		flex-direction: column;
	}
	
	form{
		order: 1;
		display: flex;
		flex-direction: column;
	}
	
	form h4{
		margin-bottom: 5%;
	}
	
	form p{
		padding: 0;
		margin-bottom: 5%;
	}
	
	form input{
		height: 40px;
		margin-top: 5%;
	}
	
	form button{
		width: 50%;
		height: 40px;
		align-self: end;
		margin-top: 5%;
	}
	
	.f1{
		order: 2;
		margin-top: 10%;
	}
	
	.f1 img{
		width: 65%;
	}
	
	.f1 p{
		padding: 0;
		margin-bottom: 10%;
	}
	
	.f1 span a{
		font-size: 15px;
	}
	
	.social{
		order: 3;
		margin-top: 5%;
		width: 30%;
	}
}