:root {
	--dark: #090d3f;
	--primary: #97a0fd;
	--success: #22c55e;
	--success_rgb: 34, 197, 94;
	--danger: #dc2626;
	--danger_rgb: 220, 38, 38;
}

/* RESET CSS */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* GLOBAL CLASS */
.no_pointer {
	pointer-events: none;
	user-select: none;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Geist", sans-serif;
	background-color: var(--dark);
	color: white;

	.body_content {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;

		.header {
			position: relative;
			padding: 70px 30px;

			.main_content {
				max-width: 1000px;
				margin: 0 auto;
				display: flex;
				align-content: center;
				justify-content: center;

				.main_logo {
					.logo {
						display: block;
					}
				}
			}
		}

		.main {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.main_content {
				padding: 0 30px 50px;

				.wrap_content {
					max-width: 1000px;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 100px;

					.claim_content {
						position: relative;
						display: grid;
						gap: 30px;

						.main_icon {
							.icon {
								display: block;
							}
						}

						.title {
							font-size: 48px;
							font-weight: 700;
							line-height: 1.3;
							text-wrap: balance;
						}

						.description {
							font-size: 20px;
							line-height: 1.3;
							opacity: 0.7;
							text-wrap: balance;
						}
					}

					.form_content {
						position: relative;
						flex: none;
						width: 400px;
						color: var(--dark);

						.icon_discount {
							position: absolute;
							top: 0;
							right: 0;
							width: 70px;
							height: 70px;
							rotate: -15deg;
							transform: translate(30%, -30%);
							z-index: 1;
							filter: drop-shadow(0px 8px 10px rgba(9, 13, 63, 0.1));
						}

						.bg_form {
							position: absolute;
							top: 50%;
							right: 50%;
							transform: translate(50%, -50%);
							height: 1120px;
							width: auto;
							object-fit: contain;
							opacity: 0.1;
						}

						.icon_arrow {
							position: absolute;
							bottom: 0;
							left: 0;
							z-index: 1;
							transform: translate(-40%, 40%);
						}

						.main_form {
							position: relative;

							.wrap_form {
								width: 100% !important;
								background: white;
								border-radius: 20px;

								.form {
									margin: unset !important;
									padding: 32px;
									box-sizing: content-box;

									.form_fields {
										position: relative;

										.title {
											font-size: 18px !important;
											font-weight: 700;
											line-height: 1.3 !important;
											margin: 0 !important;
										}

										.indicates-required {
											padding: 15px 0 !important;
											margin-right: 0 !important;
											font-size: 12px;
											font-weight: 500;

											.asterisk {
												line-height: 1;
											}
										}

										.mc-field-group {
											padding: 0 0 20px 0 !important;
											width: 100% !important;
										}

										#mce-responses {
											display: block;
											padding: unset !important;
											float: unset !important;
											width: 100% !important;
											top: 0 !important;
											clear: unset !important;
											margin: unset !important;

											#mce-success-response {
												float: unset !important;
												width: unset !important;
												top: 0 !important;
												clear: unset !important;
												padding: 16px !important;
												margin: 0 0 20px 0 !important;
												display: block;
												font-size: 14px !important;
												font-weight: 600 !important;
												text-align: center;
												color: var(--success);
												background: rgba(var(--success_rgb), 0.1);
												border-radius: 10px;
											}

											#mce-error-response {
												float: unset !important;
												width: unset !important;
												top: 0 !important;
												clear: unset !important;
												padding: 16px !important;
												margin: 0 0 20px 0 !important;
												display: block;
												font-size: 14px !important;
												font-weight: 600 !important;
												text-align: center;
												color: var(--danger);
												background: rgba(var(--danger_rgb), 0.1);
												border-radius: 10px;
											}
										}

										.mce_inline_error:not(input) {
											margin: 0 !important;
											font-size: 12px !important;
											position: absolute;
											right: 0;
										}

										label {
											font-size: 14px;
											font-weight: 600;
											margin-bottom: 8px !important;
											line-height: 20px;
										}

										input:not([type="submit"]) {
											border-radius: 8px !important;
											height: 18px !important;
											padding: 8px 12px !important;
											font-size: 14px;
											width: unset !important;
											text-indent: 0 !important;

											&.mce_inline_error {
												border: 1px solid var(--danger) !important;
											}

											&:focus-visible {
												border: 1px solid var(--primary) !important;
											}
										}
									}

									input:is([type="submit"]) {
										margin: unset !important;
										border-radius: 40px !important;
										border: unset !important;
										color: unset !important;
									}

									.btn {
										cursor: pointer;
										background: var(--primary);
										color: var(--dark);
										font-size: 14px;
										font-weight: 600;
										height: 40px;
										display: inline-flex;
										align-items: center;
										padding: 10px 32px;
										width: fit-content;
										border: unset;
										border-radius: 40px;

										&:hover {
											color: rgba(var(--dark), 0.8);
										}

										&:active {
											color: rgba(var(--dark), 0.4);
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.footer {
			position: relative;

			.separate {
				display: block;
				width: 1px;
				height: 20px;
				background-color: white;
				opacity: 0.2;
			}

			.main_footer {
				padding: 20px 30px;

				.wrap_footer {
					max-width: 1000px;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					gap: 20px;

					.main_left {
						display: flex;
						align-items: center;
						gap: 16px;

						.main_logo {
							opacity: 0.4;

							.logo {
								display: block;
							}
						}

						.copy {
							opacity: 0.4;
							font-size: 12px;
							line-height: 1.8;
							text-wrap: balance;
						}
					}

					.main_right {
						.main_social {
							display: flex;
							align-items: center;
							gap: 5px;

							.item_social {
								opacity: 0.4;
								height: 30px;
								width: 30px;
								display: flex;
								align-items: center;
								justify-content: center;
								transition: opacity 200ms ease-in-out;

								&:hover {
									opacity: 0.2;
								}
							}
						}
					}
				}
			}
		}

		/* MEDIA • max 980px */
		@media (max-width: 980px) {
			.header {
				padding: 44px 30px 60px 30px;
			}

			.main {
				.main_content {
					.wrap_content {
						flex-direction: column;
						max-width: 480px;

						.claim_content {
							text-align: center;

							.main_icon {
								.icon {
									margin: auto;
								}
							}

							.title {
								font-size: 40px;
							}
						}
					}
				}
			}

			.footer {
				.main_footer {
					.wrap_footer {
						flex-direction: column;
						max-width: 360px;
						text-align: center;

						.main_left {
							flex-direction: column;

							.separate {
								width: 100%;
								height: 1px;
							}
						}

						.main_right {
							.main_social {
								justify-content: center;
							}
						}
					}
				}
			}
		}

		/* MEDIA • max 580px */
		@media (max-width: 580px) {
			.header {
				padding: 36px 30px 48px 30px;
			}

			.main {
				.main_content {
					.wrap_content {
						.claim_content {
							gap: 20px;

							.title {
								font-size: 32px;
							}

							.description {
								font-size: 16px;
							}
						}

						.form_content {
							width: 100%;
						}
					}
				}
			}
		}
	}
}