<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Zain ul Abdin">
    <title>About Al-Khobar | GEO 4.0</title>

    <!-- CSS -->


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <link href="assets/css/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        input[type=number] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        /* Hide the increment and decrement buttons */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }

        input[type=email] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box lightblue;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        input[type=file] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 60px;
        }

        .attend {
            display: flex;
            margin-top: 9%;
            margin-left: 20%;
            font-size: 14px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
        }

        .r1 {
            margin-right: -152px !important;
            margin-bottom: -14%;
        }

        .r2 {
            margin-right: -150px !important;
            margin-bottom: -14%;
        }

        .r3 {
            margin-right: -150px !important;
        }

        .marRight {
            margin-right: 1.5rem;
        }

        @media (max-width:991px) {
            .r1 {
                margin-right: 0px !important;
                margin-bottom: -10px;
            }

            .r2 {
                margin-right: 0px !important;
                margin-bottom: -10px;
            }

            .r3 {
                margin-right: 0px !important;
            }

            .backimg {
                height: 240px !important;
            }
        }

        @media (max-width:734px) {
            .r1 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:734px) {
            .r2 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:734px) {
            .r3 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:763px) {
            .r1 {
                margin-top: 0rem !important;
            }

            .r2 {
                margin-top: 5rem !important;
            }

            .r3 {
                margin-top: 5rem !important;
            }
        }

        .backimg {
            height: 45vh;
        }


        @media (max-width:474px) {
            .r1 {
                margin-top: 0rem !important;
            }

            .r2 {
                margin-top: 2rem !important;
            }

            .r3 {
                margin-top: 2rem !important;
            }
        }

        @media(max-width:750px) {
            .botmedia {
                margin-bottom: 0% !important;
            }

            .imgone {
                margin-bottom: 3% !important;
            }
        }
    </style>
</head>

