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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About 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">About F Studio</h1>

                                    <div class="salon-breadcrumb-wrapper">
                                        <ul class="salon-breadcrumb">
                                            <li><a href="index.php">Home</a></li>
                                            <li class="active">About 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>

            <!-- about us section -->
            <section>
                <div class="inner-about-us">
                    <div class="container-fluid">

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

                            <div class="col-xl-6 col-lg-7 col-md-12">

                                <div class="about-left">

                                    <h4 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                                        About F Studio
                                    </h4>

                                    <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                        Expert Hair, Beauty & Skin Care Services
                                    </h2>

                                    <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                                        <i class="bi bi-caret-right-fill"></i>
                                        At F Studio, we believe beauty is a form of self-expression. Our professional team
                                        provides premium hair, skin, and grooming services designed to enhance your
                                        natural beauty and boost your confidence.
                                    </p>


                                    <div class="about-sep">

                                        <div class="about-item wow animate__animated animate__fadeInLeft" data-wow-delay="0.4s">
                                            <i class="bi bi-scissors"></i>
                                            <div>
                                                <h5>Expert Stylists</h5>
                                                <p>Professional hair and beauty specialists delivering modern styles and premium care.</p>
                                            </div>
                                        </div>

                                        <div class="about-item wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
                                            <i class="bi bi-stars"></i>
                                            <div>
                                                <h5>Premium Services</h5>
                                                <p>Experience advanced hair, skin and grooming services using high-quality products.</p>
                                            </div>
                                        </div>

                                    </div>


                                    <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                        <i class="bi bi-caret-right-fill"></i>
                                        From advanced hair treatments and customized facials to professional grooming
                                        and bridal makeovers, we use high-quality products and modern techniques to
                                        deliver exceptional results in a relaxing and luxurious environment.
                                    </p>

                                    <div class="custom-btn wow animate__animated animate__fadeInUp" data-wow-delay="0.7s">
                                        <a href="#">Get Connected</a>
                                    </div>

                                </div>

                            </div>


                            <div class="col-sm-6 col-lg-5 cl-md-12">

                                <div class="about-right wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                    <img src="./assets/images/about/about-1.webp" class="img-fluid" alt="">
                                </div>

                            </div>

                        </div>

                    </div>


                    <div class="about-counter">

                        <div class="counter-item wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            <h3 class="counter" data-target="10">0</h3>
                            <p>Years of Experience</p>
                        </div>

                        <div class="counter-item wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            <h3 class="counter" data-target="1000">0</h3>
                            <p>Happy Clients</p>
                        </div>

                        <div class="counter-item wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                            <h3 class="counter" data-target="500">0</h3>
                            <p>Beauty Transformations</p>
                        </div>

                        <div class="counter-item wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                            <h3 class="counter" data-target="20">0</h3>
                            <p>Professional Services</p>
                        </div>

                    </div>

                    <div class="about-sec-overlay-1">
                        <img src="./assets/images/shape/service-detail-left.webp" class="img-fluid" alt="">
                    </div>

                </div>
            </section>

            <!-- about cta -->
            <section>
                <div class="inner-about-cta">
                    <div class="container-fluid">

                        <div class="row align-items-center">

                            <div class="col-lg-6 col-md-7">

                                <div class="cta-right">

                                    <h4 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                                        Book Your Appointment Today
                                    </h4>

                                    <h2 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                        Ready for a Stunning New Look?
                                    </h2>

                                    <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                                        <i class="bi bi-caret-right-fill"></i>
                                        Experience premium hair, skin, and beauty services at F Studio.
                                        Our expert stylists are here to help you achieve the perfect look
                                        with professional care and high-quality products.
                                    </p>

                                    <div class="cta-btns wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">

                                        <div class="banner-btn">
                                            <a href="https://wa.me/917338928824" target="_blank" class="secondary-btn">
                                                <i class="bi bi-whatsapp"></i> Chat on WhatsApp
                                            </a>
                                        </div>

                                    </div>

                                </div>

                            </div>


                            <div class="col-lg-6 col-md-5">

                                <div class="cta-left wow animate__animated animate__zoomIn" data-wow-delay="0.3s">
                                    <img src="./assets/images/about/about-cta.webp" class="img-fluid" alt="F Studio Salon">
                                </div>

                            </div>

                        </div>

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

            <!-- mission and vission -->
            <section>
                <div class="inner-vission">
                    <div class="container-fluid">

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

                            <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                                OUR COMMITMENT
                            </h5>

                            <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Professional Beauty & Style
                            </h3>

                        </div>


                        <div class="row g-4">

                            <div class="col-lg-6">

                                <div class="vision-card wow animate__animated animate__fadeInLeft" data-wow-delay="0.3s">

                                    <div class="vision-icon">
                                        <i class="bi bi-eye"></i>
                                    </div>

                                    <h3>Our Vision</h3>

                                    <p>
                                        To become a trusted beauty destination where creativity,
                                        professionalism, and premium care come together to deliver
                                        exceptional hair, skin, and grooming experiences.
                                    </p>

                                </div>

                            </div>


                            <div class="col-lg-6">

                                <div class="vision-card wow animate__animated animate__fadeInRight" data-wow-delay="0.4s">

                                    <div class="vision-icon">
                                        <i class="bi bi-bullseye"></i>
                                    </div>

                                    <h3>Our Mission</h3>

                                    <p>
                                        Our mission is to provide high-quality beauty services
                                        using modern techniques and premium products while
                                        ensuring every client leaves feeling confident and
                                        refreshed.
                                    </p>

                                </div>

                            </div>

                        </div>

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

            <!-- our parternrs -->
            <section>
                <div class="inner-partners">
                    <div class="container-fluid">
                        <div class="header-sec text-center mb-3">

                            <h5 class="sub-head wow animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                                OUR PARTNERS
                            </h5>

                            <h3 class="main-head wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                Trusted Brands We Work With
                            </h3>

                        </div>

                        <div class="partner-wrap">

                            <div class="owl-carousel partner-carousel">

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-1.webp" class="img-fluid" alt="">
                                </div>

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-2.webp"  class="img-fluid alt="">
                                </div>

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-1.webp"  class="img-fluid alt="">
                                </div>

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-2.webp"  class="img-fluid alt="">
                                </div>

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-1.webp"  class="img-fluid alt="">
                                </div>

                                <div class="partner-item">
                                    <img src="./assets/images/partners/brand-2.webp"  class="img-fluid alt="">
                                </div>

                            </div>

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

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

    </div>

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

    <!-- about counter  -->
    <script>
        const counters = document.querySelectorAll('.counter');

        counters.forEach(counter => {
            const updateCount = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;

                const increment = target / 100;

                if (count < target) {
                    counter.innerText = Math.ceil(count + increment);
                    setTimeout(updateCount, 20);
                } else {
                    counter.innerText = target + "+";
                }
            };

            updateCount();
        });
    </script>

    <!-- partner carousle -->
     <script>
        $('.partner-carousel').owlCarousel({
    loop:true,
    margin:30,
    autoplay:true,
    autoplayTimeout:2500,
    smartSpeed:600,
    nav:false,
    dots:false,

    responsive:{
        0:{
            items:2
        },
        576:{
            items:3
        },
        768:{
            items:4
        },
        992:{
            items:5
        }
    }
});
     </script>
</body>

</html>