/* ===== Lynxbe Services Strip – CSS ===== */
/* Make hero section a positioning context */
section#hero.hero,
.hero {
    position: relative !important;
}

.hero-features {
    position: absolute !important;
    bottom: 200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    /* Ensure children get proper width */
    min-width: 0;
}


/* Container */
.lynxbe-services-strip {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr !important; /* הלוגיקה של האנימציה תמיד LTR */
    box-sizing: border-box;
}

/* Track */
.lynxbe-services-strip__track {
    display: inline-flex;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
}

/* Items */
.lynxbe-services-strip__item {
    display: inline-flex;
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.lynxbe-services-strip__dot {
    opacity: 0.4;
    padding: 0 4px;
}

/* === Animations === */

/* LTR – התוכן זז שמאלה, כאילו נכנס מימין */
@keyframes strip-move-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* סוף הרצף הראשון */
}

/* RTL – התוכן זז ימינה, כאילו נכנס משמאל */
@keyframes strip-move-rtl {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* האנימציה נשלטת על ידי JavaScript, לא CSS */
/* CSS animations מושבתות כדי לאפשר ל-JS לשלוט */
html[dir="ltr"] .lynxbe-services-strip__track,
html[dir="rtl"] .lynxbe-services-strip__track {
    animation: none !important;
}

/* Pause on hover */
.lynxbe-services-strip:hover .lynxbe-services-strip__track {
    animation-play-state: paused;
}