body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  background: #f6f9fc;
  color: #222;
  transition: background-color 0.4s, color 0.4s;
}

header {
  background: #212a3c;
  color: #fff;
  padding: 24px 0;
  box-shadow: 0 2px 16px rgba(33,42,60,0.09);
  position: relative;
}

header .container {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  position: relative;
}

header h1 {
  margin: 0 0 12px; 
  font-size: 2.2em; 
  letter-spacing: 2px; 
}

nav {
  margin-top: 8px;
}

nav a {
  color: #6ec6ff;
  margin: 0 12px;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}

nav a:hover {
  color: #fff;
  text-decoration: underline;
}

#darkModeToggle {
  position: absolute; 
  top: 20px; 
  right: 24px;
  background: #181d24; 
  color: #ffe17e;
  border: none; 
  border-radius: 50%; 
  padding: 10px 14px; 
  font-size: 1.4em; 
  cursor: pointer; 
  transition: background 0.2s; 
  z-index: 2;
}

#darkModeToggle:hover { background: #333c52; }


main {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(80,100,180,.07);
  transition: background-color 0.4s, color 0.4s;
}

.spaced-section { margin-bottom: 65px; }

section { 
  opacity: 0; 
  transform: translateY(25px); 
  transition: opacity 0.75s, transform 0.75s;
  margin-top: 32px;
}
section.visible { opacity: 1; transform: translateY(0); }

h2 { 
  color: #2460b7; 
  margin-top: 50px; 
  margin-bottom: 24px; 
  text-align: center;
  font-size: 2.1em;
  letter-spacing: 2px;
}

.skills-section-label { 
  font-weight: 700; 
  color: #3999fa; 
  margin: 26px 0 6px 2px; 
  font-size: 1.12em; 
  letter-spacing: 1px;
}

.profile-image { 
  width: 190px; 
  height: 190px; 
  margin: 0 30px; 
  border-radius: 50%; 
  object-fit: cover; 
  box-shadow: 0 4px 15px rgba(44,120,220,.14);
}

.about-flex { 
  display: flex; 
  align-items: center; 
  gap: 40px; 
  margin-top: 30px; 
}

.about-text { 
  font-size: 1.25em; 
  line-height:1.65; 
}

.metrics-section { 
  display: flex; 
  justify-content: center; 
  gap: 44px; 
  margin: 28px 0 36px;
}

.metric-card {
  background: #eef3f7; 
  border-radius: 18px; 
  padding: 20px 24px 13px 24px; 
  box-shadow: 0 2px 18px rgba(58,128,188,0.045);
  display: flex; flex-direction: column; align-items: center; 
  min-width: 110px; min-height: 90px; 
  transition: transform 0.3s, background 0.18s;
}

