@extends('website.main')
@section('main-content')
    <section class="hero-wrap hero-wrap-2" style="background-image: url('{{ asset('assets/images/bag2.webp') }}');">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text align-items-center justify-content-center">
                <div class="col-md-9 pt-5 text-center">
                    <p class="breadcrumbs"><span class="mr-2"><a href="{{ route('home') }}">Home <i
                                    class="fa fa-chevron-right"></i></a></span> <span>About us <i
                                class="fa fa-chevron-right"></i></span></p>
                    <h1 class="mb-0 bread">About Us</h1>
                </div>
            </div>
        </div>
    </section>


    <style>
        .about-values-section {
            background: #f8f9fb;
        }

        .about-values-section .subheading {
            color: #1F3044;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .about-card {
            background: #fff;
            padding: 40px 30px;
            border-radius: 12px;
            text-align: center;
            transition: .35s;
            height: 100%;
            border: 1px solid #edf1f5;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
        }

        .about-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 45px rgba(31, 48, 68, .15);
        }

        .about-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            border-radius: 50%;
            background: #1F3044;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-icon i {
            color: #fff;
            font-size: 30px;
        }

        .about-card h4 {
            color: #1F3044;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .about-card p {
            color: #666;
            line-height: 1.8;
        }
    </style>

    <section class="ftco-section about-values-section">
        <div class="container">

            <div class="row justify-content-center mb-5">
                <div class="col-lg-8 text-center" data-aos="fade-up">

                    <span class="subheading">Who We Are</span>

                    <h2 class="mb-3">
                        Our Commitment To Excellence
                    </h2>

                    <p>
                        We are committed to delivering exceptional legal services with integrity,
                        professionalism, and unwavering dedication. Our experienced legal team
                        provides strategic solutions tailored to every client's unique needs.
                    </p>

                </div>
            </div>

            <div class="row g-4">

                <!-- Mission -->
                <div class="col-lg-3 col-md-6" data-aos="fade-up">

                    <div class="about-card">

                        <div class="about-icon">
                            <i class="fa-solid fa-bullseye"></i>
                        </div>

                        <h4>Our Mission</h4>

                        <p>
                            To provide innovative, practical, and reliable legal solutions while
                            protecting our clients' rights and helping them achieve long-term success.
                        </p>

                    </div>

                </div>


                <!-- Vision -->
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">

                    <div class="about-card">

                        <div class="about-icon">
                            <i class="fa-solid fa-eye"></i>
                        </div>

                        <h4>Our Vision</h4>

                        <p>
                            To become one of Saudi Arabia's most trusted law firms by delivering
                            exceptional legal expertise and building lasting client relationships.
                        </p>

                    </div>

                </div>


                <!-- Values -->
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">

                    <div class="about-card">

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

                        <h4>Our Values</h4>

                        <p>
                            Integrity, transparency, professionalism, accountability, and client-first
                            service guide every decision we make and every case we handle.
                        </p>

                    </div>

                </div>


                <!-- Goal -->
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">

                    <div class="about-card">

                        <div class="about-icon">
                            <i class="fa-solid fa-flag-checkered"></i>
                        </div>

                        <h4>Our Goal</h4>

                        <p>
                            To achieve successful legal outcomes while creating lasting value,
                            protecting business interests, and supporting our clients with confidence.
                        </p>

                    </div>

                </div>

            </div>

        </div>
    </section>





    <section class="ftco-section ftco-about bg-light">
        <!-- <div class="overlay"></div> -->
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-md-8 heading-section text-center mb-4" data-aos="fade-up" data-aos-duration="1000">
                    <span class="subheading">About Us</span>
                    <h2 class="mb-4">Decades Of Excellence In Saudi Legal Solutions</h2>
                </div>
                <div class="col-md-9 text-center mb-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <p class="lead fw-bold text-dark mb-3">
                        Built on a foundation of integrity, deep legal mastery, and unwavering commitment to client
                        advocacy.
                    </p>
                    <p class="mb-3">
                        Established to navigate the evolving legal landscape of Saudi Arabia, our firm has grown into a
                        trusted legal partner for corporations, investors, and individuals alike. From resolving
                        high-stakes commercial disputes to managing complex family successions, our journey is defined
                        by strategic foresight and dedicated representation.
                    </p>
                    <p>
                        We combine years of courtroom experience with a profound understanding of KSA regulations and
                        Islamic Jurisprudence. Our mission is simple: to protect your interests, secure your legal
                        standing, and deliver comprehensive, clear solutions tailored to your unique goals.
                    </p>
                </div>
                <div class="col-md-10">
                    <div class="video-image img d-flex align-items-center justify-content-center rounded"
                        style="background-image: url({{ asset('assets/images/about.jpeg') }});" data-aos="fade-up"
                        data-aos-duration="1000" data-aos-delay="200">
                        <a href="#" class="icon d-flex align-items-center justify-content-center"><span
                                class="fa fa-play"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>





    <style>
        /* Contact Section Colors */

        .services .icon span {
            color: #1F3044 !important;
        }


        .contact-title,
        .appointment-head {
            color: #1F3044 !important;
        }


        .contact-btn {
            background: #1F3044;
            border-color: #1F3044;
            color: #fff;
        }


        .contact-btn:hover {
            background: #152231;
            border-color: #152231;
            color: #fff;
        }


        .text-danger {
            color: #dc3545 !important;
            font-size: 13px;
        }
    </style>
    <section class="ftco-appointment ftco-section img"
        style="background-image: url('{{ asset('assets/images/bg_4.jpg') }}');">

        <div class="overlay"></div>

        <div class="container-xl">
            <div class="row">


                <div class="col-md-6 d-flex align-items-center order-lg-last pl-lg-5">

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

                        <span class="subheading">Our Performance</span>

                        <h2 class="mb-3">
                            Proven Results in Complex Legal Matters
                        </h2>


                        <div class="row mt-md-5">


                            <div class="col-lg-12 mb-4">
                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-scale-balanced"></span>
                                    </div>

                                    <div class="text pl-3">
                                        <h2>Strategic Legal Counsel</h2>
                                        <p>
                                            Tailored legal advice designed to mitigate risk and ensure compliance.
                                        </p>
                                    </div>

                                </div>
                            </div>



                            <div class="col-lg-12 mb-4">
                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-shield-halved"></span>
                                    </div>

                                    <div class="text pl-3">
                                        <h2>Relentless Rights Protection</h2>
                                        <p>
                                            Strong representation in commercial litigation and disputes.
                                        </p>
                                    </div>

                                </div>
                            </div>



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

                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-user-tie"></span>
                                    </div>


                                    <div class="text pl-3">
                                        <h2>Elite Legal Team</h2>

                                        <p>
                                            Experienced attorneys with deep knowledge of Saudi laws.
                                        </p>

                                    </div>

                                </div>

                            </div>


                        </div>

                    </div>

                </div>



                <!-- Contact Form -->

                <div class="col-md-6 d-flex align-items-center">


                    <form action="{{ route('contact.store') }}" method="POST" class="appointment" data-aos="fade-up">

                        @csrf


                        <span class="subheading contact-title">
                            Drop A Message
                        </span>


                        <h2 class="mb-4 appointment-head">
                            Free Case Evaluation
                        </h2>



                        <div class="row">


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

                                <div class="form-group">

                                    <label>
                                        Your Full Name
                                    </label>


                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name') }}" placeholder="Your Full Name">


                                    @error('name')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>

                            </div>



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

                                <div class="form-group">

                                    <label>
                                        Email Address
                                    </label>


                                    <input type="email" name="email" class="form-control"
                                        value="{{ old('email') }}" placeholder="Email">


                                    @error('email')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>

                            </div>



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


                                <div class="form-group">

                                    <label>
                                        Phone Number
                                    </label>


                                    <input type="text" name="phone" class="form-control"
                                        value="{{ old('phone') }}" placeholder="Phone Number">


                                    @error('phone')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>




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


                                <div class="form-group">

                                    <label>
                                        Subject
                                    </label>


                                    <input type="text" name="subject" class="form-control"
                                        value="{{ old('subject') }}" placeholder="Subject">


                                    @error('subject')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>



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

                                <div class="form-group">


                                    <label>
                                        Message
                                    </label>


                                    <textarea name="message" rows="5" class="form-control" placeholder="Message">{{ old('message') }}</textarea>



                                    @error('message')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>



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

                                <button type="submit" class="btn contact-btn py-3 px-4 rounded">

                                    Send Message

                                </button>

                            </div>


                        </div>


                    </form>


                </div>


            </div>

        </div>


    </section>


    <h1 class="mb-0 bread mt-4" style="text-align: center">Our Team</h1>


    @include('website.partials.teamsec')

    <section class="ftco-section testimony-section bg-light">
        <div class="container-xl">
            <div class="row justify-content-center pb-4">
                <div class="col-md-7 text-center heading-section" data-aos="fade-up" data-aos-duration="1000">
                    <span class="subheading">Testimonial</span>
                    <h2 class="mb-3">Customer Reviews</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <div class="carousel-testimony">
                        <!-- Item 1 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Exceptional and highly professional legal service. Our
                                        commercial dispute was handled with great speed, precision, and deep knowledge
                                        of Saudi regulations. Highly recommended!</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img" style="background-image: url(images/review1.jfif)">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Sheikh Abdulrahman Al-Sudairi</p>
                                            <span class="position">Board Chairman — Riyadh</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 2 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">An outstanding experience with the legal team. Clear,
                                        transparent guidance throughout our corporate litigation, ensuring our company's
                                        assets and rights were fully protected.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img"
                                            style="background-image: url({{ asset('assets/images/person_2.jpg') }})">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Eng. Khalid Al-Ghamdi</p>
                                            <span class="position">CEO — Jeddah</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 3 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Without a doubt, the best law firm I have worked with in the
                                        Kingdom. Prompt responses and dedicated handling of complex family succession
                                        and estate matters.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img" style="background-image: url(images/review3.jfif)">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Dr. Fahad Al-Otaibi</p>
                                            <span class="position">Business Consultant — Dammam</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 4 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Extensive expertise in KSA judicial systems and commercial laws.
                                        They helped us finalize complex cross-border contracts and resolve financial
                                        liabilities smoothly.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img" style="background-image: url(images/review2.jfif)">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Saud Al-Shehri</p>
                                            <span class="position">Entrepreneur — Khobar</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 5 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Punctual, discreet, and highly competent. Partnering with them
                                        gives you full peace of mind regarding the progress and outcome of your legal
                                        proceedings.</p>
                                    <div class="d-flex align-items-center">
                                        <!-- <div class="user-img" style="background-image: url()">
              </div> -->
                                        <div class="pl-3 tx">
                                            <p class="name">Ahmed Al Qahtani</p>
                                            <span class="position">Business Development Director — Makkah</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection