.animated-button-link {
  text-decoration: none;
}

.animated-button {
  --border: 1px solid #8b949a;
  --radius: 45.261px;
  --gap: 4px;
  --pad: 24px 36px;

  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  border: var(--border);
  background: linear-gradient(90deg, #4f677f40, #4f677f00);
  border-radius: var(--radius);
  font: 600 16px/1 Nord-Regular-400, sans-serif;
  color: #fff;
  box-shadow: 0 0 0 0px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 1024px) {
  .animated-button {
    --pad: 16px 36px !important;
    width: 100%;
  }
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #fff;
  z-index: 1;
  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;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  letter-spacing: 1.474px;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  line-height: 120%;
  font-weight: 500 !important;
}

/* Hover */
.animated-button:hover {
  box-shadow: 0 0 1px 12px transparent !important;
  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 .circle {
  width: 120%;
  height: 220px;
  opacity: 1;
}

/* Active */
.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #8b949a66;
}

/* Rimossi !important inutili e proprietà ridondanti */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.animated-button-link {
  text-decoration: none;
}

.animated-button-dark {
  --border: 1px solid #8b949a;
  --radius: 45.261px;
  --gap: 4px;
  --pad: 24px 36px;

  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  border: var(--border);
  background: transparent;
  border-radius: var(--radius);
  font: 500 16px/120% Nord-Regular-400, sans-serif;
  color: #1b2432;
  letter-spacing: 1.474px;
  box-shadow: 0 0 0 0px #1b2432;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 1024px) {
  .animated-button-dark {
    --pad: 16px 36px;
    width: 100%;
    text-align: center;
    font: 500 14px/120% Nord-Regular-400, sans-serif;
  }
}
.animated-button-dark svg {
  width: 24px;
  fill: #1b2432;
  position: absolute;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-dark .arr-1 {
  right: 16px;
}
.animated-button-dark .arr-2 {
  left: -25%;
}

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

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

/* Hover */
.animated-button-dark:hover {
  border-radius: 12px;
  box-shadow: 0 0 0 12px transparent;
}

.animated-button-dark:hover .arr-1 {
  right: -25%;
}
.animated-button-dark:hover .arr-2 {
  left: 16px;
}
.animated-button-dark:hover .text {
  transform: translateX(12px);
}
.animated-button-dark:hover svg {
  fill: #1b2432;
}
.animated-button-dark:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 0.12;
}

/* Active */
.animated-button-dark:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #8b949a66;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.animated-button-link {
  text-decoration: none;
}

.animated-button-only-arrow {
  --border: 1px solid #8b949a;
  --radius: 45.261px;
  --gap: 4px;
  --pad: 24px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  border: var(--border);
  background: transparent;
  border-radius: var(--radius);
  font: 500 16px/120% Nord-Regular-400, sans-serif;
  color: #1b2432;
  letter-spacing: 1.474px;
  box-shadow: 0 0 0 0px #1b2432;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 1024px) {
  .animated-button-only-arrow {
    --pad: 16px;
    width: 100%;
    text-align: center;
    font: 500 14px/120% Nord-Regular-400, sans-serif;
  }
}

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

.animated-button-only-arrow .arr-1 {
  right: 10px;
}
@media (max-width: 1024px) {
  .animated-button-only-arrow .arr-1 {
    right: 4px;
  }
}

.animated-button-only-arrow .arr-2 {
  left: -45%;
}
@media (max-width: 1024px) {
  .animated-button-only-arrow .arr-2 {
    left: -85%;
  }
}
.animated-button-only-arrow .circle {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  background: #1b2432;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

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

.animated-button-only-arrow:hover {
  border-radius: 100%;
  box-shadow: 0 0 0 12px transparent;
}

.animated-button-only-arrow:hover .arr-1 {
  right: -65%;
}

.animated-button-only-arrow:hover .arr-2 {
  left: 13px;
}

@media (max-width: 1024px) {
  .animated-button-only-arrow:hover .arr-2 {
    left: 5px;
  }
}

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

.animated-button-only-arrow:hover svg {
  fill: #1b2432;
}

.animated-button-only-arrow:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 0.12;
}

.animated-button-only-arrow:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #8b949a66;
}