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

<head>
    <title>Rentaly - Multipurpose Vehicle Car Rental Website Template</title>
    <link rel="icon" href="images/icon.png" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Rentaly - Multipurpose Vehicle Car Rental Website Template" name="description">
    <meta content="" name="keywords">
    <meta content="" name="author">
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/mdb.min.css" rel="stylesheet" type="text/css" id="mdb">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <!-- color scheme -->
    <link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="wrapper">
        
        <!-- page preloader begin -->
        <div id="de-preloader"></div>
        <!-- page preloader close -->

        <!-- header begin -->
        <header class="transparent scroll-light has-topbar">
            <div id="topbar" class="topbar-dark text-light">
                <div class="container">
                    <div class="topbar-left xs-hide">
                        <div class="topbar-widget">
                            <div class="topbar-widget"><a href="#"><i class="fa fa-phone"></i>+208 333 9296</a></div>
                            <div class="topbar-widget"><a href="#"><i class="fa fa-envelope"></i>contact@rentaly.com</a></div>
                            <div class="topbar-widget"><a href="#"><i class="fa fa-clock-o"></i>Mon - Fri 08.00 - 18.00</a></div>
                        </div>
                    </div>
                
                    <div class="topbar-right">
                        <div class="social-icons">
                            <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                            <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                            <a href="#"><i class="fa fa-youtube fa-lg"></i></a>
                            <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                            <a href="#"><i class="fa fa-instagram fa-lg"></i></a>
                        </div>
                    </div>  
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="de-flex sm-pt10">
                            <div class="de-flex-col">
                                <div class="de-flex-col">
                                    <!-- logo begin -->
                                    <div id="logo">
                                        <a href="index.html">
                                            <img class="logo-1" src="images/logo-light.png" alt="">
                                            <img class="logo-2" src="images/logo.png" alt="">
                                        </a>
                                    </div>
                                    <!-- logo close -->
                                </div>
                            </div>
                            <div class="de-flex-col header-col-mid">
                                <ul id="mainmenu">
                                    <li><a class="menu-item" href="index.html">Home</a>
                                        <ul>
                                            <li><a class="menu-item" href="index.html">Homepage 1</a></li>
                                            <li><a class="menu-item" href="index-2.html">Homepage 2</a></li>
                                            <li><a class="menu-item" href="index-3.html">Homepage 3</a></li>
                                            <li><a class="menu-item" href="index-4.html">Homepage 4</a></li>
                                            <li><a class="menu-item" href="index-5.html">Homepage 5</a></li>
                                            <li><a class="menu-item" href="index-6.html">Homepage 6</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="menu-item" href="cars.html">Cars</a>
                                        <ul>
                                            <li><a class="menu-item" href="cars.html">Cars List 1</a></li>
                                            <li><a class="menu-item" href="cars-list.html">Cars List 2</a></li>
                                            <li><a class="menu-item" href="car-single.html">Cars Single</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="menu-item" href="booking.html">Booking</a></li>
                                    <li><a class="menu-item" href="account-dashboard.html">My Account</a>
                                        <ul>
                                            <li><a class="menu-item" href="account-dashboard.html">Dashboard</a></li>
                                            <li><a class="menu-item" href="account-profile.html">My Profile</a></li>
                                            <li><a class="menu-item" href="account-booking.html">My Orders</a></li>
                                            <li><a class="menu-item" href="account-favorite.html">My Favorite Cars</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="menu-item" href="#">Pages</a>
                                        <ul>
                                            <li><a class="menu-item" href="about.html">About Us</a></li>
                                            <li><a class="menu-item" href="contact.html">Contact</a></li>
                                            <li><a class="menu-item" href="login.html">Login</a></li>
                                            <li><a class="menu-item" href="register.html">Register</a></li>
                                            <li><a class="menu-item" href="404.html">Page 404</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="menu-item" href="#">News</a>
                                        <ul>
                                            <li><a class="menu-item" href="news-standart-right-sidebar.html">News Standard</a>
                                                <ul>
                                                    <li><a class="menu-item" href="news-standart-right-sidebar.html">Right Sidebar</a></li>
                                                    <li><a class="menu-item" href="news-standart-left-sidebar.html">Left Sidebar</a></li>
                                                    <li><a class="menu-item" href="news-standart-no-sidebar.html">No Sidebar</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="menu-item" href="news-grid-right-sidebar.html">News Grid</a>
                                                <ul>
                                                    <li><a class="menu-item" href="news-grid-right-sidebar.html">Right Sidebar</a></li>
                                                    <li><a class="menu-item" href="news-grid-left-sidebar.html">Left Sidebar</a></li>
                                                    <li><a class="menu-item" href="news-grid-no-sidebar.html">No Sidebar</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="menu-item" href="#">Elements</a>
                                        <ul>
                                            <li><a class="menu-item" href="preloader.html">Preloader</a></li>
                                            <li><a class="menu-item" href="icon-boxes.html">Icon Boxes</a></li>
                                            <li><a class="menu-item" href="badge.html">Badge</a></li>
                                            <li><a class="menu-item" href="counters.html">Counters</a></li>
                                            <li><a class="menu-item" href="gallery-popup.html">Gallery Popup</a></li>
                                            <li><a class="menu-item" href="icons-elegant.html">Icons Elegant</a></li>
                                            <li><a class="menu-item" href="icons-etline.html">Icons Etline</a></li>
                                            <li><a class="menu-item" href="icons-font-awesome.html">Icons Font Awesome</a></li>
                                            <li><a class="menu-item" href="map.html">Map</a></li>
                                            <li><a class="menu-item" href="modal.html">Modal</a></li>
                                            <li><a class="menu-item" href="popover.html">Popover</a></li>
                                            <li><a class="menu-item" href="tabs.html">Tabs</a></li>
                                            <li><a class="menu-item" href="tooltips.html">Tooltips</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="de-flex-col">
                                <div class="menu_side_area">
                                    <a href="login.html" class="btn-main">Sign In</a>
                                    <span id="menu-btn"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
            <!-- header close -->
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">
            <div id="top"></div>
            
            <!-- section begin -->
            <section id="subheader" class="jarallax text-light">
                <img src="images/background/subheader.jpg" class="jarallax-img" alt="">
                    <div class="center-y relative text-center">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 text-center">
									<h1>Modal</h1>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
            </section>
            <!-- section close -->
            

            <!-- section begin -->
            <section aria-label="section">
                <div class="container">
                    <div class="row g-custom-x">
                        <div class="col-md-4 mb60">
                            <h4>Modal demo</h4>
							<p>Live demo
								Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
							<div class="spacer10"></div>
							
							
							<!-- Button trigger modal -->
							<button type="button" class="btn-main" data-bs-toggle="modal" data-bs-target="#exampleModal">
							  Launch demo modal
							</button>

							<!-- Modal -->
							<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        Woohoo, you're reading this text in a modal!
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn-main" data-bs-dismiss="modal">Close</button>
							        <button type="button" class="btn-main">Save changes</button>
							      </div>
							    </div>
							  </div>
							</div>
							
							
                        </div>
						
						<div class="col-md-4 mb60">
							
							<h4>Static backdrop</h4>
							<p>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

							</p>
							<div class="spacer10"></div>
						
							<!-- Button trigger modal -->
							<button type="button" class="btn-main" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
							  Launch demo modal
							</button>

							<!-- Modal -->
							<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        I will not close if you click outside me. Don't even try to press escape key.
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn-main" data-bs-dismiss="modal">Close</button>
							        <button type="button" class="btn-main">Understood</button>
							      </div>
							    </div>
							  </div>
							</div>
						
						</div>
						
						<div class="col-md-4 mb60">
							
							<h4>Scrolling long content</h4>
							<p>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

							</p>
							<div class="spacer10"></div>

							<!-- Button trigger modal -->
							<button type="button" class="btn-main" data-bs-toggle="modal" data-bs-target="#scrollingLongContent">
							  Launch demo modal
							</button>

							<!-- Modal -->
							<div class="modal fade" id="scrollingLongContent" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scrollingLongContentLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="scrollingLongContentLabel">Modal title</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
									
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
									
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn-main" data-bs-dismiss="modal">Close</button>
							        <button type="button" class="btn-main">Understood</button>
							      </div>
							    </div>
							  </div>
							</div>							
							
						</div>
						
						<div class="col-md-4 mb60">
							
							<h4>Scrollable modal</h4>
							<p>Vertically centered scrollable modal.</p>
							<div class="spacer10"></div>

							<!-- Button trigger modal -->
							<button type="button" class="btn-main" data-bs-toggle="modal" data-bs-target="#scrollableModal">
							  Launch demo modal
							</button>

							<!-- Modal -->
							<div class="modal fade" id="scrollableModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
							  <div class="modal-dialog modal-dialog-scrollable"">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="scrollableModalLabel">Modal title</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
									
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
									
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
									
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
									
									<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn-main" data-bs-dismiss="modal">Close</button>
							        <button type="button" class="btn-main">Understood</button>
							      </div>
							    </div>
							  </div>
							</div>		
							
							
						</div>
						
						<div class="col-md-4 mb60">
							
							<h4>Toggle between modals</h4>
							<p>Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.</p>
							<div class="spacer10"></div>
							
							<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
							  <div class="modal-dialog modal-dialog-centered">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        Show a second modal and hide this one with the button below.
							      </div>
							      <div class="modal-footer">
							        <button class="btn-main" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
							      </div>
							    </div>
							  </div>
							</div>
							<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
							  <div class="modal-dialog modal-dialog-centered">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
							        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							      </div>
							      <div class="modal-body">
							        Hide this modal and show the first with the button below.
							      </div>
							      <div class="modal-footer">
							        <button class="btn-main" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
							      </div>
							    </div>
							  </div>
							</div>
							<a class="btn-main" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
						
						</div>

                    </div>
                </div>
            </section>
            <!-- section close -->

        </div>
        <!-- content close -->

        <a href="#" id="back-to-top"></a>
        
        <!-- footer begin -->
        <footer class="text-light">
            <div class="container">
                <div class="row g-custom-x">
                    <div class="col-lg-3">
                        <div class="widget">
                            <h5>About Rentaly</h5>
                            <p>In tempor magna non ut labore sunt et in adipisicing do in proident veniam officia deserunt mollit velit aliquip sint fugiat reprehenderit sint anim pariatur deserunt id in ut non.</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-3">
                        <div class="widget">
                            <h5>Contact Info</h5>
                            <address class="s1">
                                <span><i class="id-color fa fa-map-marker fa-lg"></i>08 W 36th St, New York, NY 10001</span>
                                <span><i class="id-color fa fa-phone fa-lg"></i>+1 333 9296</span>
                                <span><i class="id-color fa fa-envelope-o fa-lg"></i><a href="mailto:contact@example.com">contact@example.com</a></span>
                                <span><i class="id-color fa fa-file-pdf-o fa-lg"></i><a href="#">Download Brochure</a></span>
                            </address>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <h5>Quick Links</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="widget">
                                    <ul>
                                        <li><a href="#">About</a></li>
                                        <li><a href="#">Blog</a></li>
                                        <li><a href="#">Careers</a></li>
                                        <li><a href="#">News</a></li>
                                        <li><a href="#">Partners</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="widget">
                            <h5>Social Network</h5>
                            <div class="social-icons">
                                <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                <a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
                                <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                                <a href="#"><i class="fa fa-rss fa-lg"></i></a>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
            <div class="subfooter">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="de-flex">
                                <div class="de-flex-col">
                                    <a href="index.html">
                                        Copyright 2023 - Rentaly by Designesia
                                    </a>
                                </div>
                                <ul class="menu-simple">
                                    <li><a href="#">Terms &amp; Conditions</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer close -->
        
    </div>


    <!-- Javascript Files
    ================================================== -->
    <script src="js/plugins.js"></script>
    <script src="js/designesia.js"></script>

</body>

</html>