  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src="<?= base_url('assets/images/arowleft.svg') ?>" alt="" width="15px"> Back</button>
   
		<div class="row">
      <div class="col-md-8 my-2">
        <div class="d-flex align-items-center gap-2 mb-2">
         <img src="<?= base_url('assets/images/megaIcons/petsicon.svg') ?>" alt="" height="40px">
         <h3 class="fmon m-0 fw-bolder">Pets</h3>
        </div>
        </div>
      
    </div>
    <div class="row" id="cardList">
      <div class="col-md-12">
          
            <div class="input-group">
              <span class="input-group-text"><img src="<?= base_url('assets/images/serIcon.png') ?>" alt="" width="25px"></span>
              <input type="text" name="" id="" class="form-control form-Search search" placeholder="search">
            </div>
            <div class="my-2 subButtons d-flex align-items-center gap-3">
               <button class="btn"><img src="<?= base_url('assets/images/home.png') ?>" alt=""> Home</button>
               <button class="btn"><img src="<?= base_url('assets/images/name.png') ?>" alt=""> Name</button>
               <button class="btn"><img src="<?= base_url('assets/images/petblack.png   ') ?>" alt="" style="width:20px ;"> Breed</button>
               
              
            </div>
            </div>
            <div class="row list">
                <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                  <div class="card custCard p-3 ">
                    <div class="d-flex align-items-center gap-2">
                    <img src="<?= base_url('assets/images/pe1.png') ?>" alt="">
                      <div class="my-1">
                        <p class="fos1 m-0">Bow</p>
                        <p class="fos2 mb-0">House Number 1</p>
                      </div>
                    </div>
                    <div>
                        <p class="mb-1 fos2 breed">Breed: <span> Dutch Sheprad
                        </span></p>
                        <p class="mb-1 fos2 character">Characteristics: <span> Not Available
                        </span></p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                    <div class="card custCard p-3 ">
                      <div class="d-flex align-items-center gap-2">
                        <img src="<?= base_url('assets/images/pe2.png') ?>" alt="">
                        <div class="my-1">
                          <p class="fos1 m-0">Misse</p>
                          <p class="fos2 mb-0">House Number 1</p>
                        </div>
                      </div>
                      <div>
                       
                      <p class="mb-1 fos2 breed">Breed: <span> Dutch Sheprad
                      </span></p>
                      <p class="mb-1 fos2 character">Characteristics: <span> Not Available
                      </span></p>
                      </div>
                    </div>
                  </div>
           
              </div>
          </div>
      </div>
  </div>
    
  </main>
  <!--end main wrapper-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<script>
var option1 = {
  valueNames: ['breed', 'character']
};

var cardList = new List('cardList', option1);
</script>