<?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"/>

        <!-- 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="overflow-hidden">
            <div class="logo">
                <div class="logo-icon">
                    <img src="assets/images/icon.png" alt="BeRifma">
                </div>
                <div class="logo-text">
                    Fimro.
                </div>
            </div>
            <div class="container">
                <div class="wrapper">
                    <div class="row">
                        <div class="c-order tab-sm-100 col-md-6 order_c">
    
                            <!-- side -->
                            <div class="left">
                                <div class="authorPic">
                                    <div class="author">
                                        <img src="assets/images/author.png" alt="author">
                                    </div>
                                    <div class="shapes">
                                        <div class="shapeSingle"></div>
                                        <div class="shapeSingle"></div>
                                        <div class="shapeSingle"></div>
                                    </div>
                                    <div class="chart">
                                        <img src="assets/images/chart.jpg" alt="chart">
                                    </div>
                                </div>


                                <article>
                                    <h1>Flexible Solutions Best Business.</h1>
                                    <p>
                                        Everyone has the right to freedom of thought, conscience and religion
                                        right includes freedom to change his religion
                                    </p>
                                </article>
                                
                            </div>
                        </div>
                        <div class="tab-sm-100 col-md-6">
                            <div class="right">
    
                                <!-- form -->
                                <form id="steps" method="post" enctype="multipart/form-data">
    
                                    <!-- step 1 -->
                                    <div id="step1" class="form-inner lightSpeedIn">
                                        <div class="input-field">
                                            <label><i class="fa-regular fa-user"></i>Name <span>*</span></label>
                                            <input required type="text" name="name" id="mail-name" placeholder="Type Name">
                                            <span></span>
                                        </div>
                                        <div class="input-field">
                                            <label for="company"><i class="fa-regular fa-paper-plane"></i>Company <span>*</span></label>
                                            <input required type="text" name="company" id="company" placeholder="Type company name">
                                            <span></span>
                                        </div>
                                        <div class="input-field">
                                            <label for="phone"><i class="fa-solid fa-phone"></i>Phone <span>*</span></label>
                                            <input type="text" name="phone" id="phone" placeholder="Type Phone Number">
                                            <span></span>
                                        </div>
                                        <div class="input-field">
                                            <label><i class="fa-regular fa-envelope"></i>Email Address <span>*</span></label>
                                            <input required type="text" name="mail" id="mail-email" placeholder="Type email address">
                                            <span></span>
                                        </div>
                                        <div class="input-field">
                                            <label for="message"><i class="fa-solid fa-message"></i>How can we help <span>*</span></label>
                                            <input type="text" name="message" id="message" placeholder="A brief Description here">
                                            <span></span>
                                        </div>
                                        <div class="check-field">
                                            <label><i class="fa-regular fa-user"></i>Services <span>*</span></label>
                                            <div class="row">
                                                <div class="tab-100 col-md-6">
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="paid media" checked>
                                                        <label>Paid Media</label>
                                                    </div>
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="Digital experience">
                                                        <label>Digital experience</label>
                                                    </div>
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="Email">
                                                        <label>Email</label>
                                                    </div>
                                                </div>
                                                <div class="tab-100 col-md-6">
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="Content Creation">
                                                        <label>Content Creation</label>
                                                    </div>
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="Strategy & Consulting">
                                                        <label>Strategy & Consulting</label>
                                                    </div>
                                                    <div class="check-single">
                                                        <input type="checkbox" name="service" value="Other">
                                                        <label>Other</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <!-- step Button -->
                                    <div class="submit">
                                        <button type="button" id="sub">Send Message<span><i class="fa-solid fa-thumbs-up"></i></span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-shape">
                <img src="assets/images/top-left.png" alt="">
            </div>
            <div class="right-shape">
                <img src="assets/images/top-right.png" alt="">
            </div>
    
        </main>


        <!-- 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>
