$cTurquoise: #19f3e1;

.text_menu_title_header {
	display: none;
}

#omnichannel {
	.box-head {
		display: flex;
		justify-content: center;

		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -50%);
		width: 100%;
		padding: 0 50px;

		h2 {
			color: #000;
			font-size: 40px;
			font-weight: 800;
			line-height: 1;
			font-family: 'Raleway', sans-serif;

			display: inline-block;
			padding: 20px 50px;
			background: $cTurquoise;
			text-align: center;
		}

		@media (max-width: 1200px) {
			h2 {
				font-size: 30px;
			}
		}
		@media (max-width: 979px) {
			h2 {
				font-size: 20px;
			}
		}
	}

	.box-1 {
		margin-bottom: 90px;

		@media (max-width: 978px) {
			margin-top: 50px;
		}

		.box-1--wrapper {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			h2 {
				color: #000;
				font-size: 54px;
				font-weight: 800;
				line-height: 1;
				font-family: 'Raleway', sans-serif;
				margin-bottom: 30px;
			}

			img {
				width: 100%;
				max-width: fit-content;

				&:not(.img-bg) {
					max-width: 150px;
				}
			}

			p {
				color: #000;
				font-size: 20px;
				font-weight: 400;
				line-height: 1.2;
				font-style: italic;
				font-family: 'Raleway', sans-serif;
				max-width: 600px;
				margin: 40px 0 0 0;
			}

			img.img-bg {
				position: absolute;
				top: 50%;
				right: 10%;
				transform: translateY(-50%);
			}

			@media (max-width: 1200px) {
				img.img-bg {
					max-width: 170px;
				}
			}
			@media (max-width: 978px) {
				h2 {
					font-size: 40px;
				}
			}
			@media (max-width: 700px) {
				img.img-bg {
					max-width: 100px;
				}
			}
			@media (max-width: 450px) {
				img.img-bg {
					display: none;
				}
			}
		}
	}
	.box-2 {
		margin-bottom: 140px;

		.box-2--wrapper {
			position: relative;
			border: 1px solid $cTurquoise;
			padding: 80px 90px 70px 90px;

			@media (max-width: 1200px) {
				padding: 70px 70px 60px 60px;
			}
			@media (max-width: 700px) {
				padding: 70px 30px 40px 30px;
			}

			.box-content {
				display: flex;
				flex-direction: row;
				column-gap: 80px;
				align-items: flex-end;

				@media (max-width: 1200px) {
					column-gap: 60px;
				}

				@media (max-width: 979px) {
					flex-direction: column;
					align-items: center;
					text-align: center;
					row-gap: 40px;
				}

				.c-col-1 {
					width: 230px;
					min-width: 230px;
					padding-bottom: 40px;

					img {
						width: 100%;
						max-width: fit-content;
					}

					@media (max-width: 1200px) {
						width: 160px;
						min-width: 160px;
					}
					@media (max-width: 979px) {
						padding-bottom: 0;
					}
				}
				.c-col-2 {
					h3 {
						color: #000;
						font-size: 30px;
						font-weight: 800;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;
						margin-bottom: 40px;
						text-align: center;

						margin-left: -100px;
						width: 740px;
					}
					p {
						color: #000;
						font-size: 18px;
						font-weight: 700;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;
					}
					ol {
						padding: 0 !important;
						margin: 0;
						list-style: none;

						li {
							color: #000;
							font-size: 18px;
							font-weight: 400;
							line-height: 1.7;
							font-family: 'Raleway', sans-serif;
						}
					}

					@media (max-width: 1200px) {
						h3 {
							margin-left: -80px;
							font-size: 26px;
							width: 640px;
						}

						ol {
							li {
								font-size: 16px;
							}
						}
					}

					@media (max-width: 979px) {
						h3 {
							margin-left: 0;
							width: 100%;
						}
					}
				}
			}
		}
	}
	.box-3 {
		margin-bottom: 140px;

		.box-3--wrapper {
			position: relative;
			border: 1px solid $cTurquoise;
			padding: 90px 90px 80px 90px;

			@media (max-width: 1200px) {
				padding: 70px 60px 50px 60px;
			}
			@media (max-width: 700px) {
				padding: 70px 30px 30px 30px;
			}

			.box-content {
				display: flex;
				flex-direction: row;
				column-gap: 80px;
				align-items: flex-start;

				@media (max-width: 1200px) {
					column-gap: 60px;
				}
				@media (max-width: 979px) {
					flex-direction: column;
					align-items: center;
					text-align: center;
					row-gap: 40px;
				}

				.c-col-1 {
					width: 230px;
					min-width: 230px;
					padding-top: 90px;

					img {
						width: 100%;
						max-width: fit-content;
					}

					@media (max-width: 1200px) {
						width: 160px;
						min-width: 160px;
					}
					@media (max-width: 979px) {
						padding-top: 0;
					}
				}
				.c-col-2 {
					h3 {
						color: #000;
						font-size: 30px;
						font-weight: 800;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;
						margin-bottom: 40px;
						text-align: center;

						margin-left: -100px;
						width: 740px;
					}
					p {
						color: #000;
						font-size: 18px;
						font-weight: 700;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;
					}
					ol {
						padding: 0 !important;
						margin: 0;
						list-style: none;

						li {
							color: #000;
							font-size: 18px;
							font-weight: 400;
							line-height: 1.7;
							font-family: 'Raleway', sans-serif;
						}
					}

					@media (max-width: 1200px) {
						h3 {
							margin-left: -70px;
							font-size: 26px;
							width: 620px;
						}

						ol {
							li {
								font-size: 16px;
							}
						}
					}
					@media (max-width: 979px) {
						h3 {
							margin-left: 0;
							width: 100%;
						}
					}
				}
			}
		}
	}
	.box-4 {
		margin-bottom: 100px;

		.box-4--wrapper {
			position: relative;
			border: 1px solid $cTurquoise;
			padding: 100px 90px 90px 90px;

			@media (max-width: 1200px) {
				padding: 70px 60px 60px 60px;
			}
			@media (max-width: 700px) {
				padding: 70px 30px 50px 30px;
			}

			.box-content {
				display: flex;
				flex-direction: row;
				column-gap: 80px;
				align-items: center;

				@media (max-width: 979px) {
					flex-direction: column;
					align-items: center;
					text-align: center;
					row-gap: 40px;
				}

				.c-col-1 {
					width: 230px;
					min-width: 230px;

					img {
						width: 100%;
						max-width: fit-content;
					}

					@media (max-width: 1200px) {
						width: 160px;
						min-width: 160px;
					}
				}
				.c-col-2 {
					text-align: center;

					h3 {
						color: #000;
						font-size: 29px;
						font-weight: 800;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;
						margin-bottom: 40px;
						text-align: center;

						width: 100%;
						max-width: 700px;
					}

					p {
						color: #000;
						font-size: 18px;
						font-weight: 700;
						line-height: 1.2;
						font-family: 'Raleway', sans-serif;

						max-width: 420px;
						text-align: center;
						margin: 0 auto 30px;
					}

					a {
						color: #000;
						font-size: 25px;
						font-weight: 500;
						line-height: 1;
						font-family: 'Raleway', sans-serif;

						display: inline-flex;
						align-items: center;
						gap: 10px;
						padding: 20px 40px;
						background: #eeeeee;
					}

					@media (max-width: 1200px) {
						h3 {
							font-size: 26px;
							max-width: 520px;
						}

						a {
							font-size: 20px;
						}
					}
				}
			}
		}
	}

	.box-5 {
		margin-bottom: 100px;

		.box-5--wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;

			h2 {
				color: #000;
				font-size: 44px;
				font-weight: 300;
				line-height: 1;
				font-family: 'Raleway', sans-serif;
				margin-bottom: 20px;
			}
			h3 {
				color: #000;
				font-size: 32px;
				font-weight: 900;
				line-height: 1;
				font-family: 'Raleway', sans-serif;
			}

			@media (max-width: 700px) {
				h2 {
					font-size: 30px;
				}
				h3 {
					font-size: 24px;
				}
			}
		}
	}
}