/* Viloer Icon List 1 – v1.0.0 */

/* Wrapper */
.vil-il1-wrapper{position:relative;overflow:hidden}

/* Heading */
.vil-il1-heading{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 16px}
.vil-il1-heading-text{margin:0;padding:0;font-weight:700}
.vil-il1-heading-icon{display:inline-flex;align-items:center;line-height:1}
.vil-il1-heading-icon svg{display:block}

/* Marquee container */
.vil-il1-marquee{overflow:hidden;position:relative;contain:content}

/* Track – GPU-accelerated */
.vil-il1-track{display:flex;align-items:center;width:max-content;animation:vil-il1-scroll 25s linear infinite;will-change:transform}

/* Reverse direction */
.vil-il1-track--reverse{animation-name:vil-il1-scroll-reverse}

/* Pause on hover */
.vil-il1-pause:hover .vil-il1-track{animation-play-state:paused}

/* Keyframes */
@keyframes vil-il1-scroll{
	0%{transform:translate3d(0,0,0)}
	100%{transform:translate3d(-50%,0,0)}
}
@keyframes vil-il1-scroll-reverse{
	0%{transform:translate3d(-50%,0,0)}
	100%{transform:translate3d(0,0,0)}
}

/* Individual item */
.vil-il1-item{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-inline-end:40px}

/* Icon circle */
.vil-il1-circle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background-color:#d4edda;flex-shrink:0;line-height:1}
.vil-il1-circle i,.vil-il1-circle svg{display:block}

/* Separator line */
.vil-il1-sep{width:1px;height:40px;background-color:#ccc;flex-shrink:0}

/* Text */
.vil-il1-text{white-space:pre-line;flex-shrink:0}

/* Edge fade */
.vil-il1-marquee--fade{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

/* ─── Reduced motion (a11y) ─── */
@media(prefers-reduced-motion:reduce){
	.vil-il1-track{animation:none}
}

/* ─── Responsive defaults ─── */
@media(max-width:767px){
	.vil-il1-circle{width:44px;height:44px}
	.vil-il1-circle i,.vil-il1-circle svg{font-size:16px;width:16px;height:16px}
	.vil-il1-sep{height:30px}
	.vil-il1-item{gap:10px;margin-inline-end:28px}
}
@media(min-width:768px) and (max-width:1024px){
	.vil-il1-circle{width:50px;height:50px}
}