.project-details{max-width:900px;padding:20px;color:white;font-family:Arial,sans-serif;margin:100px auto 0}.project-header{margin-bottom:20px;text-align:left}.project-title{font-size:36px;font-weight:700}.project-category{color:#E0F11F;font-size:1rem}.project-main-media{margin-bottom:20px}.main-media{width:100%;height:auto;border-radius:8px;object-fit:cover}.project-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:20px}.project-image-wrapper{background-color:#222;border-radius:8px;overflow:hidden;margin-bottom:20px}.project-section{margin-bottom:30px}.section-title{font-size:36px;font-weight:700;margin-bottom:10px;color:#fff}.section-content{font-size:17px;color:#ccc;line-height:2}.section-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.section-list li{background:#333;color:#fff;padding:8px 12px;border-radius:8px;font-size:15px;font-weight:500;transition:background .3s ease}.section-list li:hover{background:#555}.project-links{display:flex;justify-content:flex-end;gap:15px;margin-right:10px;margin-bottom:20px}.project-link{font-size:1.2rem;font-weight:700;color:#ccc;text-decoration:underline;transition:all .3s ease}.project-link:hover{color:#fff}.project-github{color:#ccc;transition:transform .3s ease,background .3s ease}.project-github:hover{color:#fff}.github-icon{width:24px;height:24px;fill:#fff;transition:fill .3s ease}.project-github:hover .github-icon{fill:#fff}.project-main-media{position:relative;transition:opacity .5s ease-in-out}.project-main-media.fade{opacity:0}.project-images{display:flex;gap:10px;overflow-x:auto;margin-top:20px}.project-image-wrapper{flex:0 0 auto;width:80px;height:80px;cursor:pointer;opacity:.7;transition:opacity .3s ease,transform .3s ease}.project-image-wrapper.active{opacity:1;transform:scale(1.1);border:2px solid #8b5cf6}.project-image-wrapper:hover{opacity:1}.project-image{width:100%;height:100%;object-fit:cover;border-radius:5px}.project-details.row-layout .project-images{display:flex;flex-wrap:wrap;gap:10px;flex:1;justify-content:flex-start}.project-details.row-layout .project-image-wrapper{width:60px;height:60px;cursor:pointer;opacity:.7;transition:opacity .3s ease,transform .3s ease}.project-details.row-layout .project-image-wrapper.active{opacity:1;transform:scale(1.1);border:2px solid #8b5cf6}.project-details.row-layout .project-image-wrapper:hover{opacity:1}.project-details.row-layout .project-image{width:100%;height:100%;object-fit:cover;border-radius:5px}