*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background:#f0f2f5;color:#333}header{background:#001f7a;color:#fff;padding:1.5rem 0;text-align:center;font-size:1.5rem}main{max-width:1200px;margin:0 auto;padding:2rem 1rem;background-color:#22ff9458;border-radius:10px;box-shadow:0 5px 15px #0000000d}.hero-section{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1rem;background:#f5f7fa}.hero-section .profile-image{width:120px;height:120px;margin-bottom:1rem;border:4px solid #0055ff}.hero-section h1{font-size:2.25rem;margin-bottom:.75rem;color:#001f7a}.hero-section p{max-width:500px;margin-bottom:.75rem;line-height:1.6;font-size:1.05rem;color:#333;padding:.25rem}.hero-section button{padding:.6rem 1.5rem;font-size:.95rem;margin-top:1rem}.hero-section button:hover{background-color:#003bb5}.hero-section .skills-list{margin-top:2rem;font-size:1.5rem;color:#001f7a}.hero-section ul{list-style-type:none;padding:0;margin:1rem 0;font-size:1.1rem;background-color:#003bb5;color:#fff;width:100%}.hero-section ul li{margin-bottom:.5rem}.projects{padding:4rem 1rem;background:#f5f7fa}.projects h2{text-align:center;font-size:2.25rem;margin-bottom:2rem;color:#001f7a}.project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.project-card{background:#f9f9f9;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;transition:transform .2s ease}.project-card:hover{transform:translateY(-5px)}.project-card img{width:100%;height:180px;object-fit:cover}.project-card h3{font-size:1.3rem;margin:1rem;color:#001f7a}.project-card p{flex-grow:1;margin:0 1rem 1rem;color:#444;font-size:1rem;line-height:1.5}.project-card a{display:block;text-align:center;padding:.8rem;background-color:#05f;color:#fff;text-decoration:none;font-weight:500;border-top:1px solid #0041cc;transition:background-color .2s ease}.project-card a:hover{background-color:#003bb5}@media (max-width: 1024px){.hero-section h1{font-size:2.25rem}.hero-section p{font-size:1.1rem}.projects h2{font-size:2rem}}@media (max-width: 768px){.hero-section h1{font-size:2rem}.hero-section p{font-size:1rem}.project-list{grid-template-columns:1fr}}