<div class="row">
    <div class="col-lg-8 mt-0">
        <div class="bg-custom p-5">
            <h3 class="font-size-xxl mt-0 mb-4 pb-0">Select room</h3>

            <div class="row align-items-center mb-4">
                <div class="col-md-1 text-center">
                    <input type="radio" checked="checked" name="bookNowRoom" class="bookNowRoom1" value="" />
                </div>
                <div class="col-md-2 text-center">
                    <label for="bookNowRoom1" class="d-block"><img src="https://hotel-pyrenees.net/wp-content/uploads/2023/06/db26652f-6997-42de-adde-6afd1b4d1dba.jpg" class="img-fluid my-3 my-md-0" alt="" /></label>
                </div>
                <div class="col-md-9">
                    <label for="bookNowRoom1" class="d-block">
                        <h5 class="text-transform-none font-size-xl font-weight-bold mt-2 mb-0">Single room</h5>
                        <div class="custom-room-suite-info position-relative top-6">
                            <ul class="m-0 p-0">
                                <li><label>RATES FROM</label> <strong>100 €</strong></li>
                            </ul>
                        </div>
                    </label>
                </div>
            </div>
            <div class="row align-items-center mb-4 border-top pt-4">
                <div class="col-md-1 text-center">
                    <input type="radio" name="bookNowRoom" class="bookNowRoom2" value="" />
                </div>
                <div class="col-md-2 text-center">
                    <label for="bookNowRoom2" class="d-block"><img src="https://hotel-pyrenees.net/wp-content/uploads/2023/06/1e73f913-1dc8-4e3c-9a7b-13622cbc26fc-1.jpg" class="img-fluid my-3 my-md-0" alt="" /></label>
                </div>
                <div class="col-md-9">
                    <label for="bookNowRoom2" class="d-block">
                        <h5 class="text-transform-none font-size-xl font-weight-bold mt-2 mb-0">Double room</h5>
                        <div class="custom-room-suite-info position-relative top-6">
                            <ul class="m-0 p-0">
                                <li><label>RATES FROM</label> <strong>120 €</strong></li>
                            </ul>
                        </div>
                    </label>
                </div>
            </div>
            <div class="row align-items-center mb-0 border-top pt-4">
                <div class="col-md-1 text-center">
                    <input type="radio" name="bookNowRoom" class="bookNowRoom3" value="" />
                </div>
                <div class="col-md-2 text-center">
                    <label for="bookNowRoom3" class="d-block"><img src="https://hotel-pyrenees.net/wp-content/uploads/2023/06/8c032124-5f6a-491c-a1e8-e3785e7f961f-1.jpg" class="img-fluid my-3 my-md-0" alt="" /></label>
                </div>
                <div class="col-md-9">
                    <label for="bookNowRoom3" class="d-block">
                        <h5 class="text-transform-none font-size-xl font-weight-bold mt-2 mb-0">Triple room</h5>
                        <div class="custom-room-suite-info position-relative top-6">
                            <ul class="m-0 p-0">
                                <li><label>RATES FROM</label> <strong>150 €</strong></li>
                            </ul>
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <div class="bg-custom p-5 mt-4">
            <h3 class="font-size-xxl mt-0 mb-4 pt-0 pb-0">Details</h3>

            <div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [text* bookNowFullName id:bookNowFullName class:form-control class:font-size-md placeholder "Full name"]
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [text* bookNowStreetAdd1 id:bookNowStreetAdd1 class:form-control class:font-size-md placeholder "Address"]
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [text* bookNowZip id:bookNowZip class:form-control class:font-size-md placeholder "Postal code"]
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [text* bookNowCity id:bookNowCity class:form-control class:font-size-md placeholder "City"]
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [tel* bookNowPhone id:bookNowPhone class:form-control class:font-size-md placeholder "Phone"]
                    </div>
                </div>
            </div>

<div class="row">
                <div class="form-group col mb-4">
                    <div class="form-control-custom form-control-custom-dark">
                        [email* bookNowEmail id:bookNowEmail class:form-control class:font-size-md placeholder "Email"]
                    </div>
                </div>
            </div>

        
            
        </div>
    </div>
    <div class="col-lg-4 mt-4 mt-lg-0 position-relative">
        <div class="position-sticky" style="top: 145px;">
            <div class="bookFormDetails box-shadow-custom bg-custom p-5">
                <div class="row">
                    <div class="form-group col">
                        <h3 class="font-size-xxl mb-4 pb-0">Reservation details</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <div class="form-control-custom form-control-custom-dark form-control-datepicker-custom position-relative">
                         [text* bookNowArrival id:bookNowArrival autocomplete:off class:walcf7-datepicker class:form-control class:font-size-sm placeholder "Arrival"]

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <div class="form-control-custom form-control-custom-dark form-control-datepicker-custom position-relative">
                            [text* bookNowDeparture id:bookNowDeparture autocomplete:off class:walcf7-datepicker class:form-control class:font-size-sm placeholder "Departure"]
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <div class="form-control-custom form-control-custom-dark">
                            [select* bookNowAdults class:form-control class:font-size-sm class:text-uppercase "Adults" "1" "2" "3" "4"]
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col pb-0 mb-0">
                        <div class="form-control-custom form-control-custom-dark">
                            [select* bookNowKids class:form-control class:form-select class:form-control-sm class:text-uppercase "Children" "0" "1" "2" "3" "4"]
                        </div>
                    </div>
                </div>
            </div>
            [submit class:btn class:btn-primary class:font-weight-bold class:text-uppercase class:py-3 class:mt-4 class:mb-2 class:w-100 "Book now"]
        </div>
    </div>
</div>