@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--poppings: 'Poppins', sans-serif;
	--open-sans: 'Open Sans', sans-serif;

	/* ===  Primary colors === */
	--pink: hsl(322, 100%, 66%);
	--light-pink: hsl(321, 100%, 78%);
	--Light-red: hsl(0, 100%, 63%);

	/* === Neutral Colors === */
	--very-dark-cyan: hsl(192, 100%, 9%);
	--very-pale-blue: hsl(207, 100%, 98%);

	/* === Container === */
	--padding-container: 80px 0;

	/* === Wave === */
	--wave-bottom: url('../images/bg-section-top-mobile-1.svg');
	--wave-top: url('../images/bg-section-bottom-mobile-1.svg');
}

body {
	font-family: var(--open-sans);
}

/* === HEADER === */
.hero {
	min-height: 80vh;
	position: relative;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding: var(--padding-container);
}

.hero__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	--padding-container: 60px 0;
}

.hero__logo {
	width: 45%;
	max-width: 150px;
}

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

.hero-cta {
	display: inline-block;
	color:  var(--light-pink);
	border: 2px solid;
	text-decoration: none;
	padding: 6px 16px;
	border-radius: 30px;
	box-shadow: 0 0 2px var(--light-pink);
}

.hero__main {
	text-align: center;
	color: var(--very-dark-cyan);
	--padding-container: 100px 0;
}

.hero-title {
	font-family: var(--poppings);
}

.hero-paragraph {
	margin: 16px auto;
	width: 85%;
	line-height: 1.5;
}

.cta {
	display: inline-block;
	text-decoration: none;
	background-color: var(--pink);
	color: #fff;
	font-weight: 600;
	margin-top: 16px;
	padding: 12px 30px;
	border-radius: 25px;
	box-shadow: 0 3px 5px rgb(0, 36.72, 45.9, 0.2);
	transition: background-color 0.3s ease;
}

.cta:hover {
	background-color: var(--light-pink);
}

.hero__picture {
	margin-top: 80px;
}

.hero-image {
	width: 100%;
	max-width: 600px;
	display: block;
	margin: 0 auto;
}



/* === NUMBERS === */
.numbers {
	--padding-container: 40px 0;
	position: relative;
}

.hero__numbers {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 80px;
	grid-gap: 60px;
}

.hero__item {
	overflow: hidden;
}

.hero-number {
	font-size: 60px;
}

.hero-icon {
	display: block;
	width: 40px;
}

/* === Clases para las waves ===*/
.wave {
	position: absolute;
	width: 100%;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 100% 100px;
}

.wave--bottom {
	left: 0;
	bottom: 0;
	background-image: var(--wave-bottom);
}

.wave--top {
	left: 0;
	top: 0;
	background-image: var(--wave-top);
}



/* === GROW === */
.section {
	background-color: var(--very-pale-blue);
	--padding-container: 80px 0 40px 0;
}

.section--white {
	background-color: #fff;
	position: relative;
	--padding-container: 200px 0;
	--wave-bottom: url('../images/bg-section-top-mobile-2.svg');
}

.section--user {
	--padding-container: 20px 0 80px;
}

.section__container {
	display: flex;
	flex-direction: column;
}

.section__picture {
	width: 100%;
}

.section-img {
	width: 100%;
	display: block;
	margin: 0 auto;
	max-width: 350px;
}

.section__texts {
	margin-top: 50px;
	text-align: center;
}

.subtitle {
	margin-bottom: 16px;
	font-family: var(--poppings);
	font-weight: 700;
}



/* === QUESTION	=== */
.question {
	text-align: center;
	position: relative;
	--wave-top: url('../images/bg-section-bottom-mobile-2.svg');
	--wave-bottom: url('../images/bg-footer-top-mobile.svg');
	--padding-container: 200px 0 220px;
}

/* === FOOTER === */
footer {
	background-color: var(--very-dark-cyan);
	color: #fff;
}

.footer-title {
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
	font-family: var(--poppings);
}

