<?php include 'includes/header.php'; ?>
<body>
    <!-- MAIN WRAPPER
    ================================================== -->
    <div class="main-wrapper">

        <!-- HEADER
        ================================================== -->
        <?php include 'includes/nav.php'; ?>

        <!-- PAGE TITLE
        ================================================== -->
        <section class="page-title-section bg-img cover-background dark-overlay" data-overlay-dark="8" data-background="img/bg/bg-03.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="display-2 text-white fw-bold">Team Details</h1>
                    </div>
                    <div class="col-md-12">
                        <div class="breadcrumb">
                            <ul>
                                <li><a href="/">Home</a></li>
                                <li><a href="#">Team Details</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-transparent border-width-2 border-solid border-secondary p-3 d-sm-inline-block rounded-circle position-absolute bottom-10 left-5 ani-top-bottom d-none z-index-3"></div>
            <div class="bg-primary p-1-6 d-lg-block rounded-circle position-absolute top-25 right-25 ani-top-bottom d-none z-index-3"></div>
            <div class="bg-white p-2 d-sm-inline-block rounded-circle position-absolute top-40 left-25 ani-left-right d-none z-index-3"></div>
        </section>

        <!-- TEAM DETAILS
        ================================================== -->
        <section>
            <div class="container">
                <div class="team-details-wrapper mb-2-9">
                    <div class="row align-items-xl-center">
                        <div class="col-lg-5 mb-2-2 mb-lg-0">
                            <div class="position-relative image-hover">
                                <img src="img/team/01.jpg" class="border-radius-10" alt="...">
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="px-lg-2-2 px-xl-2-9 position-relative">
                                <div class="pb-4 mb-4 borders-bottom border-color-extra-light-gray">
                                    <h2 class="h3">Percy Rouse</h2>
                                    <span class="fs-6 d-block mb-3 text-muted font-weight-500">Diet & Nutrition</span>
                                    <p class="mb-0 w-lg-95">Highly certified and realistic skilled educate with a nice of talents and unique interests. Always organized for all kind of exercising and to present training.</p>
                                </div>
                                <div class="pb-4 mb-4 borders-bottom border-color-extra-light-gray">
                                    <ul class="team-info">
                                        <li><span>Experience:</span>05 Years</li>
                                        <li><span>Phone:</span> <a href="tel:1234567892">(+44) 123 456 7892</a></li>
                                        <li><span>Email:</span> <a href="mailto:info@webmail.com">info@webmail.com</a></li>
                                        <li><span>Address:</span>66 Guild Street, USA</li>
                                    </ul>
                                </div>
                                <ul class="team-social-box">
                                    <li>
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2-9">
                    <div class="col-md-12">
                        <h3 class="h4 mb-3">Personal Experience:</h3>
                        <p class="mb-0 w-lg-95">
                            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2-9">
                        <h3 class="h4 mb-3">About Health Coach:</h3>
                        <p class="mb-3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                        <p class="mb-0">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat.</p>
                    </div>
                    <div class="col-lg-4 mb-2-9">
                        <div class="px-lg-4">
                            <h3 class="h4 mb-3">Professional Skills:</h3>
                            <div class="mb-1-9">
                                <div class="progress-text display-30 font-weight-600 mb-2">
                                    <div class="row">
                                        <div class="col-7">Private Coaching</div>
                                        <div class="col-5 text-end">90%</div>
                                    </div>
                                </div>
                                <div class="custom-progress progress progress-medium" style="height: 8px;border-radius: 0">
                                    <div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
                                </div>
                            </div>
                            <div class="mb-1-9">
                                <div class="progress-text display-30 font-weight-600 mb-2">
                                    <div class="row">
                                        <div class="col-7">Weight Loss</div>
                                        <div class="col-5 text-end">95%</div>
                                    </div>
                                </div>
                                <div class="custom-progress progress progress-medium" style="height: 8px;border-radius: 0">
                                    <div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
                                </div>
                            </div>
                            <div class="mb-1-9">
                                <div class="progress-text display-30 font-weight-600 mb-2">
                                    <div class="row">
                                        <div class="col-7">Nutrition</div>
                                        <div class="col-5 text-end">85%</div>
                                    </div>
                                </div>
                                <div class="custom-progress progress progress-medium" style="height: 8px;border-radius: 0">
                                    <div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 85%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
                                </div>
                            </div>
                            <div>
                                <div class="progress-text display-30 font-weight-600 mb-2">
                                    <div class="row">
                                        <div class="col-7">Medical Issues</div>
                                        <div class="col-5 text-end">70%</div>
                                    </div>
                                </div>
                                <div class="custom-progress progress progress-medium" style="height: 8px;border-radius: 0">
                                    <div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2-9">
                        <div class="ps-lg-1-9">
                            <h3 class="h4 mb-3">Classes Experience:</h3>
                            <div class="row mt-n1-6">
                                <div class="col-lg-12 mt-1-6">
                                    <div class="text-center text-sm-start">
                                        <div class="h2">
                                            <div class="odometer d-inline-block" data-count="55">0</div>        
                                        </div>
                                        <span class="fs-6 font-weight-600">Days Nutrition Program</span>
                                    </div>
                                </div>
                                <div class="col-lg-12 mt-1-6">
                                    <div class="text-center text-sm-start">
                                        <div class="h2">
                                            <div class="odometer d-inline-block" data-count="957">0</div>        
                                        </div>
                                        <span class="fs-6 font-weight-600">Happy Customers After Diet</span>
                                    </div>
                                </div>
                                <div class="col-lg-12 mt-1-6">
                                    <div class="text-center text-sm-start">
                                        <div class="h2">
                                            <div class="odometer d-inline-block" data-count="94">0</div>        
                                        </div>
                                        <span class="fs-6 font-weight-600">Private & Group Sessions</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="p-1-6 p-sm-1-9 p-lg-2-2 bg-very-light-gray border-radius-10 border border-color-extra-light-gray">
                            <h3 class="h4 mb-3">Contact Me</h3>
                            <form class="contact quform" action="quform/contact.php" method="post" enctype="multipart/form-data" onclick="">
                                <div class="quform-elements">
                                    <div class="row">

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="name">Your Name <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <input class="form-control" id="name" type="text" name="name" placeholder="Your name here">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="email">Your Email <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <input class="form-control" id="email" type="text" name="email" placeholder="Your email here">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="subject">Your Subject <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <input class="form-control" id="subject" type="text" name="subject" placeholder="Your subject here">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Text input element -->
                                        <div class="col-md-6">
                                            <div class="quform-element form-group">
                                                <label for="phone">Contact Number</label>
                                                <div class="quform-input">
                                                    <input class="form-control" id="phone" type="text" name="phone" placeholder="Your phone here">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Text input element -->

                                        <!-- Begin Textarea element -->
                                        <div class="col-md-12">
                                            <div class="quform-element form-group">
                                                <label for="message">Message <span class="quform-required">*</span></label>
                                                <div class="quform-input">
                                                    <textarea class="form-control" id="message" name="message" rows="3" placeholder="Tell us a few words"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Textarea element -->

                                        <!-- Begin Captcha element -->
                                        <div class="col-md-12">
                                            <div class="quform-element">
                                                <div class="form-group">
                                                    <div class="quform-input">
                                                        <input class="form-control" id="type_the_word" type="text" name="type_the_word" placeholder="Type the below word">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="quform-captcha">
                                                        <div class="quform-captcha-inner">
                                                            <img src="quform/images/captcha/courier-new-light.png" alt="...">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Captcha element -->

                                        <!-- Begin Submit button -->
                                        <div class="col-md-12">
                                            <div class="quform-submit-inner">
                                                <button class="butn border-0" type="submit">Send Message</button>
                                            </div>
                                            <div class="quform-loading-wrap text-start"><span class="quform-loading"></span></div>
                                        </div>
                                        <!-- End Submit button -->

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-secondary p-3 rounded-circle position-absolute top-45 right-10 z-index-3 ani-left-right d-none d-lg-block"></div>
        </section>

        <!-- FOOTER
        ================================================== -->
<?php include 'includes/footer.php'; ?>
        