/* Category Specific Colors */
:root {
  --art-color-foundations: #FFD700;
  --art-color-foundations-rgb: 255, 215, 0;
  --art-color-obstacles: #E57373;
  --art-color-obstacles-rgb: 229, 115, 115;
  --art-color-innovation: #64B5F6;
  --art-color-innovation-rgb: 100, 181, 246;
  --art-color-transformation: #4DB6AC;
  --art-color-transformation-rgb: 77, 182, 172;
  --art-color-impact: #BA68C8;
  --art-color-impact-rgb: 186, 104, 200;
  --art-color-trust: #9575CD;
  --art-color-trust-rgb: 149, 117, 205;
  --art-color-monetization: #FFB74D;
  --art-color-monetization-rgb: 255, 183, 77;
  --art-color-empowerment: #81C784;
  --art-color-empowerment-rgb: 129, 199, 132;
  --art-color-vision: #7986CB;
  --art-color-vision-rgb: 121, 134, 203;
}



:root {
  --purple: var(--art-color-trust); /* purple */
  --yellow: var(--art-color-foundations); /* yellow */
  --red: var(--art-color-obstacles); /* red */
  --blue: var(--art-color-innovation);
}


.card-glow {
  position: relative;
  margin: auto;
  padding: 10px;
  max-width: 400px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #b8b8b8;
  box-shadow: 1px 3px 21px 11px rgba(255, 255, 255, .43), 0 0 9px 2px rgb(96 170 229 / 41%);
  background: #ffffff54;
}




.card-glow::before {
  content: '';
  position: absolute;
  top: -3px;    /* Border thickness */
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--purple), var(--yellow), var(--blue), var(--purple));
  background-size: 600% 600%;
  border-radius: 13px; /* Border radius + border thickness */
  z-index: -1;
  animation: borderGradientAnimation 2s linear infinite;
  
}


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


.certificate-thumb {
  width: 100%;
  border-radius: 5px;
  padding: 9px;
  /* border: 0px solid #131e5a; */
  background: linear-gradient(45deg, #4a0393, #b0983e, #4d0074);
  box-shadow: 0 0 2px rgb(255 255 255), 0 0 3px 2px rgb(244 244 244);
  position: relative;
}

.card-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Adjusted Gradient Matching Border Colors */
  background: linear-gradient(
    to bottom,
    rgba(255, 0, 255, 0.0) 50%,     /* Transparent Magenta */
    rgba(255, 0, 255, 0.05) 60%,
    rgba(0, 255, 255, 0.1) 70%,   /* Semi-transparent Cyan */
    rgba(0, 255, 255, 0.15) 80%,
    rgba(255, 255, 0, 0.2) 90%,   /* Semi-transparent Yellow */
    rgba(255, 255, 0, 0.25) 100%
  );
   z-index: 1;
   animation: overlayOpacityPulse 3s ease-in-out infinite;
  background-size: 100% 200%;
    animation: overlayBackgroundAnimation 2s linear infinite;
  }

  @keyframes overlayOpacityPulse {
    0% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.7;
    }
  }

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


.view-certificate-btn {
  position: absolute;
  z-index: 200;
  left: 0;
  margin-top: 0px;
  padding: 0px;
  background: rgba(255, 255, 255, 0%);
  border: none;
  color: #fff9f900;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background .5s ease, transform .5s ease, color .5s ease, padding .5s ease;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.view-certificate-btn:hover {
  transform: scale(1.35);
  background: rgb(0 0 0 / 72%);
  color: var(--art-color-vision);
  padding-bottom: 200px;
  
}