.metric-icon { font-size: 2.2em; color: #f2992d; margin-bottom: 10px;}
.metric-number { font-size: 2em; color: #3999fa; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 2px; transition: color 0.2s;}
.metric-label { font-size: 1.05em; color: #203054; font-weight: 600; letter-spacing: 0.4px;}

.prog-langs-list { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 32px; 
  justify-content: center; 
  margin-bottom: 24px;
}
.prog-lang-card {
  display: flex; 
  align-items: center; 
  background: #e6f0ff; 
  border-radius: 18px; 
  padding: 18px 22px;
  box-shadow: 0 2px 14px rgba(30,90,170,0.075); 
  min-width: 260px; 
  margin: 6px 0; 
  transition: box-shadow 0.22s, background 0.18s, transform 0.18s;
  font-size: 1.17em;
}
.prog-lang-card:hover { box-shadow: 0 4px 16px #2d6cdf2c; background: #d3eafd; transform: scale(1.03);}
.prog-lang-header { display: flex; align-items: center; gap: 15px;}
.plang-icon { width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 1px 5px #3dbafc1a;}
.plang-title { font-size: 1.19em; font-weight: bold; color: #203054;}
.plang-level { color: #2d6cdf; font-size: 1.05em; font-weight: 600;}
.subskills-ring-list { display: flex; gap: 10px; margin-left: 26px;}
.circle-mini { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  font-weight: 700; 
  font-size: 1em; 
  background: #fff; 
  border-radius: 40px;
  min-width: 44px; 
  height: 44px; 
  box-shadow: 0 1px 7px #8bc5fe29;
  border: 4px solid #fea92f; 
  margin-right: 6px; 
  margin-left:0; 
  transition: border 0.21s;
  position: relative;
}
.circle-mini span { color:#ffa70b; font-size:0.97em; font-weight:600; letter-spacing:0.03em;}
.circle-mini.green { border-color:#18c964; }
.circle-mini.green span { color:#18c964;}
.circle-mini.orange { border-color:#f2992d;}
.circle-mini.orange span { color:#f2992d;}

.stagger, .stagger-group > * { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .8s, transform .8s; }
.stagger.visible, .stagger-group > *.visible { opacity: 1; transform: translateY(0) scale(1); }

.ai-skill-grid {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ai-skill-grid .skill-link { display: block;}
.ai-skill-grid .skill-card { min-width: 120px;}

.skills-grid { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 28px; 
  margin-bottom: 18px; 
  align-items: flex-start; 
  justify-content: flex-start; 
}
.skill-card { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  background: #eef3f7;
  padding: 15px 18px 10px; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(58,128,188,0.07); 
  width: 120px; 
  min-height: 140px;
  margin-bottom: 0; 
  transition: box-shadow 0.3s, transform 0.3s; 
  cursor: default;
  font-size: 1.15em;
}
.skill-card:hover { box-shadow: 0 6px 18px rgba(44,120,220,0.18); transform: translateY(-4px);}
.skill-card span { font-weight: 600; margin-bottom: 8px; color: #204883; font-size: 1em; text-align: center;}
.skill-card img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 3px; display: block;}
.skills-list { margin-top: 18px; margin-bottom: 0; font-size: 1.17em;}


.project-group { margin-bottom: 36px;}
.project-group-label { 
  font-size: 1.37em;
  font-weight: 700; 
  color: #f2992d;
  margin: 22px 0 20px 4px; 
  letter-spacing: 0.8px;
  text-align:center;
}
.project-grid { 
  display: flex; 
  gap: 24px; 
  flex-wrap: wrap; 
  justify-content: flex-start;
}
.project-card { 
  background: #2057ac; 
  color: #fff; 
  margin-bottom: 0; 
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,16,32,0.17); 
  padding: 18px 22px 20px 22px; 
  border-left: 4px solid #f4c542; 
  min-width: 250px; 
  flex: 1 1 270px; 
  opacity: .99;
  transition: box-shadow 0.3s, background 0.3s, color 0.3s;
  font-size:1.15em;
}
.project-card h3 { 
  margin: 0 0 10px 0; 
  font-size: 1.09em; 
  color: #ffe17e;
  letter-spacing:1px;
}
.project-card p { 
  font-size: 1em; 
  margin: 0; 
  color: #fff700; 
  text-shadow: 0 1px 3px #2228;
}
.project-card:hover { box-shadow: 0 8px 24px rgba(44,120,220,0.14); background: #286fa4; color: #ffe17e;}
.project-group.highlight { animation: highlight-zoom 0.75s ease; box-shadow: 0 0 0 6px #ffe17e66, 0 8px 32px #ffe17e44; border-radius: 18px; z-index: 2; position: relative;}
@keyframes highlight-zoom {
  0%   { transform: scale(1);   box-shadow: none;}
  50%  { transform: scale(1.05);box-shadow: 0 0 0 16px #ffe17e88, 0 10px 36px #ffe17e44; }
  100% { transform: scale(1);   box-shadow: 0 0 0 6px #ffe17e44, 0 8px 32px #ffe17e22;}
}

/* Experience/Certifications - bigger, more readable */
.highlighted-list-title { font-size: 1.41em; color: #3999fa;}
.highlighted-period { font-size: 1.13em; color: #22c55e; }
.cert-list, .big-list { font-size: 1.19em; line-height: 1.55;}
.cert-title { font-weight: 700;}
.cert-date { color: #f2992d; font-size: 1.12em;}

/* Contact Info */
.contact-label-row { display: flex; justify-content: center; align-items: center; gap: 54px; margin-bottom: 6px;}
.contact-label { font-size: 1em; color: #3999fa; letter-spacing: 0.5px; width: 82px; text-align: center; font-weight: 600;}
.contact-yellow { color: #ffe17e !important; text-shadow: 0 1px 1px #4f4203; font-weight: 700;}
.contact-icon-row { display: flex; justify-content: center; align-items: center; gap: 54px; margin-bottom: 8px;}
.contact-icon-container { display: flex; flex-direction: column; align-items: center; position: relative;}
.contact-icon { font-size: 2.2em; color: #212a3c; background: #e8f2fd; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.21s, color 0.18s, background 0.18s; cursor: pointer; box-shadow: 0 2px 10px rgba(50,100,180,0.08); outline: none;}
.contact-icon:hover, .contact-icon:focus { color: #fff; background: #3999fa; box-shadow: 0 1px 16px #3999fa26, 0 2px 12px #3999fa36;}
.contact-icon .contact-tooltip { visibility: hidden; opacity: 0; position: absolute; top: -52px; left: 50%; transform: translateX(-50%); background: #212a3c; color: #ffe17e; padding: 10px 18px; border-radius: 10px 10px 10px 3px; white-space: nowrap; font-size: 0.98em; box-shadow: 0 6px 24px #2226, 0 2px 8px #3999fa20; z-index: 8; transition: opacity 0.18s, visibility 0.18s; pointer-events: none;}
.contact-icon:hover .contact-tooltip, .contact-icon:focus .contact-tooltip { opacity: 1; visibility: visible;}
.contact-icon .contact-tooltip::after { content: ''; position: absolute; left: 15px; top: 100%; border-width: 10px 10px 0 0; border-style: solid; border-color: #212a3c transparent transparent transparent;}

.btn-group { display: inline-flex; gap: 10px; margin-left: 10px;}
.view-btn, .download-btn { background: #3999fa; color: #fff; padding: 6px 16px; border: none; border-radius: 5px; font-weight: 600; font-size: 0.99em; text-decoration: none; box-shadow: 0 1px 4px rgba(80,120,200,0.04); transition: background 0.2s, color 0.2s; cursor: pointer; outline: none;}
.download-btn { background: #2460b7; }
.view-btn:hover, .download-btn:hover { background: #1c365e; color: #ffe17e; }
.cert-list li { margin-bottom: 16px; }

footer { background: #1b232e; color: #bbb; text-align: center; padding: 18px 0; font-size: 0.98em; letter-spacing: 1px; margin-top: 32px; transition: background 0.3s, color 0.3s;}

body.dark-mode { background: #121212; color: #e0e0e0;}
body.dark-mode header { background: #1c1c1c; color: #ccc;}
body.dark-mode nav a { color: #80bfff;}
body.dark-mode nav a:hover { color: #aaccff;}
body.dark-mode main { background: #222; box-shadow: 0 8px 24px rgba(40,40,40,0.8);}
body.dark-mode .skill-card, body.dark-mode .prog-lang-card, body.dark-mode .metric-card { background: #28293d !important; color: #d7e2fe;}
body.dark-mode .plang-title, body.dark-mode .metric-label { color: #e3ecff;}
body.dark-mode .project-group-label { color: #ffe17e;}
body.dark-mode .project-card { background: #206490; color: #ffe17e; border-left-color: #ffe17e;}
body.dark-mode .project-card p, body.dark-mode .project-card h3 { color: #fffbe3;}
body.dark-mode footer { background: #111; color: #666;}
body.dark-mode .btn-group .view-btn, body.dark-mode .btn-group .download-btn { color: #ffe17e; background: #202850;}
body.dark-mode .btn-group .view-btn:hover, body.dark-mode .btn-group .download-btn:hover { background: #2c378c; color: #ffe17e;}
body.dark-mode .contact-icon { background: #2c3652; color: #ececec; }
body.dark-mode .contact-icon:hover, body.dark-mode .contact-icon:focus { background: #3999fa; color: #ffe17e;}
body.dark-mode .contact-icon .contact-tooltip { background: #151c26; color: #ffee9e;}
body.dark-mode .contact-icon .contact-tooltip::after { border-color: #151c26 transparent transparent transparent; }

@media (max-width: 900px) {
  main { margin: 16px; }
  .about-flex { flex-direction: column; gap: 18px; text-align: center;}
  .profile-image { margin-bottom: 10px; }
  .metrics-section { flex-direction: column; gap: 16px;}
  .prog-langs-list { flex-direction: column;}
  .project-grid { flex-direction: column; gap: 18px;}
  .project-card { min-width: unset; }
}
@media (max-width: 700px) {
  header .container, main { padding: 0 4px; }
  main { box-shadow: none; margin: 6px; border-radius: 0; }
  .prog-langs-list { gap: 10px;}
  .metric-card { padding:10px 6px 6px 6px;}
  .skills-grid { gap: 10px; justify-content: center;}
  .ai-skill-grid { gap: 12px;}
  .skill-card { width: 78px; min-width: 68px; padding: 8px 2px;}
}
.resume-center-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 18px;
}
#resume .btn-group a {
  font-size: 1.13em !important;
  min-width: 130px;
  text-align: center;
}
@media (max-width: 450px) {
  header h1 {
    font-size: 1.3em;
  }
  nav a {
    margin: 0 5px;
    font-size: 0.95em;
    padding: 5px 0;
  }
  .about-flex {
    gap: 10px;
  }
  .profile-image {
    width: 120px;
    height: 120px;
  }
  .skills-grid, .contact-label-row, .contact-icon-row {
    gap: 6px;
    flex-direction: column;
  }
  .metric-card,
  .prog-lang-card,
  .project-card {
    min-width: unset;
    font-size: 0.95em;
    padding: 8px 4px;
  }
  h2 {
    font-size: 1.1em;
  }
  main {
    padding: 0 2px 14px;
    margin: 2px;
  }
}