


<?php $__env->startSection('title'); ?>
<title>HR Services & Audit Preparation</title>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<!-- ================= HERO SECTION ================= -->


<br>
<br>
<br>
<section class="hr-hero">

    <div class="container hr-hero-grid">

        <!-- LEFT -->
        <div class="hr-left"
             >

            <span class="hero-tag"
                  >

                HR Services & Audit Solutions
            </span>

            <h1 data-aos="fade-up"
                >

                Complete HR Operations <br>
                & Audit Preparation Services

            </h1>

            <p data-aos="fade-up"
               >

                We provide complete HR operational support,
                audit preparation services, and HR outsourcing
                solutions to help businesses manage workforce
                operations efficiently while maintaining proper
                compliance and documentation standards.

            </p>

            <div class="hero-btns"
                 >

                <a href="#" class="primary-btn">
                    Get Consultation
                </a>

                <a href="#" class="secondary-btn">
                    Contact Us
                </a>

            </div>

        </div>

        <!-- RIGHT -->
        <div class="hr-right"
             >

            <div class="floating-card card-one"
                 >
                HR Documentation
            </div>

            <div class="floating-card card-two"
                 >
                Audit Ready Process
            </div>

            <div class="floating-card card-three"
                 >
                HR Outsourcing
            </div>

            <div class="main-circle"
                 >

                <i class="fa fa-users"></i>

            </div>

        </div>

    </div>

</section>




<!-- ================= SERVICES SECTION ================= -->

<section class="services-section">

    <div class="section-title"
         data-aos="fade-up"
         data-aos-duration="1600"
         data-aos-easing="ease-in-out">

        <span data-aos="zoom-in" data-aos-delay="200">
            HR SERVICES
        </span>

        <h2 data-aos="fade-up" data-aos-delay="400">
            Complete HR Management Solutions
        </h2>

    </div>

    <div class="service-grid">

        <div class="service-box"
             data-aos="fade-up"
             data-aos-duration="1600"
             data-aos-delay="300"
             data-aos-easing="ease-in-out">

            <i class="fa fa-file-alt"></i>
            <h3>Employee Documentation</h3>
            <p>Complete employee file and HR documentation management.</p>

        </div>

        <div class="service-box"
             data-aos="fade-up"
             data-aos-duration="1600"
             data-aos-delay="500">

            <i class="fa fa-user-plus"></i>
            <h3>Recruitment Support</h3>
            <p>Professional recruitment and staffing assistance services.</p>

        </div>

        <div class="service-box"
             data-aos="fade-up"
             data-aos-duration="1600"
             data-aos-delay="700">

            <i class="fa fa-id-card"></i>
            <h3>HR Policy Development</h3>
            <p>Customized HR policies and workforce management solutions.</p>

        </div>

        <div class="service-box"
             data-aos="fade-up"
             data-aos-duration="1600"
             data-aos-delay="900">

            <i class="fa fa-briefcase"></i>
            <h3>HR Operations</h3>
            <p>Daily HR process handling and employee lifecycle support.</p>

        </div>

    </div>

</section>




<!-- ================= AUDIT SECTION ================= -->

<section class="audit-section">

    <div class="container audit-grid">

        <!-- LEFT -->
        <div class="audit-left"
             data-aos="fade-right"
             data-aos-duration="1800"
             data-aos-easing="ease-in-out">

            <span class="small-tag"
                  data-aos="zoom-in"
                  data-aos-delay="200">

                AUDIT PREPARATION

            </span>

            <h2 data-aos="fade-up"
                data-aos-delay="400">

                Stay Audit Ready <br>
                With Proper Documentation

            </h2>

            <p data-aos="fade-up"
               data-aos-delay="600">

                We help businesses prepare complete HR and
                compliance documentation for statutory audits,
                labour inspections, payroll verification,
                and compliance checks.

            </p>

            <ul class="audit-list">

                <li data-aos="fade-up" data-aos-delay="700">Employee File Verification</li>
                <li data-aos="fade-up" data-aos-delay="800">Attendance & Payroll Audit</li>
                <li data-aos="fade-up" data-aos-delay="900">PF & ESIC Record Verification</li>
                <li data-aos="fade-up" data-aos-delay="1000">Factory Compliance Checklist</li>
                <li data-aos="fade-up" data-aos-delay="1100">Pre-Inspection Preparation</li>
                <li data-aos="fade-up" data-aos-delay="1200">Documentation Correction Support</li>

            </ul>

        </div>

        <!-- RIGHT -->
        <div class="audit-right"
             data-aos="fade-left"
             data-aos-duration="1800"
             data-aos-easing="ease-in-out">

            <div class="audit-card"
                 data-aos="zoom-in"
                 data-aos-delay="400"
                 data-aos-duration="1600">

                <h3 data-aos="fade-down" data-aos-delay="500">
                    Audit Benefits
                </h3>

                <div class="audit-item"
                     data-aos="fade-up"
                     data-aos-delay="600">
                    Organized HR Operations
                </div>

                <div class="audit-item"
                     data-aos="fade-up"
                     data-aos-delay="700">
                    Better Documentation
                </div>

                <div class="audit-item"
                     data-aos="fade-up"
                     data-aos-delay="800">
                    Reduced Administrative Burden
                </div>

                <div class="audit-item"
                     data-aos="fade-up"
                     data-aos-delay="900">
                    Professional HR Processes
                </div>

                <div class="audit-item"
                     data-aos="fade-up"
                     data-aos-delay="1000">
                    Better Employee Management
                </div>

            </div>

        </div>

    </div>

