.syntphony-cards-carousel-widget {
    --syn-carousel-gap: var(--spacing-200);
    --syn-carousel-card-icon-size: var(--size-400);
    --syn-carousel-intro-icon-size: var(--size-700);
    --syn-carousel-stage-height: 26.25rem;
    --syn-carousel-card-radius: var(--border-radius-200, var(--border-radius-000));
    --syn-carousel-shadow: 0 1.125rem 2.75rem color-mix(in srgb, var(--gray-base-ntt) 24%, transparent);
    --syn-carousel-accent: color-mix(in srgb, var(--color-primary-default) 38%, transparent);
    --syn-carousel-accent-soft: color-mix(in srgb, var(--color-primary-default) 7%, transparent);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--syn-carousel-gap);
    overflow-x: clip;
    overflow-y: visible;
    color: var(--color-headings);
    font-family: var(--font-family-base);
    -webkit-user-select: none;
    user-select: none;
}
.syn-carousel__intro {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--spacing-050);
}

.syntphony-cards-carousel-widget .syn-carousel__intro-icon .material-symbols-rounded,
.syn-carousel__intro-icon .elementor-icon,
.syn-carousel__intro-icon svg,
.syn-carousel__intro-icon i {
    font-size: var(--syn-carousel-intro-icon-size);
    color: var(--color-primary-default);
    line-height: 1;
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__intro-title {
    margin: 0;
    font-size: var(--h4);
    line-height: 1.35;
    color: var(--color-headings);
    font-weight: 400;
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__intro-subtitle {
    margin: 0;
    color: var(--gray-ntt-60);
    font-size: var(--text-xs);
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__intro-hint {
    margin: 0;
    color: var(--color-body);
    font-size: var(--text-xs);
    font-style: italic;
}

.syn-carousel__viewport {
    width: 100%;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
    background: transparent;
    min-height: var(--syn-carousel-stage-height);
    perspective: 75rem;
    padding: var(--spacing-200) var(--spacing-600);
    box-sizing: border-box;
}

.syn-carousel__track {
    position: relative;
    width: 100%;
    min-height: var(--syn-carousel-stage-height);
    overflow: visible;
    perspective: 75rem;
}

.syn-carousel__slide {
    position: absolute;
    left: 50%;
    top: calc(100% - var(--syn-carousel-card-min-height, 20rem) / 2 - var(--spacing-200));
    width: min(46%, 27.5rem);
    display: flex;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.82);
    opacity: 0;
    pointer-events: auto;
    z-index: 1;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .35s ease, filter .35s ease;
    will-change: transform, opacity;
    box-sizing: border-box;
    cursor: pointer;
}

.syn-carousel__viewport.is-dragging {
    cursor: grabbing;
}

.syn-carousel__card {
    width: 100%;
    height: auto;
    border: thin solid var(--color-border-default);
    background: var(--color-surface-primary);
    border-radius: var(--border-radius-500) 0 0 0;
    box-sizing: border-box;
    min-height: var(--syn-carousel-card-min-height, auto);

    box-shadow: var(--syn-carousel-shadow);

    transition: box-shadow .35s ease, border-color .35s ease;
    padding: 0;
}

.syn-carousel__card .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) var(--spacing-300);
    row-gap: var(--spacing-200);
}

.syn-carousel__card-head {
    align-self: stretch;
    text-align: left;
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__card-title {
    display: block;
    word-break: break-word;
    overflow-wrap: break-word;
}
.syn-carousel__card-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--spacing-125);
}

.syntphony-cards-carousel-widget .syn-carousel__card-icon .material-symbols-rounded {
    font-size: var(--syn-carousel-card-icon-size);
    flex-shrink: 0;
}

.syn-carousel__card-icon .elementor-icon,
.syn-carousel__card-icon svg,
.syn-carousel__card-icon i {
    font-size: var(--syn-carousel-card-icon-size);
    color: var(--color-primary-default);
    line-height: 1;
    flex-shrink: 0;
}

.syn-carousel__slide.is-active .syn-carousel__card {
    border-color: var(--syn-carousel-accent);
    box-shadow: 0 0 var(--spacing-300) color-mix(in srgb, var(--color-primary-default) 30%, transparent);
}

.syn-carousel__slide.is-near:hover .syn-carousel__card {
    border-color: color-mix(in srgb, var(--color-primary-default) 26%, transparent);
}

.syn-carousel__card-row {
    display: block;
}

.syn-carousel__card-row:last-child {
    flex: 1;
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__card-kicker {
    margin: 0;
    color: var(--gray-ntt-60);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}

.elementor .syntphony-cards-carousel-widget .syn-carousel__card-value {
    margin: 0;
    color: var(--color-body);
    font-size: var(--text-md);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}

.syn-carousel__nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-100);
    align-items: center;
}

/* Sizing, shape and icon styles come from the generic .btn--icon class. */

@media (max-width: 56.25rem) {
    .syn-carousel__viewport {
        padding: var(--spacing-200) var(--spacing-250);
    }

    .syn-carousel__slide {
        width: min(68%, 22.5rem);
    }
}

@media (max-width: 36.25rem) {
    .syntphony-cards-carousel-widget {
        gap: var(--spacing-150);
    }

    .syn-carousel__viewport {
        padding: 0 var(--spacing-150);
        perspective: 56.25rem;
    }

    .syn-carousel__viewport,
    .syn-carousel__track {
        min-height: var(--syn-carousel-stage-height);
    }

    .syn-carousel__slide {
        width: min(92%, 22.5rem);
    }

    .syn-carousel__track {
        perspective: 56.25rem;
    }

    .syn-carousel__card {
        padding: 0;
    }

    .syn-carousel__card .card__content {
        padding: var(--spacing-200);
        row-gap: var(--spacing-150);
    }

    .syn-carousel__card-head {
        margin-bottom: var(--spacing-150);
    }

    .elementor .syntphony-cards-carousel-widget .syn-carousel__card-title {
        font-size: var(--text-lg);
    }

}

@media (max-width: 576px) {
    .syntphony-cards-carousel-widget {
        --syn-carousel-card-icon-size: var(--size-250);
        --syn-carousel-intro-icon-size: var(--size-500);
    }
}