<header class="app-header">
            <!-- Start::main-header-container --> 
            <div class="main-header-container container-fluid">
               <!-- Start::header-content-left --> 
               <div class="header-content-left">
                  <!-- Start::header-element --> 
                  <div class="header-element">
                     <div class="horizontal-logo"> <a href="index.html" class="header-logo"> <img src="images/desktop-logo.png" alt="logo" class="desktop-logo"> <img src="images/toggle-logo.png" alt="logo" class="toggle-logo"> <img src="images/desktop-dark.png" alt="logo" class="desktop-dark"> <img src="images/toggle-dark.png" alt="logo" class="toggle-dark"> <img src="images/desktop-white.png" alt="logo" class="desktop-white"> <img src="images/toggle-white.png" alt="logo" class="toggle-white"> </a> </div>
                  </div>
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <div class="header-element">
                     <!-- Start::header-link --> <a aria-label="Hide Sidebar" class="sidemenu-toggle header-link animated-arrow hor-toggle horizontal-navtoggle" data-bs-toggle="sidebar" href="javascript:void(0);"><span></span></a> <!-- End::header-link --> 
                  </div>
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <!-- <div class="main-header-center d-none d-lg-block  header-link">
                     <div class="input-group">
                        <div class="input-group-btn search-panel">
                           <select class="js-example-basic-single" name="state" data-trigger="">
                              <option value="s-1">Choose one</option>
                              <option value="s-2">T-Projects...</option>
                              <option value="s-3">Microsoft Project</option>
                              <option value="s-4">Risk Management</option>
                              <option value="s-5">Team Building</option>
                           </select>
                        </div>
                        <input type="text" class="form-control" id="typehead" placeholder="Search for results..." autocomplete="off"> <button class="btn btn-primary"><i class="fe fe-search" aria-hidden="true"></i></button> 
                     </div>
                     <div id="headersearch" class="header-search">
                        <div class="p-3">
                           <div class="">
                              <p class="fw-semibold text-muted mb-2 fs-13">Recent Searches</p>
                              <div class="ps-2"> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>People<span></span></a> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>Pages<span></span></a> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>Articles<span></span></a> </div>
                           </div>
                           <div class="mt-3">
                              <p class="fw-semibold text-muted mb-2 fs-13">Apps and pages</p>
                              <ul class="ps-2 list-unstyled">
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="full-calendar.html"><span><i class="bx bx-calendar me-2 fs-14 bg-primary-transparent p-2 rounded-circle "></i>Calendar</span></a> </li>
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="mail-inbox.html"><span><i class="bx bx-envelope me-2 fs-14 bg-primary-transparent p-2 rounded-circle"></i>Mail</span></a> </li>
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="buttons.html"><span><i class="bx bx-dice-1 me-2 fs-14 bg-primary-transparent p-2 rounded-circle "></i>Buttons</span></a> </li>
                              </ul>
                           </div>
                           <div class="mt-3">
                              <p class="fw-semibold text-muted mb-2 fs-13">Links</p>
                              <ul class="ps-2 list-unstyled">
                                 <li class="p-1 align-items-center text-muted mb-1 search-app"> <a href="javascript:void(0)" class="text-primary"><u>http://spruko/html/spruko.com</u></a> </li>
                                 <li class="p-1 align-items-center text-muted mb-1 search-app"> <a href="javascript:void(0)" class="text-primary"><u>http://spruko/demo/spruko.com</u></a> </li>
                              </ul>
                           </div>
                        </div>
                        <div class="py-3 border-top px-0">
                           <div class="text-center"> <a href="javascript:void(0)" class="text-primary text-decoration-underline fs-15">View all</a> </div>
                        </div>
                     </div>
                     </div> -->
                  <!-- End::header-element --> 
               </div>
               <!-- End::header-content-left --> <!-- Start::header-content-right --> 
               <div class="header-content-right">
                  <!-- Start::header-element --> 
                  <div class="header-element header-theme-mode">
                     <!-- Start::header-link|layout-setting --> 
                     <a href="javascript:void(0);" class="header-link layout-setting">
                        <span class="light-layout">
                           <!-- Start::header-link-icon --> <i class="fe fe-moon header-link-icon lh-2"></i> <!-- End::header-link-icon --> 
                        </span>
                        <span class="dark-layout">
                           <!-- Start::header-link-icon --> <i class="fe fe-sun header-link-icon lh-2"></i> <!-- End::header-link-icon --> 
                        </span>
                     </a>
                     <!-- End::header-link|layout-setting --> 
                  </div>
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <div class="header-element country-selector">
                     <!-- Start::header-link|dropdown-toggle --> 
                     <!-- <a href="javascript:void(0);" class="header-link dropdown-toggle country-Flag" data-bs-auto-close="outside" data-bs-toggle="dropdown">
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                              <circle cx="256" cy="256" r="256" fill="#f0f0f0"></circle>
                              <g fill="#0052b4">
                                 <path d="M52.92 100.142c-20.109 26.163-35.272 56.318-44.101 89.077h133.178L52.92 100.142zM503.181 189.219c-8.829-32.758-23.993-62.913-44.101-89.076l-89.075 89.076h133.176zM8.819 322.784c8.83 32.758 23.993 62.913 44.101 89.075l89.074-89.075H8.819zM411.858 52.921c-26.163-20.109-56.317-35.272-89.076-44.102v133.177l89.076-89.075zM100.142 459.079c26.163 20.109 56.318 35.272 89.076 44.102V370.005l-89.076 89.074zM189.217 8.819c-32.758 8.83-62.913 23.993-89.075 44.101l89.075 89.075V8.819zM322.783 503.181c32.758-8.83 62.913-23.993 89.075-44.101l-89.075-89.075v133.176zM370.005 322.784l89.075 89.076c20.108-26.162 35.272-56.318 44.101-89.076H370.005z"></path>
                              </g>
                              <g fill="#d80027">
                                 <path d="M509.833 222.609H289.392V2.167A258.556 258.556 0 00256 0c-11.319 0-22.461.744-33.391 2.167v220.441H2.167A258.556 258.556 0 000 256c0 11.319.744 22.461 2.167 33.391h220.441v220.442a258.35 258.35 0 0066.783 0V289.392h220.442A258.533 258.533 0 00512 256c0-11.317-.744-22.461-2.167-33.391z"></path>
                                 <path d="M322.783 322.784L437.019 437.02a256.636 256.636 0 0015.048-16.435l-97.802-97.802h-31.482v.001zM189.217 322.784h-.002L74.98 437.019a256.636 256.636 0 0016.435 15.048l97.802-97.804v-31.479zM189.217 189.219v-.002L74.981 74.98a256.636 256.636 0 00-15.048 16.435l97.803 97.803h31.481zM322.783 189.219L437.02 74.981a256.328 256.328 0 00-16.435-15.047l-97.802 97.803v31.482z"></path>
                              </g>
                           </svg>
                        </span>
                        </a>
                        <ul class="main-header-dropdown dropdown-menu dropdown-menu-end" data-popper-placement="none">
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/6.jpg" alt="img"> </span> English </a> </li>
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/5.jpg" alt="img"> </span> Spanish </a> </li>
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/1.jpg" alt="img"> </span> French </a> </li>
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/2.jpg" alt="img"> </span> German </a> </li>
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/3.jpg" alt="img"> </span> Italian </a> </li>
                        <li> <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"> <span class="avatar avatar-xs lh-1 me-2"> <img src="images/4.jpg" alt="img"> </span> Russian </a> </li>
                        </ul> -->
                  </div>
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <!-- <div class="header-element header-fullscreen  d-xl-flex d-none">
                     <a onclick="openFullscreen();" href="javascript:void(0);" class="header-link"> <i class="fe fe-maximize full-screen-open header-link-icon"></i> <i class="fe fe-minimize full-screen-close header-link-icon d-none"></i> </a>
                     </div> -->
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <!--   <div class="header-element cart-dropdown d-xl-flex d-none">
                     <a href="javascript:void(0);" class="header-link dropdown-toggle" data-bs-auto-close="outside" data-bs-toggle="dropdown">
                       <i class="fe fe-shopping-cart header-link-icon"></i>
                       <span class="badge bg-primary header-icon-badge" id="cart-icon-badge">5</span>
                     </a>
                     <div class="main-header-dropdown dropdown-menu dropdown-menu-end" data-popper-placement="none">
                       <div class="p-3">
                         <div class="d-flex align-items-center justify-content-between">
                           <p class="mb-0 fs-17 fw-semibold">Cart Items</p>
                           <span class="badge bg-primary rounded-pill" id="cart-data">5 Items</span>
                         </div>
                       </div>
                       <div>
                         <hr class="dropdown-divider">
                       </div>
                       <ul class="list-unstyled mb-0" id="header-cart-items-scroll">
                         <li class="dropdown-item">
                           <div class="d-flex align-items-center cart-dropdown-item">
                             <img src="images/1_1.jpg" alt="img" class="avatar avatar-sm br-5 me-3">
                             <div class="flex-grow-1">
                               <div class="d-flex align-items-start justify-content-between mb-0">
                                 <div class="mb-0 fs-13 text-dark fw-medium">
                                   <a href="ecommerce-cart.html" class="text-dark">Smart Watch</a>
                                 </div>
                                 <div>
                                   <span class="text-black mb-1 fw-medium">$1,299.00</span>
                                 </div>
                               </div>
                               <div class="min-w-fit-content d-flex align-items-start justify-content-between">
                                 <ul class="header-product-item d-flex">
                                   <li>Qty: 1</li>
                                   <li>Status: <span class="text-success">In Stock</span></li>
                                 </ul>
                                 <div class="ms-auto">
                                   <a href="javascript:void(0);" class="header-cart-remove float-end dropdown-item-close">
                                     <i class="ri-delete-bin-2-line"></i>
                                   </a>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </li>
                         <li class="dropdown-item">
                           <div class="d-flex align-items-center cart-dropdown-item">
                             <img src="images/3_1.jpg" alt="img" class="avatar avatar-sm br-5 me-3">
                             <div class="flex-grow-1">
                               <div class="d-flex align-items-start justify-content-between mb-0">
                                 <div class="mb-0 fs-13 text-dark fw-medium">
                                   <a href="ecommerce-cart.html" class="text-dark">Flowers</a>
                                 </div>
                                 <div>
                                   <span class="text-black mb-1 fw-medium">$179.29</span>
                                 </div>
                               </div>
                               <div class="min-w-fit-content d-flex align-items-start justify-content-between">
                                 <ul class="header-product-item">
                                   <li>Qty: 2</li>
                                   <li>
                                     <span class="badge bg-pink-transparent fs-10">Free shipping</span>
                                   </li>
                                 </ul>
                                 <div class="ms-auto">
                                   <a href="javascript:void(0);" class="header-cart-remove float-end dropdown-item-close">
                                     <i class="ri-delete-bin-2-line"></i>
                                   </a>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </li>
                         <li class="dropdown-item">
                           <div class="d-flex align-items-center cart-dropdown-item">
                             <img src="images/5_1.jpg" alt="img" class="avatar avatar-sm br-5 me-3">
                             <div class="flex-grow-1">
                               <div class="d-flex align-items-start justify-content-between mb-0">
                                 <div class="mb-0 fs-13 text-dark fw-medium">
                                   <a href="ecommerce-cart.html" class="text-dark">Running Shoes</a>
                                 </div>
                                 <div>
                                   <span class="text-black mb-1 fw-medium">$29.00</span>
                                 </div>
                               </div>
                               <div class="min-w-fit-content d-flex align-items-start justify-content-between">
                                 <ul class="header-product-item d-flex">
                                   <li>Qty: 4</li>
                                   <li>Status: <span class="text-danger">Out Stock</span></li>
                                 </ul>
                                 <div class="ms-auto">
                                   <a href="javascript:void(0);" class="header-cart-remove float-end dropdown-item-close">
                                     <i class="ri-delete-bin-2-line"></i>
                                   </a>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </li>
                         <li class="dropdown-item">
                           <div class="d-flex align-items-center cart-dropdown-item">
                             <img src="images/4_1.jpg" alt="img" class="avatar avatar-sm br-5 me-3">
                             <div class="flex-grow-1">
                               <div class="d-flex align-items-start justify-content-between mb-0">
                                 <div class="mb-0 fs-13 text-dark fw-medium">
                                   <a href="ecommerce-cart.html" class="text-dark">Furniture</a>
                                 </div>
                                 <div>
                                   <span class="text-black mb-1 fw-medium">$4,999.00</span>
                                 </div>
                               </div>
                               <div class="min-w-fit-content d-flex align-items-start justify-content-between">
                                 <ul class="header-product-item d-flex">
                                   <li>Gray</li>
                                   <li>50LB</li>
                                 </ul>
                                 <div class="ms-auto">
                                   <a href="javascript:void(0);" class="header-cart-remove float-end dropdown-item-close">
                                     <i class="ri-delete-bin-2-line"></i>
                                   </a>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </li>
                         <li class="dropdown-item">
                           <div class="d-flex align-items-center cart-dropdown-item">
                             <img src="images/6_1.jpg" alt="img" class="avatar avatar-sm br-5 me-3">
                             <div class="flex-grow-1">
                               <div class="d-flex align-items-start justify-content-between mb-0">
                                 <div class="mb-0 fs-13 text-dark fw-medium">
                                   <a href="ecommerce-cart.html" class="text-dark">Tourist Bag</a>
                                 </div>
                                 <div>
                                   <span class="text-black mb-1 fw-medium">$129.00</span>
                                 </div>
                               </div>
                               <div class="d-flex align-items-start justify-content-between">
                                 <ul class="header-product-item d-flex">
                                   <li>Qty: 1</li>
                                   <li>Status: <span class="text-success">In Stock</span></li>
                                 </ul>
                                 <div class="ms-auto">
                                   <a href="javascript:void(0);" class="header-cart-remove float-end dropdown-item-close">
                                     <i class="ri-delete-bin-2-line"></i>
                                   </a>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </li>
                       </ul>
                       <div class="p-3 empty-header-item border-top">
                         <div class="d-grid">
                           <a href="ecommerce-checkout.html" class="btn btn-primary">Proceed to checkout</a>
                         </div>
                       </div>
                       <div class="p-5 empty-item d-none">
                         <div class="text-center">
                           <span class="avatar avatar-xl avatar-rounded bg-warning-transparent">
                             <i class="ri-shopping-cart-2-line fs-2"></i>
                           </span>
                           <h6 class="fw-bold mb-1 mt-3">Your Cart is Empty</h6>
                           <span class="mb-3 fw-normal fs-13 d-block">Add some items to make me happy :)</span>
                           <a href="ecommerce-products.html" class="btn btn-primary btn-wave btn-sm m-1" data-abc="true">
                             continue shopping <i class="bi bi-arrow-right ms-1"></i>
                           </a>
                         </div>
                       </div>
                     </div>
                     </div>
                     -->
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <div class="header-element notifications-dropdown">
                     <!-- Start::header-link|dropdown-toggle --> <a href="javascript:void(0);" class="header-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" id="messageDropdown" aria-expanded="false"> <i class="fe fe-bell header-link-icon"></i> <span class="badge bg-secondary header-icon-badge pulse pulse-secondary" id="notification-icon-badge">5</span> </a> <!-- End::header-link|dropdown-toggle --> <!-- Start::main-header-dropdown --> 
                     <div class="main-header-dropdown dropdown-menu dropdown-menu-end" data-popper-placement="none">
                        <div class="p-3">
                           <div class="d-flex align-items-center justify-content-between">
                              <p class="mb-0 fs-17 fw-semibold">Notifications</p>
                              <span class="badge bg-secondary rounded-pill" id="notifiation-data">5 Unread</span> 
                           </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <ul class="list-unstyled mb-0" id="header-notification-scroll">
                           <li class="dropdown-item">
                              <div class="d-flex align-items-start">
                                 <div class="pe-2"> <span class="avatar avatar-md online bg-primary-transparent br-5"><img alt="avatar" src="images/5_2.jpg"></span> </div>
                                 <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                                    <div>
                                       <p class="mb-0"><a href="notifications-list.html" class="text-dark">Congratulate <strong>Olivia James</strong> for New template start</a></p>
                                       <span class="text-muted fw-normal fs-12 header-notification-text">Oct 15 12:32pm</span> 
                                    </div>
                                    <div> <a href="javascript:void(0);" class="min-w-fit-content text-muted me-1 dropdown-item-close1"><i class="ti ti-x fs-16"></i></a> </div>
                                 </div>
                              </div>
                           </li>
                           <li class="dropdown-item">
                              <div class="d-flex align-items-start">
                                 <div class="pe-2"> <span class="avatar avatar-md offline bg-secondary-transparent br-5"><img alt="avatar" src="images/2_1.jpg"></span> </div>
                                 <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                                    <div>
                                       <p class="mb-0"><a href="notifications-list.html" class="text-dark"><strong>Joshua Gray</strong> New Message Received</a></p>
                                       <span class="text-muted fw-normal fs-12 header-notification-text">Oct 13 02:56am</span> 
                                    </div>
                                    <div> <a href="javascript:void(0);" class="min-w-fit-content text-muted me-1 dropdown-item-close1"><i class="ti ti-x fs-16"></i></a> </div>
                                 </div>
                              </div>
                           </li>
                           <li class="dropdown-item">
                              <div class="d-flex align-items-start">
                                 <div class="pe-2"> <span class="avatar avatar-md online bg-pink-transparent br-5"><img alt="avatar" src="images/3_2.jpg"></span> </div>
                                 <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                                    <div>
                                       <p class="mb-0"><a href="notifications-list.html" class="text-dark"><strong>Elizabeth Lewis</strong> added new schedule realease</a></p>
                                       <span class="text-muted fw-normal fs-12 header-notification-text">Oct 12 10:40pm</span> 
                                    </div>
                                    <div> <a href="javascript:void(0);" class="min-w-fit-content text-muted me-1 dropdown-item-close1"><i class="ti ti-x fs-16"></i></a> </div>
                                 </div>
                              </div>
                           </li>
                           <li class="dropdown-item">
                              <div class="d-flex align-items-start">
                                 <div class="pe-2"> <span class="avatar avatar-md online bg-warning-transparent br-5"><img alt="avatar" src="images/5_2.jpg"></span> </div>
                                 <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                                    <div>
                                       <p class="mb-0 fw-normal"><a href="notifications-list.html" class="text-dark">Delivered Successful to <strong>Micky</strong> </a></p>
                                       <span class="text-muted fw-normal fs-12 header-notification-text">Order <span class="text-warning">ID: #005428</span> had been placed</span> 
                                    </div>
                                    <div> <a href="javascript:void(0);" class="min-w-fit-content text-muted me-1 dropdown-item-close1"><i class="ti ti-x fs-16"></i></a> </div>
                                 </div>
                              </div>
                           </li>
                           <li class="dropdown-item">
                              <div class="d-flex align-items-start">
                                 <div class="pe-2"> <span class="avatar avatar-md offline bg-success-transparent br-5"><img alt="avatar" src="images/1_2.jpg"></span> </div>
                                 <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                                    <div>
                                       <p class="mb-0 fw-normal"><a href="notifications-list.html" class="text-dark">You got 22 requests form <strong>Facebook</strong></a></p>
                                       <span class="text-muted fw-normal fs-12 header-notification-text">Today at 08:08pm</span> 
                                    </div>
                                    <div> <a href="javascript:void(0);" class="min-w-fit-content text-muted me-1 dropdown-item-close1"><i class="ti ti-x fs-16"></i></a> </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                        <div class="p-3 empty-header-item1 border-top">
                           <div class="d-grid"> <a href="notifications-list.html" class="btn btn-primary">View All</a> </div>
                        </div>
                        <div class="p-5 empty-item1 d-none">
                           <div class="text-center">
                              <span class="avatar avatar-xl avatar-rounded bg-secondary-transparent"> <i class="ri-notification-off-line fs-2"></i> </span> 
                              <h6 class="fw-semibold mt-3">No New Notifications</h6>
                           </div>
                        </div>
                     </div>
                     <!-- End::main-header-dropdown --> 
                  </div>
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <!--   <div class="header-element header-shortcuts-dropdown d-xl-flex d-none">
                     <a href="javascript:void(0);" class="header-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" id="notificationDropdown" aria-expanded="false">
                       <i class="fe fe-grid header-link-icon"></i>
                     </a>
                     <div class="main-header-dropdown header-shortcuts-dropdown dropdown-menu pb-0 dropdown-menu-end" aria-labelledby="notificationDropdown">
                       <div class="p-3">
                         <div class="d-flex align-items-center justify-content-between">
                           <p class="mb-0 fs-17 fw-semibold">Related Apps</p>
                         </div>
                       </div>
                       <div class="dropdown-divider mb-0"></div>
                       <div class="main-header-shortcuts p-2" id="header-shortcut-scroll">
                         <div class="row g-2">
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/figma.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Figma</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/microsoft-powerpoint.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Power Point</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/microsoft-word.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">MS Word</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/calender.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Calendar</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/sketch.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Sketch</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/google-docs.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Docs</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/google.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Google</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/translate.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Translate</span>
                               </div>
                             </a>
                           </div>
                           <div class="col-4">
                             <a href="javascript:void(0);" class="text-dark">
                               <div class="text-center p-3 related-app">
                                 <span class="avatar avatar-sm rounded-2 p-1 bg-primary-transparent">
                                   <img src="images/google-sheets.png" alt="">
                                 </span>
                                 <span class="d-block fs-12">Sheets</span>
                               </div>
                             </a>
                           </div>
                         </div>
                       </div>
                       <div class="p-3 border-top">
                         <div class="d-grid">
                           <a href="javascript:void(0);" class="btn btn-primary">View All</a>
                         </div>
                       </div>
                     </div>
                     </div>
                     -->
                  <!-- End::header-element --> <!-- Start::header-element --> 
                  <div class="header-element">
                     <!-- Start::header-link|dropdown-toggle --> 
                     <a href="javascript:void(0);" class="header-link dropdown-toggle" id="mainHeaderProfile" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                        <div class="d-flex align-items-center">
                           <div class="header-link-icon"> <img src="images/1_2.jpg" alt="img" width="32" height="32" class="rounded-circle"> </div>
                           <div class="d-none">
                              <p class="fw-semibold mb-0">Angelica</p>
                              <span class="op-7 fw-normal d-block fs-11">Web Designer</span> 
                           </div>
                        </div>
                     </a>
                     <!-- End::header-link|dropdown-toggle --> 
                     <ul class="main-header-dropdown dropdown-menu pt-0 overflow-hidden header-profile-dropdown dropdown-menu-end" aria-labelledby="mainHeaderProfile">
                        <li>
                           <div class="header-navheading border-bottom">
                              <h6 class="main-notification-title">Sonia Taylor</h6>
                              <p class="main-notification-text mb-0">Web Designer</p>
                           </div>
                        </li>
                        <li><a class="dropdown-item d-flex border-bottom" href="profile.html"><i class="fe fe-user fs-16 align-middle me-2"></i>Profile</a></li>
                        <li><a class="dropdown-item d-flex border-bottom" href="mail-inbox.html"><i class="fe fe-inbox fs-16 align-middle me-2"></i>Inbox <span class="badge bg-success ms-auto">25</span></a></li>
                        <li><a class="dropdown-item d-flex border-bottom border-block-end" href="notifications-list.html"><i class="fe fe-compass fs-16 align-middle me-2"></i>Activity</a></li>
                        <li><a class="dropdown-item d-flex border-bottom" href="settings.html"><i class="fe fe-settings fs-16 align-middle me-2"></i>Settings</a></li>
                        <li><a class="dropdown-item d-flex border-bottom" href="chat.html"><i class="fe fe-headphones fs-16 align-middle me-2"></i>Support</a></li>
                        <li><a class="dropdown-item d-flex" href="signin.html"><i class="fe fe-power fs-16 align-middle me-2"></i>Log Out</a></li>
                     </ul>
                  </div>
                  <!-- End::header-element --> 
               </div>
               <!-- End::header-content-right --> 
            </div>
            <!-- End::main-header-container --> 
         </header>
         <!-- /app-header --> <!-- Start::app-sidebar --> 
         <aside class="app-sidebar sticky" id="sidebar">
            <!-- Start::main-sidebar-header --> 
            <div class="main-sidebar-header"> <a href="index.html" class="header-logo"> <img src="images/desktop-white.png" class="desktop-white" alt="logo"> <img src="images/toggle-white.png" class="toggle-white" alt="logo"> <img src="images/desktop-logo.png" class="desktop-logo" alt="logo"> <img src="images/toggle-dark.png" class="toggle-dark" alt="logo"> <img src="images/toggle-logo.png" class="toggle-logo" alt="logo"> <img src="images/desktop-dark.png" class="desktop-dark" alt="logo"> </a> </div>
            <!-- End::main-sidebar-header --> <!-- Start::main-sidebar --> 
            <div class="main-sidebar" id="sidebar-scroll">
               <!-- Start::nav --> 
               <nav class="main-menu-container nav nav-pills flex-column sub-open">
                  <div class="slide-left" id="slide-left">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                     </svg>
                  </div>
                  <ul class="main-menu">
                     <!-- Start::slide__category --> 
                     <li class="slide__category"><span class="category-name">Dashboard</span></li>
                     <!-- End::slide__category --> <!-- Start::slide --> 
                     <li class="slide"> <a href="index.php" class="side-menu__item"> <span class="shape1"></span> <span class="shape2"></span> <i class="ti-home side-menu__icon"></i> <span class="side-menu__label">Dashboard</span> </a> </li>
                     <!-- End::slide --> <!-- Start::slide --> 
                     <li class="slide has-sub">
                        <a href="javascript:void(0);" class="side-menu__item"> <span class="shape1"></span> <span class="shape2"></span> <i class="ti-user side-menu__icon"></i> <span class="side-menu__label">Masters</span> <i class="fe fe-chevron-right side-menu__angle"></i> </a> 
                        <ul class="slide-menu child1">
                           <li class="slide"> <a href="customer.php" class="side-menu__item">Customers</a> </li>
                           <li class="slide"> <a href="services.php" class="side-menu__item">Services</a> </li>
                           <li class="slide"> <a href="company-master.php" class="side-menu__item">Company Master</a> </li>
                           <li class="slide"> <a href="branch-master.php" class="side-menu__item">Branch Master</a> </li>
                        </ul>
                     </li>
                     <!-- End::slide --> <!-- Start::slide --> 
                     <li class="slide has-sub">
                        <a href="javascript:void(0);" class="side-menu__item"> <span class="shape1"></span> <span class="shape2"></span> <i class="ti-money
                           side-menu__icon"></i> <span class="side-menu__label">Transactions</span> <i class="fe fe-chevron-right side-menu__angle"></i> </a> 
                        <ul class="slide-menu child1">
                           <!-- <li class="slide side-menu__label1"> <a href="javascript:void(0)">Work Order Management</a> </li> -->
                           <li class="slide"> <a href="ptd.php" class="side-menu__item">Work Order Management</a> </li>
                           <li class="slide"> <a href="renewalmanagement.php" class="side-menu__item">Renewal Management</a> </li>
                        </ul>
                     </li>
                     <li class="slide has-sub">
                        <a href="javascript:void(0);" class="side-menu__item"> <span class="shape1"></span> <span class="shape2"></span> <i class="ti-files side-menu__icon"></i> <span class="side-menu__label">Reports</span> <i class="fe fe-chevron-right side-menu__angle"></i> </a> 
                        <ul class="slide-menu child1">
                           <li class="slide"> <a href="renewalreport.php" class="side-menu__item">Renewal Report</a> </li>
                           <li class="slide"> <a href="crypto-dashboard.html" class="side-menu__item">Sales Report</a> </li>
                           <li class="slide"> <a href="purchasereport.php" class="side-menu__item">Purchase Register</a> </li>
                           <li class="slide"> <a href="journal.php" class="side-menu__item">Journal</a> </li>
                           <li class="slide"> <a href="cashbook.php" class="side-menu__item">Cash Book</a> </li>
                           <li class="slide"> <a href="bankbook.php" class="side-menu__item">Bank Book</a> </li>
                           <li class="slide"> <a href="ledger.php" class="side-menu__item">Ledger</a> </li>
                           <!-- <li class="slide"> <a href="subledger.php" class="side-menu__item">Sub Ledger</a> </li> -->
                        </ul>
                     </li>
                     <li class="slide"> <a href="landing.html" class="side-menu__item"> <span class="shape1"></span> <span class="shape2"></span> <i class="fa fa-sign-out side-menu__icon"></i> <span class="side-menu__label">Log Out</span> </a> </li>
                  </ul>
                  <div class="slide-right" id="slide-right">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>
                     </svg>
                  </div>
               </nav>
               <!-- End::nav --> 
            </div>
            <!-- End::main-sidebar --> 
         </aside>