*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:"Segoe UI", Roboto, Arial, sans-serif;background:#000;color:#dff7ff}
body{font-size:18px;line-height:1.45}

#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

#page{position:relative;z-index:1;padding-top:70px} 

/* NAV */
nav{position:fixed;top:0;left:0;width:100%;height:64px;background:rgba(2,2,4,0.6);backdrop-filter:blur(6px);z-index:1200;border-bottom:1px solid rgba(0,255,255,0.05)}
nav ul{display:flex;gap:14px;justify-content:center;align-items:center;height:100%;list-style:none;margin:0;padding:0 12px}
nav a{color:#7ff6ff;text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .18s ease;font-weight:600}
nav a:hover{background:rgba(0,255,255,0.08);color:#000;box-shadow:0 8px 30px rgba(0,255,255,0.06)}
nav a.active{background:#00f0ff;color:#001;box-shadow:0 12px 40px rgba(0,240,255,0.14);transform:translateY(-2px)}

/* HERO */
.hero-inner{max-width:1100px;margin:0 auto;display:flex;gap:20px;align-items:center;padding:38px 18px}
.hero-left{flex:0 0 240px;display:flex;justify-content:center}
.profile-pic{width:220px;height:220px;border-radius:50%;object-fit:cover;border:3px solid rgba(0,255,255,0.12);box-shadow:0 10px 30px rgba(0,255,255,0.04);transition:transform .25s,box-shadow .25s}
.profile-pic:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,255,255,0.12)}
.hero-right{flex:1;min-width:260px}
h1{color:#30f1ff;margin:0 0 8px 0;font-size:2.0rem}
.tagline{color:#9ee7ff;margin-bottom:12px}
.summary{color:#cfefff;margin-bottom:14px}

.dot {
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  transition: transform .25s ease, filter .25s ease;
}
.dot:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 14px 30px rgba(0,220,255,0.18));
}
.dot img { transition: transform .2s ease; }
.dot a:hover img { transform: scale(1.12); }

/* CTA buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:linear-gradient(90deg,#00f0ff,#0066ff);color:#001;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(0,240,255,0.06);transition:transform .15s}
.btn:hover{transform:translateY(-4px)}
.btn.ghost{background:transparent;color:#00f0ff;text-shadow:none;border:1px solid rgba(0,255,255,0.08)}

/* SECTION */
.section{padding:44px 18px;max-width:1100px;margin:0 auto}
.section-title{color:#01eeff;margin:0 0 18px 0;font-size:1.5rem}
.card{background:linear-gradient(180deg,rgba(6,6,8,0.6),rgba(10,10,12,0.55));border:1px solid rgba(0,255,255,0.06);padding:14px;border-radius:10px;margin-bottom:12px;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 80px rgba(0,140,255,0.06);border-color:rgba(0,240,255,0.14)}


.edu-card {
  border: 1px solid rgba(0,255,255,0.08);
  background: rgba(0,0,0,0.5);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.edu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,255,255,0.12);
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.edu-header h3 {
  margin: 0;
  font-weight: bold;
  color: #0ff;
}
.edu-date {
  text-align: right;
  color: rgb(224, 255, 250);
  font-size: 0.95rem;
}
.edu-school {
  margin: 4px 0 10px 0;
  color: #c7fbff;
  
}
.edu-card ul {
  margin: 8px 0 0 20px;
}
.edu-card ul ul {
  margin-top: 4px;
  margin-bottom: 4px;
}
.edu-card li {
  margin-bottom: 6px;
}
ol.roman {
  list-style-type: lower-roman;  /* makes i, ii, iii */
  margin: 8px 0 0 24px;
}

ol.roman li::marker {
  content: "(" counter(list-item, lower-roman) ") ";  /* turns into (i), (ii) */
}



/* muted */
.muted{color:#a9dfe9;font-size:0.95rem;margin-bottom:6px}

/* project grid */
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.project{overflow:visible}
.proj-thumb-wrap{overflow:visible;border-radius:8px}
.proj-img{width:100%;height:140px;object-fit:cover;border-radius:6px;border:1px solid rgba(0,255,255,0.06);transition:transform .35s,box-shadow .35s}
.project:hover .proj-img{transform:scale(1.25);box-shadow:0 30px 80px rgba(0,200,255,0.12);z-index:3;position:relative}
.proj-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.proj-link:hover h4 {
  color: #0ff;
  text-shadow: 0 0 8px rgba(0,255,255,0.6);
}

/* skills */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.skill-card{padding:12px}
.card h4 {color: #0ff; }
.skill-list{list-style:disc;margin-left:18px;color:#e6fbff}
.skill-list li{margin-bottom:8px;padding:8px;border-radius:6px;transition:transform .18s,box-shadow .18s}
.skill-list li:hover{transform:translateX(6px);box-shadow:0 12px 40px rgba(0,220,255,0.06);background:rgba(0,255,255,0.02);border:1px solid rgba(0,255,255,0.04)}

/* courses list */
.course-card {
  border: 1px solid rgba(0,255,255,0.08);
  background: rgba(0,0,0,0.5);
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,255,255,0.12);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.course-header h3 {
  margin: 0;
  font-weight: bold;
  color: #0ff;
}
.course-date {
  text-align: right;
  color: #9fe;
  font-size: 0.9rem;
}
.course-provider {
  margin: 4px 0 0 0;
  color: #cfe;
  
}

/* volunteering */
.volunteering-card {
  border: 1px solid rgba(0,255,255,0.08);
  background: rgba(0,0,0,0.5);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.volunteering-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,255,255,0.12);
}

.volunteering-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.volunteering-header h3 {
  margin: 0;
  color: #0ff;
}
.volunteering-date {
  text-align: right;
  color: #9fe;
  font-size: 0.95rem;
}
.volunteering-card ul {
  margin: 10px 0 0 20px;
}
.volunteering-card li {
  margin-bottom: 6px;
}
.volunteering-card p {
  margin: 4px 0;  
  color: rgb(176, 216, 219);   
  margin-top: 0;  
}
.volunteering-card .volunteering-header {
  margin-bottom: 2px; /* reduce gap between header row and role */
}




/* languages */
.lang-levels{display:flex;flex-direction:column;gap:12px;max-width:760px}
.lang-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lang-name{width:160px;color:#cfe}
.bars{display:flex;gap:8px;flex:1;justify-content:flex-end}
.bar{width:28%;height:14px;max-width:46px;border-radius:4px;border:1px solid rgba(0,255,255,0.06);background:transparent;transition:background .5s,transform .25s}
.bar.filled{background:linear-gradient(90deg,#00f0ff,#0066ff);box-shadow:0 6px 18px rgba(0,160,255,0.06);transform:translateY(-2px)}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-details a{color:#9fe}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(0,255,255,0.06);background:rgba(0,0,0,0.55);color:#dff;outline:none;transition:box-shadow .12s,border-color .12s}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 12px 40px rgba(0,200,255,0.06);border-color:rgba(0,255,255,0.16)}
.form-ctas{display:flex;gap:10px;align-items:center}

/* footer */
footer{padding:22px;text-align:center;color:#8fbccf}

/* fade-in base (hidden) and visible state */
.fade-in-elem{opacity:0;transform:translateY(18px);transition:opacity .9s ease-out,transform .9s ease-out}
.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:center;text-align:center;padding:28px 18px}
  .profile-pic{width:160px;height:160px}
  #page{padding-top:80px}
  .contact-grid{grid-template-columns:1fr}
  .lang-name{width:120px}
}
@media (max-width:480px){
  body{font-size:16px}
  nav ul{gap:8px;padding:0 8px}
  .proj-img{height:120px}
  .btn{padding:9px 12px}
}