@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">
        <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="#">Services</a>
                        </li>

                        <li class="breadcrumb-item active">
                            Commercial Contracts
                        </li>
                    </ul>

                    <h1>Commercial Contracts</h1>

                    <p class="mt-3">
                        Protecting your business with professionally drafted,
                        reviewed and negotiated commercial agreements.
                    </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/Commercial_Contracts.jpg') }}" class="img-fluid rounded shadow mb-5"
                        alt="Commercial Contracts">

                    <span class="service-tag">
                        Commercial Law
                    </span>

                    <h2 class="service-title mt-3">
                        Commercial Contract Legal Services
                    </h2>

                    <p>

                        At Aljubail Law Firm, we provide comprehensive commercial
                        contract services designed to protect businesses,
                        investors and entrepreneurs throughout Saudi Arabia.

                    </p>

                    <p>

                        Our experienced legal team drafts, reviews and negotiates
                        contracts that reduce legal risks while ensuring
                        full compliance with Saudi regulations.

                    </p>

                    <p>

                        Whether you are signing partnership agreements,
                        vendor contracts, distribution agreements or
                        investment documents, our lawyers ensure your
                        business interests remain fully protected.

                    </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