.about-hero {
            background: linear-gradient(to right, #1a237e, #303f9f);
            color: white;
            padding: 60px 20px 70px;
            text-align: center;
        }

        .about-section {
            max-width: 1000px;
            margin: 3rem auto;
            padding: 0 20px;
            text-align: center;
        }

        .about-section h2 {
            color: #303f9f;
            margin-bottom: 1rem;
        }

        .team-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            padding-top: 2rem;
            align-items: flex-start;
        }

        .team-card {
            flex: 0 1 calc(33.333% - 1.34rem);
            min-width: 220px;
            background-color: #f4f6ff;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
            text-align: center;
            overflow: hidden;
            cursor: pointer;

            transition:
                flex-basis 0.45s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .team-card:hover {
            box-shadow: 0 12px 25px rgba(87, 99, 236, 0.2);
        }

        .team-card.expanded {
            flex-basis: calc(66.666% - 0.67rem);
            transform: translateY(-10px);
            box-shadow: 0 12px 25px rgba(87, 99, 236, 0.2);
        }

        .team-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 1rem;
            object-fit: cover;
        }

        .team-card h4 {
            margin: 0.5rem 0;
            color: #303f9f;
        }

        .team-card p {
            font-size: 0.9rem;
            color: #666;
        }

        .team-card .title {
            font-weight: bold;
            color: #5763ec;
        }

        .team-card .bio.hidden {
            display: block;
        }

        .team-card .bio {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            margin-top: 1rem;
            text-align: left;

            transition:
                opacity 0.3s ease,
                max-height 0.45s ease;
        }

        .team-card.expanded .bio {
            opacity: 1;
            max-height: 320px;
        }

        @media screen and (max-width: 800px) {

            .team-card,
            .team-card.expanded {
                flex-basis: 100%;
            }
        }

        .timeline-horizontal {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 2rem;
            margin: 2rem 0;
            background-color: #f9faff;
            border-radius: 10px;
            box-shadow: inset 0 0 20px rgba(87, 99, 236, 0.05);
        }

        .timeline-card {
            min-width: 220px;
            flex: 0 0 auto;
            background: #fff;
            padding: 1rem;
            border-radius: 12px;
            text-align: center;
            position: relative;
            scroll-snap-align: center;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .timeline-card:hover {
            transform: translateY(-5px);
        }

        .timeline-dot {
            width: 16px;
            height: 16px;
            background-color: #5763ec;
            border-radius: 50%;
            margin: 0 auto 10px;
            position: relative;
        }

        .timeline-dot.animated::after {
            content: '';
            position: absolute;
            top: -7.5px;
            left: -7.5px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid #5763ec;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(0.95);
                opacity: 1;
            }

            100% {
                transform: scale(1.4);
                opacity: 0;
            }

        }

        .icon {
            font-size: 1.5rem;
            color: #303f9f;
            margin-bottom: 0.5rem;
        }