/* FINAL PORTFOLIO ENHANCEMENTS - SKILL BARS AND CARDS */

/* ===== SKILL BARS PERCENTAGE FIX ===== */
/* Ensure skill bars show correct percentages */
.skill-bar {
  /* Override previous transitions to ensure animations work correctly */
  transition: width 1.5s ease-out !important;
}

/* Reset width to auto instead of 0 for skill bars */
.skill-bar[data-target-width] {
  width: 0 !important;
}

/* When animated class is added, use the data-target-width */
.skill-bar.animated[data-target-width="95%"] {
  width: 95% !important;
}

.skill-bar.animated[data-target-width="90%"] {
  width: 90% !important;
}

.skill-bar.animated[data-target-width="85%"] {
  width: 85% !important;
}

.skill-bar.animated[data-target-width="80%"] {
  width: 80% !important;
}

.skill-bar.animated[data-target-width="75%"] {
  width: 75% !important;
}

.skill-bar.animated[data-target-width="70%"] {
  width: 70% !important;
}

/* ===== CONTACT & CONNECT CARDS ENHANCEMENT ===== */
/* Increase card width and enhance appearance */
.personal-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.info-item {
  flex: 1;
  min-width: 300px !important; /* Increase minimum width */
  background-color: var(--card-bg) !important;
  padding: 1.8rem !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
}

/* Better hover effects */
.info-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Improved heading styles */
.info-item h3 {
  margin-bottom: 1.2rem !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  color: var(--primary-color) !important;
}

.info-item h3 i {
  margin-right: 0.5rem !important;
  font-size: 1.1rem !important;
}

/* Better list styles */
.info-item ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.info-item li {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0.9rem !important;
  font-size: 1rem !important;
  word-break: break-word !important;
}

.info-item li i {
  margin-right: 0.8rem !important;
  color: var(--primary-color) !important;
  width: 18px !important;
  text-align: center !important;
  font-size: 1rem !important;
}

.info-item a {
  color: var(--text-color) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}

.info-item a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

/* Dark mode specific styles for contact & connect cards */
body.dark-mode .info-item {
  background-color: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

body.dark-mode .info-item a {
  color: var(--text-dark) !important;
}

body.dark-mode .info-item li {
  color: var(--text-secondary-dark) !important;
}