* {
    font-family: Urbanist;
    scroll-behavior: smooth;
}

#hero-img {
    animation: fade-down 1s ease-in-out infinite alternate;
}

@keyframes fade-down {
    0% {
        opacity: 1;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar>div>#nav-menu>a {
    position: relative;
}

.navbar>div>#nav-menu>a:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 3px;
    left: 0;
    /* Changed left to 0 to align it with the start of the <a> */
    background-color: #0666EB;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.navbar>div>#nav-menu>a:hover:before,
.navbar .active:before {
    visibility: visible;
    width: 25px;
    /* Extend the line fully under the <a> element */
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
    color: #000000;
}
label.error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}