<!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>Travel and Accommodation | 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>Venue and Accommodation </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;">Grand Hyatt Al Khobar, Hotel and Residences:</h3>
                            <p>GEO4.0 will take place at the prestigious Grand Hyatt Al Khobar, Hotel and Residences within the Grand Ballroom. It is a 40 minute drive from Dammam Airport and a 15 minute drive from the Saudi Aramco Headquarters.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="paraBox">
                        <h5 style="color: #070f60;"><b>Address:</b></h5>
                        <p><strong>3266 Custodian Of Two Holy Mosques Rd, Al Khobar 31952, Saudi Arabia.</strong></p>
                        <h5 style="color: #070f60;"><b>Phone:</b></h5>
                        <p><strong><a href="tel:+966133311234" style="color: #000000;">+966133311234</a></strong></p>
                        <h5 style="color: #070f60;"><b>Website:</b></h5>
                        <p><strong><a href="https://demo.geo4event.com/" style="color: #000000;">Geo4Event</a></strong></p>
                        <h6 style="color: #f37a00;"><a href="https://www.google.com/maps/place/Grand+Hyatt+Al+Khobar+Hotel+And+Residences/@26.2904338,50.1770996,15z/data=!4m2!3m1!1s0x0:0xea707f5f9d7ae879?sa=X&ved=1t:2428&ictx=111" style="color: #f37a00;"><b>Click here for Navigation</b></a></h6>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="peopleInfo">
                        <div class="each" style="display: inline-block; padding: 5px;">
                            <div style=" display: inline-block;">
                                <img style="border: none;" src="assets/img/hotel-grand-hayat.png" alt="">
                            </div>
                        </div>
                    </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>

                        </ul>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection ">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Tourist eVisa</h3>
                        </div>
                        <p class="mt-2">All international visitors from <a href="https://visa.visitsaudi.com/" target="_blank">eligible countries</a> are required to apply for an eVisa to enter the Kingdom.</p>
                        <p class="mt-2">The eVisa will be valid for one year and will allow for multiple entries, granting tourists the ability to stay in the country <br> for a total of 90 days.</p>
                        <p class="mt-2">As the eVisa application may take as long as 72 hours to be processed, it is recommended to apply as early as possible to accommodate <br> any potential delays or rejections.</p>
                        <ul class="mt-3">
                            <li><a href="https://visa.visitsaudi.com/Registration/Verify" target="_blank">Click here</a> to start your eVisa application process.</li>
                            <li>Complete the application form.</li>
                            <li>Pay the eVisa fee using a credit or debit card.</li>
                            <li>Once approved, you will receive the eVisa by email</li>
                        </ul>
                        <p style="color: red;">*The information you submit on the application form will be reviewed across several databases. It's important that the passport details you provide correspond with the passport you will use for your travels; if they don't match, your eVisa will not be considered valid.<p>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>
    </div>


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