.why {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.why-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 100px;
}

.why-top-left {
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.why-top-left h1 {
    font-size: 48px;
}

.why-top p {
    max-width: 450px;
    align-self: flex-end;
}

.why-img {
    height: 400px;
    background-image: url(/../assets/img/why.png); /* Ensure this path is correct */
    background-size: cover;
    border-radius: 30px;
}

/* --- Styles for the scrolling bottom section --- */
.why-bottom {
    margin-top: 8vh;
    overflow: hidden; /* Crucial: Hides the content outside the viewport */
    width: 100%; /* Ensure it takes full available width */
    /* Remove display: flex and gap from here as it's now a viewport */
    /* You can add a background or other styling to the viewport itself if needed */
    position: relative; /* Useful if you want to add fade-out effects at edges */
}

.scrolling-text-wrapper {
    display: flex; /* Lays out items in a single row */
    white-space: nowrap; /* Prevents items from wrapping to the next line */
    /* The width will be determined by its content (original + duplicated items) */
    animation: scroll-left 40s linear infinite; /* Adjust duration for speed */
}

.scrolling-text-wrapper:hover {
    animation-play-state: paused; /* Optional: Pause animation on hover */
}

.scroll-item {
    display: flex; /* To align h1 and icon within each item */
    align-items: center; /* Vertically center h1 and icon */
    padding: 10px 40px; /* Add horizontal spacing between items (replaces 'gap') */
    /* flex-shrink: 0; This is good practice for flex items in a scrolling container */
}

.scroll-item h1 {
    font-size: 48px; /* As per your original style */
    font-weight: 400;
    margin: 0; /* Reset default h1 margin */
    margin-right: 20px; /* Space between text and icon */
    color: #333; /* Example text color */
    text-transform: uppercase;
}

.scroll-item i.bi-arrow-up-right {
    font-size: 36px; /* Adjust icon size as needed */
    color: #555; /* Example icon color */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.scroll-icon {
    background-color: #efefef;
    height: 74px;
    width: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* This moves the wrapper left by the width of ONE set of original items.
           Since the wrapper contains two sets, this creates the seamless loop. */
        transform: translateX(-50%);
    }
}

/* Accessibility: Reduce motion if the user prefers */
@media (prefers-reduced-motion: reduce) {
    .scrolling-text-wrapper {
        animation: none; /* Turn off animation */
        /* You might want to provide a different static layout here,
       or allow horizontal scrolling with a scrollbar if animation is off.
       For now, it will just show the beginning of the list.
       To make it scrollable without animation:
       overflow-x: auto;
       white-space: normal; (if you want wrapping)
       justify-content: flex-start;
    */
    }
}

@media only screen and (max-width: 800px) {
    .why-top {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-top-left {
        gap: 5vh;
    }

    .why-top-left h1 {
        font-size: 32px;
    }

    .scroll-item h1 {
        font-size: 24px;
    }

    .scroll-item i.bi-arrow-up-right {
        font-size: 18px;
    }

    .scroll-icon {
        height: 50px;
        width: 50px;
    }

    .scroll-item {
        padding: 10px 20px;
    }
}