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

.container {
	.body {
		text-align: center;

		& > h3:nth-child(2) {
			white-space: break-spaces;
			width: 75%;
			margin: 0 auto;
			font-size: 24px;

			//@media (max-width: 1200px) {
			//  font-size: 22px;
			//}

			@media (max-width: 900px) {
				margin-left: 120px;
				font-size: 18px;
			}
		}

		.submitButton {
			background-color: var(--primary-color);
			padding: 15px 69px;
			text-transform: capitalize;
			font-weight: 700;
			font-size: 16px;

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

			& > h3 {
				font-size: 1.125em !important;
			}

			&:hover {
				background-color: var(--primary-color-dark) !important;
			}
		}
	}
}

.containerCard {
	margin-top: 46px;
	position: relative;
	margin-left: 50px;

	.submitButton {
		background-color: var(--primary-color);
		padding: 0;
		border-radius: 10px;

		a {
			padding: 15px 69px;
			text-decoration: none;
			color: white;
			font-size: 1.125em;
			font-weight: 800;
		}

		&:hover {
			background-color: var(--primary-color-dark) !important;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		//padding-bottom: 150px;
		text-align: start;

		.card {
			display: flex;
			justify-content: center;

			@media (max-width: 1200px) {
				flex-wrap: wrap;
			}

			@media (max-width: 900px) {
				flex-direction: column;
			}

			div {
				margin: 42px 27px;
				width: 271px;
				height: 300px;
				border-radius: 10px;

				@media (max-width: 900px) {
					margin: 15px auto;
				}
			}

			.cardContainer {
				cursor: pointer;
				position: relative;
				padding: 22px 42px 12px 23px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				box-shadow: 0 3px 13px 0 $dropShadow;
				transition: all 0.3s ease-in-out;

				&:hover {
					transform: scale(1.05);
					border: 2px solid var(--primary-color);
				}

				label {
					font-size: 24px;
					height: 80px;
					width: 203px;
					font-weight: 600;
					color: var(--primary-color);
					max-width: 200px;
				}

				p {
					color: $dark;
					font-size: 0.875em;
				}

				input {
					appearance: none;
				}

				h4 {
					margin: auto 0 24px;
					max-width: 200px;
				}

				p {
					color: $dark;
					font-size: 0.875em;
				}

				.radioButtonPrimary,
				.radioButtonSecondary {
					transform: scale(1.3);
					position: absolute;
					top: 22px;
					right: 17px;
				}

				.radioButtonPrimary {
					path {
						fill: var(--primary-color);
					}
				}

				.radioButtonSecondary {
					path {
						fill: transparentize($grey-button, 0.7);
					}
				}
			}
		}
	}
}

.submitButtonLink {
	text-decoration: none;
}