.appointment-header {
    text-align: center; /* Center the header text */
    font-size: 2rem; /* Increase the font size */
    font-weight: bold; /* Make the font bold */
    color: #4a4a4a; /* Change the text color */
    margin-bottom: 20px; /* Add some space below the header */
    letter-spacing: 1px; /* Adds space between letters */
    text-transform: uppercase; /* Uppercase text */
}

    /* Optional styling to further enhance the header */
    .appointment-header::after {
        content: '';
        display: block;
        width: 50px; /* Width of the line */
        height: 4px; /* Height of the line */
        background: #3a8ee0; /* Color of the line */
        margin: 10px auto; /* Centers the line below the header */
    }

/* Ensure your button has some styling for better appearance */
.formbold-btn {
    background-color: #3a8ee0; /* Button background color */
    color: white; /* White text */
    font-weight: bold; /* Bold text */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Some padding */
    border: none; /* Remove default border */
}

    .formbold-btn:hover {
        background-color: #2b6baf; /* Darker shade on hover */
        cursor: pointer; /* Pointer cursor on hover */
    }

/* Optional: Style the input fields */
.formbold-form-input {
    border: 1px solid #ccc; /* Light gray border */
    padding: 10px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    width: 100%; /* Full width */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Add shadow */
}

    .formbold-form-input:focus {
        border-color: #3a8ee0; /* Change border color on focus */
        outline: none; /* Remove default outline */
    }