@include('base.header')
<style>
    /* ... (Your existing styles) ... */

    /* New styles for centering the main form container */
    .request_container {
        /* Set a maximum width for the content to center it on wide screens */
        max-width: 800px;
        /* Adjust this value as needed for your design */
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        /* Add padding for mobile view */
        padding-right: 15px;
        /* Ensure no unwanted spacing from Flex/Grid that might break centering */
        display: block;
    }

    /* Ensure the form itself respects the container */
    form {
        display: block;
        width: 100%;
    }

    /* Ensure the main form content box respects the container */
    .main_form-con {
        /* Add shading/border if desired, but centering is handled by .request_container */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        background-color: #fff;
    }

    /* Optional: To ensure the header/footer stays fixed/full-width,
   make sure your base.header and base.footer HTML is outside the main form container */
</style>


    
<div class="request_container">

    <div class="home-title">
        <h2 class="form-title text-center mb-4 mt-5">Welcome to <strong>Find Flicker</strong><br> Your Convenient
            Service Connection</h2>
    </div>

    <form action="{{ route('sendRequest') }}" method="GET">
        @csrf

        <div class="row main_form-con px-4 py-4 ">

            <input type="hidden" id="full_address">

            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <label class="form-label">Service*</label>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 "> </div>
                <div class="col-lg-4 mt-3 text-center ">
                    <button class="submit-btn w-100" id="sendRequestBtn">Send Request</button>
                </div>
            </div>
        </div>
    </form>

</div>
@include('base.footer')
