.footer {
            background-color: #211a2b; 
            color: white;
            padding: 40px 0;
        }
        .footer a {
            color: #c2c2c2;
            text-decoration: none;
        } 
        .footer a:hover {
            color: #f8f9fa;
            text-decoration: underline;
        }
        .footer h5 {
            color: #f8f9fa;
        }
        /* Social Media Icons */
        .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            background-color: white;
            color: black;
            border-radius: 50%;
            text-align: center;
            transition: 0.3s;
            font-size: 20px;
        }
        .social-icons a:hover {
            background-color: #f39c12;
            color: white;
        }
        .visitor-count {
            font-size: 14px;
            color: #d3d3d3;
            text-align: right;
        }
        .copyright {
            background-color: #1d1d3b; 
            text-align: center;
            padding: 15px;
            color: white;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .visitor-count {
                text-align: center;
                margin-top: 10px;
            }
        } 
        .racer-container {
            text-align: left;
            
            align-items: left;
        }

        .racer {
            width: 20px; /* Adjust size as needed */
            cursor: pointer; /* Makes the image look clickable */
        }

        .racer-text {
            margin-left: 20px; /* Adjust to position text next to the racer */
            font-size: 20px;
            color: #333;
        }

        /* Default animation */
        .racer-moving {
            animation: moveForward 4s linear infinite, rotateAndMove 2s infinite alternate ease-in-out;
        }

        @keyframes moveForward {
            0% {
                left: -150px; /* Start from the left */
            }
            100% {
                left: 100vw; /* Move to the right */
            }
        }

        @keyframes rotateAndMove {
            0% {
                transform: rotate(0deg) translateY(0px);
            }
            100% {
                transform: rotate(-45deg) translateY(-20px);
            }
        }

        /* Animation for 25 seconds */
        .active-animation {
            animation: moveForward 4s linear 1, rotateAndMove 2s infinite alternate ease-in-out;
        }