@extends('frontend_layout.app')

@section('title')
<title>
    Home
</title>
@endsection

@section('content')



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


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

    <div class="container">

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

            <span class="esic-tag"
                  data-aos="zoom-in"
                  data-aos-delay="200"
                  data-aos-duration="1200">
                ESIC Compliance Services
            </span>

            <h1 data-aos="fade-up"
                data-aos-delay="400"
                data-aos-duration="1800">
                Complete ESIC <br>
                Compliance Solutions
            </h1>

            <p data-aos="fade-up"
               data-aos-delay="600"
               data-aos-duration="1800">
                We help businesses manage Employee State Insurance (ESIC)
                compliance processes effectively while ensuring proper
                employee registration, timely filings, and accurate
                statutory documentation.
            </p>

            <p data-aos="fade-up"
               data-aos-delay="800"
               data-aos-duration="1800">
                Our ESIC consultancy services help organizations maintain
                proper compliance, reduce legal risks, and ensure better
                employee welfare support through organized compliance
                management solutions.
            </p>

            <div class="esic-btns"
                 data-aos="fade-up"
                 data-aos-delay="1000"
                 data-aos-duration="1600">

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

            </div>

        </div>

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

            <div class="service-card"
                 data-aos="zoom-in-up"
                 data-aos-delay="300"
                 data-aos-duration="1800">

                <h3 data-aos="fade-up"
                    data-aos-delay="500"
                    data-aos-duration="1600">
                    ESIC Services Included
                </h3>

                <div class="service-list">

                    <div class="service-item" data-aos="fade-up" data-aos-delay="600">
                        <i class="fa fa-check-circle"></i> ESIC Registration
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="750">
                        <i class="fa fa-check-circle"></i> Monthly ESIC Returns
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="900">
                        <i class="fa fa-check-circle"></i> Employee IP Registration
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="1050">
                        <i class="fa fa-check-circle"></i> ESIC Challan
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="1200">
                        <i class="fa fa-check-circle"></i> Dispensary Mapping
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="1350">
                        <i class="fa fa-check-circle"></i> ESIC Inspection Support
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="1500">
                        <i class="fa fa-check-circle"></i> Accident Reporting
                    </div>

                    <div class="service-item" data-aos="fade-up" data-aos-delay="1650">
                        <i class="fa fa-check-circle"></i> Employee Benefit Assistance
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>




<!-- ================= ABOUT SECTION ================= -->

<section class="about-esic">

    <div class="container about-grid">

        <!-- LEFT CONTENT -->
        <div class="about-content"
             data-aos="fade-right"
             data-aos-duration="2000"
             data-aos-easing="ease-in-out">

            <span class="small-tag"
                  data-aos="zoom-in"
                  data-aos-delay="200"
                  data-aos-duration="1200">
                About ESIC Services
            </span>

            <h2 data-aos="fade-up"
                data-aos-delay="400"
                data-aos-duration="1800">
                Professional ESIC Compliance
                Management Support
            </h2>

            <p data-aos="fade-up"
               data-aos-delay="600"
               data-aos-duration="1800">
                Managing ESIC compliance requires proper employee
                registration, contribution filing, and accurate statutory
                documentation. Our ESIC consultancy services help businesses
                maintain complete compliance while reducing administrative burden.
            </p>

            <p data-aos="fade-up"
               data-aos-delay="800"
               data-aos-duration="1800">
                We support startups, SMEs, factories, hospitals,
                construction companies, retail businesses, logistics firms,
                and organizations across multiple industries with reliable
                ESIC compliance solutions.
            </p>

        </div>

        <!-- RIGHT BOXES -->
        <div class="about-boxes"
             data-aos="fade-left"
             data-aos-duration="2000"
             data-aos-easing="ease-in-out">

            <div class="info-box"
                 data-aos="zoom-in-up"
                 data-aos-delay="300"
                 data-aos-duration="1500">

                <i class="fa fa-user-check"></i>

                <h3>Employee Registration</h3>

                <p>
                    Smooth employee IP registration and ESIC documentation support.
                </p>

            </div>

            <div class="info-box"
                 data-aos="zoom-in-up"
                 data-aos-delay="600"
                 data-aos-duration="1500">

                <h3>Timely Contribution Filing</h3>

                <p>
                    Monthly contribution filing and challan management support.
                </p>

                <i class="fa fa-file-invoice"></i>

            </div>

            <div class="info-box"
                 data-aos="zoom-in-up"
                 data-aos-delay="900"
                 data-aos-duration="1500">

                <i class="fa fa-shield-alt"></i>

                <h3>Compliance Risk Reduction</h3>

                <p>
                    Reduce legal risks and maintain proper ESIC compliance standards.
                </p>

            </div>

        </div>

    </div>

