/* Custom CSS for animations and effects */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .fade-in {
            animation: fadeIn 1s ease-in;
        }
        
        .project-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .language-icon {
            transition: transform 0.3s ease;
        }
        
        .language-icon:hover {
            transform: scale(1.2);
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #7c3aed;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .scroll-section {
            scroll-margin-top: 80px;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #7c3aed;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #6d28d9;
        }

        /* Responsive styles */
        .width--70 {
            width: 70%;
        }
        .width--40 {
            width: 40%;
        }
        .width--15 {
            width: 15%;
        }
        .width--10 {
            width: 10%;
        }
        .width--60 {
            width: 60%;
        }
        .width--95 {
            width: 95%;
        }
        .width--50 {
            width: 50%;
        }