/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; }
body { background:#f8f9fa; color:#333; line-height:1.6; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 8%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); position:sticky; top:0; z-index:10; }
header .logo { font-size:1.8rem; font-weight:600; color:#0077b6; }
header nav a { margin-left:2rem; text-decoration:none; color:#555; font-weight:500; transition:color 0.3s; }
header nav a:hover, header nav a.active { color:#0077b6; }

/* Hero Section */
.hero { display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; height:60vh; min-height:400px; background:linear-gradient(135deg,#0077b6,#00b4d8); color:#fff; padding:0 2rem; }
.hero h2, .hero-subtitle { color:#fff; } /* subtitle also white */
.hero h2 { font-size:2.5rem; font-weight:700; margin-bottom:0.5rem; text-shadow:2px 2px 6px rgba(0,0,0,0.2); }
.hero-subtitle { font-size:1.2rem; margin-bottom:1.5rem; }
.hero-btn { display:inline-block; background:#fff; color:#0077b6; padding:0.7rem 1.5rem; font-weight:600; border-radius:8px; text-decoration:none; transition:0.3s; }
.hero-btn:hover { background:#caf0f8; transform:translateY(-2px); }

/* Sections Titles */
section { padding:4rem 8%; text-align:center; }
section h2 { font-size:2rem; color:#0077b6; margin-bottom:1.5rem; }

/* About Links */
.links { margin-top:1.5rem; }
.links .btn { display:inline-block; margin:0.5rem 1rem; padding:0.65rem 1.3rem; background:#0077b6; color:#fff; border-radius:6px; text-decoration:none; font-weight:500; transition:0.3s; }
.links .btn:hover { background:#005f8a; }
.links .btn.outline { background:transparent; color:#0077b6; border:2px solid #0077b6; }
.links .btn.outline:hover { background:#0077b6; color:#fff; }

/* Skills List */
.skills-list { list-style:none; display:inline-block; text-align:left; padding:0; }
.skills-list li { background:#e3f2fd; margin:0.6rem 0; padding:0.8rem 1.2rem; border-radius:8px; font-weight:500; transition:background 0.3s, transform 0.3s; }
.skills-list li:hover { background:#90e0ef; transform:translateX(4px); }

/* Projects Table */
.projects-table { display:flex; flex-wrap: wrap; gap:1rem; justify-content:center; }
.project { background:#fff; padding:1.5rem; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.05); flex:1 1 250px; max-width:300px; transition:transform 0.3s, box-shadow 0.3s; }
.project:hover { transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,0,0,0.1); }
.project h3 { color:#0077b6; }
.project-desc { margin:0.8rem 0; }
.project-links a { display:inline-block; margin-right:1rem; text-decoration:none; color:#0077b6; font-weight:500; transition:0.3s; }
.project-links a:hover { color:#005f8a; text-decoration:underline; }

/* Contact */
#contact a { color:#0077b6; text-decoration:none; }
#contact a:hover { text-decoration:underline; }

/* Footer */
footer { background:#0077b6; color:#fff; text-align:center; padding:1.5rem 0; font-size:0.9rem; }

/* Responsive */
@media(max-width:768px){
  header{padding:1rem 5%;}
  header nav{display:none;}
  .hero h2{font-size:2rem;}
  .hero-subtitle{font-size:1rem;}
  section{padding:3rem 5%;}
  .skills-list li{padding:0.6rem 1rem;}
  .project{margin:1rem auto; padding:1.2rem; max-width:90%;}
  .projects-table{flex-direction:column;}
}
/* Tools & Platforms Section */
#tools {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

#tools h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #0077b6;
}

.tools-list {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.tools-list li {
  background-color: #fff;
  padding: 15px 25px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tools-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Responsive for Tools Section */
@media(max-width:768px){
  .tools-list { flex-direction: column; gap: 15px; }
}