@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css');

body,html{
	font-family: 'Nunito Sans', sans-serif;
	font-size:16px;
	overflow-x:hidden;
}

:root{
	--color1:258;
	--satur1:45%;
	--light1:46%;
	--light-hover: calc(var(--light1)/1.15);
	--maincolor:hsl(var(--color1) ,var(--satur1), var(--light1));
	--maindarker:hsl(var(--color1) ,var(--satur1), var(--light-hover));


	--color2:240;
	--satur2:57%;
	--light2:83%;
	--light2-hover: calc(var(--light2)/1.15);
	--subcolor:hsl(var(--color2) ,var(--satur2), var(--light2));
	--subdarker:hsl(var(--color2) ,var(--satur2), var(--light2-hover));
	--trim:#666;
}

a:link {
	color: #fff;
  text-decoration: none;
}

a:visited {
	color: #fff;
  text-decoration: none;
}

a:hover {
	color:#fff;
  text-decoration: none;
}

a:active {
	color: #fff;
  text-decoration: underline;
}

*{
	box-sizing:border-box;
}

.cw{
	width:100%;
	max-width:900px;
	margin:0px auto;
}

.btn1{
	--trim: var(--maindarker);
	background:var(--maincolor);
}

.btn1:hover{
	background:var(--maindarker);
}

.btn2{
	--trim: var(--subdarker);
	background:var(--subcolor);
}

.btn2:hover{
	background:var(--subdarker);
}

.btn3{
	background:#fff;
	color:var(--maincolor);
	--trim:transparent;
}

.btn3:hover{
	background:var(--subcolor);
	color:#fff;
}

.btn-wt{
	color: #fff;
}

/*navigation*/

