/* FINAL ULTIMATE FIX FOR PORTFOLIO ISSUES */

/* ===== SKILLS PROGRESS BAR FIX ===== */
.skill-progress {
  height: 6px !important;
  background-color: rgba(58, 134, 255, 0.15) !important;
  border-radius: 10px !important;
  margin-top: 5px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Override all previous animations */
.skill-bar {
  width: 0 !important;
  height: 100% !important;
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color)
  ) !important;
  border-radius: 10px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transition: none !important;
  animation: none !important;
}

/* Add special class for manual animation via JS */
.skill-bar.animated {
  transition: width 1.5s ease-out !important;
}

/* ===== CERTIFICATION SECTION FIX ===== */
/* Make sure certification section is visible */
.certifications {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 80px 0 !important;
}

/* Certification container */
.certifications-container {
  margin-top: 40px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Grid layout for certification cards */
.certifications-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 30px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Certification cards styling */
.certifications .project-card {
  background-color: var(--card-bg) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--border-color) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode specific fixes */
body.dark-mode .certifications {
  background-color: var(--bg-dark) !important;
}

body.dark-mode .certifications .project-card {
  background-color: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

body.dark-mode .certifications .project-details h3 {
  color: var(--text-dark) !important;
}

body.dark-mode .certifications .project-tech span {
  background-color: rgba(58, 134, 255, 0.15) !important;
  color: var(--text-dark) !important;
}