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

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Home page | 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 home-wrap position-relative">

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

        <!-- banner section -->
        <section>
            <div class="inner-banner">
                <div class="owl-carousel banner-carousel">

                    <div class="banner-item" data-dot="1">

                        <div class="banner-left">
                            <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Elevate Your<br> Everyday Look
                            </h2>

                            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Premium hair spa, advanced beauty treatments, and professional grooming services designed to make you look confident and beautiful.
                            </p>

                            <div class="banner-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                <a href="">Book Now</a>
                            </div>
                        </div>

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

                    </div>


                    <div class="banner-item" data-dot="2">

                        <div class="banner-left">
                            <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Modern Men’s<br> Grooming
                            </h2>

                            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Experience professional men’s haircuts, beard styling, and relaxing grooming treatments designed to keep you sharp, stylish, and confident every day.
                            </p>

                            <div class="banner-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                <a href="">Book Appointment</a>
                            </div>
                        </div>

                        <div class="banner-right wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                            <img src="./assets/images/banner/banner-3.webp" class="img-fluid" alt="">
                        </div>

                    </div>


                    <div class="banner-item" data-dot="3">

                        <div class="banner-left">
                            <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Creative<br> Nail Art Studio
                            </h2>

                            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Discover stunning nail art designs, gel polish, and luxury manicure treatments that enhance the beauty of your hands with creativity and elegance.
                            </p>

                            <div class="banner-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                <a href="">Explore Nail Designs</a>
                            </div>
                        </div>

                        <div class="banner-right wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                            <img src="./assets/images/banner/banner-4.webp" class="img-fluid" alt="">
                        </div>

                    </div>


                    <div class="banner-item" data-dot="4">

                        <div class="banner-left">
                            <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Creative<br> Nail Art Studio
                            </h2>

                            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Discover stunning nail art designs, gel polish, and luxury manicure treatments that enhance the beauty of your hands with creativity and elegance.
                            </p>

                            <div class="banner-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                <a href="">Explore Nail Designs</a>
                            </div>
                        </div>

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

                    </div>


                    <div class="banner-item" data-dot="5">

                        <div class="banner-left">
                            <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Luxury Hair<br> Spa & Care
                            </h2>

                            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Revitalize your hair with nourishing hair spa treatments that repair damage, strengthen roots, and give your hair a smooth, healthy shine.
                            </p>

                            <div class="banner-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                <a href="">Book Hair Spa</a>
                            </div>
                        </div>

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

                    </div>

                </div>
            </div>
        </section>

        <!-- book appointment section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="inner-appointment">
                <div class="container-fluid">
                    <div class="row g-0">
                        <!-- Nail Art -->
                        <div class="col-lg-6 col-md-6 wow animate__animated animate__fadeInLeft" data-wow-delay="0.2s">
                            <div class="appointment-box nail-art">
                                <div class="appointment-content">
                                    <div class="appointment-overlay-1 wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                        <img src="./assets/images/home/appointment-1.webp" class="img-fluid" alt="">
                                    </div>
                                    <div class="appointment-overlay-2">
                                        <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                            NAIL ART
                                        </h2>
                                        <div class="custom-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">
                                            <a href="#">BOOK APPOINTMENT</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Korean Facial -->
                        <div class="col-lg-6 col-md-6 wow animate__animated animate__fadeInRight" data-wow-delay="0.2s">
                            <div class="appointment-box facial">
                                <div class="appointment-content">
                                    <div class="appointment-overlay-1 wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                        <img src="./assets/images/home/appointment-2.webp" class="img-fluid" alt="">
                                    </div>
                                    <div class="appointment-overlay-2">
                                        <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                            Korean <br> Facial
                                        </h2>
                                        <div class="custom-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">
                                            <a href="#">BOOK APPOINTMENT</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- home service section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="inner-home-services">
                <div class="container-fluid">
                    <!-- Header -->
                    <div class="header-sec text-center">
                        <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            Find the Perfect
                        </h5>
                        <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            Our Services
                        </h3>
                    </div>

                    <div class="service-tab">

                        <!-- Tabs -->
                        <div class="service-tabs wow animate__animated animate__fadeInDown" data-wow-delay="0.3s">
                            <button class="tab-btn active" data-tab="men">MEN</button>
                            <button class="tab-btn" data-tab="women">WOMEN</button>
                        </div>

                        <!-- mens -->
                        <div class="tab-content active" id="men">
                            <div class="owl-carousel service-slider">

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.2s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-1.webp" class="img-fluid" alt="Premium Hair Cut">
                                        <div class="service-overlay">
                                            <h4>PREMIUM HAIR CUT</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-2.webp" class="img-fluid" alt="Hair Colour">
                                        <div class="service-overlay">
                                            <h4>HAIR COLOUR</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.4s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-3.webp" class="img-fluid" alt="Hair Spa">
                                        <div class="service-overlay">
                                            <h4>HAIR SPA</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.5s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-4.webp" class="img-fluid" alt="Korean Hair Spa">
                                        <div class="service-overlay">
                                            <h4>KOREAN HAIR SPA</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.6s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-5.webp" class="img-fluid" alt="Hydra Facial">
                                        <div class="service-overlay">
                                            <h4>HYDRA FACIAL</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.7s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-6.webp" class="img-fluid" alt="Radiance Facial Treatment">
                                        <div class="service-overlay">
                                            <h4>RADIANCE FACIAL</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.8s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-7.webp" class="img-fluid" alt="Threading">
                                        <div class="service-overlay">
                                            <h4>THREADING</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.9s">
                                    <a href="#">
                                        <img src="./assets/images/services/mens/img-8.webp" class="img-fluid" alt="Head Massage">
                                        <div class="service-overlay">
                                            <h4>HEAD MASSAGE</h4>
                                        </div>
                                    </a>
                                </div>

                            </div>
                        </div>

                        <!-- WOMEN TAB -->
                        <div class="tab-content" id="women">
                            <div class="owl-carousel service-slider">

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.2s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-1.webp" class="img-fluid" alt="Premium Hair Cut">
                                        <div class="service-overlay">
                                            <h4>PREMIUM HAIR CUT</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-2.webp" class="img-fluid" alt="Hair Colour">
                                        <div class="service-overlay">
                                            <h4>HAIR COLOUR</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.4s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-3.webp" class="img-fluid" alt="Botox Hair Treatment">
                                        <div class="service-overlay">
                                            <h4>BOTOX HAIR TREATMENT</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.5s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-4.webp" class="img-fluid" alt="Nanoplastia Hair Treatment">
                                        <div class="service-overlay">
                                            <h4>NANOPLASTIA TREATMENT</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.6s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-5.webp" class="img-fluid" alt="Hydra Facial">
                                        <div class="service-overlay">
                                            <h4>HYDRA FACIAL</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.7s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-6.webp" class="img-fluid" alt="Korean Facial">
                                        <div class="service-overlay">
                                            <h4>KOREAN FACIAL</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.8s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-7.webp" class="img-fluid" alt="Manicure Pedicure">
                                        <div class="service-overlay">
                                            <h4>MANICURE & PEDICURE</h4>
                                        </div>
                                    </a>
                                </div>

                                <div class="service-card wow animate__animated animate__zoomIn" data-wow-delay="0.9s">
                                    <a href="#">
                                        <img src="./assets/images/services/women/img-8.webp" class="img-fluid" alt="Hair Do">
                                        <div class="service-overlay">
                                            <h4>HAIR DO</h4>
                                        </div>
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="custom-btn d-flex justify-content-center align-items-center wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                        <a href="#">View More</a>
                    </div>
                </div>
                <div class="home-service-overlay-1 wow animate__animated animate__fadeInLeft" data-wow-delay="0.4s">
                    <img src="./assets/images/home/service-overlay-1.webp" class="img-fluid" alt="">
                </div>
                <div class="home-service-overlay-2 wow animate__animated animate__fadeInRight" data-wow-delay="0.4s">
                    <img src="./assets/images/home/service-overlay-1.webp" class="img-fluid" alt="">
                </div>
            </div>
        </section>

        <!-- Bridal mackover -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="inner-bridal">
                <div class="row align-items-stretch">
                    <div class="col-lg-4 wow animate__animated animate__fadeInLeft" data-wow-delay="0.2s">
                        <div class="bridal-left side-img">
                            <div class="owl-carousel bridal-slider">
                                <div class="bridal-item">
                                    <img src="./assets/images/bridal/bridal-1.webp" alt="Bridal Image 1">
                                </div>
                                <div class="bridal-item">
                                    <img src="./assets/images/bridal/bridal-2.webp" alt="Bridal Image 2">
                                </div>
                                <div class="bridal-item">
                                    <img src="./assets/images/bridal/bridal-3.webp" alt="Bridal Image 2">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="bridal-right">

                            <div class="bridal-header">
                                <h4 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                                    Beauty & Grooming Services
                                </h4>

                                <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                    Professional Beauty & Grooming Care
                                </h3>
                            </div>


                            <div class="bridal-wrap">

                                <ul class="bridal-tabs wow animate__animated animate__fadeInDown" data-wow-delay="0.6s">
                                    <li class="active" data-tab="groom">Grooming</li>
                                    <li data-tab="bride">Beauty</li>
                                    <li data-tab="saree">Styling</li>
                                </ul>


                                <!-- Grooming -->

                                <div class="bridal-tab-content active" id="groom">

                                    <div class="owl-carousel bridal-slider-main">

                                        <div class="bridal-card wow animate__animated animate__zoomIn" data-wow-delay="0.2s">
                                            <img src="./assets/images/services/bridal/img-1.webp" alt="">
                                            <h4>Threading</h4>
                                        </div>

                                        <div class="bridal-card wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                            <img src="./assets/images/services/bridal/img-2.webp" alt="">
                                            <h4>Waxing</h4>
                                        </div>

                                        <div class="bridal-card wow animate__animated animate__zoomIn" data-wow-delay="0.4s">
                                            <img src="./assets/images/services/bridal/img-3.webp" alt="">
                                            <h4>Head Massage</h4>
                                        </div>

                                    </div>

                                    <div class="custom-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                        <a href="">View More</a>
                                    </div>

                                </div>


                                <!-- Beauty -->

                                <div class="bridal-tab-content" id="bride">

                                    <div class="owl-carousel bridal-slider-main">

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-4.webp" alt="">
                                            <h4>Pedicure</h4>
                                        </div>

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-5.webp" alt="">
                                            <h4>Manicure</h4>
                                        </div>

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-6.webp" alt="">
                                            <h4>Foot Reflexology</h4>
                                        </div>

                                    </div>

                                    <div class="custom-btn">
                                        <a href="">View More</a>
                                    </div>

                                </div>


                                <!-- Styling -->

                                <div class="bridal-tab-content" id="saree">

                                    <div class="owl-carousel bridal-slider-main">

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-5.webp" alt="">
                                            <h4>Nails</h4>
                                        </div>

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-4.webp" alt="">
                                            <h4>Makeup</h4>
                                        </div>

                                        <div class="bridal-card">
                                            <img src="./assets/images/services/bridal/img-3.webp" alt="">
                                            <h4>Hair Do</h4>
                                        </div>

                                    </div>

                                    <div class="custom-btn">
                                        <a href="">View More</a>
                                    </div>

                                </div>

                            </div>

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

        <!-- home CTA Section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="inner-home-cta">
                <div class="cta-content text-center">
                    <img src="assets/images/F-studio.webp"
                        class="cta-logo wow animate__animated animate__zoomIn"
                        data-wow-delay="0.2s"
                        alt="logo">
                    <h2 class="main-head wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.4s">
                        Transform Your Look Today
                    </h2>
                    <p class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.6s">
                        WATCHES NOW UPDATE!
                    </p>
                    <div class="video-btn wow animate__animated animate__zoomIn"
                        data-wow-delay="0.8s"
                        data-bs-toggle="modal"
                        data-bs-target="#videoModal">

                        <i class="bi bi-play-fill"></i>
                    </div>
                </div>
            </div>
        </section>

        <!-- Video Modal -->
        <div class="modal fade video-modal" id="videoModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    <div class="modal-body">

                        <div class="ratio ratio-16x9">
                            <video src="./assets/videos/cta-video.mp4" controls></video>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <!-- why choose us  -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">

            <div class="inner-why">
                <div class="container-fluid">

                    <!-- Header -->

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

                        <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            WHY CHOOSE F STUDIO
                        </h5>

                        <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            Your Trusted Salon for Hair, Beauty & Grooming
                        </h3>

                    </div>


                    <div class="why-wrap">
                        <div class="row g-4">

                            <!-- Card 1 -->

                            <div class="col-lg-3 col-md-6 wow animate__animated animate__zoomIn" data-wow-delay="0.2s">
                                <div class="why-card">

                                    <div class="why-icon">
                                        <i class="bi bi-scissors"></i>
                                    </div>

                                    <h4>Expert Stylists</h4>

                                    <p>
                                        Our team of professional stylists provide the latest hair styling,
                                        hair spa, and beauty services to help you look your best.
                                    </p>

                                </div>
                            </div>


                            <!-- Card 2 -->

                            <div class="col-lg-3 col-md-6 wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                <div class="why-card why-down">

                                    <div class="why-icon">
                                        <i class="bi bi-stars"></i>
                                    </div>

                                    <h4>Premium Products</h4>

                                    <p>
                                        We use only high-quality and trusted salon products to ensure
                                        healthy hair, glowing skin, and long-lasting results.
                                    </p>

                                </div>
                            </div>


                            <!-- Card 3 -->

                            <div class="col-lg-3 col-md-6 wow animate__animated animate__zoomIn" data-wow-delay="0.4s">
                                <div class="why-card">

                                    <div class="why-icon">
                                        <i class="bi bi-person-hearts"></i>
                                    </div>

                                    <h4>Personalized Beauty</h4>

                                    <p>
                                        Every client is unique. We create personalized beauty and grooming
                                        solutions that match your style and personality.
                                    </p>

                                </div>
                            </div>


                            <!-- Card 4 -->

                            <div class="col-lg-3 col-md-6 wow animate__animated animate__zoomIn" data-wow-delay="0.5s">
                                <div class="why-card why-down">

                                    <div class="why-icon">
                                        <i class="bi bi-gem"></i>
                                    </div>

                                    <h4>Luxury Ambience</h4>

                                    <p>
                                        Enjoy a relaxing and luxurious salon environment designed to give
                                        you comfort and a premium beauty experience.
                                    </p>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>


                <!-- Overlay Image -->

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

            </div>

        </section>

        <!-- gallery section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="hair-marquee">
                <div class="marquee-wrapper">
                    <div class="marquee marquee-left wow animate__animated animate__fadeInLeft" data-wow-delay="0.2s">
                        <div class="marquee-track">
                            <img src="./assets/images/gallery/img-1.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-2.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-3.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-4.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-5.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-6.webp" class="img-fluid">

                            <img src="./assets/images/gallery/img-1.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-2.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-3.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-4.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-5.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-6.webp" class="img-fluid">
                        </div>
                    </div>
                    <div class="marquee marquee-right mt-3 wow animate__animated animate__fadeInRight" data-wow-delay="0.4s">
                        <div class="marquee-track">
                            <img src="./assets/images/gallery/img-11.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-12.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-13.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-14.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-15.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-16.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-11.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-12.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-13.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-14.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-15.webp" class="img-fluid">
                            <img src="./assets/images/gallery/img-16.webp" class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="custom-btn d-flex justify-content-center align-items-center wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                    <a href="#">Explore</a>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">

            <div class="inner-home-faq">
                <div class="container-fluid">

                    <div class="faq-wrap-inner">

                        <!-- Header -->

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

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

                            <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                Frequently Asked Questions
                            </h3>

                        </div>



                        <div class="faq-wrap">

                            <div class="accordion custom-faq" id="faqAccordion">

                                <!-- FAQ 1 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">

                                            <span class="faq-number">1.</span>
                                            What is the best hair spa and beauty parlour in Coimbatore?

                                        </button>
                                    </h2>

                                    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            F Studio is one of the best hair spa and beauty parlours in Coimbatore. We provide professional hair spa treatments, hair styling, skincare services, and complete beauty care solutions for both men and women.
                                        </div>

                                    </div>

                                </div>



                                <!-- FAQ 2 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">

                                            <span class="faq-number">2.</span>
                                            What are the benefits of having a hair spa treatment?

                                        </button>
                                    </h2>

                                    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            Hair spa treatments help repair damaged hair, reduce hair fall, improve scalp health, and make your hair smoother and shinier. Regular hair spa sessions also support healthy hair growth and deep nourishment.
                                        </div>

                                    </div>

                                </div>



                                <!-- FAQ 3 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">

                                            <span class="faq-number">3.</span>
                                            How often should I get a hair spa treatment?

                                        </button>
                                    </h2>

                                    <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            Hair experts recommend getting a hair spa treatment once every three to four weeks. This helps keep your scalp healthy, reduce dryness, and maintain smooth, nourished hair.
                                        </div>

                                    </div>

                                </div>



                                <!-- FAQ 4 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">

                                            <span class="faq-number">4.</span>
                                            What beauty services does F Studio provide in Coimbatore?

                                        </button>
                                    </h2>

                                    <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            F Studio offers a wide range of beauty services including hair spa, haircuts, hair styling, hair coloring, skincare treatments, makeup services, and other professional beauty care services.
                                        </div>

                                    </div>

                                </div>



                                <!-- FAQ 5 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">

                                            <span class="faq-number">5.</span>
                                            How can I book an appointment at F Studio in Coimbatore?

                                        </button>
                                    </h2>

                                    <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            You can book an appointment by calling us at <strong>073389 28824</strong> or by visiting our salon at Saibaba Colony, Coimbatore for professional hair spa and beauty services.
                                        </div>

                                    </div>

                                </div>



                                <!-- FAQ 6 -->

                                <div class="accordion-item wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">

                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">

                                            <span class="faq-number">6.</span>
                                            What makes F Studio the best hair spa and beauty salon in Coimbatore?

                                        </button>
                                    </h2>

                                    <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">

                                        <div class="accordion-body">
                                            F Studio stands out because of its experienced hair stylists, high-quality products, modern beauty treatments, and personalized care that helps clients achieve healthy hair and glowing skin.
                                        </div>

                                    </div>

                                </div>


                            </div>

                        </div>

                    </div>

                </div>



                <!-- Overlay Images -->

                <div class="faq-overlay-1 wow animate__animated animate__fadeInLeft" data-wow-delay="0.4s">
                    <img src="./assets/images/home/faq-overlay-1.webp" alt="">
                </div>

                <div class="faq-overlay-2 wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                    <img src="./assets/images/home/faq-overlay-2.webp" alt="">
                </div>

            </div>

        </section>

        <!-- testimonial section -->
        <section class="wow animate__animated animate__fadeIn" data-wow-duration="1.2s">
            <div class="inner-home-testimonial">
                <div class="container-fluid">
                    <div class="header-sec text-center">
                        <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            Client testimonial
                        </h5>
                        <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            listen what our Clients Says
                        </h3>
                    </div>
                    <div class="owl-carousel testimonial-slider wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                        <div class="testimonial-item">
                            <div class="stars">★★★★★</div>
                            <p>
                                “Visited F Studio in Coimbatore for a hair spa and the results were amazing. My hair feels so soft and healthy now. The staff were very professional and explained each step clearly. Definitely one of the best salons in the city.”
                            </p>
                            <div class="testimonial-user">
                                <img src="./assets/images/testimonial/img-1.webp" class="img-fluid">
                                <h5>Ramesh Kumar <span>—</span></h5>
                            </div>
                        </div>
                        <div class="testimonial-item">
                            <div class="stars">★★★★★</div>
                            <p>
                                “I came here for a facial treatment and I absolutely loved the experience. The products they use are very good and my skin feels fresh and glowing. Highly recommended for anyone looking for quality beauty services in Coimbatore.”
                            </p>
                            <div class="testimonial-user">
                                <img src="./assets/images/testimonial/img-2.webp" class="img-fluid">
                                <h5>Priya Narayanan <span>—</span></h5>
                            </div>
                        </div>
                        <div class="testimonial-item">
                            <div class="stars">★★★★★</div>
                            <p>
                                “The nail art service at F Studio is fantastic. The designs are creative and the staff are very patient while working. The salon is clean, modern, and gives a very relaxing vibe. I will definitely visit again.”
                            </p>
                            <div class="testimonial-user">
                                <img src="./assets/images/testimonial/img-4.webp" class="img-fluid">
                                <h5>Meena Lakshmi <span>—</span></h5>
                            </div>
                        </div>
                        <div class="testimonial-item">
                            <div class="stars">★★★★★</div>
                            <p>
                                “Got a haircut and beard styling here and the result was perfect. The stylist suggested a style that suits my face shape and it looks great. Friendly staff and a very comfortable atmosphere.”
                            </p>
                            <div class="testimonial-user">
                                <img src="./assets/images/testimonial/img-3.webp" class="img-fluid">
                                <h5>Arun Prakash <span>—</span></h5>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-progress wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                        <span class="progress-bar"></span>
                    </div>

                </div>
                <!-- Overlay Decorations -->
                <div class="testimonial-overlay-1 wow animate__animated animate__fadeInLeft" data-wow-delay="0.4s">
                    <img src="./assets/images/home/testimonial-overlay-1.webp" class="img-fluid" alt="">
                </div>
                <div class="testimonial-overlay-2 wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                    <img src="./assets/images/home/testimonial-overlay-2.webp" class="img-fluid" alt="">
                </div>
            </div>

        </section>


        <!-- testimonial video -->
        <section>
            <div class="inner-home-video">
                <div class="container-fluid">
                    <div class="header-sec text-center">
                        <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            Real Client Reviews
                        </h5>
                        <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            Watch Our Clients Share Their Beautiful Transformation Stories
                        </h3>
                    </div>


                    <div class="client-video-wrap">
                        <div class="row justify-content-center">

                            <div class="col-lg-3 col-md-6 col-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                                <div class="video-box">
                                    <video src="./assets/videos/testimonila/video-1.mp4" muted autoplay loop></video>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                                <div class="video-box">
                                    <video src="./assets/videos/testimonila/video-2.mp4" muted autoplay loop></video>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                                <div class="video-box">
                                    <video src="./assets/videos/testimonila/video-3.mp4" muted autoplay loop></video>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">
                                <div class="video-box">
                                    <video src="./assets/videos/testimonila/video-4.mp4" muted autoplay loop></video>
                                </div>
                            </div>

                        </div>
                    </div>



                    <div class="video-popup" id="videoPopup"> <span class="close-btn">&times;</span> <video id="popupVideo" controls></video> </div>
                </div>
            </div>
        </section>
        <!-- footer -->
        <?php include("./includes/footer.php"); ?>

        <script>
            const videos = document.querySelectorAll(".video-box video");
            const popup = document.getElementById("videoPopup");
            const popupVideo = document.getElementById("popupVideo");
            const closeBtn = document.querySelector(".close-btn");
            videos.forEach(video => {
                video.addEventListener("click", () => {
                    popup.style.display = "flex";
                    popupVideo.src = video.src;
                    popupVideo.muted = false;
                    popupVideo.play();
                });
            });
            closeBtn.addEventListener("click", () => {
                popup.style.display = "none";
                popupVideo.pause();
            });
        </script>
    </div>

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

    <!-- service tab -->
    <script>
        const tabs = document.querySelectorAll(".tab-btn");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach(tab => {
            tab.addEventListener("click", () => {

                tabs.forEach(t => t.classList.remove("active"));
                contents.forEach(c => c.classList.remove("active"));

                tab.classList.add("active");

                document.getElementById(tab.dataset.tab).classList.add("active");

            });
        });
    </script>

    <!-- service carousel -->
    <script>
        $(document).ready(function() {
            $('.service-slider').owlCarousel({
                loop: true,
                margin: 30,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                smartSpeed: 900,
                slideTransition: 'linear',

                responsive: {
                    0: {
                        items: 2,
                        margin: 15
                    },
                    576: {
                        items: 2,
                        margin: 20
                    },
                    767: {
                        items: 3,
                        margin: 25
                    },
                    1200: {
                        items: 4,
                        margin: 30
                    }
                }

            });

        });
    </script>

    <!-- testimonial carousel -->
    <script>
        $(document).ready(function() {

            $('.testimonial-slider').owlCarousel({

                loop: true,
                margin: 30,
                nav: true,
                dots: true,

                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,

                smartSpeed: 800,
                slideTransition: 'ease',

                navText: [
                    "<span class='owl-prev-icon'>‹</span>",
                    "<span class='owl-next-icon'>›</span>"
                ],

                responsive: {
                    0: {
                        items: 1,
                        margin: 20
                    },
                    768: {
                        items: 1,
                        margin: 25
                    },
                    992: {
                        items: 2,
                        margin: 30
                    }
                }

            });

        });
    </script>

    <!-- banner carousle  -->
    <script>
        $(document).ready(function() {

            var owl = $('.banner-carousel');

            owl.owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                nav: false,
                dots: true,
                dotsData: true,

                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,

                smartSpeed: 1200,
                fluidSpeed: 1200,
                autoplaySpeed: 1200,

                mouseDrag: true,
                touchDrag: true,
                pullDrag: true,
                freeDrag: false,

                animateOut: 'fadeOut',
                animateIn: 'fadeIn',

                stagePadding: 0,
                autoHeight: false
            });

        });
    </script>

    <!-- /* Bridal Carousel */ -->
    <script>
        $(document).ready(function() {

            $('.bridal-slider').owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                nav: false,
                dots: true,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                smartSpeed: 900,
                animateOut: 'fadeOut',
                mouseDrag: true,
                touchDrag: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    768: {
                        items: 1
                    },
                    992: {
                        items: 1
                    }
                }
            });

        });
    </script>

    <!-- bridal tab switching  -->
    <script>
        $('.bridal-tabs li').click(function() {

            var tab = $(this).data('tab');

            $('.bridal-tabs li').removeClass('active');
            $(this).addClass('active');

            $('.bridal-tab-content').removeClass('active');
            $('#' + tab).addClass('active');

        });
    </script>

    <!-- bridal right carousel -->
    <script>
        $('.bridal-slider-main').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            dots: false,
            autoplay: true,
            smartSpeed: 800,
            responsive: {
                0: {
                    items: 1
                },
                480: {
                    items: 2
                },
                767: {
                    items: 3
                },
                991: {
                    items: 2
                },
                1200: {
                    items: 3
                }
            }
        });
    </script>

</body>

</html>