/* @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap'); */
        
        .team-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Inter', sans-serif;
        }

        .team-title {
            text-align: center;
            margin-bottom: 40px;
            color: #0504aa;
            font-size: 2.5rem;
            font-weight: 900;
            font-family: 'Orbitron', monospace;
            letter-spacing: 1px;
        }

        .team-grid {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .team-member {
            display: flex;
            align-items: flex-start;
            gap: 25px;
            padding: 25px;
            border-radius: 15px;
            background: linear-gradient(135deg, rgba(76, 201, 240, 0.1), rgba(5, 4, 170, 0.05));
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .team-member::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(76, 201, 240, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .team-member:hover::before {
            left: 100%;
        }

        .team-member:hover {
            border-color: #4cc9f0;
            box-shadow: 0 10px 30px rgba(76, 201, 240, 0.3);
            transform: translateY(-3px);
        }

        .team-member:nth-child(even) {
            flex-direction: row-reverse;
        }

        .member-image {
            flex-shrink: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            transition: all 0.4s ease;
            border: 3px solid #4cc9f0;
        }

        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .team-member:hover .member-image {
            box-shadow: 
                0 0 0 4px #4cc9f0,
                0 0 0 8px rgba(76, 201, 240, 0.3),
                inset 0 0 20px rgba(0, 80, 213, 0.2),
                0 15px 30px rgba(5, 4, 170, 0.4),
                inset -5px -5px 15px rgba(255, 255, 255, 0.8),
                inset 5px 5px 15px rgba(5, 4, 170, 0.3);
            transform: scale(1.05) rotateY(5deg) rotateX(2deg);
        }

        .team-member:hover .member-image img {
            transform: scale(1.1);
        }

        .member-content {
            flex: 1;
            min-width: 0;
        }

        .member-name {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            color: #0504aa;
            margin-bottom: 8px;
            position: relative;
            letter-spacing: 0.5px;
        }

        .member-name::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #4cc9f0, #0050d5);
            transition: width 0.3s ease;
        }

        .team-member:hover .member-name::after {
            width: 60px;
        }

        .member-role {
            font-size: 1.1rem;
            color: #0050d5;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            margin-bottom: 15px;
        }

        .member-description {
            font-size: 1rem;
            line-height: 1.6;
            color: #333;
            text-align: justify;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
        }

        /* Racing Team List Styling for Member Description Field */

        /* Unordered Lists (UL) - Racing Checkered Flag Style */
        .member-content ul {
            list-style: none;
            padding-left: 0;
            margin: 15px 0;
            position: relative;
        }

        .member-content ul li {
            position: relative;
            padding: 8px 0 8px 35px;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            padding-left: 40px;
        }

        .member-content ul li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 12px;
            background: 
                linear-gradient(45deg, 
                    #0504aa 25%, transparent 25%, transparent 75%, #0504aa 75%),
                linear-gradient(45deg, 
                    #0504aa 25%, transparent 25%, transparent 75%, #0504aa 75%);
            background-size: 6px 6px;
            background-position: 0 0, 3px 3px;
            border: 2px solid #4cc9f0;
            border-radius: 3px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(76, 201, 240, 0.2);
        }

        .member-content ul li:hover {
            color: #0050d5;
            border-left-color: #4cc9f0;
            transform: translateX(5px);
            background: linear-gradient(90deg, rgba(76, 201, 240, 0.05), transparent);
        }

        .member-content ul li:hover::before {
            transform: translateY(-50%) scale(1.1) rotate(5deg);
            box-shadow: 0 4px 8px rgba(76, 201, 240, 0.4);
            border-color: #0050d5;
        }

        /* Nested UL styling */
        .member-content ul ul {
            margin: 10px 0 10px 20px;
            border-left: 2px dashed rgba(76, 201, 240, 0.3);
            padding-left: 15px;
        }

        .member-content ul ul li {
            padding-left: 25px;
            font-size: 0.95em;
        }

        .member-content ul ul li::before {
            width: 12px;
            height: 8px;
            background: linear-gradient(90deg, #4cc9f0, #0050d5);
            border-radius: 50%;
            border: 1px solid #0504aa;
        }

        /* Ordered Lists (OL) - Racing Position Numbers */
        .member-content ol {
            list-style: none;
            padding-left: 0;
            margin: 15px 0;
            counter-reset: racing-counter;
        }

        .member-content ol li {
            position: relative;
            padding: 10px 0 10px 50px;
            margin-bottom: 12px;
            counter-increment: racing-counter;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .member-content ol li::before {
            content: counter(racing-counter);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #4cc9f0, #0050d5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            font-size: 0.85rem;
            border: 3px solid #0504aa;
            box-shadow: 
                0 3px 8px rgba(5, 4, 170, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }

        .member-content ol li:hover {
            color: #0050d5;
            border-left-color: #4cc9f0;
            transform: translateX(8px);
            background: linear-gradient(90deg, rgba(76, 201, 240, 0.08), transparent);
        }

        .member-content ol li:hover::before {
            transform: translateY(-50%) scale(1.15) rotate(-5deg);
            box-shadow: 
                0 5px 15px rgba(5, 4, 170, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 0 0 4px rgba(76, 201, 240, 0.2);
            background: linear-gradient(135deg, #0050d5, #0504aa);
        }

        /* Special styling for first 3 positions (podium) */
        .member-content ol li:nth-child(1)::before {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            border-color: #DAA520;
            box-shadow: 
                0 3px 8px rgba(255, 215, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .member-content ol li:nth-child(2)::before {
            background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
            border-color: #808080;
            box-shadow: 
                0 3px 8px rgba(192, 192, 192, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .member-content ol li:nth-child(3)::before {
            background: linear-gradient(135deg, #CD7F32, #B8860B);
            border-color: #8B4513;
            box-shadow: 
                0 3px 8px rgba(205, 127, 50, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        /* Nested OL styling */
        .member-content ol ol {
            margin: 10px 0 10px 25px;
            border-left: 2px solid rgba(76, 201, 240, 0.2);
            padding-left: 20px;
            counter-reset: sub-racing-counter;
        }

        .member-content ol ol li {
            padding-left: 35px;
            font-size: 0.95em;
            counter-increment: sub-racing-counter;
        }

        .member-content ol ol li::before {
            content: counter(racing-counter) "." counter(sub-racing-counter);
            width: 24px;
            height: 24px;
            font-size: 0.7rem;
            background: linear-gradient(135deg, rgba(76, 201, 240, 0.8), rgba(0, 80, 213, 0.8));
            border: 2px solid #4cc9f0;
        }

        /* Mixed Lists - When OL and UL are combined */
        .member-content ol ul,
        .member-content ul ol {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        /* Racing Track Line Animation */
        .member-content ul li:hover::after,
        .member-content ol li:hover::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            width: 20px;
            height: 2px;
            background: linear-gradient(90deg, #4cc9f0, transparent);
            transform: translateY(-50%);
            animation: trackLine 0.6s ease-out;
        }

        @keyframes trackLine {
            0% { width: 0; opacity: 1; }
            100% { width: 20px; opacity: 0; }
        }

        /* Tire track pattern for enhanced visual appeal */
        .member-content ul li:nth-child(odd):hover::before {
            box-shadow: 
                0 4px 8px rgba(76, 201, 240, 0.4),
                inset 0 0 0 2px rgba(255, 255, 255, 0.3),
                0 0 0 4px rgba(76, 201, 240, 0.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .team-member,
            .team-member:nth-child(even) {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }

            .member-image {
                width: 150px;
                height: 150px;
                margin-bottom: 15px;
            }

            .member-content {
                text-align: left;
            }

            .member-description {
                text-align: left;
            }

            .team-title {
                font-size: 2rem;
            }

            /* Performance optimization - reduce animations on smaller screens */
            .member-content ul li:hover,
            .member-content ol li:hover {
                transform: translateX(3px);
            }
            
            .member-content ul li::before,
            .member-content ol li::before {
                width: 16px;
                height: 16px;
            }
            
            .member-content ol li::before {
                width: 28px;
                height: 28px;
                font-size: 0.75rem;
            }
            
            .member-content ol li {
                padding-left: 40px;
            }
            
            .member-content ul li {
                padding-left: 30px;
            }
        }

        @media (max-width: 480px) {
            .team-container {
                padding: 15px;
            }

            .team-member {
                padding: 20px;
                gap: 15px;
            }

            .member-image {
                width: 120px;
                height: 120px;
            }

            .member-name {
                font-size: 1.5rem;
            }

            .member-role {
                font-size: 1rem;
            }

            .member-description {
                font-size: 0.9rem;
            }

            .member-content ul li,
            .member-content ol li {
                padding-left: 35px;
                font-size: 0.9rem;
            }
            
            .member-content ol li::before {
                width: 24px;
                height: 24px;
                font-size: 0.7rem;
            }
            
            .member-content ul li::before {
                width: 14px;
                height: 10px;
            }
        }