<!-- _________________________________ modal SEARCH Parts _______________________________________ -->
	<div class="modal z-index_1200 fade searchModal" id="searchModal" tabindex="-1" aria-labelledby="searchModal" aria-hidden="true">
        <button type="button" class="btn-close m-0 p-0 opacity-100 text-white bg-img-none position-absolute top-0 start-0 p-3" data-bs-dismiss="modal" aria-label="Close">
            <i class="icon-arrow-left"></i>
        </button>
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg modal-fullscreen-lg-down">
            <div class="modal-content bg-dark rounded-3">
                <div class="searchModal-body modal-body p-0 h-100 scroll-dark">
                   
                    <div class="card border-0 rounded-3 card-bg-dark min-h-100">
                        <div class="card-body px-3 px-sm-4 py-5 p-sm-5 position-relative d-flex flex-column">
                            <button type="button" class="btn-close p-4 p-sm-5 opacity-100 text-white d-inline-block d-lg-none w-auto text-end position-absolute top-0 end-0 bg-img-none h-auto" data-bs-dismiss="modal" aria-label="Close">
                                <i class="icon-close-circle text-md"></i>
                            </button>
                            <div class="px-lg-4 mx-lg-3 my-lg-4 mb-5">
                                <div class="text-center mb-5 pb-1 d-block d-lg-none">
                                    <h3 class="headline-2 lh-1 text-800 text-uppercase mb-2">Custom <br> Searching</h3>
                                    <p class="text-md lh-sm mb-0 ">Choose your machine you would like to use or use custom searching.</p>
                                </div>
                                <div id="carouselExampleControls" class="carousel slide mb-4 pb-0 pb-lg-2" data-bs-ride="false">
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <div class="row justify-content-center">
                                                <div class="col-8 col-lg-9 col-xl-8">
                                                    <div class="carousel-item-box justify-content-evenly rounded-3 card-bg-dark px-2 py-3 p-md-4  d-flex align-items-center border border-stone border-opacity-15">
                                                        <img src="assets/images/buggy.png" class="thumbnail-img object-fit-cover boxSize2-xxl" alt="">
                                                        <h4 class="headline-4 text-800 lh-1 text-uppercase px-2 mb-0">MY ATV XXXC 2013</h4>
                                                    </div>
                                                </div>
                                            </div>		
                                        </div>
                                        <div class="carousel-item">
                                            <div class="row justify-content-center">
                                                <div class="col-8 col-lg-9 col-xl-8">
                                                    <div class="carousel-item-box justify-content-evenly rounded-3 card-bg-dark px-2 py-3 p-md-4 d-flex align-items-center border border-stone border-opacity-15">
                                                        <img src="assets/images/buggy.png" class="thumbnail-img object-fit-cover boxSize2-xxl" alt="">
                                                        <h4 class="headline-4 text-800 lh-1 text-uppercase px-2 mb-0">custom search</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="carousel-control-prev bg-stone bg-opacity-50 opacity-100 rounded-1 top-50 bottom-50 my-auto boxSize-md" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon carousel-control-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next bg-stone bg-opacity-50 opacity-100 rounded-1 top-50 bottom-50 my-auto boxSize-md" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                        <span class="carousel-control-next-icon carousel-control-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                </div>														
                                <p class="text-xs text-500 lh-1 text-uppercase mb-2 opacity-60">year</p>
                                <select class="select-beast select-beast-sm mb-4">
                                    <option value="1">2013</option>
                                    <option value="2">2014</option>
                                    <option value="3">2015</option>
                                    <option value="4">2016</option>
                                </select>
                                <p class="text-xs text-500 lh-1 text-uppercase mb-2 opacity-60">make</p>
                                <select class="select-beast select-beast-sm mb-4">
                                    <option value="1">CAN-AM</option>
                                    <option value="2">Lorem</option>
                                    <option value="3">Ipsum</option>
                                    <option value="4">Dolor</option>
                                </select>
                                <p class="text-xs text-500 lh-1 text-uppercase mb-2 opacity-60">model</p>
                                <select class="select-beast select-beast-sm mb-4">
                                    <option value="1">RENEGADE</option>
                                    <option value="2">Lorem</option>
                                    <option value="3">Ipsum</option>
                                    <option value="4">Dolor</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center py-4 pt-lg-5 pb-lg-0 mt-auto">
                                <a href="#" class="btn btn-primary w-40">
                                    <span class="btn-text">find parts</span> 
                                </a>																
                            </div>										
                        </div>
                    </div>
                </div>					
            </div>
        </div>
    </div>