.carousel {
    margin: auto;
    width: 50vw; /* 2. Changed width to make the visible window narrower */
    display: flex;
    overflow: hidden;
    
    /* 3. The Mask Image for the fade effect */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.group {
    display: flex;
    gap: 3vw;
    align-items: center;
    justify-content: center;
    padding-right: 3vw; 
    
    /* 1. Changed 15s to 20s to slow it down */
    animation: spin 25s infinite linear; 
    flex-shrink: 0; 
}

.card {
    width: 8vw; 
    height: 8vh;
    object-fit: contain;
    border: 0px;
}

@keyframes spin {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.review-section {
    background-color: rgba(114, 239, 255, 0.393); 
    border: solid 1px rgb(43, 230, 255); 
    height: 60vh;
    display: flex;
    align-items: center;
    position: relative;
}

.review-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* Makes it snap to bubbles */
    gap: 20px;
    padding: 0 10%;
    width: 100%;
    height: 100%;
    align-items: center;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.review-container::-webkit-scrollbar { display: none; } /* Hide for Chrome/Safari */

.review-bubble {
    /* 1. Prevent the "Squeeze": This stops the bubble from shrinking horizontally */
    flex-shrink: 0; 
    
    /* 2. Responsive Width: Use 60% on desktop, but 85% on mobile */
    flex-basis: 60%; 
    
    scroll-snap-align: center;
    transition: opacity 0.5s;
    
    /* 3. Height protection: ensures the bubble doesn't get squashed */
    display: flex;
    flex-direction: column;
}

.bubble-content {
    background: white;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    
    /* 4. Text Handling: allow it to wrap naturally but stay within the bubble */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.meta-data {
    font-weight: normal;
    color: rgba(26, 26, 26, 0.767);
}

.reviewer-name { font-weight: bold; margin-bottom: 5px; }

/* The Fade Effect: Items not in center look faded */
.review-container > div { opacity: 0.3; transition: 0.5s; }
.review-container > div:only-child, 
.review-container > div:target, 
.review-container [data-active="true"] { opacity: 1; }

/* Navigation Buttons */
.nav-btn {
    position: absolute;
    z-index: 8;
    background: white;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}
.prev { left: 20px; }
.next { right: 20px; }
.hidden { visibility: hidden; }


 /* --- 6. RESPONSIVE / MOBILE --- */
        @media (max-width: 900px) {
            .group {
                gap: 6vw;
                padding-right: 6vw;
            }

            .review-section {
                height: 30vh;
                max-height: 30vh;
                margin: 10vh 0;
            }
        }

@media (max-width: 900px) {
    .review-bubble {
        flex-basis: 85%; /* Give the text more horizontal space on mobile */
    }
    
    .review-section {
        /* If a comment is still too long, 'min-height' is safer than 'height' */
        height: auto;
        min-height: 35vh; 
        padding: 20px 0;
    }
}