:root{
  --bg:#0e0f12;
  --card:#0f1115;
  --muted:#9aa3b2;
  --accent1:#ff7a59;
  --accent2:#6be4c7;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.06);
  --max-width:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";

  --muted-card: #888;
  --accent3: #feb47b;
  --text-color: #f1f1f1;

  /* Badge Colors */
  --badge-teal: #1abc9c;
  --badge-blue: #3498db;
  --badge-green: #2ecc71;
  --badge-yellow: #f1c40f;
  --badge-orange: #e67e22;
  --badge-purple: #9b59b6;  
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

#about, #resume-hero, #skills, #projects
{
    font-family: var(--ff-display);
}

/* left vertical nav */
.side-nav{
  position:fixed;
  left:18px;
  top:20px;
  bottom:20px;
  width:64px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  backdrop-filter: blur(6px);
}
.logo{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;background:
    conic-gradient(from 180deg at 50% 50%, var(--accent1), var(--accent2));
  color:#081018;font-weight:700;font-size:14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 -6px 12px rgba(255,255,255,0.02);
}
.side-nav a{
  width:44px;height:44px;border-radius:8px;display:grid;place-items:center;
  color:var(--muted);text-decoration:none;font-size:13px;
}
.side-nav a:hover{background:var(--glass); color: #fff;}

main{
  max-width:var(--max-width);
  margin:40px auto;
  padding:40px;
}

/* hero */
.resume-hero{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:28px;
  align-items:center;
  margin-bottom:28px;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  border-radius:14px;padding:28px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}
.name{
  font-size:48px;font-weight:800;letter-spacing:-1px;margin:0 0 6px 0;
  background: linear-gradient(90deg, #fff, #b8dff6 60%); -webkit-background-clip: text; color:transparent;
}
.title{color:var(--accent2);font-weight:600;margin-bottom:12px;}
.bio{color:var(--muted);margin-bottom:18px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  background:linear-gradient(90deg,var(--accent1), #ffb38f);
  color:#081018;padding:10px 14px;border-radius:10px;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 8px 18px rgba(255,122,89,0.12);
}
.btn.ghost{background:transparent;border:1px solid var(--glass-border);color:var(--muted);}

/* avatar / accent panel */
.aside{
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.avatar{
  width:180px;height:180px;border-radius:18px;overflow:hidden;border:1px solid var(--glass-border);
  background: linear-gradient(135deg,var(--accent2), var(--accent1));
  display:grid;place-items:center;font-weight:800;font-size:28px;color:#061018;
  box-shadow: 0 12px 40px rgba(8,16,24,0.6);
}
.meta{
  width:100%;background:var(--card);padding:12px;border-radius:12px;border:1px solid var(--glass-border);
  color:var(--muted);font-size:14px;text-align:center;
}

/* grid sections */
.grid{
  display:grid;gap:18px;
}
.two-col{grid-template-columns: 1fr 380px;}
.cards{
  display:grid;grid-template-columns: repeat(3,1fr); gap:14px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid var(--glass-border); padding:14px;border-radius:12px;
}

/* timeline */
.timeline{
  position:relative;padding-left:20px;
}
.timeline::before{
  content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--accent2), var(--accent1));
  border-radius:2px;
}
.entry{position:relative;padding:12px 14px;margin-bottom:12px;background:var(--glass-2);border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.entry .tag{position:absolute;left:-72px;top:0px;background:#0b1016;border:1px solid var(--glass-border);padding:6px 8px;border-radius:6px;color:var(--muted);font-size:12px}
.entry .tag-offset{position:absolute;left:-72px;top:80%;background:#0b1016;border:1px solid var(--glass-border);padding:6px 8px;border-radius:6px;color:var(--muted);font-size:12px}
.entry h4{margin:0 0 6px 0}
.entry p{margin:0;color:var(--muted);font-size:14px}

.empty_entry{position:relative;padding:12px 14px;margin-bottom:0px;background:transparent;border-radius:10px;border:1px solid transparent}
.empty_entry .tag{position:absolute;left:-72px;bottom:32px;background:#0b1016;border:1px solid var(--glass-border);padding:6px 8px;border-radius:6px;color:var(--muted);font-size:12px}
.empty_entry .tag-offset{position:absolute;left:-72px;top:80%;background:#0b1016;border:1px solid var(--glass-border);padding:6px 8px;border-radius:6px;color:var(--muted);font-size:12px}
.empty_entry h4{margin:0 0 6px 0}
.empty_entry p{margin:0;color:transparent;font-size:14px}

/* skills */
.skills{display:flex;flex-wrap:wrap;gap:10px}
.skill{
  flex:1 1 140px;min-width:140px;background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);padding:12px;border-radius:10px;border:1px solid var(--glass-border);
}
.skill .bar{height:8px;background:rgba(255,255,255,0.04);border-radius:8px;margin-top:8px;overflow:hidden}
.bar > span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent2),var(--accent1));}

/* projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proj{
  position:relative; height:140px;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border);
  display:flex;align-items:end;padding:12px;color:#02161a;background:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  transition:transform .22s ease, box-shadow .22s ease;
}
.proj:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.proj .label{font-weight:700;font-size:16px}
.proj .meta{font-size:13px;color:var(--muted)}

/* contact footer */
.contact{
  display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px;border-radius:12px;border:1px solid var(--glass-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
}

/* responsive */
@media (max-width:980px){
  .side-nav{display:none}
  .resume-hero{grid-template-columns:1fr}
  .two-col{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
  .name{font-size:38px}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .avatar{width:140px;height:140px}
  .title{font-size:15px}
}

/* small interactive tilt effect helper */
.tilt-wrap{transform-style:preserve-3d; perspective:900px;}


/* Overall Card Container */
.skill-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 350px; /* Increased base width */
  max-width: 250px;
  min-width: 200px;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px); /* Glassmorphism effect */
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Header */
.skill-header {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Skill List */
.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Spacing between rows */
}

    /* Skill Item (Row) */
    .skill-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .skill-item:last-child {
      border-bottom: none;
    }

    /* Left Side: Icon + Name */
    .skill-content {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .skill-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted-card);
    }

    .skill-icon svg {
      width: 100%;
      height: 100%;
    }

    .skill-name {
      font-size: 0.7rem;
      font-weight: 500;
    }

    /* Time Badge (Capsule) */
    .time-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px; /* Pill shape */
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      color: white; /* Clean white text on colored badge */
    }

    /* Badge Text */
    .badge-text {
      line-height: 1;
    }

    /* Badge Clock Icon */
    .badge-icon {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .badge-icon svg {width: 100%;height: 100%;}

    /* Badge Color Modifiers */
    .badge-teal { background-color: var(--badge-teal); }
    .badge-blue { background-color: var(--badge-blue); }
    .badge-green { background-color: var(--badge-green); }
    .badge-yellow { background-color: var(--badge-yellow); }
    .badge-orange { background-color: var(--badge-orange); }
    .badge-purple { background-color: var(--badge-purple); }

    /* Proficiency Container */
    .proficiency-container {margin-top: auto;}

    /* Refined Proficiency Bar */
    .bar {
      height: 12px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 999px;
      overflow: hidden;
    }

    .bar > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent3), var(--accent1));
      width: 92%; /* Set width inline in HTML, kept from original */
    }

    /* Proficiency Label */
    .proficiency-label {
      margin-top: 10px;
      font-size: 0.8rem;
      color: var(--muted-card);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
    }