.top-nav{
	padding:.5em calc(8vw + 1em);
	display:flex;
	justify-content: space-between;
	align-items:center;
	font-size:1.1em;
	color:#fff;
	background:var(--maincolor);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.nav-logo{
	font-weight:800;
	font-size:2em;
}

.nav-logo > img.logo-img{
	width:100%;
	max-width:4em;
	display:block;
	aspect-ratio:21/6;
	object-fit:contain;
}

.nav-list{
	display:flex;
	gap:1em;
	text-transform: uppercase;
}

.nav-list a{
	text-decoration: none;
	color:inherit;
	font-weight:400;
	transition:.3s color;
}

.nav-list a:hover{
	color:var(--subcolor);
}

.nav-mobile{
	display:none;
}

/*section1*/

.s1{
	padding:1em calc(8vw + 1em) 0;
	background-size:contain;
	background-repeat: no-repeat;
	background-position: right center;
	background-color:#acace5;
	color:#fff;
}

.banner-grid{
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap:1em;
	align-items: flex-end;
}

.banner-img{
	display:block;
	width:100%;
	height:auto;
}

.banner-content{
	padding:1em 0;
	align-self: center;
}

.c1{
	color:var(--maincolor);
}

.banner-h{
	font-size:3em;
	font-weight:800;
	margin-bottom:.5em;
}
/*section2*/

.s2{
	background:#fff;
	padding:2.25em 2em;
	font-size:.9em;
}

.s2-img{
	aspect-ratio:3/2;
	object-fit: cover;
	display:block;
	width:100%;
	padding:.5em 1em;
}

.s2-panel{
	background:var(--maincolor);
	color:#fff;
	font-size:1.1em;
	display:flex;
	flex-direction: column;
}

.panel-content{
	background:var(--subcolor);
	padding:1em 1.5em 2em;
	text-align:center;
	height:100%;
}

.p{
	line-height:1.5em;
}

.panel-h{
	font-size:2.5em;
	font-weight:800;
	text-transform: uppercase;
	margin-bottom:.25em;
}

.panel-sh{
	font-size:1.75em;
	font-weight:700;
}

/*section3*/

.s3{
	background:var(--subcolor);
	padding:2em 2em;
	position: relative;
	isolation:isolate;
	overflow:hidden;
}

.s3-bg{
	position: absolute;
	top:50%;
	right:1vw;
	width:450px;
	transform:translate(0,-50%);
	pointer-events: none;
	z-index:-1;
}

.form-wrapper{
	text-align: left;
}

.grid-row{
	display:grid;
	gap:1.5em;
	grid-template-columns: repeat(var(--col),minmax(0,1fr));
}

.form-panel{
	background:var(--maincolor);
	padding:2em 2em;
	color:#fff;
	border-radius:1.5em;
	max-width:460px;
	text-align:center;
}

.s3-formbtn{
	font-weight:700;
	font-size:1.3em;
}

.form-terms{
	font-size:.8em;
}

.form-h{
	font-size:1.3em;
	font-weight: 700;
	margin-bottom:1em;
}

/*section4*/

.s4-icons{
	display:block;
	width:60%;
	aspect-ratio:1/1;
/*	object-fit: cover;
	background:var(--maincolor);
	border-radius:1.75em;*/
	padding:1em;
	margin-inline:auto;
}

.s4-icon-h{
	font-size:1.1em;
	font-weight:700;
	text-align:center;
	color:var(--maincolor);
	margin:0.5em 0 2em;
	text-transform: uppercase;
}


.s4-info{
	display:grid;
	grid-template-columns: minmax(0,4fr) minmax(0,3fr);
	gap:2em;
	align-items: center;
	margin-bottom:1.5em;
	color:var(--maincolor);
}

.info-img{
	display:block;
	width:100%;
	aspect-ratio:4/3;
	height:auto;
	object-fit: cover;
	padding:1em;
}

.info-h{
	font-size:2.5em;
	font-weight:900;
	color:var(--maincolor);
	margin-bottom:.5em;
}

.info-btn{
	text-decoration: none;
	display:block;
	font-size:1.2em;
	padding:1em;
	text-align: center;
	transition:.3s background;
	margin:1em 0;
	font-weight:700;
	border-radius:.5em;
}

.footer{
	font-size:25px;
	padding:3em 1em;
	background:var(--subcolor);
	color:#fff;
	text-align:center;
	font-weight:300;
}

.copyr{
	background:var(--subcolor);
	color:#fff;
	text-align:center;
	padding:1.5em 1em;
	font-weight:300;
}

.footercc{
	margin:1em auto;
}

.s3-img{
	display:block;
	width:100%;
	height:auto;
}

@media(max-width: 1200px){
	body{
		font-size: 14px;
	}

	.banner-h{
		font-size:2.5em;
	}
}

@media(max-width:1023px){

	body{
		font-size:12px;
	}

	.banner-h{
		font-size:2em;
	}

}

@media(max-width:767px){

	.s1{
		padding-inline:10vw;
	}

	.banner-grid{
		grid-template-columns: 1fr;
	}

	body{
		padding-top:40px;
	}

	.nav-mobile{
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding-inline:2em;
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:40px;
		background:var(--maincolor);
		z-index:51;
	}

	.nav-toggle{
		font-size:2em;
		color:#fff;
	}

	.top-nav{
		position: fixed;
		width:240px;
		height:100vh;
		background:var(--subcolor);
		top:0;
		right:0;
		z-index:50;
		display:block;
		padding:2em;
		transform:translateX(100%);
		transition:.3s transform;

		padding-top:50px;
	}

	.top-nav.active{
		transform:translateX(0%);
	}

	.top-nav .nav-logo{
		display:none;
	}

	.nav-list{
		display:block;
		color:#fff;
	}

	.nav-list a{
		display:block;
		padding:1em 0;
		color:inherit !important;
	}

	.grid-row:not(.s4-row){
		grid-template-columns: 1fr !important;
		gap:1em;
	}

	.s2-panel{
		display:grid;
		grid-template-columns: minmax(0,2fr) minmax(0,4fr);
		align-items: center;
	}

	.s4-row{
		font-size:1.5vw;
		margin-bottom:3em;
	}

	.form-panel{
		margin-inline: auto;
	}

}

@media(max-width:600px){

	.cw{
		max-width:360px;
	}


	.s2,.s3,.s4{
		padding-inline:1em;
	}

	.s2-panel{
		grid-template-columns: 1fr;
	}

	.s2-img{
		max-width:200px;
		margin-inline:auto;
	}

	.s4-info{
		display:flex;
		flex-direction: column-reverse;
		text-align:center;
		padding-inline:8vw;
	}

	.info-img{
		max-width:200px;
	}
}