.sptc-carousel {
    --sptc-per-view: 5;
    --sptc-gap: 20px;
    --sptc-card-min-height: 430px;
    --sptc-dot-size: 9px;
    --sptc-dot-active-width: 26px;
    --sptc-dot-gap: 8px;
    --sptc-dot-margin: 22px;
    position: relative;
    width: 100%;
    color: #fff;
}

.sptc-carousel *, .sptc-carousel *::before, .sptc-carousel *::after { box-sizing: border-box; }

.sptc-main {
    position: relative;
    width: 100%;
}

.sptc-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    border-radius: 20px;
    outline: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sptc-viewport::-webkit-scrollbar { display: none; }

.sptc-track {
    display: flex;
    align-items: stretch;
    gap: var(--sptc-gap);
    width: 100%;
    min-width: 100%;
}

.sptc-slide {
    display: flex;
    flex: 0 0 calc((100% - (var(--sptc-gap) * (var(--sptc-per-view) - 1))) / var(--sptc-per-view));
    min-width: 0;
    scroll-snap-align: start;
}


.sptc-card.sptcg-open-popup {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(87, 145, 255, .28);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sptc-card {
    position: relative;
    display: flex;
    width: 100%;
    min-height: var(--sptc-card-min-height);
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
    border: 1px solid rgba(87, 145, 255, .28);
    background: linear-gradient(180deg, #071e50 0%, #06173c 100%);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
    transform: translateY(0);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.sptc-height-dynamic .sptc-card {
    min-height: 0;
    height: auto;
}

.sptc-card:hover,
.sptc-card:focus {
    transform: translateY(-6px);
    border-color: rgba(84, 162, 255, .74);
    box-shadow: 0 24px 55px rgba(4, 35, 99, .45);
}

.sptc-thumb {
    position: relative;
    height: 170px;
    flex: 0 0 auto;
    background: radial-gradient(circle at 25% 20%, rgba(44, 188, 255, .52), transparent 30%), linear-gradient(135deg, #0B2C74, #071429);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.sptc-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 13, 36, 0) 0%, rgba(3, 13, 38, .88) 100%);
}

.sptc-thumb-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 75% 12%, rgba(255,255,255,.12), transparent 25%), linear-gradient(135deg, rgba(0, 43, 120, .15), rgba(0, 0, 0, .3));
}

.sptc-icon {
    position: absolute;
    top: 142px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    color: #fff;
    background: #25bceb;
    box-shadow: 0 12px 24px rgba(0,0,0,.28), inset 0 0 0 3px rgba(255,255,255,.22);
}

.sptc-icon svg { width: 25px; height: 25px; stroke-width: 1.85; stroke: currentColor; }

.sptc-body { display: flex; flex: 1; flex-direction: column; padding: 35px 22px 22px; }
.sptc-category { display: inline-flex; width: fit-content; margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.sptc-title { margin: 0 0 10px; color: #fff; font-size: 21px; font-weight: 800; line-height: 1.12; }
.sptc-excerpt { margin: 0 0 20px; color: #d9e4ff; font-size: 15px; line-height: 1.55; opacity: .92; }
.sptc-link { margin-top: auto; color: #f4b937; font-size: 15px; font-weight: 800; letter-spacing: .01em; }

.sptc-arrow {
    z-index: 6;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #08347d;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 35px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 31px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.sptc-arrow:hover { transform: scale(1.06); background: #fff; }
.sptc-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.sptc-arrows-sides .sptc-arrow,
.sptc-arrows-outside .sptc-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.sptc-arrows-sides .sptc-prev { left: 8px; }
.sptc-arrows-sides .sptc-next { right: 8px; }
.sptc-arrows-outside .sptc-prev { left: -58px; }
.sptc-arrows-outside .sptc-next { right: -58px; }
.sptc-arrows-sides .sptc-arrow:hover,
.sptc-arrows-outside .sptc-arrow:hover { transform: translateY(-50%) scale(1.06); }

.sptc-arrows-top-right .sptc-main,
.sptc-arrows-bottom-left .sptc-main,
.sptc-arrows-bottom-center .sptc-main,
.sptc-arrows-bottom-right .sptc-main { padding-bottom: 68px; }
.sptc-arrows-top-right .sptc-main { padding-top: 62px; padding-bottom: 0; }
.sptc-arrows-top-right .sptc-arrow,
.sptc-arrows-bottom-left .sptc-arrow,
.sptc-arrows-bottom-center .sptc-arrow,
.sptc-arrows-bottom-right .sptc-arrow { position: absolute; }
.sptc-arrows-top-right .sptc-prev { top: 0; right: 56px; }
.sptc-arrows-top-right .sptc-next { top: 0; right: 0; }
.sptc-arrows-bottom-left .sptc-prev { bottom: 0; left: 0; }
.sptc-arrows-bottom-left .sptc-next { bottom: 0; left: 56px; }
.sptc-arrows-bottom-center .sptc-prev { bottom: 0; left: calc(50% - 52px); }
.sptc-arrows-bottom-center .sptc-next { bottom: 0; left: calc(50% + 4px); }
.sptc-arrows-bottom-right .sptc-prev { bottom: 0; right: 56px; }
.sptc-arrows-bottom-right .sptc-next { bottom: 0; right: 0; }

.sptc-dots {
    display: flex;
    gap: var(--sptc-dot-gap);
    align-items: center;
    width: 100%;
    margin-top: var(--sptc-dot-margin);
}
.sptc-no-dots .sptc-dots { display: none; }
.sptc-dots-bottom-left .sptc-dots { justify-content: flex-start; }
.sptc-dots-bottom-center .sptc-dots { justify-content: center; }
.sptc-dots-bottom-right .sptc-dots { justify-content: flex-end; }
.sptc-dots-top-right .sptc-dots { position: absolute; top: 0; right: 0; justify-content: flex-end; margin-top: 0; pointer-events: auto; }

.sptc-dot {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    flex: 0 0 auto;
    width: var(--sptc-dot-size);
    height: var(--sptc-dot-size);
    min-width: var(--sptc-dot-size);
    min-height: var(--sptc-dot-size);
    border: 0 !important;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    transition: width .25s ease, background .25s ease, opacity .25s ease;
}
.sptc-dot.is-active { width: var(--sptc-dot-active-width); background: #f4b937; }

.sptc-empty { padding: 22px; border-radius: 14px; color: #fff; background: #061B46; }

@media (max-width: 1024px) {
    .sptc-carousel { --sptc-per-view: 2; }
    .sptc-arrows-outside .sptc-prev { left: 4px; }
    .sptc-arrows-outside .sptc-next { right: 4px; }
}
@media (max-width: 767px) {
    .sptc-carousel { --sptc-per-view: 1; }
    .sptc-height-fixed .sptc-card { min-height: 390px; }
    .sptc-title { font-size: 20px; }
    .sptc-arrow { width: 40px; height: 40px; font-size: 28px; }
}