.ThreadCardBg {
    height: 100vh;
    width: 100%;
    background-color: #eef2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.cardBg {
    height: 100vh;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

.cardBg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cardBg img:nth-child(1) {
    height: 25rem;
    rotate: 5deg;
    top: -10rem;
    animation: float 10s infinite linear;
}

.cardBg img:nth-child(2) {
    top: 10rem;
    width: 100%;
    object-fit: cover;
    animation: float2 10s infinite linear;
}

@keyframes float2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1rem);
        rotate: -2deg;
    }

    100% {
        transform: translateY(0);
    }
}

.cardBg img:nth-child(3) {
    /* width: 100%; */
    object-fit: cover;
    animation: float 10s infinite linear;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1rem);
        rotate: 2deg;
    }

    100% {
        transform: translateY(0);
    }
}

/* Thread Card CSS */
.ThreadCardReturn {
    position: absolute;
    top: 0rem;
    left: 1.5rem;
    height: 2rem;
    width: 2rem;
    font-size: 3rem;
    cursor: pointer;
}

.ThreadCard {
    width: 20rem;
    height: 35rem;
}

.ThreadCardContent {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.ThreadCardLogo {
    display: flex;
    justify-content: space-between;
}

.ThreadCardLogo img:nth-child(1) {
    height: 13rem;
}

.ThreadCardLogo img:nth-child(2) {
    height: 100%;
}

.ThreadCardLogoQr {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15rem;
    margin-top: 3rem;
}

.ThreadCardLogoQr img {
    width: 100%;
    object-fit: cover;
}

.ThreadCardFront,
.ThreadCardBack {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1.5rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    backface-visibility: hidden;
    animation: fade 10s infinite linear;
}

.ThreadCardBack,
.ThreadCardBackDetails {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.ThreadCardBack h1 {
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    width: 100%;
}

.ThreadCardBackDetails {
    gap: 0.8rem;
    font-size: 1rem;
}

.ThreadCardBackDetails p {
    font-size: 0.8rem;
}

.ThreadCardBackArrow {
    height: fit-content;
    width: 2.5rem;
}

.ThreadCardBack {
    transform: rotateY(180deg);
}

.ThreadCardBarcode {
    font-size: 0.8rem;
}

/*Marquee CSS*/
.marquee {
    display: flex;
    user-select: none;
    color: #fff;
    width: 100%;
    height: fit-content;
    gap: 1.5rem;
    position: absolute;
    bottom: 0;
}

.marquee_group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    font-size: 2.2rem;
    font-weight: bold;
    min-width: 100%;
    animation: scroll 15s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - 2rem));
    }
}

@media (width<1300px) {
    .marquee {
        width: 200%;
    }
}

@media (width<800px) {
    .marquee {
        gap: 1rem;
        width: 450%;
    }
}
