*{
    margin-left:90px;
    margin-right:90px;
    border:border-box;
    background-color:aliceblue;
}

.h1{
    color:#9dc258;
    font-weight: 900;
    text-align: center;
    padding: 100px;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items:center;
}

.h3{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    color:black;
    font-size: 10px;
    text-align: center;
}

.hover-text {
    display: inline-block;
    position: relative;
    font-size: 24px;
    color: #9dc258;
    cursor:pointer;
    text-align: center;
}

.hover-text::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -5px;
    background-color: #9dc258; 
    transition: width 0.3s ease; 
}

.hover-text:hover::after {
    width: 100%;
}*{
    margin-left:90px;
    margin-right:90px;
    border:border-box;
    background-color:aliceblue;
}

.h1{
    color:#9dc258;
    font-weight: 900;
    text-align: center;
    padding: 100px;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items:center;
}

.h3{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    color:black;
    font-size: 10px;
    text-align: center;
}

.hover-text {
    display: inline-block;
    position: relative;
    font-size: 24px;
    color: #9dc258;
    cursor:pointer;
    text-align: center;
}

.hover-text::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -5px;
    background-color: #9dc258; 
    transition: width 0.3s ease; 
}

.hover-text:hover::after {
    width: 100%;
}*{
   
    margin-left:90px;
    margin-right:90px;
    border:border-box;
    background-color:aliceblue ;
}

.h1{
    color:#9dc258;
    font-weight: 900;
    text-align: center;
    padding: 100px;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items:left ;
}

.h3{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    color:#9dc258;
    font-size: 10px;


}

       .hover-text {
            display: inline-block;
            position: relative;
            font-size: 24px;
            color: #9dc258;
            cursor:pointer;
        }

    

        /* Create the line, initially hidden */
        .hover-text::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            left: 0;
            bottom: -5px;
            background-color: #9dc258; /* You can customize the color */
            transition: width 0.3s ease; /* Animation effect */
        }

        /* When hovering, the line expands */
        .hover-text:hover::after {
            width: 100%;
        }