vidok.com/layout/style-scss/promocja-zimowa.scss

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

$font1: 'Open Sans', sans-serif;

.footer_top_box {
	display: none !important;
}

.c-container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;

	@media (min-width: 1560px) {
		max-width: 1560px;
	}
	@media (min-width: 1200px) and (max-width: 1559.98px) {
		max-width: 1140px;
	}
	@media (min-width: 992px) and (max-width: 1199.98px) {
		max-width: 960px;
	}
	@media (min-width: 768px) and (max-width: 991.98px) {
		max-width: 720px;
	}
	@media (min-width: 576px) and (max-width: 767.98px) {
		max-width: 540px;
	}
	@media (max-width: 575.98px) {
		max-width: 100%;
	}
}

.box-1 {
	text-align: center;
	margin-bottom: 120px;

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

.box-2 {
	text-align: center;
	margin-bottom: 120px;

	@media (max-width: 992px) {
		margin-bottom: 60px;
	}

	h2 {
		font-size: 48px;
		font-family: $font1;
		font-weight: 300;
		text-transform: uppercase;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 120px;
		color: #000;
		line-height: 1.3;

		strong {
			display: block;
			font-size: 55px;
			font-weight: 700;
			margin-bottom: 40px;
		}

		@media (max-width: 1200px) {
			font-size: 38px;
			margin-bottom: 50px;
		}
		@media (max-width: 768px) {
			font-size: 28px;
		}
	}

	p {
		width: 100%;

		color: #000;
		font-size: 32px;
		font-family: $font1;
		font-weight: 300;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		line-height: 1.3;

		strong {
			font-weight: 700;
		}

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

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

	.c-row {
		&-1 {
			display: flex;
			flex-direction: row;
			column-gap: 30px;
			justify-content: space-between;
			// margin-bottom: 70px;
		}
		&-2 {
			display: flex;
			flex-direction: row;
			column-gap: 30px;
			justify-content: space-between;
			// display: flex;
			// flex-direction: row;
			// justify-content: flex-end;

			// .c-col {
			// 	max-width: 1000px;
			// }
		}
	}
	h2 {
		color: #000;
		font-family: $font1;
		font-size: 55px;
		font-weight: 600;
		text-transform: uppercase;
		margin-bottom: 60px;

		@media (max-width: 1200px) {
			font-size: 50px;
		}
		@media (max-width: 768px) {
			font-size: 30px;
			margin-bottom: 40px;
		}
	}

	ul {
		list-style: decimal;
		margin-bottom: 50px;
		padding-left: 50px;

		@media (max-width: 768px) {
			margin-bottom: 40px;
		}

		li {
			color: #000;
			font-family: $font1;
			font-size: 36px;
			font-weight: 300;

			&:not(:last-child) {
				margin-bottom: 20px;
			}

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

	a {
		display: inline-block;
		color: #fff;
		padding: 20px 40px;
		background: #1d1d1b;
		font-weight: 400;
		font-size: 14px;
		text-transform: uppercase;

		@media (max-width: 1200px) {
			padding: 15px 30px;
		}
	}

	p {
		color: #000;
		font-family: $font1;
		font-size: 18px;

		text-align: right;
		margin-bottom: 0;

		@media (max-width: 992px) {
			text-align: left;
			font-size: 16px;
		}
	}

	.c-row {
		&:not(:last-child) {
			margin-bottom: 90px;

			@media (max-width: 992px) {
				margin-bottom: 60px;
			}
		}
		&-3 {
			margin-bottom: 50px !important;
		}
		&-4 {
			padding-bottom: 20px;
			border-bottom: 1px solid #000;

			.c-col {
				text-align: right;
				@media (max-width: 992px) {
					text-align: left;
				}

				a {
					margin-bottom: 30px;
				}
			}

			p {
				max-width: 670px;
				margin-left: auto;
			}
		}

		@media (max-width: 992px) {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

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

	@media (max-width: 992px) {
		margin-bottom: 150px;
	}
	h2 {
		color: #000;
		font-size: 38px;
		font-family: $font1;
		font-weight: 300;
		margin-bottom: 48px;
		text-transform: uppercase;

		strong {
			display: block;
			font-size: 24px;
			text-align: center;
			font-weight: bold;
		}

		@media (max-width: 1200px) {
			font-size: 32px;
		}
	}

	ul {
		list-style: initial;
		padding-left: 40px;
	}
	ul,
	ol {
		li {
			color: #000;
			font-size: 20px;
			font-family: $font1;
			font-weight: 300;

			&:not(:last-child) {
				margin-bottom: 20px;
			}

			@media (max-width: 1200px) {
				font-size: 18px;
			}
		}
	}

	.c-row {
		&:not(:first-child) {
			margin-top: 90px;
			padding-top: 90px;
			border-top: 1px solid #000;
		}

		@media (max-width: 992px) {
			margin-top: 60px;
			padding-top: 60px;
		}
	}
}