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

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

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

:root{
	--color1:197;
	--satur1:90%;
	--light1:51%;
	--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:0;
	--satur2:100%;
	--light2:50%;
	--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:#e3e3e3;
}

.blue{
		background: none;
        --trim: var(--maincolor);
        border: 2px solid var(--maincolor) !important;
        color: #000;
        transition: .3s;
		
		}

*{
	box-sizing:border-box;
}

.cw{
	width:100%;
	max-width:1200px;
	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:none;
	--trim:var(--maincolor);
	border:2px solid var(--maincolor);
	color:var(--maincolor);
	transition:.3s;
}

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

.btn-wt{
	color: #fff;
}

/*topbar*/

.topbar{
	border-bottom: 1px solid var(--trim);
	padding: 1em 2em;
	font-weight: 500;
	letter-spacing: -.025em;
	font-size:.9em;
}

.tb-flex{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center;
}

.tb-logo{
	display: block;
	max-width: 140px;
	height: auto;
	aspect-ratio:16/5;
	object-fit: contain;
}

.topbar .bi{
	position: relative;
	isolation: isolate;
}

.topbar .bi:after{
	content: '';
	inset: .2em;
	position: absolute;
	background: var(--maincolor);
	border-radius: 99em;
	z-index: -1;
}

/*section1*/

.s1{
	padding: 2em 1em;
	text-align: center;
	background-size:cover;
	background-position: center;
}

.s1-h{
	font-weight: 800;
	font-size: 2.5em;
	margin-bottom: .5em;
	letter-spacing: -.025em;
}

.s1-sh{
	font-weight: 600;
	font-size: 1.2em;
}

.s1-input{
	position: relative;
	max-width: 340px;
	margin-inline: auto;
	font-size: 1.2em;
}

.s1-input input{
	width: 100%;
	height: 3em;
	outline: none;
	padding-left: 2em;
	border: 1px solid #aaa;
	border-radius: .15em;
	transition: .3s;
}

.s1-input .placeholder{
	position: absolute;
	left: 1.5em;
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
	font-weight: 300;
	transition: .3s;
	padding: 0 .5em;
	pointer-events: none;
}

.s1-input input:focus + .placeholder,
.s1-input input:valid + .placeholder{
	top: 0%;
	left: 1em;
	font-size: .7em;
	background: #fff;
}

.s1-input input:focus{
	border-color: #16ca92;
}

.s1-input .bi{
	position: absolute;
	left: .75em;
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
}

.s1-btn{
	display: block;
	max-width: 340px;
	margin-inline: auto;
	padding: .9em .5em;
	color: #fff;
	font-size: 1.2em;
	font-weight: 600;
	transition: .3s;
	text-transform: capitalize;
	text-decoration: none;
	border-radius: 99em;
}

.s1-list{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	font-weight: 300;
	letter-spacing: -.05em;
	font-size: .9em;
	flex-wrap: wrap;
}

.s1-list .bi{
	color: var(--maincolor);
	font-size: 1.5em;
	margin-right: .2em;
	vertical-align: middle;
}

/*section2*/

.s2{
	background: #f3f7fc;
	padding: 2em 2em;
}

.s2:has(.s2-grid.alternate){
	padding:3em 2em;
}

.s2 .cw{
	max-width: 1000px;
}

.s2-grid{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	align-items: flex-end;
	gap: 1em;
}

.s2-grid.alternate{
	grid-template-columns: repeat(3, minmax(0,1fr));
	text-align:center;
	align-items: flex-start;
}

.s2-h{
	font-weight: 500;
	font-size: 2em;
	letter-spacing: -.025em;
	margin-bottom: .5em;
}

.s2-sh{
    line-height: 1.5em;
    font-size: 1.5em;
    color: #5B646E;
}

.s2-grid-logo{
	display: block;
	aspect-ratio: 122/38;
	width: 122px;
	object-fit: contain;
}

.trust-rating{
	vertical-align: middle;
}

.trust-logo{
	display: block;
	max-width: 100%;
	margin-bottom: 1em;
}

/*section3*/

.s3{
	padding: 3em 2em;
	text-align: center;
}

.s3-h{
	margin: 1em auto;
	font-size: 2em;
	font-weight: 500;
	letter-spacing: -.025em;
}

.p{
	line-height: 1.5em;
}

.p-small{
	font-size: 0.7em;
}

.ssl-logo{
	display: block;
	aspect-ratio: 1/1;
	width: 131px;
	max-width: 100%;
	margin-inline: auto;
}

/*section4*/

.s4{
	background: #ddffe3;
	padding: 2em 2em;
}

.s4-h{
	text-align: center;
	font-size: 2em;
	font-weight: 500;
	letter-spacing: -.025em;
	margin-bottom: 1em;
}

.s4-grid{
	display: grid;
	grid-template-columns: repeat(var(--s4-col), minmax(0, 1fr));
	gap: 1em;
	counter-reset: s4;
	text-align: center;
	position: relative;
	isolation: isolate;
}

.s4-grid > div{
	counter-increment: s4;
	padding-top: 4em;
	position: relative;
	isolation: isolate;
}