</section>



<!-- ================= OUTSOURCING SECTION ================= -->

<section class="outsourcing-section">

    <div class="container">

        <!-- TITLE -->
        <div class="section-title"
             data-aos="fade-up"
             data-aos-duration="1200">

            <span>HR OUTSOURCING</span>

            <h2>
                Smart Outsourced HR Solutions
            </h2>

        </div>

        <!-- MAIN LAYOUT -->
        <div class="outsource-wrapper">

            <!-- LEFT IMAGE -->
            <div class="outsource-image"
                 data-aos="fade-right">

                <img src="<?php echo e(asset('images\hr.jpg')); ?>"
                     alt="HR Outsourcing">

            </div>

            <!-- RIGHT GRID -->
            <div class="outsource-grid">

                <div class="outsource-box">
                    Complete HR Administration
                </div>

                <div class="outsource-box">
                    Employee Record Management
                </div>

                <div class="outsource-box">
                    Payroll Coordination Support
                </div>

                <div class="outsource-box">
                    Recruitment & Staffing Support
                </div>

                <div class="outsource-box">
                    Attendance & Leave Management
                </div>

                <div class="outsource-box">
                    Employee Lifecycle Management
                </div>

                <div class="outsource-box">
                    HR Compliance Support
                </div>

                <div class="outsource-box">
                    HR Support For Startups & SMEs
                </div>

            </div>

        </div>

    </div>

</section>



<!-- ================= CTA ================= -->

<section class="hr-cta">

    <div class="container">

        <h2>
            Need Professional HR & Audit Support?
        </h2>

        <p>
            Get complete HR operational support,
            documentation management, audit preparation,
            and workforce compliance solutions.
        </p>

        <a href="#" class="cta-btn">
            Request Free Consultation
        </a>

    </div>

</section>



<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

html, body{
    background:#f5f7fb;
    overflow-x:hidden;
}

/* ================= CONTAINER ================= */

.container{
    width:100%;
    max-width:1280px;
    margin:auto;
}

/* ================= HERO SECTION ================= */

