/* ESTILOS GERAIS */
@import './global.css';

/* INTRO */
section.intro {
	background-image: url('../imgs/bg-intro.jpg');
	background-size: cover;
	background-position: center;
	padding-top: 280px;
}

.intro > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	padding: 44px 4%;
}

.intro h1 {
	flex: 1;
	font: var(--fonte-primaria);
	color: #fff;
}

.intro form {
	display: flex;
}

.intro form input {
	display: block;
	padding: 15px 10px;
	border: 0px;
	border-radius: 5px 0 0 5px;
	min-width: 285px;
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-400);
}

.intro form input::placeholder {
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-200);
}

.intro form input:focus {
	outline: none;
}

.intro form button {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	padding: 15px 10px;
	border-radius: 0 5px 5px 0;
	font: var(--fonte-secundaria-md-b);
	color: #fff;
	background: var(--gradiente-primario);
	cursor: pointer;
	border: 0;
}

.intro form button:hover {
	background: var(--cor-neutra-500);
}

@media (width <= 1080px) {
	.intro form {
		flex-direction: column;
	}

	.intro form input {
		border-radius: 5px 5px 0 0;
	}

	.intro form button {
		border-radius: 0 0 5px 5px;
	}

	.intro form button {
		font-size: var(--fonte-secundaria-sm-b);
	}
}

@media (width <= 610px) {
	section.intro {
		padding-top: 160px;
	}

	.intro > div {
		flex-direction: column;
		align-items: start;
		gap: 20px;
	}

	.intro form {
		width: 100%;
	}
}

/* CONTEUDO PRINCIPAL */

section.praias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 70px;
	padding: 60px 4% 100px 4%;
}

.praias-local img {
	max-width: 100%;
}

.praias .modal {
	margin: auto;
	margin-top: -120px;
	margin-bottom: 30px;
	width: 100%;
	max-width: 90%;
}

.praias .embed {
	position: relative;
	padding-bottom: 56.25%;
	margin: auto;
	width: 100%;
	max-width: 600px;
}

.embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.praias-texto h2 {
	font: var(--fonte-primaria);
	padding-bottom: 35px;
}

.praias-texto span {
	color: var(--cor-primaria-200);
}

.praias-texto ul {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-top: 35px;
	border-top: 3px solid var(--cor-neutra-100);
}

.praias-texto ul li {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
	padding-bottom: 30px;
	border-bottom: 3px solid var(--cor-neutra-100);
}

.praias-texto ul li span {
	font: var(--fonte-secundaria-lg);
	color: var(--cor-neutra-500);
}

.praias-texto p {
	font: var(--fonte-secundaria-md);
	color: var(--cor-neutra-500);
}

.praias-texto p {
	padding-top: 35px;
}

.como-chegar {
	margin-left: 40px;
}

.como-chegar h3 {
	display: flex;
	align-items: center;
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-600);
	padding-bottom: 15px;
	position: relative;
}

.como-chegar h3::before {
	content: '';
	display: block;
	position: absolute;
	left: -15px;
	width: 8px;
	height: 8px;
	background: url(../imgs/detalhe-como-chegar.svg);
}

.como-chegar li {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 5px;
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-600);
	position: relative;
}

.como-chegar li::before {
	content: '';
	display: block;
	position: absolute;
	left: -16px;
	width: 10px;
	height: 2px;
	background: var(--cor-primaria-200);
}

.como-chegar li span {
	color: var(--cor-neutra-300);
}

@media (width <= 1080px) {
	section.praias {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.praias-local {
		order: 2;
	}

	.praias-local img {
		width: 100%;
		max-height: 800px;
		object-fit: contain;
	}

	.praias-texto {
		order: 1;
	}
}

/* AULAS */

section.aulas {
	position: relative;
	background: var(--cor-neutra-100);
}

.aulas > div.container {
	padding: 60px 4%;
}

.aulas h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font: var(--fonte-primaria);
	color: var(--cor-neutra-500);
	padding-bottom: 60px;
}

.aulas h2::before {
	content: '';
	display: block;
	width: 174px;
	height: 70px;
	top: -30px;
	position: absolute;
	background: url(../imgs/ondas.svg) no-repeat;
}

.box-aulas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 60px;
}

.card-aula {
	display: flex;
	flex-direction: column;
	flex: 1 1 370px;
	position: relative;
	padding: 30px 60px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0px 10px 10px 0px rgba(187, 204, 221, 0.4),
		0px 5px 5px 0px rgba(187, 204, 221, 0.4);
}

.card-aula:nth-child(1)::before {
	content: '';
	display: block;
	width: 22px;
	height: 39px;
	top: -20px;
	position: absolute;
	background: url(../imgs/surfbot-icon.svg) no-repeat;
	align-self: center;
}

.card-aula:nth-child(2)::before {
	content: '';
	display: block;
	width: 53px;
	height: 39px;
	top: -20px;
	position: absolute;
	background: url(../imgs/surfbot2-icon.svg) no-repeat;
	align-self: center;
}

.card-aula:nth-child(3)::before {
	content: '';
	display: block;
	width: 86px;
	height: 39px;
	top: -20px;
	position: absolute;
	background: url(../imgs/surfbot3-icon.svg) no-repeat;
	align-self: center;
}

.card-aula h3 {
	text-align: center;
	font: var(--fonte-secundaria-lg-b);
	color: var(--cor-neutra-500);
	padding-bottom: 30px;
}