.footer-paragraph {
	line-height: 1.5;
	margin: 16px 0 50px;
}

.footer__form {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80px;
	position: relative;
}

/* CLASE DE WARNING PARA LA VALIDACION */
.form-alert {
	color: #f00;
	font-size: 14px;
	transform: translateY(-10px);
	display: none;
}

.footer-input {
	width: 100%;
	font-size: 16px;
	font-family: var(--open-sans);
	border: none;
	outline: none;
	border-radius: 3px;
	padding: 16px 6px;
	margin-bottom: 20px;
}

.footer-cta {
	font-size: 16px;
	font-family: var(--open-sans);
	color: #fff;
	border: none;
	outline: none;
	background-color: var(--pink);
	border-radius: 4px;
	padding: 10px 40px;
	font-weight: 600;
	margin-left: auto;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.footer-cta:hover {
	background-color: var(--light-pink);
}

.footer__contact {
	line-height: 50px;
}

.footer__contact::after {
	content: "Phone: +1-543-123-4567";
	margin-left: 10px;
}

.footer__contact--email::after {
	content: "example@huddle.com";
}

.footer__social {
	display: flex;
	grid-gap: 20px;
	margin-top: 30px;
}

.footer__link {
	display: block;
	font-size: 30px;
	text-decoration: none;
}

.footer-icon {
	display: block;
	color: #fff;
	transition: color 0.3s ease;
}

.footer-icon:hover {
	color: #4ce;
}



/* === DAPTANDO PARA DESKTOP === */
@media screen and (min-width: 768px){
	.hero-title {
		font-size: 45px;
	}

	.hero-paragraph {
		width: 40%;
	}

	.hero-image {
		max-width: 1000px;
	}

	.cta {
		padding: 16px 45px;
	}

	/* === NUMBERS ===*/
	.numbers {
		--wave-bottom: url('../images/bg-section-top-desktop-1.svg');
	}

	.hero__numbers {
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 100px;
	}

	.hero-number {
		font-size: 80px;
		margin: 10px 0;
	}

	.hero-comunity {
		font-size: 20px;
		text-align: center;
	}

	/* === SECTIONS ===*/
	.section__container {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
	}

	.section__picture {
		width: 50%;
	}

	.section-img {max-width: 500px;}

	.section__texts {
		width: 45%;
		margin-top: 0;
		text-align: left;
	}

	.section--white .section__container {
		flex-direction: row;
	}

	.section--white {
		--wave-top: url('../images/bg-section-bottom-desktop-1.svg');
		--wave-bottom: url('../images/bg-section-top-desktop-1.svg');
		--padding-container: 220px 0;
	}

	.section--user {
		--padding-container: 40px 0 100px;
	}

	.subtitle {
		font-size: 40px;
		margin-bottom: 25px;
	}

	/* === QUESTION === */
	.question {
		--wave-top: url('../images/bg-section-bottom-desktop-2.svg');
		--wave-bottom: url('../images/bg-footer-top-desktop.svg');
		--padding-container: 250px 0;
	}



	/* === FOOTER === */
	.footer__container {
		display: flex;
		justify-content: space-between;
		--padding-container: 120px 0;
	}

	.footer__newsletter {
		width: 45%;
		order: 1;
	}

	.footer__content {
		width: 40%;
		max-width: 350px;
	}

	.footer-title, .footer-paragraph {
		max-width: 360px;
		text-align: left;
	}

	.footer-paragraph {
		margin-bottom: 30px;
	}

	.footer__form {
		justify-content: space-between;
		align-items: center;
	}

	.footer-input {
		display: block;
		width: 55%;
		/*padding: 16px 30px;*/
		font-size: 16px;
		margin: 0;
	}

	.footer-cta {
		display: block;
		width: 30%;
		padding: 16px 0;
		text-align: center;
	}

	.footer__social {
		margin-top: 50px;
	}

	.form-alert {
		position: absolute;
		bottom: -20px;
		left: 0;
		transform: translateY(0);
	}
}