/* =========== GERAL ============ */

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

:root {
	--hue: 220;
	--primary-color: black;
	--brand-beige: hsla(39, 100%, 97%, 1);
	--brand-ligth: hsla(calc(var(--hue) - 22), 23%, 89%, 1);
	--headline: hsla(210, 11%, 15%, 1);
	--paragraph: hsla(210, 9%, 31%, 1);
	--bg-light: hsla(180, 14%, 97%, 1);
	--brand-green-hover: grey;

	font-size: 62.5%;
	/* padrão 10px */
	--nav-heigth: 7.2rem;


}

body {
	font-family: 'DM Sans';
	font-size: 1.6rem;
	text-align: center;
	overflow: overlay;
	background-color: var(--bg-light);
}

html {
	scroll-behavior: smooth;
}

html,
body {
	width: 100%;
	height: 100%;
}

img {
	max-width: 100%;
}

ul {
	list-style: none;
}

.wrapper {
	width: min(50rem, 100%);
	margin-inline: auto;
	padding-inline: 2.4rem;
}

section {
	padding-block: 10rem;
}

section#home {
	padding-bottom: 0;
}

section header h1 {
	font-size: 3.4rem;
	color: var(--headline);
	line-height: 130%;
}

section header h2 {
	text-align: left;
	font-weight: 700;
	font-size: 3rem;
	line-height: 3.9rem;
	color: var(--headline);
}

section header h4 {
	font-size: 1.4rem;
	color: var(--primary-color);
	line-height: 150%;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1.6rem;
}

/* CUSTOM COLORS  */

#whyChooseUs .card circle {
	fill: var(--brand-ligth);
}


#back-top-button circle {
	fill: var(--primary-color);
}

#whyChooseUs .card path,
button.open-menu path[stroke*="#00856F"],
#contact p path {
	stroke: var(--primary-color);
}

#navigation.scroll button.open-menu path[stroke*="#00856F"] {
	stroke: white;
}

nav.scroll .logo path,
.menu-expanded #navigation .logo path[fill*="#00856F"],
#navigation.scroll .logo path[fill*="#00856F"] {
	fill: white;
}

/* ======== NAVIGATION ======== */

nav {
	display: flex;
	position: fixed;
	top: 0;
	height: var(--nav-heigth);
	z-index: 100;
	width: 100vw;
}

nav .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

nav.scroll {
	background-color: var(--primary-color);
}

nav .menu,
nav .close-menu {
	position: fixed;
}

nav button,
#letsGetStarted button {
	background: none;
	border: none;
	cursor: pointer;
}

button.whatsapp {
	cursor: pointer;
}

/* ======== MENU EXPANDED ======== */

body.menu-expanded {
	overflow: hidden;
}

body.menu-expanded> :not(nav) {
	visibility: none;
}

.menu,
.close-menu,
body.menu-expanded .open-menu {
	opacity: 0;
	visibility: hidden;
}

body.menu-expanded .menu,
body.menu-expanded .close-menu {
	opacity: 1;
	visibility: visible;
}

.menu {
	transform: translateY(100%)
}

body.menu-expanded .menu {
	top: 0;
	left: 0;
	background-color: var(--primary-color);
	width: 100vw;
	height: 100vh;
	padding-top: var(--nav-heigth);
	transition: transform 300ms;
	transform: translateY(0)
}


.social-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.2rem;
}

.menu ul:nth-child(1) {
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
	margin-top: 6rem;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 3.1rem;
}

.menu ul li a {
	color: white;
	text-decoration: none;
}

.menu button {
	background: white;
	padding: 16px 32px;
	border-radius: 4rem;
	color: var(--primary-color);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2.3rem;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	margin-top: 4.8rem;
	margin-bottom: 8rem;
}

.menu button:hover {
	background-color: var(--primary-color);
	color: white;
	filter: brightness(1.3)
}

body.menu-expanded .logo,
body.menu-expanded button {
	position: relative;
	z-index: 10;
}

body.menu-expanded .logo path {
	fill: white;
}

body.menu-expanded button path {
	stroke: white;
}

/* ======== HOME ======== */

#home {
	padding-top: calc(4.1rem + var(--nav-heigth));
}

#home::before {
	content: "";
	background-color: var(--brand-ligth);
	display: block;
	width: 100%;
	height: calc(76% + var(--nav-heigth));

	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#home h1 {
	margin-bottom: 2.4rem;
}

#home p {
	font-size: 1.8rem;
	line-height: 150%;
	font-weight: 400;
	color: var(--paragraph);
	margin-bottom: 3.2rem;
}

#home img {
	width: 26.4rem;
	display: block;
	margin-inline: auto;
	object-position: 0 2rem;
}

