:root {
  --Sizing-Padding: 40px;
  --Sizing-Distance-Big: 40px;
  --Corners-Big-Element: 40px;
  --Element-Color-Window: rgba(108, 107, 107, 0.3);
  --Shine: linear-gradient(157deg, rgba(255, 255, 255, 0.40) 2.12%, rgba(255, 255, 255, 0.00) 39%, rgba(255, 255, 255, 0.00) 54.33%, rgba(255, 255, 255, 0.10) 93.02%);
}

html,
body,
form,
.step {
	height: 100%;
	width: 100%;
	
	
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  min-height: 100vh;
  background: #222;
  position: relative;
  overflow-x: hidden;
  -webkit-transition: background-color .1s ease-out 1s;
	-moz-transition: background-color .1s ease-out 1s;
	-o-transition: background-color .1s ease-out 1s;
	transition: background-color .1s ease-out 1s;
}

.step {
	position: absolute;
	margin: 0 auto;
	text-align: center;
	-webkit-transition: transform 0.4s ease;
	-moz-transition: transform 0.4s ease;
	-o-transition: transform 0.4s ease;
	transition: transform 0.4s ease;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
}

/*** Step effects ***/
.step[data-effect="zoom"] {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

.step[data-effect="left"] {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
}

.step[data-effect="up"] {
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}

.step[data-effect="turn"] {
	-webkit-transform: rotate3d(0, 1, 0, 90deg);
	-moz-transform: rotate3d(0, 1, 0, 90deg);
	-ms-transform: rotate3d(0, 1, 0, 90deg);
	-o-transform: rotate3d(0, 1, 0, 90deg);
	transform: rotate3d(0, 1, 0, 90deg);
}

.step[data-step="1"] {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}

.background-video {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* .background-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: brightness(0.5);

} */

.background-img {
	position: absolute;
	left: 50%;
	filter: brightness(0.7);
    transform: translateX(-50%);
	/* z-index: -98; */
	height: 100%;
	width: 100%;
	max-width: 480px;
	object-fit:fill;
}

.step[data-step="1"] .background-img {
  object-fit: cover !important;

}

.step[data-step="5"] .background-img,
.step[data-step="6"] .background-img,
.step[data-step="7"] .background-img {
  object-fit: cover;
  object-position: 80% center; 
  width: 100vw;
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  flex-shrink: 0;
  padding: 20px;
  border-radius: var(--Corners-Big-Element, 22px);
  background: var(--Element-Color-Window, rgba(128, 128, 128, 0.30));
  border: 3px solid var(--Shine, rgba(255, 255, 255, 0.40));


  backdrop-filter: blur(50px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  /* margin-left: 4vw;
  margin-right: 4vw; */
  margin-bottom: 8vw;
  /* width: 100%; */
  max-width: 85%;
  
  z-index: 2;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .card {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
	margin-left: 0;
  margin-right: 0;
  margin-bottom: 2vw;
  width: 100%;
  max-width: 420px;
  }

} 

/* .card--promo {
	position: relative;
	overflow: visible;
  } */
  
  .promo-ribbon {
	width: 169px;
	height: 175px;
	position: absolute;
	top: -11px;
	right: -12px;
	display: flex;
	align-items: center;
	z-index: 10;
  }
  
  .ribbon-text {
	position: absolute;
	right: -7px;
	top: 57px;
	color: #fff;
	font-size: 18px;
	
font-style: normal;
font-weight: 600;
line-height: 22.741px; 
letter-spacing: -0.885px;
text-transform: uppercase;
	transform: rotate(46deg);
	pointer-events: none;
	white-space: nowrap;
  }
  
  .card-logo {
	margin-top: 6px;
	max-width: 220px;
	width: 40%;
	display: block;
	margin-left: auto;
	margin-right: auto;
  }

.card-header {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.card-header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #d0021b;
  border-radius: 12px;
  padding: 5px ;
  padding-right: 12px ;
  gap: 16px;
}
.card-icon {
  width: 40px;
  height: 40px;
  display: block;
}
.card-title {
	color: #FFF;

	text-align: center;
	font-family: Inter;
	font-size: 32px;
	font-style: normal;
	font-weight: 510;
	line-height: 30px; 
	letter-spacing: -0.21px;
}
.card-title--promo {
	font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: 40px; 
letter-spacing: -0.5px;
text-transform: uppercase;
}



.card-subtitle {
	color: #FFF;
	text-align: center;
	text-shadow: 0 0 0 rgba(0, 0, 0, 0.60);
	font-size: 16.353px;
font-style: normal;
font-weight: 300;
line-height: 20.895px; 
letter-spacing: -0.182px;
margin-top: 20px;
}


.card-text {
	color: #FFF;

	text-align: center;
	text-shadow: 0 0 0 rgba(0, 0, 0, 0.60);
	/* font-family: Poppins; */
	font-size: 26px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; 
	letter-spacing: -0.2px;
	text-transform: capitalize;
}
.card-text b {
	color: #FFF;
	/* font-family: Poppins; */
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: -0.2px;
	text-transform: capitalize;
}

@media (max-width: 376px) {
	.card-title--promo {
		font-size: 28px;
		font-style: normal;
		font-weight: 510;
	}
	.card-subtitle{
		font-size: 15px;
		line-height: 16px;
	}
	.card-text{
		font-size: 24px;
	}
	.card-text b{
		font-size: 24px;
	}
  } 

.main-btn {
  width: 100%;
  padding: 14px 0;
  color: #fff;
  border: none;
  
border-radius: 8px;
margin-top: 16px;
background: #E82462;
text-align: center;
font-family: Inter;
font-size: 18px;
font-weight: 500;
line-height: 22px; 
letter-spacing: -0.5px;
text-transform: uppercase;
cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,51,102,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
  max-width: 380px;
}

.main-btn:hover {
  background: #e02d5c;
}
.arrow {
  font-size: 1.3rem;
  font-weight: bold;
  margin-left: 8px;
}



.step__intro__promo_top {
	padding-top: 50px;
	width: 100%;
	overflow: hidden;
	max-width: 480px;
	color:rgb(255, 253, 253) !important;
	position: absolute;
  	top: 0; 
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}
.promo {
	display: flex;
	align-items: center; 
    justify-content: center; 
    gap: 10px;
	position: absolute;
	/* height: 2.2em; */
	top: 0;
	left: 0;
	right: 0;
	padding: 5px;
	background: #E82462;
	z-index: 999;
	font-size: 18px;
	letter-spacing: 0.3px;
}
.bold-text {
	font-weight: 600;
}
.promo span {
}
.clock {
	display: inline-block; 
	padding: 2px 5px; 
	border: 1.5px solid rgb(255, 255, 255); 
	border-radius: 8px; 
	
	font-size: 18px; 
	color: rgb(255, 255, 255); 
  }

  /* STEP 3 */
  .card--question {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  }
  
  .card-question-step {
	color: #fff;
	font-size: 16px;
	font-family: Inter;
font-style: normal;
font-weight: 500;
line-height: 25px;
letter-spacing: -0.186px;
  }
  
  .card-question-title {
	
	color: #fff;
	text-align: center;
	font-size: 29.787px;
font-style: normal;
font-weight: 700;
line-height: 35px; 
letter-spacing: -0.186px;
  }
  
  .card-question-title b {
	font-weight: 900;
	color: #fff;
  }
  
  .card-question-buttons {
	display: flex;
	gap: 8px;
	width: 100%;
	justify-content: center;
	margin-top: 10px;
  }
  
  .question-btn {
	flex: 1 1 0;
	display: flex;
width: 159.414px;
height: 45px;
padding: 0 9.309px;
justify-content: center;
align-items: center;
gap: 5px;
flex-shrink: 0;
border-radius: 7.447px;
background: #FFF;
border: none;
box-shadow: 0 3.723px 3.723px 0 rgba(0, 0, 0, 0.3);
  }
  
  .question-btn--no {
	background: #fff;
}
.question-btn--no .question-btn-label {
	color: #222;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	width: 100%;
	display: block;
	font-family: Inter;
	letter-spacing: -0.1px;
}

.question-btn--yes {
	background: #ff3571;
}
.question-btn--yes .question-btn-label {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	width: 100%;
	display: block;
	font-family: Inter;
	letter-spacing: -0.1px;
}
  
  .question-btn:active,
  .question-btn:focus {
  }
  
  .question-btn-icon {
	display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
flex-shrink: 0;
  }
  
  @media (max-width: 376px) {
	.card-question-title {
		font-size: 25px;
		font-style: normal;
		font-weight: 700;
		line-height: 30px; 
	}
	.question-btn {
	  height: 45px;
	  font-size: 2rem;
	}
  }

  /* STEP 6 */

@keyframes rotateClockwise {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
  
  .loader {
	width: 50px;
	margin-top: 30px;
	margin-bottom: 20px;
	height: auto;
	animation: rotateClockwise 2s linear infinite;
  }

  /* STEP 7 */

/* STEP 8 - Mail Step */
.background-static {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
  
}
.background-static::after {
	content: "";
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	left: 50%;
  transform: translateX(-50%);
	width: 100vw;
	height: 100vh;
	max-width: 480px;
	background: rgba(0,0,0,0.80);
	z-index: 1;
	pointer-events: none;
  }
.background-static .background-img {
  width: 100vw;
  height: 100vh;
  max-width: 480px;
	object-fit:fill;
  object-position: center;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  
}
/* .background-img {
	position: absolute;
	left: 50%;
	filter: brightness(0.7);
    transform: translateX(-50%);
	
	height: 100%;
	width: 100%;
	max-width: 480px;
	object-fit:fill;
} */
.mailstep-center {
  position: fixed;
  z-index: 2;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* min-height: 100vh;
  width: 100vw; */
  padding: 0 4vw;
  max-width: 460px;
  text-align: center;
}

@media (min-width: 600px) {
	.mailstep-center{
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  right: 10% !important;
	  transform: translateX(-50%);
	  margin-left: 0;
	margin-right: 0;
	margin-bottom: 2vw;
	width: 100%;
	}
  
  } 
.mailstep-title {
  color: #E82462;
  font-size: 59.44px;
font-style: normal;
font-weight: 900;
line-height: 69.251px; 
letter-spacing: -2.695px;
text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.12);
}
.mailstep-desc {
  color: #fff;
  font-size: 1.18rem;
  font-weight: 400;
  margin-bottom: 22px;
  max-width: 410px;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.mailstep-logo {
	max-width: 300px;
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 420px) {
  .mailstep-title {
    font-size: 55px;
  }
  .mailstep-desc {
    font-size: 1rem;
  }
  
}

  .card-question-title {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 14px;
	text-align: center;
	color: #fff;
  }
  .card--congrats {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #fff;
  }
  .congrats-list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
  }
  
  .congrats-item {
	display: flex;
	align-items: center;
	color: #fff;
	padding: 0;
gap: 12px;
	font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
letter-spacing: -0.2px;
  }
  
  .congrats-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: block;
	margin-right: 2px;
  }

  @media (max-width: 376px) {
	.congrats-item {
		display: flex;
		align-items: center;
		color: #fff;
		padding: 0;
	gap: 6px;
		font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; 
	letter-spacing: -0.2px;
	  }
  }

  .step__field {
	position: relative;
	width: 100%;
	 max-width: 360px; 
	margin: 0.3rem 0.5rem ;
	text-align: left;
}

.step__field__input {
	padding: .625rem 2.3rem .6875rem 1.2rem;
	width: 100%;
	font-size: 1rem;
	line-height: 1.8rem;
	border-radius: 50px;
border: 1px solid #434343;

background: #F3F3F3;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color:rgb(32, 32, 32);
	text-align: left;
	font-weight: 400;
	
}

.step__field__input:focus {
	outline: none;
}

.step__field__valid {
	position: absolute;
	right: .4375rem;
	top: 48%;
	width: 1.25rem;
	height: 1rem;
	background: url("//cdn.tours-78-94.wellhello.com/snapcheat/img/svg/check.svg") no-repeat scroll;
	background-size: 1.1rem 1.1rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.step__field__show {
	position: absolute;
	top: 0.7rem;
	left: 101%;
	font-size: 0.642rem;
	background: none;
	border: 0;
}

.step__field__show.is--active .step__field__show__eyeon {
	display: inline-block;
}

.step__field__show.is--active .step__field__show__eyeoff {
	display: none;
}

.step__field__show__eyeon {
	display: none;
}

.step__field__placeholder {
	position: absolute;
	left: 0.214rem;
	top: 0;
	font-size: 1.125rem;
	line-height: 2.0625rem;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	z-index: -1;
	color: #fff;
}

.step__field__placeholder_active {
	top: -0.5rem;
	font-size: 0.625rem;
	line-height: 0.625rem;
	color: #fff;
}

#lastStepBtn {
	font-size: 18px;
}

.step__field__error {
	position: absolute;
	z-index: 10;
	margin: 0;
	padding: 1rem;
	background-color: #000;
	border-radius: .4375rem;
	line-height: 1.6;
	color: #fff;
	margin-top: 5px;
	font-weight: 300;
	font-size: .75rem;
	width: 100%;
	max-width: 255px;
}