.gradient-bg {
    width: 200px;
    height: 200px;
    border-radius: 40px;
    background: linear-gradient(
        to right,
        #2d2dd4 0%,
        #1f1f8a 50%,
        #0d6efd 50%,
        #2d2dd4 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); /* fixed center */
}

.star {
    position: absolute;
    left: 42%;
    top: 35%;
    font-size: 12px;
    color: gold;
    transform: rotate(calc(var(--i) * 30deg)) translate(0, -60px)
        rotate(calc(var(--i) * -30deg));
    transform-origin: center;
}


/* Desktop: simulate phone view inside frame */
/* Simulate phone frame only on desktop */
/* Default: mobile-first — no frame on small devices */
.phone-frame {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    background-color: black;
}

.text-org {
    font-size: 1.3rem;
    color:darkslategray;
    font-weight: bold;
}

.btn-primary {
    background-color: #4A6FA5;
    color: white;
    border: 0px solid transparent;
}

.liquid-glass {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 34px;

  /* Fill & Glass base */
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.06)
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
    ),
    #cccccc;
  background-blend-mode: normal, normal, color-burn;
  opacity: 0.67;

  /* Glass blur effect */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px); /* Safari */
  filter: blur(0.5px); /* optional touch */

  /* Inner shadow (glass depth) */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.1);

  /* Optional border */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.credential-tile {
  cursor: pointer;
  transition: transform 0.2s ease;
  background: #ffffff;
  border-radius: 10px;
    /* Glass blur effect */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px); /* Safari */
  filter: blur(0.5px); /* optional touch */

  /* Inner shadow (glass depth) */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.1);

  /* Optional border */
  border: 1px solid rgba(255, 255, 255, 0.2);
}


#credentialTitle {
    color: black;
}


@media screen {
    .row-cols-md-4 > * {
        width: 50% !important;
    }
}