/* Ensures elements start hidden for smooth entrance animations */
        [class*="animate-fadeIn"] { opacity: 0; }
        
        /* Custom Masonry Grid Columns (for Grid 1) */
        @media (min-width: 1024px) {
            .masonry-grid {
                column-count: 3;
                column-gap: 1rem;
            }
            .masonry-item {
                break-inside: avoid;
                margin-bottom: 1rem;
            }
        }
        @media (max-width: 1023px) and (min-width: 640px) {
            .masonry-grid {
                column-count: 2;
                column-gap: 1rem;
            }
            .masonry-item {
                break-inside: avoid;
                margin-bottom: 1rem;
            }
        }

        /* Overlapping Collage Styles (Grid 3) */
        .collage-container {
            position: relative;
            height: 600px; /* Fixed height for the collage effect */
        }
        .collage-item-1 { z-index: 10; transform: rotate(-3deg); top: 0; left: 0; }
        .collage-item-2 { z-index: 20; transform: rotate(2deg); top: 50px; left: 35%; }
        .collage-item-3 { z-index: 30; transform: rotate(-1deg); top: 150px; left: 10%; }
        .collage-item-4 { z-index: 40; transform: rotate(4deg); top: 100px; right: 0; }
        
        /* Carousel Scrolling (Grid 5) */
        .carousel-snap {
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }
        .carousel-snap > * {
            scroll-snap-align: start;
        }