| Purpose                       | Color (Hex) | Notes                                 |
| ----------------------------- | ----------- | ------------------------------------- |
| Primary (buttons, highlights) | `#4A90E2`   | Bright blue — friendly & trustworthy  |
| Secondary (accent, links)     | `#50E3C2`   | Soft teal — fresh & modern            |
| Background (main)             | `#F9F9F9`   | Very light gray — clean & minimal     |
| Card/Panel Background         | `#FFFFFF`   | White — keeps focus on content        |
| Text Primary                  | `#333333`   | Dark gray — easy to read              |
| Text Secondary                | `#777777`   | Medium gray — for less important text |
| Error / Warning               | `#E94E4E`   | Red — for alerts or invalid inputs    |




            <div class="inputs" id="form">
                <input type="text" placeholder="Name" id="name">
                <input type="email" placeholder="Email" id="email">
                <input type="tel" placeholder="Phone" id="phone">
                <div class="pickers-row">
                    <input class="calendar" type="hidden" id="ranged">
                    <div style="display: flex; flex-direction: column; align-items: center; margin-right: 3vh;">
                        <p style="font-size: 20px; margin: 0;">Select Time</p>
                        <p style="font-size: 14px;  margin-top: 0; margin-bottom: 20;">(08:00 - 17:00)</p>
                        <div class="picker-container">
                            <div class="picker" id="hour-picker"></div>
                            <div class="highlight"></div>
                        </div>
                    </div>
                </div>
            </div>