.card-aula ul {
	display: flex;
	flex-direction: column;
	gap: 25px;
	font: var(--fonte-secundaria-sm);
	color: var(--cor-neutra-500);
	padding: 15px;
	border-top: 3px solid var(--cor-neutra-100);
}

.card-aula ul li:first-child {
	margin-top: 30px;
}

.card-aula ul li {
	display: flex;
	align-items: center;
	position: relative;
}

.card-aula ul li::after {
	content: '';
	position: absolute;
	left: -15px;
	width: 8px;
	height: 8px;
	background: url(../imgs/detalhe-como-chegar.svg);
}

.card-aula span {
	font: var(--fonte-secundaria-sm-b);
	color: var(--cor-primaria-200);
	padding-top: 20px;
	padding-bottom: 30px;
	border-top: 3px solid var(--cor-neutra-100);
}

.card-aula a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 5px;
	font: var(--fonte-secundaria-md-b);
	color: #fff;
	background: var(--gradiente-secundario);
	width: 100%;
	padding: 10px 15px;
}

.card-aula a:hover {
	background: var(--cor-primaria-200);
}

.aulas .texto-desconto {
	font: var(--fonte-secundaria-md);
	color: var(--cor-neutra-500);
	margin-top: 30px;
	text-align: center;
}

.aulas .texto-desconto strong {
	color: var(--cor-secundaria-100);
}

.aulas .texto-desconto span {
	position: relative;
}

.aulas .texto-desconto span::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	bottom: -3px;
	left: 0;
	background: var(--cor-secundaria-100);
	position: absolute;
}

@media (width <= 1275px) {
	.box-aulas {
		justify-content: center;
	}

	.card-aula {
		flex: 1 1 370px;
		align-items: center;
	}

	.card-aula ul,
	.card-aula span {
		font-size: 1.2rem;
	}

	.card-aula a {
		justify-content: center;
	}

	.card-aula a img {
		margin-left: 15px;
	}
}

@media (width <= 435px) {
	.card-aula {
		padding: 30px 20px;
	}
}

/* QUOTE */

.quote {
	background-image: url(../imgs/foto-quote.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
	padding: 160px;
	max-width: 100%;
}

.quote p {
	font: var(--fonte-primaria);
}

.quote span {
	display: block;
	font: var(--fonte-secundaria-md-b);
	margin-top: 30px;
}

@media (width <= 700px) {
	.quote {
		padding: 60px 20px;
	}

	.quote p {
		font-size: 2.5rem;
	}
}

/* CONTATO */

.contato {
	background-image: url('../imgs/bg-icones.svg');
	background-repeat: no-repeat;
	background-position: center right 70px;
}

.contato h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 60px;
	padding-bottom: 30px;
	text-align: center;
	font: var(--fonte-primaria);
	color: var(--cor-neutra-500);
	position: relative;
}

.contato h2::after {
	content: '';
	width: 2px;
	height: 477px;
	top: 175px;
	position: absolute;
	background-color: var(--cor-neutra-100);
}

.contato .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 220px;
	padding: 0 4%;
}

.contato form {
	display: flex;
	flex-direction: column;
	max-width: 470px;
}

.contato label {
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-500);
	padding-bottom: 3px;
}

.contato input {
	background-color: var(--cor-neutra-100);
	padding: 10px;
	border: none;
	margin-bottom: 15px;
}

.contato textarea {
	background-color: var(--cor-neutra-100);
	padding: 10px;
	border: 0;
	outline: none;
	resize: none;
	margin-bottom: 30px;
}

.contato form a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 5px;
	font: var(--fonte-secundaria-md-b);
	color: #fff;
	background: var(--gradiente-secundario);
	max-width: 230px;
	padding: 12px 15px;
	margin-bottom: 60px;
}

.contato form a:hover {
	background: var(--cor-primaria-200);
}

.contato ul li {
	font: var(--fonte-secundaria-sm);
	color: var(--cor-neutra-500);
}

.contato ul li.detalhe-linha::after {
	content: '';
	display: block;
	width: 270px;
	height: 2px;
	background: var(--cor-neutra-100);
	margin-top: 15px;
}

.contato ul a {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font: var(--fonte-secundaria-sm-b);
	color: var(--cor-neutra-500);
	margin-top: 10px;
}

.contato ul a::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background: url(../imgs/seta-vermelha.svg);
	animation: move-to-right ease-in-out infinite 2s;
}

.contato ul span {
	font: var(--fonte-secundaria-md-b);
	color: var(--cor-neutra-500);
	margin-bottom: 5px;
}

.contato ul span.detalhe {
	display: flex;
	align-items: center;
	position: relative;
}

.contato ul span.detalhe::before {
	content: '';
	position: absolute;
	left: -15px;
	width: 8px;
	height: 8px;
	background: url(../imgs/detalhe-horario.svg);
}

.contato span.detalhe-linha::before {
	content: '';
	display: block;
	width: 270px;
	height: 2px;
	margin-bottom: 15px;
	background: var(--cor-neutra-100);
}

.contato ul span:last-of-type {
	margin-top: 15px;
}

@keyframes move-to-right {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}

	100% {
		transform: translateX(0);
	}
}

@media (width <= 830px) {
	.contato {
		background-position: bottom right 25px;
	}

	.contato .container {
		grid-template-columns: 1fr;
	}

	.contato form {
		max-width: 800px;
	}

	.contato h2::after {
		display: none;
	}

	.contato span.detalhe-linha::before,
	.contato ul li.detalhe-linha::after {
		width: 200px;
	}
}