.hr-hero{
    width:100%;
    padding:110px 70px;

    /* CLEAN MODERN GRADIENT */
    background: linear-gradient(135deg, #061a34, #0b3b66);
}

/* GRID */

.hr-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* ================= LEFT ================= */

.hero-tag{
    display:inline-block;
    background:#ffffff;
    color:#001d5c;
    padding:10px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:25px;
}

.hr-left h1{
    font-size:58px;
    line-height:1.2;
    color:#ffffff;   /* FIX */
    margin-bottom:28px;
}

.hr-left p{
    color:#d6e2f0;   /* FIX readability */
    line-height:1.9;
    margin-bottom:18px;
    font-size:16px;
}

/* ================= BUTTONS ================= */

.hero-btns{
    display:flex;
    gap:18px;
    margin-top:35px;
}

.primary-btn{
    background:#ffffff;
    color:#001d5c;
    padding:15px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.primary-btn:hover{
    background:#e6e6e6;
}

.secondary-btn{
    border:1px solid #ffffff;
    color:#ffffff;
    padding:15px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.secondary-btn:hover{
    background:#ffffff;
    color:#001d5c;
}

/* ================= RIGHT SIDE ================= */

.hr-right{
    position:relative;
    height:500px;
}

/* MAIN CIRCLE */

.main-circle{
    width:240px;
    height:240px;
    background:#ffffff;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

.main-circle i{
    color:#001d5c;
    font-size:80px;
}

/* FLOATING CARDS */

.floating-card{
    position:absolute;
    background:#ffffff;
    padding:18px 28px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    font-weight:600;
    color:#001d5c;
}

/* positions unchanged */

.card-one{
    top:70px;
    left:30px;
    
}

.card-two{
    top:160px;
    right:-39px;
    
}

.card-three{
    bottom:110px;
    left:30px;
  
}

/* ================= SECTION TITLE ================= */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    background:#dbe8ff;
    color:#001d5c;
    padding:10px 20px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.section-title h2{
    margin-top:20px;
    font-size:48px;
    color:#001d5c;
}

/* ================= SERVICES ================= */

.services-section{
    padding:100px 70px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.service-box{
    background:#ffffff;
    padding:40px 28px;
    border-radius:24px;
    transition:0.3s;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.service-box:hover{
    transform:translateY(-8px);
}

.service-box i{
    width:70px;
    height:70px;
    background:#001d5c;
    color:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:24px;
}

.service-box h3{
    color:#001d5c;
    margin-bottom:16px;
    font-size:24px;
}

.service-box p{
    color:#66788a;
    line-height:1.8;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1024px){

    .hr-hero{
        padding:90px 40px;
    }

    .hr-hero-grid{
        gap:40px;
    }

    .hr-left h1{
        font-size:48px;
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .hr-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hr-left h1{
        font-size:38px;
    }

    .hero-btns{
        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
        text-align:center;
    }

    .service-grid{
        grid-template-columns:1fr;
    }

    .hr-right{
        height:400px;
    }
}




/* ================= AUDIT ================= */

.audit-section{
    padding:100px 70px;
    background:#ffffff;
}

.audit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.small-tag{
    background:#dce9ff;
    color:#001d5c;
    padding:10px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.audit-left h2{
    font-size:50px;
    color:#001d5c;
    margin:25px 0;
}

.audit-left p{
    color:#66788a;
    line-height:1.9;
    margin-bottom:25px;
}

.audit-list{
    list-style:none;
}

.audit-list li{
    margin-bottom:16px;
    color:#001d5c;
    font-weight:500;
    position:relative;
    padding-left:28px;
}

.audit-list li::before{
    content:'✔';
    position:absolute;
    left:0;
    color:#001d5c;
}

.audit-card{
    background:#f5f8fc;
    padding:45px;
    border-radius:28px;
}

.audit-card h3{
    color:#001d5c;
    margin-bottom:28px;
    font-size:34px;
}

.audit-item{
    background:#ffffff;
    padding:18px 20px;
    border-radius:14px;
    margin-bottom:16px;
    color:#001d5c;
    font-weight:600;
}

/* ================= OUTSOURCE ================= */
/* ================= OUTSOURCING SECTION ================= */

.outsourcing-section{
    padding:100px 70px;
    background:#f7f9fc;
}

/* TITLE */

.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title span{
    display:inline-block;
    background:#dce9ff;
    color:#001d5c;
    padding:10px 20px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.section-title h2{
    font-size:48px;
    color:#001d5c;
    margin-top:18px;
}

/* MAIN WRAPPER */

.outsource-wrapper{
    display:flex;
    align-items:center;
    gap:50px;
}

/* IMAGE */

.outsource-image{
    flex:1;
}

.outsource-image img{
    width:100%;
    border-radius:30px;
    height:500px;
    object-fit:cover;
    box-shadow:0 25px 60px rgba(0,0,0,0.12);
    transition:0.4s;
}

.outsource-image img:hover{
    transform:scale(1.03);
}

/* GRID */

.outsource-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/* BOX */

.outsource-box{
    background:#ffffff;
    padding:25px 18px;
    border-radius:18px;
    text-align:center;
    color:#001d5c;
    font-weight:600;
    border:1px solid #e6eef7;
    transition:0.3s;
    position:relative;
    overflow:hidden;
}

/* HOVER EFFECT */

.outsource-box:hover{
    background:#001d5c;
    color:#ffffff;
    transform:translateY(-8px);
}

/* ICON DOT EFFECT */

.outsource-box::before{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:#001d5c;
    border-radius:50%;
    top:15px;
    left:15px;
}

/* RESPONSIVE */

@media(max-width:992px){

    .outsource-wrapper{
        flex-direction:column;
    }

    .outsource-image img{
        height:400px;
    }
}

@media(max-width:768px){

    .outsource-grid{
        grid-template-columns:1fr;
    }

    .outsourcing-section{
        padding:70px 20px;
    }

    .section-title h2{
        font-size:32px;
    }
}




/* ================= CTA ================= */

.hr-cta{
    padding:110px 70px;
    background:#001d5c;
    text-align:center;
}

.hr-cta h2{
    color:#ffffff;
    font-size:52px;
    margin-bottom:24px;
}

.hr-cta p{
    width:60%;
    margin:auto;
    color:#d9e3ef;
    line-height:1.9;
    margin-bottom:35px;
}

.cta-btn{
    display:inline-block;
    background:#ffffff;
    color:#001d5c;
    padding:16px 36px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
}

/* ================= RESPONSIVE ================= */

@media(max-width:991px){

    .hr-hero,
    .services-section,
    .audit-section,
    .outsourcing-section,
    .hr-cta{
        padding:70px 25px;
    }

    .hr-hero-grid,
    .audit-grid,
    .service-grid,
    .outsource-grid{
        grid-template-columns:1fr;
    }

    .hr-left h1,
    .section-title h2,
    .audit-left h2,
    .hr-cta h2{
        font-size:36px;
    }

    .hr-right{
        height:auto;
    }

    .main-circle{
        position:relative;
        transform:none;
        top:auto;
        left:auto;
        margin:auto;
    }

    .floating-card{
        position:static;
        margin-bottom:18px;
        text-align:center;
    }

    .hr-cta p{
        width:100%;
    }

}

/* ================= 1024px ================= */

@media (max-width:1024px){

    .hr-hero,
    .services-section,
    .audit-section,
    .outsourcing-section,
    .hr-cta{
        padding:80px 40px;
    }

    .hr-hero-grid,
    .audit-grid{
        gap:40px;
    }

    .hr-left h1{
        font-size:48px;
    }

    .section-title h2,
    .audit-left h2,
    .hr-cta h2{
        font-size:42px;
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .outsource-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hr-right{
        height:420px;
    }

    .main-circle{
        width:200px;
        height:200px;
    }

    .main-circle i{
        font-size:65px;
    }

    .hr-cta p{
        width:80%;
    }

}


/* ================= 768px ================= */

@media (max-width:768px){

    .hr-hero,
    .services-section,
    .audit-section,
    .outsourcing-section,
    .hr-cta{
        padding:70px 25px;
    }

    .hr-hero-grid,
    .audit-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .service-grid,
    .outsource-grid{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .hr-left h1{
        font-size:40px;
        line-height:1.3;
    }

    .section-title h2,
    .audit-left h2,
    .hr-cta h2{
        font-size:36px;
        line-height:1.3;
    }

    .hero-btns{
        flex-wrap:wrap;
    }

    .hr-right{
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .floating-card{
        position:static;
        width:100%;
        text-align:center;
    }

    .main-circle{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        width:180px;
        height:180px;
    }

    .main-circle i{
        font-size:60px;
    }

    .audit-card{
        padding:35px;
    }

    .audit-card h3{
        font-size:28px;
    }

    .hr-cta p{
        width:100%;
    }

}


/* ================= 480px ================= */

@media (max-width:480px){

    .hr-hero,
    .services-section,
    .audit-section,
    .outsourcing-section,
    .hr-cta{
        padding:60px 18px;
    }

    .hr-left h1{
        font-size:30px;
    }

    .hr-left p,
    .audit-left p,
    .service-box p{
        font-size:14px;
        line-height:1.8;
    }

    .hero-btns{
        flex-direction:column;
        gap:15px;
    }

    .primary-btn,
    .secondary-btn,
    .cta-btn{
        width:100%;
        text-align:center;
    }

    .service-grid,
    .outsource-grid{
        grid-template-columns:1fr;
    }

    .service-box{
        padding:30px 22px;
    }

    .service-box h3{
        font-size:20px;
    }

    .section-title{
        margin-bottom:40px;
    }

    .section-title h2,
    .audit-left h2,
    .hr-cta h2{
        font-size:28px;
    }

    .hr-right{
        gap:15px;
    }

    .floating-card{
        padding:16px 18px;
        font-size:14px;
    }

    .main-circle{
        width:150px;
        height:150px;
    }

    .main-circle i{
        font-size:48px;
    }

    .audit-card{
        padding:25px;
        border-radius:20px;
    }

    .audit-card h3{
        font-size:22px;
    }

    .audit-item{
        font-size:14px;
        padding:15px;
    }

    .outsource-box{
        padding:24px 18px;
        font-size:14px;
    }

    .hr-cta p{
        font-size:14px;
        line-height:1.8;
    }

}
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend_layout.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\pf_esic\resources\views/hr.blade.php ENDPATH**/ ?>