@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&family=Outfit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,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: var(--mainfont);
	font-size:16px;
	overflow-x:hidden;
}

:root{

	--c1-h: 208;
	--c1-s: 77%;
	--c1-l: 40%;

	--c1: hsl(var(--c1-h),
	 var(--c1-s), 
	var(--c1-l));

	/* light color version*/
	--c1-lighten: hsl(
	    var(--c1-h),
	    var(--c1-s),
	    calc(var(--c1-l) * 1.33)
	);

	/* dark color version*/
	--c1-darken: hsl(
	    var(--c1-h),
	    var(--c1-s),
	    calc(var(--c1-l) * .66)
	);

	--c1-darker: hsl(
	    var(--c1-h),
	    var(--c1-s),
	    calc(var(--c1-l) * .2)
	);

	--c1-desate: hsl(
	    var(--c1-h),
	    calc(var(--c1-s) - 20%),
	    calc(var(--c1-l) + 25%)
	);

	--mainfont: 'Roboto', sans-serif;
	--subfont: 'Outfit', sans-serif;
	--serif: 'Playfair Display', serif;

}

*{
	box-sizing:border-box;
}

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

.btn-s{
	display:block;
	width:100%;
	text-align:center;
	text-decoration: none;
	max-width:max-content;
	padding:.25em 1em;
	background:var(--rgb);
	transition:.3s;
}

.btn-s.c1{
	background:var(--c1);
	color:#fff;
}

.btn-s.c1-lighten:hover{
	background:var(--c1-lighten);
}

.btn-s.c1-darken:hover{
	background:var(--c1-darken);
}

.btn-s.c1-desate:hover{
	background:var(--c1-desate);
}

.btn-s.center{
	margin-inline:auto;
}

.btn-s.btn-blk{
	background:#000;
	color:#fff;
}

.btn-s.btn-blk:hover{
	background:#fff;
	color:#000;
}

.btn-s.btn-wht{
	background:#fff;
	color:var(--c1);
}

.btn-s.btn-wht:hover{
	background:#ddd;
}

.btn-wt{
	color: #fff;
}

.section{
	padding:4em;
	padding-inline:2em;
}

.slight-shadow{
	box-shadow:0 0 1em -.5em rgba(0,0,0,.1);
}

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

/*topbar*/

.topbar{
	display:flex;
	flex-wrap:wrap;
	padding-inline:2em;
}


.topbar > div:first-child{
	margin:0 auto 0 0;
}

.topbar > div:last-child{
	margin:0 0 0 auto;
}

/*outer*/

.outer{
	padding:2em 5%;
}

.flex-row{
	display:flex;
	margin:0 -1.5em;
}

.flex-row > div{
	padding:0 1.5em;
}

/*section1*/

.survey-panel{
	
	color:#fff;
	border-radius:1em;
	display:grid;
	grid-template-columns: minmax(0,2fr) minmax(0,3fr);
	overflow: hidden;
}

.survey-inner{
	background: linear-gradient(180deg, #11497A 0%, #000000 100%);
	padding:2em;
	aspect-ratio:3/4;
	display:flex;
	flex-direction: column;
}

.survey-side{
	background-color:#ccc;
	background:url('../img/sbg.jpg');
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	display:block;
}

.survey-inner .s-t{
	color:inherit;
}

.q-astrip{
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(0,1fr));
	font-family:var(--subfont);
	gap:1.5em;
	margin:auto 0 0 0;
}

.q-astrip .btn-s{
	max-width:100%;
	text-transform: uppercase;
	font-weight:600;
	font-size:1.2em;
	letter-spacing: .1em;
	padding:.7em 0;
	border-radius:.3em;
}

.q-info{
	position:fixed;
	top:0;
	transform:translateY(-100%);
	transition:.5s opacity;
	opacity:0;
}

.q-info.active{
	position: relative;
	top:initial;
	transform:translateY(0%);
	opacity:1;
}

.q-progress{
	display:flex;
	justify-content: space-between;
	position: relative;
	isolation:isolate;
	overflow:hidden;
	margin-bottom:1em;
}

