/* ==========================================================================
   Zenic Fiverr Marquee
   Headings: Space Grotesk  |  Text: Poppins  |  Accent: #E9890F  |  BG: #0B0F14
   ========================================================================== */

.zfm-section {
	--zfm-accent: #E9890F;
	--zfm-bg: #0B0F14;
	--zfm-surface: #151D26;
	--zfm-line: rgba(255, 255, 255, 0.09);
	--zfm-muted: #B2BCC8;
	--zfm-ease: cubic-bezier(.22, .8, .2, 1);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--zfm-muted);
	background-color: var(--zfm-bg);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}
.zfm-section *,
.zfm-section *::before,
.zfm-section *::after { box-sizing: border-box; }
.zfm-section h1, .zfm-section h2, .zfm-section h3, .zfm-section h4 { margin: 0; padding: 0; }
.zfm-section p { margin: 0; }
.zfm-section a { text-decoration: none; }

.zfm-bleed {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
body { overflow-x: clip; }

/* Seamless with other Zenic sections */
.elementor-widget-zenic-fiverr-marquee { margin-block-end: 0 !important; margin-bottom: 0 !important; }
.elementor-widget-zenic-fiverr-marquee > .elementor-widget-container { margin: 0; padding: 0; }

.zfm-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Glow orbs ---------------------------------------------------------------- */
.zfm-orb {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(110px);
	pointer-events: none;
	background: var(--zfm-accent);
	animation: zfm-orb 14s ease-in-out infinite alternate;
}
.zfm-orb-1 { width: 380px; height: 380px; top: 8%; left: -10%; opacity: .12; }
.zfm-orb-2 { width: 300px; height: 300px; bottom: 6%; right: -6%; opacity: .08; animation-delay: -6s; }
@keyframes zfm-orb {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(60px, 40px) scale(1.18); }
}

/* Header ------------------------------------------------------------------- */
.zfm-head { margin-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.zfm-head-center .zfm-head { align-items: center; text-align: center; }
.zfm-head-center .zfm-desc { margin-left: auto; margin-right: auto; }
.zfm-head-left .zfm-head { align-items: flex-start; text-align: left; }
.zfm-head-split .zfm-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.zfm-head-split .zfm-head-actions { flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.zfm-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 6px 15px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--zfm-accent);
	background: rgba(233, 137, 15, .08);
	border: 1px solid rgba(233, 137, 15, .35);
	border-radius: 999px;
}
.zfm-badge::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--zfm-accent);
	animation: zfm-pulse 2s infinite;
}
@keyframes zfm-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(233, 137, 15, .55); }
	70%  { box-shadow: 0 0 0 9px rgba(233, 137, 15, 0); }
	100% { box-shadow: 0 0 0 0 rgba(233, 137, 15, 0); }
}

.zfm-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 55px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: 20px !important;
}
.zfm-hl { color: var(--zfm-accent); text-shadow: 0 0 28px rgba(233, 137, 15, .35); }
.zfm-no-glow .zfm-hl { text-shadow: none; }

.zfm-desc {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--zfm-muted);
	max-width: 640px;
}

/* Actions: rating + button */
.zfm-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.zfm-head-center .zfm-head-actions { justify-content: center; }

.zfm-rating {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 20px 10px 14px;
	border-radius: 999px;
	background: var(--zfm-surface);
	border: 1px solid var(--zfm-line);
}
.zfm-rating-val {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	padding-right: 14px;
	border-right: 1px solid var(--zfm-line);
}
.zfm-rating-meta { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.zfm-rating-text { font-size: 14px; line-height: 1.4; color: var(--zfm-muted); }

.zfm-stars { --zfm-star: var(--zfm-accent); display: inline-flex; gap: 3px; }
.zfm-star { position: relative; width: 15px; height: 15px; display: inline-block; }
.zfm-star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, .14); }
.zfm-star::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--zfm-star);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.4l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.4l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") no-repeat center / contain;
	clip-path: inset(0 calc(100% - var(--zfm-fill, 100%)) 0 0);
}

