/* Basic reset and box-sizing */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: sans-serif; /* Use a common sans-serif font */
            line-height: 1.6;
            color: #555; /* Standard text color */
            background-color: #fff; /* Default body background */
        }

        /* Timeline Section Styling */
        .timeline-section {
            padding: 60px 20px; /* Vertical and horizontal padding */
            background-color: #f9fcf9; /* Very light green background from image */
            text-align: center; /* Center the heading */
        }

        .timeline-section h2 {
            margin-top: 0;
            margin-bottom: 40px; /* Space below the heading */
            color: #00561f; /* Dark green heading color */
            font-size: 2em; /* Adjust heading size */
        }

        /* Grid container for the timeline layout */
        .timeline-grid {
            display: grid;
            /* Define 3 columns: 1fr (flexible left text), auto (center line/points), 1fr (flexible right text) */
            grid-template-columns: 1fr auto 1fr;
            gap: 20px; /* Gap between grid columns */
            position: relative; /* Needed for absolute positioning of the vertical line */
            padding: 20px 0; /* Vertical padding within the grid */
            /* Align items to the start vertically, so text blocks align at the top */
            align-items: start;
        }

        /* Vertical timeline line (Desktop) */
        .timeline-grid::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Position line in the horizontal center */
            width: 2px;
            background-color: #a8d5a8; /* Light green line color */
            transform: translateX(-1px); /* Adjust to be precisely centered */
            z-index: 0; /* Place line behind points and text */
        }

        /* Styles for the text content blocks */
        .timeline-content {
            padding: 0 20px; /* Horizontal padding within text areas */
        }

        .timeline-content h3 {
            margin-top: 0;
            margin-bottom: 10px; /* Space below heading */
            color: #00561f; /* Dark green heading color */
            font-size: 1.2em; /* Adjust heading size */
            font-weight: bold;
        }

        .timeline-content p {
            margin: 0; /* Remove default paragraph margin */
            line-height: 1.6; /* Improve readability */
            color: #555; /* Standard text color */
        }

        /* Styles for the left text column */
        .timeline-content.text-left {
          grid-column: 1 / 2; /* Place in the first grid column */
          text-align: right; /* Align text to the right */
        }

        /* Styles for the right text column */
        .timeline-content.text-right {
          grid-column: 3 / 4; /* Place in the third grid column */
          text-align: left; /* Align text to the left */
        }

        /* Hide empty content columns to maintain grid structure without showing empty space */
        .timeline-content:empty {
            visibility: hidden; /* Hide content but keep the element in flow */
            height: 0; /* Collapse height */
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margin */
        }


        /* Styles for the center column containing points */
        .timeline-center {
          grid-column: 2 / 3; /* Place in the second (center) grid column */
          display: flex;
          justify-content: center; /* Center point horizontally within the cell */
          align-items: center; /* Center point vertically within the cell */
          position: relative; /* Needed for z-index to layer above line */
          z-index: 1; /* Ensure points are above the vertical line */
        }

        /* Style for the circular point/icon container */
        .timeline-point {
            width: 40px;
            height: 40px;
            border: 2px solid #a8d5a8; /* Light green border */
            border-radius: 50%; /* Make it round */
            background-color: #f9fcf9; /* Match section background color */
            display: flex;
            justify-content: center; /* Center icon horizontally */
            align-items: center; /* Center icon vertically */
            font-size: 20px; /* Size for the icon (unicode character in this case) */
            color: #00561f; /* Dark green icon color */
            position: relative; /* Needed for pseudo-elements (horizontal lines) */
            z-index: 2; /* Ensure point is above horizontal connectors */
        }

        /* Horizontal connector lines from point to text */
        .timeline-point::before,
        .timeline-point::after {
            content: '';
            position: absolute;
            top: 50%; /* Vertically center the line */
            width: 25px; /* Length of the connector line */
            height: 2px;
            background-color: #a8d5a8; /* Light green color */
            transform: translateY(-1px); /* Adjust for vertical alignment */
            z-index: 1; /* Below the point, above the main vertical line */
        }

        /* Position the left connector */
        .timeline-point::before {
            right: calc(100% + 1px); /* Position to the left of the point, with 1px gap */
        }

        /* Position the right connector */
        .timeline-point::after {
            left: calc(100% + 1px); /* Position to the right of the point, with 1px gap */
        }

        /* Hide horizontal lines based on the side the text content is on */
        /* If timeline-center has 'is-left-point', hide the line going right */
        .timeline-center.is-left-point .timeline-point::after {
            display: none;
        }

        /* If timeline-center has 'is-right-point', hide the line going left */
        .timeline-center.is-right-point .timeline-point::before {
            display: none;
        }


        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) { /* Apply styles below this screen width */
            .timeline-section {
                padding: 40px 10px; /* Reduce padding on smaller screens */
            }

            .timeline-grid {
                /* Switch to a 2-column layout for mobile: Point | Text */
                grid-template-columns: 60px 1fr; /* Fixed width for point, flexible for text */
                gap: 10px; /* Reduce gap */
                padding: 0; /* Remove horizontal padding */
                /* Remove the desktop central grid line */
                 &::before { display: none; }
                 /* Add a vertical line on the left side for the mobile timeline */
                 &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 30px; /* Position the line horizontally */
                    width: 2px;
                    background-color: #a8d5a8;
                    z-index: 0;
                 }
                  align-items: start; /* Align items to the start for stacked look */
            }

            /* Place all text content in the second column */
            .timeline-content,
            .timeline-content.text-left,
            .timeline-content.text-right {
                grid-column: 2 / 3; /* Force into the second grid column */
                text-align: left !important; /* Align all text to the left */
                padding: 0 10px !important; /* Adjust padding */
                visibility: visible !important; /* Ensure content is visible */
                height: auto !important; /* Ensure height is auto */
                /* Restore display for empty cells that now contain text on mobile */
                display: block !important;
            }

             /* Explicitly hide empty content cells */
           .timeline-grid > .timeline-content:empty {
                display: none; /* Use display: none on mobile to remove them entirely */
           }


            /* Place all point containers in the first column */
            .timeline-center,
            .timeline-center.is-left-point,
            .timeline-center.is-right-point {
                grid-column: 1 / 2; /* Force into the first grid column */
                justify-content: center; /* Center horizontally */
                align-items: center; /* Center vertically */
                position: relative; /* Keep relative for positioning point over line */
                z-index: 1;
                margin: 0; /* Reset any margins */
                padding: 0; /* Reset any padding */
            }

            /* Adjust the point position to sit over the new vertical line */
            .timeline-point {
                position: relative;
                left: -20px; /* Shift left by half the point width minus half the line width (40/2 - 2/2 = 19, approx 20) */
                /* Hide the horizontal connector lines on mobile */
                &::before, &::after {
                  display: none;
                }
                /* Optional: change point background/color for mobile */
                /* background-color: #a8d5a8; */
                /* color: white; */
            }
        }