/* ------------------------------------> GENERAL */

:root {
    --black: #000;
    --gold: rgb(255, 213, 0);
    --green: #adfc8b;
    --purple: #9f06f9;
    --purple-oscuro: #63019c;
    --white: #fff;
    --red: #d20000;
    --title: 4rem;
    --info: 1.8rem;
    --number: 4rem;
    --question: 2.2rem;
    --answer: 2rem;
    --answer-bold: 3rem;
    --button: 2.4rem;
    --fact-number: 3rem;
    --fact-text: 2rem;
    --check-text: 1.8rem;
    --check-icon: 3rem;
    --call: 1.6rem;
    --form-call: 1.6rem;
    --promotion: 1rem;
    --overlay: rgba(0, 56, 73, 0.8);
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

html {
    font-size: 62.5%;
}

h1, h2, h3 {
    font-family: 'Passion One', cursive;
    font-weight: 400;
    margin: 0;
}

p {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

.button {
    background-color: var(--purple);
    border-color: white;
    color: var(--white);
    height: 6rem;
    font-size: var(--button);
    font-weight: bold;
    width: 24rem;
}

.button:hover {
    background-color: var(--purple-oscuro);
    cursor: pointer;
}

.button:disabled {
    background-color: #737373;
}

.button--disappear {
    display: none;
}

.enabled {
    display: flex;
}

.disabled {
    display: none;
}

/* ------------------------------------> INITIAL PAGES */

.main {
    margin: auto 5%;
    padding: 4.8rem 0;
}

.overlay {
    background-color: var(--overlay);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.background {
    background-color: var(--overlay);
    background-image: url(../images/background-mobile.jpg);
    background-size: cover;
    background-position: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -2; 
}

.content-container {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.title {
    color: white;
    font-size: var(--title);
    text-align: center;
}

.title-bold {
    color: var(--green);
    text-transform: uppercase;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 2.4rem;
}

.alternative-display {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
}

.info {
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: var(--info);
    text-align: left;
}

.checkbox {
    height: 25px;
    margin-right: 15px;
    width: 25px;
}

.number {
    color: var(--green);
    font-family: 'Passion One', cursive;
    font-size: var(--number);
}

.question-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 4.8rem 0 0 0;
}

.question, .subQuestion {
    color: var(--green);
    font-size: var(--question);
    text-align: center;
}

.button__container {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}

.subAnswer {
    color: var(--white);
    font-size: var(--answer);
    margin: 1.6rem 0 3.2rem 0;
    text-align: center;
}

.answer-bold {
    color: var(--green);
    font-family: 'Passion One', cursive;
    font-size: var(--answer-bold);
    text-transform: uppercase;
}

.facts-container {
    border: 2px dashed var(--green);
    padding: 2.4rem;
    margin-top: 4.8rem;
}

.fact-number {
    color: var(--green);
    font-family: 'Passion One', cursive;
    font-size: var(--fact-number);
}

.fact-text {
    color: var(--white);
    font-size: var(--fact-text);
    margin-top: 2rem;
    text-align: center;
}

/* ------------------------------------> LANDING PAGE */

.check-content, .benefit-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 4rem 0;
    text-align: center;
}

.benefit-content {
    margin-bottom: 0;
}

.check {
    align-items: center;
    display: flex;
}

.check .check-icon {
    color: var(--green);
    font-size: var(--check-icon);
    font-weight: bold;
    margin-right: 1rem;
}

.check-text, .benefit {
    color: var(--white);
    font-size: var(--check-text);
}

.check-text {
    text-align: left;
}

.call {
    color: var(--green);
    font-size: var(--call);
    text-align: center;
}

.form-container {
    align-items: center;
    flex-direction: column;
    margin: 4.8rem;
}

.form-display {
    min-width: 270px;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-title {
    color: var(--white);
    font-size: var(--title);
    text-align: center;
}

.form-call {
    color: var(--white);
    font-size: var(--form-call);
    margin: 1.2rem 0 2rem 0;
    text-align: center;
}

.form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 27rem;
}

.input {
    height: 4.4rem;
    width: 90%;
}

/* ------------------------------------> FORM SEND */

.form-cancel {
	/*display: flex;
	align-self: end;
	justify-content: right;*/
}

.form-cancel {
    color: rgb(255, 0, 0, 1);
	position: absolute;
	right: 10px;
	top: 20px;
}

.form-cancel:hover {
	color: var(--white);
	cursor: pointer;
}

.loader-text, .thanks-text, .error-text {
    color: var(--white);
	font-size: var(--question);
	margin: 25px 0;
	text-align: center;
}

.loader-container {
	height: 100px;
	position: relative;
	margin: 50px auto;
	width: 100px;
}

.loader1 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border: solid 7px transparent;
	border-top-color: var(--purple);
	border-left-color: var(--purple);
	border-radius: 50%;
	animation: loader 1.2s linear infinite;
}

.loader2 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 70%;
	width: 70%;
	border: solid 7px transparent;
	border-top-color: var(--purple);
	border-left-color: var(--purple);
	border-radius: 50%;
	animation: loader2 1.2s linear infinite;
}

.thanks-message, .error-message {
    color: var(--white);
    font-size: var(--call);
	text-align: center;
}

@keyframes loader {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes loader2 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(-360deg);
	}
}

/* ------------------------------------> PROMOTION */

.promotion {
    background-color: var(--black);
    color: var(--white);
    font-size: var(--promotion);
    padding: 1.5rem 1rem;
    text-align: center;
}

.promotion-link {
    color: var(--gold);
    text-decoration: none;
}