.flipper-dots .flipper-dot {
        width: 21px;
        height: 21px;
        border-radius: 100%;
        background: var(--color-primary-light);
        transition: all 0.7s ease-in-out;
    }

:is(.flipper-dots .flipper-dot):hover,.active:is(.flipper-dots .flipper-dot) {
            background: var(--color-primary);
        }

.vue-flipper {
    max-width: 670px;
}

.vue-flipper .flipper-circle {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        color: #ffffff;
        z-index: 10;
    }

:is(:is(.vue-flipper .flipper-circle) svg) text {
                letter-spacing: 0px;
                font-family: var(--font-heading);
                fill: var(--color-secondary-dark);
                font-weight: 800;
                text-transform: uppercase;
            }

:is(:is(:is(.vue-flipper .flipper-circle) svg) text):nth-child(3) {
                    letter-spacing: 1.5px;
                }

:is(.vue-flipper .circle-bg) svg {
            position: absolute;
            inset: 0;
            height: 100%;
            width: 100%;
            color: #ffffff;
        }

@media (max-width: 639.98px) {
        .vue-flipper .flipper-content {
            /* Horizontal padding (e.g., 15%) creates the peek-through effect */
            padding: 0 24px;
            /* This ensures the snapped item aligns correctly with the new padding */
            scroll-padding: 0 24px;
        }

        .vue-flipper .arm-content {
            /* This was w-[90%], now it's 100% of the modified container width */
            width: 100%;

            transform: scale(0.95);
            opacity: 0.7;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        .vue-flipper .arm-content.active-slide {
            transform: scale(1);
            opacity: 1;
        }
    }

.vue-flipper .flipper-content {
        scrollbar-width: none;
    }

:is(.vue-flipper .flipper-content)::-webkit-scrollbar {
            display: none;
        }

@media (min-width: 640px) {
                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(1) .arm {
                        top: 4.2%;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(2) .arm {
                        top: 50%;
                        right: 4.2%;
                        transform-origin: center;
                        transform: translateY(-50%) translateX(21%) rotate(90deg);
                    }

                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(2) .flipper-content-wrapper {
                        rotate: 90deg;
                    }
                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(3) .arm {
                        bottom: 4.2%;
                        right: 50%;
                        transform-origin: center;
                        transform: translateX(50%) rotate(180deg);
                    }

                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(3) .flipper-content-wrapper {
                        rotate: 180deg;
                    }
                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(4) .arm {
                        top: 50%;
                        left: 4.2%;
                        transform-origin: center;
                        transform: translateY(-50%) translateX(-21%) rotate(-90deg);
                    }

                    :is(:is(.vue-flipper .flipper-content) .arm-content):nth-child(4) .flipper-content-wrapper {
                        rotate: -90deg;
                    }

                :is(:is(.vue-flipper .flipper-content) .arm-content) svg {
                    width: 100%;
                    height: auto;
                }

                :is(:is(.vue-flipper .flipper-content) .arm-content) .tab-border-word-wrapper {
                    --tab-border-word-rotate: rotate(0);
                }

                    :is(:is(:is(.vue-flipper .flipper-content) .arm-content) .tab-border-word-wrapper):nth-child(1) {
                        top: 47%;
                        transform: translateY(-50%);
                        left: 12%;
                        --tab-border-word-rotate: rotate(-65deg);
                    }

                    :is(:is(:is(.vue-flipper .flipper-content) .arm-content) .tab-border-word-wrapper):nth-child(2) {
                        top: 6.5%;
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    :is(:is(:is(.vue-flipper .flipper-content) .arm-content) .tab-border-word-wrapper):nth-child(3) {
                        top: 47%;
                        transform: translateY(-50%);
                        right: 12%;
                        --tab-border-word-rotate: rotate(65deg);
                    }

                    :is(:is(:is(.vue-flipper .flipper-content) .arm-content) .tab-border-word-wrapper) .tab-border-word {
                        white-space: nowrap;
                        transform: translateX(-50%) var(--tab-border-word-rotate);
                    }
                        .active:is(:is(:is(.vue-flipper .flipper-content) .arm-content) .arm) .border-arm {
                            color: var(--color-primary-light);
                        }

                        .active:is(:is(:is(.vue-flipper .flipper-content) .arm-content) .arm) .main-bg {
                            color: var(--color-primary);
                        }

                        .active:is(:is(:is(.vue-flipper .flipper-content) .arm-content) .arm) .triangle {
                            --tw-translate-y: 0;
                            background: var(--color-primary);
                        }

                        .active:is(:is(:is(.vue-flipper .flipper-content) .arm-content) .arm) .tab-border-word-wrapper {
                            opacity: 1;
                        }

                :is(:is(.vue-flipper .flipper-content) .arm-content) .border-arm {
                    color: #C6C6C6;
                }

                :is(:is(.vue-flipper .flipper-content) .arm-content) .main-bg {
                    color: #565656;
                }

                :is(:is(.vue-flipper .flipper-content) .arm-content) .triangle {
                    --tw-translate-y: -50%;
                    background: #565656;
                }
        }

.active:is(.vue-flipper .flipper-content-wrapper) {
            visibility: visible;
            opacity: 1;
        }