.marquee{
	display: flex;
	flex-direction: row;
	width: 100%;
	background: yellow;
	padding: 20px 0;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	--textWidth: 100;
	--animSpeed: 100; 
	
	& .marquee__content{
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		--textWidth: inherit;
	}
	
	& .marquee__text{
		display: block;
		flex-shrink: 0;
		flex-grow: 0;
		margin: 0;
		padding-right: 32px;
	}
	
	& .marquee__copies{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		width: 0;
		flex-grow: 0;
		flex-shrink: 0;
	}
}

@keyframes marquee-scroll-left{
	0%   { transform: translateX(0)}
	100% { transform: translateX(-100%)}
}

@keyframes marquee-scroll-right {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}



.banner-one{
	--e-transform-rotateZ: 3deg;
	--e-transform-scale: 1.05;
	transform: rotate(var(--e-transform-rotateZ,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) ;
	z-index: 0;

	& .marquee__content{
		animation: marquee-scroll-right calc( (var(--textWidth) * 1s) / var(--animSpeed) ) linear infinite;
	}
}
.banner-two{
	--e-transform-rotateZ: -7deg;
	--e-transform-scale: 1.05;
	transform: rotate(var(--e-transform-rotateZ,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) ;
	z-index: 1;

	& .marquee__content{
		animation: marquee-scroll-left calc( (var(--textWidth) * 1s) / var(--animSpeed) ) linear infinite;
	}
}

/* Disable marquee animation inside Elementor editor */
body.elementor-editor-active .marquee__content {
    animation: none !important;
    transform: none !important; /* optional – keeps text from being mid-scroll */
}