.portfolio-page{min-height:100vh;background:#f8f9fa}.portfolio-header{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:80px 20px;text-align:center}.portfolio-header .header-content h1{font-size:3rem;font-weight:700;margin-bottom:10px}.portfolio-header .header-content p{font-size:1.2rem;opacity:.9}.portfolio-section{padding:60px 20px}.filter-buttons{display:flex;justify-content:center;gap:15px;margin-bottom:50px;flex-wrap:wrap}.filter-btn{padding:10px 25px;border:2px solid #667eea;background:white;color:#667eea;border-radius:25px;cursor:pointer;font-weight:600;transition:all .3s ease}.filter-btn.active,.filter-btn:hover{background:#667eea;color:white}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:30px;gap:30px;margin-bottom:40px}.portfolio-card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease}.portfolio-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.15)}.portfolio-image{position:relative;overflow:hidden;height:250px}.portfolio-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.portfolio-card:hover .portfolio-image img{transform:scale(1.1)}.portfolio-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(102,126,234,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.portfolio-card:hover .portfolio-overlay{opacity:1}.view-project-btn{background:white;color:#667eea;border:none;padding:12px 30px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease}.view-project-btn:hover{transform:scale(1.05);box-shadow:0 5px 15px rgba(0,0,0,.2)}.portfolio-content{padding:20px}.project-category{display:inline-block;background:#667eea;color:white;padding:5px 12px;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:10px}.portfolio-content h3{font-size:1.3rem;margin-bottom:10px;color:#333}.portfolio-content p{color:#666;font-size:.95rem;line-height:1.5}.project-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.project-modal-content{background:white;border-radius:15px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.close-btn{position:absolute;top:20px;right:20px;background:#667eea;color:white;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;z-index:10}.close-btn:hover{background:#764ba2}.modal-body{padding:40px}.modal-image{width:100%;height:300px;border-radius:10px;overflow:hidden;margin-bottom:30px}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-info h2{font-size:2rem;margin-bottom:15px;color:#333}.modal-info .project-category{display:inline-block;margin-bottom:15px}.description{color:#666;line-height:1.6;margin-bottom:25px}.project-details{background:#f8f9fa;padding:20px;border-radius:10px;margin-bottom:25px}.detail-item{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.detail-item:last-child{margin-bottom:0}.detail-item i{color:#667eea;font-size:1.2rem;margin-top:3px}.detail-label{font-size:.85rem;color:#999;text-transform:uppercase}.detail-label,.detail-value{display:block;font-weight:600}.detail-value{font-size:1.1rem;color:#333}.btn-block{width:100%;padding:12px 20px;font-size:1rem}@media (max-width:768px){.portfolio-header .header-content h1{font-size:2rem}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.filter-buttons{gap:10px}.filter-btn{padding:8px 15px;font-size:.9rem}.modal-body{padding:20px}.modal-info h2{font-size:1.5rem}}