.section-contact {
	position: relative;
	overflow: hidden;
	padding: 3rem 0;
	color: oklch(from var(--color-white) l c h / 0.8);
	background-color: var(--color-mine-shaft);

	.bg-image {
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bg-overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		background-color: oklch(from var(--color-mine-shaft) l c h / 0.8);
	}

	.contact-socials {
		display: flex;
		flex-direction: column;
		gap: 2rem;

		li {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			font-size: 14px;

			i[class^="fa-"] {
				font-size: 1rem;
				margin-top: 0.25rem;
				color: var(--color-primary);
			}

			span {
				font-size: 12px;
				font-weight: 600;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				color: oklch(from var(--color-white) l c h / 0.5);
				margin-bottom: 4px;
			}
		}
	}

	.work-with-us {
		display: flex;
		align-items: start;
		gap: 1rem;
		
		> .icon {
			color: var(--color-primary);
		}

		> .content {
			display: flex;
			flex-direction: column;


			.title {
				font-size: 12px;
				font-weight: 600;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				color: oklch(from var(--color-white) l c h / 0.5);
				margin-bottom: 8px;
			}

			.wws-btn {
				font-size: 12px;
				font-weight: 600;
				letter-spacing: 0.2em;
				padding: 0.875rem 2rem;
				color: var(--color-white);
				background-color: var(--color-primary);
				border: 1px solid var(--color-primary);
				text-transform: uppercase;
				transition: all 0.15s;
				&:hover,
				&:focus {
					border-color: oklch(from var(--color-white) l c h / 0.5);
				}
			}
		}
	}

	@media (width >= 1200px) {
		padding: 6rem 0;
	}
}