@extends('website.desktop.layouts.app')
@section('title', 'Gradding - Abroad education consultancy - Get Free Consultancy')
@section('description',
    'Gradding has the largest consultancy team and assisted more than 1000+ students to study
    abroad, Short list your dream university with us, we are just a click away.')
@section('main')
    <main>
        <!--Page Banner START -->
        <section class="contact-section"
            style="background-image:url({{ asset('/') }}frontend/primary-theme/assets/images/element/map.svg); background-position: center left; background-size: cover;">
            <div class="container contact-container">
                <div class="heading">
                    <!-- Title -->
                    <p class="sub-heading">Reach Out to Us</p>
                    <h1 class="heading-title heading1">It’s Time to Know Each Other Better!</h1>
                </div>

                <!-- Contact info box -->
                <div class="contact-info-box">
                    <!-- Box item -->
                    <div class="contact-box">
                        <!-- Title -->
                        <h2 class="contact-box-title">We Are Just a Call Away!</h2>
                        <p class="contact-box-desc">
                            <svg width="38" height="37" viewBox="0 0 38 37" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M22.9618 27.5777C25.6218 30.2526 28.2875 32.9217 30.959 35.585C30.5281 35.8972 30.0353 36.1171 29.5114 36.2288L29.5006 36.2311L29.4898 36.2339C29.1712 36.3167 28.8357 36.3727 28.477 36.4325C28.3479 36.454 28.2158 36.4761 28.0805 36.5H26.4603C26.2455 36.4671 26.0348 36.4369 25.8271 36.4071C25.3491 36.3386 24.8874 36.2724 24.4306 36.1812C21.9481 35.6479 19.5965 34.626 17.5127 33.1751L17.5128 33.1749L17.5027 33.1683C11.9304 29.4846 7.2356 24.6214 3.7504 18.9228L3.75041 18.9228L3.74854 18.9198C2.60053 17.0722 1.80969 15.0256 1.41713 12.8861C1.34408 12.4776 1.28347 12.07 1.22152 11.6534C1.19886 11.5011 1.17603 11.3475 1.15234 11.1923V9.58075C1.19591 9.37683 1.23587 9.17814 1.27512 8.98294C1.36333 8.54431 1.448 8.12325 1.5622 7.69986C1.66625 7.33444 1.8347 6.99195 2.05838 6.688C4.71579 9.34229 7.37472 11.9966 10.0352 14.6508L10.0511 14.6668L10.0685 14.6812C10.0758 14.6873 10.0811 14.6956 10.0835 14.7048C10.0859 14.714 10.0853 14.7238 10.0819 14.7327L10.0755 14.7492L10.0703 14.7661C9.83864 15.5198 9.80751 16.3209 9.97993 17.0903C10.152 17.8583 10.521 18.5682 11.0505 19.1503C13.3763 21.7919 15.8668 24.2839 18.5069 26.6114C19.0944 27.144 19.8107 27.5142 20.585 27.6853C21.3567 27.8559 22.1593 27.8229 22.9143 27.5897C22.9326 27.585 22.9479 27.5811 22.9618 27.5777Z"
                                    fill="#E6F0FA" stroke="#066AC9" />
                                <path
                                    d="M37.0099 29.5497V30.1141C36.7645 30.4676 36.4992 30.8068 36.215 31.13C35.3778 32.0001 34.5124 32.842 33.6611 33.6933L33.3977 33.9426L25.0352 25.5847C26.131 24.503 27.2222 23.3977 28.351 22.3206C28.4734 22.207 28.6172 22.1192 28.7742 22.0623C28.9311 22.0054 29.0979 21.9806 29.2646 21.9893C29.4313 21.9981 29.5945 22.0403 29.7446 22.1133C29.8947 22.1864 30.0286 22.2889 30.1383 22.4147C30.7686 23.0261 31.38 23.6516 32.0197 24.2678C33.473 25.7258 34.9357 27.1745 36.375 28.6419C36.6101 28.9274 36.8224 29.2309 37.0099 29.5497Z"
                                    fill="#066AC9" />
                                <path
                                    d="M15.0869 9.56991C14.0522 10.5717 12.9939 11.55 11.9686 12.5189L3.67188 4.2269C3.85531 4.06228 4.06696 3.88826 4.2598 3.70012C5.02174 2.94288 5.76958 2.16683 6.54564 1.42369C6.86083 1.1471 7.19221 0.889526 7.53804 0.652344H8.10714C8.42425 0.847124 8.72614 1.06567 9.0102 1.30611C11.042 3.31915 13.0661 5.34159 15.0822 7.37345C15.8442 8.13539 15.8442 8.82208 15.0869 9.56991Z"
                                    fill="#066AC9" />
                            </svg>
                        </p>
                        <a href="tel:{{ @$website_setting->phone }}" class="contact-btn">Call Us Now</a>
                    </div>

                    <!-- Box item -->
                    <div class="contact-box">
                        <!-- Title -->
                        <h2 class="contact-box-title">Contact Address</h2>
                        <ul class="contact-box-ul">
                            <!-- Address -->
                            <li class="contact-box-li">
                                <a href="https://goo.gl/maps/8n6BPxmFJMM58wv36" target="_blank" class="address-link"> <i
                                        class="fas fa-fw fa-map-marker-alt"></i>{{ $website_setting->address }}
                                </a>
                            </li>
                            <!-- Phone number -->
                            <li class="contact-box-li">
                                <a href="tel:{{ $website_setting->phone }}"><i
                                        class="fa-solid fa-phone"></i>{{ $website_setting->phone }} </a>
                            </li>
                            <!-- Email id -->
                            <li class="contact-box-li">
                                <a href="mailto:{{ $setting->email }}"> <i
                                        class="far fa-fw fa-envelope"></i>{{ $setting->email }} </a>
                            </li>
                        </ul>
                    </div>

                    <!-- Box item -->
                    <div class="contact-box">
                        <!-- Title -->
                        <h2 class="contact-box-title">Walk Into Us for a Chat!</h2>
                        <p class="contact-box-desc">
                            <svg width="54" height="44" viewBox="0 0 54 44" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M28.3679 15.1192C29.626 15.1192 30.646 14.0993 30.646 12.8412C30.646 11.583 29.626 10.5631 28.3679 10.5631C27.1098 10.5631 26.0898 11.583 26.0898 12.8412C26.0898 14.0993 27.1098 15.1192 28.3679 15.1192Z"
                                    fill="#066AC9" />
                                <path
                                    d="M36.2097 15.1192C37.4678 15.1192 38.4878 14.0993 38.4878 12.8412C38.4878 11.583 37.4678 10.5631 36.2097 10.5631C34.9516 10.5631 33.9316 11.583 33.9316 12.8412C33.9316 14.0993 34.9516 15.1192 36.2097 15.1192Z"
                                    fill="#066AC9" />
                                <path
                                    d="M51.3705 1.05422C51.4146 1.04502 51.4598 1.04205 51.5047 1.04539C51.6372 1.04597 51.7692 1.06077 51.8985 1.08954C52.1133 1.13434 52.3199 1.21176 52.5113 1.31911C52.7772 1.46817 53.0102 1.66939 53.1965 1.9107C53.4363 2.2186 53.5916 2.58386 53.6468 2.97026C53.6634 3.07841 53.6729 3.18755 53.675 3.29696C53.675 3.40645 53.675 3.51594 53.675 3.62896C53.675 3.855 53.675 4.09163 53.675 4.33533C53.6839 5.31542 53.6909 6.44209 53.7015 7.70473C53.7139 10.2318 53.728 13.3045 53.7457 16.8417C53.7457 17.7258 53.7492 18.6382 53.7563 19.5789C53.7563 20.0498 53.7563 20.5272 53.7563 21.0111C53.7563 21.253 53.7563 21.4967 53.7563 21.7422C53.7563 21.864 53.7563 21.9876 53.7563 22.1112C53.7541 22.2449 53.7423 22.3783 53.7209 22.5103C53.6295 23.0593 53.3509 23.5598 52.9325 23.9268C52.514 24.2937 51.9815 24.5046 51.4252 24.5235L48.2077 24.5341L48.3984 24.3575C48.19 26.6197 47.9711 29.009 47.7415 31.4883L47.7062 31.8751L47.406 31.6279L38.7688 24.5111L38.9101 24.5606L21.2119 24.5694H17.0566C16.9153 24.5694 16.7864 24.5694 16.6363 24.5694C16.2564 24.5607 15.8839 24.4632 15.5484 24.2848C15.2129 24.1063 14.9239 23.8518 14.7044 23.5416C14.5295 23.2956 14.4008 23.0197 14.3247 22.7275C14.2593 22.444 14.2326 22.1529 14.2452 21.8622C14.2452 21.3207 14.2452 20.7803 14.2452 20.2411C14.2452 19.1662 14.2452 18.099 14.2452 17.0395C14.2452 12.8012 14.2541 8.72191 14.2576 4.83156C14.2576 4.34592 14.2576 3.86206 14.2576 3.38349C14.2508 3.12398 14.2835 2.86495 14.3547 2.61531C14.4272 2.36403 14.5386 2.12567 14.685 1.90893C14.9791 1.48191 15.4015 1.15965 15.8911 0.98888C16.1311 0.903311 16.3834 0.857386 16.6381 0.852905C16.8782 0.852905 17.1025 0.852905 17.3356 0.852905L22.697 0.8635L32.3196 0.891756L46.2546 0.964157L50.0425 1.00831L51.0279 1.03126C51.1402 1.02887 51.2525 1.03656 51.3634 1.05422C51.2526 1.07305 51.1402 1.08074 51.0279 1.07718L50.0425 1.10014L46.2546 1.14428L32.3196 1.21669L22.697 1.24494L17.3356 1.25554C17.1078 1.25554 16.8694 1.25554 16.6469 1.25554C16.4348 1.25928 16.2248 1.29807 16.0253 1.37032C15.6199 1.51363 15.2705 1.782 15.0275 2.13674C14.7819 2.50101 14.6583 2.93384 14.6744 3.37289C14.6744 3.85146 14.6744 4.33533 14.6744 4.82096C14.6744 8.70602 14.6832 12.7942 14.6885 17.0289C14.6885 18.0884 14.6885 19.1556 14.6885 20.2305V21.8516C14.6755 22.1043 14.6981 22.3575 14.7556 22.6039C14.848 22.9628 15.0386 23.2889 15.3059 23.5456C15.5732 23.8023 15.9067 23.9795 16.269 24.0573C16.3899 24.0826 16.5128 24.0974 16.6363 24.1014C16.7617 24.1014 16.9083 24.1014 17.0442 24.1014H21.233L38.9312 24.1103H39.0107L39.0725 24.1615L47.6903 31.3012L47.353 31.4407C47.5914 28.9684 47.821 26.5738 48.0399 24.3134L48.0558 24.1368H48.2324H51.4394C51.9126 24.1227 52.3664 23.9453 52.7237 23.6347C53.081 23.3241 53.3198 22.8993 53.3995 22.4326C53.4176 22.3199 53.4276 22.206 53.4296 22.0918C53.4296 21.9682 53.4296 21.8446 53.4296 21.7227C53.4296 21.4773 53.4296 21.2336 53.4296 20.9916C53.4296 20.5078 53.4296 20.0304 53.4296 19.5595C53.4296 18.6176 53.4331 17.7052 53.4402 16.8223C53.4578 13.2904 53.472 10.2124 53.4843 7.68531C53.4949 6.42267 53.502 5.296 53.5108 4.3159C53.5108 4.07221 53.5108 3.83557 53.5108 3.60953C53.5108 3.49651 53.5108 3.38702 53.5108 3.27753C53.5107 3.17481 53.5042 3.07219 53.4914 2.97026C53.446 2.60652 53.308 2.26053 53.0905 1.96544C52.919 1.73015 52.7023 1.53144 52.453 1.38092C52.2717 1.27045 52.0754 1.1866 51.8702 1.13192C51.5524 1.06129 51.3705 1.07188 51.3705 1.05422Z"
                                    fill="#066AC9" />
                                <path
                                    d="M2.36459 12.3913H36.7615C37.3891 12.3913 37.991 12.6406 38.4347 13.0844C38.8785 13.5282 39.1278 14.1301 39.1278 14.7576V33.3106C39.1278 33.9382 38.8785 34.5401 38.4347 34.9838C37.991 35.4276 37.3891 35.6769 36.7615 35.6769H2.36459C1.73746 35.6769 1.13602 35.4278 0.692572 34.9843C0.249125 34.5409 6.59486e-07 33.9395 6.59486e-07 33.3123V14.7576C-0.000231357 14.447 0.0607591 14.1393 0.179487 13.8522C0.298215 13.5651 0.472353 13.3043 0.691948 13.0845C0.911543 12.8647 1.17229 12.6904 1.45929 12.5715C1.74629 12.4525 2.05392 12.3913 2.36459 12.3913Z"
                                    fill="#E6F0FA" />
                                <path d="M23.8008 34.9324L33.0525 43.1475L33.8119 35.0789" fill="#E6F0FA" />
                                <path
                                    d="M12.196 26.641C13.4542 26.641 14.4741 25.6211 14.4741 24.363C14.4741 23.1048 13.4542 22.0849 12.196 22.0849C10.9379 22.0849 9.91797 23.1048 9.91797 24.363C9.91797 25.6211 10.9379 26.641 12.196 26.641Z"
                                    fill="#066AC9" />
                                <path
                                    d="M20.0359 26.641C21.294 26.641 22.3139 25.6211 22.3139 24.363C22.3139 23.1048 21.294 22.0849 20.0359 22.0849C18.7777 22.0849 17.7578 23.1048 17.7578 24.363C17.7578 25.6211 18.7777 26.641 20.0359 26.641Z"
                                    fill="#066AC9" />
                                <path
                                    d="M27.8777 26.641C29.1358 26.641 30.1557 25.6211 30.1557 24.363C30.1557 23.1048 29.1358 22.0849 27.8777 22.0849C26.6195 22.0849 25.5996 23.1048 25.5996 24.363C25.5996 25.6211 26.6195 26.641 27.8777 26.641Z"
                                    fill="#066AC9" />
                                <path
                                    d="M44.0495 15.1192C45.3077 15.1192 46.3276 14.0993 46.3276 12.8412C46.3276 11.583 45.3077 10.5631 44.0495 10.5631C42.7914 10.5631 41.7715 11.583 41.7715 12.8412C41.7715 14.0993 42.7914 15.1192 44.0495 15.1192Z"
                                    fill="#066AC9" />
                            </svg>
                        </p>
                        <button class="contact-btn" type="button" id="chat-button" onclick="showChat()" >Chat Now</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- Page Banner END -->
        <!-- Image and contact form START -->
        <section class="start-conversation">
            <div class="container start-conversation-container">
                <div class="left-content">
                    <!-- Image -->
                    <img data-src="{{ asset('/') }}frontend/primary-theme/assets/images/element/contact.svg" alt="contact">

                    <!-- Social media button -->
                    <div class="social-media-btns">
                        <h2 class="follow-us-title">Follow us on:</h2>
                        {{-- <ul>
                            <li> <a class="text-facebook" href="{{ $website_setting->facebook }}" target="_blank"
                                    aria-label="facebook"><i class="fab fa-fw fa-facebook-square"></i></a> </li>
                            <li> <a class="text-instagram" href="{{ $website_setting->instagram }}" target="_blank"
                                    aria-label="instagram"><i class="fab fa-fw fa-instagram"></i></a> </li>
                            <li> <a class="text-twitter" href="{{ $website_setting->twitter }}" target="_blank"
                                    aria-label="twitter"><svg xmlns="http://www.w3.org/2000/svg" height="0.8em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a> </li>
                            <li> <a class="text-linkedin" href="{{ $website_setting->linkedin }}" target="_blank"
                                    aria-label="linkedin"><i class="fab fa-fw fa-linkedin-in"></i></a> </li>
                            <li> <a class="text-youtube" href="{{ $website_setting->youtube }}" target="_blank"
                                    aria-label="youtube"><i class="fab fa-fw fa-youtube"></i></a> </li>
                            <li> <a class="text-pinterest" href="{{ $website_setting->pinterest }}" target="_blank"
                                    aria-label="pinterest"><i class="fab fa-fw fa-pinterest"></i></a> </li>
                            <li> <a class="text-snapchat" href="{{ $website_setting->snapchat }}" target="_blank"
                                    aria-label="pinterest"><i class="fab fa-fw fa-snapchat"></i></a> </li>
                        </ul> --}}
                        <ul class="social-media-ul">
                            <li class="social-media-li">
                                <a class="text-facebook" href="{{$website_setting->facebook}}" target="_blank"><i
                                        class="fab fa-fw fa-facebook-f"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-instagram" href="{{$website_setting->instagram}}"
                                    target="_blank"><i class="fab fa-fw fa-instagram"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-twitter" href="{{$website_setting->twitter}}" target="_blank">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                                </a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-linkedin" href="{{$website_setting->linkedin}}"
                                    target="_blank"><i class="fab fa-fw fa-linkedin-in"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-youtube" href="{{$website_setting->youtube}}"
                                    target="_blank"><i class="fab fa-fw fa-youtube"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-pinterest" href="{{$website_setting->pinterest}}"
                                    target="_blank"><i class="fab fa-fw fa-pinterest"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-snapchat" href="{{$website_setting->snapchat}}"
                                    target="_blank">
                                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" id="snapchat"><path fill="#ffeb3b" d="m20.413 19.514c.981-.157 3.029-.528 3.086-1.517.016-.278-.178-.525-.45-.569v-.001c-3.027-.508-4.933-3.993-4.639-4.69.212-.504 1.158-.699 1.575-.863 1.996-.8 1.136-2.169-.043-2.169-.531 0-1.161.576-1.742.305.18-3.065.5-5.224-1.668-7.312-2.814-2.706-8.524-2.391-10.472 2.055-.579 1.319-.357 3.73-.264 5.257-.41.183-.996-.014-1.401-.208-1.021-.486-2.767 1.111-.381 2.071 1.034.413 2.012.531 1.466 1.661-.059.108-.391.932-1.17 1.854-.881 1.044-2.001 1.809-3.359 2.038-.334.055-.561.416-.395.811v.002c.341.811 2.153 1.136 3.029 1.276.241.459.066 1.513.887 1.513.441 0 1.281-.365 2.597-.14 1.616.274 2.145 2.112 5.072 2.112 1.423 0 2.355-.671 3.177-1.261l.001-.002c.961-.69 1.636-1.201 3.68-.791 1.481.292 1.069-.749 1.414-1.432z"></path><path fill="#212121" d="m11.945 23.494c.017.003-.033.006-.085.006-1.584 0-2.629-.752-3.469-1.357-.945-.681-1.446-1.064-3.28-.702-.27.052-.465.086-.637.086-1.038 0-1.132-.932-1.273-1.57-1.256-.223-3.121-.655-3.198-1.929-.03-.539.343-1.008.868-1.095 1.243-.21 2.258-.919 3.059-1.867.525-.621 1.293-1.915 1.199-2.137-.1-.24-1.006-.473-1.299-.591-3.017-1.216-.87-3.769.779-2.988.289.139.505.198.66.221-.092-1.501-.25-3.689.334-5.019 1.164-2.659 3.589-4.047 6.166-4.047l.389-.005c2.609 0 5.056 1.345 6.239 4.053.586 1.334.425 3.517.333 4.997.489-.122 1.035-.57 1.905-.21 1.36.495 1.698 2.331-.834 3.126-.23.075-.848.274-.928.465-.117.28 1.447 3.532 4.261 4.004.524.087.897.556.866 1.092-.072 1.27-1.934 1.705-3.198 1.93-.185.837-.322 1.555-1.246 1.555-1.58-.093-2.081-.708-3.944.634-1.102.788-2.186 1.441-3.667 1.348zm.063-.998c.117-.029 1.023.266 2.922-1.094 1.093-.786 1.87-1.409 4.167-.946.33.065.356.048.457.056.101 0 .106.002.233-.599.135-.641.207-.648.294-.851.396-.079 2.635-.394 2.899-1.017h-.001l-.014-.122c-3.368-.566-4.835-4.022-4.896-4.169-.999-2.056 1.757-2.039 2.471-2.784.29-.304.082-.57-.27-.698-.598-.248-.798.266-1.731.309-.477-.021-.587-.151-.86-.261.222-3.117.528-5.312-1.495-7.261-2.554-2.456-7.857-2.241-9.666 1.895-.545 1.24-.301 3.75-.201 5.373-.193.037-.734.603-2.139-.074-.385-.183-1.732.449.022 1.157.472.189 1.54.391 1.85 1.135.473 1.138-1.48 3.612-2.864 4.521-.667.439-1.392.727-2.153.854v.001l-.017.124c.282.672 2.794.984 2.894 1.015.113.271.145.132.3.852.036.169.071.338.124.519.106.36.993-.353 2.82-.035 1.609.274 2.491 2.105 4.704 2.105z"></path></svg>
                                </a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-tumblr" href="{{$website_setting->tumblr}}"
                                    target="_blank"><i class="fab fa-fw fa-tumblr"></i></a>
                            </li>
                            <li class="social-media-li">
                                <a class="text-discord" href="{{$website_setting->discord}}"
                                    target="_blank"><i class="fab fa-fw fa-discord"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-content">
                    <h2 class="heading">Start a Conversation!</h2>
                    <p class="title">From finding a college of choice to funding finances for it, we have got solutions to
                        all your problems and queries, just drop your details and we will be happy to help you.</p>
                    <form class="form-fields">
                        <div class="input-box">
                            <label for="Name" class="form-label">Your name *</label>
                            <input type="text" class="form-input" name="name" id="Name" value="">
                        </div>
                        <div class="input-box">
                            <label for="email" class="form-label">Email address *</label>
                            <input type="text" class="form-input" name="email" id="email" value="" max="250">
                        </div>
                        <div class="input-box">
                            <label for="phone" class="form-label">Mobile No *</label>
                            <div class="mobile-field">
                                <div class="country-list">
                                    <select name="country" class="select-list countryDropdown">
                                        <option data-code="Country" data-sort_code="" data-country="" value=""
                                            id="arry_opt">Country</option>
                                        <option data-code="44" data-sort_code="UK" data-country="United Kingdom"
                                            value="United Kingdom@#$?44">United Kingdom +44</option>
                                        <option data-code="1" data-sort_code="US" data-country="United States"
                                            value="United States@#$?1">United States +1</option>
                                    </select>
                                </div>
                                <input type="text" class="enter-number form-input" placeholder="Mobile Number"
                                    name="phone" id="phone" value="">
                            </div>
                        </div>
                        <div class="input-box description-box-error">
                            <label for="description" class="form-label">Message *</label>
                            <textarea id="description" class="form-input" name="description" rows="4"></textarea>
                        </div>
                        <button class="send-btn" type="submit">Send Message
                            <div class="spin-loader" role="status" style="display:none"></div>
                        </button>
                    </form>
                </div>
            </div>
        </section>
        <!-- Image and contact form END -->
    <!-- Global Map  -->
	<section class="global-map">
		<div class="container">
			<h2 class="heading2">Choose Your City</h2>
			<p class="choose-city-desc">We Are All Over India to Help You with Study Abroad! </p>
			<div class="map-card">
				<div class="left-side">
					<div class="single-map">
						<div class="img-div">
							<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/bangalore.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'bangalore'])}}">Bangalore</a>
					</div>
					<div class="single-map">
						<div class="img-div">
							<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Ahmedabad.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'ahmedabad'])}}">Ahmedabad</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/delhi.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'delhi'])}}">Delhi</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/jaipur.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'jaipur'])}}">Jaipur</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Hyderabad.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'hyderabad'])}}">Hyderabad</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Kerala.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'kerala'])}}">Kerala</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Pune.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'pune'])}}">Pune</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Chandigarh.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link"  href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'chandigarh'])}}">Chandigarh</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Mumbai.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'mumbai'])}}">Mumbai</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Gurgaon.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'gurgaon'])}}">Gurgaon</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Chennai.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'chennai'])}}">Chennai</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Kolkata.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'kolkata'])}}">Kolkata</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Trivandrum.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'trivandrum'])}}">Trivandrum</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Noida.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'noida'])}}">Noida</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Kochi.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'kochi'])}}">Kochi</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Calicut.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'calicut'])}}">Calicut</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Kottayam.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'kottayam'])}}">Kottayam</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Kollam.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'kollam'])}}">Kollam</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/Thrissur.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'thrissur'])}}">Thrissur</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/indore.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'indore'])}}">Indore</a>
					</div>
					<div class="single-map">
						<div class="img-div">
						<img data-src="{{ asset('/') }}frontend/assets-desktop/images/city/udaipur.svg" height="100%" width="100%" alt="">
						</div>
						<a class="single-map-title stretched-link" href="{{ route('website.consultancyCity', ['country' => 'in', 'city' => 'udaipur'])}}">Udaipur</a>
					</div>
				</div>
				<div class="right-side">
					<div id="map" data-icon="{{ asset('frontend')}}/primary-theme/assets/images/loc-pin.png"></div>
					<script src="{{asset('frontend')}}/assets-desktop/js/mapApi.js?v={{env('ASSETS_VERSION')}}"></script>
				</div>
			</div>
		</div>
	</section>
        <!-- Map START -->
        <!-- <section class="pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        {{-- <iframe title="map" class="w-100 h-400px grayscale rounded"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3558.0743721962835!2d75.81157351504461!3d26.901134683132636!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8d1bdbc63a4e0b57%3A0xff399b2a1ce92f29!2sGradding%20-%20Study%20Abroad%20Consultants%20in%20Jaipur!5e0!3m2!1sen!2sin!4v1686127841812!5m2!1sen!2sin"
                            height="500" style="border:0;" aria-hidden="false" tabindex="0"></iframe> --}}
                        <div id="map" data-icon="{{ asset('frontend')}}/primary-theme/assets/images/loc-pin.png"></div>
                    </div>
                </div>
            </div>
        </section> -->
        <!-- Map END -->
    </main>
    <div style="display:none" class="">
        <div id="count">{{@$addresses->count()}}</div>
        @foreach($addresses as $key => $address)
        <div id="mapContent{{$key}}" role="dialog" tabindex="-1" class="dialogue">
            <div class="gm-style-iw-d" >
            <div class="location-pin-div">
                    <div class="img-div">
                        <img data-src="{{ @$address->office_image ? @$address->office_image_url : 'https://www.gradding.com/frontend/primary-theme/assets/images/about/graddingofc.jpg' }}" alt="city-store">
                        <div class="detailmap">
                            <p class="text-small heading">Gradding - Study Abroad Consultants in {{ucFirst(@$address->page->title)}}</p>
                            <span class="storeAdd">{{@$address->address}}</span>
                        </div>
                    </div>
                    <div class="view-direction-row">
                        <div class="box">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none">
                            <path
                            d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                            stroke="#066AC9"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            />
                            <path
                            opacity="0.34"
                            d="M12 12V17"
                            stroke="#066AC9"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            />
                            <path
                            opacity="0.34"
                            d="M11.9961 8H12.0051"
                            stroke="#066AC9"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            />
                        </svg>
                        <a class="storeDetail view-detail" target="_blank"  href="/consultancy/in/{{@$address->page->url}}">View Detail</a>
                        </div>
                        <div class="box border">
                            <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                >
                                    <path
                                    opacity="0.4"
                                    d="M17.3509 9.05004L15.0109 16.59C14.4509 18.38 11.9409 18.41 11.3509 16.63L10.651 14.56C10.461 13.99 10.0109 13.53 9.44095 13.35L7.36095 12.65C5.59095 12.06 5.62095 9.53004 7.41095 8.99004L14.951 6.64003C16.431 6.19003 17.8209 7.58004 17.3509 9.05004Z"
                                    stroke="#066AC9"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    />
                                    <path
                                    d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                    stroke="#066AC9"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    />
                            </svg>
                            <a class="view-detail" href="{{@$address->map_url}}">Get Direction</a>
                        </div>
                    </div>
                </div>
            </div>
            <button draggable="false" aria-label="Close" title="Close" type="button" class="gm-ui-hover-effect" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; text-transform: none; appearance: none; position: absolute; cursor: pointer; user-select: none; top: -6px; right: -6px; width: 30px; height: 30px;"><span style="-webkit-mask-image: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3C/svg%3E&quot;); pointer-events: none; display: block; width: 14px; height: 14px; margin: 8px;"></span></button></div>
        <div id="lat{{$key}}">{{@$address->lat}}</div>
        <div id="long{{$key}}">{{@$address->long}}</div>
        @endforeach
    </div>
@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend') }}/assets-desktop/css/contact.css?v={{env('ASSETS_VERSION')}}">
    <style>
        #map {
            height: 550px;
            width: 100%;
            background-color: grey;
        }
    </style>
@endsection
@section('script')
<script src="{{ asset('frontend') }}/assets-desktop/js/contact.js?v={{ env('ASSETS_VERSION') }}"></script>
<script src="{{asset('frontend')}}/assets-desktop/js/mapApi.js?v={{ env('ASSETS_VERSION') }}"></script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnGlEFNczAvOzn4tEGyDd7z4WMEa00thU&callback=initMap">
</script>
@endsection