// out: ../style-css/inova-smoove.css, compress: true, sourceMap: true
@import "./mixins";

#scontainer-105 {
	padding-top: 75px;
	padding-bottom: 75px;

	.illustration_product_slider {
		.swiper-wrapper {
			.swiper-slide {
				text-align: center;
			}
		}

		.swiper-navigation {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: center;
			gap: 60px;

			.swiper-button-disabled {
				opacity: 0.6;
			}

			.swiper-slide-next {
				position: relative;
				cursor: pointer;
				transition: opacity 250ms ease-in;

				img {
					width: 50px;
					height: 50px;
				}
			}

			.swiper-slide-prev {
				position: relative;
				cursor: pointer;
				transition: opacity 250ms ease-in;

				img {
					width: 50px;
					height: 50px;
				}
			}
		}
	}

	.product_info_text {
		@include respond-below(sm) {
			text-align: center;
		}

		ul {
			border: 1px solid #f4f4f4;
			padding: 15px 20px;
			list-style: none;

			li {
				margin-bottom: 25px;
			}

			h4 {
				font-weight: 700;
				font-size: 16px;
				line-height: 26px;
				letter-spacing: 0.05em;
				margin-bottom: 0;
			}

			p {
				font-weight: 300;
				font-size: 16px;
				line-height: 26px;
				letter-spacing: 0.05em;
				margin-bottom: 0;
			}
			@include respond-below(xs) {
				h4,
				p {
					font-size: 14px;
				}
			}
		}
	}

	h3 {
		font-weight: 700;
		font-size: 35px;
		line-height: 37px;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		margin-bottom: 25px;

		@include respond-below(sm) {
			font-size: 28px;
		}
		@include respond-below(xs) {
			font-size: 24px;
		}
	}
}

.box-02 {
	.scontainer-content {
		.row {
			.col-12 {
				display: flex;
				flex-direction: row;

				.popup-img {
					width: calc(50% - 50px);
				}

				.popup-data {
					width: calc(50% + 50px);
				}

				.popup-img {
					position: relative;
					min-height: 789px;

					&-wrapper {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						z-index: -1;

						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							width: 290px;
							background: rgba(244, 244, 244, 0.9);
							mix-blend-mode: normal;
						}

						img {
							width: auto !important;
							max-width: fit-content !important;
						}
					}
				}

				.popup-data {
					padding: 50px 0;

					.popup-schems {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						flex-wrap: wrap;
						column-gap: 15px;
						margin-bottom: 35px;
						list-style-type: none;

						li {
							text-align: center;

							img {
								margin-bottom: 15px;
								width: 100%;
								max-width: fit-content;
								object-fit: cover;
							}

							p {
								font-weight: 300;
								font-size: 13px;
								line-height: 26px;
								letter-spacing: 0.05em;
								margin-bottom: 0;
							}
						}
					}

					.popup-dots {
						position: absolute;
						top: auto;
						left: 0;
						width: calc(100% - 15px);
						height: 100%;
						-webkit-user-select: none;
						-moz-user-select: none;
						user-select: none;
						list-style-type: none;

						li {
							position: static;
							text-align: right;
							right: 0;
							padding-top: 10px;
							padding-right: 40px;
							border-right: 1px solid #000;

							&:first-child {
								padding-top: 40px;
							}

							&:first-child::before {
								content: "";
								position: absolute;
								top: 1px;
								left: 0;
								width: 19px;
								height: 19px;
								background: rgba(255, 255, 255, 0.3);
								border: 1px solid #000;
								border-radius: 100%;
								transform: translateY(-50%);
							}

							&::after {
								content: "";
								position: absolute;
								top: 0;
								right: 0;
								width: calc(100% - 19px);
								height: 1px;
								background: #000;
							}

							p {
								font-weight: 300;
								font-size: 16px;
								line-height: 20px;
								text-align: right;
								letter-spacing: 0.05em;
								width: 100%;
								max-width: 470px;
								margin-left: auto;

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

								strong {
									font-weight: 700;
								}
							}
						}
					}
				}

				@include respond-below(md) {
					flex-direction: column;

					.popup-img {
						width: 100%;
					}

					.popup-img {
						min-height: unset;

						&-wrapper {
							position: relative;

							&::before {
								width: 130px;
							}

							img {
								width: 100% !important;
							}
						}
					}

					.popup-data {
						width: 100%;

						.popup-dots {
							position: relative;
							padding-left: 0;
							width: 100%;

							li {
								position: relative;
								padding-top: 20px;
								padding-right: 10px;

								&::before {
									display: none;
								}

								&:nth-child(1) {
									left: 0 !important;
								}

								p {
									max-width: unset;
								}
							}
						}

						.popup-schems {
							justify-content: center;
						}
					}
				}
				@include respond-below(xs) {
					.popup-data {
						.popup-dots {
							li {
								p {
									font-size: 14px;
								}
							}
						}
					}
				}
			}

			&-1 {
				.col-12 {
					.popup-data {
						.popup-dots {
							li {
								&:nth-child(1) {
									left: 290px;
								}
							}
						}
					}
				}
			}

			&-2 {
				.col-12 {
					.popup-data {
						.popup-dots {
							li {
								&:nth-child(1) {
									left: 270px;
								}
							}
						}
					}
				}
			}

			&-3 {
				.col-12 {
					.popup-data {
						.popup-dots {
							li {
								&:nth-child(1) {
									left: 480px;
									padding-bottom: 40px;
									padding-top: 0;

									&::before {
										top: auto;
										bottom: -18px;
									}

									&::after {
										top: auto;
										bottom: 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-03 {
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.05em;
	padding: 50px;
	max-width: 900px;
	margin: auto;
	background: #f4f4f4;
	margin-top: 50px;
	margin-bottom: 50px;

	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}

	@include respond-below(sm) {
		padding: 30px;

		p {
			font-size: 14px;
		}
	}
}

.box-04 {
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.05em;
	padding-bottom: 75px;
	max-width: 900px;
	margin: auto;

	strong {
		font-size: 20px;
		font-weight: 400;
	}

	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}

	div[class^="col-"] {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	@include respond-below(sm) {
		div[class^="col-"] {
			text-align: center;
			align-items: center;
		}
		p {
			font-size: 14px;
		}
	}
}

.box-05 {
	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}
	@include respond-below(sm) {
		p {
			font-size: 14px;
		}
	}
}

.box-06 {
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.05em;
	padding-bottom: 75px;
	max-width: 1100px;
	margin: 50px auto;

	strong {
		font-size: 20px;
		font-weight: 400;
	}

	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}

	div[class^="col-"] {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		align-items: center;

		&:last-child {
			background: #f4f4f4;
			padding: 50px;

			a {
				display: inline-block;
				padding: 10px;
				border: 1px solid #000;
				color: #000;
				font-weight: 600;
				margin: 0 5px;

				&:hover {
					background: #000;
					color: #fff;
				}
			}
		}
	}

	@include respond-below(lg) {
		margin-bottom: 0;
	}
}

.box-07 {
	margin-bottom: 75px;

	h2 {
		font-weight: 400;
		font-size: 28px;
		line-height: 1.25;
		letter-spacing: 0.05em;
		margin-bottom: 15px;

		strong {
			text-transform: uppercase;
			font-size: 32px;
		}
	}

	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}

	@include respond-below(sm) {
		h2 {
			font-size: 24px;
			strong {
				font-size: 28px;
			}
		}
		p {
			font-size: 14px;
		}
	}
	@include respond-below(xs) {
		h2 {
			font-size: 20px;
			strong {
				font-size: 24px;
			}
		}
	}
}