/* Minimal, responsive portfolio for GitHub Pages */
:root{
  --bg:#0b0e14; --panel:#0f1320; --text:#e6e6e6; --muted:#aeb3c2; --brand:#7c9cf5; --card:#12182a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.container{max-width:980px;margin:0 auto;padding:0 1.25rem}
.site-header{position:sticky;top:0;background:rgba(11,14,20,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #1b2340}
/* .nav{display:flex;justify-content:space-between;align-items:center;min-height:60px}

.nav-links{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--text)} */

.hero{padding:5rem 1.25rem 3rem}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin:.25rem 0 .5rem}
.hero h1 span{color:var(--brand)}
.hero p{max-width:60ch;color:var(--muted)}
.cta{margin:1rem 0;display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand);color:#0b0e14;text-decoration:none;padding:.6rem 1rem;border-radius:.75rem;font-weight:600}
.btn.outline{background:transparent;color:var(--text);border:1px solid #2b3769}
.meta{color:var(--muted);margin-top:.25rem}
h2{font-size:1.6rem;margin:2rem 0 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid #182042;border-radius:1rem;padding:1rem}
.card h3{margin:.25rem 0 .25rem}
.card p{margin:.35rem 0;color:var(--muted)}
.tags{font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}
.chips li{background:#182042;border:1px solid #22305c;border-radius:999px;padding:.35rem .6rem}
.site-footer{padding:2rem 0;border-top:1px solid #1b2340;margin-top:3rem}
.small{color:var(--muted);font-size:.9rem}
@media (max-width:600px){.nav-links{display:none}}

/* Skill category cards */
.skill-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.skill-card{background:var(--card);border:1px solid #182042;border-radius:1rem;padding:1rem}
.skill-card h3{margin:.25rem 0 .5rem;font-size:1.05rem}
.skill-card .chips{margin-top:.25rem}

/* === Profile photo in Hero === */
/* === Split hero: text left, photo right === */
.hero-split{display:flex;align-items:center;gap:3rem}
.hero-left{flex:1;min-width:0}
.hero-right{flex:0 0 220px;display:flex;justify-content:center}
.avatar{width:220px;height:220px;border-radius:50%;object-fit:cover;border:2px solid #2b3769;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.hero-left h1{margin-top:0}

/* Stack on mobile */
@media (max-width:900px){
  .hero-split{flex-direction:column;text-align:center}
  .hero-right{order:-1;margin-bottom:0.5rem}
}

/* === End Profile photo in Hero === */

/* Certifications layout (single-card) */
.card.cert h3{font-size:1rem;margin:.1rem 0 .25rem}
.card.cert .small{color:var(--muted);margin:0 0 .35rem}

/* Blog cards: buttons row + external-link arrow */
.actions{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
a.ext::after{content:"↗";margin-left:.25rem}
.nav-links a.active{color:var(--text);font-weight:600}


/* Project card heading */


/* Project description text */
.card p {
  color: #7c9cf5;   /* lighter gray for descriptions */
  margin: .35rem 0;
}

/* Tech stack tags (Python, Power BI, etc.) */
.card .tags {
  color: #8ee6a2;   /* green-ish accent */
  font-size: .9rem;
  font-weight: 500;
}

/* Resource links (Code · Report · Demo etc.) inside project cards */
.card p a {
  color: #f5a97c;         /* orange accent */
  /* remove underline */
  font-weight: 600;
}

.card p a:hover {
  color: #7c9cf5;         /* lighter orange on hover */
  text-decoration: underline;
}

/* Profile avatar hover zoom */
.avatar {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2b3769;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar:hover {
  transform: scale(1.08); /* zoom in slightly */
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d1117;
  padding: 1px 50px;
}

.logo{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px
}
.menu {
  display: flex;
  gap: 15px;
  list-style: none;
}
.menu li a {
  text-decoration: none;
  color: white;
}
.menu-icon {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}
#menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    right: 20px;
    background: #161b22;
    padding: 15px;
    border-radius: 8px;
  }
  #menu-toggle:checked + .menu-icon + .menu {
    display: flex;
  }
  .menu-icon {
    display: block;
  }
}