#home button,
#letsGetStarted button {
	background-color: var(--primary-color);
	border: none;
	border-radius: 4rem;
	margin-inline: auto;
	margin-bottom: 6rem;
	padding: 1.6rem 3.2rem;
	color: white;
	text-transform: uppercase;
	font-size: 1.4rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	transition: background 200ms;

}

#home button:hover ,
#letsGetStarted button:hover{
	background-color: var(--brand-green-hover);
}

#home .stats {
	background-color: var(--brand-beige);
	width: 100%;
	padding-block: 4rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6rem;
	border: var(--brand-ligth) 0.1rem solid;
	border-radius: 0.6rem;
}

#home .stat h3 {
	font-size: 4.8rem;
	color: var(--headline);
	line-height: 130%;
	margin-bottom: 0.4rem;
}

#home .stat p {
	line-height: 150%;
	color: var(--primary-color);
	margin: 0;
}

/* ======== SECTION SERVICES ======== */

#whyChooseUs h2 {
	margin-bottom: 6rem;
}

#whyChooseUs .cards {
	display: flex;
	flex-flow: column;
	gap: 3.2rem
}

#whyChooseUs .card {
	display: flex;
	gap: 1.6rem;
	flex-flow: column;
	text-align: left;
	border: 1px solid var(--brand-ligth);
	background-color: white;
	padding: 2.4rem;
	border-radius: 0.6rem;
}

#whyChooseUs .card p {
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 150%;
	color: var(--paragraph);
}

/* ======== SECTION ABOUT ======== */

#vision {
	background-color: var(--brand-beige);
}

#vision h4 {
	text-align: left;
}

#vision h2 {
	text-align: left;
	margin-bottom: 2.4rem;
}

#vision p {
	font-size: 1.6rem;
	line-height: 150%;
	font-weight: 400;
	color: var(--paragraph);
	margin-bottom: 6rem;
	text-align: left;
}

#vision img {
	display: block;
	margin-inline: auto;
}

/* ======== SECTION CONTACT ======== */

#contact{
	background-color: var(--brand-beige);
}

#contact h2 {
	margin-bottom: 3.2rem;
}

#contact p {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--paragraph);
	line-height: 150%;
}

#contact .content {
	margin-bottom: 3.2rem;
	display: flex;
	gap: 1.6rem;
	flex-direction: column;
}

#contact button {
	background-color: var(--primary-color);
	border: none;
	border-radius: 4rem;
	margin-bottom: 6rem;
	padding: 1.6rem 3.2rem;
	color: white;
	text-transform: uppercase;
	font-size: 1.4rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	transition: background 200ms;
}

#contact button:hover {
	background-color: var(--brand-green-hover);
}

/* ============== FOOTER ================ */

footer {
	background-color: var(--primary-color);
	padding-block: 6rem;
}

footer svg.logo {
	margin-bottom: 2.4rem;
	display: block;
}

footer ul {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin-bottom: 3.2rem;
}

footer li {
	text-align: left;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 2.1rem;
	color: var(--brand-beige);
}

footer .social-links-footer {
	display: flex;
	flex-direction: row;
	gap: 4rem;
}

/* ============== BACK TO TOP BUTTON ================ */

#back-top-button {
	position: fixed;
	bottom: 1rem;
	right: 2.5rem;

	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition: 200ms;
}

#back-top-button.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ============== RESPONSIVO DESKTOP ================ */

