*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",sans-serif;background:#f5f6fa;color:#2c3e50;line-height:1.6;transition:background .3s,color .3s}
body.dark{background:#1e272e;color:#d2dae2}
nav{background:#2c3e50;padding:15px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
nav h1{color:#fff;font-size:1.5rem}
nav ul{list-style:none;display:flex;gap:20px}
nav ul li a{color:#ecf0f1;text-decoration:none;font-weight:bold;transition:.3s}
nav ul li a:hover{color:#1abc9c}
#toggle-dark{background:#1abc9c;border:none;padding:8px 12px;border-radius:5px;color:white;cursor:pointer;transition:.3s}
#toggle-dark:hover{background:#16a085}
/* Navbar base */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #2c3e50;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  text-align: center;
}
.close {
  float: right;
  cursor: pointer;
  font-size: 1.5rem;
}
.modal input {
  width: 90%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.modal button {
  background: #2980b9;
  color: #fff;
  border: none;
  padding: 10px;
  margin-top: 10px;
  width: 100%;
  cursor: pointer;
}

nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

/* Hamburger button */
.hamburger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Mobile view */
@media (max-width: 768px) {
  nav ul {
    display: none;
    flex-direction: column;
    background: #2c3e50;
    position: absolute;
    top: 60px;
    right: 30px;
    width: 200px;
    border-radius: 5px;
    padding: 10px;
  }

  nav ul.show {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

.hero{text-align:center;padding:100px 20px;background:linear-gradient(to right,#3498db,#2ecc71);color:white}
.hero h2{font-size:2.5rem;margin-bottom:15px}
.hero p{font-size:1.2rem;margin-bottom:20px}
.typed-text{font-weight:bold;font-size:1.5rem;color:#f1c40f}
.hero button{background:#e74c3c;color:white;border:none;padding:12px 25px;font-size:1rem;border-radius:5px;cursor:pointer;transition:.3s;margin:5px}
.hero button:hover{background:#c0392b}
.about{display:flex;justify-content:center;align-items:center;padding:80px 20px;gap:40px;background:white}
body.dark .about{background:#2f3640}
.about img{width:180px;border-radius:50%;border:4px solid #1abc9c}
.about-text{max-width:500px}
.about-text h3{margin-bottom:15px;color:#2980b9}
.download-btn{display:inline-block;margin-top:15px;background:#16a085;color:white;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:bold}
.download-btn:hover{background:#13856e}
.skills{padding:60px 20px;text-align:center;background:#ecf0f1}
body.dark .skills{background:#353b48}
.skills h3{margin-bottom:30px;color:#16a085}
.skill-list{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}
.skill{background:white;padding:15px 25px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);font-weight:bold}
body.dark .skill{background:#2f3640;color:#dcdde1}
.projects{padding:80px 20px;background:white;text-align:center}
body.dark .projects{background:#2f3640}
.projects h3{margin-bottom:20px;color:#e67e22}
.filter-bar{margin-bottom:30px}
.filter-bar input{padding:8px 12px;border:2px solid #bdc3c7;border-radius:5px;width:250px;max-width:100%}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.project{background:#fdfdfd;border-radius:10px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:transform .3s}
.project:hover{transform:translateY(-5px)}
.project img{width:100%;height:180px;object-fit:cover}
.project h4{margin:15px;color:#34495e}
.project p{margin:0 15px 15px;font-size:.9rem}
.timeline{background:#f5f6fa;padding:60px 20px}
.timeline h3{text-align:center;margin-bottom:40px;color:#2980b9}
.timeline-item{margin:20px auto;max-width:600px;background:white;padding:20px;border-left:5px solid #1abc9c;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
body.dark .timeline-item{background:#2f3640}
.testimonials{padding:60px 20px;text-align:center;background:#ecf0f1}
body.dark .testimonials{background:#353b48}
.testimonial{max-width:600px;margin:20px auto;background:white;padding:20px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);font-style:italic}
body.dark .testimonial{background:#2f3640}
.contact{padding:60px 20px;text-align:center;background:#ecf0f1}
body.dark .contact{background:#353b48}
.contact h3{margin-bottom:20px;color:#8e44ad}
.contact a{display:inline-block;margin:10px;color:#fff;background:#3498db;padding:12px 20px;border-radius:5px;text-decoration:none;transition:.3s}
.contact a:hover{background:#2980b9}
.contact form{max-width:500px;margin:20px auto;text-align:left;background:white;padding:20px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
body.dark .contact form{background:#2f3640}
.contact form input,.contact form textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #bdc3c7;border-radius:5px}
.contact form button{background:#1abc9c;color:white;padding:12px 20px;border:none;border-radius:5px;cursor:pointer}
.contact form button:hover{background:#16a085}
footer{background:#2c3e50;color:white;text-align:center;padding:15px}
#scrollTopBtn{position:fixed;bottom:30px;right:30px;background:#1abc9c;border:none;color:white;padding:12px 16px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:none}
@media(max-width:768px){.about{flex-direction:column;text-align:center}}