/* Global */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Poppins', sans-serif;
    background: linear-gradient(180deg,#f0f8ff,#e6fcff);
    color:#222;
    line-height:1.6;
    scroll-behavior:smooth;
    overflow-x:hidden;
}
a { text-decoration:none; }
ul { list-style:none; }

/* Header */
header {
    background:#111;
    color:white;
    padding:18px 0;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 3px 10px rgba(0,0,0,0.3);
}
.nav-container {
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
}
.logo { font-size:1.8rem; color:#00c2cb; font-weight:600; }
.nav-list { display:flex; gap:20px; }
.nav-list a { color:white; transition:0.3s; font-weight:500; }
.nav-list a:hover { color:#00ffd8; }
.nav-toggle { display:none; cursor:pointer; }
.nav-toggle .hamburger { width:26px; height:2px; background:#fff; display:block; position:relative; }
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after { content:''; position:absolute; width:26px; height:2px; background:#fff; }
.nav-toggle .hamburger::before{ top:-8px; }
.nav-toggle .hamburger::after{ top:8px; }

/* Floating Social Icons */
.social-icons {
    position:fixed;
    left:20px;
    top:40%;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:1000;
}
.social-icons a {
    display:flex;
    width:40px;
    height:40px;
    background:#00c2cb;
    color:white;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:0.3s;
}
.social-icons a:hover { transform:translateX(5px) scale(1.1); }

/* Hero */
.hero { display:flex; justify-content:space-between; align-items:center; padding:80px 20px; position:relative; min-height:90vh; }
.hero-content { display:flex; flex-wrap:wrap; width:100%; }
.hero-text { max-width:550px; animation: fadeInLeft 1s ease forwards; }
.hero-text h2 {
    font-size: 2.8rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #00c2cb, #00ffd8, #00c2cb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #006d75; /* fallback color */
    animation: gradientText 3s ease infinite;
}
.hero-text .typed-text { font-size:1.3rem; color:#00ffd8; margin:8px 0 15px; min-height:30px; }
.hero-text .tagline { font-size:1.1rem; margin-bottom:25px; }
.hero-image { flex:1; text-align:right; }
.hero-image .profile-pic {
    width:320px;
    height:320px;
    border-radius:50%;
    border:5px solid #00c2cb;
    object-fit:cover;
    animation: float 3s ease-in-out infinite;
}

/* Buttons */
.btn { display:inline-block; background:#00c2cb; color:white; padding:12px 25px; border-radius:10px; font-weight:600; transition:0.3s; }
.btn:hover { background:#006d75; transform:translateY(-3px); }

/* Sections */
.section { padding:70px 20px; }
.light-bg { background:#f8f8f8; }
.container { max-width:1100px; margin:auto; }
h2 { text-align:center; font-size:2.4rem; margin-bottom:35px; color:#111; }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.skill-card { background:white; border-radius:15px; padding:25px; box-shadow:0 10px 20px rgba(0,0,0,0.1); transition:0.3s; }
.skill-card:hover { transform:translateY(-7px) scale(1.02); }
.progress-bar { width:100%; background:#e0e0e0; border-radius:10px; height:12px; margin-bottom:10px; overflow:hidden; }
.progress { height:12px; background:#00c2cb; border-radius:10px; transition:1s; }
.w95 { width:0%; animation: fillProgress 2s forwards 0.5s; }
.w90 { width:0%; animation: fillProgress 2s forwards 0.7s; }
.w85 { width:0%; animation: fillProgress 2s forwards 0.9s; }
.w80 { width:0%; animation: fillProgress 2s forwards 1.1s; }
@keyframes fillProgress { to { width: var(--w); } }

/* Projects */
.project-card { background:white; border-radius:15px; padding:25px; box-shadow:0 10px 20px rgba(0,0,0,0.1); margin-bottom:25px; transition:0.3s; transform-style: preserve-3d; }
.project-card:hover { transform: rotateY(5deg) rotateX(5deg) scale(1.05); box-shadow:0 20px 30px rgba(0,0,0,0.2); }
.project-card ul { margin-top:10px; padding-left:20px; }

/* Timeline */
.timeline { list-style:none; border-left:3px solid #00c2cb; padding-left:20px; }
.timeline li { margin-bottom:15px; }

/* Contact */
.contact-list { list-style:none; text-align:center; }
.contact-list li { margin:10px 0; }
.contact-list a { color:#00c2cb; font-weight:500; transition:0.3s; }
.contact-list a:hover { text-decoration:underline; }

/* Footer */
footer { background:#111; color:white; text-align:center; padding:20px; font-size:0.9rem; }

/* Particle.js container */
#particles-js { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* Animations */
@keyframes fadeInLeft { from{opacity:0; transform:translateX(-50px);} to{opacity:1; transform:translateX(0);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-15px);} }
@keyframes gradientText { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

/* Responsive */
@media(max-width:768px){
    .hero-content{ flex-direction:column; text-align:center; }
    .hero-image{ text-align:center; margin-top:30px; }
    .nav-toggle{ display:inline-block; }
    .nav-list{ display:none; position:absolute; right:16px; top:64px; background:#111; padding:12px; border-radius:10px; flex-direction:column; gap:12px; }
    .nav-list.show{ display:flex; }
    .social-icons{ display:none; }
}
/* Resume Button & Form */
.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
form {
  max-width: 500px;
  margin: 30px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
form input, form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}
form button {
  background: #00c2cb;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
}
form button:hover { background: #006d75; }

/* Small screen hero image */
@media(max-width:500px){
  .hero-text h2 { font-size: 2rem; }
  .hero-image .profile-pic { width: 220px; height: 220px; }
}
.project-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 25px;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}
.project-card:hover {
  transform: translateY(-5px);
}
.project-card ul {
  list-style-type: disc;
  margin-left: 25px;
  line-height: 1.6;
}
.project-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}