#contact-form label {
    color: var(--bs-dark);
}

#contact-form #message {
    height: min(70vh, 20rem);
}

.contact-us>div>div {
    padding: 1rem;
    background-color: rgb(var(--bg-clr-1));
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--text-clr-1), 0.25);
}

#contact-form .form-floating {
    position: relative;
}

#contact-form .form-floating .bi {
    position: absolute;
    left: 1rem;
    top: 0;
    transition: top ease 300ms;
}

#contact-form .form-floating input:focus ~ .bi,
#contact-form .form-floating textarea:focus ~ .bi {
    top: 1.5rem;
}

#contact-form .form-floating .bi::before {
    color: rgb(var(--text-clr-2));
}

#contact-form .form-floating input,
#contact-form .form-floating textarea {
    padding-left: 2.5rem;
}

#contact-form .form-floating .bi.bi-asterisk::before {
    color: var(--bs-danger)!important;
}

#contact-form .form-floating .bi ~ .bi.bi-asterisk {
    display: none;
    top: 0;
    left: 2rem;
    transform: scale(0.6);
}

#contact-form .form-floating input:required ~ .bi.bi-asterisk,
#contact-form .form-floating textarea:required ~ .bi.bi-asterisk {
    display: block;
}

#contact-form .form-floating input:focus ~ .bi.bi-asterisk,
#contact-form .form-floating textarea:focus ~ .bi.bi-asterisk {
    display: none;
}

#contact-form .form-floating input:required:focus ~ .bi::before,
#contact-form .form-floating textarea:required:focus ~ .bi::before {
    color: var(--bs-danger);
}

@media screen and (min-width: 768px) {
    #contact-form #lastName+label,
    #contact-form #phoneNo+label {
        padding-left: 1.3rem;
    }

    #contact-form #lastName ~ span.bi,
    #contact-form #phoneNo ~ span.bi {
        left: 1.3rem;
    }

    #contact-form  #lastName ~ .bi.bi-asterisk,
    #contact-form  #phoneNo ~ .bi.bi-asterisk {
        left: 2.3rem;
    }
}