@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

body {
	&.fixed {
		overflow: hidden;
	}
}
p {
	&:last-child {
		margin-bottom: 0;
	}
}
strong {
	font-weight: 700;
}

#AppHome {
	.box-title {
		color: #13293f;
		font-family: $font3;
		font-style: normal;
		font-weight: 400;
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 20px;

		strong {
			font-weight: 600;
		}
	}

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

		.tiles {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			row-gap: 15px;
			column-gap: 8px;

			.tile {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 18px;
				padding: 20px 50px 20px 20px;
				min-height: 120px;
				border-radius: 30px;
				background: $cWhite;
				border-radius: 30px;
				filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.15));
				flex: 1;
				transition: all 250ms ease-in-out;

				&:hover {
					background: #f1efed;
				}

				.tile-img {
				}
				.tile-text {
					h3 {
						color: $cBlack;
						font-family: $font3;
						font-style: normal;
						font-weight: 500;
						font-size: 20px;
						line-height: 1.25;
						margin: 9px;
					}
				}

				svg {
					position: absolute;
					top: 50%;
					right: 20px;
					transform: translateY(-50%);
				}
			}
		}
	}

	.box-2 {
		margin-bottom: 135px;

		&--wrapper {
			.box-title {
				margin-bottom: 0;
			}
			.swiper {
				.swiper-slide {
					&:hover {
						.slide-data {
							.slide-img {
								img {
									transform: scale(1.2);
								}
							}
						}
					}
					.slide-data {
						padding-top: 20px;

						.slide-img {
							text-align: center;
							margin-bottom: -30px;

							img {
								transition: all 250ms ease-in-out;
							}
						}
						.slide-name {
							color: #181c1d;
							font-family: $font3;
							font-style: normal;
							font-weight: 400;
							font-size: 20px;
							line-height: 1.5;
							text-align: center;
							text-transform: uppercase;
							margin-bottom: 25px;
						}
						.slide-colors {
							display: flex;
							flex-direction: row;
							width: 100%;
							max-width: 160px;
							margin: 0 auto;

							&.color-pvc {
								span {
									background-color: #d5d5d5;
									width: 100%;
								}
							}
							&.color-drewno {
								span {
									background: linear-gradient(90deg, #927b63 0%, #a89177 100%);
									width: 100%;
								}
							}
							&.color-drewno-alu {
								span {
									&:nth-child(1) {
										background: linear-gradient(
											90deg,
											#927b63 0%,
											#a89177 100%
										);
										width: 80%;
									}
									&:nth-child(2) {
										background: linear-gradient(
											90deg,
											#336997 0%,
											#3f576f 100%
										);
										width: 20%;
									}
								}
							}
							&.color-alu {
								span {
									background: linear-gradient(90deg, #336997 0%, #3f576f 100%);
									width: 100%;
								}
							}
							&.color-pvc-alu {
								span {
									&:nth-child(1) {
										background: #d5d5d5;
										width: 70%;
									}
									&:nth-child(2) {
										background: linear-gradient(
											90deg,
											#336997 0%,
											#3f576f 100%
										);
										width: 30%;
									}
								}
							}
							span {
								height: 8px;
							}
						}
					}
				}
			}
		}
	}

	.box-3 {
	}

	.box-4 {
	}

	.box-5 {
	}

	.box-6 {
	}

	.box-7 {
		&--wrapper {
			max-width: 1240px;
			margin: 0 auto;

			h3 {
				color: $cBlack;
				font-family: $font3;
				font-style: normal;
				font-weight: 400;
				font-size: 40px;
				line-height: 1.375;
				text-align: center;
				letter-spacing: -0.02em;
				margin-bottom: 40px;
			}

			.box-text {
				p {
					color: #1d1d1e;
					font-family: $font3;
					font-weight: 400;
					font-size: 18px;
					line-height: 1.5;
					text-align: center;

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

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

	.box-8 {
	}

	.box-9 {
	}
}