.trns-btn {
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  width: 137px;
  padding: 6px 8px;
  background: var(--white);
  font-weight: 600;
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
}

.teal-br-btn {
  border: 2px solid var(--pinkish-red);
  border-radius: 100px;
  display: inline-block;
  color: var(--pinkish-red);
  text-align: center;
  width: fit-content;
  padding: 6px 25px;
  font-weight: 600;
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
}

/* .gr-btn{
  margin: 25px 0;
  border-radius: 15px 0 15px 0;
  display: inline-block;
  text-align: center;
  width: fit-content;
  padding: 8px 25px;
  background:var(--gr-blue-teal);
  color: var(--white);
  text-decoration: none;

} */
/* .gr-btn:hover {
  background: var(--pastel-rose);
} */
.gr-btn {
  margin: 25px 0;
  border: 0.5px solid var(--pinkish-red);
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  width: fit-content;
  padding: 8px 25px;
  background: var(--pinkish-red);
  color: var(--white);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease-in-out;
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
}

.gr-btn:hover {
  background: var(--white);
  color: var(--pinkish-red);
}

@keyframes rotateGradient {
  0% {
    background: linear-gradient(10deg, var(--pinkish-red), var(--pastel-rose));
  }
  5% {
    background: linear-gradient(20deg, var(--pinkish-red), var(--pastel-rose));
  }
  10% {
    background: linear-gradient(30deg, var(--pinkish-red), var(--pastel-rose));
  }
  20% {
    background: linear-gradient(40deg, var(--pinkish-red), var(--pastel-rose));
  }
  25% {
    background: linear-gradient(50deg, var(--pinkish-red), var(--pastel-rose));
  }
  30% {
    background: linear-gradient(60deg, var(--pinkish-red), var(--pastel-rose));
  }
  35% {
    background: linear-gradient(70deg, var(--pinkish-red), var(--pastel-rose));
  }
  40% {
    background: linear-gradient(90deg, var(--pinkish-red), var(--pastel-rose));
  }
  50% {
    background: linear-gradient(110deg, var(--pinkish-red), var(--pastel-rose));
  }
  60% {
    background: linear-gradient(130deg, var(--pinkish-red), var(--pastel-rose));
  }
  70% {
    background: linear-gradient(150deg, var(--pinkish-red), var(--pastel-rose));
  }
  80% {
    background: linear-gradient(160deg, var(--pinkish-red), var(--pastel-rose));
  }
  90% {
    background: linear-gradient(170deg, var(--pinkish-red), var(--pastel-rose));
  }
  100% {
    background: linear-gradient(190deg, var(--pinkish-red), var(--pastel-rose));
  }
}
@keyframes rotateGradientReverse {
  0% {
    background: linear-gradient(-20deg, var(--pastel-rose), var(--pinkish-red));
  }
  10% {
    background: linear-gradient(-30deg, var(--pastel-rose), var(--pinkish-red));
  }
  20% {
    background: linear-gradient(-40deg, var(--pastel-rose), var(--pinkish-red));
  }
  25% {
    background: linear-gradient(-50deg, var(--pastel-rose), var(--pinkish-red));
  }
  30% {
    background: linear-gradient(-60deg, var(--pastel-rose), var(--pinkish-red));
  }
  35% {
    background: linear-gradient(-70deg, var(--pastel-rose), var(--pinkish-red));
  }
  40% {
    background: linear-gradient(-90deg, var(--pastel-rose), var(--pinkish-red));
  }
  50% {
    background: linear-gradient(-110deg, var(--pastel-rose), var(--pinkish-red));
  }
  60% {
    background: linear-gradient(-130deg, var(--pastel-rose), var(--pinkish-red));
  }
  70% {
    background: linear-gradient(-150deg, var(--pastel-rose), var(--pinkish-red));
  }
  80% {
    background: linear-gradient(-160deg, var(--pastel-rose), var(--pinkish-red));
  }
  90% {
    background: linear-gradient(-170deg, var(--pastel-rose), var(--pinkish-red));
  }
  100% {
    background: linear-gradient(-190deg, var(--pastel-rose), var(--pinkish-red));
  }
}
/* .gr-btn:hover {
  background: var(--pastel-rose);
} */
.lgn-gr-btn {
  margin: 25px 0;
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  width: fit-content;
  padding: 8px 80px;
  background: var(--pinkish-red);
  color: var(--white);
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
}

.lg-gr-btn {
  margin: 25px auto;
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  max-width: 230px;
  padding: 6px 80px;
  background: var(--pinkish-red);
  color: var(--white);
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
}

.gradient-border-btn {
  padding: 8px 50px;
  font-size: 18px;
  color: var(--dark-gray);
  background-color: var(--white);
  border-radius: 50px; /* Rounded border */
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
}

.gradient-border-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px; /* Border thickness */
  background: linear-gradient(90deg, #3a7bd5, #00d2ff); /* Gradient colors */
  border-radius: 50px; /* Match button border-radius */
  z-index: -1;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@media (max-width: 768px) {
  .gr-btn {
    margin: 10px 0;
  }
  .lgn-gr-btn {
    margin: 10px 0;
  }
}