/* Premier Marquee for Elementor - Frontend Styles */

.pme-wrapper {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.pme-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	gap: 40px;
	will-change: transform;
}

/* JS calculates the exact pixel distance (--pme-shift) and duration (--pme-duration)
   needed for a perfectly seamless loop, then adds this class. Animation only starts
   once those values are known - this is what prevents any visible "break"/jump. */
.pme-track.pme-active {
	animation-name: pme-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--pme-duration, 20s);
}

/* Right to Left ke liye animation direction reverse */
.pme-dir-rtl .pme-track {
	animation-direction: reverse;
}

/* Hover par pause */
.pme-pause-on-hover:hover .pme-track {
	animation-play-state: paused;
}

.pme-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.pme-item a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.pme-item-icon {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	line-height: 1;
}

.pme-item-icon svg {
	width: 1em;
	height: 1em;
}

.pme-item-text {
	font-size: 15px;
}

@keyframes pme-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-1 * var(--pme-shift, 50%)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pme-track {
		animation: none;
	}
}