/* ==== Reset & Base ==== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(120deg, #dde6fa 0%, #c3e5f7 100%);
  color: #202a44;
  min-height: 100vh;
}

/* ==== Header ==== */
header {
  background: rgba(51, 84, 160, 0.96);
  box-shadow: 0 2px 10px #3354a026;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 25px 0;
  border-radius: 0 0 18px 18px;
  position: sticky;
  top: 0;
  z-index: 100;
}
header a {
  color: #fff;
  font-size: 1.19em;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 7px;
  transition: background .18s, color .18s, box-shadow .18s;
}
header a:hover, header a:focus {
  background: #8ac8f6;
  color: #28407b;
  box-shadow: 0 2px 11px #8ac8f633;
  outline: none;
}

/* ==== Welcome (vertical layout) ==== */
#welcome {
  margin: 48px 0 38px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#welcome-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#typed {
  font-size: 2.7em;
  font-weight: 800;
  background: linear-gradient(91deg, #3454c5, #6ec3fa 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  letter-spacing: 1.6px;
}
.text { font-family: inherit; }
#plugs {
  display: flex;
  gap: 26px;
  margin: 22px auto 0 auto;
}
.logo {
  width: 42px; height: 42px; border-radius: 50%; background: #3354a026;
  box-shadow: 0 2px 12px #6ec3fa33;
  transition: transform .18s, box-shadow .18s;
  padding: 6px;
  object-fit: contain;
}
.logo:hover {
  transform: scale(1.17);
  box-shadow: 0 4px 18px #8ac8f688;
  background: #e5f3ff;
}
#down {
  width: 40px;
  margin-top: 35px;
  opacity: 0.7;
  animation: bounceDown 1.5s infinite;
}
@keyframes bounceDown {
  0%,100% { transform: translateY(0);}
  50% { transform: translateY(13px);}
}

/* ==== Main Layout ==== */
#content {
  display: flex;
  gap: 44px;
  max-width: 1200px;
  margin: 0 auto 58px;
}
#side-nav {
  position: sticky; top: 90px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 15px;
  background: rgba(244, 249, 255, 0.96);
  border-radius: 20px;
  box-shadow: 0 6px 22px #7bc2b210;
  min-width: 170px;
  padding: 28px 20px;
}
#side-nav a {
  color: #3253a5;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.08em;
  padding: 11px 14px;
  border-radius: 9px;
  transition: background .18s, color .18s;
}
#side-nav a:hover, #side-nav a:focus {
  background: #6ec3fa22;
  color: #3892d6;
  outline: none;
}
#main { flex: 1; display: flex; flex-direction: column; gap: 46px; }

/* ==== Section Cards ==== */
.page {
  background: rgba(255,255,255,0.98);
  border-radius: 21px;
  box-shadow: 0 6px 24px #6ec3fa22;
  padding: 42px 52px 36px 38px;
  margin-bottom: 18px;
  backdrop-filter: blur(0.5px);
  transition: box-shadow 0.18s;
}
.page:hover { box-shadow: 0 10px 38px #6ec3fa38; }
.page-header {
  font-size: 2em;
  color: #417aec;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.line-wrapper { width: 100%; display: flex; justify-content: flex-start; }
.line {
  height: 3px; width: 90px; border-radius: 7px; border: none;
  background: linear-gradient(92deg,#417aec 10%, #b7e0ff 90%);
  margin-bottom: 21px;
}

/* ==== About Section ==== */
.box { display: flex; align-items: flex-start; gap: 40px; }
.about-item { flex: 1 1 0; font-size: 1.10em; }
.left { text-align: left; }
#profile {
  width: 175px; max-height: 500px;
  object-fit: cover; border-radius: 19px;
  box-shadow: 0 5px 25px #72a1fc33;
  margin-top: 13px;
  border: 4px solid #eaf3ff;
}

/* ==== Lists ==== */
.page ul { list-style: none; padding-left: 0; margin-left: 13px; margin-top: 13px; }
.page ul li {
  padding: 9px 0; border-bottom: 1px solid #e8f5fd;
  color: #4c67a7; font-size: 1.10em;
  transition: background .18s, color .18s;
}
.page ul li:hover { background: #ecf6ff; color: #417aec; }
.column-box { display: flex; gap: 29px; }
.edu-gap { margin-top: 7px; }

/* ==== Experience Section ==== */
/* Experience Panel: Vertical flex column for the overall timeline */
.xp-gap {
    flex-direction: column;
    gap: 36px;
  }
  
  /* Each item in experience is a horizontal flex row */
  .xp-post {
    display: flex;
    align-items: flex-start;
    background: #f6f8fd;
    border-radius: 13px;
    box-shadow: 0 3px 15px #8ac8f622;
    padding: 18px 28px 16px 28px;
    margin-bottom: 0;
    gap: 32px;
    /* Ensures consistent spacing */
  }
  
  /* The left column: company, job title, date */
  .xp-summary {
    min-width: 220px;
    max-width: 320px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
  }
  
  .company-name {
    font-weight: bold;
    color: #417aec;
    font-size: 1.12em;
    letter-spacing: 0.7px;
  }
  
  .job-position {
    font-style: italic;
    color: #4c67a7;
    font-size: 1em;
  }
  
  .job-info {
    font-size: 0.99em;
    color: #7f8ea4;
  }
  
  /* The right column: description list */
  .xp-description {
    flex: 1 1 0;
    margin-top: 0;
    margin-left: 0;
    color: #4c67a7;
    font-size: 1.02em;
    padding-left: 0;
    list-style-position: inside;
  }
  
  .xp-description li {
    margin-bottom: 6px;
    padding-left: 0;
  }
  
  .xp-line-container {
    display: flex;
    width: 100%;
    height: 18px;
    align-items: center;
    justify-content: center;
  }
  
  .xp-line {
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg,#a5c2f0 30%, #e8f1ff 100%);
    border-radius: 3px;
    margin: 0 auto;
  }
  
  /* Responsive: Stack left/right columns under 800px */
  @media (max-width: 800px) {
    .xp-post {
      flex-direction: column;
      gap: 12px;
      padding: 18px 14px;
    }
    .xp-summary {
      min-width: 0;
      max-width: none;
      flex: 1 1 0;
      padding-top: 0;
    }
  }
  
  /* Optional: highlight on hover */
  .xp-post:hover {
    box-shadow: 0 6px 24px #417aec18;
    transition: box-shadow 0.2s;
  }
#education {
    display: flex;
    gap: 36px;
    align-items: stretch;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
  }
  
  /* Make the boxes look balanced and neat */
  #ed-summary, #coursework {
    flex: 1 1 320px;
    background: #f8fbfe;
    border-radius: 16px;
    box-shadow: 0 2px 12px #6ec3fa14;
    padding: 34px 30px;
    margin: 0;
    min-width: 260px;
    /* Extra for visual rhythm */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Remove default education page card background (avoid double card) */
  #education.page {
    background: none;
    box-shadow: none;
    padding: 0;
  }
  
  /* Responsive: Stack on mobile */
  @media (max-width: 900px) {
    #education {
      flex-direction: column;
      gap: 20px;
    }
    #ed-summary, #coursework {
      min-width: 0;
      padding: 24px 12px;
    }
  }
  

