.xelo-banner-swiper {
    display: none;
}

/* Smooth infinite marquee animation */
.xelo-banner-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

@media (max-width: 640px) {
    .xelo-banner-swiper .swiper-wrapper {
        transition-timing-function: none !important;
    }
}

@media (max-width: 1599px) {
    .xelo-banner-wrap {
        padding: 0 10px;
    }
    .xelo-banner-card {
        display: none !important;
    }

    .xelo-banner-swiper {
        display: block;
        margin: 0 auto;
        padding: 20px 0;
    }

    .xelo-banner-swiper .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .xelo-banner-swiper .item {
        width: 100%;
        height: 100%;
    }

    .xelo-banner-swiper .item .main img {
        width: 100%;
        border-radius: 30px;
    }

    /* Item-2 styles */
    .xelo-banner-swiper .item-2 {
        position: relative;
    }

    .xelo-banner-swiper .item-2 .shape-1,
    .xelo-banner-swiper .item-2 .shape-2,
    .xelo-banner-swiper .item-2 .shape-3,
    .xelo-banner-swiper .item-2 .shape-4 {
        position: absolute;
    }

    .xelo-banner-swiper .item-2 .shape-1 img,
    .xelo-banner-swiper .item-2 .shape-2 img,
    .xelo-banner-swiper .item-2 .shape-3 img,
    .xelo-banner-swiper .item-2 .shape-4 img {
        max-width: 127px;
    }

    .xelo-banner-swiper .item-2 .shape-1 {
        z-index: 1;
        left: 30px;
        bottom: 56px;
        animation: xelo-shake-animation 2s ease infinite;
        transform-origin: 50% 50%;
    }

    .xelo-banner-swiper .item-2 .shape-1 span {
        color: #0d0d0d;
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
        background: #ffbd2e;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 26px;
        display: inline-block;
        padding: 2px 32px;
        transform: rotate(-8deg);
    }

    .xelo-banner-swiper .item-2 .shape-2 {
        z-index: 2;
        left: 60px;
        bottom: 24px;
        animation: xelo-shake-animation-2 2s ease infinite;
        transform-origin: 50% 50%;
    }

    .xelo-banner-swiper .item-2 .shape-2 span {
        color: #0d0d0d;
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
        background: #0ad954;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 26px;
        display: inline-block;
        padding: 2px 32px;
        transform: rotate(8deg);
    }

    .xelo-banner-swiper .item-2 .shape-3 {
        left: 30px;
        bottom: 56px;
    }

    .xelo-banner-swiper .item-2 .shape-3 img {
        animation: opacity-light 1.5s ease-in-out infinite;
    }

    .xelo-banner-swiper .item-2 .shape-4 {
        left: 60px;
        bottom: 24px;
    }

    .xelo-banner-swiper .item-2 .shape-4 img {
        animation: opacity-light 1.5s ease-in-out infinite;
        animation-delay: 0.75s;
    }

    /* Item-3 styles */
    .xelo-banner-swiper .item-3 {
        position: relative;
    }

    .xelo-banner-swiper .item-3 .shape-1 {
        left: 0;
        right: 0;
        top: 40px;
        z-index: 2;
        width: 130px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
    }

    .xelo-banner-swiper .item-3 .shape-1 img {
        max-width: 100%;
    }

    .xelo-banner-swiper .item-3 .shape-2 {
        top: 90px;
        left: 45px;
        z-index: 1;
        width: 122px;
        position: absolute;
    }

    .xelo-banner-swiper .item-3 .shape-2 img {
        width: 100%;
        animation: xelo-move-horizontal 5s linear infinite;
    }

    .xelo-banner-swiper .item-3 .shape-3 {
        top: 160px;
        z-index: 4;
        right: 35px;
        width: 113px;
        position: absolute;
    }

    .xelo-banner-swiper .item-3 .shape-3 img {
        max-width: 100%;
        animation: xelo-move-horizontal-reverse 5s linear infinite;
    }

    /* Item-4 styles */
    .xelo-banner-swiper .item-4 {
        overflow: hidden;
        position: relative;
    }

    .xelo-banner-swiper .item-4 .shape {
        left: 0;
        right: 0;
        z-index: 1;
        bottom: -25px;
        object-fit: cover;
        position: absolute;
        text-align: center;
    }

    .xelo-banner-swiper .item-4 .shape svg {
        width: max(320px, 38vw);
        height: max(180px, 18vw);
        object-fit: cover;
    }

    /* Item-5 styles */
    .xelo-banner-swiper .item-5 {
        position: relative;
    }

    .xelo-banner-swiper .item-5 .elementor-shape {
        top: 80px;
        left: 40px;
        right: 40px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
    }

    .xelo-banner-swiper .item-5 .elementor-shape .shape-1 {
        position: relative;
    }

    .xelo-banner-swiper .item-5 .elementor-shape .shape-1 > img {
        width: 100%;
    }

    .xelo-banner-swiper .item-5 .wrap {
        position: relative;
    }

    .xelo-banner-swiper .item-5 .wrap .shape-2 {
        left: 85px;
        right: 85px;
        top: -30px;
        width: 49px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
    }

    .xelo-banner-swiper .item-5 .wrap .shape-2 img {
        width: 100%;
        animation: xelo-rotate 2s ease-in-out infinite;
    }

    .xelo-banner-swiper .item-5 .shape-3 {
        left: 40px;
        z-index: 1;
        bottom: 118px;
        position: absolute;
    }

    .xelo-banner-swiper .item-5 .shape-3 .text {
        font-size: 16px;
        font-weight: 500;
        color: #551f61;
        padding: 1px 10px;
        position: relative;
        background-color: #00dd3b;
        border-radius: 13px 3px 3px 13px;
    }

    .xelo-banner-swiper .item-5 .shape-4 {
        left: 83px;
        z-index: 1;
        bottom: 93px;
        position: absolute;
    }

    .xelo-banner-swiper .item-5 .shape-4 .text {
        font-size: 16px;
        font-weight: 500;
        color: #4f0c30;
        padding: 1px 10px;
        background-color: #ff5f1c;
        border-radius: 3px 13px 13px 3px;
        animation: xelo-move-horizontal-reverse-2 5s linear infinite;
    }

    .xelo-banner-swiper .item-5 .shape-4 .text::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 67px;
        height: 5px;
        z-index: 2;
        background: rgba(0, 0, 0, 0.1);
    }

    .xelo-banner-swiper .item-5 .shape-5 {
        left: 169px;
        bottom: 50px;
        position: absolute;
    }

    .xelo-banner-swiper .item-5 .shape-5 img {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .xelo-banner-swiper .item-4 .shape svg {
        width: max(320px, 47vw);
        height: max(180px, 23vw);
    }
}

@media (max-width: 1024px) {
    .xelo-banner-swiper .item-4 .shape svg {
        width: max(320px, 65vw);
        height: max(180px, 29vw);
    }
}

@media (max-width: 992px) {
    .xelo-banner-swiper {
        padding: 10px 0;
    }
}

@media (max-width: 768px) {
    .xelo-banner-swiper .item-4 .shape svg {
        width: max(320px, 96vw);
        height: max(180px, 43vw);
    }
}

@media (max-width: 640px) {
    .xelo-banner-swiper .item-4 .shape svg {
        width: max(320px, 200vw);
        height: max(180px, 80vw);
    }
}