/* Buttons ---------------------------------- */

/* Primary button */

a.pri-button {
  font-size: var(--fs-mini);
  line-height: var(--lh-mini);
  font-weight: var(--fw-regular);
  font-style: normal;
  text-decoration: none;
  color: var(--black-100);
  position: relative; /* Needed for absolute positioning of the underline */
  display: inline-block;
  padding-bottom: 5px; /* Space between text and underline */
}
  a.pri-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    width: 100%;
    height: 3px; /* Thickness of the underline */
    background-color: var(--blue-100); /* Line color */
    transform: scaleX(1);
    transform-origin: left;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* Smooth animation */
  }
  a.pri-button:hover {
    color: var(--black-100);
  }
    a.pri-button:hover::after {
      color: var(--blue-100);
      width: 120%; /* Extend the line to 120% */
      left: 0; /* Keep the left edge fixed */
    }

a.sec-button {
  font-size: var(--fs-xx-mini);
  line-height: var(--lh-mini);
  font-weight: var(--fw-regular);
  font-style: normal;
  text-decoration: none;
  color: var(--red-100);
  position: relative; /* Needed for absolute positioning of the underline */
  display: inline-block;
  padding-bottom: 5px; /* Space between text and underline */
}
  a.sec-button:hover {
    color: var(--blue-100);
  }

.pri-button_item,
.sec-button_item {
  display: block;
  width: 100%;
}
.pri-button_item {
  padding-top: var(--sp-mini); 
  padding-bottom: var(--sp-small);
}
.sec-button_item {
  padding-bottom: var(--sp-medium);
}

/* Media Queries - Large 1025px -> ---------- */
@media screen and (min-width: 64.063em) {

}

/* Media Queries - Medium 640px -> 1024px --- */
@media screen and (max-width: 64em) {

}

/* Media Queries - Small -> 640px ----------- */
@media screen and (max-width: 40em) {



}