@import '_mixins';
@import '_variables';

.banner-mini {
	margin-bottom: 120px;
}

#scontainer-61 {
	.product-preview {
		.row {
			&:nth-child(1) {
				margin-bottom: 60px;
			}
			&:nth-child(2) {
				align-items: center;
			}
		}
		p {
			font-size: 14px;
			font-weight: 300;
			text-align: center;
		}

		table {
			width: 100%;
			margin-bottom: 15px;

			thead {
				tr {
					th {
						font-family: Alegreya Sans;
						font-size: 16px;
						font-style: normal;
						font-weight: 300;
						line-height: 24px;
						letter-spacing: 0em;
						text-align: center;
						color: #fff;
						background: #000;
						text-transform: uppercase;
						padding: 8px 15px;

						&:empty {
							visibility: hidden;
						}

						&:blank {
							visibility: hidden;
						}

						&:first-child {
							visibility: hidden;
						}

						@include respond-below(xs) {
							padding: 8px 5px;
						}
					}
				}
			}

			tbody {
				border: 1px solid #000;
				padding-left: 20px;

				tr {
					&:first-child {
						td {
							padding-top: 100px;

							@include respond-between(sm, md) {
								padding-top: 50px;
							}

							@include respond-below(sm) {
								padding-top: 50px;
							}
						}
					}

					&:last-child {
						td {
							padding-bottom: 100px;

							@include respond-between(sm, md) {
								padding-bottom: 50px;
							}

							@include respond-below(sm) {
								padding-bottom: 50px;
							}
						}
					}

					td {
						padding: 10px 20px;
						font-size: 14px;
						font-weight: 500;

						@include respond-below(xs) {
							padding: 10px 10px;
						}

						text-align: center;

						&:first-child {
							text-align: left;
						}

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

.box-03 {
	margin-bottom: 70px;

	.c-row {
		display: flex;
		flex-direction: row;
		align-items: center;

		@include respond-below(md) {
			flex-direction: column-reverse;
			row-gap: 20px;
		}

		.c-col-1 {
			flex-basis: 50%;

			@include respond-below(md) {
				max-width: 527px;
			}

			h2 {
				color: #000;
				font-size: 30px;
				font-family: 'URW Form', sans-serif;
				font-weight: 400;
				letter-spacing: 2px;
				text-transform: uppercase;
				padding: 35px 30px 25px;
				margin: 0;
				background: #f4f4f4;

				@include respond-below(lg) {
					font-size: 26px;
					padding: 25px 20px 17px;
				}
			}

			ul {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 20px 30px;
				padding: 30px 0 0 30px;

				@include respond-below(lg) {
					padding: 20px 0 0 20px;
					gap: 20px 30px;
				}

				@include respond-below(md) {
					justify-content: center;
				}

				li {
					display: flex;
					flex-direction: column;
					row-gap: 4px;

					img {
						width: 100%;
						max-width: 130px;

						@include respond-between(md, lg) {
							max-width: 110px;
						}
					}
					p {
						color: #000;
						font-size: 15px;
						font-family: 'URW Form', sans-serif;
						font-weight: 400;
						margin-bottom: 0;
						text-transform: uppercase;
						letter-spacing: 1px;
					}
				}
			}
		}
		.c-col-2 {
			flex-basis: 50%;

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