</section>



<!-- ================= BENEFITS SECTION ================= -->
<!-- ================= BENEFITS SECTION ================= -->

<section class="benefit-section">

    <div class="container">

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

            <span class="small-tag">Benefits</span>

            <h2>
                Why Businesses Choose Our ESIC Services
            </h2>

        </div>

        <!-- MAIN LAYOUT -->
        <div class="benefit-layout">

            <!-- LEFT CARDS -->
            <div class="benefit-left">

                <div class="benefit-card">
                    <i class="fa fa-check-circle"></i>
                    <h3>Proper ESIC Compliance</h3>
                    <p>Complete ESIC compliance management according to regulations.</p>
                </div>

                <div class="benefit-card">
                    <i class="fa fa-users"></i>
                    <h3>Smooth Employee Registration</h3>
                    <p>Easy employee IP registration and documentation management.</p>
                </div>

                <div class="benefit-card">
                    <i class="fa fa-clock"></i>
                    <h3>Timely Filing Support</h3>
                    <p>Timely contribution filing and challan submission support.</p>
                </div>

            </div>

            <!-- CENTER IMAGE -->
            <div class="benefit-image">

                <img src="{{ asset('images\esic.jpg') }}"
                     alt="ESIC Benefits">

            </div>

            <!-- RIGHT CARDS -->
            <div class="benefit-right">

                <div class="benefit-card">
                    <i class="fa fa-exclamation-triangle"></i>
                    <h3>Reduced Compliance Risk</h3>
                    <p>Minimize penalties and avoid compliance-related issues.</p>
                </div>

                <div class="benefit-card">
                    <i class="fa fa-heart"></i>
                    <h3>Better Employee Welfare</h3>
                    <p>Improved employee benefit support and welfare management.</p>
                </div>

            </div>

        </div>

    </div>

</section>




<!-- ================= PROCESS SECTION ================= -->

<section class="process-section">

    <div class="section-title"
         data-aos="fade-up"
         data-aos-duration="2000">

        <span class="small-tag"
              data-aos="zoom-in"
              data-aos-delay="200"
              data-aos-duration="1800">
            Work Process
        </span>

        <h2 data-aos="fade-up"
            data-aos-delay="300"
            data-aos-duration="2000">
            Our ESIC Compliance Process
        </h2>

    </div>

    <div class="process-grid">

        <div class="process-box"
             data-aos="fade-up"
             data-aos-delay="200"
             data-aos-duration="2000">

            <div class="number">01</div>

            <h3>Requirement Analysis</h3>

            <p>Understanding workforce details and ESIC compliance requirements.</p>

        </div>

        <div class="process-box"
             data-aos="fade-up"
             data-aos-delay="400"
             data-aos-duration="2000">

            <div class="number">02</div>

            <h3>Employee Registration</h3>

            <p>Employee IP registration and documentation process management.</p>

        </div>

        <div class="process-box"
             data-aos="fade-up"
             data-aos-delay="600"
             data-aos-duration="2000">

            <div class="number">03</div>

            <h3>Monthly Filing</h3>

            <p>Contribution filing, challan generation, and compliance management.</p>

        </div>

        <div class="process-box"
             data-aos="fade-up"
             data-aos-delay="800"
             data-aos-duration="2000">

            <div class="number">04</div>

            <h3>Ongoing Support</h3>

            <p>Continuous support for inspections, notices, and employee benefits.</p>

        </div>

    </div>

