Ele57885fddfgdfgfghgقفغفغفقhfg555434536

kohjhjhصثقصثقصثقgdfgdg Ele57885fddfgdfgfghgقفغفغفقhfg555434536

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="css/style.css">
    <title>Tudebon - FAQ</title>
</head>

<section class="sticky-top bg-accent-color-1">
        <div class="r-container">
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <div class="logo-container">
                        <img src="image/logo.png" alt="" class="img-fluid">
                    </div>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fa-solid fa-bars-staggered"></i>
                    </button>
                    <div class="collapse p-lg-0 px-2 py-3 navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-lg-3">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="about_us.html">About Us</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    Service
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="services.html">Services</a></li>
                                    <li><a class="dropdown-item" href="service_detail.html">Service Detail</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link active dropdown-toggle" href="#" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Pages
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="appointment.html">Appointment</a></li>
                                    <li><a class="dropdown-item" href="therapist.html">Therapist</a></li>
                                    <li><a class="dropdown-item active" href="faq.html">FAQ</a></li>
                                    <li><a class="dropdown-item" href="404.html">404 Page</a></li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    Blog
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="blog.html">Blog</a></li>
                                    <li><a class="dropdown-item" href="single_blog.html">Single Blog</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact Us</a>
                            </li>
                        </ul>
                        <div>
                            <div class="d-flex flex-row align-items-center gap-3 text-white">
                                <span class="fs-2"><i class="fa-solid fa-phone"></i></span>
                                <div class="d-flex flex-column">
                                    <span>Call Us</span>
                                    <span>+123-234-1234</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </section>