@media (min-width: 1024px) {

	/* ============== GERAL ================ */
	body {
		overflow: auto;
	}

	.wrapper {
		width: min(112rem, 100%);
		margin-inline: auto;
		padding-inline: 5rem;
		display: grid;
	}

	section {
		padding-block: 16rem;
	}

	section h2 {
		font-size: 4rem;
		line-height: 5.2rem;
	}

	.col-a {
		grid-area: A;
	}

	.col-b {
		grid-area: B
	}

	/* ============== NAVIGATION ================ */
	/* reset */
	nav#navigation .wrapper * {
		margin: 0;
		padding: 0;
		visibility: initial;
		position: initial;
		display: initial;
		opacity: initial;
		font-size: initial;
		flex-direction: initial;
		color: initial;
		background-color: initial;
		transform: initial;
		filter: initial;
	}

	nav#navigation .close-menu,
	nav#navigation .open-menu,
	nav#navigation .social-links {
		display: none;
	}

	nav#navigation .menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 60%;
	}

	nav#navigation .menu ul:nth-child(1) {
		display: flex;
		gap: 3.2rem;
	}

	nav#navigation .menu ul li a {
		line-height: 2.1rem;
		color: var(--primary-color);
		opacity: 0.7;
	}

	nav#navigation .menu button {
		display: flex;
		justify-content: center;
		font-size: 1.4rem;
		line-height: 1.8rem;
		padding: 1rem 2.4rem;
		border: 1px solid var(--primary-color);
		border-radius: 4rem;
		color: var(--primary-color);
		text-transform: uppercase;
		font-weight: 700;
		transition: background 200ms;

	}

	nav#navigation .menu button:hover {
		background-color: var(--primary-color);
		color: white;
	}

	nav#navigation .menu li a:hover {
		font-weight: 700;
		opacity: 1;
	}

	nav#navigation .menu li a.active {
		font-weight: 700;
		opacity: 1;
	}

	nav#navigation.scroll .menu li a {
		color: var(--bg-light);
		transition: opacity 400ms;
	}

	nav#navigation.scroll .menu button {
		border: white 1px solid;
		color: white;
	}

	nav#navigation .menu li a::after {
		content: '';
		width: 0%;
		height: 2px;
		background-color: var(--primary-color);
		position: relative;
		bottom: -2rem;
		left: -0.8rem;
		display: block;
		transition: width 200ms;
	}

	nav#navigation.scroll .menu li a::after {
		background-color: white;
	}

	nav#navigation .menu li a:hover::after {
		padding-inline: 0.8rem;
		width: 100%;
	}

	nav#navigation.scroll .menu button:hover {
		background-color: var(--primary-color);
	}

	/* Logo */
	#navigation .logo {
		line-height: 1;
		text-decoration: none;
	}

	#navigation .logo img {
		max-height: 36px;
		margin-right: 8px;
	}

	#navigation .logo h1 {
		font-size: 32px;
		margin: 0;
		font-weight: 700;
		color: black;
	}

	#navigation .logo.scroll h1 {
		color: white;
	}

	#navigation .logo span {
		font-size: 32px;
	}

	#navigation .logo .black-logo-dot{
		color: black;
	}

	#navigation .logo .yellow-logo-dot{
		color: yellow;
	}

	/* ============== HOME ================ */

	#home::before {
		height: calc(95% - var(--nav-heigth))
	}

	#home {
		padding-top: var(--nav-heigth);
	}

	#home .wrapper {
		grid-template-columns: 60.5rem 1fr;
		grid-template-areas: 'A B' 'C C';
	}

	#home .col-a {
		text-align: left;
		align-self: center;
	}

	#home h1 {
		font-size: 5.2rem;
	}

	#home .content p {
		font-size: 1.8rem;
	}


	#home .stats {
		grid-area: C;
		flex-direction: row;
		padding: 6rem;
		gap: 0;
	}

	#home .stats .stat+.stat {
		border-left: 1px solid var(--primary-color);
	}

	#home .stats .stat {
		flex: 1
	}

	#home button {
		margin: 0
	}

	#home img {
		width: 42rem;
	}

	/* ============== SERVICES ================ */

	#whyChooseUs h2 {
		width: 47rem;
		margin-inline: auto;
	}

	#whyChooseUs .cards {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4rem
	}

	#whyChooseUs .card {
		width: 35%;
		flex-grow: 1;
	}

	/* ============== ABOUT ================ */

	#vision .wrapper {
		grid-template-columns: 48rem 1fr;
		grid-template-areas: 'B A';
		gap: 6.7rem;
	}

	#vision .col-a {
		align-self: center;
	}

	#vision .content p {
		margin-bottom: 0;
	}

	/* ============== CONTACT ================ */

	#contact .wrapper {
		grid-template-columns: 1fr 57.5rem;
		grid-template-areas: 'A B';
		gap: 14.1rem;
	}

	#contact .col-a {
		align-self: center;
	}

	#contact button {
		margin-bottom: 0;
	}

	#contact .content p {
		margin-bottom: 0;
	}

	/* ============== FOOTER ================ */

	footer {
		padding-block: 8rem;
	}

	footer .wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	footer .social-links-footer {
		margin-bottom: 0;
	}

	footer ul {
		margin-bottom: 0;
	}

}

/* Logo */
.logo {
	line-height: 1;
	text-decoration: none;
}

.logo img {
	max-height: 36px;
	margin-right: 8px;
}

.logo h1 {
	font-size: 32px;
	margin: 0;
	font-weight: 700;
	color: white;
}

.logo span {
	color: yellow;
	font-size: 32px;
}



/* Contact form */
.php-email-form {
	height: 100%;
}

.php-email-form input[type=text],
.php-email-form input[type=email],
.php-email-form textarea {
	font-size: 14px;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 0;
	color: var(--default-color);
	background-color: color-mix(in srgb, var(--background-color), transparent 50%);
	border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.php-email-form input[type=text]:focus,
.php-email-form input[type=email]:focus,
.php-email-form textarea:focus {
	border-color: var(--accent-color);
}

.php-email-form input[type=text]::placeholder,
.php-email-form input[type=email]::placeholder,
.php-email-form textarea::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.php-email-form button[type=submit] {
	color: var(--contrast-color);
	background: var(--accent-color);
	border: 0;
	padding: 10px 30px;
	transition: 0.4s;
	border-radius: 4px;
}

.php-email-form button[type=submit]:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
}