.neon-slider {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
background: #111;
line-height: 1;
}
.neon-slider-track {
position: relative;
width: 100%;
height: var(--slider-height, 500px);
} .neon-slider-auto .neon-slider-track {
height: auto;
aspect-ratio: var(--slider-aspect-ratio, 16/5);
} .neon-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center; z-index: 1;
} .neon-slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.neon-slider .neon-slider-track .neon-slide-bg img {
min-width: 100%;
width: 100%;
height: 100%;
max-width: none; object-fit: cover;
object-position: center;
display: block;
transition: transform 8s ease-out;
} @media (max-width: 767px) {
.neon-slider-track {
height: auto;
}
.neon-slider-auto .neon-slider-track {
height: auto;
aspect-ratio: unset;
}
.neon-slide {
position: relative;
inset: auto;
height: auto;
min-height: 300px; }
.neon-slide:not(.active) {
position: absolute;
inset: 0;
height: 100%;
}
.neon-slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.neon-slider .neon-slider-track .neon-slide-bg img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100%;
position: absolute;
inset: 0;
} .neon-slide-content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 !important;
padding: 1.25rem;
display: flex;
justify-content: center;
z-index: 0; pointer-events: none; } .neon-slide-content a,
.neon-slide-content button {
pointer-events: auto;
}
} .neon-slide-video {
overflow: hidden;
}
.neon-slide-video video,
.neon-slide-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
border: 0;
} .neon-yt-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
} .neon-slide-overlay {
position: absolute;
inset: 0;
background: #000;
pointer-events: none;
z-index: 1;
} .neon-slide-content {
position: relative;
z-index: 2;
padding: 2rem;
max-width: 580px;
display: flex;
flex-direction: column;
gap: .85rem;
width: 100%;
} .neon-content-left  .neon-slide-content { align-items: flex-start; text-align: left;   margin-left: clamp(1.5rem, 8%, 6rem); }
.neon-content-center .neon-slide-content { align-items: center;    text-align: center;  margin: 0 auto; }
.neon-content-right .neon-slide-content { align-items: flex-end;   text-align: right;  margin-left: auto; margin-right: clamp(1.5rem, 8%, 6rem); } .neon-valign-top    { align-items: flex-start; padding-top: clamp(1rem, 5%, 3rem); }
.neon-valign-center { align-items: center; }
.neon-valign-bottom { align-items: flex-end;  padding-bottom: clamp(1rem, 5%, 3rem); } .neon-text-light .neon-slide-title { color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.neon-text-light .neon-slide-text  { color: rgba(255,255,255,.88); }
.neon-text-light .neon-slide-btn   { background: #fff; color: #111; border: none; }
.neon-text-light .neon-slide-btn:hover { background: #f0f0f0; } .neon-text-dark .neon-slide-title { color: #111111; text-shadow: 0 1px 4px rgba(255,255,255,.3); }
.neon-text-dark .neon-slide-text  { color: rgba(0,0,0,.75); }
.neon-text-dark .neon-slide-btn   { background: #111; color: #fff; border: none; }
.neon-text-dark .neon-slide-btn:hover { background: #333; }
.neon-slide-title {
font-size: clamp(1.5rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
margin: 0;
}
.neon-slide-text {
font-size: clamp(.95rem, 1.5vw, 1.15rem);
line-height: 1.5;
margin: 0;
}
.neon-slide-btn {
display: inline-block;
padding: .7em 1.8em;
border-radius: 4px;
font-weight: 600;
font-size: .95rem;
text-decoration: none;
transition: background .2s, transform .1s;
letter-spacing: .02em;
white-space: nowrap;
border: none;
}
.neon-slide-btn:hover { transform: translateY(-1px); } .neon-animation-fade .neon-slide {
opacity: 0;
transition: opacity .8s ease;
}
.neon-animation-fade .neon-slide.active {
opacity: 1;
z-index: 2;
}
.neon-animation-fade .neon-slide.neon-leaving {
opacity: 0;
z-index: 2;
transition: opacity .8s ease;
} .neon-animation-slide .neon-slide {
opacity: 0;
z-index: 1;
}
.neon-animation-slide .neon-slide.active {
opacity: 1;
z-index: 2;
}
.neon-animation-slide .neon-slide.neon-anim-enter-next {
animation: neonSlideInRight .65s cubic-bezier(.25,.46,.45,.94) forwards;
z-index: 3;
opacity: 1;
}
.neon-animation-slide .neon-slide.neon-anim-enter-prev {
animation: neonSlideInLeft .65s cubic-bezier(.25,.46,.45,.94) forwards;
z-index: 3;
opacity: 1;
}
.neon-animation-slide .neon-slide.neon-anim-leave-next {
animation: neonSlideOutLeft .65s cubic-bezier(.25,.46,.45,.94) forwards;
z-index: 2;
opacity: 1;
}
.neon-animation-slide .neon-slide.neon-anim-leave-prev {
animation: neonSlideOutRight .65s cubic-bezier(.25,.46,.45,.94) forwards;
z-index: 2;
opacity: 1;
}
@keyframes neonSlideInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes neonSlideOutLeft  { from { transform: translateX(0);    } to { transform: translateX(-100%); } }
@keyframes neonSlideInLeft   { from { transform: translateX(-100%);} to { transform: translateX(0); } }
@keyframes neonSlideOutRight { from { transform: translateX(0);    } to { transform: translateX(100%); } } .neon-animation-zoom .neon-slide {
opacity: 0;
transition: opacity .9s ease;
}
.neon-animation-zoom .neon-slide.active {
opacity: 1;
z-index: 2;
}
.neon-animation-zoom .neon-slide.neon-leaving {
opacity: 0;
z-index: 2;
transition: opacity .9s ease;
} .neon-animation-zoom .neon-slide.active .neon-slide-bg img {
animation: neonKenBurns 9s ease-out forwards;
}
@keyframes neonKenBurns {
from { transform: scale(1.12); }
to   { transform: scale(1.0); }
} .neon-prev,
.neon-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: var(--neon-arrow-size, 44px);
height: var(--neon-arrow-size, 44px);
border-radius: 50%;
background: var(--neon-arrow-bg, rgba(0, 0, 0, .45));
color: var(--neon-arrow-fg, #fff);
border: var(--neon-arrow-border-width, 2px) solid var(--neon-arrow-border-color, rgba(255,255,255,.3));
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, opacity .2s, border-color .2s;
padding: 0;
user-select: none;
}
.neon-prev { left: 1rem; }
.neon-next { right: 1rem; }
.neon-prev:hover,
.neon-next:hover { opacity: .85; filter: brightness(1.15); } .neon-arrows-circle { border-radius: 50%; } .neon-arrows-square { border-radius: 6px; } .neon-arrows-minimal {
background: transparent !important;
border: none !important;
font-size: 2.2rem;
width: auto;
height: auto;
text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.neon-arrows-minimal:hover { opacity: .7; filter: none; } .neon-arrow-img { font-size: 0; }
.neon-arrow-img img {
display: block;
width: 60%;
height: 60%;
object-fit: contain;
pointer-events: none;
}
@media (max-width: 480px) {
.neon-prev, .neon-next { width: var(--neon-arrow-size, 36px); height: var(--neon-arrow-size, 36px); font-size: 1.2rem; }
.neon-arrows-minimal { font-size: 1.6rem; width: auto; height: auto; }
} .neon-dots {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: .45rem;
align-items: center;
}
.neon-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.5);
border: none;
cursor: pointer;
padding: 0;
transition: background .25s, transform .25s;
}
.neon-dot.active {
background: #fff;
transform: scale(1.35);
} @media (max-width: 576px) {
.neon-slide-content { padding: 1.25rem; gap: .6rem; }
.neon-slide-btn { padding: .55em 1.4em; font-size: .88rem; }
.neon-content-left .neon-slide-content,
.neon-content-right .neon-slide-content { margin-left: 1.25rem; margin-right: 1.25rem; }
} @media (max-width: 767px) {
.neon-slide-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
.neon-slide-mobile-only  { display: none !important; }
} .neon-slide-linked { cursor: pointer; }