<section class="section">
            <div class="r-container">
                <div class="row row-cols-1 row-cols-lg-2">
                    <div class="col mb-3">
                        <div class="position-relative ps-5">
                            <a href="image/image-600x800-1.jpg" data-fslightbox="gallery">
                                <img src="image/image-600x800-1.jpg" alt="" class="img-fluid rounded-4">
                            </a>
                            <div
                                class="position-absolute top-0 start-0 bg-accent-color rounded-4 p-4 text-white text-center mt-5">
                                <h3 class="font-1 fw-semibold m-0">1,200<sup class="fw-normal">+</sup></h3>
                                <span class="font-1">Question</span>
                            </div>
                        </div>
                    </div>
                    <div class="col mb-3">
                        <div class="d-flex flex-column gap-2 h-100 justify-content-center px-3">
                            <h6 class="fw-semibold font-1 accent-color-1 ls-2">QUESTION FORM</h6>
                            <h3 class="accent-color font-1 fw-semibold">You Can't Find The Answer?</h3>
                            <p class="font-2 fw-light">
                                Maecenas dictum fringilla nisi ac malesuada. Donec ac quam non diam elementum ultricies.
                                In hac habitasse platea dictumst. Duis vestibulum magna quis suscipit tempus. Nunc
                                pretium placerat.
                            </p>
                            <div>
                                <div class="toast-container position-fixed bottom-0 end-0 p-3">
                                    <div id="liveToast"
                                        class="toast success_msg_appointment bg-dark-transparent text-white"
                                        role="alert" aria-live="assertive" aria-atomic="true">
                                        <div class="d-flex">
                                            <div class="toast-body">
                                                Your Appointment Message Send Successfully!.
                                            </div>
                                            <button type="button" class="btn me-2 m-auto text-white"
                                                data-bs-dismiss="toast" aria-label="Close">
                                                <i class="fa-solid fa-xmark"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <form 
                                    class="d-flex flex-column h-100 justify-content-center w-100 needs-validation form"
                                    novalidate>
                                    <input type="text" name="action" value="appointment" hidden>
                                    <div class="mb-3">
                                        <input type="text" class="form-control py-3 px-4" name="name" id="name"
                                            placeholder="Name" required>
                                        <div class="invalid-feedback">
                                            The field is required.
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <input type="email" class="form-control py-3 px-4" name="email" id="email"
                                            placeholder="Email" required>
                                        <div class="invalid-feedback">
                                            The field is required.
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <textarea class="form-control py-3 px-4" name="message" id="message"
                                            placeholder="Your Question" rows="4"></textarea>
                                        <div class="invalid-feedback">
                                            The field is required.
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-start">
                                        <button type="submit" class="btn button submit_question py-3">
                                            SEND QUESTION
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="section bg-color-2">
            <div class="r-container">
                <div class="d-flex flex-column gap-3 text-center">
                    <h6 class="fw-semibold font-1 accent-color-1 ls-2">FAQ</h6>
                    <h3 class="accent-color font-1 fw-semibold">Frequently Asked Question</h3>
                    <p class="font-2 fw-light mx-auto" style="max-width: 912px;">
                        Maecenas dictum fringilla nisi ac malesuada. Donec ac quam non diam elementum ultricies. In hac
                        habitasse platea dictumst. Nullam eu elit sed metus convallis lobortis. Cras a iaculis eros.
                        Phasellus at lectus viverra, sagittis erat quis.
                    </p>
                    <div class="row row-cols-1 row-cols-lg-2 text-start">
                        <div class="col">
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true"
                                            aria-controls="faq1">
                                            When is The Right Time to Check Bones?
                                        </button>
                                    </h2>
                                    <div id="faq1" class="accordion-collapse collapse show"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Mauris vitae eros placerat velit molestie mollis. Aenean euismod eros arcu,
                                            ut dapibus urna vestibulum facilisis. Duis et facilisis augue, ac malesuada
                                            tortor. Duis vitae mattis nulla cras.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false"
                                            aria-controls="faq2">
                                            Can This Clinic Treat Fractures?
                                        </button>
                                    </h2>
                                    <div id="faq2" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Etiam ornare neque augue, ut egestas nunc congue a. Sed aliquam, metus et
                                            scelerisque facilisis, purus sem ornare dui, nec volutpat tortor libero id.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false"
                                            aria-controls="faq3">
                                            What Makes Tudebon Different from Other Clinics?
                                        </button>
                                    </h2>
                                    <div id="faq3" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Integer urna magna, vehicula at efficitur gravida, luctus nec nisl. In
                                            vestibulum, nisi et commodo tempor, ipsum erat malesuada orci, in pulvinar
                                            neque justo eget ligula. commodo nulla vitae, elementum metus.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="accordion" id="accordionExample2">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false"
                                            aria-controls="faq4">
                                            When is The Right Time to Check Bones?
                                        </button>
                                    </h2>
                                    <div id="faq4" class="accordion-collapse collapse collapsed"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Mauris vitae eros placerat velit molestie mollis. Aenean euismod eros arcu,
                                            ut dapibus urna vestibulum facilisis. Duis et facilisis augue, ac malesuada
                                            tortor. Duis vitae mattis nulla cras.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq5" aria-expanded="false"
                                            aria-controls="faq5">
                                            Can This Clinic Treat Fractures?
                                        </button>
                                    </h2>
                                    <div id="faq5" class="accordion-collapse collapse collapsed"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Etiam ornare neque augue, ut egestas nunc congue a. Sed aliquam, metus et
                                            scelerisque facilisis, purus sem ornare dui, nec volutpat tortor libero id.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button font-1 fw-semibold" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#faq6" aria-expanded="true"
                                            aria-controls="faq6">
                                            What Makes Tudebon Different from Other Clinics?
                                        </button>
                                    </h2>
                                    <div id="faq6" class="accordion-collapse collapse collapse show"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Integer urna magna, vehicula at efficitur gravida, luctus nec nisl. In
                                            vestibulum, nisi et commodo tempor, ipsum erat malesuada orci, in pulvinar
                                            neque justo eget ligula. commodo nulla vitae, elementum metus.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="section position-relative bg-attach-fixed"
            style="background-image: url(image/image-1920x900-4.jpg);">
            <div class="image-overlay-2"></div>
            <div class="r-container position-relative" style="z-index: 2;">
                <div class="d-flex flex-column gap-3 text-white text-center align-items-center">
                    <h3 class="font-1 fw-semibold" style="font-size: 48px;">Feel Something Wrong With Your Bones?</h3>
                    <p class="font-2 fw-light mx-auto" style="max-width: 912px;">
                        Maecenas dictum fringilla nisi ac malesuada. Donec ac quam non diam elementum ultricies. In hac
                        habitasse platea dictumst. Nullam eu elit sed metus convallis lobortis. Cras a iaculis eros.
                        Phasellus at lectus viverra, sagittis erat quis.
                    </p>
                    <a href="contact.html" class="btn button font-1 ls-2 fw-semibold fs-7 py-3 px-4">FREE
                        CONSULTATION</a>
                </div>
            </div>
        </section>
    </main>