.zfm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .35s var(--zfm-ease), background-color .3s, color .3s, border-color .3s, box-shadow .35s;
}
.zfm-btn-primary { color: #0B0F14; background: var(--zfm-accent); border-color: var(--zfm-accent); }
.zfm-btn-ghost   { color: #fff; background: #161e28; border-color: rgba(255, 255, 255, .12); }
.zfm-btn::after {
	content: '';
	position: absolute;
	top: 0; left: -80%;
	width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-20deg);
	transition: left .7s var(--zfm-ease);
}
.zfm-btn-arrow { display: inline-flex; transition: transform .35s var(--zfm-ease); }
.zfm-btn:hover { transform: translateY(-3px); }
.zfm-btn-primary:hover { box-shadow: 0 12px 30px -8px rgba(233, 137, 15, .65); color: #0B0F14; }
.zfm-btn-ghost:hover { box-shadow: 0 12px 30px -10px rgba(255, 255, 255, .25); color: #fff; }
.zfm-btn:hover::after { left: 130%; }
.zfm-btn:hover .zfm-btn-arrow { transform: translate(3px, -3px); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.zfm-marquee {
	--zfm-w: 380px;
	--zfm-h: 260px;
	--zfm-gap: 24px;
	--zfm-row-gap: 24px;
	--zfm-fade: 10%;
	position: relative;
	z-index: 2;
	width: 100%;
}
.zfm-marquee-full .zfm-marquee {
	/* break out of section side padding */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}
.zfm-section:not(.zfm-bleed).zfm-marquee-full .zfm-marquee {
	/* inside a narrow section, just span the section edge to edge */
	width: auto;
	margin-left: calc(-1 * var(--zfm-pad-l, 0px));
	margin-right: calc(-1 * var(--zfm-pad-r, 0px));
}

.zfm-marquee-inner {
	display: flex;
	flex-direction: column;
	gap: var(--zfm-row-gap);
	padding: 14px 0; /* room for hover lift + glow */
}
.zfm-fade-on .zfm-marquee-inner {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--zfm-fade), #000 calc(100% - var(--zfm-fade)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--zfm-fade), #000 calc(100% - var(--zfm-fade)), transparent 100%);
}

.zfm-row {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 14px 0;
	margin: -14px 0;
}
.zfm-track {
	display: flex;
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}
.zfm-group {
	display: flex;
	flex-shrink: 0;
	gap: var(--zfm-gap);
	padding-right: var(--zfm-gap);
}

/* CSS fallback (before / without JS). JS adds .zfm-js and drives motion itself. */
.zfm-row:not(.zfm-js) .zfm-track { animation: zfm-left 60s linear infinite; }
.zfm-row.zfm-dir-right:not(.zfm-js) .zfm-track { animation-name: zfm-right; }
@keyframes zfm-left  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes zfm-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Equal size cards */
.zfm-item {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--zfm-w);
	height: var(--zfm-h);
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .09);
	background-color: var(--zfm-surface);
	transition: transform .5s var(--zfm-ease), border-color .4s, box-shadow .5s var(--zfm-ease), opacity .4s, filter .4s;
	-webkit-user-select: none;
	user-select: none;
}
.zfm-item img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center center;
	border-radius: 0 !important;
	transition: transform 1s var(--zfm-ease), filter .5s;
	pointer-events: none;
}
/* Sizing modes */
.zfm-size-contain .zfm-item img { object-fit: contain; }
.zfm-size-cover .zfm-item img   { object-fit: cover; }

/* Equal height, natural width: card takes the image's own shape, nothing is cropped */
.zfm-size-auto .zfm-item {
	width: auto;
	height: var(--zfm-h);
	aspect-ratio: var(--zfm-ar, 1.5);
}
.zfm-size-auto .zfm-item img { object-fit: fill; }

a.zfm-item { cursor: pointer; }
a.zfm-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 20, .55));
	opacity: 0;
	transition: opacity .4s;
}
a.zfm-item:hover::after { opacity: 1; }

/* Hover effects */
.zfm-hover-glow .zfm-item:hover {
	transform: translateY(-6px);
	border-color: rgba(233, 137, 15, .55);
	border-color: color-mix(in srgb, var(--zfm-accent) 60%, transparent);
	box-shadow: 0 22px 44px -22px rgba(233, 137, 15, .6);
}
.zfm-hover-glow .zfm-item:hover img,
.zfm-hover-zoom .zfm-item:hover img { transform: scale(1.06); }

.zfm-hover-color .zfm-item img { filter: grayscale(1) brightness(.85); }
.zfm-hover-color .zfm-item:hover img { filter: none; transform: scale(1.04); }

.zfm-hover-dim .zfm-track:hover .zfm-item { opacity: .45; }
.zfm-hover-dim .zfm-track:hover .zfm-item:hover { opacity: 1; transform: scale(1.03); border-color: var(--zfm-accent); }

/* Entrance ----------------------------------------------------------------- */
.zfm-anim .zfm-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--zfm-ease), transform .8s var(--zfm-ease);
	transition-delay: var(--zfm-delay, 0s);
}
.zfm-anim.is-in .zfm-reveal { opacity: 1; transform: none; }
.elementor-editor-active .zfm-anim .zfm-reveal { opacity: 1; transform: none; }

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.zfm-rm .zfm-row .zfm-track { animation: none !important; }
	.zfm-rm .zfm-orb { animation: none; }
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.zfm-head-split .zfm-head { flex-direction: column; align-items: flex-start; }
	.zfm-head-split .zfm-head-actions { align-items: flex-start; flex-direction: row; }
}
@media (max-width: 767px) {
	.zfm-head { margin-bottom: 40px; gap: 22px; }
	.zfm-rating { padding: 8px 16px 8px 12px; gap: 10px; }
	.zfm-rating-val { font-size: 19px; padding-right: 10px; }
	.zfm-head-actions { width: 100%; }
	.zfm-head-center .zfm-head-actions { flex-direction: column; }
	.zfm-orb-1 { width: 240px; height: 240px; }
	.zfm-orb-2 { width: 200px; height: 200px; }
}