*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,sans-serif}body{color:#fff;background:#0b1120}.app{align-items:flex-start;gap:25px;min-height:100vh;padding:25px;display:flex}.sidebar{background:#111827;border-radius:25px;flex-shrink:0;align-self:flex-start;width:320px;padding:25px;position:sticky;top:25px;box-shadow:0 10px 30px #00000059}.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:#5f74ff;border-radius:20px}.profile-box{text-align:center}.profile-placeholder{background:#1a1d35;border-radius:25px;justify-content:center;align-items:center;width:140px;height:140px;margin:auto;font-size:60px;display:flex}.name{margin-top:20px;font-size:24px;font-weight:700;line-height:1.3}.role{color:#d9ddff;background:#1a1d35;border-radius:12px;margin-top:15px;padding:10px;font-size:14px;line-height:1.5}.resume-btn{text-align:center;color:#fff;background:#5f74ff;border:none;border-radius:14px;width:100%;margin-top:20px;padding:14px;font-size:16px;text-decoration:none;transition:all .3s;display:block}.resume-btn:hover .contact-section{border-top:1px solid #252a45;margin-top:35px;padding-top:25px}.info-card{align-items:flex-start;gap:15px;margin-bottom:25px;display:flex}.icon-box{background:#1a1d35;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;box-shadow:0 6px 20px #00000040}.icon-box svg{color:#7a8cff;font-size:18px}.info-card small{color:#8f94b8;letter-spacing:1px;font-size:11px}.info-card p{color:#fff;margin-top:4px;font-size:13px}.info-card div:last-child{margin-top:6px}.social-links{justify-content:center;gap:20px;margin-top:30px;display:flex}.social-links a{color:#fff;background:#1a1d35;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:22px;text-decoration:none;transition:all .3s;display:flex}.social-links a:hover{background:#5f74ff;transform:translateY(-5px)}.main-content{background:#111827;border-radius:25px;flex:1;min-height:calc(100vh - 50px);overflow:hidden;box-shadow:0 10px 30px #00000059}.top-nav{background:#181f38;justify-content:flex-end;gap:35px;padding:25px;display:flex}.nav-btn{color:#fff;cursor:pointer;background:0 0;border:none;font-size:16px;font-weight:500;transition:all .3s}.nav-btn:hover .nav-btn.active{color:#7a8cff}.content{padding:32px}.section-title{margin-bottom:5px;font-size:34px;font-weight:700}.underline{background:#7a8cff;border-radius:10px;width:60px;height:5px;margin:20px 0}.about-text{color:#d8dcff;margin-bottom:20px;line-height:1.8}.contact-section{border-top:1px solid #252a45;margin-top:25px;padding-top:25px}.sub-title{margin-top:40px;margin-bottom:20px;font-size:28px}.services{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.service-card{background:#1a1d35;border-radius:20px;align-items:flex-start;gap:20px;padding:25px;transition:all .3s;display:flex;box-shadow:0 8px 25px #00000040}.service-card:hover{transform:translateY(-8px)}.service-icon{color:#7a8cff;flex-shrink:0;font-size:38px}.service-card h3{margin-bottom:12px}.service-card p{color:#d8dcff;line-height:1.6}.tech-title{margin-top:50px}.tech-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.tech-card{text-align:center;background:#1a1d35;border-radius:18px;padding:24px;transition:all .3s;box-shadow:0 8px 25px #00000040}.tech-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px #00000059}.tech-card svg{margin-bottom:15px;font-size:48px}.tech-card span{color:#fff;font-size:14px;font-weight:600;display:block}.resume-section-title{align-items:center;gap:18px;margin-top:35px;margin-bottom:25px;display:flex}.resume-section-title svg{color:#7a8cff;background:#1a1d35;border-radius:14px;width:48px;height:48px;padding:12px}.resume-section-title h2{font-size:30px;font-weight:700}.resume-timeline{border-left:2px solid #2b315f;margin-left:20px;padding-left:35px;position:relative}.timeline-block{margin-bottom:40px;position:relative}.timeline-dot{background:#7a8cff;border-radius:50%;width:12px;height:12px;position:absolute;top:6px;left:-42px;box-shadow:0 0 12px #7a8cffb3}.timeline-content h3{font-size:20px;font-weight:700;line-height:1.4}.timeline-content span{color:#7a8cff;margin-bottom:12px;font-size:17px;display:block}.timeline-content p{color:#d8dcff;max-width:850px;font-size:16px;line-height:1.8}.skills-box{background:#1a1d35;border-radius:20px;margin-top:25px;padding:25px;box-shadow:0 8px 25px #00000040}.skill{margin-bottom:25px}.skill:last-child{margin-bottom:0}.skill-title{justify-content:space-between;margin-bottom:10px;font-weight:600;display:flex}.progress{background:#252a45;border-radius:20px;width:100%;height:10px}.progress-fill{background:#7a8cff;border-radius:20px;height:100%}.portfolio-filter{flex-wrap:wrap;gap:15px;margin-bottom:30px;display:flex}.filter-btn{color:#d8dcff;cursor:pointer;background:0 0;border:none;font-size:16px;transition:all .3s}.filter-btn:hover{color:#fff}.active-filter{color:#7a8cff;font-weight:600}.project-grid{grid-template-columns:repeat(2,1fr);gap:25px;display:grid}.project-card{background:#1a1d35;border-radius:20px;transition:all .3s;overflow:hidden;box-shadow:0 8px 25px #00000040}.project-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px #00000059}.project-image{object-fit:cover;width:100%;height:220px}.project-category{color:#fff;background:#5f74ff;border-radius:20px;margin:15px 20px 10px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-block}.project-card h3{margin-bottom:10px;padding:0 20px}.project-card p{color:#d8dcff;padding:0 20px;line-height:1.6}.project-buttons{gap:12px;padding:20px;display:flex}.project-btn{text-align:center;border-radius:10px;flex:1;padding:10px;font-weight:600;text-decoration:none;transition:all .3s}.project-btn:hover{transform:translateY(-3px)}.github-btn{color:#fff;background:#1f2937}.demo-btn{color:#fff;background:#5f74ff}.certificate-grid{grid-template-columns:repeat(2,1fr);gap:25px;display:grid}.certificate-card{background:#1a1d35;border-radius:20px;transition:all .3s;overflow:hidden;box-shadow:0 8px 25px #00000040}.certificate-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px #00000059}.certificate-image{object-fit:cover;width:100%;height:260px}.certificate-card h3{text-align:center;color:#fff;padding:18px;font-size:18px}.contact-page{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.contact-card{background:#1a1d35;border-radius:20px;padding:25px;box-shadow:0 8px 25px #00000040}.contact-card h3{align-items:center;gap:10px;margin-bottom:12px;display:flex}.contact-card p{color:#d8dcff;line-height:1.7}.message-box{background:#1a1d35;border-radius:20px;margin-top:35px;padding:25px;box-shadow:0 8px 25px #00000040}.message-box h2{margin-bottom:20px}.contact-input{color:#fff;background:#252a45;border:none;border-radius:12px;outline:none;width:100%;margin-top:15px;padding:14px}.contact-input::placeholder{color:#9ca3af}.send-btn{color:#fff;cursor:pointer;background:#5f74ff;border:none;border-radius:12px;margin-top:20px;padding:14px 24px;transition:all .3s}.send-btn:hover{background:#7183ff;transform:translateY(-2px)}@media (width<=1200px){.app{flex-direction:column}.sidebar{width:100%;height:auto;position:relative;top:0}.services,.project-grid,.certificate-grid,.contact-page{grid-template-columns:1fr}.tech-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.content{padding:25px}.section-title{font-size:38px}.top-nav{flex-wrap:wrap;justify-content:center;gap:15px}.tech-grid{grid-template-columns:repeat(2,1fr)}.name{font-size:26px;font-weight:700}.project-buttons{flex-direction:column}}@media (width<=480px){.section-title{font-size:32px}.profile-placeholder{width:110px;height:110px;font-size:50px}.tech-grid{grid-template-columns:1fr}.content{padding:20px}}