@extends('includes.layout') <!-- Extend the layout -->

@section('content') <!-- Define the content section -->
<div class="bg-main-body">
   <div class="container-lg">
      <div class="row  py-5 ">
         <div class="col-md-6">
            <div class="bg-white p-3 rounded ">
               <div class="row gx-0">
                  <div class="col-md-4">
                     <div class="card border-0 h-100 pt-4 px-3">
                        <div class="position-relative">
                           <div class="images-card">
                              <img src="assets/images/men-bio.png" class="card-img-top" alt="...">
                           </div>
                           <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                              <div class="d-flex">
                                 <h1 class="text-theme mb-0 lh-34">20</h1>
                                 <p class="rotate text-white tx-9 mb-0">YEARS</p>
                              </div>
                              <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                           </div>
                        </div>
                        <div class="card-body text-center">
                           <h6 class="card-title mb-0">Rahul Sharma</h6>
                           <p class=".text-theme tx-12 text-theme">Unisex Salon</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-8">
                     <div class="card border-0 h-100">
                        <div class="card-body">
                           <p>__ Bio</p>
                           <p class="text-dim tx-12">There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                              alteration in some form, by injected humour, or randomised words which don't look even slight
                              believable. If you are going to use a passage of Lorem Ipsum, 
                           </p>
                           <p>__ Skill</p>
                           <div class="button-section">
                              <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                              <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                              <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                              <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Hair Spa</a>
                              <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Head Massage</a>
                              <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Foot Massage</a>
                              <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Body Massage</a>
                              <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Foot Massage</a>
                              <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body Spa</a>
                           </div>
                           <!-- happy clinik section start here -->
                           <div class="row mt-4">
                              <div class="col-xl-6 col-lg-6 mb-1">
                                 <div class="pink  px-3 bg-light rounded d-flex">
                                    <a class="mt-3">
                                    <img src="assets/images/happy.png" alt="" class="img-fluid  w-75">
                                    </a>
                                    <div class="ptag">
                                       <h6 class="card-title mb-0 mt-3">24,000+</h6>
                                       <p class="text-dim tx-10">Happy Clients</p>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-xl-6 col-lg-6 mb-1">
                                 <div class=" d-flex bg-light  rounded px-3">
                                    <a class="mt-3">
                                    <img src="assets/images/review.png" class="img-fluid w-75">
                                    </a>
                                    <div class="ptag">
                                       <h6 class="card-title mb-0  mt-3">4.5</h6>
                                       <p class="text-dim tx-10">(364 Reviews)</p>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!-- happy clinik section end here -->
                           <div class="col-md-12">
                              <!-- blanck section start here -->
                              <div class="slider cutsom_slide mt-5">
                                 <div class="slide-track">
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="bg-white rounded p-3 mt-3">
               <div class="accordion accordion-flush " id="accordionFlushExample">
                  <div class="accordion-item  bg-light  mb-1 border">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush2" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold tx-13">Haircut</span>  
                     </div>
                     <div id="flush2" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="accordion-item  bg-light  mb-1 border-0">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold tx-13">Hair Color</span>  
                     </div>
                     <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <!-- collapse -->
                  <div class="accordion-item  bg-light  mb-1 border-0">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseO" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold tx-13">Beard</span>  
                     </div>
                     <div id="flush-collapseO" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="accordion-item  bg-light  mb-1 border-0">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsen" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold tx-13">Facial/Clean Up</span>
                     </div>
                     <div id="flush-collapsen" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="accordion-item  bg-light  mb-1 border-0">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsee" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold tx-13">Groom Packages</span>
                     </div>
                     <div id="flush-collapsee" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="accordion-item  bg-light  mb-1 border-0">
                     <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapseOne">
                        <span class="col-md-7 fw-bold  tx-13">Packages</span> 
                     </div>
                     <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                        <div class="accordion-body  p-0">
                           <ul class="list-group list-group-flush">
                              <div class="my-2">
                                 <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                 <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                              </div>
                              <li class="list-group-item border-dashed tx-14">
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="headshave">
                                 <label class="form-check-label tx-12" for="headshave">
                                 Head Shave
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹251</span>
                              </li>
                              <li class="list-group-item border-dashed tx-14">
                                 <span class="form-check d-inline-block">
                                 <input class="form-check-input" type="checkbox" value="" id="mundan">
                                 <label class="form-check-label tx-12" for="mundan">
                                 Mundan (Below 7 years)
                                 </label>
                                 </span>
                                 <span class="float-end fw-bold tx-12">₹451</span>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <!-- collapse -->
               </div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="bg-white rounded p-3">
               <div class="row gx-2">
                  <p>__ Photos</p>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox=		"example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/gallery1.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/cuting_gallery.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/glow.png" "="" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/glow.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/gallery1.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/glow.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/glow.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/cuting_gallery.png" 	data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                  </div>
               </div>
            </div>
         </div>
         <!-- row / end -->
      </div>
   </div>
</div>
@endsection