<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css"/>

        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

        <!-- Recoleta Alt Font -->
        <link rel="stylesheet" href="assets/css/fonts.css"/>

        <!-- Custom Styles -->
        <link rel="stylesheet" href="assets/css/style.css"/>

        <!-- animation -->
        <link rel="stylesheet" href="assets/css/animation.css"/>

        <!-- responsive -->
        <link rel="stylesheet" href="assets/css/responsive.css"/>
    </head>

    <body>
        <main class="popreveal overflow-hidden">
            <div class="row">

                <div class="steps-col col-md-12">
                    <div class="container h-100">
                        <form id="steps" method="post" class="show-section">
                            
                            <!-- step 1  -->
                            <section class="steps">
                                <div class="step-inner">
                                    <div class="step-number">Question <span>1</span>/3</div>
    
                                    <!-- Step 1 Heading  -->
                                    <div class="main-heading">
                                        Weeks, How Often have You  Had little interest or Pleasure in Doing Things?
                                    </div>
    
                                    <!-- Step 1 form  -->
                                    <div id="step1" class="borderc">
                                        <div class="row">
                                            
                                            <div class="col-md-6">
                                                <div class="child1 radio-field">
                                                    <input type="radio" name="op1" value="Who Accept insurance" checked>
                                                    <label>
                                                        <span>A</span>
                                                        Who Accept insurance
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="child2 radio-field delay-100ms">
                                                    <input type="radio" name="op1" value="Easier Therapy Access">
                                                    <label>
                                                        <span>B</span>
                                                        Easier Therapy Access
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="child3 radio-field delay-200ms">
                                                    <input type="radio" name="op1" value="Choose your therapist">
                                                    <label>
                                                        <span>C</span>
                                                        Choose your therapist
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="child4 radio-field delay-300ms">
                                                    <input type="radio" name="op1" value="Therapy Meets">
                                                    <label>
                                                        <span>D</span>
                                                        Therapy Meets
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </section>
    
                            <!-- step 2  -->
                            <section class="steps">
                                <div class="step-inner wrapper">
                                    <div class="step-number">Question <span>2</span>/3</div>
    
                                    <!-- Step 2 Heading  -->
                                    <div class="main-heading">
                                        Over the Past Two <sub>(2)</sub> Weeks, how 
                                        Often have You had little interest or 
                                        Pleasure in Doing things?
                                    </div>
    
                                    <!-- Step 2 Form  -->
                                    <div id="step2" class="borderc">
                                        <div class="row">
                                            <div class="col-md-4 lap-50">
                                                <div class="radio-field-2">
                                                    <input type="radio" name="op2" value="1">
                                                    <div class="radio-img">
                                                        <img src="assets/images/pet1.png" alt="">
                                                    </div>
                                                    <label>1</label>
                                                </div>
                                            </div>
                                            <div class="col-md-4 lap-50">
                                                <div class="radio-field-2 delay-100ms">
                                                    <input type="radio" name="op2" value="2">
                                                    <div class="radio-img">
                                                        <img src="assets/images/pet2.png" alt="">
                                                    </div>
                                                    <label>2</label>
                                                </div>
                                            </div>
                                            <div class="col-md-4 lap-50">
                                                <div class="radio-field-2 delay-200ms">
                                                    <input type="radio" name="op2" value="1 & 2">
                                                    <div class="radio-img">
                                                        <img src="assets/images/pet1.png" alt="">
                                                        <img src="assets/images/pet2.png" alt="">
                                                    </div>
                                                    <label>Both</label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </section>
    
                            <section class="steps">
                                <div class="step-inner wrapper">
                                    <div class="step-number">Question <span>3</span>/3</div>
    
                                    <!-- Step 3 Heading -->
                                    <div class="main-heading">
                                        What is your First reaction <br> To the product
                                    </div>
    
                                    <!-- Step 3 Form -->
                                    <div id="step3" class="mt-4">
                                        <div class="row align-items-center">
                                            <div class="col-md-6">
                                                <article>
                                                    <div class="sub-heading">
                                                        How to Be Conversational?
                                                    </div>
                                                    <p class="sub-text">What you think Your Company Rating Deserve</p>
                                                </article>
                                                <div class="stars">
                                                    <div class="star-inner">
                                                        <i class="star fa-regular fa-star"></i>
                                                        <i class="star fa-regular fa-star"></i>
                                                        <i class="star fa-regular fa-star"></i>
                                                        <i class="star fa-regular fa-star"></i>
                                                        <i class="star fa-regular fa-star"></i>
                                                    </div>
                                                    <div class="star-count">You selected <span id="starselection">0</span> Star</div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <p class="sub-text">How you Contact to our Company</p>
    
                                                <div class="position-relative">
                                                    <select class="social" name="social" id="social">
                                                        <option value="facebook">Facebook</option>
                                                        <option value="instagram">Instagram</option>
                                                        <option value="Twitter">Twitter</option>
                                                    </select>
                                                    <span class="dropdown"></span>
                                                </div>
                                                <div class="position-relative">
                                                    <select class="social" name="social" id="social">
                                                        <option value="facebook">Facebook</option>
                                                        <option value="instagram">Instagram</option>
                                                        <option value="Twitter">Twitter</option>
                                                    </select>
                                                    <span class="dropdown"></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
    
    
    
                                    <!-- Next Previous Button-->
                                    <div class="next-prev justify-content-center">
                                        <button class="next" id="sub" type="button"><span>Submit now</span></button>
                                    </div>
                                </div>
                            </section>
                            <div class="step-counter">
                                <div class="step-rate"><span>0%</span> Complete</div>
                                <div class="step-bar">
                                    <div class="move"></div>
                                </div>
                            </div>

                        </form>
    
                    </div>
                </div>
            </div>
        </main>
    
    
    
    
    
        
        <div id="error">
    
        </div>


        <!-- Bootstrap JS -->
        <script src="assets/js/bootstrap/bootstrap.min.js"></script>

        <!-- jQuery -->
        <script src="assets/js/jQuery/jquery-3.7.0.min.js"></script>

        <!-- Custom JS -->
        <script src="assets/js/custom.js"></script>
    </body>
</html>
