@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");


body,html{
	font-family: var(--mainfont);
	font-size:16px;
}

h1,h2,h3,h4,h5,h6,p{
	margin:0;
}

:root{

	--color1:#181e40;
	--color2:rgb(179, 196, 255);
	--color3:#f48243;

	--mainfont: 'Source Sans 3', sans-serif;
	--subfont: 'Montserrat', sans-serif;

}

*{
	box-sizing:border-box;
}

.section{
	padding:4em 2em;
}

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

.animated-section{
	background:var(--color1);
	min-height:100vh;
	position: relative;
	isolation:isolate;
	overflow:clip;
}

.animated-section::before{
	content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../img/circle-fog.svg"), url("../img/circle-fog.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: left -1000px top -1000px, right -450px bottom -200px;
    background-size: 1687px 1687px, 1221px 1221px;
    z-index: -1;
}

.animated-section.active::before{
	display:none;
}

.no-interact {
    pointer-events: none !important;     /* Prevent clicking or any interaction */
    user-select: none !important;        /* Prevent text selection (for consistency) */
}

.video-bg{
	position: absolute;
	left:-2%;
	top:0;
	width:102%;
	height:100%;
	object-fit: cover;
	transform:scale(1.6) translateX(20%) translateY(18%);
	object-position: center;
	transition:.3s transform linear;
	transition-delay:.3s;
	z-index:-2;
}

.animated-section.active .video-bg{
	transform:scale(1) translateX(0%) translateY(0%);
}

.hero-heading{

	font-size:2.75em;
	 margin-block:0;
    font-family: var(--subfont);
	margin-bottom:1em;
	font-weight:700;
}

h1.hero-heading{
	background: linear-gradient(90deg, rgb(172, 104, 255) -0.01%, rgb(1, 255, 240)) text;
    -webkit-text-fill-color: transparent;
   
}

.main-row{
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap:2em;
	margin-bottom:2em;
}

.main-col{
	padding-top:2em;
}

.hero-img-wrapper{
	position: relative;
}

.hero-img-wrapper::before{
	content:"";
	position: absolute;
	inset:-60%;
	background:url('../img/img-bg.svg');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index:-1;
	transform:translateY(5%);
}

.hero-img{
	display:block;
	width:100%;
	height:auto;
	padding:2em 12.5%;
}

.main-col p,
.main-col h2{
	color:var(--color2);
	margin-bottom:1em;
}

.main-col p:last-of-type:not(:has(+ p)) {
    margin-bottom: 2.25em;
}

.p-heading{
	font-size:1em;
	font-family: var(--subfont);

}

.trust-imgs{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
	margin-block:1em;
}

.hero-lower{
	color:#fff;
}

.s-heading{
	font-size:2.25em;
	font-family: var(--subfont);
	font-weight:700;
	margin-bottom:1.25em;
}

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

.steps-info > div{
	display:grid;
	grid-template-columns: 4em minmax(0,1fr);
	gap:1em;
}

.steps-info > div img{
	display:block;
	max-width:100%;
	aspect-ratio:1/1;
	height:auto;
}

.steps-info .p-heading{
	font-weight:600;
	font-size:1.125em;
}

.steps-info p{
	color:var(--color2);
	margin-top:1em;
}

.cta-btn{
	--bg:var(--color3);
	color:#fff;
	background:var(--bg);
	border:none;
	padding:1em 1.5em;
	font-size:1.125em;
	font-weight:600;
	font-family: var(--subfont);
	text-transform: uppercase;
	border-radius:.5em;
	transition:.3s;
	cursor:pointer;
}

.cta-btn:hover{
	box-shadow: 0 0 1.25em var(--bg);
}

.hero-cta{
	display:block;

}

/*section2*/

.s2{
	position: relative;
	background:#f4f7fe;
	overflow-x:clip;
}

.round-upper{
	position: absolute;
	top:0;
	left:0;
	width:100%;
}

.round-upper::before{
	content:'';
	background:url('../img/round1.svg');
	position: absolute;
	inset:0;
	height:2em;
	transform:translateY(-100%);
	background-size:contain;
	background-repeat:repeat-x;
	background-position: bottom center;
}

.round-lower{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
}

.round-lower::before{
	content:'';
	background:url('../img/round2.svg');
	position: absolute;
	inset:0;
	height:3.25rem;
	transform:translateY(0%);
	background-size:cover;
	background-position: center;
}

.how-info{
	text-align:center;
}

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

.how-info .s-heading{
	margin-top:1em;
}