.q-progress:before,
.q-progress:after{
	content:'';
	position: absolute;
	height:2px;
	width:100%;
	background:#0087ff;
	top:50%;
	transform:translateY(-50%);
}

.q-progress:after{
	background:#9ca3af;
	left:var(--progress);
	z-index:0;
	transition:.3s left;
}

.q-progress > div{
	width:1.7rem;
	aspect-ratio:1/1;
	background:#9ca3af;
	border-radius:99em;
	position: relative;
	z-index:1;
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:1.2em;
	transition:.5s background, .5s box-shadow;
}

.q-progress > div.done{
	background:#0087ff;
}

.q-progress > div.active,
.q-progress > div.done{
	box-shadow:0 0 0 .35rem #0087ff inset;
}

.q-progress > div.done:before{
	content:'🗸';
	position: relative;
	top:.1em;
}

.info-h{
	font-size:1.3em;
	text-align:center;
	font-family:var(--subfont);
	text-transform: uppercase;
	font-weight:700;
	margin-bottom:.7em;
}

.q-list > div:not(:first-child){
	display:none;
}

.q-list .s-sh{
	font-size:.8em;
	margin-bottom:2em;
	color:inherit;
	text-transform: initial;
}

.form-textbox{

	margin:.7em auto;
}

.form-textbox input[type="text"]{
	width:100%;
	border-radius:.3em;
	border:none;
	height:2.5em;
	padding-inline:.7em;
	outline:none;
	margin-top:.2em;
}

.input-label{
	font-family:var(--subfont);
	font-size:1.1em;
	margin-bottom:.5em;
	text-transform: uppercase;
}

.form-radiobtn{
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(0,1fr));
	gap:2em;
}

.form-radiobtn input{
	display:none;
}

.form-radiobtn > label{
	position: relative;
	isolation:isolate;
	height:2.5em;
	color:#000;
	font-weight:300;
	cursor:pointer;
}

.form-radiobtn > label > span{
	background:#fff;
	position: absolute;
	inset:0;
	display:flex;
	align-items: center;
	justify-content: center;
	text-align:center;
	transition:.3s box-shadow;
	text-transform: uppercase;
	font-family:var(--subfont);
	border-radius:.3em;
}

.form-radiobtn.c1 > label > input:checked + span{

	box-shadow:0 0 0 .2em var(--c1) inset;
}

/*section2*/

.s2-row{
	align-items: center;
	margin-bottom:3em;
}

.s2-row:nth-child(even){
	flex-direction: row-reverse;
}

.s2-row > div:first-child{
	width:38%;
}

.s2-row > div:last-child{
	width:62%;
}


.p{
	line-height:1.5em;
}

.s-t,
.s-sh{
	font-family:var(--subfont);
	font-weight:700;
	font-size:2.7em;
	color:var(--c1);
	padding-bottom:.3em;
}

