* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

:root {
	font-size: 62.5%;

	--background-color: #18181B;
	--background-color-secondary: #27272A;
	--text-color: #FAFAFA;
	--text-color-secondary: #A1A1AA;
}

body {
	background-color: var(--background-color);
	width: 100vw;
	height: 100vh;
}

.bg-gradient {
	background: -moz-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

body * {
	font-family: 'Roboto', sans-serif;
	color: var(--text-color);
	font-size: 1.6rem;
}

header {
	display: flex;	
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 2.4rem 0;

	margin-bottom: 8rem;
}

header h1 {
	font-size: 5.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	color: #E4E4E7;
}

header span {
	font-size: 1.8rem;
	font-style: italic;

	background: -moz-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

.sectionContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 3.6rem;

	margin-bottom: 8rem;
}

.tag {
	padding: 0.8rem 1.6rem;
	background: var(--background-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 1.2rem;

	border-radius: 4px;


}

.tag p {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-align: center;
}

#banner {
	width: 80rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	text-align: center;
}

#banner h2,
#banner span {
	font-size: 4.8rem;

	line-height: 130%;
	letter-spacing: 0.64px;
}


#banner p {
	font-size: 1.8rem;
	line-height: 150%;
	letter-spacing: 0.18px;
	color: var(--text-color-secondary);
}

.container{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rem;
	width: 100%;
	max-width: 128rem;
	flex-wrap: wrap;

	margin-bottom: 8rem;
}

.container iframe {
	border: none;
	border-radius: 8px;
}

#infoEbook h2 {
	font-size: 4.8rem;

	line-height: 130%;
	letter-spacing: 0.64px;

	text-align: center;
}
#infoEbook h2>span {
	font-size: 4.8rem;

	line-height: 130%;
	letter-spacing: 0.64px;

	background: -moz-linear-gradient(90deg,rgba(239,68,68,1) 0%,  rgba(251,146,60,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

.cards{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 1.8rem;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	padding: 2.4rem 1.6rem;
	background-color: var(--background-color-secondary);

	width: 30rem;
	height: 30rem;
	/* height: 100%; */

	gap: 1.8rem;

	border-radius: 8px;

	border: 1px solid #52525B;

}

.card i {
	font-size: 4.8rem;
	background: -moz-linear-gradient(180deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(180deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

.card > p {
	font-size: 2.4rem;
	font-family: 'Roboto Condensed', sans-serif;
}

.card > span {
	font-size: 1.6rem;
	color: var(--text-color-secondary);
}

#info {
	display: flex;
	align-items: center;
	justify-content: space-evenly;

	padding: 2.4rem;
	text-align: center;

	gap: 4rem;

	width: 100%;

}

#infoContainer {
	display: flex;
	flex-direction: column;

}

#infoContainer h2 {
	font-size: 3.6rem;
	margin-bottom: 1.2rem;

}

#infoContainer > h2 span {
	font-size: 3.6rem;
}

#infoContainer p {
	font-size: 1.8rem;
	line-height: 2.4rem;
	color: var(--text-color-secondary);
	max-width: 85rem;
}

#infoContainer img {
	width: 35rem;
	height: auto;
}

#offer {
	display: flex;
	align-items: center;
	justify-items: center;
	flex-direction: column;

	gap: 3.6rem;

	max-width: 100%;
}

.containerOffer {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	gap: 1.8rem;
	padding: 1.6rem;
}

.buttonCTA {
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1.8rem;
	gap: 1rem;
	text-decoration: none;
	text-align: center;

	border: none;
	border-radius: 4px;

	background: -moz-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);

	box-shadow: 0 0 45px rgba(239,68,68,.64);
	outline: none;

	transition: all 0.3s ease-in-out 0s;
}

.buttonCTA:hover {
	transform: scale(1.1);
}

.buttonCTA > p {
	font-size: 1.8rem;
	font-weight: 500;
	font-family: 'Roboto Condensed', sans-serif}

.buttonCTA > i {
	font-size: 2.4rem;
}

#offerCardEbook {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1.8rem;

	width: 50rem;
}

#offerCardEbook > p {
	font-size: 1.8rem;
	color: #A1A1AA;
	text-align: center;
}

#offerCardEbook > span {
	color: #FAFAFA;
}

#price {
	font-size: 1.8rem;
	color: #A1A1AA;

	font-weight: 400;
}

.offerText span {
	color: #A1A1AA;
	text-decoration: line-through;
}

#containerPrice {
	display: flex;
	align-items: center;
	justify-content: center;
}

#containerPrice h2 {
	font-size: 2.4rem;
	color: #FAFAFA;
}

#containerPrice span {
	font-size: 3.6rem;
	font-weight: 700;
	color: #FAFAFA;
}

.divider {
	width: 0;
	height: 250px;

	border: 1px solid var(--background-color-secondary);

}

