@media (min-width: 999px) {
.databutton {
				display:;
				border-radius: 5rem;
				position:;
				}
			
				
			
			

			/* HOLOGRAPHIC COLOR LAYER */
				.databutton::before {
				content: "";
				position: absolute;
				inset: 5% 0%;
				border-radius: inherit;
				background: ;
				filter: blur(30px);
				mix-blend-mode: normal;
				-webkit-mask-image: linear-gradient(10deg, black 10%, rgb(0 0 0 / 35%), rgb(0 0 0 / 0%) 34%, rgb(0 0 0 / 0%) 66%, rgb(0 0 0 / 35%), black 92%);
				mask-image: linear-gradient(10deg, black 10%, rgb(0 0 0 / 35%), rgb(0 0 0 / 0%) 34%, rgb(0 0 0 / 0%) 66%, rgb(0 0 0 / 35%), black 92%);
					z-index:-1;
					}
			

			/* GLASS EDGE HIGHLIGHT */
				.databutton:after {
				
			}
			
				
/*-======================================09999=======================================-0-=================*/			


.data {
  position: relative;
  padding: rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
 
  margin-top:0px;
  align-items:center;
  width:100px;
   height:50px;
   left:250px;
}


 .halogram {
  border: 1px solid rgba(184, 174, 33, 0.82);
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(5px);
   border-radius:60px;
   
}
.halogram:hover {
  border: 5px solid #2fc74e61;
  background:#e3ac0926;
  font-size:12px;
  
 
}
 .halogram span {
  position: ;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.halogram span::before,
 .halogram span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

 .halogram span::before {
  top: -2px;
  color: #ff00ff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

 .halogram span::after {
  bottom: -2px;
  color: #00ffff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

 .scan-linex {
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 255, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}
}

@media (max-width: 768px) {
.data {
  position: relative;
  padding: rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
 
  margin-top:0px;
  align-items:center;
  width:100px;
   height:50px;
   left:10px;
}


 .halogram {
  border: 1px solid rgba(184, 174, 33, 0.82);
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(5px);
   border-radius:60px;
   
}
.halogram:hover {
  border: 5px solid #2fc74e61;
  background:#e3ac0926;
  font-size:12px;
 }

 .halogram span {
  position: ;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.halogram span::before,
 .halogram span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

 .halogram span::before {
  top: -2px;
  color: #ff00ff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

 .halogram span::after {
  bottom: -2px;
  color: #00ffff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

 .scan-linex {
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 255, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}
}