.masonary-container {
    position: relative;
}
.masonry-background {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    z-index: 0; /* Puts it behind everything */
    background: #111; /* Fallback color */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px; /* Gap between rows */
}

/* Dark Overlay so text is readable */
.masonry-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Adjust opacity here (0.6 = 60% dark) */
    z-index: 10;
}

/* --- 2. The Scrolling Rows --- */
.masonry-row {
    display: flex;
    width: 100%;
    transform: rotate(-2deg); /* Optional: Tilted artistic look */
    position: relative;
    left: -5%; /* To cover the tilt edges */
    width: 110%; /* To cover the tilt edges */
}

/* The Track that moves */
.slide-track {
    display: flex;
    gap: 15px; /* Gap between images */
    animation: scroll 40s linear infinite;
    will-change: transform; /* Performance optimization */
}

/* Reverse direction for the middle row for a cool effect */
.masonry-row:nth-child(even) .slide-track {
    animation-direction: reverse;
}

/* --- 3. The Images --- */
.slide-item {
    position: relative;
    width: 250px; /* Base width */
    flex-shrink: 0;
    height: 30vh; /* Responsive height based on viewport */
    border-radius: 10px;
    overflow: hidden;
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the box without stretching */
    filter: grayscale(30%); /* Optional: stylistic touch */
    transition: 0.3s;
}

/* --- 4. Animation Keyframes --- */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    } /* Moves exactly half way (the length of 1 set) */
}

/* --- DEMO: Foreground Content Styling (Delete this later) --- */
.hero-content {
    position: absolute;
    z-index: 20;
    top: 0;
    width: 100%;
}
.hero-content h1 {
    margin-bottom: 10px;
}
.hero-content p {
    opacity: 0.8;
}
.hero-content .our-entrepreneurs h2 {
    text-align: center;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .masonry-row {
        transform: rotate(0deg);
        width: 100%;
        left: 0;
    }
    .slide-item {
        height: 25vh;
        width: 180px;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
}