html, body {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*overflow-x: hidden;*/
}


.card {
    position: absolute;
    width: 90%;
    max-width: 32rem;
    /* height: 25rem; */
    border-radius: 1rem;
    transition: all 0.8s ease-in-out;
}

.card-center {
    transform: scale(1);
    z-index: 10;
}

.card-left {
    transform: translateX(-15%) scale(0.9);
    z-index: 5;
}

.card-right {
    transform: translateX(15%) scale(0.9);
    z-index: 5;
}











@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.scrolling-wrapper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
.scrolling-content {
    display: flex;
    animation: scroll 50s linear infinite;
}










/* Scroll animation */
.scroll-container {
    overflow: hidden;
    height: 250px;
    position: relative;
    width: 100%;
}

/* Default: Vertical Scroll */
.scrolling {
    display: flex;
    flex-direction: column;
    animation: scrollUp 15s linear infinite; /* Speed increased */
}

.scrolling.reverse {
    animation: scrollDown 15s linear infinite; /* Speed increased */
}

/* Ensure seamless looping by duplicating content */
.scroll-content {
    display: flex;
    flex-direction: column;
}

/* Faster Vertical Scrolling */
@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Mobile View: Horizontal Scrolling */
@media (max-width: 768px) {
    .scroll-container {
        height: auto;
        width: 100%;
    }

    .scrolling {
        flex-direction: row;
        animation: scrollLeft 15s linear infinite; /* Speed increased */
    }

    .scrolling.reverse {
        animation: scrollRight 15s linear infinite; /* Speed increased */
    }

    .scroll-content {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    /* Faster Horizontal Scrolling */
    @keyframes scrollLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    @keyframes scrollRight {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0); }
    }
}




@keyframes scrollText {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
.scrolling-text {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: scrollText 10s linear infinite;
}