body {
            background-color: #ffffff;
            color: #334155;
        }

        .card-panel {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f8fafc;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Subtle reveal animation class */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

@keyframes line-progress {

                                0%,
                                10% {
                                    width: 0%;
                                    opacity: 0;
                                }

                                15% {
                                    opacity: 1;
                                }

                                90% {
                                    width: 100%;
                                    opacity: 1;
                                }

                                95%,
                                100% {
                                    width: 100%;
                                    opacity: 0;
                                }
                            }

                            .animate-line-progress {
                                animation: line-progress 8s ease-in-out infinite;
                            }

                            /* Animations successives pour les étapes (durée totale 8s) */
                            @keyframes glow-1 {

                                0%,
                                5% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                10%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            @keyframes glow-2 {

                                0%,
                                20% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                25%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            @keyframes glow-3 {

                                0%,
                                35% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                40%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            @keyframes glow-4 {

                                0%,
                                50% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                55%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            @keyframes glow-5 {

                                0%,
                                65% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                70%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            @keyframes glow-6 {

                                0%,
                                80% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }

                                85%,
                                90% {
                                    border-color: #10b981;
                                    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
                                }

                                95%,
                                100% {
                                    border-color: #e2e8f0;
                                    box-shadow: none;
                                }
                            }

                            .node-1 {
                                animation: glow-1 8s infinite;
                            }

                            .node-2 {
                                animation: glow-2 8s infinite;
                            }

                            .node-3 {
                                animation: glow-3 8s infinite;
                            }

                            .node-4 {
                                animation: glow-4 8s infinite;
                            }

                            .node-5 {
                                animation: glow-5 8s infinite;
                            }

                            .node-6 {
                                animation: glow-6 8s infinite;
                            }


/* Navbar Active Link Animation */
.nav-link {
    position: relative;
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #4376E6;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.nav-link:hover::after,
.nav-link.active-nav-link::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.nav-link.active-nav-link {
    color: #4376E6;
    font-weight: 600;
}