


<?php $__env->startSection('title'); ?>
<title>
    Payroll Services
</title>
<?php $__env->stopSection(); ?>

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

<!-- ================= PAYROLL HERO ================= -->


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

    <div class="container payroll-grid">

        <!-- LEFT CONTENT -->
        <div class="payroll-content"
             data-aos="fade-right"
             data-aos-duration="1000">

            <span class="payroll-tag"
                  data-aos="zoom-in"
                  data-aos-duration="700"
                  data-aos-delay="100">
                Payroll Management Services
            </span>

            <h1 data-aos="fade-up"
                data-aos-duration="900"
                data-aos-delay="150">
                Smart & Accurate <br>
                Payroll Solutions
            </h1>

            <p data-aos="fade-up"
               data-aos-duration="900"
               data-aos-delay="250">
                Our payroll services are designed to simplify salary
                processing and ensure accurate payroll calculations,
                timely salary disbursement, and proper statutory deductions.
            </p>

            <p data-aos="fade-up"
               data-aos-duration="900"
               data-aos-delay="350">
                We help businesses reduce payroll errors,
                improve workforce management efficiency,
                and maintain organized payroll operations.
            </p>

            <div class="payroll-btns"
                 data-aos="fade-up"
                 data-aos-duration="900"
                 data-aos-delay="450">

                <a href="#" class="payroll-btn">
                    Get Started
                </a>

                <a href="#" class="outline-btn">
                    Contact Team
                </a>

            </div>

        </div>

        <!-- RIGHT SIDE -->
        <div class="payroll-image-box"
             data-aos="fade-left"
             data-aos-duration="1000">

            <div class="payroll-card">

                <h3 data-aos="fade-up"
                    data-aos-duration="800"
                    data-aos-delay="150">
                    Payroll Services Included
                </h3>

                <div class="payroll-list">

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="200" data-aos-duration="700">
                        <i class="fa fa-wallet"></i>
                        Salary Processing
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="250" data-aos-duration="700">
                        <i class="fa fa-file-invoice"></i>
                        Payslip Generation
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="300" data-aos-duration="700">
                        <i class="fa fa-user-clock"></i>
                        Attendance Integration
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="350" data-aos-duration="700">
                        <i class="fa fa-university"></i>
                        Bank Transfer Statements
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="400" data-aos-duration="700">
                        <i class="fa fa-gift"></i>
                        Bonus Processing
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="450" data-aos-duration="700">
                        <i class="fa fa-file-signature"></i>
                        Full & Final Settlement
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="500" data-aos-duration="700">
                        <i class="fa fa-calendar-alt"></i>
                        Leave Management
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="550" data-aos-duration="700">
                        <i class="fa fa-chart-bar"></i>
                        Payroll Reports
                    </div>

                    <div class="payroll-item" data-aos="fade-up" data-aos-delay="600" data-aos-duration="700">
                        <i class="fa fa-calculator"></i>
                        Tax Calculations
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- ================= FEATURES SECTION ================= -->
<section class="payroll-features">

    <div class="container">

        <div class="payroll-wrapper">

            <!-- LEFT IMAGE -->
            <div class="payroll-image"
                 data-aos="fade-right"
                 data-aos-duration="2200">

                <img src="images\payroll.jpg" alt="Payroll Services">

            </div>

            <!-- RIGHT CONTENT -->
            <div class="payroll-content"
                 data-aos="fade-left"
                 data-aos-duration="2200">

                <span>Why Choose Payroll Services</span>

                <h2>
                    Simplify Your Payroll Operations
                </h2>

                <p>
                    Streamline salary processing, ensure compliance,
                    and improve employee satisfaction with our
                    professional payroll management solutions.
                </p>

                <div class="feature-list">

                    <div class="feature-item">
                        <i class="fa fa-check-circle"></i>
                        <div>
                            <h3>Error-Free Payroll</h3>
                            <p>Accurate salary calculations and deductions.</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <i class="fa fa-clock"></i>
                        <div>
                            <h3>Time Saving</h3>
                            <p>Automated payroll workflow for efficiency.</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <i class="fa fa-users"></i>
                        <div>
                            <h3>Employee Satisfaction</h3>
                            <p>On-time salary processing builds trust.</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <i class="fa fa-lock"></i>
                        <div>
                            <h3>Secure Payroll Data</h3>
                            <p>Confidential and secure payroll handling.</p>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>




