/* ===========================
   Portfolio CSS (copy-paste)
   =========================== */

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }

/* Body & background */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg,#dfe7ff 0%,#f3dfff 100%);
  color: #222;
  line-height: 1.6;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

/* Card base used for sections */
.card {
  width: 92%;
  max-width: 980px;
  margin: 28px auto;
  background: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(18,24,66,0.07);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease forwards;
}

/* Header */
.site-header {
  padding: 36px 16px 12px;
  text-align: center;
}

.header-inner {
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Profile photo */
.profile-pic {
  width:  250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 10px 30px rgba(43,46,120,0.18);
  transition: transform .35s ease, box-shadow .35s ease;
  opacity: 0;
  animation: softFade 1.3s ease forwards;
}

/* profile hover glow */
.profile-pic:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(43,46,120,0.26);
}

/* Title block */
.title-block { max-width:640px; text-align:center; }

h1 {
  color: #2a2a72;
  font-size: 30px;
  margin-bottom:6px;
  opacity: 0;
  animation: softFade 1.4s ease forwards;
}

.subtitle {
  color:#4a4a9e;
  font-size: 15px;
  margin-bottom:8px;
  opacity: 0;
  animation: softFade 1.8s ease forwards;
}

/* Contact & social */
.contact-row { margin:8px 0; color:#555; font-size:14px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;}
.contact-link { color:#2a2a72; text-decoration:none; font-weight:500; }
.dot { color:#888; }

.social-row { margin-top:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.social { text-decoration:none; background:#f2f3ff; color:#2f2f6d; padding:8px 12px; border-radius:8px; font-weight:600; box-shadow:0 6px 18px rgba(46,50,120,0.05); transition:transform .22s ease, box-shadow .22s ease; }
.social:hover { transform: translateY(-6px); box-shadow:0 16px 36px rgba(46,50,120,0.12); }

/* CTA buttons */
.cta-row { margin-top:12px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; text-decoration:none; background:#2a2a72; color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; box-shadow: 0 8px 30px rgba(42,42,114,0.12); transition: transform .2s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-6px); }
.btn-outline { background: transparent; border: 2px solid #2a2a72; color: #2a2a72; }

/* Section titles */
section h2 { font-size:22px; color:#313168; margin-bottom:12px; }

/* About */
.about-section p { font-size:16px; color:#333; }

/* Skills */
.skills-grid { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.skills-col { flex:1 1 260px; min-width:220px; }
.tag-list { list-style:none; display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.tag { background:#f2f3ff; color:#2f2f6d; padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px; box-shadow: 0 6px 18px rgba(46,50,120,0.04); }

/* Projects */
.projects-section .project-card { margin-top:14px; padding:14px; border-radius:10px; background:linear-gradient(180deg,#ffffff 0%,#fbfbff 100%); border:1px solid rgba(46,50,120,0.04); transition:transform .28s ease, box-shadow .28s ease; }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(27,33,90,0.10); }
.project-card h3 { margin-bottom:6px; color:#2a2a72; }
.project-card h3 a { color: inherit; text-decoration:none; }
.project-card h3 a:hover { text-decoration:underline; }
.project-card .muted { font-size:13px; color:#6b6b9a; margin-bottom:8px; }

/* Project meta */
.project-meta { display:flex; gap:12px; color:#555; font-size:13px; margin-top:8px; flex-wrap:wrap; }

/* Achievements */
.achieve-list { list-style: disc; margin-left:18px; color:#333; }
.achieve-list li { margin:8px 0; }

/* Contact links grid */
.links-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:12px; }
.link-card { display:block; padding:12px; border-radius:10px; background:#f8f8ff; text-decoration:none; color:#222; border-left:6px solid #6c6ce3; transition:transform .22s ease, box-shadow .22s ease; }
.link-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(30,34,90,0.08); }
.link-card span { display:block; color:#666; font-size:13px; margin-top:6px; }

/* Footer */
.site-footer { text-align:center; padding:20px 12px; color:#666; font-size:14px; margin:30px 0 60px; }

/* Small helper */
.muted { color:#60607f; font-size:14px; }
.small { font-size:13px; color:#777; }

/* =======================
   Animations & helpers
   ======================= */
@keyframes fadeUp {
  0% { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}
@keyframes softFade {
  0% { opacity:0; transform: translateY(6px); }
  100% { opacity:1; transform: translateY(0); }
}

/* stagger section delays (cards are main + multiple sections) */
.card:nth-of-type(1) { animation-delay: 0.25s; }
.card:nth-of-type(2) { animation-delay: 0.45s; }
.card:nth-of-type(3) { animation-delay: 0.65s; }
.card:nth-of-type(4) { animation-delay: 0.85s; }
.card:nth-of-type(5) { animation-delay: 1.05s; }

/* Responsive */
@media (max-width:880px){
  .header-inner { gap:12px; padding:0 8px; }
  .title-block { text-align:center; }
  .profile-pic { width:130px; height:130px; }
  h1 { font-size:26px; }
  .card { padding:18px; margin:18px auto; }
}

@media (max-width:480px){
  .profile-pic { width:120px; height:120px; }
  .cta-row { flex-direction:column; gap:8px; align-items:center; }
  .social-row { gap:8px; justify-content:center; }
}