.s-sh{
	font-size:1.2em;
	font-weight:500;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.s2-info > div{
	margin-bottom:1rem;
}

.s2-img img{
	display:block;
	aspect-ratio: 1/1;
	width:100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
}

.img-blend{
	position: relative;
	isolation:isolate;
	overflow: hidden;
	border-radius:.3em;
}

.img-blend:before{
	content:'';
	inset:0;
	position: absolute;
	background:var(--c1);
	z-index:-1;
}

.check-ul{
	margin-top:0;
	padding-left:0em;
	list-style-type: none;
	padding:1em 0 0;
	font-weight:700;
}

.check-ul > li{
	display:flex;
	margin-bottom:.7em;
	min-height:2em;
	position: relative;
}

.check-ul > li:before,
.check-ul > li:after{
	content:'';
	min-width:1.5em;
	aspect-ratio:1/1;
	margin-right:1rem;
	background:var(--c1);
	border-radius:100%;
	position: relative;
	transform:translateY(-25%);
	font-size:1.5em;
}

.check-ul > li:after{
	position: absolute;
	left:0;
	top:.1em;
	content:'🗸';
	background:none;
	color:#fff;
	display:flex;
	align-items: center;
	justify-content: center;

}

/*section3*/

.s3{
	text-align:center;
}

.s3-grid{
	margin:2em auto;
	gap:2em;
	counter-reset: card;
}

.s3-card{
	padding:2.2em 1.5em;
	color:var(--c1-darken);
	position: relative;
	isolation:isolate;
}

.s3-card:before{
	content:'';
	position: absolute;
	inset:30% 0 0 0;
	background:#f3f3f3;;
	z-index:-1;
}

.s3-card .s-sh{
	color:inherit;
	margin-bottom:1em;
}

.card-circle{
	width:80%;
	aspect-ratio:1/1;
	display:block;
	background:var(--c1);
	border-radius:100%;
	margin-inline:auto;
	margin-bottom:1.5em;
	position: relative;
}

.card-circle:after{
	counter-increment: card;
	content:counter(card);
	position: absolute;
	right:1rem;
	bottom:.2rem;
	width:3rem;
	aspect-ratio: 1/1;
	background:var(--c1-darken);
	border-radius:100%;
	color:#fff;
	line-height:3rem;
	font-size:1.5em;
	font-family:var(--subfont);
	font-weight:700;
}

.card-circle img{
	position: absolute;
	width:80%;
	aspect-ratio:1/1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	object-fit: contain;
}

/*section4*/

.s4{
	
	text-align:center;
}

.s4-panel{

	border-radius:1em;
	background: linear-gradient(275.89deg, #000000 -13.99%, #186BB5 98.33%);
	color:#fff;
	padding:4em 2em;
}

.s4 .s-t,
.s4 .s-sh{
	color:inherit;
}

.s4 .s-t{
	text-transform: capitalize;
	margin-bottom:.7em;
}

.s4 .s-sh{
	opacity:.7;
}

.s4-cta{
	font-weight:500;
	text-transform: uppercase;
	padding:1.2em 2.5em;
	letter-spacing: .15em;
	border-radius:99em;
	font-family:var(--subfont);
}

/*footer*/

.footer{
	background:var(--c1-darker);
	color:#fff;
	font-weight:300;
}

.footer .p a{
	color:inherit !important;
}

.footer-row{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	gap:2em;
}

.footer-row > div:last-child{
	margin:0 0 0 auto;
}

.footer-row > div:first-child{
	margin:0 auto 0 0;
}

.footer-cta{
	font-size:1.2em;
	text-transform: uppercase;
	font-weight:500;
	letter-spacing: .15em;
	font-family:var(--subfont);
	padding:.7em 1.5em;
	border-radius:99em;
}

.s-logo{
	display:block;
	width:100%;
	max-width:5em;
	height:auto;
}

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

@media(max-width:1024px){
	.s-t{
		font-size:2.2em;
	}

	.survey-panel{
		grid-template-columns: minmax(0,3fr) minmax(0,4fr);
	}

	.outer{
		padding-inline:2.5%;
	}
}

@media(max-width:900px){
	.survey-panel{
		grid-template-columns: 1fr;
	}

	.survey-inner{
		aspect-ratio: initial;
	}

	.q-astrip{
		margin-top:3em;
	}

	.survey-side{
		aspect-ratio:21/9;
	}
}

@media(max-width:768px){
	.outer{
		padding-inline:0em;
	}
}

@media(max-width:767px){

	.section{
		padding:1.5em 1.5em;
	}

	.s3-grid{
		grid-template-columns: 1fr;
		max-width:320px;
	}

	.s2-row{
		flex-direction: column !important;
	}

	.s2-row > div{
		width:100% !important;
	}

	.s2-img img{
		aspect-ratio:21/9;
	}

	.s2-img{

		margin-bottom:2em;
	}
}

@media(max-width:480px){

	body{
		font-size:12px;
	}

	.form-radiobtn{
		grid-template-columns: 1fr;
		gap:.5em;
	}
}