.s4-grid > div:not(:last-child):before{
	content: '';
	position: absolute;
	width: 100%;
	height: 2em;
	z-index: -1;
	top: .5em;
	border-radius: 100%;
}

.s4-grid > div:nth-child(odd):before{
	border-top: 3px dashed #000;
}

.s4-grid > div:nth-child(even):before{
	border-bottom: 3px dashed #000;
}

.s4-counter:before{
	content: counter(s4);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1.5em;
	aspect-ratio: 1/1;
	border-radius: 99em;
	border: 1px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 2em;
	font-weight: 800;
	background: #ddffe3;
}

.s4-grid .p{
	font-size: 1.1em;
	font-weight: 300;
}

/*section5*/

.s5{
	padding: 4em 2em;
	text-align: center;
}

.s5-h{
	font-size: 1.8em;
	font-weight: 800;
	letter-spacing: -.025em;
	margin-bottom: .75em;
}

.s5 .p{
	font-size: 1em;
	font-weight: 300;
	line-height: 1.8em;
}

.s-btn{
	font-size:1.2em;
	padding:.75em 2em;
	color:#fff;
	font-weight:700;
	display:inline-block;
	border-radius:99em;
	text-decoration: none;
}

.guard-check{
	display: block;
	aspect-ratio: 57/72;
	width: 57px;
	margin-inline: auto;
}

/*footer*/

.footer{
	background: var(--maincolor);
	padding: 5em 2em;
	color: #fff;
	font-weight: 300;
	font-size: .9em;
	text-align:center;
}

.footer .cw{
	max-width: 1100px;
}

.footer .p{
	line-height: 1.2em;
}

.footer-links{
	gap: 1.5em;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2em;
}

.footer a{
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.footer-grid{
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: 2em;
}

.footer-logo{
	display: block;
	margin-bottom: 1em;
	aspect-ratio:16/5;
	width:100%;
	max-width:15em;
	object-fit: contain;
	margin-inline:auto;
}

/*stickybottom*/

.sticky-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index:50;
	background: #fff;
	padding: 1em 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 1em;
	flex-wrap: wrap;
    box-shadow: 0px -3px 10px rgb(0 0 0 / 14%);
    text-align: center;
}

.sticky-btn{
	padding: 1em 2.5em;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.1em;
	border-radius: 99em;
}

.sticky-cta{
	font-weight: 500;
	font-size: 1.4em;
}

.sticky-offset{
	height: 6em;
}

/*questionare*/

.q-list{
	max-width:768px;
	margin-inline:auto;
}

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

.q-text{
	font-size:2em;
	font-weight:700;
	margin-bottom:1em;
	text-transform: capitalize;
}

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

.btn-grid > button{
	padding:.5em;
	font-size:1.5em;
	cursor:pointer;
	text-transform: uppercase;
}

.btn-grid > button > img{
	display:block;
	aspect-ratio:4/3;
	width:1.75em;
	object-fit: contain;
	margin-inline:auto;
	margin-bottom:.25em;
}

.btn-grid > button:has(img){
	font-size:1.25em;
}

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

	.s2 .cw{
		max-width: 880px;
	}
}

@media(max-width: 1023px){
	.s2-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.s2-grid:not(.alternate) > div:first-child{
		grid-column: span 2;
	}

	.s2-grid:not(.alternate) > div:not(:first-child){
		padding: 1em 0;
	}

	.s2-grid{
		text-align: center;
	}

	.s2-grid img{
		margin: .5em 0;
		margin-inline: auto;
	}

	.s2 .cw{
		max-width: 480px;
	}

	.trust-rating{
		display: block;
	}
}

@media(max-width: 767px){
	.footer-grid{
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-logo{
		margin-inline: auto;
	}

	.footer-links{
		align-items: center;
		justify-content: center;
	}
}

@media(max-width: 480px){
	.s4-grid{
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
	}

	.s4-grid > div:not(:last-child):before{
		height: calc(100% + 1.5em);
		width: 100%;
		border-top: none;
		border-bottom: none;
		top: 1.5em;
		left: 0;

	}

	.s4-grid > div:nth-child(odd):before{
		border-right: 3px dashed #000;
	}

	.s4-grid > div:nth-child(even):before{
		border-left: 3px dashed #000;
	}

	.tb-logo{
		max-width:7em;
	}

	.s2-grid.alternate{
		grid-template-columns: 1fr;
		gap:2em;
	}

	.btn-grid{
		--xcol:2 !important;
	}
}

.submitBtn{
border: none;
width: 300px;
font-size: 2em;
padding: .75em 2em;
}

[type="radio"] {
 display:none;
}

.form-wrapper input[type='date'], .form-wrapper button, .form-wrapper select {
    border: 1px solid var(--trim);
    outline: none;
    padding: 0 var(--paddinginline);
    transition: .3s;
}

.form-input input[type='date']:focus + .form-label {
    padding-top: .25em;
    font-size: .7em;
    padding-inline: calc(var(--paddinginline) + 1px);
    font-weight: 500;
   }
   
   .form-input input[type='date'], .form-input select {
    position: absolute;
    inset: 0;
    z-index: 0;
}