/* Glowing electric stroke container */
.stroke-glow {
  position: relative;
  display: inline-block;
  border-radius: 20px;        /* rounded corners */
  overflow: visible;          /* allow stroke outside */
  z-index: 1;
  color: #fff;
  font-weight: bold;
  padding: 12px 28px;         /* normal padding */
  box-sizing: border-box;
}

/* Flowing gradient stroke */
.stroke-glow::before {
  content: '';
  position: absolute;
  inset: -4px; /* expand equally outside without shrinking */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #fff000,
    #ff8800,
    #00ffe5,
    #fff000
  );
  background-size: 300% 300%;
  animation: current-flow 6s linear infinite;
  z-index: -1;

  /* punch out the middle so only border shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Chrome/Safari */
          mask-composite: exclude; /* Firefox */
  padding: 7px; /* stroke thickness */
  box-sizing: border-box;
}

/* Flowing animation */
@keyframes current-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
  .stroke-glow {
    padding: 10px 20px;       /* smaller padding */
    font-size: 14px;          /* smaller text */
    border-radius: 20px;
  }

  .stroke-glow::before {
    inset: -3px;              /* thinner stroke on mobile */
    padding: 3px;
  }
}





/* Thin Glow_Strok Effect */

/* Glowing electric stroke container */
.stroke-glow_thin {
  position: relative;
  display: inline-block;
  border-radius: 10px;        /* rounded corners */
  overflow: visible;          /* allow stroke outside */
  z-index: 1;
  color: #fff;
  font-weight: bold;
  padding: 12px 28px;         /* normal padding */
  box-sizing: border-box;
}

/* Flowing gradient stroke */
.stroke-glow_thin::before {
  content: '';
  position: absolute;
  inset: -4px; /* expand equally outside without shrinking */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #fff000,
    #ff8800,
    #00ffe5,
    #fff000
  );
  background-size: 300% 300%;
  animation: current-flow 6s linear infinite;
  z-index: -1;

  /* punch out the middle so only border shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Chrome/Safari */
          mask-composite: exclude; /* Firefox */
  padding: 3px; /* stroke thickness */
  box-sizing: border-box;
}

/* Flowing animation */
@keyframes current-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
  .stroke-glow {
    padding: 10px 20px;       /* smaller padding */
    font-size: 14px;          /* smaller text */
    border-radius: 20px;
  }

  .stroke-glow_thin::before {
    inset: -3px;              /* thinner stroke on mobile */
    padding: 3px;
  }
}