body {
            background-color: #050505;
            color: white;
            overflow-x: hidden;
        }

        /* Subtle Grid Background */
        .bg-grid {
            background-size: 60px 60px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
            -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
        }

        /* Glassmorphism Utilities */
        .glass-card {
            background: linear-gradient(180deg, rgba(30,30,30,0.4) 0%, rgba(10,10,10,0.6) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        /* The "Star" Sparkle shape from the image */
        .sparkle-star {
            position: absolute;
            width: 40px;
            height: 40px;
            background: white;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
            animation: float 4s ease-in-out infinite;
        }
        
        .four-point-star {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at center, white 0%, transparent 70%);
            clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
            animation: pulse-glow 3s infinite alternate;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }

        @keyframes pulse-glow {
            0% { opacity: 0.7; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.1); }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #050505; 
        }
        ::-webkit-scrollbar-thumb {
            background: #333; 
            border-radius: 4px;
        }

        /* ThreeJS Canvas Container */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            opacity: 0.6;
            pointer-events: none;
        }
        
        /* Mobile Nav Active State */
        .mobile-nav-item.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
        }
      
      /*for testimonal card pause on hover*/
      .pause-on-hover:hover {
    animation-play-state: paused;
}


/* Add to your <style> block */
.pause-on-hover:hover {
    animation-play-state: paused;
}

        @keyframes gradient-x {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animate-gradient-x {
            animation: gradient-x 3s ease infinite;
        }


        /* --- Customized TimeSpace Scrollbar --- */
        
        /* For Firefox */
        html {
            scrollbar-width: thin;
            scrollbar-color: #333 #050505;
        }

        /* For Chrome, Edge, Safari */
        ::-webkit-scrollbar {
            width: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #050505; /* Matches body background */
            border-left: 1px solid rgba(255, 255, 255, 0.03); /* Very subtle divider line */
        }

        ::-webkit-scrollbar-thumb {
            background-color: #1a1a1a; /* Dark grey interior */
            border: 1px solid rgba(255, 255, 255, 0.15); /* Matches your glass-card borders */
            border-radius: 999px; /* Pill shape */
            
            /* This creates a transparent gap around the thumb so it looks like it's floating */
            background-clip: padding-box;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #262626;
            border-color: rgba(255, 255, 255, 0.5); /* Brightens to white/50% on hover */
        }

        /* --- End Scrollbar --- */


        html, body {
    touch-action: manipulation;
}

    /* Utility to hide scrollbar but keep functionality */
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    .animate-float-delayed {
        animation: float 6s ease-in-out infinite;
        animation-delay: 3s; /* Offsets the animation so they don't move in sync */
    }


        /* For Section bridge Agency*/
        /* 1. Animated Text Gradient */
        .animate-text-gradient {
            background: linear-gradient(
                to right,
                #ffffff 20%,
                #ff0000 40%,
                rgb(255, 177, 177) 60%,
                #ffffff 80%
            );
            background-size: 200% auto;
            color: #000;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 4s linear infinite;
        }

        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }

        /* 2. 3D Tilt Wrapper Styles */
        /* Smooths the entry/exit of the mouse interaction */
        .tilt-card {
            transition: transform 0.1s ease-out; /* Fast reaction for mouse movement */
            will-change: transform;
            transform-style: preserve-3d;
        }
        
        /* When NOT hovering, return to original state smoothly */
        .tilt-card-wrapper:not(:hover) .tilt-card {
            transition: transform 0.5s ease-out;
            transform: perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1) !important;
        }