@extends('website.layouts.app')
@section('content')
    <style>
        #about_us_s6 .talk_sales {
            margin-left: 0px;
        }

        .invalid-feedback {
            display: block !important;
        }
    </style>
    <style>
        .form-select-container_2 {
            display: flex;
            align-items: center;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            padding: 0.5px .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .form-select-container_2 .form-select {
            border: none;
            outline: none;
            appearance: none;
            padding: 0;
            background-position: left 2.5rem center;
            width: 63px;
            font-size: 16px;
            color: #000000;
            font-family: "Montserrat", sans-serif;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: -0.2px;
        }

        .p_main_div_no_p {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        @media (min-width: 301px) and (max-width: 600px) {
            .ce_icon {
                height: 17px;
                width: 20px;
                object-fit: contain;
            }
        }

        @media (min-width: 601px) and (max-width: 991px) {
            .ce_icon {
                height: 15px;
                width: 22px;
                object-fit: contain;
            }
        }

        @media (min-width: 992px) and (max-width: 1028px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 405px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px;
            }

            .ce_icon {
                height: 24px;
                width: 22px;
                object-fit: contain;
            }

        }

        @media (min-width: 1029px) and (max-width: 1400px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 480px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px;
            }

            .ce_icon {
                height: 24px;
                width: 22px;
                object-fit: contain;
            }

        }

        @media (min-width: 1401px) and (max-width: 1440px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 485px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px;
            }

            .ce_icon {
                height: 26px;
                width: 25px;
                object-fit: contain;
            }

        }

        @media (min-width: 1441px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 485px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px;
            }

            .ce_icon {
                height: 26px;
                width: 25px;
                object-fit: contain;
            }


        }
    </style>
    <section id="about_us_banner" class="about_us_banner_bg">
        <div class="container-fluid banner_height align-content-end">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-lg-11 col-md-11">
                        <div class="row d-flex justify-content-center">
                            <div class="col-xxl-8 col-xl-8 col-lg-10 col-md-11">
                                <div class="b_n_app_content text-center">
                                    <h2>{{ $page->about_heading_en }}</h2>
                                    <p>{{ $page->about_description_en }}</p>
                                    <div class="b_n_app_buttons">
                                        <span class="faq">
                                            <a href="{{ $page->need_help_link }}">Contact Sales</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="b_n_app_img  text-center">
                            <img src="{{ asset('uploads/about_page/' . $page->about_image) }}" class="img-fluid  appHub"
                                alt="{{ str_replace('-', ' ', pathinfo($page->about_image, PATHINFO_FILENAME)) }}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="sec_brand_slide" class="pt-0">
        <div class="container-fluid px-0">
            <div class="brand_content text-center">
                <h2>{{ $page->trusted_by_en }}</h2>
            </div>
            <div class="brand_slider">
                <div class="slide-track mt-0 mb-0">
                    @if (count($tickers) > 0)
                        @foreach ($tickers as $index => $ticker)
                            <div class="brand_slide">
                                <img src="{{ asset('uploads/tickers/' . $ticker->image) }}"
                                    alt="{{ str_replace('-', ' ', pathinfo(substr($ticker->image, 11), PATHINFO_FILENAME)) }}"
                                    class="img-fluid" loading="lazy" />
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>


    <section id="numbers" class="back_ground">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="numbers_content text-center">
                    <h2>{{ $homePage->our_results_en }}</h2>
                </div>
                <div class="row d-flex justify-content-center pt-md-4 pt-3">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gy-3">
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><span class="counter" data-target="{{ $homePage->counter_one }}">0</span>+</h5>
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 p_top">
                                                <h6>{{ $homePage->counter_one_text_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><span class="counter" data-target="{{ $homePage->counter_two }}">0</span>M+
                                        </h5>
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 p_top">
                                                <h6>{{ $homePage->counter_two_text_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><span class="counter" data-target="{{ $homePage->counter_three }}">0</span>K+
                                        </h5>
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 p_top">
                                                <h6>{{ $homePage->counter_three_text_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><span class="counter" data-target="{{ $homePage->counter_four }}">0</span>+
                                        </h5>
                                        <div class="row">
                                            <div class="col-xxl-12 col-lg-12 p_top">
                                                <h6>{{ $homePage->counter_four_text_en }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about_us_s4" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="about_us_s4_content">
                            <h2>{{ $page->about_sub_heading_en }}</h2>
                            <p>{{ $page->about_sub_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about_us_s5" >
        <div class="container-fluid a_dashboard_bg">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="a_dashboard_content text-center">
                    <h2>{{ $page->application_dashboard_heading_en }}</h2>
                    {{-- <div class="row d-flex justify-content-center"> --}}
                    {{-- <div class="col-lg-7 col-md-8">
                            <p>{{$page->application_dashboard_description_en}}</p>
                        </div> --}}
                    {{-- </div> --}}
                </div>
                <section id="about_us_tabs" class="s-p-tb">
                    <div class="row d-flex justify-content-center">
                        <div class="col-xl-11 col-lg-11 col-md-12 col-12">
                            <div class="custom-nav-pills text-center " role="tablist">
                                <button class="btn filt_btn_1 active" data-bs-toggle="pill" data-bs-target="#category1"
                                    type="button">
                                    {{ $page->result_heading_en }}
                                </button>
                                <button class="btn filt_btn_1" data-bs-toggle="pill" data-bs-target="#category2"
                                    type="button">
                                    {{ $page->evaluation_category_en }}
                                </button>
                            </div>
                            <div class="tab-content mt-md-5 mt-4" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="category1">
                                    <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-3 pt-2">
                                        <div class="col-xl-6 col-lg-6 col-md-12" data-tag="Category1">
                                            <div class="about_us_c_content">
                                                <div class="card shadow py-lg-5 ">
                                                    <div class="row d-flex justify-content-center ">
                                                        <div class="col-lg-10 col-md-10 col-12 px-lg-0">
                                                            <h2>{{ $page->counter_heading_one_en }}</h2>
                                                            <h6>{{ $page->counter_description_one_en }}</h6>
                                                            <div class="p_main_div">
                                                                <div class="alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->counter_heading_two_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->counter_description_two_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->counter_heading_three_en }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started"><a
                                                                        href="{{ $page->counter_description_three_en }}">Read
                                                                        More</a></span>
                                                                <span class="talk_sales"><a
                                                                        href="{{ $page->counter_heading_four_en }}">Talk
                                                                        to
                                                                        Sales</a></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-12" data-tag="Category1">
                                            <div class="about_us_c_content">
                                                <div class="card shadow py-lg-5">
                                                    <div class="row gy-3 d-flex justify-content-center ">
                                                        <div class="col-lg-10 col-md-10  col-12 px-lg-0">
                                                            <h2>{{ $page->counter_description_four_en }}</h2>
                                                            <h6>{{ $page->qualification_description_en }}</h6>

                                                            <div class="p_main_div">
                                                                <div class="alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->qualification_point_one_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->qualification_point_two_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->qualification_point_three_en }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started"><a
                                                                        href="{{ $page->qualification_read_more_link_en }}">Read
                                                                        More</a></span>
                                                                <span class="talk_sales"><a
                                                                        href="{{ $page->qualification_talk_to_sales_en }}">Talk
                                                                        to
                                                                        Sales</a></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="category2">
                                    <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-4 pt-2">
                                        <div class="col-xl-6 col-lg-6 col-md-12" data-tag="Category2">
                                            <div class="about_us_c_content">
                                                <div class="card shadow py-lg-5">
                                                    <div class="row gy-3 d-flex justify-content-center ">
                                                        <div class="col-lg-10 col-md-10 col-12 px-lg-0">
                                                            <h2>{{ $page->evaluation_heading_en }}</h2>
                                                            <h6>{{ $page->evaluation_description_en }}</h6>
                                                            <div class="p_main_div">
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->evaluation_point_one_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->evaluation_point_two_en }}</span>
                                                                </div>
                                                                <div class="pt-2 alignsline">
                                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                        alt="mark" class="itm_margin_about" />
                                                                    <span
                                                                        class="para_text ps-3">{{ $page->evaluation_point_three_en }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started"><a
                                                                        href="{{ $page->evaluation_read_more_link_en }}">Read
                                                                        More</a></span>
                                                                <span class="talk_sales"><a
                                                                        href="{{ $page->evaluation_talk_to_sales_en }}">Talk
                                                                        to
                                                                        Sales</a></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>

    <section id="about_us_s6" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-8 col-lg-9 col-md-12 col-12">
                        <div class="about_us_s6_content text-center">
                            <h2>{{ $page->shape_future_heading_en }}</h2>
                        </div>
                    </div>
                </div>

                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gy-4 pt-lg-4">
                            <div class="col-xl-6 ">
                                <div class="accordion accordion-item pt-md-4 pt-1" id="accordionExample">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button  align-content-center " type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
                                            aria-controls="collapseOne">
                                            <img src="{{ asset('website/assets/images/our mission.png') }}"
                                                alt="Our Mission" class="img-fluid"
                                                style="width: 42px; height: 42px; object-fit: contain;" />
                                            <h2>{{ $page->accordion_heading_one_en }}</h2>
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <p>{{ $page->accordion_description_one_en }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
                                            aria-controls="collapseTwo">
                                            <img src="{{ asset('website/assets/images/our values.png') }}"
                                                alt="Our values" class="img-fluid"
                                                style="width: 42px; height: 42px; object-fit: contain;" />
                                            <h2>{{ $page->accordion_heading_two_en }}</h2>
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <p>{{ $page->accordion_description_two_en }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            <img src="{{ asset('website/assets/images/our vision.png') }}"
                                                alt="Our vision" class="img-fluid"
                                                style="width: 42px; height: 42px; object-fit: contain;" />
                                            <h2>{{ $page->accordion_heading_three_en }}</h2>
                                        </button>
                                    </h2>
                                    <div id="collapseThree" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <p>{{ $page->accordion_description_three_en }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="tabs_buttons">
                                    <span class="get_started">
                                        {{-- <a href="{{ $page->accordion_get_started_link }}">Get
                                            Started</a></span> --}}
                                        <span class="talk_sales"><a href="{{ $page->accordion_get_started_link }}">Talk
                                                to
                                                Sales</a></span>
                                </div>

                            </div>

                            <div class="col-xl-6 align-content-center">
                                <div class="about_us_s6_img">
                                    <img src="{{ asset('uploads/about_page/' . $page->accordion_image) }}"
                                        class="img-fluid w-100"
                                        alt="{{ str_replace('-', ' ', pathinfo($page->accordion_image, PATHINFO_FILENAME)) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="track_my_ap_s5" class="track_my_ap_s5_bg">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto ">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12 track_my_ap_s5_bg_l">
                        <div class="row row px-xl-5 px-lg-5 px-md-3 px-2 gy-4">
                            <div class="col-xl-6 col-lg-6  align-content-center text-lg-start text-center">
                                <div class="sms_service_content">
                                    <h2>{{ $page->join_our_team_en }}</h2>
                                    <p>{{ $page->join_our_team_description_en }}</p>
                                    <div class="b_n_app_buttons">
                                        <span class="faq">
                                            <a type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#staticBackdropOneFive">Contact us</a>
                                            {{-- <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#staticBackdropOne">
                                                Contact us
                                            </button> --}}
                                        </span>
                                    </div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="staticBackdropOneFive" data-bs-backdrop="static"
                                        data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                        aria-hidden="true">
                                        <div class="modal-dialog">
                                            <form method="post" id="careerForm" name="careerForm">
                                                @csrf
                                                <div class="modal-content">
                                                    <div class="modal-header  border-0">
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h1 class="modal-title text-center staticBackdropLabel pb-3"
                                                            id="staticBackdropLabel">Join now</h1>
                                                        <div class="mb-1">
                                                            <label class="form-label">Name</label>
                                                            <input type="text" class="form-control"
                                                                placeholder="Enter here" name="name" id="name"
                                                                required>
                                                            <span></span>
                                                        </div>
                                                        <div class="mb-1">
                                                            <label class="form-label">Email</label>
                                                            <input type="email" id="email" name="email"
                                                                class="form-control" placeholder="Enter here" required>
                                                            <span></span>
                                                        </div>
                                                        <div class="mb-1">
                                                            <label class="form-label">Phone</label>
                                                            <div class="form-select-container_2" id="phone">
                                                                <select class="form-select pl-1" name="code"
                                                                    aria-label="Default select example" required>
                                                                    <option value="+971" disabled="" selected="">
                                                                        +971</option>
                                                                    <option value="+93">+93</option>
                                                                    <option value="+355">+355</option>
                                                                    <option value="+376">+376</option>
                                                                    <option value="+244">+244</option>
                                                                    <option value="+1-268">+1-268</option>
                                                                    <option value="+54">+54</option>
                                                                    <option value="+374">+374</option>
                                                                    <option value="+297">+297</option>
                                                                    <option value="+61">+61</option>
                                                                    <option value="+43">+43</option>
                                                                    <option value="+994">+994</option>
                                                                    <option value="+1-242">+1-242</option>
                                                                    <option value="+973">+973</option>
                                                                    <option value="+880">+880</option>
                                                                    <option value="+1-246">+1-246</option>
                                                                    <option value="+375">+375</option>
                                                                    <option value="+32">+32</option>
                                                                    <option value="+501">+501</option>
                                                                    <option value="+229">+229</option>
                                                                    <option value="+1-441">+1-441</option>
                                                                    <option value="+975">+975</option>
                                                                    <option value="+591">+591</option>
                                                                    <option value="+387">+387</option>
                                                                    <option value="+267">+267</option>
                                                                    <option value="+55">+55</option>
                                                                    <option value="+1-284">+1-284</option>
                                                                    <option value="+673">+673</option>
                                                                    <option value="+359">+359</option>
                                                                    <option value="+226">+226</option>
                                                                    <option value="+257">+257</option>
                                                                    <option value="+855">+855</option>
                                                                    <option value="+237">+237</option>
                                                                    <option value="+1">+1</option>
                                                                    <option value="+238">+238</option>
                                                                    <option value="+1-345">+1-345</option>
                                                                    <option value="+236">+236</option>
                                                                    <option value="+61">+61</option>
                                                                    <option value="+56">+56</option>
                                                                    <option value="+86">+86</option>
                                                                    <option value="+61">+61</option>
                                                                    <option value="+61">+61</option>
                                                                    <option value="+57">+57</option>
                                                                    <option value="+269">+269</option>
                                                                    <option value="+242">+242</option>
                                                                    <option value="+243">+243</option>
                                                                    <option value="+682">+682</option>
                                                                    <option value="+506">+506</option>
                                                                    <option value="+225">+225</option>
                                                                    <option value="+385">+385</option>
                                                                    <option value="+53">+53</option>
                                                                    <option value="+599">+599</option>
                                                                    <option value="+357">+357</option>
                                                                    <option value="+420">+420</option>
                                                                    <option value="+45">+45</option>
                                                                    <option value="+253">+253</option>
                                                                    <option value="+1-767">+1-767</option>
                                                                    <option value="+1-809">+1-809</option>
                                                                    <option value="+670">+670</option>
                                                                    <option value="+56">+56</option>
                                                                    <option value="+20">+20</option>
                                                                    <option value="+503">+503</option>
                                                                    <option value="+240">+240</option>
                                                                    <option value="+291">+291</option>
                                                                    <option value="+372">+372</option>
                                                                    <option value="+251">+251</option>
                                                                    <option value="+500">+500</option>
                                                                    <option value="+298">+298</option>
                                                                    <option value="+679">+679</option>
                                                                    <option value="+358">+358</option>
                                                                    <option value="+33">+33</option>
                                                                    <option value="+594">+594</option>
                                                                    <option value="+689">+689</option>
                                                                    <option value="+241">+241</option>
                                                                    <option value="+220">+220</option>
                                                                    <option value="+995">+995</option>
                                                                    <option value="+49">+49</option>
                                                                    <option value="+233">+233</option>
                                                                    <option value="+350">+350</option>
                                                                    <option value="+30">+30</option>
                                                                    <option value="+299">+299</option>
                                                                    <option value="+1-473">+1-473</option>
                                                                    <option value="+590">+590</option>
                                                                    <option value="+1-671">+1-671</option>
                                                                    <option value="+502">+502</option>
                                                                    <option value="+224">+224</option>
                                                                    <option value="+245">+245</option>
                                                                    <option value="+592">+592</option>
                                                                    <option value="+509">+509</option>
                                                                    <option value="+504">+504</option>
                                                                    <option value="+852">+852</option>
                                                                    <option value="+36">+36</option>
                                                                    <option value="+354">+354</option>
                                                                    <option value="+91">+91</option>
                                                                    <option value="+62">+62</option>
                                                                    <option value="+98">+98</option>
                                                                    <option value="+964">+964</option>
                                                                    <option value="+353">+353</option>
                                                                    <option value="+972">+972</option>
                                                                    <option value="+39">+39</option>
                                                                    <option value="+1-876">+1-876</option>
                                                                    <option value="+81">+81</option>
                                                                    <option value="+44">+44</option>
                                                                    <option value="+962">+962</option>
                                                                    <option value="+7">+7</option>
                                                                    <option value="+254">+254</option>
                                                                    <option value="+686">+686</option>
                                                                    <option value="+965">+965</option>
                                                                    <option value="+996">+996</option>
                                                                    <option value="+855">+855</option>
                                                                    <option value="+371">+371</option>
                                                                    <option value="+961">+961</option>
                                                                    <option value="+266">+266</option>
                                                                    <option value="+231">+231</option>
                                                                    <option value="+218">+218</option>
                                                                    <option value="+423">+423</option>
                                                                    <option value="+370">+370</option>
                                                                    <option value="+352">+352</option>
                                                                    <option value="+853">+853</option>
                                                                    <option value="+389">+389</option>
                                                                    <option value="+261">+261</option>
                                                                    <option value="+265">+265</option>
                                                                    <option value="+60">+60</option>
                                                                    <option value="+960">+960</option>
                                                                    <option value="+223">+223</option>
                                                                    <option value="+356">+356</option>
                                                                    <option value="+692">+692</option>
                                                                    <option value="+596">+596</option>
                                                                    <option value="+222">+222</option>
                                                                    <option value="+230">+230</option>
                                                                    <option value="+262">+262</option>
                                                                    <option value="+52">+52</option>
                                                                    <option value="+691">+691</option>
                                                                    <option value="+373">+373</option>
                                                                    <option value="+377">+377</option>
                                                                    <option value="+976">+976</option>
                                                                    <option value="+382">+382</option>
                                                                    <option value="+1-664">+1-664</option>
                                                                    <option value="+212">+212</option>
                                                                    <option value="+258">+258</option>
                                                                    <option value="+95">+95</option>
                                                                    <option value="+264">+264</option>
                                                                    <option value="+674">+674</option>
                                                                    <option value="+977">+977</option>
                                                                    <option value="+31">+31</option>
                                                                    <option value="+599">+599</option>
                                                                    <option value="+64">+64</option>
                                                                    <option value="+505">+505</option>
                                                                    <option value="+227">+227</option>
                                                                    <option value="+234">+234</option>
                                                                    <option value="+683">+683</option>
                                                                    <option value="+1-670">+1-670</option>
                                                                    <option value="+47">+47</option>
                                                                    <option value="+968">+968</option>
                                                                    <option value="+92">+92</option>
                                                                    <option value="+680">+680</option>
                                                                    <option value="+970">+970</option>
                                                                    <option value="+507">+507</option>
                                                                    <option value="+675">+675</option>
                                                                    <option value="+595">+595</option>
                                                                    <option value="+51">+51</option>
                                                                    <option value="+63">+63</option>
                                                                    <option value="+48">+48</option>
                                                                    <option value="+351">+351</option>
                                                                    <option value="+1-787">+1-787</option>
                                                                    <option value="+974">+974</option>
                                                                    <option value="+262">+262</option>
                                                                    <option value="+40">+40</option>
                                                                    <option value="+7">+7</option>
                                                                    <option value="+250">+250</option>
                                                                    <option value="+966">+966</option>
                                                                    <option value="+421">+421</option>
                                                                    <option value="+386">+386</option>
                                                                    <option value="+677">+677</option>
                                                                    <option value="+252">+252</option>
                                                                    <option value="+27">+27</option>
                                                                    <option value="+82">+82</option>
                                                                    <option value="+211">+211</option>
                                                                    <option value="+34">+34</option>
                                                                    <option value="+94">+94</option>
                                                                    <option value="+249">+249</option>
                                                                    <option value="+597">+597</option>
                                                                    <option value="+268">+268</option>
                                                                    <option value="+46">+46</option>
                                                                    <option value="+41">+41</option>
                                                                    <option value="+963">+963</option>
                                                                    <option value="+886">+886</option>
                                                                    <option value="+992">+992</option>
                                                                    <option value="+255">+255</option>
                                                                    <option value="+66">+66</option>
                                                                    <option value="+228">+228</option>
                                                                    <option value="+690">+690</option>
                                                                    <option value="+676">+676</option>
                                                                    <option value="+1-868">+1-868</option>
                                                                    <option value="+216">+216</option>
                                                                    <option value="+993">+993</option>
                                                                    <option value="+1-649">+1-649</option>
                                                                    <option value="+676">+676</option>
                                                                    <option value="+1-869">+1-869</option>
                                                                    <option value="+1-787">+1-787</option>
                                                                    <option value="+1-868">+1-868</option>
                                                                    <option value="+233">+233</option>
                                                                    <option value="+44">+44</option>
                                                                    <option value="+1">+1</option>
                                                                    <option value="+855">+855</option>
                                                                    <option value="+855">+855</option>
                                                                    <option value="+995">+995</option>
                                                                    <option value="+54">+54</option>
                                                                    <option value="+242">+242</option>
                                                                    <option value="+238">+238</option>
                                                                    <option value="+49">+49</option>
                                                                    <option value="+31">+31</option>
                                                                    <option value="+46">+46</option>
                                                                    <option value="+358">+358</option>
                                                                    <option value="+996">+996</option>
                                                                    <option value="+976">+976</option>
                                                                    <option value="+387">+387</option>
                                                                    <option value="+60">+60</option>
                                                                    <option value="+687">+687</option>
                                                                    <option value="+51">+51</option>
                                                                    <option value="+675">+675</option>
                                                                    <option value="+675">+675</option>
                                                                    <option value="+964">+964</option>
                                                                    <option value="+977">+977</option>
                                                                    <option value="+503">+503</option>
                                                                    <option value="+964">+964</option>
                                                                    <option value="+67">+67</option>
                                                                    <option value="+968">+968</option>
                                                                    <option value="+252">+252</option>
                                                                    <option value="+967">+967</option>
                                                                    <option value="+993">+993</option>
                                                                    <option value="+972">+972</option>
                                                                    <option value="+63">+63</option>
                                                                    <option value="+507">+507</option>
                                                                    <option value="+59">+59</option>
                                                                    <option value="+88">+88</option>
                                                                    <option value="+1">+1</option>
                                                                    <option value="+1-877">+1-877</option>
                                                                    <option value="+1-876">+1-876</option>
                                                                    <option value="+1-669">+1-669</option>
                                                                </select>
                                                                <div class="vertical-line"></div>
                                                                <input type="number" class="form-control border-0"
                                                                    name="phone" id="phone"
                                                                    placeholder="Enter Here" required>
                                                            </div>
                                                            <span></span>
                                                        </div>
                                                        {{-- <input type="number" name="phone" id="phone"
                                                                class="form-control" placeholder="Enter here" required> --}}
                                                        <div class="mb-1">
                                                            <label class="form-label">Subject</label>
                                                            <input type="text" class="form-control" id="subject"
                                                                placeholder="Enter here" name="subject" required>
                                                            <span></span>
                                                        </div>
                                                        <div class="mb-1">
                                                            <label class="form-label">Message</label>
                                                            <textarea class="form-control" id="message" name="message" rows="3" placeholder="Enter message" required></textarea>
                                                            <span></span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label">Attactment</label>
                                                            <input type="file" class="form-control" name="attachment"
                                                                id="attachment" required>
                                                            <span></span>
                                                        </div>
                                                        <input type="hidden" name="form_type" value="careerForm">
                                                        <input type="hidden" name="g-recaptcha-response">
                                                    </div>
                                                    <div
                                                        class="modal-footer border-0 v_solutions_m justify-content-center">
                                                        <button type="button" class="get_star_m close-career"
                                                            data-bs-dismiss="modal">Close</button>
                                                        <button type="submit" class="talk_sales_m">Submit</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 text-lg-end text-center">
                                <div class="sms_service_img">
                                    <img src="{{ asset('uploads/preferences_page/' . $preferences->join_image) }}"
                                        class="img-fluid"
                                        alt="{{ str_replace('-', ' ', pathinfo($preferences->join_image, PATHINFO_FILENAME)) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <style>
        @media (min-width: 301px) and (max-width: 600px) {
            #track_my_ap_s5 .sms_service_img img {
                height: auto;
            }
        }

        @media (min-width: 601px) and (max-width: 991px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 100%;
            }
        }

        @media (min-width: 992px) and (max-width: 1028px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 402px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1029px) and (max-width: 1400px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 450px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1401px) and (max-width: 1440px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 425px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }
        }

        @media (min-width: 1441px) {
            #track_my_ap_s5 .sms_service_img img {
                height: 422px;
            }

            .track_my_ap_s5_bg_l {
                padding: 0px
            }

        }
    </style>

    <section id="about_us_s7" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-12 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-6 col-lg-6 col-md-12 col-12">
                        <div class="about_us_s6_content text-center">

                            <h2>{!! wordwrap($page->need_assistance_en, 16, '<br>') !!}</h2>
                        </div>
                    </div>
                </div>

                <div class="row d-flex justify-content-center mt-lg-5 mt-3s">
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-12 px-0">
                        <div class="about_us_s7_img text-center">
                            {{-- <img src="{{ asset('uploads/about_page/' . $page->need_assistance_image) }}"
                            class="img-fluid" alt=""> --}}
                            {{-- <div style="height:480px;  overflow:hidden;">
                            <iframe style="position:relative; top:-57px; border:none;"
                                src="https://www.google.com/maps/d/embed?mid=13OYlhycSf2nzinQJG8fCIsyLkQdLpis&ehbc=2E312F&noprof=1"
                                height="100%" width="100%"></iframe>
                        </div> --}}
                            <video class="a_map_v" autoplay muted loop playsinline>
                                <source src="{{ asset('website/assets/videos/map.mp4') }}" type="video/mp4">

                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about_us_s8" class="about_us_s8_bg s-p-tb" >
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row d-flex justify-content-center ">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-content-center">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12">
                                        <div class="tabs-content text-md-start ">
                                            <h2>{{ $page->professional_heading_en }}</h2>
                                            <h6>{{ $page->professional_description_en }}</h6>
                                            <div class="p_main_div">
                                                @if (count($pageItems) > 0)
                                                    @foreach ($pageItems as $item)
                                                        <div class="pt-2">
                                                            <img src="{{ asset('website/assets/images/Layer_1 (5).svg') }}"
                                                                alt="mark" />
                                                            <span class="para_text ps-2">{{ $item->item_en }}</span>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            <div class="tabs_buttons">
                                                <span class="get_started">
                                                    <a href="{{ $page->professional_get_started_link }}"> Get Started </a>
                                                </span>
                                                <span class="talk_sales">
                                                    <a href="{{ $page->professional_faq_link }}">
                                                        FAQs </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-content-center">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-11 col-xl-12 col-lg-12 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/about_page/' . $page->professional_image) }}"
                                                class="img-fluid w-100"
                                                alt="{{ str_replace('-', ' ', pathinfo($page->professional_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



@endsection