<!-- ================= PROCESS SECTION ================= -->
<section class="payroll-process">

    <div class="container">

        <div class="section-heading"
             data-aos="fade-up"
             data-aos-duration="800">

            <span data-aos="zoom-in"
                  data-aos-duration="600"
                  data-aos-delay="50">
                Work Process
            </span>

            <h2 data-aos="fade-up"
                data-aos-duration="800"
                data-aos-delay="100">
                Our Payroll Workflow
            </h2>

        </div>

        <div class="process-wrapper">

            <div class="process-step"
                 data-aos="fade-up"
                 data-aos-duration="700"
                 data-aos-delay="100">

                <div class="step-no">01</div>

                <h3>Employee Data Collection</h3>

                <p>Attendance, leaves, salary structure, and employee records collection.</p>

            </div>

            <div class="process-step"
                 data-aos="fade-up"
                 data-aos-duration="700"
                 data-aos-delay="150">

                <div class="step-no">02</div>

                <h3>Salary Calculation</h3>

                <p>Accurate payroll processing with statutory deductions.</p>

            </div>

            <div class="process-step"
                 data-aos="fade-up"
                 data-aos-duration="700"
                 data-aos-delay="200">

                <div class="step-no">03</div>

                <h3>Payslip & Reports</h3>

                <p>Payslip generation and payroll report preparation.</p>

            </div>

            <div class="process-step"
                 data-aos="fade-up"
                 data-aos-duration="700"
                 data-aos-delay="250">

                <div class="step-no">04</div>

                <h3>Salary Disbursement</h3>

                <p>Timely salary transfer support and payroll completion.</p>

            </div>

        </div>

    </div>

</section>

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

<section class="payroll-cta">

    <div class="container">

        <h2>
            Need Professional Payroll Management?
        </h2>

        <p>
            Get complete payroll processing support with
            accurate salary calculations, statutory deductions,
            payslip generation, and workforce management solutions.
        </p>

        <a href="#" class="cta-main-btn">
            Request 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 ================= */

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

    /* FIX: clean modern gradient */
    background: linear-gradient(135deg, #061a34, #0b3b66);
}

/* GRID */

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

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

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

.payroll-content h1{
    font-size:62px;
    line-height:1.2;
    color:#ffffff;   /* FIX */
    margin-bottom:28px;
}

.payroll-content p{
    color:#d6e2f0;   /* FIX readability */
    font-size:16px;
    line-height:1.9;
    margin-bottom:20px;
}

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

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

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

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

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

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

/* ================= RIGHT CARD ================= */

