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

<head>
    <meta name="description" content="Contact Us - GainSkills Business Media Pvt Ltd">
    <meta name="keywords" content="GainSkills Gainskillsmedia Gain Skills Media Events Oragainser">
    <?php require '../inc/header.php'; ?>
    <title>Contact Us - Gain Skills</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/contact.css" />
</head>

    <?php require '../inc/social.php'; ?>
    <?php require '../inc/loader.php'; ?>
    <?php require '../inc/additional.php'; ?>

    <header class="header-container">
        <nav class="header-sub-container container mx-auto px-5">
            <div class="logo-container">
                <img src="../assets/logo/black-logo.webp" alt="gain skills" class="nav-logo" />
            </div>
            <div class="menu-btn-container">
                <div class="menu-btn-body" onclick="toggleNav()">
                    <div class="menu-btn-lines"></div>
                    <div class="menu-btn-lines"></div>
                    <div class="menu-btn-lines"></div>
                </div>
            </div>
            <div class="nav-list-container lg:block hidden" id="nav-list-container">
                <ul class="ul-list">
                    <li class="li-list"><a href="../" class="nav-link">Home</a></li>
                    <li class="li-list" onclick="toggleAboutUs()">
                        <span class="nav-link p-0 border-none"><a class="nav-link" href="./about.php"><span id="aboutUsText" class="nav-link-span">About Us <i id="aboutUsIcon" class="nav-icon"></i></span></a>
                            <ul class="sub-ul-list lg:block hidden" id="aboutUsList">
                                <li class="sub-li-list"><a href="./about.php#meet-the-team" class="sub-link-list">Meet The Team</a></li>
                            </ul>
                        </span>
                    </li>
                    <li class="li-list" onclick="toggleEvents()">
                        <span class="nav-link"><span class="nav-link-span" id="eventsText">Events <i id="eventsIcon" class="nav-icon"></i></span>
                            <ul class="sub-ul-list lg:block hidden" id="eventsList">
                                <li class="sub-li-list"><a href="./conference.php" class="sub-link-list">Conferences & Awards</a></li>
                                <li class="sub-li-list"><a href="./bespoke.php" class="sub-link-list">Bespoke Events</a></li>
                                <li class="sub-li-list"><a href="./digital.php" class="sub-link-list">Digital Events</a></li>
                            </ul>
                        </span>
                    </li>
                    <li class="li-list"><a href="./sponsorship.php" class="nav-link">Sponsorship</a></li>
                    <li class="li-list"><a href="./gallery.php" class="nav-link">Gallery</a></li>
                    <li class="li-list"><a href="https://article.gainskillsmedia.com/" class="nav-link">Article</a></li>
                    <li class="li-list"><a href="./contact.php" class="nav-link active">Contact Us</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <section class="hero-pages-container">
        <div class="hero-pages-sub-container container mx-auto px-5">
            <div class="hero-pages-content-container">
                <div class="hero-pages-body">
                    <h1 class="hero-pages-heading" data-aos="fade-down" data-aos-duration="1000">Contact Us</h1>
                    <div class="hero-pages-border" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100"></div>
                    <span class="hero-pages-text-container" data-aos="fade-up" data-aos-duration="1000">
                        <p>Welcome to our Contact Us page, the central hub for reaching out to our passionate team at Gain Skills Media. We're here to transform your event ideas into unforgettable experiences. Whether you're planning a Conference and Awards, a Bespoke Event, or a Digital Event, our dedicated team is ready to collaborate with you. Have a question about our event planning services? Need assistance with a specific inquiry or looking to discuss a potential partnership? Feel free to drop us a message or give us a call. Your vision is our priority, and we're excited to help you bring it to life. Reach out today, and let's create extraordinary events together</p>
                    </span>
                    <a class="hero-pages-button" href="#contact-now" data-aos="fade-up" data-aos-duration="1000">Contact Now</a>
                </div>
                <div class="hero-pages-image-container">
                    <img src="../assets/images/contact.webp" alt="Gain Skills" class="hero-pages-image" />
                </div>
            </div>
        </div>
    </section>

    <section class="form-main-container" id="contact-now">
        <div class="form-sub-container container mx-auto px-5">
            <div class="address-container" data-aos="slide-right" data-aos-duration="1000">
                <iframe class="address-box lg:h-full w-full h-80" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3166.896306000824!2d72.85812265078819!3d19.27820755328168!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b1c3c5073541%3A0xb7097d6e3462ca23!2sGain%20Skills%20Business%20Media%20Pvt%20Ltd.!5e0!3m2!1sen!2sin!4v1673442973677!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <form action="./mail/contact.php" method="POST" id="form" data-aos="slide-left" data-aos-duration="1000" class="form-container">
                <h2 class="form-heading">Contact Form</h2>
                <div class="form-main-input mb-3">
                    <div class="form-input mb-3 sm:mb-0">
                        <input type="text" class="firstName input-field sm:me-2" id="firstName" name="firstName" placeholder="First Name" required />
                    </div>
                    <div class="form-input">
                        <input type="text" class="lastName input-field sm:ms-2" id="lastName" name="lastName" placeholder="Last Name" required />
                    </div>
                </div>
                <div class="form-input mb-3">
                    <input type="email" class="input-field email" id="email" name="email" placeholder="Official Email" required />
                </div>
                <div class="form-input mb-3">
                    <input type="text" class="input-field mobileNumber" id="mobileNumber" name="mobileNumber" placeholder="Mobile Number" pattern="[1-9]{1}[0-9]{9}" required />
                </div>
                <div class="form-input mb-3">
                    <input type="text" class="input-field companyName" id="companyName" name="companyName" placeholder="Company Name" required />
                </div>
                <div class="form-input mb-3">
                    <input type="text" class="input-field designation" id="designation" name="designation" placeholder="Designation" required />
                </div>
                <div class="form-input mb-3">
                    <input type="text" class="input-field city" id="city" name="city" placeholder="City" required />
                </div>
                <button class="form-submit-btn submit" name="contact-btn" type="submit">Submit</button>                        
            </form>
        </div>
    </section>

    <?php require '../inc/footer.php'; ?>

    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
    <script src="../js/sponsorship.js"></script>
    <script src="../js/tailwind.config.js"></script>
    <script src="../js/script.js"></script>
    <script src="../js/AOS.js"></script>
    <script>
        AOS.init({
            once: true,
        });
    </script>

</body>
</html>