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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us| F - Studio</title>
    <link rel="icon" type="image/png" href="./assets/images/favicon.png">


    <!-- head -->
    <?php include("./includes/head.php"); ?>
</head>

<body>

    <div class="body-wrap">

        <!-- header -->
        <?php include("./includes/header.php"); ?>

        <main>
            <!-- sub banner -->
            <section>
                <div class="inner-sub-banner">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="sub-banner-center text-center">

                                    <h1 class="main-head">Contact Us</h1>

                                    <div class="salon-breadcrumb-wrapper">
                                        <ul class="salon-breadcrumb">
                                            <li><a href="index.php">Home</a></li>
                                            <li class="active">Contact Us</li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sub-banner-overlay-1">
                        <img src="./assets/images/shape/sub-banner-1.webp" class="img-fluid" alt="">
                    </div>

                </div>
            </section>




            <section>
                <div class="inner-contact">

                    <div class="container-fluid">

                        <div class="contact-content-wrap">

                            <div class="row align-items-stretch justify-content-center">

                                <!-- Address -->
                                <div class="col-lg-4 col-md-6 col-sm-6 mt-3 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                    <div class="contact-card location-card ">

                                        <div class="contact-icon">
                                            <img src="./assets/images/icons/location.gif" class="img-fluid" alt="">
                                        </div>

                                        <a href="https://share.google/mBGxjEuxC7CKMH0dJ" target="_blank">
                                          No 31, Bharathi Park 7th Cross Rd, Saibaba Colony, Coimbatore, Tamil Nadu – 641011
                                        </a>

                                    </div>
                                </div>

                                <!-- Phone -->
                                <div class="col-lg-4 col-md-6 col-sm-6 mt-3 wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                    <div class="contact-card phone-card">

                                        <div class="contact-icon">
                                            <img src="./assets/images/icons/phone.gif" class="img-fluid" alt="">
                                        </div>

                                        <a href="tel:+9173389 28824">
                                            +91 73389 28824
                                        </a>

                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="col-lg-4 col-md-6 mt-3 wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                    <div class="contact-card mail-card">

                                        <div class="contact-icon">
                                            <img src="./assets/images/icons/mail.gif" class="img-fluid" alt="">
                                        </div>

                                        <a href="mailto:fstudio@gmail.com">
                                            fstudio@gmail.com
                                        </a>

                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="contact-form">

                            <div class="header-sec text-center">

                                <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                    CONTACT US
                                </h5>

                                <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                    Get In Touch With Our Salon Experts
                                </h3>

                                <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                    Book your appointment or contact us for premium salon services.
                                    Our team will help you choose the best hair and beauty treatments.
                                </p>

                            </div>


                            <div class="form-sec">

                                <form>

                                    <div class="row">

                                        <!-- Name -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                            <div class="form-group">
                                                <label for="name">Full Name *</label>
                                                <input type="text" id="name" placeholder="Enter your full name">
                                                <i class="bi bi-person"></i>
                                            </div>
                                        </div>

                                        <!-- Phone -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                                            <div class="form-group">
                                                <label for="phone">Phone Number *</label>
                                                <input type="tel" id="phone" placeholder="Enter your phone number">
                                                <i class="bi bi-telephone"></i>
                                            </div>
                                        </div>

                                        <!-- Email -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                            <div class="form-group">
                                                <label for="email">Email Address</label>
                                                <input type="email" id="email" placeholder="Enter your email address">
                                                <i class="bi bi-envelope"></i>
                                            </div>
                                        </div>

                                        <!-- Service -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                            <div class="form-group">
                                                <label for="service">Select Service</label>
                                                <select id="service">
                                                    <option value="">Choose a service</option>
                                                    <option>Hair Cut</option>
                                                    <option>Hair Spa</option>
                                                    <option>Hair Colour</option>
                                                    <option>Facial</option>
                                                    <option>Makeup</option>
                                                </select>
                                                <i class="bi bi-scissors"></i>
                                            </div>
                                        </div>

                                        <!-- Date -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                            <div class="form-group">
                                                <label for="date">Appointment Date</label>
                                                <input type="date" id="date">
                                                <i class="bi bi-calendar"></i>
                                            </div>
                                        </div>

                                        <!-- Time -->
                                        <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">
                                            <div class="form-group">
                                                <label for="time">Preferred Time</label>
                                                <input type="time" id="time">
                                                <i class="bi bi-clock"></i>
                                            </div>
                                        </div>

                                        <!-- Message -->
                                        <div class="col-lg-12 wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                                            <div class="form-group textarea-group">
                                                <label for="message">Message</label>
                                                <textarea id="message" placeholder="Write your message"></textarea>
                                                <i class="bi bi-chat"></i>
                                            </div>
                                        </div>

                                        <!-- Button -->
                                        <div class="col-lg-12 text-center mt-2 wow animate__animated animate__zoomIn" data-wow-delay="1s">
                                            <div class="banner-btn">
                                                <a href="">Submit</a>
                                            </div>
                                        </div>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>


                    <!-- Overlay Animations -->

                    <div class="contact-overlay wow animate__animated animate__fadeInLeft" data-wow-delay="0.5s">
                        <img src="./assets/images/shape/contact-overlay.webp" class="img-fluid" alt="">
                    </div>

                    <div class="contact-overlay-1 wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                        <img src="./assets/images/shape/contact-overlay-1.webp" class="img-fluid" alt="">
                    </div>

                </div>
            </section>


            <section>
                <div class="inner-map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d165138.52037798704!2d76.88466253375378!3d11.013957741983077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e1!3m2!1sen!2sin!4v1772883038366!5m2!1sen!2sin" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </section>
        </main>

        <!-- footer -->
        <?php include("./includes/footer.php"); ?>

    </div>

    <!-- Script -->
    <?php include("./includes/script.php"); ?>

</body>

</html>