   <!-- Footer Area Start Here -->
   <footer>
    <div class="footer-area-top">
        <div class="container">
            <div class="row">
               
                <div class="col-xl-4 col-lg-3 col-md-6 col-sm-12">
                    <div class="footer-box">
                        <h2 class="title-bold-light title-bar-left text-uppercase">Important Links</h2>
                        <div class="row">
                            <div class="col-xs-6">
                                <ul class="popular-categories">
                                    <li>
                                        <a href="about.php">About
                                        </a>
                                    </li>
                                    <li>
                                        <a href="albums.php">albums
                                        </a>
                                    </li>
                                    <li>
                                        <a href="news.php">news
                                        </a>
                                    </li>
                                    <li>
                                        <a href="contact.php">contact
                                        </a>
                                    </li>
                                    <li>
                                        <a href="performance.php">Performance</a>
                                    </li>
                                    <li>
                                        <a href="achivements.php">Achievements</a>
                                    </li>
                                  
                                </ul>
                            </div>
                            <div class="col-xs-6">
                                <ul class="popular-categories">
                                    <li>
                                        <a href="occasions.php">Occasions</a>
                                    </li>
                                    <li>
                                        <a href="about.php">Vision and Mission</a>
                                    </li>
                                    <li>
                                        <a href="tree.php">family tree</a>
                                    </li>
                                    <li>
                                        <a href="">Family Fund</a>
                                    </li>
                                    <li>
                                        <a href="family-fund.php"> Memory History</a>
                                    </li>
                                    <li>
                                        <a href="statistics.php">statistics</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                       
                    </div>
                </div>

                <div class="col-xl-4 col-lg-3 col-md-6 col-sm-12">
                    <div class="footer-box">
                        <h2 class="title-bold-light title-bar-left text-uppercase">Facebook</h2>
                        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fgt4Company%2F&tabs&width=340&height=500&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=true&appId" width="340" height="220" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-3 col-md-6 col-sm-12">
                    <div class="footer-box">
                        <h2 class="title-bold-light title-bar-left text-uppercase">Twitter</h2>
                        <a class="twitter-timeline" width="340" height="220" href="https://twitter.com/Gt4Company?ref_src=twsrc%5Etfw">Tweets by Gt4Company</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                </div>
            
            </div>
        </div>
    </div>
    <div class="footer-area-bottom">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <p> Designed by GT4</p>
                </div>
                <div class="col-6">
                  
                    <ul class="footer-social">
                        <li>
                            <a href="#" title="facebook">
                                <i class="fa fa-facebook" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="twitter">
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="google-plus">
                                <i class="fa fa-google-plus" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="linkedin">
                                <i class="fa fa-linkedin" aria-hidden="true"></i>
                            </a>
                        </li>
                        
                    </ul>
                    
                </div>
               
            </div>
        </div>
    </div>
</footer>
<!-- Footer Area End Here -->
<!-- Modal Start-->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        
        <div class="modal-content ">

            <!-- start login -->
            <div id="login">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="title-login-form">Login</div>
                </div>
                <div class="modal-body">
                    <div class="login-form">
                        <form>
                            <label>Username or email address *</label>
                            <input type="text" placeholder="Name or E-mail" />
                            <label>Password *</label>
                            <input type="password" placeholder="Password" />
                            <label class="lost-password">
                                <a href="#" id="forget-link">Forget your password?</a>
                            </label>
                            <button type="submit" value="Login">Login</button>
                            <button class="form-cancel" type="submit" value="">Cancel</button>
                            
    
                            <label>
                                Don`t have Account? <a href="#" id="register-link">register now</a>
                            </label>
                        </form>
                    </div>
                </div>
            </div>
             <!-- end login -->

             <!-- start register -->
             <div id="register">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="title-login-form">Register</div>
                </div>
                <div class="modal-body">
                    <div class="login-form">
                        <form>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Username </label>
                                    <input type="text" placeholder="Name " />
                                </div>
                                <div class="col-md-6">
                                    <label>Full Name </label>
                                    <input type="text" placeholder="Name " />
                                </div>
                                <div class="col-md-6">
                                    <label>Phone </label>
                                    <input type="text" placeholder="Phone " />
                                </div>
                                <div class="col-md-6">
                                    <label>Email </label>
                                    <input type="text" placeholder="Email " />
                                </div>
                                <div class="col-md-6">
                                    <label>Password *</label>
                                    <input type="password" placeholder="Password" />
                                </div>
                                <div class="col-md-6">
                                    <label>Confirm Password *</label>
                                    <input type="password" placeholder="Password" />
                                </div>
                                <div class="col-xs-12">
                                    <label>Address</label>
                                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d27322.887295803703!2d31.3655983!3d31.127490200000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2seg!4v1552647420528" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                                </div>
                            </div>
                            


                            <button type="submit" value="Register">Register</button>
                            <button class="form-cancel" type="submit" value="">Cancel</button>
                            
    
                            <label>
                                Have Account? <a href="#" id="login-link">Login now</a>
                            </label>
                        </form>
                    </div>
                </div>
             </div>
             <!-- end register -->

              <!-- start forget-password -->
            <div id="forget-password">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="title-login-form">Forget Password</div>
                </div>
                <div class="modal-body">
                    <div class="login-form">
                        <form>
                            <label>Email *</label>
                            <input type="text" placeholder=" E-mail" />
                         
                            <button type="submit" value="Login">Send</button>
                            <button class="form-cancel" type="submit" value="">Cancel</button>
                            
    
                            <!-- <label>
                                Don`t have Account? <a href="#" id="register-link">register now</a>
                            </label> -->
                        </form>
                    </div>
                </div>
            </div>
                <!-- end forget-password -->
           
        </div>
       
    </div>
</div>
<!-- Modal End-->






</div>
<!-- Wrapper End -->