.elementor-61 .elementor-element.elementor-element-c0eb020{--display:flex;--min-height:100px;}.elementor-61 .elementor-element.elementor-element-cdc6ef5{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-1c11524{--display:flex;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D1D1D1;--border-color:#D1D1D1;}.elementor-61 .elementor-element.elementor-element-5091fbf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-3f1ffda{--display:flex;--justify-content:center;}.elementor-61 .elementor-element.elementor-element-3f1ffda.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-61 .elementor-element.elementor-element-b310c73 img{width:50%;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-61 .elementor-element.elementor-element-c52e647{text-align:start;font-family:"IRANYekanX", Sans-serif;font-weight:400;}.elementor-61 .elementor-element.elementor-element-c52e647 p{margin-block-end:0px;}.elementor-61 .elementor-element.elementor-element-750ccbc{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:16px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-61 .elementor-element.elementor-element-d904d36.elementor-element{--align-self:center;}.elementor-61 .elementor-element.elementor-element-d904d36 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-61 .elementor-element.elementor-element-d904d36 .elementor-button{font-family:"IRANYekanX", Sans-serif;font-weight:500;}.elementor-61 .elementor-element.elementor-element-1f61b36{--display:flex;}.elementor-61 .elementor-element.elementor-element-1f61b36.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-61 .elementor-element.elementor-element-555dbb7{width:auto;max-width:auto;padding:0px 0px 10px 0px;border-style:solid;border-width:0px 0px 1px 0px;}.elementor-61 .elementor-element.elementor-element-555dbb7.elementor-element{--align-self:flex-start;}.elementor-61 .elementor-element.elementor-element-555dbb7 .elementor-heading-title{font-family:"IRANYekanX", Sans-serif;font-weight:600;-webkit-text-stroke-color:#E5E5E5;stroke:#E5E5E5;color:#535353;}.elementor-61 .elementor-element.elementor-element-8e02068{text-align:start;font-family:"IRANYekanX", Sans-serif;font-size:15px;font-weight:400;}.elementor-61 .elementor-element.elementor-element-8e02068 p{margin-block-end:6px;}.elementor-61 .elementor-element.elementor-element-8e02068 > *{max-width:100%;}.elementor-61 .elementor-element.elementor-element-047add1{--display:flex;}.elementor-61 .elementor-element.elementor-element-047add1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-61 .elementor-element.elementor-element-030500f{width:auto;max-width:auto;padding:0px 0px 10px 0px;border-style:solid;border-width:0px 0px 1px 0px;}.elementor-61 .elementor-element.elementor-element-030500f.elementor-element{--align-self:flex-start;}.elementor-61 .elementor-element.elementor-element-030500f .elementor-heading-title{font-family:"IRANYekanX", Sans-serif;font-weight:600;-webkit-text-stroke-color:#E5E5E5;stroke:#E5E5E5;color:#535353;}.elementor-61 .elementor-element.elementor-element-2f48eff{text-align:start;font-family:"IRANYekanX", Sans-serif;font-size:15px;font-weight:400;}.elementor-61 .elementor-element.elementor-element-2f48eff p{margin-block-end:6px;}.elementor-61 .elementor-element.elementor-element-08bf744{--display:flex;}.elementor-61 .elementor-element.elementor-element-59ec5d5{width:auto;max-width:auto;padding:0px 0px 10px 0px;border-style:solid;border-width:0px 0px 1px 0px;}.elementor-61 .elementor-element.elementor-element-59ec5d5.elementor-element{--align-self:flex-start;}.elementor-61 .elementor-element.elementor-element-59ec5d5 .elementor-heading-title{font-family:"IRANYekanX", Sans-serif;font-weight:600;-webkit-text-stroke-color:#E5E5E5;stroke:#E5E5E5;color:#535353;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-61 .elementor-element.elementor-element-8cd1892 .elementor-icon-box-wrapper{align-items:center;gap:12px;}.elementor-61 .elementor-element.elementor-element-8cd1892 .elementor-icon-box-title{margin-block-end:0px;}.elementor-61 .elementor-element.elementor-element-8cd1892.elementor-view-stacked .elementor-icon{background-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-8cd1892.elementor-view-framed .elementor-icon, .elementor-61 .elementor-element.elementor-element-8cd1892.elementor-view-default .elementor-icon{fill:#00A5FF;color:#00A5FF;border-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-8cd1892 .elementor-icon{font-size:20px;}.elementor-61 .elementor-element.elementor-element-8cd1892 .elementor-icon-box-title, .elementor-61 .elementor-element.elementor-element-8cd1892 .elementor-icon-box-title a{font-family:"IRANYekanX", Sans-serif;font-weight:600;}.elementor-61 .elementor-element.elementor-element-d1641bd .elementor-icon-box-wrapper{align-items:center;gap:12px;}.elementor-61 .elementor-element.elementor-element-d1641bd .elementor-icon-box-title{margin-block-end:0px;}.elementor-61 .elementor-element.elementor-element-d1641bd.elementor-view-stacked .elementor-icon{background-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-d1641bd.elementor-view-framed .elementor-icon, .elementor-61 .elementor-element.elementor-element-d1641bd.elementor-view-default .elementor-icon{fill:#00A5FF;color:#00A5FF;border-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-d1641bd .elementor-icon{font-size:20px;}.elementor-61 .elementor-element.elementor-element-d1641bd .elementor-icon-box-title, .elementor-61 .elementor-element.elementor-element-d1641bd .elementor-icon-box-title a{font-family:"IRANYekanX", Sans-serif;font-weight:600;}.elementor-61 .elementor-element.elementor-element-9c2df86 .elementor-icon-box-wrapper{align-items:center;gap:12px;}.elementor-61 .elementor-element.elementor-element-9c2df86 .elementor-icon-box-title{margin-block-end:0px;}.elementor-61 .elementor-element.elementor-element-9c2df86.elementor-view-stacked .elementor-icon{background-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-9c2df86.elementor-view-framed .elementor-icon, .elementor-61 .elementor-element.elementor-element-9c2df86.elementor-view-default .elementor-icon{fill:#00A5FF;color:#00A5FF;border-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-9c2df86 .elementor-icon{font-size:20px;}.elementor-61 .elementor-element.elementor-element-9c2df86 .elementor-icon-box-title, .elementor-61 .elementor-element.elementor-element-9c2df86 .elementor-icon-box-title a{font-family:"IRANYekanX", Sans-serif;font-weight:600;}.elementor-61 .elementor-element.elementor-element-1d4236b .elementor-icon-box-wrapper{align-items:center;gap:12px;}.elementor-61 .elementor-element.elementor-element-1d4236b .elementor-icon-box-title{margin-block-end:0px;}.elementor-61 .elementor-element.elementor-element-1d4236b.elementor-view-stacked .elementor-icon{background-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-1d4236b.elementor-view-framed .elementor-icon, .elementor-61 .elementor-element.elementor-element-1d4236b.elementor-view-default .elementor-icon{fill:#00A5FF;color:#00A5FF;border-color:#00A5FF;}.elementor-61 .elementor-element.elementor-element-1d4236b .elementor-icon{font-size:20px;}.elementor-61 .elementor-element.elementor-element-1d4236b .elementor-icon-box-title, .elementor-61 .elementor-element.elementor-element-1d4236b .elementor-icon-box-title a{font-family:"IRANYekanX", Sans-serif;font-weight:600;}.elementor-61 .elementor-element.elementor-element-1259454{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-61 .elementor-element.elementor-element-d7c9b94 img{width:37%;}.elementor-61 .elementor-element.elementor-element-bc8d5db{--display:flex;}.elementor-61 .elementor-element.elementor-element-bc8d5db:not(.elementor-motion-effects-element-type-background), .elementor-61 .elementor-element.elementor-element-bc8d5db > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00C6FF;}.elementor-61 .elementor-element.elementor-element-83714e8{text-align:center;}.elementor-61 .elementor-element.elementor-element-83714e8 .elementor-heading-title{font-family:"IRANYekanX", Sans-serif;font-size:13px;font-weight:500;color:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-61 .elementor-element.elementor-element-555dbb7.elementor-element{--align-self:center;}.elementor-61 .elementor-element.elementor-element-8e02068{text-align:start;}.elementor-61 .elementor-element.elementor-element-030500f.elementor-element{--align-self:center;}.elementor-61 .elementor-element.elementor-element-08bf744{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-61 .elementor-element.elementor-element-59ec5d5.elementor-element{--align-self:center;}.elementor-61 .elementor-element.elementor-element-83714e8 .elementor-heading-title{font-size:14px;}}@media(min-width:768px){.elementor-61 .elementor-element.elementor-element-3f1ffda{--width:20%;}.elementor-61 .elementor-element.elementor-element-1f61b36{--width:20%;}.elementor-61 .elementor-element.elementor-element-047add1{--width:20%;}}/* Start custom CSS for button, class: .elementor-element-d904d36 */<!DOCTYPE html>
<html lang="fa" 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/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet">
  <style>
    @keyframes modalIn {
      from { opacity: 0; transform: scale(0.85) translateY(30px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes backdropIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }
    @keyframes pulseGreen {
      0%, 100% { box-shadow: 0 0 0 0 rgba(20, 141, 0, 0.35); }
      50% { box-shadow: 0 0 0 10px rgba(20, 141, 0, 0); }
    }
    @keyframes successPop {
      0% { transform: scale(0.5); opacity: 0; }
      60% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }

    body {
      font-family: "Vazirmatn", "Tahoma", system-ui, sans-serif;
      margin: 0;
      padding: 40px;
      background: #f5f7fa;
    }

    #dokmeTamasBaMa {
      background: linear-gradient(135deg, #148d00 0%, #00a0de 100%);
      color: #fff;
      border: none;
      padding: 14px 36px;
      font-size: 16px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 160, 222, 0.3);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      animation: pulseGreen 2.5s infinite;
      position: relative;
      overflow: hidden;
      font-family: inherit;
    }
    #dokmeTamasBaMa:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 10px 28px rgba(0, 160, 222, 0.4);
    }
    #dokmeTamasBaMa:active {
      transform: translateY(0) scale(0.97);
    }
    #dokmeTamasBaMa::after {
      content: "";
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
      transition: left 0.6s;
    }
    #dokmeTamasBaMa:hover::after {
      left: 100%;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      padding: 16px;
      animation: backdropIn 0.3s ease forwards;
    }
    .modal-overlay.active {
      display: flex;
    }

    .modal-box {
      background: #fff;
      border-radius: 16px;
      width: 100%;
      max-width: 420px;
      padding: 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      animation: modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      position: relative;
      overflow: hidden;
    }
    .modal-box::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #148d00, #00a0de);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .modal-title {
      font-size: 18px;
      font-weight: 800;
      color: #1a1a1a;
      margin: 0;
    }
    .close-btn {
      background: #f0f0f0;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      color: #555;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .close-btn:hover {
      background: #e0e0e0;
      color: #000;
      transform: rotate(90deg);
    }

    .form-group {
      margin-bottom: 16px;
    }
    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #444;
      margin-bottom: 6px;
    }
    .form-input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      transition: all 0.25s ease;
      background: #fafafa;
      box-sizing: border-box;
    }
    .form-input:focus {
      outline: none;
      border-color: #00a0de;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(0, 160, 222, 0.12);
    }
    .form-input::placeholder {
      color: #aaa;
    }
    textarea.form-input {
      resize: vertical;
      min-height: 80px;
    }

    .submit-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #148d00 0%, #00a0de 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      margin-top: 8px;
      font-family: inherit;
      position: relative;
      overflow: hidden;
    }
    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 160, 222, 0.35);
    }
    .submit-btn:active {
      transform: translateY(0);
    }
    .submit-btn::after {
      content: "";
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.6s;
    }
    .submit-btn:hover::after {
      left: 100%;
    }

    .success-msg {
      display: none;
      text-align: center;
      padding: 20px;
      animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .success-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #148d00, #00a0de);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      color: #fff;
      font-size: 32px;
    }
    .success-title {
      font-size: 17px;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 6px;
    }
    .success-desc {
      font-size: 13px;
      color: #666;
    }

    .error-shake {
      animation: shake 0.4s ease;
    }

    /* ریسپانسیو موبایل - 8 پیکسل فاصله از بغل */
    @media (max-width: 480px) {
      .modal-overlay {
        padding: 8px;
        align-items: flex-end;
      }
      .modal-box {
        border-radius: 14px;
        padding: 22px;
        margin: 0 8px; /* 8 پیکسل از بغل‌ها */
        max-width: 100%;
      }
      .modal-title {
        font-size: 16px;
      }
      #dokmeTamasBaMa {
        padding: 12px 28px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <button id="dokmeTamasBaMa">📩 تماس با ما</button>

  <div class="modal-overlay" id="contactModal">
    <div class="modal-box">
      <div id="formContent">
        <div class="modal-header">
          <h3 class="modal-title">📝 فرم تماس با ما</h3>
          <button class="close-btn" id="closeModal">&times;</button>
        </div>

        <div class="form-group">
          <label class="form-label">نام و نام خانوادگی *</label>
          <input type="text" class="form-input" id="fullName" placeholder="مثال: علی روحانی">
        </div>

        <div class="form-group">
          <label class="form-label">آدرس *</label>
          <textarea class="form-input" id="address" placeholder="آدرس کامل خود را وارد کنید..."></textarea>
        </div>

        <div class="form-group">
          <label class="form-label">شماره تماس *</label>
          <input type="tel" class="form-input" id="phone" placeholder="مثال: 09123456789" dir="ltr">
        </div>

        <button class="submit-btn" id="submitForm">✓ تایید و ارسال</button>
      </div>

      <div class="success-msg" id="successContent">
        <div class="success-icon">✓</div>
        <div class="success-title">پیام شما ارسال شد!</div>
        <div class="success-desc">از طریق ایمیل با شما تماس خواهیم گرفت.</div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const btn = document.getElementById('dokmeTamasBaMa');
      const modal = document.getElementById('contactModal');
      const closeBtn = document.getElementById('closeModal');
      const submitBtn = document.getElementById('submitForm');
      const formContent = document.getElementById('formContent');
      const successContent = document.getElementById('successContent');

      function openModal() {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        setTimeout(() => document.getElementById('fullName').focus(), 100);
      }

      function closeModal() {
        modal.classList.remove('active');
        document.body.style.overflow = '';
        setTimeout(() => {
          formContent.style.display = 'block';
          successContent.style.display = 'none';
          document.getElementById('fullName').value = '';
          document.getElementById('address').value = '';
          document.getElementById('phone').value = '';
        }, 300);
      }

      btn.addEventListener('click', openModal);
      closeBtn.addEventListener('click', closeModal);
      modal.addEventListener('click', function(e) {
        if (e.target === modal) closeModal();
      });

      submitBtn.addEventListener('click', function() {
        const name = document.getElementById('fullName').value.trim();
        const address = document.getElementById('address').value.trim();
        const phone = document.getElementById('phone').value.trim();

        if (!name || !address || !phone) {
          const box = document.querySelector('.modal-box');
          box.classList.remove('error-shake');
          void box.offsetWidth;
          box.classList.add('error-shake');
          return;
        }

        const subject = encodeURIComponent('فرم تماس با ما - ' + name);
        const body = encodeURIComponent(
          'نام و نام خانوادگی: ' + name + '\n' +
          'آدرس: ' + address + '\n' +
          'شماره تماس: ' + phone
        );

        window.location.href = 'mailto:alirouhani79@gmail.com?subject=' + subject + '&body=' + body;

        formContent.style.display = 'none';
        successContent.style.display = 'block';

        setTimeout(closeModal, 2500);
      });

      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('active')) {
          closeModal();
        }
      });
    })();
  </script>

</body>
</html>/* End custom CSS */