</section>




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

<section class="cta-section">

    <div class="cta-content">

        <h2>
            Need Professional ESIC Compliance Support?
        </h2>

        <p>
            Get expert assistance for ESIC registration,
            monthly filing, employee documentation,
            inspections, and compliance management.
        </p>

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

    </div>

</section>



<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

<script>
  AOS.init();
</script>


<style>


<style>




/* ================= GOOGLE FONT ================= */
/* ================= ESIC UNIQUE STYLE CSS ================= */

@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 ================= */

.esic-hero{
    width:100%;
    padding:100px 20px;

    /* FIXED: cleaner modern gradient */
    background: linear-gradient(135deg, #061a34, #0b3b66);

    position:relative;
    overflow:hidden;
}

/* FLEX WRAPPER */

.esic-hero .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}

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

.esic-left{
    width:52%;
}

/* FIX: tag color contrast improved */

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

.esic-left h1{
    font-size:62px;
    line-height:1.15;
    color:#ffffff;   /* FIX */
    margin-bottom:28px;
    font-weight:800;
}

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

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

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

.primary-btn{
    background:#ffffff;
    color:#001d5c;
    padding:15px 34px;
    border-radius:12px;
    text-decoration:none;
    font-size:15px;
    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-size:15px;
    font-weight:600;
    transition:0.3s;
}

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

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

.esic-right{
    width:44%;
}

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

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

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

.service-list{
    display:grid;
    gap:16px;
}

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

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

.service-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){

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

    .esic-hero .container{
        gap:40px;
    }

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

    .esic-left,
    .esic-right{
        width:100%;
    }
}

