Booking Cta Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        /*
            Demonstration image from Unsplash by S-well.
            Replace with your own destination photo.
        */
        --bch-bg-image: url('https://images.unsplash.com/photo-1530789253388-582c481c54b0?q=80&w=1470');
        --bch-min-height: 90vh;
        --bch-padding: 3rem 1.5rem;
        --bch-text-color: #ffffff;
        --bch-overlay-color: rgba(0, 0, 0, 0.4);
        --bch-form-bg: #ffffff;
        --bch-form-text-color: #1f2937;
        --bch-cta-bg: #d97706;
        --bch-cta-hover-bg: #b45309;
        --bch-cta-text-color: #ffffff;
    }
    .booking-cta-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        min-height: var(--bch-min-height);
        padding: var(--bch-padding);
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: var(--bch-bg-image);
        background-size: cover;
        background-position: center;
    }
    .booking-cta-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--bch-overlay-color);
        z-index: 1;
    }
    .booking-cta-hero * {
         box-sizing: border-box;
    }
    .bch-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        color: var(--bch-text-color);
        width: 100%;
    }
    .bch-content .title {
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 2.5rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .bch-booking-form {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        background-color: var(--bch-form-bg);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
    .bch-booking-form .input-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #f1f5f9;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        flex: 1 1 180px; /* Flexbox for responsive inputs */
    }
    .bch-booking-form .input-group svg {
        width: 1.25em;
        height: 1.25em;
        color: #64748b;
    }
    .bch-booking-form .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
    }
    .bch-booking-form .form-input {
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 1rem;
        width: 100%;
        color: var(--bch-form-text-color);
    }
    .bch-booking-form .form-button {
        flex: 1 1 100px; /* Flexbox for button */
        background-color: var(--bch-cta-bg);
        color: var(--bch-cta-text-color);
        font-size: 1.1rem;
        font-weight: 600;
        border: none;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .bch-booking-form .form-button:hover {
        background-color: var(--bch-cta-hover-bg);
    }
</style>

<section class="booking-cta-hero">
    <div class="bch-content">
        <h1 class="title">Your Adventure Awaits</h1>
        
        
        <form class="bch-booking-form" action="#">
            <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /></svg>
                <label for="destination-input" class="sr-only">Destination</label>
                <input type="text" id="destination-input" name="destination" class="form-input" placeholder="Where to?">
            </div>
            <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                <label for="checkin-input" class="sr-only">Check-in Date</label>
                <input type="text" id="checkin-input" name="checkin" class="form-input" placeholder="Check-in" onfocus="(this.type='date')" onblur="(this.type='text')">
            </div>
             <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                <label for="checkout-input" class="sr-only">Check-out Date</label>
                <input type="text" id="checkout-input" name="checkout" class="form-input" placeholder="Check-out" onfocus="(this.type='date')" onblur="(this.type='text')">
            </div>
            <button type="submit" class="form-button">Search</button>
        </form>
    </div>
</section>