.line {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    cursor: pointer;
}


.line::before {
    /* الخط الأزرق */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: #4eb5dc;
    z-index: 2;
    transition: width 0.4s ease;
}

/* تأثير hover */
.line:hover::before {
    width: 120px; /* يتمدد لعرض الأبيض */
}