<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>نموذج تواصل معنا</title>
  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 0;
      direction: rtl;
    }

    header, footer {
      background-color: #003366;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .container {
      max-width: 1200px;
      margin: auto;
      padding: 40px 20px;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
    }

    .col-lg-8, .col-lg-4 {
      flex: 1;
      min-width: 300px;
    }

    .contact-wrap, .contact-info {
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }

    h2, h3 {
      color: #003366;
      margin-top: 0;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    label {
      font-weight: bold;
      margin-bottom: 5px;
    }

    input, textarea {
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      width: 100%;
    }

    input[type="submit"], button {
      background-color: #003366;
      color: white;
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    input[type="submit"]:hover, button:hover {
      background-color: #005fa3;
    }

    .address li {
      list-style: none;
      margin-bottom: 15px;
    }

    .address li i {
      margin-left: 10px;
      color: #003366;
    }

    .social-wrap {
      display: flex;
      gap: 10px;
      padding: 0;
    }

    .social-wrap li {
      list-style: none;
    }

    .social-wrap a {
      display: inline-block;
      background-color: #003366;
      color: white;
      padding: 10px;
      border-radius: 50%;
      font-size: 18px;
      transition: background 0.3s;
    }

    .social-wrap a:hover {
      background-color: #005fa3;
    }

    .map-area {
      width: 100%;
      height: 300px;
      margin-top: 30px;
    }

    .map-area iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>

<header>
  <h1>تواصل معنا</h1>
</header>

<section class="main-contact-area">
  <div class="container">
    <div class="row align-items-center">

      <!-- نموذج التواصل -->
      <div class="col-lg-8">
        <div class="contact-wrap">
          <div class="contact-form">
            <div class="contact-title">
              <h2>اكتب لنا</h2>
            </div>
            <form action="https://formspree.io/f/mpwrgano" method="POST">
              <!-- Honeypot Field (anti-spam) -->
              <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

              <div>
                <label for="name">الاسم</label>
                <input type="text" name="name" id="name" required maxlength="100">
              </div>

              <div>
                <label for="email">البريد الإلكتروني</label>
                <input type="email" name="email" id="email" required maxlength="150">
              </div>

              <div>
                <label for="subject">الموضوع</label>
                <input type="text" name="subject" id="subject" required maxlength="150">
              </div>

              <div>
                <label for="message">الرسالة</label>
                <textarea name="message" id="message" rows="6" required maxlength="500"></textarea>
              </div>

              <input type="submit" value="إرسال">
            </form>
          </div>
        </div>
      </div>

      <!-- بيانات التواصل -->
      <div class="col-lg-4">
        <div class="contact-info">
          <h3>بيانات الاتصال بنا</h3>
          <p>
            يسر فريقنا المتخصص في الأمن السيبراني استقبال استفساراتكم الأكاديمية والفنية،
            وتقديم الإرشادات المتعلقة بالمجالات المختلفة مثل حماية الشبكات، اختبار الاختراق،
            إدارة المخاطر، والامتثال للمعايير الأمنية.
          </p>
          <ul class="address">
            <li class="location">
              <i class="bx bxs-location-plus"></i>
              <span>العنوان:</span>
              طريق المدينة المنورة، القريات، المملكة العربية السعودية
              <br>
              <a href="https://maps.app.goo.gl/ESShHnBdqTFWSPDR6" target="_blank" style="color:blue;text-decoration: underline;">انقر هنا (موقعنا GPS)</a>
            </li>
            <li>
              <i class="bx bxs-phone-call"></i>
              <span>الهاتف:</span>
              <a href="tel:+966502161465">+966502161465</a>
            </li>
            <li>
              <i class="bx bxs-envelope"></i>
              <span>البريد الإلكتروني:</span>
              <a href="mailto:alahli192024@gmail.com">alahli192024@gmail.com</a><br>
              <a href="https://teams.microsoft.com/v2//">Teams: alahli192024@gmail.com</a>
            </li>
          </ul>

          <div class="sidebar-follow-us">
            <h3>تابعنا عبر:</h3>
            <ul class="social-wrap">
              <li><a href="https://x.com/ITBelt_SA/" target="_blank"><i class="bx bxl-twitter"></i></a></li>
              <li><a href="https://www.instagram.com/" target="_blank"><i class="bx bxl-instagram"></i></a></li>
              <li><a href="https://www.facebook.com/" target="_blank"><i class="bx bxl-facebook"></i></a></li>
              <li><a href="http://37.224.23.179/itbwebsite/assets/media/LEAP3.mp4" target="_blank"><i class="bx bxl-youtube"></i></a></li>
            </ul>
          </div>
        </div>
      </div>

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

<!-- خريطة الموقع -->
<div class="map-area">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3624.9615787574527!2d37.3175677!3d31.3311972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151aa231d1934bcd%3A0x84c7c15384ae8998!2z2KfZhNmF2KzYp9mFINmF2KfZhtmK2Kkg2KfZhNiz2YXYsdmK2Kkg2YTZhNin2LHYp9mG2Iwg2KfZhNmF2KzYp9mFINin2YTZhdit2YXYrQ!5e0!3m2!1sar!2ssa!4v1720268662655!5m2!1sar!2ssa"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

<footer>
  <p>جميع الحقوق محفوظة &copy; Yousif @2025</p>
</footer>

</body>
</html>
