.client-page {
	.banner {
		height: 300px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline: 0;

		img {
			position: absolute;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		.banner-text {
			position: absolute;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 35px;
			text-align: center;
		}
	}

	.nav-menu {
		display: flex;
		flex-direction: column;
		gap: 10px;

		ul {
			padding: 0;
			margin: 0;

			li {
				margin-bottom: 10px;
				border-left: 5px solid transparent;
				padding-left: 5px;

				a {
					color: #000;
					font-size: 18px;
					font-weight: 600;
					transition: all 0.2s ease-in-out;

					&:not(.current):hover {
						font-size: 19px;
					}

					&.current {
						font-weight: bold;
					}
				}

				&.current {
					border-left-color: var(--mainColor);
				}
			}
		}
	}

	.title {
		margin-block: 2rem;

		.page__title {
			font-size: 35px;
			font-weight: 600;
		}

		.page__content {
			margin-block: 1rem;
			max-width: 725px;
		}
	}

	.faqs {
		margin-bottom: 3rem;

		.faqs-title {
			font-size: 25px;
			margin-bottom: 10px;
			font-weight: 600;
		}

		.pergunta {
			margin-bottom: 1rem;
			max-width: 725px;

			.pergunta__toggle {
				padding: 1rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 14px;
				background-color: #d8e0e8;
				line-height: normal;
				color: var(--secTextColor);
				cursor: pointer;
				font-weight: 500;

				svg {
					fill: var(--secTextColor);
					width: 30px;
					transition: transform 0.5s ease;
					flex-shrink: 0;

					&.rotated {
						transform: rotate(-180deg);
					}
				}
			}

			.pergunta__content {
				padding: 1rem;
				color: var(--secTextColor);

				*:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

.contact {
	margin-bottom: 3rem;

	.contact-marketplace-text {
		max-width: 725px;
	}

	.contact-marketplace-button {
		background-color: white;
		color: var(--secTextColor);
		padding: 7px 17px;
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
		border-radius: 25px;
		margin-top: 10px;
		transition: all 0.3s ease-in-out;
		font-weight: 600;
		border: none;

		&:hover {
			background-color: var(--mainColor);
			color: var(--mainText);
		}

		svg {
			transition: transform 0.3s ease;

			.rotated {
				transform: rotate(-180deg);
			}
		}
	}

	.contact-form-container {
		display: none;
		align-items: center;
		justify-content: center;
		padding-inline: 0;
		margin-block: 1rem;

		.contact-form {
			width: 100%;

			.grid-item {
				margin-bottom: 1rem;
				display: flex;
				flex-direction: column;
				padding-inline: 10px;

				.left {
					float: left;
					width: 35%;
				}

				.right {
					float: right;
					width: 65%;
				}
			}

			label {
				font-weight: 600;
				letter-spacing: -0.13px;
				text-align: left;
				color: #000;
				margin-block: 10px;
			}

			input,
			textarea {
				border: solid 1px #e0e0e0;
				padding: 10px 20px;
				border-radius: 5px;
				letter-spacing: normal;
				text-align: left;
				color: var(--secTextColor);
				width: 100%;

				&:focus {
					border: solid 1px var(--mainColor);
				}
			}

			input.submit {
				margin-top: 1.5rem;
				background-color: var(--mainColor);
				color: var(--mainText);
				border: none;
				text-align: center;
				font-weight: 600;

				&:hover {
					filter: brightness(95%);
					cursor: pointer;
				}
			}

			select {
				border: solid 1px #e0e0e0;
				background-color: white;
				padding: 13px 20px;
				border-radius: 5px;
				letter-spacing: normal;
				text-align: left;
				color: #757575;

				&:focus {
					border: solid 1px var(--mainColor);
				}
			}

			option {
				font-family: var(--font), sans-serif !important;
			}

			input,
			select,
			textarea {
				&.shake {
					animation: shake 0.5s ease-in-out;
					border: 1px solid red;
				}
			}

			.message {
				height: 300px;
				padding: 8px;
				box-sizing: border-box;
				text-align: left;
				vertical-align: top;
			}

			.submit-agreement {
				font-size: 12px;
				display: flex;
				align-items: center;
				gap: 5px;
				padding-inline: 10px;
				margin-top: 10px;

				input[type='checkbox'] {
					width: auto;
				}

				label {
					display: inline;
					color: #000;
					margin: 0;
					width: max-content;
				}

				a {
					color: var(--secTextColor);
					text-decoration: underline !important;

					& a:hover {
						color: var(--mainColor);
					}
				}
			}

			.agreement-warning {
				color: red;
				font-size: 12px;
				padding: 5px;
				display: none;
				margin-left: 10px;
			}
		}
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-3px);
	}

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

	75% {
		transform: translateX(-3px);
	}
}

@media only screen and (max-width: 769px) {
	.client-page.contact-form-container .contact-form .grid-item.left {
		float: initial;
		width: 100%;
	}

	.client-page.contact-form-container .contact-form .grid-item.right {
		float: initial;
		width: 100%;
	}

	.client-page.contact-form-container .contact-form .message {
		height: 200px;
	}
}