   <aside class="aside-bar-wrapp">
       <a href="#" class="x-close close-bg-blue">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
               <path
                   d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" />
               </svg>
       </a>
       <div class="aside-boxes">
           <h4 class="ttl">Location</h4>
           <div class="btn-lists">
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">Abu Dhabi</a>
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">Al Ain</a>
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">Al Dhafra Region</a>
           </div>
       </div>
       <div class="aside-boxes">
           <h4 class="ttl">Grades</h4>
           <div class="btn-lists">
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">1-5</a>
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">6-9</a>
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">10-12</a>
           </div>
       </div>
       <div class="aside-boxes">
           <h4 class="ttl">Gender</h4>
           <div class="btn-lists">
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">Male</a>
               <a href="#" class="btn btn-md btn-off-white btn-fltrs">Female</a>
           </div>
       </div>
       <div class="aside-boxes ">
           <div class="btn-lists">
               <a href="#" class="btn btn-md btn-off-white simple-btn">clear</a>
               <!-- <a href="#" class="btn btn-md btn-off-white btn-fltrs">Filter</a> -->
           </div>
       </div>
   </aside>