@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;
}

#page-black-week {
	.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: 50px;

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

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

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

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

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

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

			@media (max-width: 768px) {
				font-size: 28px;
			}
		}

		p {
			width: 100%;
			max-width: 920px;

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

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

	.box-3 {
		.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: 64px;
			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;

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

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

				@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-style: italic;
			font-weight: 700;
			font-size: 14px;

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

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

			text-align: right;
			max-width: 1170px;
			margin-left: auto;
			margin-bottom: 0;

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

		.sale-box {
			display: flex;
			flex-direction: column;

			span {
				color: #fff;
				display: inline-flex;
				font-size: 128px;
				font-family: $font1;
				font-weight: 700;
				align-items: center;
				justify-content: center;

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

			@media (max-width: 992px) {
				justify-content: center;
				flex-direction: row-reverse;
			}
		}

		.c-row {
			&-1 {
				padding-bottom: 100px;
				margin-bottom: 100px;
				border-bottom: 1px solid #000;

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

				.sale-box {
					span {
						&:nth-child(1) {
							width: 327px;
							height: 327px;
							background: #e9ab6e;
							border-radius: 100%;
							margin-left: 60px;

							@media (max-width: 1200px) {
								width: 230px;
								height: 230px;
							}
							@media (max-width: 992px) {
								margin-left: 0;
							}
							@media (max-width: 768px) {
								width: 160px;
								height: 160px;
							}
						}
						&:nth-child(2) {
							width: 300px;
							height: 300px;
							background: #b79f87;
							border-radius: 100%;
							margin-top: -80px;

							@media (max-width: 1200px) {
								margin-top: -50px;
								width: 200px;
								height: 200px;
							}
							@media (max-width: 992px) {
								margin-top: 80px;
								margin-right: -50px;
							}
							@media (max-width: 768px) {
								width: 140px;
								height: 140px;
							}
						}
					}
				}
			}
			&-2 {
				margin-bottom: 60px;

				.sale-box {
					span {
						&:nth-child(1) {
							width: 327px;
							height: 327px;
							background: #e9ab6e;
							border-radius: 100%;

							@media (max-width: 1200px) {
								width: 230px;
								height: 230px;
							}
							@media (max-width: 768px) {
								width: 160px;
								height: 160px;
							}
						}
						&:nth-child(2) {
							width: 240px;
							height: 240px;
							background: #cccccc;
							border-radius: 100%;
							margin-top: -80px;
							margin-left: 100px;
							font-size: 96px;

							@media (max-width: 1200px) {
								width: 180px;
								height: 180px;
								font-size: 50px;
							}
							@media (max-width: 992px) {
								margin-top: 80px;
								margin-right: -50px;
								margin-left: 0;
							}
							@media (max-width: 768px) {
								width: 130px;
								height: 130px;
								font-size: 40px;
							}
						}
					}
				}
			}
			&-3 {
			}

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

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

		@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 {
			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 {
			margin-top: 90px;
			padding-top: 90px;

			border-top: 1px solid #000;

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