/* underline a hover */
/* .list-content a {
    text-decoration: none;
    color: #000;
    position: relative;
    display: inline-block;
}

.list-content a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: red;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.list-content a:hover::after {
    width: 50px;
} */
/* end of effect */

/* effect css */
        /* Add this to your existing CSS */
        .list-content a {
            position: relative;
            display: inline-block;
            color: black;
            text-decoration: none;
            transition: color 0.3s ease;
            padding-bottom: 2px; /* Optional: Adds space if line overlaps text */
          }
  
          .list-content a::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px; /* Thickness of the line */
                bottom: 10px; /* Adjust this value to move line up/down */
                left: 0;
                background-color: #ed2024;
                transition: width 0.3s ease;
                max-width: 70px; /* Limits the line to 50px at max */
          }
  
          .list-content a:hover {
              color: #ED2024; /* Optional: change text color on hover */
          }
  
          .list-content a:hover::after {
            width: 70px; /* Fixed width on hover */
          }
          /* end of effect */