/* CSS */
.link-btn{
	font-family: "Gordita", Sans-serif;
    font-size: 16px;
    font-weight: 600;
  display: inline-block;        /* lets pseudo-element position correctly */
  text-decoration: none;        /* remove default underline */
  color: #003728;;               /* use surrounding text color */
  font-weight: 700;             /* normal weight by default */
  position: relative;           /* required for ::after positioning */
  transition: font-weight 0.3s ease;
  cursor: pointer;
}

/* animated underline */
.link-btn::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;                 /* distance from text; tweak as needed */
  height: 1px;                  /* underline thickness */
  width: 0;                     /* start collapsed */
  background: currentColor;     /* matches text color */
 transition: width 0.5s ease; /* <-- slower animation */
  transform-origin: left;
}

/* hover and keyboard focus state */
.link-btn:hover::after,
.link-btn:focus::after,
.link-btn:active::after{
  width: 100%;
}

.link-btn:hover,
.link-btn:focus{
  font-weight: 700;             /* bold on hover/focus */
  outline: none;
  color:#3dcfe0;
}

/* keyboard accessibility: show focus ring for keyboard users */
.link-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08); /* subtle focus ring — change to suit design */
  border-radius: 2px;
}


.link-btn:hover i {
  transform: translateX(4px);
 
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .link-btn,
  .link-btn::after{
    transition: none;
  }
  .link-btn::after{ width:100%; } /* just show underline */
}

/* =====================================
   Mobile (767px and below)
===================================== */
@media screen and (max-width: 767px) {

.link-btn{

    font-size: 14px;
    font-weight:600;             /* normal weight by default */
}
}
/* CSS Document */