/* Projects Page Styles */
.projects-grid-section { padding: 80px 20px; }
.project-card-3d { margin-bottom: 60px; }
.project-card-inner { background: var(--bg-card); border-radius: 20px; border: 1px solid rgba(0, 212, 255, 0.2); overflow: hidden; transition: var(--transition); }
.project-card-3d:hover .project-card-inner { border-color: var(--primary-color); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3); transform: translateY(-5px); }
.project-header { padding: 40px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 153, 255, 0.1)); display: flex; justify-content: space-between; align-items: center; }
.project-icon-large { width: 100px; height: 100px; background: rgba(0, 212, 255, 0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 50px; color: var(--primary-color); }
.project-meta { text-align: right; }
.project-year { display: block; color: var(--primary-color); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.project-status { display: inline-block; padding: 8px 20px; background: rgba(0, 212, 255, 0.2); color: var(--primary-color); border-radius: 20px; font-size: 14px; border: 1px solid var(--primary-color); }
.project-body { padding: 40px; }
.project-body h3 { font-size: 32px; margin-bottom: 10px; }
.project-tagline { color: var(--primary-color); font-size: 18px; margin-bottom: 20px; font-weight: 600; }
.project-description { color: var(--text-secondary); line-height: 1.8; margin-bottom: 30px; }
.project-features { margin-bottom: 30px; }
.project-features h4 { font-size: 18px; margin-bottom: 15px; color: var(--text-primary); }
.project-features ul { list-style: none; }
.project-features li { color: var(--text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.project-features li i { color: var(--primary-color); }
.tech-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tech-tag { background: rgba(0, 212, 255, 0.1); color: var(--primary-color); padding: 8px 16px; border-radius: 20px; font-size: 14px; border: 1px solid rgba(0, 212, 255, 0.3); }
.project-links { display: flex; gap: 15px; }
@media (max-width: 768px) { .project-header { flex-direction: column; text-align: center; gap: 20px; } .project-meta { text-align: center; } .project-links { flex-direction: column; } }