:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,0.06);
  --text: #e6eef9;
  --muted: #b8c4d6;
  --primary: #007acc;
  --accent: #00c4ff;
  --glass-blur: 14px;
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background: radial-gradient(1200px 800px at 80% -10%, #0f1b33, transparent) no-repeat, var(--bg);
  color:var(--text); line-height:1.6;
}

/* Scroll progress */
#scrollProgress{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index:9999;
}

/* Containers */
.container{width:min(1120px, 92%); margin:auto}

/* Navbar */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:rgba(9,14,26,0.6); border-bottom:1px solid rgba(255,255,255,0.06)}
.navbar .container{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{margin:0; font-weight:700; letter-spacing:.5px}
.logo span{color:var(--accent)}
.nav-links{list-style:none; display:flex; gap:18px; padding:0; margin:0}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:500}
.nav-links a:hover{color:var(--text)}
.btn.small{padding:8px 14px; font-size:.9rem}

/* Hero */
.hero-section{position:relative; min-height:86vh; display:grid; place-items:center; overflow:hidden}
#particles-js{position:absolute; inset:0; z-index:0}
.hero-content{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .9fr; gap:36px; align-items:center; padding:64px 0}
.hero-text .intro{opacity:.85}
.hero-text h1{font-size:clamp(36px,6vw,64px); margin:.1rem 0 .4rem}
.hero-text h1 span{color:var(--accent)}
.hero-text h3{margin:.4rem 0 1rem; font-weight:600; min-height:1.6em}
.typewriter{overflow:hidden; white-space:nowrap; border-right:2px solid var(--accent); animation:typing 3.5s steps(30,end) 1, blink .8s infinite step-end alternate}
@keyframes typing{from{width:0} to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
.desc{color:var(--muted); margin-bottom:1.2rem}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-btn{background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600; transition:transform .2s ease, box-shadow .2s ease}
.hero-btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,196,255,.2)}
.hero-btn.outline{background:transparent; border:1px solid var(--accent); color:var(--text)}
.hero-image img{width:100%; max-width:380px; display:block; border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,.35)}

/* Glass card utility */
.glass{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}

/* Section titles */
.section-title{
  text-align:center; font-size:clamp(26px,4vw,36px); margin:0 0 24px; letter-spacing:.3px
}

/* About (centered block) */
.about-section{padding:80px 0}
.about-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; padding:28px;
}
.about-avatar{width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,196,255,.25)}
.about-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.avatar-fallback{font-size:44px; font-weight:700; color:#0b1220}
.about-text h3{margin:.5rem 0}
.about-text h3 span{color:var(--accent)}
.about-text p{color:var(--muted); margin:.2rem 0 1rem}
.about-bullets{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0; margin:0 0 18px; list-style:none}
.about-bullets li{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); padding:8px 12px; border-radius:999px}
.about-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{background:linear-gradient(135deg, var(--primary), var(--accent)); border:none; color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600; cursor:pointer}
.btn.secondary{background:transparent; border:1px solid var(--accent); color:var(--text)}

/* Skills */
.skills-list{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center
}
.skill-icon{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:var(--text)
}
.skill-icon img{width:18px; height:18px}

/* Projects */
.projects-section{padding:80px 0}
.filter-buttons{display:flex; gap:10px; justify-content:center; margin-bottom:22px}
.filter-btn{padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:var(--text); cursor:pointer}
.filter-btn.active, .filter-btn:hover{border-color:var(--accent)}
.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px
}
.project-card{
  padding:18px; border-radius:var(--radius); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.project-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,196,255,.16)}
.project-card.hide{opacity:0; transform:scale(.98); pointer-events:none}

/* Modals */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; padding:20px}
.modal-content{position:relative; max-width:720px; margin:60px auto; padding:24px}
.modal .close{position:absolute; top:12px; right:16px; font-size:28px; cursor:pointer}

/* Publications */
.section{padding:80px 0}
.publication-card{padding:18px}
.publication-card a{color:#fff; text-decoration:none}
.publication-card a:hover{color:var(--accent)}

/* Certifications */
.certifications{padding:80px 0}
.cert-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px}
.cert-card{padding:16px; transition:transform .2s ease, box-shadow .2s ease}
.cert-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,196,255,.16)}
.cert-modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1200; display:none; align-items:center; justify-content:center; padding:20px}
.cert-modal img{width:90%; max-width:850px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.45)}
.cert-modal .close{position:absolute; top:22px; right:28px; font-size:32px; cursor:pointer}

/* Achievements */
.achievements-section{padding:80px 0}
.achievement-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; width:min(780px, 92%); margin-inline:auto}
.achievement-list li{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08)}
.achievement-list i{color:var(--accent)}