.payroll-card{
    background:#ffffff;
    padding:45px;
    border-radius:30px;
    border:1px solid #e4edf7;
    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

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

/* LIST */

.payroll-list{
    display:grid;
    gap:18px;
}

.payroll-item{
    background:#f7f9fc;
    padding:18px 20px;
    border-radius:16px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#001d5c;
    font-weight:600;
    transition:0.3s;
    border:1px solid transparent;
}

.payroll-item:hover{
    transform:translateX(5px);
    border-color:#cddfff;
}

/* ICON */

.payroll-item i{
    width:28px;
    height:28px;
    background:#001d5c;
    color:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

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

@media(max-width:1024px){

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

    .payroll-grid{
        gap:40px;
    }

    .payroll-content h1{
        font-size:48px;
    }
}

@media(max-width:768px){

    .payroll-hero{
        padding:70px 25px;
    }

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

    .payroll-content h1{
        font-size:38px;
    }

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

    .payroll-btn,
    .outline-btn{
        width:100%;
        text-align:center;
    }

    .payroll-card{
        padding:30px;
    }
}

@media(max-width:480px){

    .payroll-content h1{
        font-size:28px;
    }

    .payroll-content p{
        font-size:14px;
    }

    .payroll-card{
        padding:22px;
        border-radius:20px;
    }

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



/* ================= PAYROLL FEATURES ================= */

.payroll-features{
    padding:100px 70px;
    background:#f5f8fc;
}

.payroll-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.payroll-image{
    flex:1;
}

.payroll-image img{
    width:100%;
    height:550px;
    object-fit:cover;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.payroll-content{
    flex:1;
}

.payroll-content span{
    display:inline-block;
    background:#dce9ff;
    color:#001d5c;
    padding:10px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

.payroll-content h2{
    font-size:48px;
    line-height:1.2;
    color:#001d5c;
    margin:20px 0;
    font-weight:700;
}

.payroll-content > p{
    color:#66788a;
    font-size:17px;
    line-height:1.8;
    margin-bottom:35px;
}

.feature-list{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#ffffff;
    padding:20px;
    border-radius:18px;
    transition:0.4s;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.feature-item:hover{
    transform:translateY(-6px);
}

.feature-item i{
    font-size:30px;
    color:#001d5c;
    min-width:40px;
    margin-top:5px;
}

.feature-item h3{
    color:#001d5c;
    font-size:22px;
    margin-bottom:8px;
}

.feature-item p{
    color:#66788a;
    line-height:1.7;
    font-size:15px;
}

/* ================= TABLET ================= */

@media(max-width:992px){

    .payroll-features{
        padding:80px 30px;
    }

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

    .payroll-content h2{
        font-size:38px;
    }

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

/* ================= MOBILE ================= */

@media(max-width:768px){

    .payroll-features{
        padding:60px 20px;
    }

    .payroll-content h2{
        font-size:30px;
    }

    .payroll-content > p{
        font-size:15px;
    }

    .feature-item{
        padding:18px;
    }

    .feature-item h3{
        font-size:18px;
    }

    .payroll-image img{
        height:300px;
    }
}

/* ================= PROCESS ================= */
/* ================= PAYROLL PROCESS ================= */

.payroll-process{
    padding:100px 70px;
    background:#f5f8fc;
}

.process-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    position:relative;
}

.process-step{
    background:#ffffff;
    padding:35px 28px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:0.4s ease;
    position:relative;
    overflow:hidden;
}

.process-step:hover{
    transform:translateY(-10px);
}

.step-no{
    width:70px;
    height:70px;
    background:#001d5c;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    margin-bottom:25px;
}

.process-step h3{
    color:#001d5c;
    font-size:22px;
    margin-bottom:15px;
}

.process-step p{
    color:#66788a;
    line-height:1.8;
    font-size:15px;
}

/* Top Blue Border */

.process-step::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#001d5c;
}

/* Heading */

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

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

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

/* ================= TABLET ================= */

@media(max-width:992px){

    .payroll-process{
        padding:80px 30px;
    }

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

    .section-heading h2{
        font-size:38px;
    }
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .payroll-process{
        padding:60px 20px;
    }

    .process-wrapper{
        grid-template-columns:1fr;
    }

    .section-heading h2{
        font-size:30px;
    }

    .process-step{
        padding:30px 22px;
    }
}

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

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

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

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

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

.cta-main-btn:hover{
    background:#52d6d2;
}

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

@media(max-width:991px){

    .payroll-hero,
    .payroll-features,
    .payroll-process,
    .payroll-cta{
        padding:70px 25px;
    }

    .payroll-grid,
    .feature-grid,
    .process-wrapper{
        grid-template-columns:1fr;
    }

    .payroll-content h1,
    .section-heading h2,
    .payroll-cta h2{
        font-size:38px;
    }

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

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

}



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

@media (max-width:1024px){

    .payroll-hero,
    .payroll-features,
    .payroll-process,
    .payroll-cta{
        padding:80px 40px;
    }

    .payroll-grid{
        gap:40px;
    }

    .payroll-content h1{
        font-size:52px;
    }

    .payroll-card{
        padding:35px;
    }

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

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

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

    .section-heading h2{
        font-size:42px;
    }

    .payroll-cta h2{
        font-size:44px;
    }

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

}


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

@media (max-width:768px){

    .payroll-hero,
    .payroll-features,
    .payroll-process,
    .payroll-cta{
        padding:70px 25px;
    }

    .payroll-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .payroll-content h1{
        font-size:42px;
        line-height:1.3;
    }

    .payroll-content p{
        font-size:15px;
    }

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

    .payroll-card{
        padding:30px;
    }

    .payroll-card h3{
        font-size:26px;
    }

    .feature-grid{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .process-wrapper{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .section-heading h2{
        font-size:36px;
    }

    .payroll-cta h2{
        font-size:38px;
    }

    .payroll-cta p{
        width:100%;
        font-size:15px;
    }

}


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

@media (max-width:480px){

    .payroll-hero,
    .payroll-features,
    .payroll-process,
    .payroll-cta{
        padding:60px 18px;
    }

    .payroll-content h1{
        font-size:32px;
    }

    .payroll-content p{
        font-size:14px;
        line-height:1.8;
    }

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

    .payroll-btn,
    .outline-btn,
    .cta-main-btn{
        width:100%;
        text-align:center;
    }

    .payroll-card{
        padding:24px;
        border-radius:22px;
    }

    .payroll-card h3{
        font-size:22px;
        margin-bottom:24px;
    }

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

    .feature-grid,
    .process-wrapper{
        grid-template-columns:1fr;
    }

    .feature-box,
    .process-step{
        padding:28px 22px;
    }

    .feature-box h3,
    .process-step h3{
        font-size:20px;
    }

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

    .section-heading h2{
        font-size:28px;
        line-height:1.4;
    }

    .payroll-cta h2{
        font-size:30px;
        line-height:1.4;
    }

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

    .step-no{
        width:55px;
        height:55px;
        font-size:18px;
    }

}

</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/playroll.blade.php ENDPATH**/ ?>