@import url(../main.css);


.global_map{
    max-width: 1200px;
    margin: 2% auto;
    width: 100%;
    
}


.holographic-button {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  z-index: 1;
}

.holographic-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    var(--primary-dark)
  );
  transform: rotate(-45deg)  translateY(100%);
  transition: all 0.5s ease;
 
  opacity: 1;
  z-index: 0;
}

.holographic-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--gradient-start);
}

.holographic-button:hover::before {
  opacity: 0;
  transform: rotate(-45deg) ;
}

.demo_btn{
    background: var(--primary);
}
.demo_btn:hover{
    background: var(--primary-dark);
}
.demo_btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -40%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    var(--primary-dark)
  );
  transform: rotate(-45deg)  translateY(100%);
  transition: all 0.5s ease;
 
  opacity: 1;
  z-index: 0;
}