<body>
    @include('include.header')

    <div class="heroSection innerHero">
        <div class="image">
            <img src="assets/img/innerBg.png" alt="">
        </div>
        <div class="innerContent">
            <h1>About Al Khobar </h1>
            <!--<a href="#" class="btn btn-gredient">Download Form</a>-->
        </div>
    </div>

    <div class="textParaSection">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <!-- <h5><b>Venue</b></h5> -->
                            <h3 style="color: #070f60;">About Al Khobar</h3>
                            <p>Al-Khobar is a vibrant city with multiple lifestyle hubs and shopping centres. Its long, beautiful Corniche is lined with numerous international and local cafes and restaurants overlooking the Arabian Gulf.</p><br>
                            <p>The cities of Al Khobar, Dammam and Dhahran are known as the ‘Triplet Cities’, for they are about 20 kilometers away from each other and essentially form one big city.</p><br>
                            <p>Here’s a quick guide to planning your next visit to Khobar:
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7 col-12">
                    <div class="paraBox mt-4">
                        <h5 class="mt-0" style="color: #070f60;"><b>Khobar Corniche</b></h5>
                        <p>Located along the scenic coastline of the Arabian Gulf, Al Khobar Corniche stands as a testament to the modern transformation of Saudi Arabia’s Eastern Province.</p> <br>
                        <p>This delightful waterfront location offers a variety of activities, picturesque trails, and quaint seaside cafes, making it perfect for relaxing strolls, family picnics, and watching stunning sunsets while admiring the Al-Khobar Water Tower, a significant landmark in the city.</p>
                    </div>
                </div>
                <div class="col-md-5 col-12">
                    <div class="peopleInfo">
                        <div class="each" style="display: inline-block; padding: 5px;">
                            <div>
                                <img style="border: none;" width="300" height="200px" src="assets/img/image002.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection">
        <div class="container mt-5">

            <div class="row">
                <div class="col-md-7 col-12">
                    <div class="paraBox mt-4">
                        <h5 class="mt-0" style="color: #070f60;"><b>Ithra</b></h5>
                        <p>This delightful waterfront location offers a variety of activities, picturesque trails, and quaint seaside cafes, making it perfect for relaxing strolls, family picnics, and watching stunning sunsets while admiring the Al-Khobar Water Tower, a significant landmark in the city.</p>
                    </div>
                </div>
                <div class="col-md-5 col-12">
                    <div class="peopleInfo">
                        <div class="each" style="display: inline-block; padding: 5px;">
                            <div>
                                <img style="border: none;" width="300" height="200px" src="assets/img/image003.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection ">
        <div class="container">

            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="paraBox mt-4">
                        <h5 class="mt-0" style="color: #070f60;"><b>SciTech</b></h5>
                        <p>Among the leading attractions is the Sultan Bin Abdulaziz Science & Technology Center, commonly known as SciTech. This scientific hub is part of the Prince Sultan
                            Bin Abdulaziz Al Saud Foundation and is linked to the King Fahd University of Petroleum and Minerals. SciTech's main goal is to enlighten the community about scientific
                            concepts and their applications, making learning engaging through
                            interactive experiences, entertainment, and observation. With features like an aquarium, hands-on exhibits, and an IMAX theater, it's definitely a place you shouldn't miss!</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="textParaSection">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="paraBox ">
                        <p>Finally, don't forget to sample some of the delicious local cuisine. Traditional Saudi dishes such as Kabsa (spiced rice with meat), Mutabbaq (stuffed flatbread), and Jareesh (cracked wheat porridge) are sure to tantalize your taste buds.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection mb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="paraBox ">
                        <p>With its blend of modern amenities and rich cultural offerings, Dhahran has something to offer every type of traveler. So pack your bags and get ready to discover the hidden gems of this vibrant city!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="textParaSection l-gray-Bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Travel Information</h3><br>
                        </div>
						<h5 style="color: #070f60;"><b>Airport:</b></h5>
						<p>King Fahd International Airport (Dammam Airport).</p>
						<h5 style="color: #070f60;"><b>Taxi:</b></h5>
						<p>Taxis are available from King Fahd International Airport (Dammam Airport), they are located outside the arrival’s terminal.</p>
						<h5 style="color: #070f60;"><b>Careem:</b></h5>
						<p>Careem is available in Al Khobar and can be downloaded from the app store.</p>
						<h5 style="color: #070f60;"><b>Visa:</b></h5>
						<p>In order to enter Saudi Arabia, all international visitors must check the travel requirements and types of visas available.</p>
						<br>
						<ul>
						<li>Passengers are requested to check with their nearest Saudi Arabian embassy or with their airline for visa requirements.</li>
						<li>To obtain a visa, all passengers must have a passport valid for more than 6 months.</li>
						<li>For more information about visas and entry requirements for Saudi Arabia, please visit the official online visa portal at <a href="https://visa.visitsaudi.com/">Visit Saudi Arabia eVisa</a>.</li>
						</ul>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>
    </div> -->

    <!-- first image set karain ga responsive pe then text ki class dena us ki responsive aalag karna
like images ko bs pe lagaya ha and style ka liye margin right and left di ho so responsive pe woh hata dena and
then text ki responsive karna -->
    <!-- Modal -->

    @include('include.footer')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')
    </script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="assets/js/custom.js"></script>
    @php
    if(session('success')) {
    echo "
    <script>
        $(document).ready(function() {
            $('#exampleModal3').modal('show');
        });
    </script>
    ";
    }
    if(session('error')) {
    echo "
    <script>
        $(document).ready(function() {
            $('#exampleModal4').modal('show');
        });
    </script>
    ";
    }
    @endphp

    <script>
        $(document).ready(function() {
            $('#fileInput').on('change', function() {
                var allowedExtensions = ['.docx', '.pdf'];
                var filePath = $(this).val();
                var fileExtension = filePath.substr(filePath.lastIndexOf('.'));

                if (allowedExtensions.indexOf(fileExtension.toLowerCase()) === -1) {
                    // Display the error message and clear the file input
                    $('#fileError').show();
                    $(this).val('');
                } else {
                    // Hide the error message
                    $('#fileError').hide();
                }
            });
        });
    </script>

</body>

</html>