#offerCardMentoring{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.8rem;
	flex-direction: column;
}

#offerCardMentoring > p {
	font-size: 1.8rem;
	color: var(--text-color-secondary);
	width: 50rem;
	text-align: center;
}

#testimony h2 {
	font-size: 4.8rem;

	line-height: 130%;
	letter-spacing: 0.64px;
	text-align: center;
}
#testimony h2>span {
	font-size: 4.8rem;

	line-height: 130%;
	letter-spacing: 0.64px;

}

.testimonyCards {
	display: flex;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 1.8rem;

}

.testimonyCard {
	display: flex;
	flex-direction: column;
	justify-content: center;

	background-color: #27272A;

	padding: 1.6rem;
	border: 1px solid var(--text-color-secondary);
	border-radius: 8px;
	gap: 1.4rem;

	width: 45rem;
	height: 40rem;

}

.testimonyCard:hover {
	transform: scale(1.02);
	transition: all 0.5s ease-in-out 0s;
}

.testimonyCardProfile {
	display: flex;
	align-items: center;
	/* justify-content: center; */

	width: 100%;

	gap: 1.4rem;
}

.testimonyCardProfile > img {
	width: 50px;
	height: 50px;

	border: none;
	border-radius: 50%;
}

.testimonyCardProfileImage {

	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

.testimonyCardProfileImage > img{
	width: 50px;
	height: 50px;

	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%) border-box;
	border-radius: 50%;
	border: 2px solid transparent;

}

.testimonyCardProfileText p {
	font-size: 1.8rem;
	font-weight: bold;
}

.testimonyCardProfileText span {
	font-size: 1.6rem;

	background: -moz-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.testimonyText {
	font-size: 1.4rem;
	text-align: center;
}

footer {
	border-top: 1px solid var(--background-color-secondary);
	display: flex;
	align-items: center;

	justify-content: space-evenly;

	padding: 2.4rem;
}
#links {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 1.8rem;
}

#links i {
	font-size: 3.6rem;
	color: #52525B;
}

#links i:hover {
	color: #FAFAFA;
}

#links a {
	text-decoration: none;
	cursor: pointer;
}

#links a:visited {
	text-decoration:none;
	color: var(--background-color-secondary);
}

@media( max-width: 480px) {
	body{
		padding: 0 3.2rem;
	}

	header,
	main,
	footer {
		width: 100%;
	}

	header {
		margin-bottom: 4rem;
		text-align: center;
	}
	
	header h1 {
		font-size: 3.6rem;
	}
	
	header span {
		font-size: 1.4rem;
	}

	.sectionContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	
		gap: 1.6rem;
	
		margin-bottom: 4rem;
	}
	
	#banner {
		margin-bottom: 2rem;

		width: 100%;
	}

	#banner h2,
	#banner span {
		font-size: 3.6rem;
		line-height: 130%;
	}
	
	.container{
		gap: 2rem;
	
	}
	
	.container iframe {
		width: 400px;
		height: 400px;
	}
	
	#infoEbook h2,
	#infoEbook h2>span {
		font-size: 3.6rem;

	}

	.card {
		height: 20rem;
	}
	
	.card > p {
		font-size: 1.8rem;
	}
	
	.card > span {
		font-size: 1.4rem;
		color: var(--text-color-secondary);
	}

	.card > i {
		font-size: 4rem;
	}
	
	#info {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
	
		width: 100%;
	
		padding: 2.4rem;
	
	}
	
	#infoContainer {
		width: 100%;
		flex-direction: column;
	}
	
	#infoContainer > h2 {
		font-size: 2.8rem;
		margin-bottom: 2rem;
	}

	#infoContainer > h2 > span {
		font-size: 2.8rem;
	}
	
	#infoContainer p {
		font-size: 1.6rem;
		line-height: 3.6rem;
	}

	#infoContainer img {
		width: 200px;
		height: auto;
		margin: 0 auto;
	}
	
	.containerOffer {
		flex-direction: column;
	}
	
	.buttonCTA > p {
		font-size: 1.6rem;
	}

	.buttonCTA > i {
		font-size: 2rem;
	}
	
	#offerCardEbook {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 1.8rem;
	
	}
	
	.divider {
		width: 250px;
		height: 0;
	
		border: 1px solid var(--background-color-secondary);
	
	}
	
	#offerCardMentoring > p {
		width: 100%;
	}
	
	#testimony h2 {
		font-size: 3.6rem;
	}
	#testimony h2>span {
		font-size: 3.6rem;
	}
	
	.testimonyCards {
		display: flex;
		align-items: center;
		justify-content: center;
	
		flex-wrap: wrap;
	
		gap: 1.8rem;
	
	}
	
	.testimonyCard {
		display: flex;
		flex-direction: column;
		justify-content: center;
	
		background-color: #27272A;
	
		padding: 1.6rem;
		border: 1px solid var(--text-color-secondary);
		border-radius: 8px;
		gap: 1.4rem;

		max-width: 40rem;
		width: auto;
		height: auto;
	
	
	}
	
	.testimonyCardProfile {
		display: flex;
		align-items: center;
		justify-content: center;
	
		gap: 1.4rem;
	}
		
	.testimonyCardProfileImage > img{
		width: 50px;
		height: 50px;
	
		background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%) border-box;
		border-radius: 50%;
		border: 1px solid transparent;
	
	}
	
	.testimonyCardProfileText p {
		font-size: 1.6rem;
	}
	
	.testimonyCardProfileText span {
		font-size: 1.4rem;
	}
	
	.testimonyText p{
		font-size: 1.4rem;
		line-height: 150%;
	}
	
	footer {	
		padding: 1.4rem;
	}

	#links {
		gap: 1.2rem;
	}
	
	#links i {
		font-size: 1.8rem;
	}
	
	footer > h2,
	footer > p {
		font-size: 1.2rem;
	}


}

