.elementor-114 .elementor-element.elementor-element-37cb6c8{--display:flex;--margin-top:95px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-12px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-114 .elementor-element.elementor-element-37cb6c8{--margin-top:90px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-05117e6 *//* ============================================================
   RUBY POS — HERO PRODUCT SLIDER
   Adds an auto-sliding image gallery to the right side
   of the hero. Mobile responsive. No JS required.
   ============================================================ */

/* --- Hero becomes a 2-column layout --- */
.rby-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 72px 0 76px;
    position: relative;
    z-index: 4;
}

/* Left column content — left aligned now, not centered */
.rby-hero-content {
    max-width: 100%;
    margin: 0;
    text-align: left;
}

/* Re-align the CTA buttons and trust row to the left */
.rby-hero-cta {
    justify-content: flex-start;
}
.rby-hero-trust {
    justify-content: flex-start;
}

/* ============================================================
   SLIDER STAGE
   ============================================================ */
.rby-hero-slider {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Soft red glow behind the product images */
.rby-hero-slider::before {
    content: '';
    position: absolute;
    inset: 6% 4% 10%;
    background: radial-gradient(
        circle at 50% 55%,
        rgba(220, 38, 38, 0.35) 0%,
        rgba(220, 38, 38, 0.12) 40%,
        transparent 72%
    );
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
}

.rby-hero-slider-stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ============================================================
   SLIDES — fade + slide animation
   5 slides, 25s loop, 4s each
   ============================================================ */
.rby-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(40px) scale(0.96);
    animation: rby-hero-slide-cycle 25s infinite ease-in-out;
    will-change: opacity, transform;
}

.rby-hero-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
            drop-shadow(0 6px 14px rgba(220, 38, 38, 0.25));
    user-select: none;
    -webkit-user-drag: none;
}

/* Stagger the 5 slides — 5s apart */
.rby-hero-slide:nth-child(1) { animation-delay: 0s; }
.rby-hero-slide:nth-child(2) { animation-delay: 5s; }
.rby-hero-slide:nth-child(3) { animation-delay: 10s; }
.rby-hero-slide:nth-child(4) { animation-delay: 15s; }
.rby-hero-slide:nth-child(5) { animation-delay: 20s; }

@keyframes rby-hero-slide-cycle {
    0% {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
    3% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    17% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    20% {
        opacity: 0;
        transform: translateX(-40px) scale(0.96);
    }
    100% {
        opacity: 0;
        transform: translateX(-40px) scale(0.96);
    }
}

/* ============================================================
   PROGRESS DOTS
   ============================================================ */
.rby-hero-slider-dots {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    align-items: center;
}

.rby-hero-slider-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    display: block;
    transition: width 0.35s ease, background 0.35s ease;
    animation: rby-hero-dot-cycle 25s infinite ease-in-out;
}

.rby-hero-slider-dots span:nth-child(1) { animation-delay: 0s; }
.rby-hero-slider-dots span:nth-child(2) { animation-delay: 5s; }
.rby-hero-slider-dots span:nth-child(3) { animation-delay: 10s; }
.rby-hero-slider-dots span:nth-child(4) { animation-delay: 15s; }
.rby-hero-slider-dots span:nth-child(5) { animation-delay: 20s; }

@keyframes rby-hero-dot-cycle {
    0%, 2% {
        background: rgba(255, 255, 255, 0.28);
        width: 8px;
    }
    4%, 17% {
        background: var(--rby-accent, #fca5a5);
        width: 26px;
        border-radius: 4px;
    }
    19%, 100% {
        background: rgba(255, 255, 255, 0.28);
        width: 8px;
        border-radius: 50%;
    }
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .rby-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        padding: 60px 0 64px;
    }

    .rby-hero-content {
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
    }

    .rby-hero-cta { justify-content: center; }
    .rby-hero-trust { justify-content: center; }

    .rby-hero-slider {
        max-width: 420px;
        margin: 0 auto;
        order: 2;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .rby-hero-inner {
        padding: 48px 0 56px;
        gap: 32px;
    }

    .rby-hero-slider {
        max-width: 320px;
        aspect-ratio: 1 / 1;
    }

    .rby-hero-slider::before {
        filter: blur(20px);
    }

    .rby-hero-slider-dots {
        bottom: -14px;
        gap: 6px;
    }

    .rby-hero-slider-dots span {
        width: 7px;
        height: 7px;
    }

    @keyframes rby-hero-dot-cycle {
        0%, 2% {
            background: rgba(255, 255, 255, 0.28);
            width: 7px;
        }
        4%, 17% {
            background: var(--rby-accent, #fca5a5);
            width: 22px;
            border-radius: 4px;
        }
        19%, 100% {
            background: rgba(255, 255, 255, 0.28);
            width: 7px;
            border-radius: 50%;
        }
    }
}

@media (max-width: 560px) {
    .rby-hero-slider {
        max-width: 260px;
    }

    .rby-hero-slider::before {
        filter: blur(16px);
    }
}

@media (max-width: 380px) {
    .rby-hero-slider {
        max-width: 220px;
    }

    .rby-hero-slider-dots {
        bottom: -12px;
    }
}

/* ============================================================
   ACCESSIBILITY — respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rby-hero-slide,
    .rby-hero-slider-dots span {
        animation: none !important;
    }

    .rby-hero-slide:nth-child(1) {
        opacity: 1;
        transform: none;
    }

    .rby-hero-slider-dots span:nth-child(1) {
        background: var(--rby-accent, #fca5a5);
        width: 26px;
        border-radius: 4px;
    }
}/* End custom CSS */