.dark-sec {
  background-color: #000000;
  padding: 100px; 
}

.light-sec {
  padding: 100px; 
}

button {
  appearance: none; 
}

button span {
  position: relative; 
  z-index: 3; 
}

button.glow {
  border-radius: 30px;
  background: transparent; 
  position: relative; 
  border: none; 
  padding: 11px 30px;
  overflow: hidden; 
  transition: all 400ms; 
  cursor: pointer; 

}

button.glow, 
button.glow span {
  font-size: 15px;
  font-weight: 500; 
  text-transform: uppercase; 
  font-family: Inter;
}

button.glow::before {
  content: ""; 
  position: absolute; 
  width: calc(100% - 2px); 
  height: calc(100% - 2px); 
  top: 1px; 
  left: 1px; 
  border-radius: 10px; 
  z-index: 2; 
}

button.glow::after {
  position: absolute; 
  content: ""; 
  width: 100%;
  height: 100%; ; 
  left: 0; 
  top: 0; 
  z-index: 1; 
  border-radius: 10px; 
}

button.glow .radial {
  position: absolute; 
  width: 100px; 
  height: 100px; 
  content: ""; 
  transition: opacity 200ms; 
  z-index: 2; 
  left: 0; 
  top: 0; 
  transform: translate(-50%, -50%); 
  opacity: 0; 
  pointer-events: none;
}

button.glow .radial.visible {
  opacity: 1; 
}


/* BUTTON DARK VARIATIONS */
button.glow.dark {
  box-shadow: -6px 7px 18px -8px rgba(75, 110, 234, 0.35), 8px -8px 25px -11px rgba(168, 78, 239, 0.35);
  color: #ffffff;
}

button.glow.dark:hover {
  box-shadow: -6px 7px 18px -8px rgba(75, 110, 234, 1), 8px -8px 25px -11px rgba(168, 78, 239, 0.70);
}

button.glow.dark::before {
  background: #1B1F27;
}

button.glow.dark::after {
  background: linear-gradient(274deg, #6F4EF6 0%, rgba(111, 78, 246, 0.00) 98.73%), linear-gradient(118deg, #4FB5BE 8.23%, rgba(217, 217, 217, 0.00) 41.84%);
}

button.glow.dark .radial {
  background: radial-gradient(50% 50% at 50% 50%, #414D6B 0%, rgba(65, 77, 107, 0.00) 100%);
}

/* BUTTON LIGHT VARIATIONS  */
button.glow.light {
  box-shadow: -6px 7px 18px -8px rgba(75, 110, 234, 0.10), 8px -8px 25px -11px rgba(168, 78, 239, 0.10);
  color: #000;
}

button.glow.light:hover {
  box-shadow: -6px 7px 18px -8px rgba(75, 110, 234, 0.35), 8px -8px 25px -11px rgba(168, 78, 239, 0.25);
}

button.glow.light::before {
  background: #F2F8FB;
}

button.glow.light::after {
  background: linear-gradient(265deg, #6864F1 2.67%, rgba(104, 100, 241, 0.00) 88.88%), linear-gradient(76deg, #89EDFD 4.98%, rgba(137, 237, 253, 0.00) 41.94%);
}

button.glow.light .radial {
  background: radial-gradient(50% 50% at 50% 50%, rgba(145, 174, 246, 0.60) 0%, rgba(145, 174, 246, 0.00) 100%);
  width: 150px;
  height: 150px; 
}

button.secondary {
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(93, 152, 242, 0.10) -3.17%, rgba(123, 93, 242, 0.10) 103.71%), rgba(255, 255, 255, 0.50);
  box-shadow: 3px -3px 25px -11px rgba(168, 78, 239, 0.70), -1px 2px 18px -8px #4B6EEA;
  backdrop-filter: blur(5.5px);
  padding: 10px 15px; 
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  color: #000000;
  font-weight: 500;
  line-height: 24px; /* 160% */
  text-transform: uppercase;
  cursor: pointer; 
  border: none;
}

/* TERTIARY BUTTON */
button.tertiary {
  background-color: transparent;
  border: none;
  padding: 6px 0;
  position: relative; 
  cursor: pointer; 
}

button.tertiary::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background-color: #000000;
}

button.tertiary span {
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21.4px;
}