/* Contact */
.contact-section{padding:80px 0 0}
.contact-container{display:grid; grid-template-columns: 1fr 1.2fr; gap:20px; padding:18px}
.contact-container.glass{padding:22px}
.contact-info h3{margin-top:0}
.contact-form{display:grid; gap:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:#fff
}
.contact-form button{justify-self:start}

/* Wave footer */
.wave-bg svg{width:100%; height:120px; display:block; fill:var(--primary)}
.footer{padding:20px 0 40px; text-align:center; color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .hero-content{grid-template-columns:1fr; text-align:center}
  .hero-actions{justify-content:center}
}
.cert-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  gap: 20px;
  margin-top: 30px;
}

.cert-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
.cert-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 15px;
  width: 220px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #333; /* ✅ Darker text */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s ease-in-out;
}

.cert-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #007acc; /* ✅ Highlight title */
  margin-bottom: 5px;
}

.cert-card small,
.cert-card span {
  display: block;
  font-size: 14px;
  color: #555; /* ✅ Dark grey for visibility */
}

.cert-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* Contact Section */
.contact-info {
  font-size: 16px;
  color: #fff;
}

.contact-info i {
  color: #007acc;
  margin-right: 10px;
}

/* Social Icons */
.social-icons {
  margin-top: 15px;
}

.social-icons a {
  font-size: 28px;   /* ✅ Bigger icons */
  margin-right: 15px;
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: #007acc;   /* ✅ Hover highlight */
  transform: scale(1.2);
}
/* Social Icons */
.social-icons {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-icons i {
  font-size: 30px;
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.social-icons i:hover {
  color: #00c4ff;   /* brighter accent */
  transform: scale(1.3) rotate(8deg);  /* pop + tilt */
  text-shadow: 0 0 10px #00c4ff, 0 0 20px #007acc;  /* glow effect */
}
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.06); /* glass background */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px; 
  padding: 16px;
  max-width: 280px; /* box size */
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px) saturate(140%);
}

.hero-image img {
  width: 100%;
  border-radius: 14px; /* soft rectangle corners */
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}

.hero-image img:hover {
  transform: scale(1.03);
}
/* Base (already set with grids & flex, keep it clean) */

/* Tablet (below 1024px) */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;  /* stack text + image */
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .about-card {
    flex-direction: column;
    text-align: center;
  }
  .contact-container {
    grid-template-columns: 1fr; /* stack contact + form */
  }
}

/* Mobile (below 600px) */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }
  .navbar .container {
    flex-direction: column;
    gap: 10px;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .hero-text h1 {
    font-size: 32px; /* smaller heading */
  }
  .hero-image {
    max-width: 200px; /* smaller photo */
    margin: 0 auto;
  }
  .skills-list {
    flex-direction: column;
    align-items: center;
  }
  .projects-grid {
    grid-template-columns: 1fr; /* single column projects */
  }
  .cert-row {
    grid-template-columns: 1fr 1fr; /* 2 per row */
  }
  .achievement-list {
    gap: 8px;
    padding: 0 8px;
  }
  .contact-form input, .contact-form textarea {
    font-size: 14px;
  }
}
/* ============================
   EXPERIENCE SECTION
============================= */
.experience-section {
  padding: 80px 0;
}

.experience-list {
  display: grid;
  gap: 20px;
  width: min(900px, 95%);
  margin: auto;
}

/* Experience Card */
.experience-card {
  padding: 22px;
  border-radius: 18px;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 196, 255, 0.15);
}

/* Titles & Text */
.experience-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.experience-card .company {
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}

.experience-card .duration {
  display: inline-block;
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.experience-card .details {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .experience-card {
    padding: 18px;
  }

  .experience-card h3 {
    font-size: 18px;
  }
}
/* ============================
   CERTIFICATIONS ALIGNMENT FIX
============================= */

.certifications {
  padding: 80px 0;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  width: min(1100px, 95%);
  margin: auto;
}

/* Card */
.cert-card {
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 196, 255, 0.15);
}

/* Text styling */
.cert-card h3 {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
}

.cert-card p {
  margin: 0;
  color: var(--muted);
}

.cert-card span {
  margin-top: 8px;
  display: block;
  font-size: 14px;
  color: var(--muted);
}

/* Mobile fix */
@media (max-width: 600px) {
  .cert-grid {
    grid-template-columns: 1fr 1fr; /* 2 per row on mobile */
  }
}
body {
  font-family: Arial, sans-serif;
  background: #111;
  color: #fff;
}

.container {
  width: 90%;
  margin: auto;
}

.section-title {
  text-align: center;
  margin: 40px 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.project-card {
  background: #222;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s;
}

.project-card:hover {
  transform: scale(1.05);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #1e1e1e;
  padding: 25px;
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 10px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}