#projects{background-color:var(--bg-dark)}#projects .section-header{text-align:center;margin-bottom:20px;margin-top:30px}#projects .section-header p{margin-top:15px;font-size:1.1rem;color:var(--text-light);max-width:800px}#projects .filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:30px}#projects .filters button{background:var(--bg-accent);color:var(--text-light);border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:500;font-size:.9rem;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:.01em}#projects .filters button:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 4px 10px #0003}#projects .filters button.active{background:var(--accent);box-shadow:0 2px 8px #0000004d}.project-title-bar{min-height:65px!important;margin-bottom:10px!important}#projects .projects-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-top:20px;margin-bottom:40px}#projects .project-card{background:#0003;border:1px solid rgba(255,255,255,.1);padding:20px;border-radius:16px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;position:relative}#projects .project-card .project-image-section{margin-bottom:15px;border-radius:12px;overflow:hidden;position:relative;height:180px}#projects .project-card .project-details-section{flex-grow:1}#projects .project-card .project-title{color:var(--accent);margin-bottom:10px;font-size:1.3rem;font-weight:600;letter-spacing:.02em}#projects .project-card .project-description{font-size:.95rem;color:var(--text-light);margin-bottom:15px;line-height:1.5}#projects .project-card .project-tech-stack{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}#projects .project-card .project-tech-stack li{background:#ffffff1a;padding:4px 8px;border-radius:6px;font-size:.8rem;color:var(--text-light)}#projects .project-card .project-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:5px}#projects .project-card .project-card-footer .view-project-btn{font-size:.95rem;padding:10px 20px}#projects .project-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000004d}#projects .project-card.card-loading .loading-skeleton{background:#ffffff1a;border-radius:12px;margin-bottom:15px}
