.btn-pink {
                        background-color: transparent;
                        color: #fff !important;
                        border: none;
                        padding: 0;
                    }

                    /* Base Button Wrapper */
                    .button-82-pushable {
                        position: relative;
                        border: none;
                        background: transparent;
                        padding: 0;
                        cursor: pointer;
                        outline-offset: 4px;
                        transition: filter 250ms;
                        user-select: none;
                        -webkit-user-select: none;
                        touch-action: manipulation;
                        display: inline-block;
                    }

                    /* Shadow */
                    .button-82-shadow {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 12px;
                        background: hsl(0deg 0% 0% / 0.25);
                        will-change: transform;
                        transform: translateY(2px);
                        transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
                    }

                    /* Gradient Edge (Side of Button) */
                    .button-82-edge {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 12px;
                        background: linear-gradient(to left,
                                #f8ba10 0%,
                                #e942ed 100%);
                    }

                    /* Main Button Face */
                    .button-82-front {
                        display: block;
                        position: relative;
                        padding: 12px 27px;
                        border-radius: 12px;
                        font-size: 1.1rem;
                        color: white;
                        background: linear-gradient(135deg, #f8ba10, #e942ed);
                        will-change: transform;
                        transform: translateY(-4px);
                        transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
                        text-align: center;
                        white-space: nowrap;
                    }

                    @media (min-width: 768px) {
                        .button-82-front {
                            font-size: 1.25rem;
                            padding: 12px 42px;
                        }
                    }

                    /* Hover & Active States */
                    .button-82-pushable:hover {
                        filter: brightness(110%);
                    }

                    .button-82-pushable:hover .button-82-front {
                        transform: translateY(-6px);
                        transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
                    }

                    .button-82-pushable:active .button-82-front {
                        transform: translateY(-2px);
                        transition: transform 34ms;
                    }

                    .button-82-pushable:hover .button-82-shadow {
                        transform: translateY(4px);
                        transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
                    }

                    .button-82-pushable:active .button-82-shadow {
                        transform: translateY(1px);
                        transition: transform 34ms;
                    }

                    .button-82-pushable:focus:not(:focus-visible) {
                        outline: none;
                    }


                    .instagram-animated-link {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  background: linear-gradient(45deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  color: white;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: background-position 0.5s ease;
  animation: instagramGradientShift 3s ease infinite;
}

.instagram-animated-link:hover {
  background-position: right center;
}

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



.button-82-pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-weight: 600;
  font-size: 15px;
  border-radius: 30px;
}

/* Shadow Layer */
.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

/* Edge Gradient Border */
.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(
    to left,
    #f8ba10 0%,
    #e942ed 8%,
    #e942ed 92%,
    #f8ba10 100%
  );
  background-size: 200% 200%;
  animation: edgeGradientShift 4s ease infinite;
}

/* Front Face with Animated Gradient */
.button-82-front {
  display: block;
  position: relative;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 15px;
  color: #000;
  background: linear-gradient(135deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  animation: frontGradientShift 4s ease infinite;
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
  text-align: center;
  white-space: nowrap;
}

.button-82-pushable:hover {
  filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

/* Gradient Animation */
@keyframes frontGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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


.button-82-pushable {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-weight: 700;
  font-size: 16px;
  border-radius: 30px;
  text-align: center;
}

/* Shadow */
.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

/* Edge */
.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(
    to left,
    #f8ba10 0%,
    #e942ed 8%,
    #e942ed 92%,
    #f8ba10 100%
  );
  background-size: 200% 200%;
  animation: edgeGradientShift 4s ease infinite;
}

/* Front (Main button face) */
.button-82-front {
  display: block;
  position: relative;
  padding: 14px 35px;
  border-radius: 30px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  animation: frontGradientShift 4s ease infinite;
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
  text-decoration: none;
  white-space: nowrap;
}

.button-82-pushable:hover {
  filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

/* Animations */
@keyframes frontGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes edgeGradientShift {
  0% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.button-82-pushable {
  position: relative;
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
}

/* Shadow */
.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: hsl(0deg 0% 0% / 0.25);
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

/* Edge */
.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(
    to left,
    #f8ba10 0%,
    #e942ed 8%,
    #e942ed 92%,
    #f8ba10 100%
  );
  background-size: 200% 200%;
  animation: edgeGradientShift 4s ease infinite;
}

/* Front face (main button surface) */
.button-82-front {
  display: block;
  position: relative;
  padding: 12px 25px;
  border-radius: 30px;
  color: #000;
  background: linear-gradient(135deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  animation: frontGradientShift 4s ease infinite;
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.button-82-pushable:hover {
  filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

/* Gradient animation keyframes */
@keyframes frontGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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



.button-82-pushable {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-align: center;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
}

/* Shadow layer */
.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: hsl(0deg 0% 0% / 0.25);
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

/* Edge gradient */
.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(
    to left,
    #f8ba10 0%,
    #e942ed 8%,
    #e942ed 92%,
    #f8ba10 100%
  );
  background-size: 200% 200%;
  animation: edgeGradientShift 4s ease infinite;
}

/* Button face */
.button-82-front {
  display: block;
  position: relative;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  animation: frontGradientShift 4s ease infinite;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

/* Hover & active effects */
.button-82-pushable:hover {
  filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

/* Gradient animation */
@keyframes frontGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes edgeGradientShift {
  0% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.animated-pink-gradient {
  background: linear-gradient(135deg, #f8ba10, #e942ed, #f8ba10);
  background-size: 200% 200%;
  color: #fff !important;
  border: none;
  transition: background-position 0.4s ease;
  animation: pinkGradientShift 5s ease infinite;
}

/* Optional: brighten slightly on hover */
.animated-pink-gradient:hover {
  background-position: right center;
  filter: brightness(110%);
  color: #fff !important;
}

/* Gradient animation keyframes */
@keyframes pinkGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}