@keyframes float2 {

                0%,
                100% {
                    transform: translateY(-4px);
                }

                50% {
                    transform: translateY(6px);
                }
            }

            @keyframes float3 {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-10px);
                }
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: .4;
                }
            }

            @keyframes marquee {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(-50%);
                }
            }

            .animate-fu1 {
                opacity: 0;
                animation: fadeUp .8s .2s forwards;
            }

            .animate-fu2 {
                opacity: 0;
                animation: fadeUp .8s .35s forwards;
            }

            .animate-fu3 {
                opacity: 0;
                animation: fadeUp .8s .5s forwards;
            }

            .animate-fu4 {
                opacity: 0;
                animation: fadeUp .8s .65s forwards;
            }

            .animate-fu5 {
                opacity: 0;
                animation: fadeUp .8s .8s forwards;
            }

            .animate-fi {
                opacity: 0;
                animation: fadeIn 1s 1s forwards;
            }

            .fl1 {
                animation: float 3.4s ease-in-out infinite;
            }

            .fl2 {
                animation: float2 3.9s ease-in-out .5s infinite;
            }

            .fl3 {
                animation: float3 4.2s ease-in-out .9s infinite;
            }

            .fl4 {
                animation: float 3.6s ease-in-out 1.1s infinite;
            }

            .fl5 {
                animation: float2 4s ease-in-out .3s infinite;
            }

            .fl6 {
                animation: float3 3.7s ease-in-out .7s infinite;
            }

            .dot {
                animation: pulse 1.6s infinite;
            }

            .marquee-track {
                animation: marquee 30s linear infinite;
                width: fit-content;
            }

            .marquee-track:hover {
                animation-play-state: paused;
            }


            .service-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
                transform: scaleX(0);
                transition: transform 0.3s ease;
            }

            .reveal {
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.6s ease;
            }

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