/* Custom underline effect for the hero text */
        .underline-effect {
            background-image: linear-gradient(90deg, var(--color-strong), var(--color-strong));
            background-repeat: no-repeat;
            background-size: 0% 3px;
            background-position: left bottom;
            transition: background-size 0.3s ease-out;
            padding-bottom: 2px;
        }
        .underline-effect:hover {
            background-size: 100% 3px;
        }