@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="card-body ">
                  <!--review section- start here-->
                  <div class="border-bottom  p-3">
                     <h6 class="tx-27">Review</h6>
                     <div class="stars">
                        <form action="" class="d-flex gap-2">
                           <input class="star star-o" id="star-o" type="radio" name="star">
                           <label class="star star-o" for="star-o"></label>
                           <h2 class="text-theme">4.0</h2>
                           <div class="">
                              <p class="py-2 text-dim">out of 5</p>
                           </div>
                        </form>
                     </div>
                     <div class="row">
                        <div class="col-md-6 border-end">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Brian Baker</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-p" id="star-p" type="radio" name="star">
                                    <label class="star star-p tx-15" for="star-p"></label>
                                    <input class="star star-q" id="star-q" type="radio" name="star">
                                    <label class="star star-q tx-15" for="star-q"></label>
                                    <input class="star star-r" id="star-r" type="radio" name="star">
                                    <label class="star star-r tx-15" for="star-r"></label>
                                    <input class="star star-s" id="star-s" type="radio" name="star">
                                    <label class="star star-s tx-15" for="star-s"></label>
                                    <input class="star star-t" id="star-t" type="radio" name="star">
                                    <label class="star star-t tx-15" for="star-t"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Mona Lott</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-6" id="star-6" type="radio" name="star">
                                    <label class="star star-6 tx-15" for="star-6"></label>
                                    <input class="star star-7" id="star-7" type="radio" name="star">
                                    <label class="star star-7 tx-15" for="star-7"></label>
                                    <input class="star star-8" id="star-8" type="radio" name="star">
                                    <label class="star star-8 tx-15" for="star-8"></label>
                                    <input class="star star-9" id="star-9" type="radio" name="star">
                                    <label class="star star-9 tx-15" for="star-9"></label>
                                    <input class="star star-10" id="star-10" type="radio" name="star">
                                    <label class="star star-10 tx-15" for="star-10"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--review section- end here-->
                  <!--review section- start here-->
                  <div class="border-bottom  p-3">
                     <div class="row">
                        <div class="col-md-6 border-end">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Ivana Tinkle</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-p" id="star-p" type="radio" name="star">
                                    <label class="star star-p tx-15" for="star-p"></label>
                                    <input class="star star-q" id="star-q" type="radio" name="star">
                                    <label class="star star-q tx-15" for="star-q"></label>
                                    <input class="star star-r" id="star-r" type="radio" name="star">
                                    <label class="star star-r tx-15" for="star-r"></label>
                                    <input class="star star-s" id="star-s" type="radio" name="star">
                                    <label class="star star-s tx-15" for="star-s"></label>
                                    <input class="star star-t" id="star-t" type="radio" name="star">
                                    <label class="star star-t tx-15" for="star-t"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Anita Bath</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-6" id="star-6" type="radio" name="star">
                                    <label class="star star-6 tx-15" for="star-6"></label>
                                    <input class="star star-7" id="star-7" type="radio" name="star">
                                    <label class="star star-7 tx-15" for="star-7"></label>
                                    <input class="star star-8" id="star-8" type="radio" name="star">
                                    <label class="star star-8 tx-15" for="star-8"></label>
                                    <input class="star star-9" id="star-9" type="radio" name="star">
                                    <label class="star star-9 tx-15" for="star-9"></label>
                                    <input class="star star-10" id="star-10" type="radio" name="star">
                                    <label class="star star-10 tx-15" for="star-10"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--review section- end here-->
                  <!--review section- start here-->
                  <div class="border-bottom  p-3">
                     <div class="row">
                        <div class="col-md-6 border-end">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Eileen Dover</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-p" id="star-p" type="radio" name="star">
                                    <label class="star star-p tx-15" for="star-p"></label>
                                    <input class="star star-q" id="star-q" type="radio" name="star">
                                    <label class="star star-q tx-15" for="star-q"></label>
                                    <input class="star star-r" id="star-r" type="radio" name="star">
                                    <label class="star star-r tx-15" for="star-r"></label>
                                    <input class="star star-s" id="star-s" type="radio" name="star">
                                    <label class="star star-s tx-15" for="star-s"></label>
                                    <input class="star star-t" id="star-t" type="radio" name="star">
                                    <label class="star star-t tx-15" for="star-t"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Ann Chovey</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-6" id="star-6" type="radio" name="star">
                                    <label class="star star-6 tx-15" for="star-6"></label>
                                    <input class="star star-7" id="star-7" type="radio" name="star">
                                    <label class="star star-7 tx-15" for="star-7"></label>
                                    <input class="star star-8" id="star-8" type="radio" name="star">
                                    <label class="star star-8 tx-15" for="star-8"></label>
                                    <input class="star star-9" id="star-9" type="radio" name="star">
                                    <label class="star star-9 tx-15" for="star-9"></label>
                                    <input class="star star-10" id="star-10" type="radio" name="star">
                                    <label class="star star-10 tx-15" for="star-10"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--review section- end here-->
                  <!--review section- start here-->
                  <div class="border-bottom  p-3">
                     <div class="row">
                        <div class="col-md-6 border-end">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Justin Time</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-p" id="star-p" type="radio" name="star">
                                    <label class="star star-p tx-15" for="star-p"></label>
                                    <input class="star star-q" id="star-q" type="radio" name="star">
                                    <label class="star star-q tx-15" for="star-q"></label>
                                    <input class="star star-r" id="star-r" type="radio" name="star">
                                    <label class="star star-r tx-15" for="star-r"></label>
                                    <input class="star star-s" id="star-s" type="radio" name="star">
                                    <label class="star star-s tx-15" for="star-s"></label>
                                    <input class="star star-t" id="star-t" type="radio" name="star">
                                    <label class="star star-t tx-15" for="star-t"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                           <h6 class="card-title">Chris P. Bacon</h6>
                           <div class="">
                              <div class="stars me-2 d-flex gap-3  align-items-center ">
                                 <form action="" class="">
                                    <input class="star star-6" id="star-6" type="radio" name="star">
                                    <label class="star star-6 tx-15" for="star-6"></label>
                                    <input class="star star-7" id="star-7" type="radio" name="star">
                                    <label class="star star-7 tx-15" for="star-7"></label>
                                    <input class="star star-8" id="star-8" type="radio" name="star">
                                    <label class="star star-8 tx-15" for="star-8"></label>
                                    <input class="star star-9" id="star-9" type="radio" name="star">
                                    <label class="star star-9 tx-15" for="star-9"></label>
                                    <input class="star star-10" id="star-10" type="radio" name="star">
                                    <label class="star star-10 tx-15" for="star-10"></label>
                                 </form>
                                 <div class="">
                                    <p class="tx-12 mb-0">4</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--review section- end here-->
               </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