/* Base styles */

                /* Canvas for Particle Background */
                #bg-canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0; /* Keep it behind the header content */
                }


                /* Timeline-specific styles */
                .timeline-container {
                position: relative;
                padding: 0 10px;
                }

                .timeline-container::after {
                content: '';
                position: absolute;
                width: 2px;
                background-color: var(--tw-colors-secondary-dark);
                top: 0;
                bottom: 0;
                left: 50%;
                margin-left: -1px;
                /* Responsive timeline line adjustment */
                @media (max-width: 768px) {
                left: 25px; /* Move line to the left on mobile */
                }
                }

                .timeline-event {
                padding: 10px 40px;
                position: relative;
                background-color: inherit;
                width: 50%;
                }

                .timeline-event::after {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                right: -8px;
                background-color: var(--tw-colors-accent);
                border: 4px solid var(--tw-colors-primary-dark);
                top: 15px;
                border-radius: 50%;
                z-index: 1;
                }

                .left {
                left: 0;
                }

                .right {
                left: 50%;
                }

                .left::after {
                left: unset;
                right: -8px;
                }

                .right::after {
                left: -8px;
                }

                .left .event-content {
                margin-right: 25px;
                text-align: right;
                }

                .right .event-content {
                margin-left: 25px;
                text-align: left;
                }

                /* Mobile-specific adjustments for timeline */
                @media screen and (max-width: 768px) {
                .timeline-container::after {
                left: 25px;
                }

                .timeline-event {
                width: 100%;
                padding-left: 70px;
                padding-right: 15px;
                left: 0 !important;
                }

                .timeline-event::after {
                left: 17px !important;
                }

                .left .event-content, .right .event-content {
                margin: 0;
                text-align: left;
                }
                }

                /* Team Card Hover Effect */
                .team-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                }

                .team-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(100, 255, 218, 0.1); /* Accent glow on hover */
                }