/* html, body {
    background: black;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -4px;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 10;
    box-shadow: 0px 0px 8px 0px #FDFCA9 inset, 0px 0px 24px 0px #FFEB3B, 0px 0px 8px 0px #FFFFFF42;
  }
  
  .button-wrapper {
    position: relative;
  }
  
  .animated-button {
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    appearance: none;
    display: inline-block;
  }
  .animated-btn-blue span{
    z-index: 99;
  }
  .animated-btn-blue svg{
    z-index: 99;
  }
  .animated-btn::before, .animated-btn-blue::before{
    content: "";
    box-shadow: 0px 0px 24px 0px #FFD600;
    mix-blend-mode: screen;
    transition: opacity 0.3s;
  
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }
  .animated-btn-blue::before{
  box-shadow: 0 0px 24px 0 #4930F1 !important;
  border-radius:0px !important;
  }
  .animated-btn::after,.animated-btn-blue::after {
    content: "";
    box-shadow: 0px 0px 23px 0px #FFF500 inset, 0px 0px 8px 0px #FFF500;
    transition: opacity 0.3s;
  
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 10px;
    opacity: 0;
  }
  .animated-btn-blue::after{
    box-shadow: inset 0px 0px 53px 0px #436FE8, inset 0px 0px 18px 0px #519EFA, inset 0 0px 15px 0px #518AFA !important;
    border-radius: 5.311px
  }
  .animated-btn,.animated-btn-blue{
    position: relative;
  }
  .walkmextemplate .content_slider .swiper-wrapper .animated-btn-blue, 
  body #p_img_sbs_2 .animated-btn-blue, 
  body.walkmextemplate .p_img_sbs_section .animated-btn-blue, 
  body.walkmextemplate .threeCol .cta_box .animated-btn-blue,
  .animated-btn-blue{
    border:none !important;
    }
  .animated-btn:hover::before{
    opacity: 0.8;  
  } 
  .animated-btn-blue:hover::before{
    opacity: 0.8;
  } 
  .animated-btn:hover::after,.animated-btn-blue::after {
    opacity: 1;
  }
  .animated-btn:hover ,.animated-btn-blue:hover{
  
    .dot {
      transform: translate(0, 0) rotate(var(--rotatation));
    }
    
    .dot::after {
      animation-play-state: running;
    }
  }
  
  .dot {
    display: block;
    position: absolute;
    transition: transform calc(var(--speed) / 12) ease;
    width: var(--size);
    height: var(--size);
    transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
  }
  
  .dot::after {
    content: "";
    animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
    animation-play-state: paused; 
    display: block;
    border-radius: 100%;
    background: yellow;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 6px 0px #FFEB3B, 0px 0px 4px 0px #FDFCA9 inset, 0px 0px 2px 1px #FFFFFF42;
  }
  .animated-btn-blue .dot::after{
    background: #5980FB !important;
    box-shadow: 0 0 6px 0 #5980FB, 0 0 4px 0 #5980FB inset, 0 0 2px 1px #5980FB !important;
  }
  .dot-1 {
    --rotatation: 0deg;
    --speed: 14s;
    --size: 6px;
    --starting-x: 30px;
    --starting-y: 20px;
    top: 2px;
    left: -16px;
    opacity: 0.7;
  }
  
  .dot-2 {
    --rotatation: 122deg;
    --speed: 16s;
    --size: 3px;
    --starting-x: 40px;
    --starting-y: 10px;
    top: -9px;
    left: -6px;
    opacity: 0.7;
  }
  
  .dot-3 {
    --rotatation: 39deg;
    --speed: 20s;
    --size: 4px;
    --starting-x: -10px;
    --starting-y: 20px;
    top: -10px;
    right: 14px;
  }
  
  .dot-4 {
    --rotatation: 220deg;
    --speed: 18s;
    --size: 2px;
    --starting-x: -30px;
    --starting-y: -5px;
    bottom: 4px;
    right: -14px;
    opacity: 0.9;
  }
  
  .dot-5 {
    --rotatation: 190deg;
    --speed: 22s;
    --size: 5px;
    --starting-x: -40px;
    --starting-y: -20px;
    bottom: -10px;
    right: -3px;
  }
  
  .dot-6 {
    --rotatation: 20deg;
    --speed: 15s;
    --size: 4px;
    --starting-x: 12px;
    --starting-y: -18px;
    bottom: -12px;
    left: 30px;
    opacity: 0.7;
  }
  
  .dot-7 {
    --rotatation: 300deg;
    --speed: 19s;
    --size: 3px;
    --starting-x: 6px;
    --starting-y: -20px;
    bottom: -16px;
    left: 44px;
  }
  
  @keyframes dimFirefly {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.8;
    }
    75% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes hoverFirefly {
      0% {
        transform: translate(0, 0);
      }
      12% {
        transform: translate(3px, 1px);
      }
      24% {
        transform: translate(-2px, 3px);
      }
      37% {
        transform: translate(2px, -2px);
      }
      55% {
        transform: translate(-1px, 0);
      }
      74% {
        transform: translate(0, 2px);
      }
      88% {
        transform: translate(-3px, -1px);
      }
      100% {
        transform: translate(0, 0);
      }
  }