/* Index marquee */
.index-marquee-wrapper {
    margin-inline: auto;
    height: 350px;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0)
    );
}

@keyframes index-marquee-scroll-left {
    to {
        left: -300px;
    }
}

@keyframes index-marquee-scroll-right {
    to {
        right: -300px;
    }
}

.index-marquee-item-left,
.index-marquee-item-right {
    width: 300px;
    text-align: center;
    position: absolute;
    animation-timing-function: linear;
    animation-duration: 130s;
    animation-iteration-count: infinite;
    animation-delay: calc(130s / 6 * (6 - var(--n)) * -1);
}

.index-marquee-wrapper:hover .index-marquee-item-left,
.index-marquee-wrapper:hover .index-marquee-item-right {
    animation-play-state: paused;
}

.index-marquee-item-left {
    left: max(calc(300px * 6), 100%);
    animation-name: index-marquee-scroll-left;
}

.index-marquee-item-right {
    right: max(calc(300px * 6), calc(100% + 300px));
    animation-name: index-marquee-scroll-right;
}

.index-marquee-item {
}

.index-background {
    background: linear-gradient(var(--body-bg) 0%, transparent 15%, transparent 85%, var(--body-bg) 100%), url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZGF0YS1uYW1lPSJMYXllciAyIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIj48L3BhdGg+PHBhdGggZD0iTTggOGgzdjNIOHpNMTQgMTRoMnYyaC0yek04IDEzdjMiIHN0cm9rZT0iI2Y2ZjdmOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiBjbGFzcz0ic3Ryb2tlLTAwMDAwMCBzdHJva2UtZjVmNWY1Ij48L3BhdGg+PHBhdGggZD0iTTEwIDEzdjNoMnYtNGg0TTE2IDEwaC0zVjhoM004IDVINmExIDEgMCAwIDAtMSAxdjJNMTYgNWgyYTEgMSAwIDAgMSAxIDF2Mk0xOSAxNnYyYTEgMSAwIDAgMS0xIDFoLTJNOCAxOUg2YTEgMSAwIDAgMS0xLTF2LTIiIHN0cm9rZT0iI2Y2ZjdmOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiBjbGFzcz0ic3Ryb2tlLTAwMDAwMCBzdHJva2UtZjVmNWY1Ij48L3BhdGg+PC9nPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: index-background 60s ease-in-out alternate infinite;
}

[data-theme-style="dark"] .index-background {
    background: linear-gradient(var(--body-bg) 0%, transparent 15%, transparent 85%, var(--body-bg) 100%), url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZGF0YS1uYW1lPSJMYXllciAyIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik04IDhoM3YzSDh6TTE0IDE0aDJ2MmgtMnpNOCAxM3YzIiBzdHJva2U9IiMxNDE3MWEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgY2xhc3M9InN0cm9rZS0wMDAwMDAgc3Ryb2tlLWY1ZjVmNSIvPgogICAgPHBhdGggZD0iTTEwIDEzdjNoMnYtNGg0TTE2IDEwaC0zVjhoM004IDVINmExIDEgMCAwIDAtMSAxdjJNMTYgNWgyYTEgMSAwIDAgMSAxIDF2Mk0xOSAxNnYyYTEgMSAwIDAgMS0xIDFoLTJNOCAxOUg2YTEgMSAwIDAgMS0xLTF2LTIiIHN0cm9rZT0iIzE0MTcxYSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiBjbGFzcz0ic3Ryb2tlLTAwMDAwMCBzdHJva2UtZjVmNWY1Ii8+CiAgPC9nPgo8L3N2Zz4K');
}

@keyframes index-background {
    0% {
        background-position: center;
        background-size: 100%;
    }
    100% {
        background-position: center;
        background-size: 200%;
    }
}

.index-header {
    font-size: 4.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.index-subheader {
    font-size: 1.35rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--gray-600);
}

.index-button {
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: var(--border-radius);
}

.index-button-secondary {
    padding: 0.6rem 1.5rem;
    font-size: 1.1rem;
    border-radius: var(--border-radius);
}

.index-card-image {
    width: auto;
    height: 10rem;
    object-fit: fill;
    padding: 1.25rem;
    border-radius: var(--border-radius);
}

.index-fade {
    position: absolute;
    background: linear-gradient(0deg, var(--white), hsla(0, 0%, 100%, 0)) !important;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

/* Index testimonial */
.index-testimonial-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    transform: translate(-50%, -70%);
    border: 4px solid var(--white);
    background: var(--white);
    position: absolute;
    left: 50%;
}

.index-testimonial-comment {
    margin-left: 18px;
}

/* Index FAQ */
.index-faq svg {
    transition: all .15s;
    color: var(--primary-800);
}

/* Timeline */
.index-timeline {
    position: relative;
}

.index-timeline::before {
    content: '';
    position: absolute;
    border-left: 2px solid var(--primary-100);
    height: 100%;
    left: calc(57px / 2);
}

/* Index call to action */
.index-cta {
    background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
    color: white !important;
}

.index-cta a.btn {
    color: white;
    background: var(--primary-900);
    border-color: var(--primary-900);
    padding: 1.2rem 4.2rem;
    font-size: 1.25rem;
}

.index-cta a.btn:hover {
    background: var(--primary-700);
    border-color: var(--primary-700);
}

[data-theme-style="dark"] .index-cta a.btn {
    background: var(--primary-100);
    border-color: var(--primary-100);
}

.index-icon-container {
    background: var(--primary-50);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    color: var(--primary);
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    border-radius: var(--border-radius);
    font-weight: 800;
}

[data-theme-style="dark"] .index-icon-container {
    background: var(--gray-100);
}

/* Qr template */
.qr-template-icon {
    min-width: 2.75rem;
    max-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
}

.qr-template-icon-wrapper {
    padding: 1.25rem 0 0 1.25rem;
}

/* Pixel provider logo strip */
.pixel-icon-wrapper {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}