.swiper-pagination-bullet {
    background-color: var(--clr-primary);
}

#slider-cloud .slider-content>* {
    animation: 0.5s showSliderContent ease-out forwards;
}

@keyframes showSliderContent {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (width > 992px) {
    .connecting-line {
        position: relative;
        isolation: isolate;
    }

    .connecting-line::before {
        --clr: var(--clr-primary);
        content: "";
        position: absolute;
        right: 95%;
        top: 0;
        width: 100px;
        height: 100%;
        /* background-color: red; */
        background-image:
            linear-gradient(to right, var(--clr), var(--clr)),
            linear-gradient(to right, var(--clr), var(--clr)),
            linear-gradient(to right, var(--clr), var(--clr)),
            linear-gradient(to right, var(--clr), var(--clr)),
            linear-gradient(to right, var(--clr), var(--clr)),
            linear-gradient(to right, var(--clr), var(--clr)),
            radial-gradient(var(--clr) 50%, transparent 50%);
        background-repeat: no-repeat;
        background-position: right top 12%, right top 37%, left center, right bottom 37%, right bottom 12%, left 40% center, left -4px center;
        background-size: 60% 5px, 60% 5px, 40% 5px, 60% 5px, 60% 5px, 5px 76%, 30px 30px;
        z-index: -1;
    }
}

#wcu {
    counter-reset: wcu;
}

.wcu-box {
    counter-increment: wcu;
    position: relative;
    outline: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
}

.wcu-box::before {
    content: counter(wcu, decimal-leading-zero);
    font-size: 2rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    opacity: 0.3;
    transition: 0.3s;
}

.wcu-box:hover {
    outline: 1px solid rgba(255, 255, 255);
}

.wcu-box:hover::before {
    opacity: 1;
}

.wcu .wcu-box .icon {
    font-size: 4rem;
}