@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;
}

#date{

  background: none;
  display: block;
  padding: 15px 45px;
  outline: none;
  color: #aaa;
  text-align: center;
  transition: 250ms width ease, 250ms border-color ease;
}
/**************
   On Hover
***************/
#date:hover{
  width: 420px;
}
/**************
   On Focus
***************/
#date:focus{
  width: 420px;
}


*{
	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);
	color:var(--maincolor);
	transition:.3s;
}

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

.btn-wt{
	color: #fff;
}

/*topbar*/

.topbar{
	background:rgba(5,25,25,.2);
	padding:0.7em;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
	transition:.3s background;
	pointer-events:none;
}

.topbar.alt{
	background:hsla(var(--color1) ,var(--satur1), var(--light1),.5);
}


.tb-flex{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
	justify-content: space-between;
	align-items: center;
}

.tb-flex > div{
	pointer-events: initial !important;
}

.tb-logo{
	aspect-ratio:16/7;
	object-fit: contain;
	width:9em;
	display:block;
	margin-inline:auto;
}

.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 6em;
	text-align: center;
	background-size:cover;
	background-position: center;
	position:relative;
	isolation:isolate;
}

.s1:before{
	content:'';
	position:absolute;
	inset:0;
	background:#fff;
	opacity:.65;
	z-index:-1;
}

.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.75em;
	line-height: 1.5em;
}

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

/*section4*/

.s4{
	background: var(--subunsat);
	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: var(--subunsat);
}

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

/*section5*/

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

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

.s5 .p{
	font-size: 1.2em;
	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;
	max-width:8em;
	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;*/
	border-radius:99em;
	border:2px solid var(--maincolor);
	transition:.3s;
}

.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;
}

/*question section update*/

.q-section{
	padding:4em 2em;
	text-align:center;
	border:1px solid var(--trim);
	border-inline:none;
}

.progress-bar{
	width:100%;
	max-width:8em;
	aspect-ratio:1/1;
	margin-inline:auto;
	transform:translateY(-100%);
	background:#fff;
	border-radius:100%;
	margin-bottom:-6em;
	position: relative;
	text-transform: uppercase;
	text-align:center;
	letter-spacing: -.05em;
}

.progress-bar > div{
	position: absolute;
	inset:0;
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.progress-bar > div > div{
	font-size:2em;
}

.q-list .form-wrapper{
	max-width:420px;
	margin-inline:auto;
}

@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;
	}
}