/* BUTTON BASE */
@media (min-width: 999px) {
.contactindex{
width:100%;

height:140px;
line-height: ;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:3px;
padding-bottom:;
background: ;
border-radius: 6px;
box-shadow: 0 4px 30px rgb(49, 56, 74);
backdrop-filter: blur(14.1px);
-webkit-backdrop-filter: blur(14.1px);
border: 1px solid rgba(124, 14, 95, 0.74);

}
.contactindex h1{
width:50%;
left:10px;
height:;
font-size:25px;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:;
padding-bottom:;


}

.contactindex p{
width:50%;
left:450px;
height:;
font-size:25px;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:;
padding-bottom:;


}


			.contactbutton {
				display:flex;
				border-radius: 5rem;
				position:static;
				margin-top:-40px;
				
				}
			
				
			
			

			/* HOLOGRAPHIC COLOR LAYER */
				.contactbutton::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%);
					}
			

			/* GLASS EDGE HIGHLIGHT */
				.contactbutton:after {
				content: "";
				position: absolute;
				/* inset: 2px; */
				border-radius: inherit;
				box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7), inset 0 -2px 5px rgba(0, 0, 0, .5);
				pointer-events: none;
				inset: 0;
				border-radius: inherit;
				padding: 1.5px;
				-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
				-webkit-mask-composite: xor;
				mask-composite: exclude;
				pointer-events: none;
				filter: saturate(120%) brightness(100%);
			}
			
				
			


.btn {
  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;
  left:650px;
  margin-top:-30px;
  align-items:center;
  width:100px;
   height:50px;
}


 .hologram {
  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;
   
}
.hologram:hover {
  border: 5px solid #2fc74e61;
  background:#e3ac0926;
  font-size:15px;
  
 
}
 .hologram span {
  position: ;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.hologram span::before,
 .hologram span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

 .hologram span::before {
  top: -2px;
  color: #ff00ff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

 .hologram span::after {
  bottom: -2px;
  color: #00ffff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

 .scan-line {
  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%; }
}


.allbutton {
  position: relative;
  padding: rem 2rem;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  left:20px;
  margin-top:0px;
  align-items:center;
  width:200px;
   height:40px;
}

}
/*uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu*/
@media (max-width: 768px) {
.contactindex{
width:100%;

height:140px;
line-height: ;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:3px;
padding-bottom:;
background: rgba(60, 67, 80, 0.54);
border-radius: 6px;
box-shadow: 0 4px 30px rgb(49, 56, 74);
backdrop-filter: blur(14.1px);
-webkit-backdrop-filter: blur(14.1px);
border: 1px solid rgba(124, 14, 95, 0.74);

}
.contactindex h1{
width:50%;
left:30px;
height:;
font-size:15px;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:40px;
padding-bottom:;


}

.contactindex p{
width:50%;
left:500px;
height:;
font-size:15px;
position:relative;
display:inline-block;
z-index:;
text-wrap:nowrap;
margin-bottom:10px;
padding-bottom:;


}


			.contactbutton {
				display:flex;
				border-radius: 5rem;
				position:static;
				margin-top:-40px;
				
				}
			
				
			
			

			/* HOLOGRAPHIC COLOR LAYER */
				.contactbutton::before {
				content: "";
				position: absolute;
				inset: 5% 0%;
				border-radius: inherit;
				background: linear-gradient(25deg, rgb(0 171 103) 14%, rgb(28 86 166), rgb(115 54 247) 33%, rgb(255 185 3) 61%, rgb(12 150 63) 87%);
				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%);
					}
			

			/* GLASS EDGE HIGHLIGHT */
				.contactbutton:after {
				content: "";
				position: absolute;
				/* inset: 2px; */
				border-radius: inherit;
				box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7), inset 0 -2px 5px rgba(0, 0, 0, .5);
				pointer-events: none;
				inset: 0;
				border-radius: inherit;
				padding: 1.5px;
				-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
				-webkit-mask-composite: xor;
				mask-composite: exclude;
				pointer-events: none;
				filter: saturate(120%) brightness(100%);
			}
			
						


.btn {
  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;
  left:150px;
  margin-top:10px;
  align-items:center;
  width:100px;
   height:50px;
}


 .hologram {
  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;
   
}
.hologram:hover {
  border: 5px solid #2fc74e61;
  background:#e3ac0926;
  font-size:15px;
  
 
}
 .hologram span {
  position: ;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.hologram span::before,
 .hologram span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

 .hologram span::before {
  top: -2px;
  color: #ff00ff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

 .hologram span::after {
  bottom: -2px;
  color: #00ffff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

 .scan-line {
  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%; }
}


.allbutton {
  position: relative;
  padding: rem 2rem;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  left:20px;
  margin-top:0px;
  align-items:center;
  width:200px;
   height:40px;
}



















}
 
