@extends('website.main')
@section('main-content')
    <style>
        .service-banner {
            position: relative;
            padding: 120px 0;
            background: url('{{ asset('assets/images/bg_4.jpg') }}') center center/cover no-repeat;
            overflow: hidden;
        }

        .service-banner .overlay {
            position: absolute;
            inset: 0;
            background: rgba(20, 20, 20, .75);
        }

        .service-banner .container-xl {
            position: relative;
            z-index: 2;
        }

        .service-banner h1 {
            color: #fff;
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .service-banner p {
            color: #ddd;
            font-size: 18px;
            max-width: 650px;
            margin: auto;
        }

        .breadcrumb {
            background: none;
            padding: 0;
        }

        .breadcrumb li {
            color: #fff;
        }

        .breadcrumb li a {
            color: #1F3044;
            text-decoration: none;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: #fff;
        }

        /*=========================================
                        SERVICE DETAILS
                =========================================*/

        .service-details {
            background: #F5F7FA;
        }

        .service-title {
            font-size: 38px;
            font-weight: 700;
            color: #222;
        }

        .service-tag {
            display: inline-block;
            padding: 8px 18px;
            background: #1F3044;
            color: #fff;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .section-title {
            position: relative;
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 40px;
        }

        .section-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -12px;
            width: 80px;
            height: 4px;
            background: #1F3044;
        }

        /*=========================================
                        FEATURE CARDS
                =========================================*/

        .feature-card {
            background: #fff;
            padding: 35px;
            border-radius: 15px;
            text-align: center;
            transition: .4s;
            border: 1px solid #ececec;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
        }

        .feature-card .icon {
            width: 80px;
            height: 80px;
            margin: auto;
            border-radius: 50%;
            background: #1F3044;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 25px;
            transition: .4s;
        }

        .feature-card:hover .icon {
            background: #152332;
        }

        .feature-card h5 {
            font-weight: 700;
            margin-bottom: 15px;
        }

        .feature-card p {
            color: #666;
            line-height: 1.8;
        }

        /*=========================================
                        SERVICE LIST
                =========================================*/

        .service-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .service-list li {
            background: #fff;
            margin-bottom: 15px;
            padding: 18px 20px;
            border-left: 4px solid #1F3044;
            border-radius: 8px;
            transition: .3s;
            font-weight: 500;
        }

        .service-list li:hover {
            background: #1F3044;
            color: #fff;
            transform: translateX(8px);
        }

        .service-list li i {
            color: #1F3044;
            margin-right: 10px;
        }

        .service-list li:hover i {
            color: #fff;
        }

        /*=========================================
                            FAQ
                =========================================*/

        .accordion-item {
            border: none;
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
        }

        .accordion-button {
            background: #fff;
            font-weight: 600;
            padding: 22px;
        }

        .accordion-button:not(.collapsed) {
            background: #1F3044;
            color: #fff;
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-body {
            line-height: 1.9;
            color: #666;
        }

        /*=========================================
                        SIDEBAR
                =========================================*/

        .sidebar-box {
            background: #fff;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        }

        .sidebar-box h4 {
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
        }

        .sidebar-box h4::after {
            content: "";
            width: 60px;
            height: 3px;
            background: #1F3044;
            position: absolute;
            left: 0;
            bottom: -10px;
        }

        .sidebar-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-box ul li {
            border-bottom: 1px solid #eee;
        }

        .sidebar-box ul li:last-child {
            border: none;
        }

        .sidebar-box ul li a {
            display: block;
            padding: 15px 0;
            text-decoration: none;
            color: #333;
            transition: .3s;
        }

        .sidebar-box ul li a:hover {
            color: #1F3044;
            padding-left: 10px;
        }

        .contact-box {
            background: #152332;
            color: #fff;
        }

        .contact-box h4,
        .contact-box p {
            color: #fff;
        }

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

        .btn-warning {
            background: #1F3044;
            border-color: #1F3044;
            color: #fff;
            transition: .3s;
        }

        .btn-warning:hover {
            background: #152332;
            border-color: #152332;
        }

        .btn-dark:hover {
            background: #1F3044;
            border-color: #1F3044;
        }

        .btn-outline-warning {
            border: 2px solid #1F3044;
            color: #1F3044;
        }

        .btn-outline-warning:hover {
            background: #1F3044;
            color: #fff;
        }

        /*=========================================
                        IMAGE
                =========================================*/

        .service-details img {
            border-radius: 18px;
            transition: .4s;
        }

        .service-details img:hover {
            transform: scale(1.02);
        }

        /*=========================================
                        STICKY
                =========================================*/

        .sticky-top {
            top: 30px !important;
        }

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

        @media(max-width:991px) {

            .service-banner {
                padding: 80px 0;
            }

            .service-banner h1 {
                font-size: 36px;
            }

            .service-title {
                font-size: 30px;
            }

            .section-title {
                font-size: 26px;
            }

            .sticky-top {
                position: relative !important;
                top: 0 !important;
            }

        }

        @media(max-width:767px) {

            .service-banner h1 {
                font-size: 30px;
            }

            .feature-card {
                padding: 25px;
            }

            .sidebar-box {
                padding: 25px;
            }

            .section-title {
                font-size: 24px;
            }

        }

        /*=========================================
                        SERVICE HERO
                =========================================*/

        <style>.service-banner {
            position: relative;
            background: url('{{ asset('assets/images/bg_4.jpg') }}') center center/cover no-repeat;
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>

    <style>
        .service-banner .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .65);
        }

        .service-banner .container-xl {
            position: relative;
            z-index: 2;
        }

        .service-banner h1 {
            font-size: 58px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 25px;
        }

        .service-banner p {
            color: #f1f1f1;
            font-size: 22px;
            line-height: 1.8;
            max-width: 750px;
            margin: auto;
        }

        /*=========================================
            BREADCRUMB FIX
            =========================================*/

        .service-banner .breadcrumb {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            list-style: none;
            margin: 0 0 25px;
            padding: 0;
            background: transparent;
        }

        .service-banner .breadcrumb li {
            list-style: none;
        }

        .service-banner .breadcrumb-item {
            color: #fff;
            font-size: 16px;
        }

        .service-banner .breadcrumb-item a {
            color: #1F3044;
            text-decoration: none;
            transition: .3s;
        }

        .service-banner .breadcrumb-item a:hover {
            color: #fff;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            content: "/";
            color: #fff;
            padding-right: 10px;
        }

        /*=========================================
            REMOVE BULLETS
            =========================================*/

        .service-banner ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .service-banner ul li {
            list-style: none;
        }

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

        @media(max-width:991px) {

            .service-banner {
                min-height: 340px;
            }

            .service-banner h1 {
                font-size: 42px;
            }

            .service-banner p {
                font-size: 18px;
            }

        }

        @media(max-width:767px) {

            .service-banner {
                min-height: 280px;
                padding: 70px 0;
            }

            .service-banner h1 {
                font-size: 32px;
            }

            .service-banner p {
                font-size: 16px;
            }

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

        }

        .service-tag,
        .btn-warning,
        .accordion-button:not(.collapsed) {
            background: linear-gradient(135deg, #1F3044, #2E4864) !important;
            border-color: #1F3044 !important;
            color: #fff !important;
        }

        .feature-card .icon {
            background: linear-gradient(135deg, #1F3044, #2E4864) !important;
        }

        .feature-card:hover .icon,
        .contact-box {
            background: linear-gradient(135deg, #152332, #1F3044) !important;
        }

        .service-banner .overlay {
            background: linear-gradient(135deg, rgba(21, 35, 50, .85), rgba(31, 48, 68, .78)) !important;
        }
    </style>

<section class="service-banner" style="background: url('{{ asset('assets/images/bg_4.jpg') }}') center center / cover no-repeat;">

    <div class="overlay"></div>
    <div class="container-xl">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center text-white">

                <ul class="breadcrumb justify-content-center mb-3">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}">Home</a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="{{ route('services') }}">Services</a>
                    </li>

                    <li class="breadcrumb-item active">
                        Labor & Employment Law
                    </li>
                </ul>

                <h1>Labor & Employment Law</h1>

                <p class="mt-3">
                    Helping employers and employees navigate workplace regulations,
                    employment contracts and labor disputes with confidence.
                </p>

            </div>
        </div>
    </div>
</section>
    <section class="service-details py-5">

        <div class="container-xl">

            <div class="row">

                <!-- LEFT CONTENT -->

                <div class="col-lg-8">
<img src="{{ asset('assets/images/labour.jfif') }}" class="img-fluid rounded shadow mb-5"
    alt="Labor & Employment Law">

<span class="service-tag">
    Labor & Employment Law
</span>

<h2 class="service-title mt-3">
    Labor & Employment Legal Services
</h2>

<p>

    At Aljubail Law Firm, we provide comprehensive labor and employment
    legal services to employers, employees, and corporate organizations
    throughout Saudi Arabia. Our legal team helps clients navigate
    employment laws while ensuring full compliance with the Saudi Labor Law.

</p>

<p>

    Our experienced lawyers advise on employment contracts, workplace
    policies, employee rights, termination procedures, disciplinary
    actions, compensation matters, and labor dispute resolution.
    We work proactively to minimize legal risks and protect our clients'
    interests.

</p>

<p>

    Whether you are an employer seeking legal compliance or an employee
    requiring representation in labor disputes, our lawyers provide
    practical legal solutions tailored to your specific needs.

</p>

<hr class="my-5">
                    <!-- WHY CHOOSE US -->

                    <h3 class="section-title mb-4">

                        Why Choose Aljubail Law Firm?

                    </h3>

                    <div class="row">

                        <div class="col-md-6 mb-4">

                            <div class="feature-card">

                                <div class="icon">
                                    <i class="fa fa-scale-balanced"></i>
                                </div>

                                <h5>
                                    Experienced Lawyers
                                </h5>

                                <p>

                                    Highly qualified legal professionals with
                                    years of commercial law experience.

                                </p>

                            </div>

                        </div>

                        <div class="col-md-6 mb-4">

                            <div class="feature-card">

                                <div class="icon">
                                    <i class="fa fa-shield"></i>
                                </div>

                                <h5>
                                    Business Protection
                                </h5>

                                <p>

                                    We draft contracts that safeguard
                                    your investments and business rights.

                                </p>

                            </div>

                        </div>

                        <div class="col-md-6 mb-4">

                            <div class="feature-card">

                                <div class="icon">
                                    <i class="fa fa-clock"></i>
                                </div>

                                <h5>
                                    Fast Response
                                </h5>

                                <p>

                                    Quick consultations and efficient
                                    legal documentation.

                                </p>

                            </div>

                        </div>

                        <div class="col-md-6 mb-4">

                            <div class="feature-card">

                                <div class="icon">
                                    <i class="fa fa-user-shield"></i>
                                </div>

                                <h5>
                                    Confidential Services
                                </h5>

                                <p>

                                    Complete confidentiality
                                    throughout every legal matter.

                                </p>

                            </div>

                        </div>

                    </div>

                    <hr class="my-5">

                    <!-- FEATURES -->

                    <h3 class="section-title mb-4">

                        Our Legal Services

                    </h3>

                    <div class="row">

                        <div class="col-md-6">

                            <ul class="service-list">

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Commercial Agreement Drafting
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Contract Review
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Partnership Agreements
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Vendor Contracts
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Employment Agreements
                                </li>

                            </ul>

                        </div>

                        <div class="col-md-6">

                            <ul class="service-list">

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Joint Venture Agreements
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Distribution Contracts
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Legal Consultation
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Contract Negotiation
                                </li>

                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    Dispute Resolution
                                </li>

                            </ul>

                        </div>

                    </div>

                    <hr class="my-5">

                    <!-- FAQ -->


                    <div class="sidebar-box">

                        <h4>

                            Download Brochure

                        </h4>

                        <p>

                            Download our company profile
                            and legal services brochure.

                        </p>

                        <a href="#" class="btn btn-outline-warning w-100">

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

                            Download PDF

                        </a>

                    </div>
                </div>

                <!-- SIDEBAR -->

                <div class="col-lg-4">

                    <div class="sticky-top sidebar" style="top:30px;">

                        <div class="sidebar-box">

                            <h4>
                                Practice Areas
                            </h4>

                            <ul>

                                <li><a href="#">Commercial Contracts</a></li>

                                <li><a href="#">Corporate Law</a></li>

                                <li><a href="#">Commercial Litigation</a></li>

                                <li><a href="#">Tax Disputes</a></li>

                                <li><a href="#">Foreign Investment</a></li>

                                <li><a href="#">Intellectual Property</a></li>

                                <li><a href="#">Banking & Finance</a></li>

                            </ul>

                        </div>

                        <div class="sidebar-box contact-box">

                            <h4>

                                Need Legal Assistance?

                            </h4>

                            <p>

                                Our lawyers are available to assist
                                you with your legal matters.

                            </p>

                            <a href="tel:+966554944497" class="btn btn-warning w-100 mb-3">

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

                                Call Now

                            </a>

                            <a href="contact.html" class="btn btn-dark w-100">

                                Book Consultation

                            </a>

                        </div>


                    </div>

                </div>

            </div>

        </div>

    </section>





@endsection