<footer>
        <section class="bg-accent-color-1">
            <div class="r-container section border-bottom">
                <div class="row row-cols-1 row-cols-lg-2 w-100">
                    <div class="col col-lg-4">
                        <div class="d-flex flex-column gap-3 text-white">
                            <div class="logo-container">
                                <img src="image/logo.png" alt="" class="img-fluid">
                            </div>
                            <p>
                                Mauris vitae eros placerat velit molestie mollis. Aenean euismod eros arcu, ut dapibus
                                urna
                                vestibulum facilisis. Duis et facilisis augue, ac malesuada tortor.
                            </p>
                            <div class="social-container">
                                <a href="https://www.facebook.com/" class="social-item">
                                    <i class="fa-brands fa-facebook"></i>
                                </a>
                                <a href="https://www.twitter.com/" class="social-item">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                                <a href="https://www.youtube.com/" class="social-item">
                                    <i class="fa-brands fa-youtube"></i>
                                </a>
                                <a href="https://www.instagram.com/" class="social-item">
                                    <i class="fa-brands fa-instagram"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col col-lg-8">
                        <div class="row row-cols-1 row-cols-lg-3 text-white">
                            <div class="col">
                                <h5 class="font-2 mb-3">Quick Links</h5>
                                <ul class="list gap-2">
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Home
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            About Us
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Services
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Appointment
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Blog
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Contact Us
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col">
                                <h5 class="font-2 mb-3">Services</h5>
                                <ul class="list gap-2">
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Chiropractic Care
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Acupunctur
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Massage Therapy
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Sports Chiropractic
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Laser Therapy
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-flex flex-row gap-3 align-items-center link">
                                            <i class="fa-regular fa-circle-dot"></i>
                                            Pediatric Chiropractic
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col">
                                <h5 class="font-2 mb-3">Information</h5>
                                <div class="d-flex flex-column gap-3">
                                    <div class="d-flex flex-row align-items-center gap-3 text-white">
                                        <span class="fs-2"><i class="fa-solid fa-phone"></i></span>
                                        <div class="d-flex flex-column">
                                            <span>Phone</span>
                                            <span>+123-234-1234</span>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center gap-3 text-white">
                                        <span class="fs-2">
                                            <i class="fa-solid fa-envelope"></i>
                                        </span>
                                        <div class="d-flex flex-column">
                                            <span>Email</span>
                                            <span>hello@awesomesite.com</span>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center gap-3 text-white">
                                        <span class="fs-2">
                                            <i class="fa-solid fa-location-dot"></i>
                                        </span>
                                        <div class="d-flex flex-column">
                                            <span>Address</span>
                                            <span>99 Roving St., Big City, PKU 23456</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-3 text-white text-center">
                <p class="m-0">Copyright 2023 © All Right Reserved Design by Rometheme</p>
            </div>
        </section>
    </footer>

</html>