.wcf--scroll-elements {
	display: flex;
	gap: 100px;
}

.wcf--scroll-elements .scroll-nav-bar {
	width: 20%;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wcf--scroll-elements .scroll-title {
	display: flex;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: .3s;
	color: #ddd;
}

.wcf--scroll-elements .scroll-title.active, .wcf--scroll-elements .scroll-title:hover {
	cursor: pointer;
	color: #0a0a0a;
}

.wcf--scroll-elements .scroll-content-wrap {
	display: flex;
	gap: 100px;
	flex: 1;
}

.wcf--scroll-elements .scroll-images {
	width: 50%;
	position: relative;
}

.wcf--scroll-elements .scroll-images .image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	max-height: 100vh;
	width: 100%;
	overflow: hidden;
}

.wcf--scroll-elements .scroll-images .image-wrap img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: 0;
	z-index: -1;
}

.wcf--scroll-elements .scroll-contents {
	flex: 1;
}

@media (max-width:1024px) {
	.elementor-widget-wcf--scroll-elements.wcf-scroll-tablet .scroll-images, .elementor-widget-wcf--scroll-elements.wcf-scroll-tablet .scroll-nav-bar {
		display: none;
	}
}

@media (max-width:767px) {
	.elementor-widget-wcf--scroll-elements.wcf-scroll-mobile .scroll-images, .elementor-widget-wcf--scroll-elements.wcf-scroll-mobile .scroll-nav-bar {
		display: none;
	}
}