.underline-link {
    display: inline-block;
    color: #CCCCCC;                  /* Kolor tekstu */
    text-decoration: none;  
    font-size: 14px;
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease; /* Animacja transformacji dla efektu powiększenia */
}
.underline-link:hover {
    color: #FFFFFF;                  /* Kolor tekstu */
    transform: scale(1.1);         /* Delikatne powiększenie (o 10%) */
}
.underline-link::after {
    content: '';                   /* Dodajemy pseudo-element */
    position: absolute;            /* Pozwala na dokładne pozycjonowanie */
    left: 0;                       /* Ustawiamy na początku tekstu */
    bottom: -3px;                     /* Ustawiamy pod tekstem */
    width: 100%;                   /* Podkreślenie na szerokość tekstu */
    height: 2px;                   /* Grubość podkreślenia */
    background-color: white;       /* Kolor podkreślenia */
    transform: scaleX(0);          /* Zmniejszamy podkreślenie do zera */
    transform-origin: bottom right;/* Start animacji z prawej strony */
    transition: transform 0.3s ease; /* Płynna animacja rozwijania podkreślenia */
}

.underline-link:hover::after {
    transform: scaleX(1);          /* Pełne rozwinięcie podkreślenia po najechaniu */
    transform-origin: bottom left; /* Rozwija się z lewej strony */
}