.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUpSection 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes fadeInUpSection {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-hr {
  animation: hrGrow 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes hrGrow {
  0% { width: 0; opacity: 0; }
  60% { width: 60%; opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.btn, .hero-title, .hero-desc, .hero-info {
  transition: box-shadow 0.3s, background 0.3s, color 0.3s, transform 0.3s;
}
.btn-primary:hover, .btn-outline:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 24px rgba(61,90,254,0.18);
}
.hero-section {
  /* ...existing code... */
}
.profile-img-wrapper {
  /* ...existing code... */
  animation: profile-pop 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes profile-pop {
  0% { transform: scale(0.7) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.hero-title {
  /* ...existing code... */
}
.hero-name {
  /* ...existing code... */
  animation: gradient-move 2.5s linear infinite alternate;
}
@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.hero-desc {
  /* ...existing code... */
  color: #222;
}
.highlight-years {
  color: #0077b6;
  background: #e3f2fd;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,119,182,0.08);
}
.highlight-skills {
  color: #00bfae;
  background: #e0f7fa;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,191,174,0.08);
}
.highlight-blue {
  color: #0077b6;
  background: #e3f2fd;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,119,182,0.08);
}
.highlight-pink {
  color: #0077b6;
  background: #e3f2fd;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,119,182,0.08);
}
.btn-primary {
  background: linear-gradient(90deg, #0077b6 60%, #00bfae 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0,119,182,0.10);
}
.btn-outline {
  background: #fff;
  color: #0077b6;
  border: 2px solid #0077b6;
}
.btn-outline:hover {
  background: #e0f7fa;
  color: #00bfae;
  border-color: #00bfae;
}
.info-green {
  color: #00bfae;
}
.info-gold {
  color: #0077b6;
}
.info-blue {
  color: #0077b6;
}
/* Hero Section Styles */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
  padding-bottom: 48px;
  position: relative;
}
.profile-img-wrapper {
  background: linear-gradient(135deg, #5b3df2 0%, #1db954 100%);
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 6px 32px rgba(91,61,242,0.10);
  margin-bottom: 18px;
}
.profile-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  object-fit: cover;
}
.hero-title {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
  color: #222;
}
.hero-name {
  background: linear-gradient(90deg, #5b3df2 40%, #1db954 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 900;
  position: relative;
}
.hero-name::after {
  content: '';
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #5b3df2, #ff4081);
  border-radius: 2px;
  margin: 0.2em auto 0 auto;
}
.hero-desc {
  width: 70vw;
  max-width: 700px;
  margin: 32px auto 0 auto;
  border-radius: 18px;
  padding: 22px 36px;
  background: #fff;
  font-size: 1.18rem;
  font-weight: 500;
  box-shadow: 0 2px 16px rgba(91,61,242,0.07);
  text-align: center;
  border: 1.5px solid #e3eafc;
}
.highlight-years {
  color: #f5b700;
  font-weight: 700;
  background: #fffbe6;
  padding: 2px 8px;
  border-radius: 8px;
}
.highlight-skills {
  color: #1db954;
  font-weight: 700;
  background: #eafcf3;
  padding: 2px 8px;
  border-radius: 8px;
}
.highlight-blue {
  color: #5b3df2;
  font-weight: 700;
  background: #e3eafc;
  padding: 2px 8px;
  border-radius: 8px;
}
.highlight-pink {
  color: #ff4081;
  font-weight: 700;
  background: #ffeaf7;
  padding: 2px 8px;
  border-radius: 8px;
}
.hero-buttons {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  justify-content: center;
}
.btn {
  padding: 14px 36px;
  font-size: 1.08rem;
  font-weight: 700;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(91,61,242,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(90deg, #5b3df2 60%, #1db954 100%);
  color: #fff;
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(90deg, #1db954 40%, #5b3df2 100%);
  box-shadow: 0 4px 16px rgba(91,61,242,0.18);
}
.btn-outline {
  background: #fff;
  color: #5b3df2;
  border: 2px solid #5b3df2;
}
.btn-outline:hover {
  background: #e3eafc;
  color: #1db954;
  border-color: #1db954;
}
.btn-icon {
  font-size: 1.2em;
}
.hero-info {
  margin-top: 38px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.info-badge {
  background: #f7f7fa;
  border-radius: 24px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-green {
  color: #1db954;
}
.info-gold {
  color: #f5b700;
}
.info-blue {
  color: #5b3df2;
}
@media (max-width: 600px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-desc {
    width: 95vw;
    padding: 14px 8px;
    font-size: 1rem;
  }
  .hero-info {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .profile-img {
    width: 90px;
    height: 90px;
  }
  .hero-title {
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  .hero-section {
    margin-top: 24px;
    padding-bottom: 24px;
  }
  .hero-desc {
    font-size: 1rem;
    padding: 0.5rem;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
}
@media (max-width: 480px) {
  .profile-img {
    width: 64px;
    height: 64px;
  }
  .hero-title {
    font-size: 1.25rem;
  }
  .hero-section {
    margin-top: 12px;
    padding-bottom: 12px;
  }
  .hero-desc {
    font-size: 0.95rem;
    padding: 0.25rem;
  }
}
/* Bright text for dark mode */
html.dark, html.dark body, html.dark * {
  color: #f5f5f5 !important;
}