:root{
  --accent: #0d6efd;
  --bg: #f4f6f9;
  --card: #ffffff;
  --muted: #6c757d;
}

html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#222;
  display:flex;
  flex-direction:column;
}

main { flex:1; }

/* Header */
header { background:#0b1220; }
header h1 { font-size:1.6rem; color:#fff; }

/* Profile image */
.profile-image {
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 24px rgba(2,6,23,0.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.profile-image:hover{ transform:scale(1.04); }

/* Card styling */
.card { border-radius:10px; }
.card h3{ margin-bottom:0.75rem; }

/* Timeline / accordion */
.timeline-list { position:relative; padding-left:24px; }
.timeline-list::before {
  content:"";
  position:absolute;
  left:8px; top:0;
  width:2px; height:100%;
  background:#e3e7ee;
}
.timeline-item {
  position:relative;
  margin-bottom:1rem;
  padding:10px 12px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(11,13,15,0.04);
}
.timeline-item::before {
  content:"";
  position:absolute; left:-4px; top:16px;
  width:12px; height:12px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px #fff;
}
.timeline-item.highlight { background:#eef5ff; }

/* Certificates gallery */
.certificate-card { overflow:hidden; border-radius:8px; background:#fff; padding:6px; }
.certificate-card img { width:100%; height:160px; object-fit:cover; transition: transform .25s ease, box-shadow .25s ease; display:block; }
.certificate-card img.zoom-hover:hover { transform:scale(1.06); box-shadow:0 12px 30px rgba(2,6,23,0.12); }

/* Buttons active state */
button[data-filter].active, button[data-filter].active:focus { background:var(--accent); color:#fff; border-color:var(--accent); }

/* list bullets */
ul.list-unstyled li { padding-left:1.2rem; position:relative; margin-bottom:6px; }
ul.list-unstyled li::before { content:"•"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* Footer */
footer { box-shadow:0 -3px 6px rgba(0,0,0,0.06); }

/* Cards hover effect */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* Responsive tweaks */
@media (max-width:767px){
  .profile-image { width:100px; height:100px; }
  .certificate-card img{ height:140px; }
  header h1 { font-size:1.2rem; }
}