* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #fff; }

    /* Navbar */
    nav { background: transparent; color: #555 ; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
    nav ul { list-style: none; display: flex; }
    nav ul li { margin-left: 20px; }
    nav ul li a { color: #555; text-decoration: none; }
    nav .menu { display: none; font-size: 1.5rem; cursor: pointer; }

    /* Hero Section */
    .hero { display:flex; height: 100vh; width: 100%; align-items:center; justify-content:center; padding:50px 20px; background: #fff ; color: #000; gap:20px; flex-wrap:wrap; }
    .hero img { width:350px; height:350px; border-radius: 50%; object-fit:cover; }
    .hero-text { max-width:500px; }
    .hero-text h1 { font-size:2.5rem; margin-bottom:10px;}
    .hero-text p { font-size:1.1rem; color:#333;}
    .home-buttons a { padding: 10px 20px; border: 1px solid #000; border-radius: 6px; text-decoration: none; color: #000; transition: all 0.3s ease; }
    .home-buttons a:hover { background:  #000; color:#fff ; letter-spacing: 2px; opacity: 0.8; }
    span { font-weight: bold; }
 /* About Section */
    .about, .projects, .skills, .education, .contact { padding:40px 20px; max-width:900px; margin:auto; }
    h2 { margin-bottom:20px; color:#333; }

    /* Projects Grid */
  .project-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  .project-card { padding:20px; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); text-align:center; }
  .project-card img { width:100%; border-radius:10px; }
  .project-card:hover{transform: scale(1.1); background:rgb(228, 250, 184);}
  .project-card p { font-size:0.9rem; }
  .project-card .buttons { display: flex; gap: 10px;padding: 5px;}
  .project-card .buttons a { flex: 1; padding: 8px; border: 1px solid #000; border-radius: 6px; text-align: center; text-decoration: none; font-size: 0.85rem; color: #000; transition: background 0.3s ease; }
  .project-card .buttons a:hover { background: #000; color: #fff; }

    /* Skills Section */
    .skills-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; text-align:center; }
    .skill-card img { width:60px; height:60px; }
    .skill-card img:hover{transform: scale(1.5);}
    .skill-card h3 { margin-top:10px; font-size:16px; }

    /* Education Section */
    .education ul { list-style:none; padding-left:0; }
    .education li { padding:15px; margin-bottom:10px; border-radius:10px; box-shadow:0 14px 6px rgba(0,0,0,0.1); }
    .education li:hover { background:#eecde1;}
    /* Contact */
    .contact form { display:flex; flex-direction:column; }
    .contact input, .contact textarea { padding:10px; margin:10px 0; border:1px solid #ccc; border-radius:5px; }
    .contact button { padding:10px; background: red; color:white; border:none; border-radius:5px; cursor:pointer; }
    .contact button:hover { background:green; }
    .error { border-color:red; }
    .success-msg { color:green; margin-top:10px; }
  /* Mobile Responsive */
    @media (max-width: 768px){
      nav ul { flex-direction: column; align-items: flex-start; display: none; background: #007BFF; width: 100%; padding: 10px; }
      nav.active ul { display:flex; }
      nav .menu { display:block; }
      .project-grid, .skills-grid { grid-template-columns: 1fr; }
      .hero { flex-direction:column; text-align:center; }
      .hero img { width: 150px; height: 150px; margin-bottom:20px; }
      .hero-text h1 { font-size:1.5rem; }
      .hero-text p { font-size:1rem; }
      .home-buttons a { font-size: 10px; padding: 5px 12px;}
      .home-buttons a:hover { letter-spacing: 1px; }
      .project-card .buttons a { font-size: 10px; padding: 5px 12px;}
      .project-card .buttons a:hover { letter-spacing: 1px; }
      .education li {font-size: 12px;}
    }