@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.container {
	&__header {
		display: flex;
		flex-direction: column;

		&__title {
			// width: 673px;
			width: 100%;
			margin: 0 auto;

			@media (max-width: 1200px) {
				white-space: break-spaces;
			}

			h4 {
				text-align: center;
				color: var(--primary-color);
				margin-bottom: 20px;
			}

			.container__header__title__paragraph1 {
				margin-bottom: 20px;
			}

			.container__header__title__paragraph1,
			.container__header__title__paragraph2 {
				padding: 5px;
				text-align: center;
			}
		}

		.accordion {
			box-shadow: none;
			border: 1px solid var(--primary-color);

			.subtitle {
				margin-top: 20px;
				font-weight: 800;
				// -webkit-text-stroke-width: thin;
			}

			.start {
				display: block;
				margin-top: 20px;
				color: var(--primary-color);
				text-decoration: none;
			}
		}

		&__body {
			width: 860px;
			padding-bottom: 20px;
			margin: 0 auto;
			position: relative;

			@media (max-width: 1200px) {
				width: 100%;
			}

			&__buttonContainer {
				text-align: end;
				padding: 25px 20px 45px;

				.buttonForAnotherFinancials {
					padding: 10px 20px;
					font-size: 16px;
					width: 300px;
					background-color: transparent;
					box-shadow: 0 3px 13px 0 $dropShadow;
					cursor: pointer;
					border-radius: 10px;
					color: var(--primary-color);
					border-color: var(--primary-color);
					transition: all 0.3s ease-in-out;

					&:hover {
						transform: scale(1.05);
					}
				}
			}
		}
	}
}

.footerContainer {
	width: 700px;
	width: 100%;
	margin: 0 auto;
	text-align: center;

	@media (max-width: 1000px) {
		width: auto;
		white-space: break-spaces;
		margin-left: 150px;
	}

	p {
		margin-top: 70px;
		margin-bottom: 40px;
	}

	&__buttonContainer {
		text-align: center;

		@media (max-width: 1000px) {
			width: auto;
		}

		.buttonBusinessValue {
			padding: 15px 70px;
			border-radius: 10px;
			border: none;
			background-color: var(--primary-color);
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;

			a {
				text-decoration: none;
				color: white;
			}

			&:hover {
				transform: translateY(-5px);
			}

			&:active {
				transform: translateY(0);
			}
		}
	}
}

@include errorMessagePopup;