@font-face {
    font-family: Shabnam-Bold;
    src: url('WebFonts/shabnam-font-v2.4.0/Shabnam-Bold.eot');
    src: url('WebFonts/shabnam-font-v2.4.0/Shabnam-Bold.woff2') format('woff2'),
         url('WebFonts/shabnam-font-v2.4.0/Shabnam-Bold.woff') format('woff'),
         url('WebFonts/shabnam-font-v2.4.0/Shabnam-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  body {
      font-family: 'Shabnam-Bold', sans-serif;
      text-align: center;
      background-color: #f0f0f0;
      direction: rtl;
      background-image: url('images/baytolhekmahBg.jpg'); /* مسیر عکس شما */
      background-size: cover; /* استفاده از cover به جای contain */
      background-attachment: scroll; /* استفاده از scroll به جای fixed */
      background-repeat: no-repeat;
      background-position: center center;
      margin: 0;
      min-height: 100vh; /* اضافه کردن min-height برای پوشش دادن کامل ارتفاع صفحه */
  }
  .intheNameOfGod {
    margin-top: 5px;
    font-size: 0.8em;
    text-align: center;
    color: #ffffff;
    font-weight: 900;
    padding: 0px;
    text-shadow: 
        1px 1px 2px #000000, /* inner shadow */
        -1px -1px 2px #000000; /* inner shadow */
}
.khamenei
{
      margin-top: 5px;
    font-size: 0.6em;
    text-align: center;
    color: #ffffff;
    font-weight: 900;
    padding: 0px;
    text-shadow: 
        1px 1px 2px #000000, /* inner shadow */
        -1px -1px 2px #000000; /* inner shadow */
}
  h1 {
      margin-top: 10px;
      font-size: 7em;
      text-align: center;
      color: #ffffff;
      font-weight: 900;
      padding: 0px;
      text-shadow: 
          1px 1px 2px #000000, /* inner shadow */
          -1px -1px 2px #000000; /* inner shadow */
  }
  
  h2 {
      margin-top: 20px;
      font-size: 2.5em;
      text-align: center;
      color: #ffffff;
      font-weight: 900;
      padding: 0px;
      text-shadow: 
          1px 1px 2px #000000, /* inner shadow */
          -1px -1px 2px #000000; /* inner shadow */
  }
  /* .phonenumber
  {
          text-align: right;

     width: 15vh;
    height: 3vh;
  } */
  .noteinput
  {
    margin-top: 0px;
    width: 40vh;
    height: 17vh;
  }
 .send_ticket {
      margin-top: 20px;
      font-size: 1em;
      text-align: center;
      color: #ffffff;
      font-weight: 900;
      padding: 0px;
      text-shadow: 
          1px 1px 2px #000000, /* inner shadow */
          -1px -1px 2px #000000; /* inner shadow */
  }

   .manager_name {
      /* margin-bottom: 50px; */
      font-size: 1em;
      text-align: center;
      color: #ffffff;
      font-weight: 900;
      /* padding-bottom: 100px; */
       

      text-shadow: 
          1px 1px 2px #000000, /* inner shadow */
          -1px -1px 2px #000000; /* inner shadow */
  }
  
  .button-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 50px;
  }
  
  .button-wrapper {
      text-align: center;
      position: relative;
  }
  
  .button {
      width: 250px; /* عرض ثابت */
      height: 250px; /* ارتفاع ثابت */
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      outline: 1px solid rgba(255, 255, 255, 0.8); /* outline */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.5); /* سایه اطراف */
  }
  
  .button:hover {
      transform: scale(1.2);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.7); /* سایه قوی‌تر هنگام hover */
  }
  
  .button-text {
      margin-top: 35px;
      font-size: 1.5em;
      color: #ffffff;
      text-shadow: 
          1px 1px 2px #000000, /* inner shadow */
          -1px -1px 2px #000000; /* inner shadow */
      opacity: 0; /* مخفی کردن متن به جای display: none */
      transition: opacity 0.3s ease; /* اضافه کردن انتقال برای نمایش متن */
  }
  
  .button-wrapper:hover .button-text {
      opacity: 1; /* نمایش متن هنگام hover */
  }
  
  .about, .login {
      margin-top: 50px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
  }
  
  /* موبایل */
  @media (max-width: 768px) {
      .button {
          width: 130px; /* کاهش اندازه دکمه‌ها */
          height: 130px; /* کاهش اندازه دکمه‌ها */
      }
  
      .button-container {
          gap: 20px;
      }
  
      .button-wrapper {
          margin-bottom: 0px; /* فضای اختصاصی زیر دکمه برای نمایش متن */
      }
  
      .button-text {
          margin-top: 20px;
          font-size: 1em;
          color: #ffffff;
          text-shadow: 
              1px 1px 2px #000000, /* inner shadow */
              -1px -1px 2px #000000; /* inner shadow */
      }
  
      h1 {
          font-size: 3em;
      }
      
      h2 {
          font-size: 1.2em;
      }
  
      .about, .login {
          padding: 15px;
          max-width: 90%;
      }
  }
  
  /* دسکتاپ */
  @media (min-width: 768px) {
      .button {
          width: 250px; /* افزایش اندازه دکمه‌ها */
          height: 250px; /* افزایش اندازه دکمه‌ها */
      }
  
      .button-container {
          gap: 40px;
      }
  
      .about, .login {
          padding: 15px;
          max-width: 90%;
      }
  }