﻿.button-hover {
    background-color: #ccc; /* Set the initial background color to light grey */
    color: #000; /* Set the initial text color to black */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow effect (adjust values as needed) */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Add a smooth transition effect */
}

    /* Button style on hover */
    .button-hover:hover {
        background-color: #f0f0f0; /* Change the background color to an even lighter grey on hover */
        /*color: #000; /* Change the text color on hover (if needed) */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Add a stronger shadow effect on hover (adjust values as needed) */
    }

.Text-hover {
    position: relative; /* Make sure the pseudo-element is positioned relative to this element */
    background-color: #ccc; /* Set the initial background color to light grey */
    color: #fff; /* Set the initial text color to white (light grey) */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Lighter shadow effect at the top (adjust values as needed) */
    transition: background-color 0.3s ease, color 0.5s ease, box-shadow 0.3s ease; /* Longer transition duration for color change */
}

    /* Pseudo-element to create the grey line on top */
    .Text-hover::before {
        content: ''; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Full width of the parent element */
        height: 3px; /* Height of the grey line (adjust as needed) */
        background-color: #999; /* Grey color of the line (adjust as needed) */
    }

    /* Text style on hover */
    .Text-hover:hover {
        background-color: #a0d8e6; /* Change the background color to light blue on hover */
        color: #fff; /* Change the text color to white (light grey) on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lighter shadow effect on hover (adjust values as needed) */
    }

.line {
    width: 100%;
    border: none;
    border-top: 1px solid #ccc; /* Grey color of the line (adjust as needed) */
    margin: 10px 0; /* Add some margin for spacing */
}