<?php
$page = 4; 
?>
<!doctype html>
<html lang="en">
  <head>
    <title>Alhaji Dramani Motors | Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/jquery.fancybox.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="shortcut icon" type="image/png" href="images/icon.png">

    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" href="lib/fontawesome/css/all.css">
    

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/self.css">
    
  </head>
  <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
  
  <div class="custom-modal" id="contact-modal">
        <div class="custom-modal-body bg-light text-center cornered">
            <img src="images/contact.jpg" class="img-fluid" width="500">
            <h1>Thank you for reaching out</h1>
            <p>We will keep you updated in your email</p>
            <button class="btn btn-primary" onclick="$('#contact-modal').hide(); location.reload()">Okay</button>
        </div>
    </div>


  <div class="site-wrap">

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>
   
    <?php
      include 'components/nav.php';
    ?>

  
     
   
    <div class="site-blocks-cover overlay" style="background-image: url(images/hero_2.jpg); height: min-height:40vh;" data-aos="fade" id="home-section">

      <div class="container">
        <div class="row align-items-center justify-content-center">

          
          <div class="col-md-10 mt-lg-5 text-center">
            <div class="">
                <h1 class="" data-aos="fade-up">Get in Touch with<element style="color:rgb(93, 183, 252)"> Us</element></h1>
                <p class="mb-5 desc" data-aos="fade-up" data-aos-delay="100">We are open to your questions and suggestions</p>

              </div>
          </div>
            
        </div>
      </div>
    </div> 


    <section class="site-section bg-light" id="contact-section" data-aos="fade">
      <div class="container">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3">Contact Us</h2>
          </div>
        </div>
        <div class="row mb-5">
          


          <div class="col-md-4 text-center">
            <p class="mb-4">
              <span class="icon-room d-block h2 text-primary"></span>
              <span> Location: Suame, Behind Total Filling Station, Zone “B”</span>
            </p>
          </div>
          <div class="col-md-4 text-center">
            <p class="mb-4">
              <span class="icon-phone d-block h2 text-primary"></span>
              <a href="0244291668">0244291668</a> <br>
              <a href="0244856377">0244856377</a> <br>
              <a href="0266177348">0266177348</a> <br>
              <a href="0200207893">0200207893</a> <br>
              <a href="0595217502">0595217502</a> <br>
              <a href="0265085033">0265085033</a> <br>
            </p>
          </div>
          <div class="col-md-4 text-center">
            <p class="mb-0">
              <span class="icon-mail_outline d-block h2 text-primary"></span>
              <a href="alhajidramanimotors@gmail.com">alhajidramanimotors@gmail.com</a>
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 mb-5">

            <script>
                function validate(){
                    $('#contact-modal').show()
                    return(false);
                }
            </script>

            <form action="" onsubmit="return(validate())" class="p-5 bg-white">
              
              <h2 class="h4 text-black mb-5">Contact Form</h2> 

              <div class="row form-group">
                <div class="col-md-6 mb-3 mb-md-0">
                  <label class="text-black" for="fname">First Name</label>
                  <input type="text" id="fname" class="form-control rounded-lg">
                </div>
                <div class="col-md-6">
                  <label class="text-black" for="lname">Last Name</label>
                  <input type="text" id="lname" class="form-control rounded-lg">
                </div>
              </div>

              <div class="row form-group">
                
                <div class="col-md-12">
                  <label class="text-black" for="email">Email</label> 
                  <input type="email" id="email" class="form-control rounded-lg">
                </div>
              </div>

              <div class="row form-group">
                
                <div class="col-md-12">
                  <label class="text-black" for="subject">Subject</label> 
                  <input type="subject" id="subject" class="form-control rounded-lg">
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <label class="text-black" for="message">Message</label> 
                  <textarea name="message" id="message" cols="30" rows="7" class="form-control" placeholder="Write your notes or questions here..."></textarea>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <input type="submit" value="Send Message" class="btn btn-primary btn-md text-white">
                </div>
              </div>

              <p>
                ⚠️ No Spam Please
                This form is for genuine inquiries only. Unsolicited messages, promotions, or spam will be filtered and blocked. Let's keep this space respectful and purposeful.
              </p>

  
            </form>

            <h2 class="section-title mb-5 mt-5">Our Map Location</h2>
            <iframe class="w-100 rounded-lg" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2801.867701880043!2d-1.631745056366967!3d6.716123227365974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdb97b9db71beb5%3A0xe209b7243ed400f4!2sSuame%2C%20Kumasi!5e0!3m2!1sen!2sgh!4v1757378224526!5m2!1sen!2sgh" height="450"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </div>
          
        </div>
      </div>
    </section>

   

  <?php include "components/newsletter.php" ?>

    

    
    <?php include "components/footer.php" ?>

  </div> <!-- .site-wrap -->

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>

  
  <script src="js/main.js"></script>
  <script src="js/self.js"></script>


  
  </body>
</html>