/* ==== Projects Section ==== */
.project-page { flex-direction: column; gap: 40px; }
.project-row {
    display: flex;
    gap: 33px;
    margin-bottom: 24px;
  }
  
  /* Each project-box: vertical stack on mobile, side-by-side on desktop */
  .project-box {
    background: #eaf4fd;
    border-radius: 14px;
    box-shadow: 0 3px 20px #6ec3fa18;
    padding: 22px 27px;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.14s;
    justify-content: stretch;
  }
  .project-box:hover {
    box-shadow: 0 6px 38px #6ec3fa38;
    transform: scale(1.022);
  }
  
  /* Align image + text inside each project */
  .project-post {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  
  /* Ensures images are consistent and centered */
  .project-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 3px 17px #8ac8f634;
    background: #fff;
    flex-shrink: 0;
    margin-bottom: 0;
    display: block;
  }

.project-link {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    transition: transform 0.14s, box-shadow 0.14s;
    box-shadow: 0 2px 8px #8ac8f623;
    margin-left: 5px;
  }
  
  .project-link:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 22px #8ac8f644;
  }
  
  /* Text always aligns with image baseline */
  .project-description {
    color: #4c67a7;
    font-size: 1.04em;
    line-height: 1.6;
    margin: 0;
    flex: 1;
    text-align: left;
  }
  
  /* If you have source links use: */
  .source {
    font-size: 0.89em;
    color: #3892d6;
    text-decoration: underline;
    margin-top: 4px;
    margin-left: 6px;
  }
  
  /* Responsive: Stack image above text on small devices */
/* Responsive: stack image above text, github icon stays small */
@media (max-width: 900px) {
    .project-row,
    .project-box,
    .project-post,
    .project-intro {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 13px;
    }
    .project-photo {
      margin-bottom: 6px;
      align-self: flex-start;
      width: 70px;
      height: 70px;
    }
    .project-link {
      width: 22px;
      height: 22px;
      margin-left: 0;
    }
  }

.photo-container { display: flex; align-items: center; }
.announce {
  background: #f7fff7;
  border-left: 5px solid #b3f4d2;
  border-radius: 10px;
  box-shadow: 0 2px 11px #b3f4d214;
  padding: 16px 29px;
  margin-bottom: 8px;
}
.announce .text { color: #37af7c; font-weight: 600; }

/* ==== Responsive Design ==== */
@media (max-width: 1100px) {
  #content { flex-direction: column; gap: 0; max-width: 96vw; }
  #side-nav { position: static; min-width: auto; box-shadow: none; background: transparent; padding: 0; }
}
@media (max-width: 520px) {
  header { flex-direction: column; gap: 11px; padding: 15px 0; }
  .page { padding: 6px 2vw; }
  #side-nav { padding: 0; background: none; }
  #typed { font-size: 2.2em; }
  #plugs { gap: 13px; }
}

/* ==== Accessibility ==== */
a:focus { outline: 2px solid #417aec; outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-thumb { background: #e7f4fd; border-radius: 8px; }