.goal-img-wrap {
  perspective: 1200px;
}

/* PSO Certificate - Flip Left with Glow */
#pso {
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

#pso:hover {
  transform: rotateX(12deg) rotateY(-35deg) rotateZ(10deg) scale(1.12) translateZ(50px);
  filter: drop-shadow(-30px 40px 80px rgba(255, 255, 255, 0.5)) 
          brightness(1.25) 
          saturate(1.3);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

#pso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 8px;
  pointer-events: none;
}

#pso:hover::before {
  opacity: 1;
}

/* PCI Certificate - Flip Right with Glow */
#pci {
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

#pci:hover {
  transform: rotateX(12deg) rotateY(35deg) rotateZ(-10deg) scale(1.12) translateZ(50px);
  filter: drop-shadow(30px 40px 80px rgba(255, 255, 255, 0.5)) 
          brightness(1.25) 
          saturate(1.3);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

#pci::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 8px;
  pointer-events: none;
}

#pci:hover::before {
  opacity: 1;
}

/* ISO Certificate - Flip Left with Glow */
#iso {
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

#iso:hover {
  transform: rotateX(12deg) rotateY(-35deg) rotateZ(10deg) scale(1.12) translateZ(50px);
  filter: drop-shadow(-30px 40px 80px rgba(255, 255, 255, 0.5)) 
          brightness(1.25) 
          saturate(1.3);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

#iso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 8px;
  pointer-events: none;
}

#iso:hover::before {
  opacity: 1;
}

/* CMMI Certificate - Flip Right with Glow */
#CMMI {
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

#CMMI:hover {
  transform: rotateX(12deg) rotateY(35deg) rotateZ(-10deg) scale(1.12) translateZ(50px);
  filter: drop-shadow(30px 40px 80px rgba(255, 255, 255, 0.5)) 
          brightness(1.25) 
          saturate(1.3);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

#CMMI::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 8px;
  pointer-events: none;
}

#CMMI:hover::before {
  opacity: 1;
}

/* Ripple effect on hover */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 146, 71, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 146, 71, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 146, 71, 0);
  }
}

#pso:hover,
#pci:hover,
#iso:hover,
#CMMI:hover {
  animation: ripple 1.5s infinite;
}