HEX
Server: nginx/1.24.0
System: Linux DGT-WORDPRESS-VM-SERVER 6.14.0-1014-azure #14~24.04.1-Ubuntu SMP Fri Oct 3 20:52:11 UTC 2025 x86_64
User: ubuntu (1000)
PHP: 8.4.12
Disabled: NONE
Upload Files
File: /mnt/data/smarthr-co-in/demo/html/sass-landing/index2.html
<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<meta name="description" content="Smarthr - Bootstrap Admin Template">
	<meta name="keywords" content="admin, estimates, bootstrap, business, html5, responsive, Projects">
	<meta name="author" content="Dreams technologies - Bootstrap Admin Template">
	<meta name="robots" content="noindex, nofollow">
	<title>Smarthr</title>
	
	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

	<!-- Apple Touch Icon -->
	<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">

	<!-- Tabler Icon CSS -->
	<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">

	<!-- Fontawesome CSS -->
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

    <!-- Owl Carousel -->
     <link rel="stylesheet" href="assets/plugins/owlcarousel/owl.carousel.min.css">

     <!-- aos animation -->
     <link rel="stylesheet" href="assets/plugins/aos/aos.css">

     <link rel="stylesheet" href="assets/css/animate.css">

	<!-- Main CSS -->
	<link rel="stylesheet" href="assets/css/style.css">

</head>

