@font-face {
    font-family: 'Roboto-medium';
    src: url("../../fonts/Roboto/Roboto-Medium.ttf");
}

.button {
    position: relative;
    overflow: hidden;
    height: 3rem;
    padding: 0 2rem;
    border-radius: 1.5rem;
    background: #1d3a74;
    background-size: 400%;
    color: #fff !important;
    border: none;
    cursor: pointer;
  }

  .button:hover {
    background: transparent;
  }

  .button:hover::before {
    transform: scaleX(1);
  }

  .button-content {
    position: relative;
    z-index: 1;
    font-family: 'Roboto-medium', sans-serif;
  }

  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background: linear-gradient(
      82.3deg,
      #1d3a74 10.8%,
      rgba(99, 88, 238, 1) 94.3%
    );
    transition: all 0.475s;
  }

  .button-inic {
    width: 40%;
    position: relative;
    overflow: hidden;
    height: 3rem;
    padding: 0 2rem;
    border-radius: 1.5rem;
    background: #1d3a74;
    background-size: 400%;
    color: #fff !important;
    border: none;
    cursor: pointer;
  }

  .button-inic:hover {
    background: transparent;
  }

  .button-inic:hover::before {
    transform: scaleX(1);
  }

  .button-content-inic {
    position: relative;
    z-index: 1;
    font-family: 'Roboto-medium', sans-serif;
  }

  .button-inic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background: linear-gradient(
      82.3deg,
      #1d3a74 10.8%,
      rgba(99, 88, 238, 1) 94.3%
    );
    transition: all 0.475s;
  }


  @media(width <= 546px){
    .button-inic{
       width: 55%;
    }
  }


  @media(width <= 414px){
    .button-inic{
       width: 75%;
    }
  }