<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Us – Twister Technologies</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --primary:#0f6eb8;
  --accent:#ff8c00;
  --bg:#fafafa;
  --text:#222;
  --white:#fff;
  --radius:8px;
  --transition:.3s ease;
  --maxW:1200px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxW);margin:auto;padding:0 1rem;}
header{background:var(--primary);color:var(--white);padding:1rem 0;position:sticky;top:0;z-index:100;}
header .logo{font-weight:700;font-size:1.25rem;}
nav ul{list-style:none;display:flex;gap:1.5rem;}
nav a{color:var(--white);font-weight:600;transition:var(--transition);}
nav a:hover{opacity:.85;}
.hero{position:relative;background:url('https://images.unsplash.com/photo-1522199750105-1c0e66f53166?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;color:var(--white);text-align:center;padding:6rem 1rem;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);}
.hero .content{position:relative;z-index:1;}
.hero h1{font-size:3rem;margin-bottom:.5rem;}
.hero p{font-size:1.25rem;max-width:800px;margin-bottom:1.5rem;}
.hero .btn{background:var(--accent);color:var(--primary);padding:.75rem 1.6rem;border-radius:var(--radius);font-weight:600;transition:var(--transition);}
.hero .btn:hover{background:#ff9f33;}
section{padding:4rem 0;}
section h2{font-size:2rem;text-align:center;margin-bottom:1.5rem;}
.form-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
form{background:var(--white);padding:2rem;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,.08);}
form label{display:block;margin-bottom:.25rem;font-weight:600;}
form input,form textarea{width:100%;border:1px solid #ddd;border-radius:var(--radius);padding:.75rem;margin-bottom:1rem;font-family:'Poppins',sans-serif;}
form textarea{resize:vertical;height:120px;}
form button{background:var(--primary);color:var(--white);padding:.75rem 1.5rem;border:none;border-radius:var(--radius);font-weight:600;transition:var(--transition);cursor:pointer;}
form button:hover{background:#0d5b9d;}
.map-wrapper{margin-top:3rem;}
.map{border:0;border-radius:var(--radius);width:100%;height:400px;}
.callout{background:var(--primary);color:var(--white);text-align:center;padding:3rem 1rem;border-radius:var(--radius);margin-top:3rem;}
.callout h3{font-size:1.8rem;margin-bottom:.5rem;}
.callout p{font-size:1rem;margin-bottom:1rem;}
.callout a{background:var(--accent);color:var(--primary);padding:.75rem 1.5rem;border-radius:var(--radius);font-weight:600;transition:var(--transition);}
.callout a:hover{background:#ff9f33;}
footer{background:#222;color:#aaa;text-align:center;padding:2rem 1rem;}
footer a{color:var(--accent);transition:var(--transition);}
footer a:hover{color:var(--white);}
@media(max-width:768px){
  .hero h1{font-size:2.5rem;}
  nav ul{flex-direction:column;gap:.5rem;}
}
@media(max-width:480px){
  .hero{padding:4rem 1rem;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
}
</style>
</head>
<body>
<header class="container">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <div class="logo">Twister Technologies</div>
    <nav><ul><li><a href="#contact">Contact</a></li><li><a href="#map">Map</a></li></ul></nav>
  </div>
</header>

<section class="hero">
  <div class="content">
    <h1>Ready to transform your digital presence?</h1>
    <p>We're more than a service provider – we're your dedicated partner in achieving unparalleled online success.</p>
    <a href="#contact" class="btn">Get in Touch</a>
  </div>
</section>

<section id="contact" class="theme-light">
  <div class="container">
    <h2>Contact Us</h2>
    <div class="form-area">
      <form id="contactForm" action="#" method="post">
        <label for="name">Name *</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email *</label>
        <input type="email" id="email" name="email" required>
        <label for="phone">Phone</label>
        <input type="tel" id="phone" name="phone">
        <label for="message">Message *</label>
        <textarea id="message" name="message" required></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  </div>
</section>

<section id="map" class="map-wrapper container">
  <h2>Find Us</h2>
  <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13330.32729384739!2d35.47295260427018!3d33.892579493970285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151d1c86b0cb6719%3A0xa4794c02f7b00d12!2sBeirut%2C%20Lebanon!5e0!3m2!1sen!2s!4v1703385454353!5m2!1sen!2s" allowfullscreen="" loading="lazy"></iframe>
</section>

<section class="callout">
  <h3>Let’s start a conversation that leads to your next big success.</h3>
  <p>Your problem, our solution. We're eager to help.</p>
  <a href="mailto:info@twistertechnologies.com">Email Us</a>
</section>

<footer>
  <p>&copy; 2024 Twister Technologies. All rights reserved.</p>
  <p>Contact: <a href="mailto:info@twistertechnologies.com">info@twistertechnologies.com</a></p>
</footer>
</body>
</html>