.about-hero {
  background: linear-gradient(270deg, #0d1117, #422b1f, #21262d, #422b1f, #30363d, #422b1f);
  background-size: 400% 400%;
  color: #c9d1d9;
  animation: gradientMove 6s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.about-hero h1 {
  font-size: 2.5rem;
  color: #58a6ff;
}

.about-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 80px 20px;
  gap: 40px;
  background: linear-gradient(45deg, #12171d, #1e1a2b, #0d3d3d, #12171d);
  background-size: 300% 300%;
  color: #c9d1d9;
  animation: whoamiGradient 8s ease-in-out infinite;
}

@keyframes whoamiGradient {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.about-text {
  flex: 1 1 400px;
  max-width: 600px;
  color: #c9d1d9;
}

.about-text h2 {
  margin-bottom: 15px;
  font-size: 2rem;
  color: #58a6ff;
}

.about-text p {
  margin-bottom: 20px;
  line-height: 1.6;
}

.about-map {
  flex: 1 1 400px;
  max-width: 600px;
  min-height: 400px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(88,166,255,0.2);
}

.skills-section {
  background: linear-gradient(180deg, #0d1117, #1a1033, #0d1117, #101a33);
  background-size: 100% 200%;
  color: #c9d1d9;
  animation: skillsGradient 6s ease-in-out infinite;
}

@keyframes skillsGradient {
  0% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

.skills-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.skills-container h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #58a6ff;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.skill-card {
  background: #1b1f24;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(88,166,255,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(88,166,255,0.3);
}

.skill-card h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #58a6ff;
}

.skill-card p {
  font-size: 1rem;
  color: #c9d1d9;
}