cdnPRO/sklep-gardensteel-pl/styles/custom.scss

.shop_contact,
#shop_infopage16 {
	.box-1 {
		.box-wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr;

			@media (max-width: 979px) {
				grid-template-columns: 1fr;
			}

			.col-left {
			}

			.col-right {
				.tile-1 {
					width: 100%;
					background: #f9f9f9;

					@media (max-width: 979px) {
						width: 100%;
						margin-left: 0%;
					}

					.tile-data-top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30px 20px;
						column-gap: 30px;

						@media (max-width: 550px) {
							flex-direction: column;
							row-gap: 30px;
						}

						img {
							width: 100%;
							max-width: 170px;
						}

						ul {
							flex: 1;
							list-style: none;
							padding: 0;
							margin: 0;

							display: flex;
							flex-direction: column;
							gap: 10px;
							justify-content: center;

							li {
								display: flex;
								align-items: center;
								column-gap: 10px;

								color: #477302;
								font-size: 16px;

								img {
									width: 100%;
									max-width: 16px;
									max-height: 16px;
									filter: invert(36%) sepia(34%) saturate(1574%)
										hue-rotate(45deg) brightness(94%) contrast(98%);
								}
							}
						}
					}

					.tile-data-bottom {
						a {
							display: flex;
							align-items: center;
							justify-content: center;
							color: white;
							padding-bottom: 3px;

							padding: 16px 0;
							font-size: 16px;
							background: #72963e;
						}
					}
				}

				.tile-2 {
					padding: 30px;

					h3 {
						position: relative;
						color: #477302;
						font-size: 16px;
						font-weight: 500;
						margin-top: 0;
						margin-bottom: 20px;
						padding-bottom: 5px;
						width: fit-content;

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							height: 1px;
							width: calc(100% + 30px);
							background: #72963e;
						}
					}

					p {
						color: #477302;
						font-size: 24px;
						margin: 1em 0 15px;
					}

					ul {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 30px;
						list-style: none;
						padding: 0;
						margin: 0;

						li {
							color: #477302;
							display: flex;
							align-items: center;
							gap: 10px;
							min-width: 132px;

							img {
								width: 16px;
								filter: invert(36%) sepia(34%) saturate(1574%) hue-rotate(45deg)
									brightness(94%) contrast(98%);
							}

							a {
								color: #477302;
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}

	.box-2 {
		padding: 20px;
		background: #72963e;

		ul {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 30px;

			list-style: none;
			padding: 0;
			margin: 0;

			li {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;

				img {
					height: 16px;
					width: 16px;

					filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(97deg)
						brightness(103%) contrast(101%);
				}

				a {
					color: #fff;
					font-size: 16px;
				}
			}
		}
	}

	.box-03 {
		padding: 20px 0;
		background: #f9f9f9;

		#box_contact {
			.boxhead {
				border: none;
				margin-bottom: 40px;

				h3 {
					position: relative;
					color: #477302;
					font-size: 16px;
					font-weight: 500;
					margin-top: 0;
					margin-left: auto;
					margin-right: auto;
					padding-bottom: 5px;
					width: fit-content;

					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 1px;
						background: #72963e;
					}
				}
			}

			.innerbox {
				padding: 0 20px;

				.formprotect {
					width: 100%;
					max-width: 700px;
					margin: 0 auto;

					input[type='text'],
					input[type='email'],
					textarea {
						border: none;
						margin-bottom: 10px;
						font-family: 'Oswald', sans-serif;

						&::placeholder {
							color: #72963e;
						}
					}

					textarea {
						resize: none;
						min-height: 140px;
					}
				}

				.required-text {
					color: #72963e;
					font-size: 14px;
					margin-top: 10px;
				}

				.bottombuttons {
					align-items: center;
					justify-content: center;

					.btn.send {
						color: #fff;
						font-size: 14px;
						background: #72963e;
						border: none;
						padding: 8px 30px;

						&:hover {
							background: #477302;
						}
					}
				}
			}
		}
	}

	.box-04 {
		height: 585px;

		.box-4-wrapper {
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.box-bg {
				// position: absolute;
				// inset: 0;
				img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
					min-width: 100%;
					min-height: 100%;
					width: auto;
					z-index: 1;
					overflow: hidden;
					object-fit: cover;
				}
			}

			.box-data {
				position: relative;
				z-index: 2;

				h2 {
					position: relative;
					color: #fff;
					font-size: 26px;
					text-align: center;
					margin: 0 auto;
					width: fit-content;

					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background: #fff;
					}
				}

				p {
					color: #fff;
					font-size: 24px;
					text-align: center;
					width: 100%;
					max-width: 500px;
					line-height: 1.3;
					margin-bottom: 70px;
					margin-top: 20px;
				}

				.mini-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: fit-content;
					margin: 0 auto;
					padding: 20px 60px;
					gap: 20px;
					background: rgba(53, 77, 15, 0.667);

					a {
						color: #fff;
						font-size: 16px;

						img {
							height: 16px;
							width: 16px;

							filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(97deg)
								brightness(103%) contrast(101%);
						}
					}
				}
			}
		}
	}
}

nav li {
	margin-left: 1em;
	margin-right: 1em;
}