/* From Uiverse.io by Matilemak */
    .animated-button {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 13px 36px;
      border: 4px solid;
      border-color: transparent;
      font-size: 16px;
      background-color: inherit;
      border-radius: 12px;
      font-weight: 600;
      color: #1e1e1ed3;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button svg {
      position: absolute;
      width: 24px;
      fill: #1e1e1ec5;
      z-index: 9;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .arr-1 {
      right: 16px;
    }

    .animated-button .arr-2 {
      left: -25%;
    }

    .animated-button .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background-color: #fdf626;
      border-radius: 50%;
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button .text {
      position: relative;
      z-index: 1;
      transform: translateX(-12px);
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button:hover {
      box-shadow: 0 0 0 12px transparent;
      color: #1e1e1ec4;
      border-radius: 12px;
    }

    .animated-button:hover .arr-1 {
      right: -25%;
    }

    .animated-button:hover .arr-2 {
      left: 16px;
    }

    .animated-button:hover .text {
      transform: translateX(12px);
    }

    /* .animated-button:hover svg {
      fill: ;
    } */

    .animated-button:active {
      scale: 0.95;
      
    }

    .animated-button .circle {
      width: 192px;
      height: 193px;
      opacity: 1;
    }




/* 📱 Mobile View Optimization */
@media (max-width: 768px) {

  .animated-button {
    padding: 7px 14px;      /* smaller padding */
    font-size: 9px;        /* 👈 smaller font size */
    border-width: 3px;
    border-radius: 7px;
    gap: 2px;
  }

  .animated-button svg {
    width: 12.5px;            /* smaller icons */
  }

  .animated-button .text {
    transform: translateX(-4px);
  }

  .animated-button:hover .text {
    transform: translateX(4px);
  }

  .animated-button .arr-1 {
    right: 8px;
  }

  .animated-button:hover .arr-1 {
    right: -35%;
  }

  .animated-button .arr-2 {
    left: -38%;
  }

  .animated-button:hover .arr-2 {
    left: 8px;
  }


  .animated-button .circle {
    width: 113px;      /* smaller circle */
    height: 70px;
  }
}