@media (max-width:768px){

    .esic-hero .container{
        flex-direction:column;
        text-align:center;
    }

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

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

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

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

@media (max-width:480px){

    .esic-left h1{
        font-size:28px;
    }

    .esic-left p{
        font-size:14px;
    }

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




/* ================= ABOUT SECTION ================= */

.about-esic{
    width:100%;
    padding:100px 70px;
    background:#ffffff;
}

.about-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

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

.about-content h2{
    font-size:50px;
    line-height:1.3;
    color:#001d5c;
    margin-bottom:25px;
}

.about-content p{
    color:#66788a;
    font-size:16px;
    line-height:1.9;
    margin-bottom:20px;
}

/* BOXES */

.about-boxes{
    display:grid;
    gap:24px;
}

.info-box{
    background:#f7fafd;
    padding:32px;
    border-radius:24px;
    border-left:5px solid #001d5c;
    transition:0.3s;
}

.info-box:hover{
    transform:translateY(-5px);
}

.info-box i{
    font-size:34px;
    color:#001d5c;
    margin-bottom:20px;
}

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

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

/* ================= BENEFITS ================= */
/* ================= BENEFITS SECTION ================= */

.benefit-section{
    width:100%;
    padding:100px 70px;
    background:#f4f8fc;
}

/* TITLE */

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

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

/* MAIN LAYOUT */

.benefit-layout{
    display:grid;
    grid-template-columns:1fr 1.2fr 1fr;
    gap:40px;
    align-items:center;
}

/* IMAGE */

.benefit-image{
    text-align:center;
}

.benefit-image img{
    width:100%;
    max-width:380px;
    border-radius:50%;
    height:380px;
    object-fit:cover;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
    border:6px solid #fff;
}

/* CARDS */

.benefit-card{
    background:#ffffff;
    padding:25px;
    border-radius:20px;
    margin-bottom:20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
    transition:0.3s;
}

.benefit-card:hover{
    transform:translateY(-8px);
}

.benefit-card i{
    font-size:34px;
    color:#001d5c;
    margin-bottom:15px;
}

.benefit-card h3{
    font-size:20px;
    color:#001d5c;
    margin-bottom:10px;
}

.benefit-card p{
    font-size:14px;
    color:#66788a;
    line-height:1.7;
}

/* LEFT / RIGHT ALIGN */

.benefit-left,
.benefit-right{
    display:flex;
    flex-direction:column;
}

/* RESPONSIVE */

@media(max-width:992px){
    .benefit-layout{
        grid-template-columns:1fr;
    }

    .benefit-image img{
        max-width:300px;
        height:300px;
    }
}




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

.process-section{
    width:100%;
    padding:100px 70px;
    background:#ffffff;
}

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

.process-box{
    background:#f7fafd;
    padding:35px 30px;
    border-radius:24px;
    transition:0.3s;
    position:relative;
    overflow:hidden;
}

.process-box::before{
    content:'';
    position:absolute;
    right:-40px;
    top:-40px;
    width:120px;
    height:120px;
    background:#e4efff;
    border-radius:50%;
}

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

.number{
    width:70px;
    height:70px;
    background:#001d5c;
    color:#ffffff;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    margin-bottom:25px;
    position:relative;
    z-index:2;
}

.process-box h3{
    color:#001d5c;
    font-size:24px;
    margin-bottom:16px;
    position:relative;
    z-index:2;
}

.process-box p{
    color:#66788a;
    line-height:1.8;
    font-size:15px;
    position:relative;
    z-index:2;
}

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

.cta-section{
    width:100%;
    padding:110px 70px;
    background:#001d5c;
    text-align:center;
}

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

.cta-content p{
    width:60%;
    margin:auto;
    color:#d8e3f0;
    line-height:1.9;
    margin-bottom:35px;
    font-size:16px;
}

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

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

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

@media(max-width:991px){

    .esic-hero,
    .about-esic,
    .benefit-section,
    .process-section,
    .cta-section{
        padding:70px 25px;
    }

    .esic-hero .container,
    .about-grid{
        grid-template-columns:1fr;
        display:grid;
    }

    .esic-left,
    .esic-right{
        width:100%;
    }

    .esic-left h1,
    .about-content h2,
    .section-title h2,
    .cta-content h2{
        font-size:38px;
    }

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

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

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

}



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

@media (max-width:1024px){

    .esic-hero,
    .about-esic,
    .benefit-section,
    .process-section,
    .cta-section{
        padding:80px 40px;
    }

    .esic-left h1{
        font-size:50px;
    }

    .about-content h2,
    .section-title h2,
    .cta-content h2{
        font-size:42px;
    }

    .benefit-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .service-card{
        padding:25px;
    }

}


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

@media (max-width:768px){

    .esic-hero,
    .about-esic,
    .benefit-section,
    .process-section,
    .cta-section{
        padding:70px 25px;
    }

    .esic-hero .container,
    .about-grid{
        display:flex;
        flex-direction:column;
        gap:40px;
    }

    .esic-left,
    .esic-right{
        width:100%;
    }

    .esic-left h1{
        font-size:38px;
        line-height:1.3;
    }

    .about-content h2,
    .section-title h2,
    .cta-content h2{
        font-size:34px;
        line-height:1.4;
    }

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

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

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

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

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

}


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

@media (max-width:480px){

    .esic-hero,
    .about-esic,
    .benefit-section,
    .process-section,
    .cta-section{
        padding:55px 18px;
    }

    .esic-tag,
    .small-tag{
        font-size:12px;
        padding:8px 18px;
    }

    .esic-left h1{
        font-size:30px;
        line-height:1.4;
    }

    .esic-left p,
    .about-content p,
    .benefit-card p,
    .process-box p,
    .cta-content p{
        font-size:14px;
        line-height:1.8;
    }

    .about-content h2,
    .section-title h2,
    .cta-content h2{
        font-size:28px;
    }

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

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

    .service-card{
        padding:25px 20px;
    }

    .service-card h3{
        font-size:24px;
    }

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

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

    .benefit-card,
    .process-box,
    .info-box{
        padding:25px 20px;
    }

    .info-box h3,
    .process-box h3,
    .benefit-card h3{
        font-size:20px;
    }

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

    .cta-content h2{
        line-height:1.4;
    }

    .service-item i{
        width:24px;
        height:24px;
        font-size:10px;
    }

}


    </style>


@endsection