.how-info p{
	color:rgb(100, 120, 151);
	font-weight:700;
}

.how-info .cta-btn{
	margin-top:2rem;
}

.mySwiper {
    width: 100%;
    overflow: visible !important;   /* allow slides to overflow both directions */
}

.swiper-wrapper {
    padding-bottom: 4em;
/*    gap:1.5em;*/
}

.swiper-slide {
    width: 22em !important;
    height:auto;
    aspect-ratio:378/327;
    flex-shrink: 0;           /* prevent resizing */
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-align:left;
}

.review-card{

    padding:calc(1.5% + 1em);
    
    height:100%;
    position: relative;
    isolation:isolate;
    pointer-events: none;     /* Prevent clicking or any interaction */
    user-select: none;        /* Prevent text selection (for consistency) */
}

.review-card::before{
	content:'';
	position: absolute;
	inset:1px;
	box-shadow:0 .25em 1em color-mix(in srgb,var(--color2), transparent 50%);
    border-radius: 1em;
    background: #fff;
    z-index:0;
}

.review-card > *{
	position: relative;
	z-index:1;
}

.swiper-slide-active .review-card::after{
	opacity:1;
}

.review-card::after{
	content:'';
	position: absolute;
	inset:0;
	z-index:-1;
    border-radius: calc(1em + 1px);
    background: linear-gradient(90deg, #ac68ff 0%, #01fff0 100%);

	opacity:0;
	transition:.3s;
}
.swiper-slide p{
	font-weight:400;
	line-height:1.5em;
}

.review-user{
	font-family: var(--subfont);
	font-size:1.25em;
	font-weight: 700;
    letter-spacing: -.02em;
/*    color: #8e97fd;*/
    background-image: linear-gradient(90deg, #ac68ff 0, #01fff0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    max-width:max-content;
    margin-bottom:1em;
}

/* Scrollbar track */
.swiper-scrollbar {
    background: none !important; /* light gray track */
    height:6px !important;
    position: relative;
}

.swiper-scrollbar::before{
	content:'';
	position: absolute;
	top:2px;
	left:0;
	height:2px;
	width:100%;
	background:#e0e0e0;
	border-radius:2px;
}

/* Draggable scroller thumb */
.swiper-scrollbar-drag {
    background-image: linear-gradient(90deg, #ac68ff 0, #01fff0) !important;
    border-radius: 4px;
    /* Center it vertically on the track */
    cursor:grab;
}

.review-rating{
	margin-bottom:1em;
	letter-spacing: .25em;
}

.review-rating .bi{
	color:var(--color3);
}

/*import accordion*/

.collapsible-panel{
	background:#fff;

    box-shadow:0 .25em 1em color-mix(in srgb,var(--color2), transparent 50%);
    border-radius:.5em;
    margin-bottom:2em;
    text-align: left;
}

.collapsible-panel p{
	font-weight:400;
	line-height:1.5em;
}

.collapse-upper{
	padding:1.25em;
	display:block;
	color:currentColor;
	font-weight:700;
	text-decoration: none;
	position: relative;
	color:rgb(100, 120, 151);
	padding-right:3em;
}

.collapse-upper:hover{
	color:#000;
}

.collapse-upper::after{
	width:.5em;
	height:.5em;
	aspect-ratio: 1/1;
	border:3px solid #000;
	content:'';
	position: absolute;
	top:1.5em;
	right:1em;
	border-top-color: transparent;
	border-left-color: transparent;
	transform:translateY(-0%) rotate(-45deg);
	transition:.2s;
}

.active .collapse-upper::after{
	top:1em;
	transform:translateY(-0%) rotate(45deg);
}

.collapse-inner{
	display:grid;
	grid-template-rows: 0fr;
	padding-inline:1.25em;
	transition:.5s;
	padding-right:1em;
	opacity:0;
}

.collapse-inner > div{
	overflow:hidden;
}

.collapsible-panel.active > .collapse-upper{
	background-image: linear-gradient(90deg, #ac68ff 0, #01fff0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
}

.active > .collapse-inner{
	grid-template-rows: 1fr;
	padding-block:0 1.25em;
	opacity:1;
}

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

.country-selector{
	height:3.5rem;
	width:100%;
	font-size:1.5em;
	border-radius:.5em;
	border:none;
	outline:none;
}

.iti__selected-country-primary{
	padding-left:1em !important;
}

.iti__flag{
	transform:scale(1.2);
}

.iti__selected-dial-code{
	font-size:1.5em !important;
}

.input-group-grid{
	display:grid;
	gap:1em;
	color:#000;
}

.prefooter-cta{
   background: radial-gradient(97.77% 138.17% at 0% 0%, #a86bff16, #828cfc00 70.98%), radial-gradient(100% 99.93% at 100% 0%, #134685, #13468500), #181f40;
   padding-top:10em;
}

/*fancy panel*/

.fancy-panel {
    position: relative;
    padding: 2.75em;
    border-radius: 12px;
    background: transparent;
    color:#fff;
    display:grid;
    grid-template-columns: minmax(0,7fr) minmax(0,4fr);
    gap:5%;
}

.fancy-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: .175em; /* border thickness */
    border-radius: inherit;
    background-image: linear-gradient(90deg, #ac68ff 0, #01fff0);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.fancy-panel .hero-heading{
	display:inline-block;
	font-size:1em;
	margin-block:0;
}

.fancy-heading{
	font-weight:700;
	font-family: var(--subfont);
	font-size:2em;
	color:#fff;
	letter-spacing: -.025em;
}

.fancy-panel .p-heading{
	font-family: var(--mainfont);
	font-weight:700;
	margin-block:1rem;
}

.steps-heading{
	font-weight:600;
	font-size:1.125em;
	font-family: var(--subfont);
	margin-bottom:.25em;
	letter-spacing: -.025em;
}

.fancy-steps-info{
	display:grid;
	gap:1em;
	counter-reset: step;
	margin-block:2rem;
	position: relative;
}

.fancy-steps-info::before{
	content:'';

	position:absolute;
	height:100%;
	width:1px;
	left:1px;
	top:0;
	background:#647897;
}

.fancy-steps-info > div{
	display:grid;
	grid-template-columns: 5em minmax(0,1fr);
	position: relative;
}

.fancy-steps-info > div.active::before{
	font-size:1.5rem;
}

.fancy-steps-info > div.active::after{
	content:'';
	position: absolute;
	height:100%;
	width:3px;
	left:0;
	top:0;
	background:#16f6ef;
}

.fancy-steps-info > div::before{
	counter-increment: step;
	content: '0'counter(step);
	aspect-ratio:4/3;
	display:flex;
	align-items: center;
	justify-content: center;
	font-family: var(--subfont);
	font-weight:600;
	background: linear-gradient(90deg, rgb(172, 104, 255) -0.01%, rgb(1, 255, 240)) text;
    -webkit-text-fill-color: transparent;
}

.fancy-steps-info p{
	letter-spacing: -.025em;
	font-size:.9em;
	line-height:1.5em;
}

.fancy-sub{
	font-family: var(--subfont);
	font-size:1.5em;
	color:var(--color2);
	font-weight:700;
}

/*processing display*/

.process-display{
    background: #181f40cc;
    border-radius: 2em;
    box-shadow: 0 0 0 3em #181f404d;
	padding:1.75em;
	width:100%;
	max-width:420px;
	min-height:60vh;
	margin-inline:auto;
	color:#fff;
	text-align: center;
	font-weight:600;
}

.process-icon-display img{
	margin-bottom:1rem;
}

.process-icon-display > div:not(.active){
	display:none;
}


.ascii-loader-dots {
  display: inline-block;
  width: 3ch;  /* fixed width for up to 3 dots */
  text-align: left;
}

/* Bounce keyframes */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.user-num{
	font-size:2.25em;
	font-family: var(--subfont);
	font-weight:700;
	padding-block:1em;
}

.num-info-row{
	display:flex;
	justify-content: space-between;
	gap:1em;
	margin-bottom:.75em;
	font-weight:600;
	font-size:1.125em;
	display:none;
}

.num-info-row > div:last-child{
	text-align: right;
	background: linear-gradient(90deg, rgb(172, 104, 255) -0.01%, rgb(1, 255, 240)) text;
    -webkit-text-fill-color: transparent;
}

.hero-steps > div:not(.active){
	display:none;
}

.blurred{
	filter:blur(4px);
}

/*footer*/

footer{
	background:#0d1226;
	color:var(--color2);
}

footer p{
	font-size:.9em;
	line-height:1.5em;
	margin-bottom:1em;
	font-weight:300;
}

footer p b{
	font-size:1.125em;
}

.footer-links{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:1.5em;
	padding-block:1.5em;
}

.footer-links a{
	color:inherit;
	text-decoration: none;

}

.footer-links a:hover{
	text-decoration: underline;
	color:#fff;
}

.footer-ccs{
	display:block;
	width:100%;
	max-width:15em;
	margin-inline:auto;
	margin-block:1.5em;
}

/*post user num*/

.post-user-num{
	background:url('../img/bg2.png');
	background-size:cover;
	background-position: center;
	text-align:center;
	color:#fff;
	min-height:100vh;
	display:none;
}

.post-user-num .hero-heading{
    background: linear-gradient(0deg, rgb(3, 184, 184) -0.01%, rgb(144, 209, 5) 88.85%) text;
    -webkit-text-fill-color: transparent;
}

.gradient-green-text{
	background: linear-gradient(0deg, rgb(3, 184, 184) -0.01%, rgb(144, 209, 5) 88.85%) text;
    -webkit-text-fill-color: transparent;
}

.post-user-num .user-num{
	font-size:1.5em;
}

.search-info{
	color:var(--color2);
}

.post-user-row{
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap:5%;
	padding:2em calc(10% + 1em);
}

.post-user-row > div{
	--bgt: color-mix(in srgb, var(--color1), #000 25%);
	background:color-mix(in srgb, var(--bgt), transparent 25%);
	padding:2.5em 1.75em;
	border-radius:1em;

}

ul{
	text-align: left;
	line-height:1.5em;
	padding-left:1.125em;
}

ul li{
	margin-bottom:.25em;
}

.panel-heading{
	font-weight:700;
	font-family: var(--subfont);
	line-height:1.5em;
}

.dashed-divider{
	border-top:3px dashed var(--color2);
	margin-block:1.5em;
	opacity:.25;
}

.trial-info{
	color:var(--color2);
}

.panel-heading .gradient-green-text{
	font-size:1.25em;
}

.form-input{
	padding:.875em 1em;
	display:block;
	width:100%;
	border-radius:.5em;
	border:1px solid #ccc;
	margin-bottom:1em;
}

.form-label{
	text-align: left;
	font-size:.9em;
	margin-bottom:.25em;
	color:var(--color2);
}


.info-row{
	display:flex;
	justify-content: space-between;
	text-align: left;
	font-family: var(--subfont);
	font-weight:700;
	color:var(--color2);
}

.info-row > div:last-child{
	text-align: right;
}

.before-val{
	font-size:.8em;
	text-decoration: line-through;
}

.dashed-heading{
	position: relative;
	padding-block:.25em;
	margin-block:1.25rem;
	font-family: var(--subfont);
	text-transform: uppercase;
	color:var(--color2);
	font-weight:600;
	font-size:.75em;
	letter-spacing: -.025em;
	overflow:clip;
}

.dashed-heading span::before{
	content:'';
	width:100%;
	position: absolute;
	top:50%;
	transform:translateY(-50%) translateX(calc(-100% - 1em));
	border-top:3px dashed var(--color2);
	opacity:.25;
}

.dashed-heading span::after{
	content:'';
	width:100%;
	top:50%;
	position: absolute;
	transform:translateX(1em) translateY(-50%);
	border-top:3px dashed var(--color2);
	opacity:.25;
}

.terms{
	color:var(--color2);
	grid-column: span 2;
	margin-block:2em;
}

.terms a{
	color:inherit;
}

.terms a:hover{
	color:#fff;
}

.signup-cta{
	background:linear-gradient(0deg, rgb(3, 184, 184) -0.01%, rgb(144, 209, 5) 88.85%);
	max-width:100%;
	width:100%;
}

.signup-cta:hover{
    box-shadow:0 0 1.5em rgb(3, 184, 184);
}

.input-group-grid.error input{
	box-shadow: 0 0 1px 1px red,
	0 0 1em color-mix(in srgb, red, transparent 50%);
}

.input-group-grid.error .phone-error{
	color:red;
	display:block;
}

.phone-error{
	display:none;
}

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

@media(max-width:900px){
	.main-row,
	.steps-info,
	.accordion-set,
	.fancy-panel{
		grid-template-columns: 1fr;
	}

	.post-user-row{
		padding-inline:1.5em;
	}

	.accordion-set{
		gap:0;
	}

	.trust-imgs{
		justify-content: center;
	}

	.main-row{
		text-align: center;
	}

	.hero-img-wrapper{
		max-width:480px;
		margin-inline:auto;
	}

	.user-num{
		font-size:2em;
	}

}

@media(max-width:767px){
	.post-user-row{
		grid-template-columns: 1fr;
		gap:1em;
		padding-inline:0;
	}

	.post-user-form{
		grid-row:1;
	}

	.terms{
		grid-row:2;
		grid-column: span 1;
		margin-block:0 2em;
	}
}