<body>

    <!-- Header -->
    <header class="header header2">
        <div class="container">
            <div class="offcanvas-info">
                <div class="offcanvas-wrap">
                    <div class="offcanvas-detail">
                        <div class="offcanvas-head d-flex justify-content-between align-items-center mb-3">
                            <a href="index.html">
                                <img src="assets/img/logo.svg" alt="logo-img">
                            </a>
                            <div class="offcanvas-close">
                                <i class="ti ti-x"></i>
                            </div>
                        </div>
                        <div class="mobile-menu fix mb-3"></div>
                        <div class="offcanvas__contact">
                            <div class="mt-4">
                                <a href="javascript:void(0);" class="btn btn-secondary rounded btn-sm align-items-center me-1">
                                    <i class="isax isax-magicpen5 text-white me-2"></i>Request Demo <i class="ti ti-arrow-right ms-1"></i>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-primary-gradient rounded btn-sm align-items-center">
                                    <i class="isax isax-magicpen5 text-white me-2"></i>Request Demo <i class="ti ti-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offcanvas-overlay"></div>
            <div class="header-nav">
                <div class="main-menu-wrapper">
                    <div class="navbar-logo">
                        <a class="logo-link header-logo" href="#home">
                            <img src="assets/img/logo.svg" class="logo logo-display" alt="Logo">
                        </a>
                    </div>
                    <nav id="mobile-menu">
                        <ul class="main-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#features">Features</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#pricing">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#reviews">Reviews</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#contactus">Contact us</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="header-btn d-flex align-items-center">
                        <a href="javascript:void(0);" class="btn btn-secondary rounded btn-sm align-items-center">
                            <i class="isax isax-magicpen5 text-white me-2"></i>Request Demo <i class="ti ti-arrow-right ms-1"></i>
                        </a>
                        <a href="javascript:void(0);" class="btn btn-primary-gradient rounded btn-sm align-items-center">
                            <i class="isax isax-magicpen5 text-white me-2"></i>Request Demo <i class="ti ti-arrow-right ms-1"></i>
                        </a>
                        <div class="header__hamburger d-xl-none my-auto">
                            <div class="sidebar-menu">
                                <i class="ti ti-menu-deep text-primary fs-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- /Header -->

    <div data-bs-spy="scroll" data-bs-target="#scroll-nav" data-bs-offset="0" class="scrollspy-example" tabindex="0">
        
        <!-- Hero Section -->
        <section class="hero-section hero-section-two">

            <!-- background Images -->
            <div class="hero-bg4 d-none d-lg-block">
                <img src="assets/img/bg/hero-bg4.png" class="img-fluid" alt="bg">
            </div>
            <div class="hero-bg5 d-none d-lg-block">
                <img src="assets/img/bg/hero-bg-4.png" class="img-fluid" alt="bg">
            </div>
            <div class="hero-bg6 d-none d-lg-block">
                <img src="assets/img/bg/hero-bg5.png" class="img-fluid" alt="bg">
            </div>
            <!-- /background Images -->

            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-md-12">
                        <h1 class="mb-2" data-aos="fade-up" data-aos-duration="1500">
                            Future-Ready HR for a Dynamic Workplace.
                        </h1>
                        <p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300" data-aos-once="true">Prepare your HR department for the future with our adaptable HRMS, designed to meet the needs of a dynamic workplace and foster a culture of continuous improvement.</p>
                        <a href="javascript:void(0);" class="d-inline-flex align-items-center btn btn-primary" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400" data-aos-once="true">Book a Demo <i class="ti ti-arrow-right ms-1"></i></a>
                        <div class="banner-users mb-4 d-flex" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500" data-aos-once="true">
                            <div class="avatar-list-stacked avatar-group-lg me-2"> 
                                <span class="avatar avatar-lg rounded-circle border-0"><img src="assets/img/profile/avatar-06.jpg" class="img-fluid rounded-circle border border-white" alt="Img"></span>
                                <span class="avatar avatar-lg rounded-circle border-0"><img src="assets/img/profile/avatar-07.jpg" class="img-fluid rounded-circle border border-white" alt="Img"></span>
                                <span class="avatar avatar-lg rounded-circle border-0"><img src="assets/img/profile/avatar-05.jpg" class="img-fluid rounded-circle border border-white" alt="Img"></span>
                            </div>
                            <div>
                                <div class="d-flex align-items-center">
                                    <div class="d-flex align-items-center me-2">
                                        <i class="ti ti-star-filled text-primary"></i>
                                        <i class="ti ti-star-filled text-primary"></i>
                                        <i class="ti ti-star-filled text-primary"></i>
                                        <i class="ti ti-star-filled text-primary"></i>
                                        <i class="ti ti-star-filled text-primary"></i>
                                    </div>
                                    <p>5.0 Ratings</p>
                                </div>
                                <h6 class="fs-16">325k Satisfied Customers</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="banner-img d-none d-lg-block" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400" data-aos-once="true">
                            <img src="assets/img/inner-pages/hero-img-3.png" class="img-fluid" alt="Img">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Hero Section -->
        <!--hrms software -->
        <div class="container">
        <section class="hrms-software-section" id="hrms-software-section">
            <img src="assets/img/bg/hrms-software-bg1.png" alt="img" class="img-fluid hrms-software-bg1 d-none d-lg-flex">
            <img src="assets/img/bg/hrms-software-bg2.png" alt="img" class="img-fluid hrms-software-bg2 d-none d-lg-flex">
            <img src="assets/img/bg/hrms-software-bg1.png" alt="img" class="img-fluid hrms-software-bg3 d-none d-lg-flex">
            <div class="container">
              <h2 data-aos="fade-up" data-aos-duration="1500" data-aos-once="true">Developing company values for a<br class="d-none d-lg-block"> HRMS Software</h2>
              <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="card" data-aos="flip-left" data-aos-duration="1500" data-aos-once="true">
                        <div class="card-body">
                            <span class="hrms-software-icon">
                                <i class="ti ti-arrow-big-up-line-filled text-primary fs-22"></i>
                            </span>
                            <h3>Scalability & Performance</h3>
                            <p class="text-gray-5 text-truncate line-clamb-3">Utilize cloud hosting for scalability, ensuring can grow with your user base.Ensure that the system can handle varying loads</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="card" data-aos="flip-left" data-aos-duration="1500" data-aos-delay="300" data-aos-once="true">
                        <div class="card-body">
                            <span class="hrms-software-icon">
                                <i class="ti ti-aspect-ratio-filled text-primary fs-22"></i>
                            </span>
                            <h3>Continuous Improvement</h3>
                            <p class="text-gray-5 text-truncate line-clamb-3">Using agile methodologies to iteratively improve the platform based on user feedback and changing needs.</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="card" data-aos="flip-left" data-aos-duration="1500" data-aos-delay="400" data-aos-once="true">
                        <div class="card-body">
                            <span class="hrms-software-icon">
                                <i class="ti ti-lock-square-rounded-filled text-primary fs-22"></i>
                            </span>
                            <h3>Security & Compliance</h3>
                            <p class="text-gray-5 text-truncate line-clamb-3">Ensure that users have access only to the information relevant to their roles.Tools for tracking compliance </p>
                        </div>

                    </div>
                </div>
      
              </div>
            </div>
        </section>
        <div class="support-section">
            <div class="horizontal-slide" data-direction="left" data-speed="slow" data-animated="true">
                <div class="slide-list d-flex">
                    <div class="support-item">
                        <img src="assets/img/icon/brand1.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand2.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand3.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand4.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand5.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand6.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand7.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand1.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item">
                        <img src="assets/img/icon/brand2.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand3.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand4.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand5.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand6.svg" alt="img" class="brand-logos">
                    </div>
                    <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand7.svg" alt="img" class="brand-logos">
                    </div>
                <div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand1.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand2.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand3.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand4.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand5.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand6.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand7.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand1.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand2.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand3.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand4.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand5.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand6.svg" alt="img" class="brand-logos">
                    </div><div class="support-item" aria-hidden="true">
                        <img src="assets/img/icon/brand7.svg" alt="img" class="brand-logos">
                    </div></div>
            </div>
        </div>
       </div>
        <!--hrms software -->
        <!-- essential features -->
         <section class="essential-features-section" id="essential-features-section">
            <img src="./assets/img/bg/essential-feature-bg.png" alt="img" class="essential-feature-bg">
            <div class="container">
                <div class="row align-items-center">
                <h2 data-aos="fade-up" data-aos-duration="1500" data-aos-once="true">Essential Features for HRMS SaaS Solutions</h2>
                <div class="col-lg-3">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation" data-aos="fade-up" data-aos-duration="1500" data-aos-once="true">
                      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Clients</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" data-aos-once="true" role="presentation">
                      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">CRMS</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" role="presentation">
                      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Projects Management</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab" aria-controls="chat" aria-selected="false">Chats & Calls</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="audiocall-tab" data-bs-toggle="tab" data-bs-target="#audiocall" type="button" role="tab" aria-controls="audiocall" aria-selected="false">Audio Call System</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="calendar-tab" data-bs-toggle="tab" data-bs-target="#calendar" type="button" role="tab" aria-controls="calendar" aria-selected="false">Calendar Module</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="payroll-tab" data-bs-toggle="tab" data-bs-target="#payroll" type="button" role="tab" aria-controls="payroll" aria-selected="false">Payroll Management</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab" aria-controls="events" aria-selected="false">Events Module</button>
                    </li>
                    <li class="nav-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1100" data-aos-once="true" role="presentation">
                        <button class="nav-link" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin" type="button" role="tab" aria-controls="admin" aria-selected="false">Super Admin</button>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-9">
                  <div class="tab-content" id="myTabContent" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="400" data-aos-once="true">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <img src="./assets/img/inner-pages/essential-features-1.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <img src="./assets/img/inner-pages/essential-features-2.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <img src="./assets/img/inner-pages/essential-features-3.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="chat" role="tabpanel" aria-labelledby="chat-tab">
                        <img src="./assets/img/inner-pages/essential-features-4.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="audiocall" role="tabpanel" aria-labelledby="audiocall-tab">
                        <img src="./assets/img/inner-pages/essential-features-5.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="calendar" role="tabpanel" aria-labelledby="calendar-tab">
                        <img src="./assets/img/inner-pages/essential-features-5.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="payroll" role="tabpanel" aria-labelledby="payroll-tab">
                        <img src="./assets/img/inner-pages/essential-features-6.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="events" role="tabpanel" aria-labelledby="events-tab">
                        <img src="./assets/img/inner-pages/essential-features-6.png" alt="img">
                    </div>
                    <div class="tab-pane fade" id="admin" role="tabpanel" aria-labelledby="admin-tab">
                        <img src="./assets/img/inner-pages/essential-features-7.png" alt="img">
                    </div>
                  </div>
                </div>
                  
            </div>
        </div>
         </section>
        <!-- essential features -->
         <!-- features -->
          <section class="features-section" id="features">
            <img src="./assets/img/bg/burst-circle-1.png" alt="img" class="features-bg d-none d-lg-block">
            <img src="./assets/img/bg/features-bg.png" alt="img" class="features-bg2 d-none d-lg-block">
            <div class="container">
            <h2 class="fs-32 mb-4" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">Features that Help you build better</h2>
            <div class="owl-carousel features-slider">
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                               <div class="row align-items-center">
                                <div class="col-lg-6 mt-4 mb-4">
                                 <p class="text-secondary mb-2 d-flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" data-aos-once="true"><i class="ti me-2 ti-report text-secondary fs-22"></i>Analytics & Reporting</p>
                                 <h3 class="fs-28 text-gray-9 mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true">Build Your Team, Grow Your Excellence</h3>
                                <p class="text-gray-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" data-aos-once="true">Streamline HR processes and empower your team with our products. Facilitate manage employee data, and more in one platform.</p>
                                <ul>
                                    <li class="mb-2" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="true"><p class="d-flex text-gray-6 fs-14"><i class="ti ti-circle-check-filled text-success fs-22 me-2"></i>Enables HR professionals to make informed decisions based on real-time data insights.</p></li>
                                    <li class="mb-2" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800" data-aos-once="true"><p class="d-flex text-gray-6 fs-14"><i class="ti ti-circle-check-filled text-success fs-22 me-2"></i>Helps track key performance indicators measure the effectiveness of HR strategies.</p></li>
                                    <li class="mb-2" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="true"><p class="d-flex text-gray-6 fs-14"><i class="ti ti-circle-check-filled text-success fs-22 me-2"></i>Assists in monitoring compliance with regulations and identifying potential risks.</p></li>
                                    <li class="mb-2" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" data-aos-once="true"><p class="d-flex text-gray-6 fs-14"><i class="ti ti-circle-check-filled text-success fs-22 me-2"></i>Graphs, and heat maps to present data visually, making it easier to trends and patterns.</p></li>
                                    <li class="mb-2" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1100" data-aos-once="true"><p class="d-flex text-gray-6 fs-14"><i class="ti ti-circle-check-filled text-success fs-22 me-2"></i>Reports for essential HR metrics, turnover rates, employee demographics, performances.</p></li>
                                </ul>
                               <a href="#" class="d-inline-flex align-items-center btn btn-primary mt-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1200" data-aos-once="true">Book a Demo<i class="ti ti-arrow-right ms-1"></i></a>
                            </div>
                                <div class="col-lg-6">
                                    <div class="d-flex features-image" data-aos="zoom-in" data-aos-duration="1500" data-aos-once="true">
                                       <img src="./assets/img/inner-pages/feature-04.png" alt="img"> 
                                    </div>
                                </div>
                               </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                               <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="d-flex features-image">
                                       <img src="./assets/img/inner-pages/feature-05.png" alt="img"> 
                                    </div>
                                </div>
                                <div class="col-lg-6 mt-4 mb-4">
                                    <p class="text-gray-9 mb-2 d-flex"><i class="ti me-2 ti-report text-gray-9  fs-22"></i>Employee & Payroll</p>
                                    <h3 class="fs-28 text-gray-9 mb-3">Employee & Payroll<br>  Management</h3>
                                   <p class="text-gray-5 mb-1">Centralized database for employee profiles, including personal details, roles, &  performance records.</p>
                                  <a href="#" class="d-inline-flex align-items-center btn btn-primary mt-3">Book a Demo<i class="ti ti-arrow-right ms-1"></i></a>
                               </div>
                               </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                               <div class="row align-items-center">
                                <div class="col-lg-6 mt-4 mb-4">
                                    <p class="text-gray-9 mb-2 d-flex"><i class="ti me-2 ti-report text-gray-9  fs-22"></i>Time and Attendance Tracking</p>
                                    <h3 class="fs-28 text-gray-9 mb-3">Clock-in/out Functionality, Leaves & Report Management</h3>
                                   <p class="text-gray-5 mb-1">Dashboards and reports to track key metrics like turnover rates, hiring statistics, and employee performance.</p>
                                  <a href="#" class="d-inline-flex align-items-center btn btn-primary mt-3">Book a Demo<i class="ti ti-arrow-right ms-1"></i></a>
                               </div>
                               <div class="col-lg-6">
                                <div class="d-flex features-image">
                                   <img src="./assets/img/inner-pages/feature-06.png" alt="img"> 
                                </div>
                            </div>
                               </div>

                        </div>
                    </div>
                </div>
            </div>
           </div>
          </section>
          <!-- features -->
           <!-- counter -->
           <div class="container">
            <section class="counter-section" id="counter-section">
                <img src="./assets/img/bg/Looper-1.png" alt="img " class="counter-bg d-none d-lg-block">
                    <div class="row justify-content-center">
                      <div class="col-sm-6 col-lg-3 col-12 mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">
                        <h2 class="text-white fs-28"><span class="counterUp">80</span>+</h2>
                        <p class="text-white fs-14">Companies  Globally</p>
                      </div>
                      <div class="col-sm-6 col-lg-3 col-12 mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true">
                        <h2 class="text-white fs-28"><span class="counterUp">4580</span>+</h2>
                        <p class="text-white fs-14">Employee Database</p>
                      </div>
                      <div class="col-sm-6 col-lg-3 col-12 mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="350" data-aos-once="true">
                        <h2 class="text-white fs-28"><span class="counterUp">99</span>+</h2>
                        <p class="text-white fs-14">Turnaround time</p>
                      </div>
                      <div class="col-sm-6 col-lg-3 col-12 mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" data-aos-once="true">
                        <h2 class="text-white fs-28"><span class="counterUp">49</span>+</h2>
                        <p class="text-white fs-14">Satisfied Clients</p>
                      </div>
                    </div>
            </section>
        </div>
        <!-- counter -->
         <!-- testimonials -->
          <section class="testimonials-section2" id="reviews">
            <img src="./assets/img/bg/burst-star.png" alt="img" class="testimonials-bg d-none d-lg-block">
            <img src="./assets/img/bg/burst-pucker-2.png" alt="img" class="testimonials-bg2 d-none d-lg-block">
            <div class="container">
             <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">What our customer's say about our company</h2>
             <div class="owl-carousel testimonials-slider mt-4">
                <div class="item">
                    <div class="card" data-aos="flip-left" data-aos-duration="1000" data-aos-once="true">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                          <div class="d-flex align-items-center flex-wrap">
                            <img src="./assets/img/icon/brand1.svg" alt="img">
                          </div>
                          <div class="d-flex align-items-center">
                            <img src="./assets/img/icon/quote-primary.png" alt="img">
                          </div>
                        </div>
                        <p class="text-gray-5 pb-3"><i>“ The platform is intuitive and easy to navigate, which reduces the learning curve for new users.Includes all essential modules like payroll, performance management, and employee self-service. “</i> </p>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="avatar avatar-lg rounded-circle me-2">
                                    <img src="assets/img/profile/avatar-06.jpg" alt="img" class="img-fluid rounded-circle me-2">
                                </span>
                                <div>
                                    <p class="text-gray-9 fw-medium mb-0 p-0 border-0">Robert Frost</p>
                                    <p class="text-gray-5 fs-14 mb-0 p-0 border-0">Lumessa, Administrator</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary"></i></span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                          <div class="d-flex align-items-center flex-wrap">
                            <img src="./assets/img/icon/brand2.svg" alt="img">
                          </div>
                          <div class="d-flex align-items-center">
                            <img src="./assets/img/icon/quote-primary.png" alt="img">
                          </div>
                        </div>
                        <p class="text-gray-5 pb-3"><i>“ The platform’s reporting tools give us all the data we need, from attendance to team metrics, in one place. It’s drastically cut down the time we spend preparing reports“ </i> </p>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="avatar avatar-lg rounded-circle me-2">
                                    <img src="assets/img/profile/avatar-08.jpg" alt="img" class="img-fluid rounded-circle me-2">
                                </span>
                                <div>
                                    <p class="text-gray-9 fw-medium mb-0 p-0 border-0">Maria Zeneath</p>
                                    <p class="text-gray-5 fs-14 mb-0 p-0 border-0">Cybrix, CEO</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary"></i></span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="350" data-aos-once="true">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                          <div class="d-flex align-items-center flex-wrap">
                            <img src="./assets/img/icon/brand6.svg" alt="img">
                          </div>
                          <div class="d-flex align-items-center">
                            <img src="./assets/img/icon/quote-primary.png" alt="img">
                          </div>
                        </div>
                        <p class="text-gray-5 pb-3"><i>“ Our hiring process is faster and more organized with this platform. From job listings to final onboarding, each step is clear and seamless, helping us secure top talent efficiently “ </i> </p>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="avatar avatar-lg rounded-circle me-2">
                                    <img src="assets/img/profile/avatar-05.jpg" alt="img" class="img-fluid rounded-circle me-2">
                                </span>
                                <div>
                                    <p class="text-gray-9 fw-medium mb-0 p-0 border-0">Andrew Fetcher</p>
                                    <p class="text-gray-5 fs-14 mb-0 p-0 border-0">Zenitiia, Product Manager</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary"></i></span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="400" data-aos-once="true">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                          <div class="d-flex align-items-center flex-wrap">
                            <img src="./assets/img/icon/brand6.svg" alt="img">
                          </div>
                          <div class="d-flex align-items-center">
                            <img src="./assets/img/icon/quote-primary.png" alt="img">
                          </div>
                        </div>
                        <p class="text-gray-5 pb-3"><i>“ The platform’s reporting tools give us all the data we need, from attendance to team metrics, in one place. It’s drastically cut down the time we spend preparing reports“ </i> </p>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="avatar avatar-lg rounded-circle me-2">
                                    <img src="assets/img/profile/avatar-05.jpg" alt="img" class="img-fluid rounded-circle me-2">
                                </span>
                                <div>
                                    <p class="text-gray-9 fw-medium mb-0 p-0 border-0">Andrew Fetcher</p>
                                    <p class="text-gray-5 fs-14 mb-0 p-0 border-0">Zenitiia, Product Manager</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary me-1"></i></span>
                                <span><i class="ti ti-star-filled text-secondary"></i></span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            </div>
          </section>
          <!-- testimonials -->
           <!-- price plans -->
            <section class="price-plans-section" id="pricing">
                <img class="price-plan-bg d-none d-lg-flex" alt="img" src="./assets/img/bg/features-bg.png">
                <img class="price-plan-bg2 d-none d-lg-flex" alt="img" src="./assets/img/bg/burst-circle-1.png">
                <img class="price-plan-bg3 d-none d-lg-flex" data-aos="fade-right" data-aos-duration="1000" data-aos-once="true" alt="img" src="./assets/img/bg/burst-circle-1.png">
                <div class="container">
                <div class="d-md-flex justify-content-between align-items-center price-plan-top">
                <h2 class="mb-4 text-gray-9 flex-wrap d-flex me-2" data-aos="fade-right" data-aos-duration="1000" data-aos-once="true">Choose the right plan for your business</h2>
                <ul class="nav nav-pills mb-3 price-plan-toggle" data-aos="fade-left" data-aos-duration="1000" data-aos-once="true" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button class="nav-link active fs-16 fw-medium" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Monthly</button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button class="nav-link fs-16 fw-medium" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Yearly</button>
                    </li>
                </ul>
                </div>
                  <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">                  
                        <div class="row justify-content-center">
                            <div class="col-md-6 col-lg-4 d-flex">
                               <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-once="true">
                                <div class="card-body">
                                    <div class="price">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                            <p class="fs-20 d-flex align-items-center">Basic</p>
                                        </div>
                                        <div class="d-flex pt-2 mt-4 border-top">
                                        <h2 class="fs-48 text-dark d-flex align-items-center me-2">$109</h2>
                                        <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                        <ul>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>01 users allowed per subscription</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>01 user permissions</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Clock-in/clock-out functionality</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Monitor key Monthly Reports</li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                </div>
                               </div>
                            </div>
                            <div class="col-md-6 col-lg-4 d-flex">
                                <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true">
                                 <div class="card-body">
                                     <div class="price">
                                         <div class="d-flex align-items-center mb-2">
                                             <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                             <p class="fs-20 d-flex align-items-center">Essential</p>
                                         </div>
                                         <div class="d-flex pt-2 mt-4 border-top">
                                         <h2 class="fs-48 text-dark d-flex align-items-center me-2">$256</h2>
                                         <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                         </div>
                                     </div>
                                     <div class="mt-3">
                                         <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                         <ul>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>5 users allowed per subscription</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>25 user permissions</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Clock-in/clock-out functionality</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Monitor key Monthly Reports</li>
                                         </ul>
                                     </div>
                                     <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                 </div>
                                </div>
                             </div>
                             <div class="col-md-6 col-lg-4 d-flex">
                                <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="350" data-aos-once="true">
                                 <div class="card-body">
                                     <div class="price">
                                         <div class="d-flex align-items-center mb-2">
                                             <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                             <p class="fs-20 d-flex align-items-center">Enterprise</p>
                                         </div>
                                         <div class="d-flex pt-2 mt-4 border-top">
                                         <h2 class="fs-48 text-dark d-flex align-items-center me-2">$559</h2>
                                         <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                         </div>
                                     </div>
                                     <div class="mt-3">
                                         <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                         <ul>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>15 users allowed per subscription</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>50 user permissions</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Clock-in/clock-out functionality</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Monitor key Monthly Reports</li>
                                         </ul>
                                     </div>
                                     <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                 </div>
                                </div>
                             </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div class="row justify-content-center">
                            <div class="col-md-6 col-lg-4 d-flex">
                               <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-once="true">
                                <div class="card-body">
                                    <div class="price">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                            <p class="fs-20 d-flex align-items-center">Basic</p>
                                        </div>
                                        <div class="d-flex pt-2 mt-4 border-top">
                                        <h2 class="fs-48 text-dark d-flex align-items-center me-2">$109</h2>
                                        <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                        <ul>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>01 users allowed per subscription</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>01 user permissions</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Clock-in/clock-out functionality</li>
                                            <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Monitor key Monthly Reports</li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                </div>
                               </div>
                            </div>
                            <div class="col-md-6 col-lg-4 d-flex">
                                <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true">
                                 <div class="card-body">
                                     <div class="price">
                                         <div class="d-flex align-items-center mb-2">
                                             <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                             <p class="fs-20 d-flex align-items-center">Essential</p>
                                         </div>
                                         <div class="d-flex pt-2 mt-4 border-top">
                                         <h2 class="fs-48 text-dark d-flex align-items-center me-2">$256</h2>
                                         <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                         </div>
                                     </div>
                                     <div class="mt-3">
                                         <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                         <ul>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>5 users allowed per subscription</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>25 user permissions</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Clock-in/clock-out functionality</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-x fw-semi-bold me-2 text-danger fs-16"></i>Monitor key Monthly Reports</li>
                                         </ul>
                                     </div>
                                     <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                 </div>
                                </div>
                             </div>
                             <div class="col-md-6 col-lg-4 d-flex">
                                <div class="card shadow-none flex-fill" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="350" data-aos-once="true">
                                 <div class="card-body">
                                     <div class="price">
                                         <div class="d-flex align-items-center mb-2">
                                             <span class="d-flex align-items-center flex-wrap price-icon me-3"><i class="ti ti-arrow-big-up-line-filled fs-20"></i></span>
                                             <p class="fs-20 d-flex align-items-center">Enterprise</p>
                                         </div>
                                         <div class="d-flex pt-2 mt-4 border-top">
                                         <h2 class="fs-48 text-dark d-flex align-items-center me-2">$559</h2>
                                         <p class="text-gray-5 fs-14 d-flex align-items-center">/ Per Month</p>
                                         </div>
                                     </div>
                                     <div class="mt-3">
                                         <p class="fw-medium mb-2 text-gray-9">Includes :</p>
                                         <ul>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Centralized employee database</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>15 users allowed per subscription</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>50 user permissions</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Clock-in/clock-out functionality</li>
                                             <li class="d-flex align-items-center fs-14 text-gray-5 mb-2"><i class="ti ti-check fw-semi-bold me-2 text-success fs-16"></i>Monitor key Monthly Reports</li>
                                         </ul>
                                     </div>
                                     <a href="#" class="btn btn-light d-flex fs-16 align-items-center justify-content-center mt-3">Get Started</a>
                                 </div>
                                </div>
                             </div>
                        </div>
                    </div>
                  </div>
              </div>
            </section>
           <!-- price plans -->
            <!-- faq -->
             <div class="container">
                <section class="faq-section2 border" id="faq-section2">
                    <img class="faq-bg d-none d-lg-flex" alt="img" src="./assets/img/bg/features-bg.png">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-4 mt-3 mb-3">
                             <h2 class="mb-3" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">See Common Question and Answer</h2>
                             <p class="text-gray-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true">This FAQ section can help potential users better understand your SaaS HRMS and address their common concerns.</p>
                            <a class="btn btn-primary-gradient d-inline-flex align-items-center" data-aos="fade-up" data-aos-delay="350" data-aos-duration="1000" data-aos-once="true" href="#">Book a Demo <i class="ti ti-arrow-right ms-1"></i></a>
                            </div>
                            <div class="col-md-8">
                                <div class="accordion accordion-customicon1 accordions-items-seperate" id="accordioncustomicon1Example">
                                <div class="accordion-item" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1One">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1One" aria-expanded="false" aria-controls="collapsecustomicon1One">
                                            Q. How does the subscription model work?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1One" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1One" data-bs-parent="#accordioncustomicon1Example" style="">
                                        <div class="accordion-body">
                                            <p>Our subscription model lets you choose a package and duration (monthly or yearly) that fits your needs. Manage subscriptions, upgrades, and billing easily through the super admin module.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1Two">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1Two" aria-expanded="false" aria-controls="collapsecustomicon1Two">
                                            Q. Is there a free trial available?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1Two" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1Two" data-bs-parent="#accordioncustomicon1Example">
                                        <div class="accordion-body">
                                            <p>No, we don’t offer a free trial, but you can explore our features through detailed demos and documentation before subscribing.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item" data-aos="fade-up" data-aos-delay="350" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1Three">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1Three" aria-expanded="false" aria-controls="collapsecustomicon1Three">
                                            Q. What features are included in the HRMS?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1Three" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1Three" data-bs-parent="#accordioncustomicon1Example">
                                        <div class="accordion-body">
                                            <p>Our HRMS offers features like employee management, payroll processing, leave tracking, recruitment, expense management, and detailed reporting to streamline HR operations.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1Four">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1Four" aria-expanded="false" aria-controls="collapsecustomicon1Four">
                                            Q. How secure is my data?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1Four" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1Four" data-bs-parent="#accordioncustomicon1Example">
                                        <div class="accordion-body">
                                            <p>Your data is highly secure with us, protected by advanced encryption, regular backups, and strict access controls to ensure confidentiality and safety.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item" data-aos="fade-up" data-aos-delay="450" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1Five">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1Five" aria-expanded="false" aria-controls="collapsecustomicon1Five">
                                            Q. How does the subscription model work?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1Five" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1Five" data-bs-parent="#accordioncustomicon1Example">
                                        <div class="accordion-body">
                                            <p>No, the HRMS is designed to scale with your business, enabling you to manage an unlimited number of employees seamlessly, regardless of your organization’s growth or size.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                                    <h2 class="accordion-header" id="headingcustomicon1Six">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecustomicon1Six" aria-expanded="false" aria-controls="collapsecustomicon1Six">
                                            Q. How does the subscription model work?
                                        </button>
                                    </h2>
                                    <div id="collapsecustomicon1Six" class="accordion-collapse collapse" aria-labelledby="headingcustomicon1Six" data-bs-parent="#accordioncustomicon1Example">
                                        <div class="accordion-body">
                                            <p>We provide regular system updates to ensure you always have access to the latest features, performance improvements, and enhanced security measures, keeping your HRMS reliable and up to date.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </section>
             </div>
            <!-- faq -->
             <!-- blog -->
              <section class="blog-section-2" id="blog-section-2s">
                <div class="container">
                    <h2 class="text-gray-9" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">Our recent News & Insights</h2>
                    <div class="owl-carousel blog-slider mt-4">
                        <div class="item">
                            <div class="card" data-aos="flip-left" data-aos-duration="1000" data-aos-once="true">
                            <div class="card-body">
                                <span>
                                    <img src="assets/img/blogs/blog-01.jpg" class="blog-imgs img-fluid rounded-top" alt="Img">
                                    <span class="badge text-gray-9 p-2 fs-16 fw-medium">
                                     Marketing
                                    </span>
                                </span>
                                <div class="blog-content mt-3">
                                <h3 class="text-gray-9 mb-2 text-truncate line-clamb-2">Top 10 Features Every HR Admin Template Should Have</h3>
                                <ul class="d-flex">
                                <li class="text-gray-5 fs-14">Justin Langard</li>
                                <li class="text-gray-5 fs-14">Aug 30, 2025</li>
                                </ul>
                                <p class="text-gray-6 text-truncate line-clamb-2 mt-2">Discuss essential features like employee management, payroll processing, leave tracking...</p>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="card" data-aos="flip-left" data-aos-delay="300" data-aos-duration="1000" data-aos-once="true">
                            <div class="card-body">
                                <span>
                                    <img src="assets/img/blogs/blog-03.jpg" class="blog-imgs img-fluid rounded-top" alt="Img">
                                    <span class="badge text-gray-9 p-2 fs-16 fw-medium">
                                    Onboarding
                                    </span>
                                </span>
                                <div class="blog-content mt-3">
                                <h3 class="text-gray-9 mb-2 text-truncate line-clamb-2">Transforming Onboarding: Why the Right HR Platform is Essential for New Hires</h3>
                                <ul class="d-flex">
                                <li class="text-gray-5 fs-14">Kassandra Perry</li>
                                <li class="text-gray-5 fs-14">Jul 18, 2025</li>
                                </ul>
                                <p class="text-gray-6 text-truncate line-clamb-2 mt-2">Explain how a streamlined onboarding process can improve new hire satisfaction and retention.</p>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="card" data-aos="flip-left" data-aos-delay="350" data-aos-duration="1000" data-aos-once="true">
                            <div class="card-body">
                                <span>
                                    <img src="assets/img/blogs/blog-02.jpg" class="blog-imgs img-fluid rounded-top" alt="Img">
                                    <span class="badge text-gray-9 p-2 fs-16 fw-medium">
                                    Management
                                    </span>
                                </span>
                                <div class="blog-content mt-3">
                                <h3 class="text-gray-9 mb-2 text-truncate line-clamb-2">Enhancing Compliance and Document Security with an HR Admin Platform</h3>
                                <ul class="d-flex">
                                <li class="text-gray-5 fs-14">Michael Aldridge</li>
                                <li class="text-gray-5 fs-14">Jun 26, 2025</li>
                                </ul>
                                <p class="text-gray-6 text-truncate line-clamb-2 mt-2">Discuss how the platform helps HR teams manage compliance and data security more effectively.</p>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="free-trial mt-3" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true" id="contactus">
                        <img src="./assets/img/bg/topology-1.png" alt="img" class="d-none d-lg-flex free-trial-bg">
                        <img src="./assets/img/bg/topology-2.png" alt="img" class="d-none d-lg-flex free-trial-bg2">
                        <div class="row align-items-center">
                            <div class="col-md-5">
                              <h2 class="text-white mb-2">Start your free trial now!</h2>
                              <p class="text-white mb-2">By creating a custom Web Page  for your hrms and get updated with our Impovement</p>
                            </div>
                            <div class="col-md-7">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control me-2 border-0" placeholder="Enter Email Address">
                                    <a href="#" class="btn btn-dark d-flex align-items-center justify-content-center">Submit</a>
                                </div>
                                <ul class="d-sm-flex justify-content-center justify-content-md-start">
                                    <li class="d-flex align-items-center fs-14 text-light mb-2 me-4 justify-content-center"><img src="./assets/img/icon/check.png" alt="img" class="me-2 check-img">No Credit Card Required</li>
                                    <li class="d-flex align-items-center fs-14 text-light mb-2 justify-content-center"><img src="./assets/img/icon/check.png" alt="img" class="me-2 check-img">Free 15 days free trials</li>
                                </ul>
                            </div>
                        </div>
                      </div>
                </div>

              </section>
             <!-- blog -->

            <!-- Footer -->
             <footer class="footer-one footer-two">
                <img src="./assets/img/bg/topology-3.png" alt="img" class="d-none d-lg-flex footer-bg">
                <img src="./assets/img/bg/topology-4.png" alt="img" class="d-none d-lg-flex footer-bg2">
                <div class="container">
                    <div class="footer-top row align-items-center row-gap-3">
                        <div class="col-md-4" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">
                            <span>
                                <img src="assets/img/logo.svg" alt="">
                            </span>
                            <p class="my-4">Prepare your HR department for the future with our adaptable HRMS, designed to meet the needs of a dynamic workplace and foster a culture of continuous improvement.</p>
                            <div class="footer-icon d-flex align-items-center">
                                <a href="javascript:void(0);" class="avatar avatar-md rounded-circle me-2"><i class="ti ti-brand-facebook fs-16"></i></a>
                                <a href="javascript:void(0);" class="avatar avatar-md rounded-circle me-2"><i class="ti ti-brand-x fs-16"></i></a>
                                <a href="javascript:void(0);" class="avatar avatar-md rounded-circle me-2"><i class="ti ti-brand-instagram fs-16"></i></a>
                                <a href="javascript:void(0);" class="avatar avatar-md rounded-circle me-2"><i class="ti ti-brand-linkedin fs-16"></i></a>
                                <a href="javascript:void(0);" class="avatar avatar-md rounded-circle"><i class="ti ti-brand-pinterest fs-16"></i></a>
                            </div>
                        </div>
                        <div class="col-md-8 ">
                            <div class="footer-links row row-gap-3" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000" data-aos-once="true">
                                <div class="col-md-3 col-sm-3">
                                    <h5 class="text-gray-9">Useful Pages</h5>
                                    <ul>
                                        <li><a href="javascript:void(0);">Products</a></li>
                                        <li><a href="javascript:void(0);">Features</a></li>
                                        <li><a href="javascript:void(0);">Integrations</a></li>
                                        <li><a href="javascript:void(0);">Pricing</a></li>
                                        <li><a href="javascript:void(0);">Contact</a> </li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-sm-3" data-aos="fade-up" data-aos-delay="350" data-aos-duration="1000" data-aos-once="true">
                                    <h5 class="text-gray-9">Company</h5>
                                    <ul>
                                        <li><a href="javascript:void(0);">About</a></li>
                                        <li><a href="javascript:void(0);">Blogs</a></li>
                                        <li><a href="javascript:void(0);">Blogs Details</a></li>
                                        <li><a href="javascript:void(0);">Testimonials</a></li>
                                        <li><a href="javascript:void(0);">Log In</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-sm-3" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000" data-aos-once="true">
                                    <h5 class="text-gray-9">Quick Links</h5>
                                    <ul>
                                        <li><a href="javascript:void(0);">Services</a></li>
                                        <li><a href="javascript:void(0);">Careers</a></li>
                                        <li><a href="javascript:void(0);">Clients</a></li>
                                        <li><a href="javascript:void(0);">Resources</a></li>
                                        <li><a href="javascript:void(0);">Enquiry </a> </li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-sm-3" data-aos="fade-up" data-aos-delay="450" data-aos-duration="1000" data-aos-once="true">
                                    <h5 class="text-gray-9">Modules</h5>
                                    <ul>
                                        <li><a href="javascript:void(0);">Payment gateways</a></li>
                                        <li><a href="javascript:void(0);">Applications</a></li>
                                        <li><a href="javascript:void(0);">Management</a></li>
                                        <li><a href="javascript:void(0);">FAQ</a></li>
                                        <li><a href="javascript:void(0);">Features</a> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="container">
                    <div class="row justify-content-between align-items-center flex-wrap row-gap-3">
                        <div class="col-md-6">
                            <p class="copy-right text-gray-9">Copyright @ 2025 SmartHR. All Rights Reserved</p>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center justify-content-md-end justify-content-center">
                                <a href="javascript:void(0);" class="mb-0 me-3 text-gray-9">Refund Policy</a>
                                <a href="javascript:void(0);" class="mb-0 me-3 text-gray-9">Privacy Policy</a>
                                <a href="javascript:void(0);" class="text-gray-9">Terms & Conditions</a>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
             </footer>
             <!-- /Footer -->

    </div>


    <div class="media-icons">
        <a href="https://wa.me/919600008844" class="whatsap-icon" target="_blank"><i class="fa-brands fa-whatsapp"></i></a>
        <a href="mailto:[email protected]" class="mail-icon"><i class="fa-regular fa-envelope"></i></a>
        <a href="https://join.skype.com/invite/KqfsfMbmDu9a" class="skype-icon" target="_blank"><i class="fa-brands fa-skype"></i></a>
    </div> 

    <div class="back-to-top">
        <a class="back-to-top-icon align-items-center justify-content-center d-flex show" href="#top"><i class="fa-solid fa-arrow-up"></i></a>
    </div>

    <!-- Cursor -->
    <div class="xb-cursor tx-js-cursor">
        <div class="xb-cursor-wrapper">
            <div class="xb-cursor--follower xb-js-follower"></div>
        </div>
    </div>
    <!-- /Cursor -->

       <!--Start of Tawk.to Script-->
       <script>
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/5d7c946e9f6b7a4457e1a16b/default';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->

    <!-- Jquery JS -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>

    <!-- Wow JS -->
    <script src="assets/js/wow.min.js"></script>

    <!-- MeanMenu Js -->
    <script src="assets/js/jquery.meanmenu.min.js"></script>

    <!-- Owl carousel -->
     <script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>

     <!-- aos animation -->
     <script src="assets/plugins/aos/aos.js"></script>

    <!-- Swiper Js -->
    <script src="assets/plugins/swiper/swiper-bundle.min.js"></script>
    <script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- Counter JS -->
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/jquery.waypoints.min.js"></script>

    <!-- cursor JS -->
    <script src="assets/js/cursor.js"></script>

    <!-- Script JS -->
    <script src="assets/js/script.js"></script>

</body>

</html>