---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Mainfooter from "../components/Mainfooter.astro";
import Header from "../components/Header.astro";
import Contactfrom from "../components/Contactfrom.vue";
---
<Layout title="Welcome to RGYCI - Contact Us">
    <Header/>
    <Menu/>
    <main>
        <section class="container mx-auto px-4">
            <p class="text-4xl font-semibold text-center py-16">Conta<span class="underline decoration-4 decoration-red-800 ">ct Inform</span>ation</p>
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-10">
                <div class="grid place-items-center shadow-2xl p-4 w-full border-2 bg-blue-100 border-4 border-red-800 rounded-lg">
                    <svg class="w-12 my-10 h-fit" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v14h-14z" fill="none" visibility="hidden"/><path fill="#2874A6" d="m7 1-6 2v1h12v-1zm-6 4v1h1v5h-1l-1 2h14l-1-2h-1v-5h1v-1zm4 1c.497372 0 1 .5325904 1 1v4h-2v-4c0-.5273339.502628-1 1-1zm4 0c.503364 0 1 .4726661 1 1v4h-2v-4c0-.5273339.496636-1 1-1z"/></svg>
                    <p class="text-center text-lg">Head Office</p>
                    <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                    <span class="text-lg">Address:</span>
                    <p class=" text-center">Habra , North 24 Parganas, Pin - 743271, West Bengal</p>
                    <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                    <a href="">Email : ho@rgyci.org</a>                    
                    <a href="">Whatsapp : 7001537091</a>
                    </div>  
                </div>
                <div class="grid place-items-center shadow-2xl p-4 w-full border-2 bg-blue-100 border-4 border-red-800 rounded-lg">
                    <svg class="w-10 py-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>                  
                    <p class="text-center text-lg">Regional Office</p>
                    <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                    <span class="text-lg">Address:</span>
                    <p class=" text-center">12/1, Iswar Gupta Road. Dum Dum Cant. Kol -28, WB</p>
                    <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                    <a href="">Email : ho@rgyci.org</a>                    
                    <a href="">Whatsapp : 7001537091</a>
                    </div>  
                </div>
                <div class="grid place-items-center shadow-2xl p-4 w-full border-2 bg-blue-100 border-4 border-red-800 rounded-lg">
                    <svg class="w-10 py-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>                  
                    <p class="text-center text-lg">Regional UP Office</p>
                    <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                    <span class="text-lg">Address:</span>
                    <p class="text-center">242/13, Ramraj Colony, Madeena Masjid Street, Siyana-203412. District-Bulandshahr (UP)</p>
                    <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                    <a href="">Email : ho@rgyci.org</a>                    
                    <a href="">Whatsapp : 7001537091</a>
                    </div>  
                </div>
            </div>
        </section>
        <section class="container mx-auto px-4 xl:my-16">
            <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-8 xl:gap-16">
                <div class="grid place-items-center my-10">     
                    <Contactfrom client:visible/>               
                </div>
                <div class="grid place-items-center text-blue-900 text-3xl font-semibold my-10 h-fit">View College on Google Map
                    <!-- Google Map Copied Code -->
                    <iframe class="mt-4 mb-8 shadow-xl rounded-xl" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.6960542642505!2d88.70813311557485!3d22.813723685059195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b2026ecbfdab%3A0x752766262ac4a782!2sRAJEEV%20GANDHI%20YOUTH%20COMPUTER%20INSTITUTE!5e0!3m2!1sen!2sin!4v1675270274743!5m2!1sen!2sin"
                            width="100%"
                            height="500"
                            <!-- frameborder="0" -->
                            style=""
                            
                            aria-hidden="false"
                            tabindex="0">
                    </iframe>
                </div>
            </div>    
        </section>
    </main>
    <Mainfooter/>
</Layout>
<style>
 
</style>