.spacer {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-size: 1.5rem;
            font-weight: bold;
            color: #555;
        }

        /* Infographic Section Container */
        .infographic-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px;
            box-sizing: border-box;
        }

        /* Responsive Grid System */
        .infographic-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 40px 30px;
            align-items: center;
        }

        /* Individual Infographic Block Styles */
        .info-block {
            opacity: 0;
            transform: translateY(50px);
            /* Using a transition that feels snappy resetting but elegant revealing */
            transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .info-block img {
            max-width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }

        /* Scroll Triggered Active Animation Class */
        .info-block.reveal {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Grid Layout Placement matching the target graphic structure */
        .block-1 {
            grid-column: span 4;
        }

        .block-2 {
            grid-column: span 4;
            grid-row: 2;
        }

        .block-3 {
            grid-column: span 4;
            grid-row: 1 / span 2;
        }

        .block-4 {
            grid-column: span 4;
        }

        .block-5 {
            grid-column: span 4;
        }
		
		.block-5 img { max-height: 310px; }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            .infographic-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
            .block-1 { grid-column: span 1; grid-row: auto; }
            .block-2 { grid-column: span 1; grid-row: auto; }
            .block-3 { grid-column: span 1; grid-row: auto; }
            .block-4 { grid-column: span 1; grid-row: auto; }
            .block-5 { grid-column: span 2; grid-row: auto; max-width: 50%; margin: 0 auto; }
        }

        @media (max-width: 600px) {
            .infographic-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .block-1, .block-2, .block-3, .block-4, .block-5 {
                grid-column: span 1;
                grid-row: auto;
                max-width: 100%;
            }
        }
		
/* Container Flex Grid Layout */
.infographic-section {
    width: 100%;
    padding: 60px 0;
}

.infographic-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns side columns to top */
    gap: 40px; /* Space between the three columns */
    max-width: 1200px;
    margin: 0 auto;
}

/* Three Columns Configuration */
.info-col {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Vertical gap between stacked blocks (1 & 2, 4 & 5) */
    flex: 1;
}

/* Centers the middle column (Block 3) vertically relative to the sides */
.center-col {
    align-self: center;
}

/* Image Core Responsiveness */
.info-block {
    width: 100%;
}

.info-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Preserves your existing Scroll-Reveal animation styles */
.info-block {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.info-block.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Clean fallback layout for tablets/mobile screens */
@media (max-width: 768px) {
    .infographic-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .info-col {
        width: 100%;
        gap: 40px;
    }
    
    .center-col {
        align-self: initial;
    }
}