@import url(../main.css);



 .glass-card {
   
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(10px);
          
        }
        
        .gradient-text {
            background: linear-gradient(90deg, var(--primary), var(--primary-darker), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            
        }
        
        
        
        .progress-ring {
            transform: rotate(-90deg);
        }
        
        .progress-ring__circle {
            stroke-dasharray: 314;
            stroke-dashoffset: 314;
            transition: stroke-dashoffset 0.5s ease;
            stroke-linecap: round;
        }
        
        .tilt-effect {
            transition: transform 0.3s ease;
        }
        
        .tilt-effect:hover {
            transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
        }
        
        .floating {
            animation: floating 6s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        
       
        
        
        
        .scroll-container {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .scroll-container::-webkit-scrollbar {
            display: none;
        }
        
        .neon-border {
            position: relative;
        }
        
        .neon-border::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: inherit;
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-teal), var(--neon-blue));
            z-index: -1;
            opacity: 0.7;
        }
        
        .neon-border:hover::after {
            animation: neonGlow 1.5s ease-in-out infinite alternate;
        }
        
        @keyframes neonGlow {
            from {
                filter: blur(5px);
                opacity: 0.7;
            }
            to {
                filter: blur(8px);
                opacity: 1;
            }
        }
        
        .avatar-bubble {
            transition: all 0.3s ease;
        }
        
        .avatar-bubble:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(76, 201, 240, 0.6);
        }
        
        .tech-badge {
            transition: all 0.3s ease;
        }
        
        .tech-badge:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px var(--primary);
        }
        
        .capsule-3d {
            transform-style: preserve-3d;
            transform: perspective(1000px) rotateX(10deg);
            transition: transform 0.5s ease;
        }
        
        .capsule-3d:hover {
            transform: perspective(1000px) rotateX(0deg) translateY(-10px);
        }