<html>
<head>
  <title>Motovedu.ee – Kontakt</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <style>
    :root{
      --gold:#D4AF37;
      --black:#000000;
      --text:#555555;
      --white:#ffffff;
    }

    html, body{
      margin:0;
      padding:0;
      height:100%;
      font-family: Arial, Helvetica, sans-serif;
      background: url("juhatusR2C2.GIF") no-repeat top center fixed;
      background-size: cover;
      color: var(--text);
    }

    .wrap{
      max-width:900px;
      margin:0 auto;
      padding:40px 24px;
    }

    .content{
      background:rgba(255,255,255,0.92);
      border-radius:10px;
      box-shadow:0 6px 18px rgba(0,0,0,0.08);
      padding:36px 30px;
      text-align:center;
    }

    h2{
      color:var(--black);
      font-size:26px;
      margin-bottom:10px;
    }

    p.lead{
      font-size:16px;
      margin:0 auto 26px;
      max-width:650px;
      color:#444;
    }

    .divider{
      height:2px;
      width:80px;
      background:var(--gold);
      border-radius:2px;
      margin:18px auto 28px;
    }

    .contacts{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:40px;
      margin-top:20px;
    }

    .person{
      background:var(--white);
      border:1px solid rgba(0,0,0,0.06);
      border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.05);
      padding:20px;
      width:260px;
      text-align:left;
    }

    .person h3{
      color:var(--black);
      font-size:18px;
      margin-bottom:4px;
    }

    .person p{
      margin:6px 0;
      font-size:15px;
      color:#444;
    }

    .person a{
      color:var(--black);
      text-decoration:none;
      font-weight:bold;
    }

    .person a:hover{
      color:var(--gold);
    }

    /* Social block */
    .social{
      margin:26px 0 6px;
    }
    .social a{
      display:inline-block;
      padding:10px 16px;
      border:2px solid var(--gold);
      border-radius:8px;
      text-decoration:none;
      color:var(--black);
      font-weight:bold;
      letter-spacing:.2px;
      transition:.2s ease;
    }
    .social a:hover{
      background:var(--gold);
      color:var(--black);
    }

    .cta{
      margin-top:28px;
      background:var(--black);
      color:var(--white);
      border-left:6px solid var(--gold);
      border-radius:8px;
      padding:20px 24px;
      font-size:16px;
    }

    .cta a{
      color:var(--gold);
      text-decoration:none;
      font-weight:bold;
    }

    .cta a:hover{
      text-decoration:underline;
    }

    @media(max-width:760px){
      .person{width:100%;}
      .wrap{padding:20px;}
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="content">
      <h2>Võta meiega ühendust</h2>
      <p class="lead">
        Kui soovid pakkumist, nõu või lihtsalt arutada oma järgmise sõiduplaane – kirjuta või helista meile.
        Oleme alati valmis aitama, et sinu järgmine teekond algaks õigesti.
      </p>

      <div class="divider"></div>

      <div class="contacts">
        <div class="person">
          <h3>Ain-Gustav Bartels</h3>
          <p><b>Telefon:</b> <a href="tel:+37256222722">+372 56 222 722</a></p>
          <p><b>E-mail:</b> <a href="mailto:ain@motovedu.ee">ain@motovedu.ee</a></p>
        </div>

        <div class="person">
          <h3>Indrek Puhm</h3>
          <p><b>Telefon:</b> <a href="tel:+37255520159">+372 555 20 159</a></p>
          <p><b>E-mail:</b> <a href="mailto:indrek@motovedu.ee">indrek@motovedu.ee</a></p>
        </div>
      </div>

      <!-- Social link -->
      <div class="social">
        <a href="https://www.facebook.com/motovedu" target="_blank" rel="noopener" aria-label="Motovedu Facebook">
          Facebook – @motovedu
        </a>
      </div>

      <div class="cta">
        <p>
          <b>Tee esimene samm oma järgmise sõiduni.</b><br>
          Kirjuta meile <a href="mailto:info@motovedu.ee">info@motovedu.ee</a> — vastame kiirelt ja leiame koos parima lahenduse.
        </p>
      </div>
    </div>
  </div>
</body>
</html>