:root {
    --nb-static-carousel-banner-9-title-color: var(--nb-text-color-primary);
    --nb-static-carousel-banner-9-title-font-size: var(--nb-h2-font-size);
    --nb-static-carousel-banner-9-title-font-weight: var(--nb-font-weight-600);

    --nb-static-carousel-banner-9-subtitle-color: var(--nb-text-color-primary);
    --nb-static-carousel-banner-9-subtitle-font-size: var(--nb-sub-heading-s);
    --nb-static-carousel-banner-9-subtitle-font-weight: var(--nb-font-weight-400);

    --nb-static-carousel-banner-9-swipers-wrapper-bg: var(--nb-color-gray-100);
    --nb-static-carousel-banner-9-swipers-wrapper-padding-x: 30px;
    --nb-static-carousel-banner-9-swipers-wrapper-padding-y: 30px;
}

.nb-static-carousel-banner-9 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.nb-static-carousel-banner-9 .nb-heading-with-subheading .nb-title {
    color: var(--nb-static-carousel-banner-9-title-color);
    font-size: var(--nb-static-carousel-banner-9-title-font-size);
    font-weight: var(--nb-static-carousel-banner-9-title-font-weight);
}

.nb-static-carousel-banner-9 .nb-heading-with-subheading .nb-sub-heading {
    color: var(--nb-static-carousel-banner-9-subtitle-color);
    font-size: var(--nb-static-carousel-banner-9-subtitle-font-size);
    font-weight: var(--nb-static-carousel-banner-9-subtitle-font-weight);
}

.nb-static-carousel-banner-9 .nb-swipers-wrapper {
    position: relative;
    background-color: var(--nb-static-carousel-banner-9-swipers-wrapper-bg);
    padding: var(--nb-static-carousel-banner-9-swipers-wrapper-padding-y) var(--nb-static-carousel-banner-9-swipers-wrapper-padding-x);
}

.nb-static-carousel-banner-9 .nb-secondary-swiper {
    position: absolute;
    top: 30px;
    left: 30px;
    max-width: 664px;
}

.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper {
    z-index: 2;
}

.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: var(--nb-color-white);
    color: var(--nb-text-color-primary);
    font-size: 16px;
    font-weight: var(--nb-font-weight-400);
}

.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item.active,
.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item:hover,
.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item:focus,
.nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item:active {
    color: var(--nb-color-white);
    background-color: var(--nb-spec-color);
}

@media screen and (max-width: 991px) {
    :root {
        --nb-static-carousel-banner-9-swipers-wrapper-padding-x: 10px;
        --nb-static-carousel-banner-9-swipers-wrapper-padding-y: 20px;
    }

    .layout:has(.nb-static-carousel-banner-9) {
        padding: 0;
    }

    .nb-static-carousel-banner-9 .nb-swipers-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .nb-static-carousel-banner-9 .nb-secondary-swiper {
        position: relative;
        left: unset;
        top: unset;
        max-width: 100%;
    }

    .nb-static-carousel-banner-9 .nb-secondary-swiper .swiper-grid>.swiper-wrapper {
        width: 100% !important;
        gap: 10px;
    }

    .nb-static-carousel-banner-9 .nb-secondary-swiper .swiper-grid>.swiper-wrapper > * {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px) !important;
        margin-right: 0 !important;
    }

    .nb-static-carousel-banner-9 .nb-secondary-swiper .swiper .swiper-slide .nb-item {
        font-size: 12px;
    }
}

@media screen and (max-width: 576px) {
    :root {
        --nb-static-carousel-banner-9-title-font-size: 22px;
        --nb-static-carousel-banner-9-subtitle-font-size: 16px;
    }
}