@extends('layouts.app')
@section('contents')
    <style>
    .parentContainer {
        position: relative;
        text-align: center;
        color: white;
    }
    centereds {
        position: absolute;

        left: 10%;

        top: 40%;
        font-size: 14px;
        font-weight: 600;
        color: black;
        width: 80%;
    }
    .centered {
        position: absolute;
        top: 24%;
        left: 28%;
        color: black;
        width: 80%;
        font-size: 11px;
    }
    .small_search_form_top {
        border: 1px solid #000;
        margin-top: 31px;
        width: 350px;
        margin: 0 auto;
        margin-top: 24px
    }

    .btn-warning {
        color: #fff;
        background-color: #00969b;
        border-color: #00969b;
    }
  .small_search_form_top  .input-group > .form-control, .input-group > .form-select{

        display: block;

        padding: 0.375rem 0.75rem;
        /* font-size: 1rem; */
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff0;
        background-clip: padding-box;
        border: 0px solid #000;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    @media all and (max-width: 575px) {
    .small_search_form_top {
        border: 1px solid #000;
        margin-top: 6px;
        width: 156px;
    }

        .centered {
            position: absolute;
            top: 8%;
            left: 28%;
            color: black;
            width: 80%;
            font-size: 11px;
        }


        .btn.btn-warning.btn-quote {
            color: #2b2b2b;
            background-color: #fab900;
            border: none;
            border-radius: 27px;
            padding: 10px 16px;
            margin-top: 7px;
            font-weight: 700;
            font-size: 11px;
            -webkit-box-shadow: 0 0 15px -1px rgb(0 0 0 / 33%);
            -moz-box-shadow: 0 0 15px -1px rgba(0,0,0,.33);
            box-shadow: 0 0 15px -1px rgb(0 0 0 / 33%);
        }
    }
</style>

            <section class="error-found">
        <div class="container">
            <div class="container text-center mt-5 mb-5">

                <div class="parentContainer">
                    <img style="width: 100%" src="{{asset('assets/images/two-different-sized-beige-corrugated-cardboard-unlabeled-boxes-presented-top-each-other-isolated-white_346278-1617.avif')}}" alt="error">


                    <div class="centered">
                    <h1 style="
      font-size: 5.9vw;
" >Oops!</h1>
                    <p style="
    font-size: 26px;
    font-weight: 700;
    font-size: 5.9vw;
    font-size: 1.9vw;
">The page you are looking for  has been moved <br> to a new location.</p>
                    <p style="
    font-size: 26px;
    font-weight: 700;
    font-size: 5.9vw;
    font-size: 1.9vw;"> Please navigate to homepage to find  <br> your desired page or search below.</p>
                        <div class="clearfix"></div>
                        <a href="{{url('/')}}"><button type="button" class="btn btn-warning btn-quote rounded-pill ">Back to Home </button> </a>
<br>
                        <form class="small_search_form_top" action="{{ route('search') }}" method="get">
                        <div class="input-group top-bar-search-group">
                            <input type="text" required  name="search"  class="form-control search_input_top" placeholder="Search" value="{{ $keyword??'' }}">
                            <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">

                            <button type="submit"   aria-label="search" class="btn btn-secondary  bg-transparent border-0 border-start border-secondary"><img width="24" height="24" src="{{asset('assets/images/5203550-200.png')}}" alt="noah packaging"></button>
                        </div>
                    </form>
                    </p>



                </div>



                   </div>
            </div>
        </div>
    </section>
@endsection