@media( max-width: 768px) {
	body{
		padding: 0 4rem;
	}

	header,
	main,
	footer {
		width: 100%;
	}

	header {
		margin-bottom: 4rem;
		text-align: center;
	}
	
	header h1 {
		font-size: 3.6rem;
	}
	
	header span {
		font-size: 1.6rem;
	}

	.sectionContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	
		gap: 1.6rem;
	
		margin-bottom: 4rem;
	}
	
	#banner {
		margin-bottom: 2rem;

		padding: 1.6rem;

		width: 100%;
	}

	#banner h2,
	#banner span {
		font-size: 3.6rem;
		line-height: 130%;
	}
	
	.container{
		gap: 2rem;
	
	}
	
	.container iframe {
		width: 700px;
		height: 700px;
	}
	
	#infoEbook h2,
	#infoEbook h2>span {
		font-size: 3.6rem;

	}

	.card { 
		height: 20rem;
	}
	
	.card > p {
		font-size: 1.8rem;
	}
	
	.card > span {
		font-size: 1.4rem;
		color: var(--text-color-secondary);
	}

	.card > i {
		font-size: 4rem;
	}
	
	#info {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
	
		width: 100%;
	
		padding: 2.4rem;
	
	}
	
	#infoContainer {
		width: 100%;
		flex-direction: column;
	}
	
	#infoContainer > h2 {
		font-size: 2.8rem;
		margin-bottom: 2rem;
	}

	#infoContainer > h2 > span {
		font-size: 2.8rem;
	}
	
	#infoContainer p {
		font-size: 1.6rem;
		line-height: 3.6rem;
	}

	#infoContainer img {
		width: 200px;
		height: auto;
		margin: 0 auto;
	}
	
	.containerOffer {
		flex-direction: column;
	}
	
	.buttonCTA > p {
		font-size: 1.6rem;
	}

	.buttonCTA > i {
		font-size: 2rem;
	}
	
	#offerCardEbook {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 1.8rem;
	
	}
	
	.divider {
		width: 250px;
		height: 0;
	
		border: 1px solid var(--background-color-secondary);
	
	}
	
	#offerCardMentoring > p {
		width: 100%;
	}
	
	#testimony h2 {
		font-size: 3.6rem;
	}
	#testimony h2>span {
		font-size: 3.6rem;
	}
	
	.testimonyCards {
		display: flex;
		align-items: center;
		justify-content: center;
	
		flex-wrap: wrap;
	
		gap: 1.8rem;
	
	}
	
	.testimonyCard {
		display: flex;
		flex-direction: column;
		justify-content: center;
	
		background-color: #27272A;
	
		padding: 1.6rem;
		border: 1px solid var(--text-color-secondary);
		border-radius: 8px;
		gap: 1.4rem;

		max-width: 40rem;
		width: auto;
		height: auto;
	
	
	}
	
	.testimonyCardProfile {
		display: flex;
		align-items: center;
		justify-content: center;
	
		gap: 1.4rem;
	}
		
	.testimonyCardProfileImage > img{
		width: 50px;
		height: 50px;
	
		background: linear-gradient(90deg, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 100%) border-box;
		border-radius: 50%;
		border: 1px solid transparent;
	
	}
	
	.testimonyCardProfileText p {
		font-size: 1.6rem;
	}
	
	.testimonyCardProfileText span {
		font-size: 1.4rem;
	}
	
	.testimonyText p{
		font-size: 1.4rem;
		line-height: 150%;
	}
	
	footer {	
		padding: 1.4rem;
	}

	#links {
		gap: 1.2rem;
	}
	
	#links i {
		font-size: 1.8rem;
	}
	
	footer > h2,
	footer > p {
		font-size: 1.2rem;
	}


}