@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">
                        Intellectual Property
                    </li>
                </ul>

                <h1>Intellectual Property</h1>

                <p class="mt-3">
                    Protecting trademarks, copyrights, patents and intellectual
                    assets through comprehensive legal solutions.
                </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/Intellectual Property.jpg') }}" class="img-fluid rounded shadow mb-5"
    alt="Intellectual Property">

<span class="service-tag">
    Intellectual Property
</span>

<h2 class="service-title mt-3">
    Intellectual Property Legal Services
</h2>

<p>

    At Aljubail Law Firm, we provide comprehensive intellectual property
    legal services to businesses, entrepreneurs, innovators, and creators
    across Saudi Arabia. We help clients protect their valuable intellectual
    assets while ensuring compliance with Saudi intellectual property laws.

</p>

<p>

    Our experienced legal team assists with trademark registration,
    patent protection, copyright matters, industrial designs,
    licensing agreements, and intellectual property enforcement,
    safeguarding your innovations and brand identity from infringement.

</p>

<p>

    Whether you need to register a trademark, protect a patent,
    secure copyrights, negotiate licensing agreements, or resolve
    intellectual property disputes, our lawyers provide strategic
    legal solutions that preserve and maximize the value of your
    intellectual assets.

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