/* ===== فونت‌ها ===== */
@font-face {
  font-family: 'CustomFont1';
  src: url('fonts/Iranian_Sans.ttf');
}
@font-face {
  font-family: 'CustomFont2';
  src: url('fonts/ZARGHANh.ttf');
}
@font-face {
  font-family: 'CustomFont3';
  src: url('fonts/Mj_Ojan.ttf');
}
@font-face {
  font-family: 'CustomFont4';
  src: url('fonts/A_Ali.ttf');
}
@font-face {
  font-family: 'CustomFont5';
  src: url('fonts/Mj_Faraj.ttf');
}
@font-face {
  font-family: 'CustomFont6';
  src: url('fonts/amiri_regular.ttf');
}
@font-face {
  font-family: 'CustomFont7';
  src: url('fonts/Persian_Mashin_Tahrir.ttf');
}
@font-face {
  font-family: 'CustomFont8';
  src: url('fonts/A_Ghasem.ttf');
}
@font-face {
  font-family: 'CustomFont9';
  src: url('fonts/Yekan.ttf');
}
@font-face {
  font-family: 'CustomFont10';
  src: url('fonts/Tekton_BCond.otf');
}
@font-face {
  font-family: 'CustomFont11';
  src: url('fonts/Shabnam_Bold_FD.ttf');
}
@font-face {
  font-family: 'CustomFont12';
  src: url('fonts/Shabnam_FD.ttf');
}
@font-face {
  font-family: 'CustomFont13';
  src: url('fonts/Shabnam_Light_FD.ttf');
}
@font-face {
  font-family: 'CustomFont14';
  src: url('fonts/Shabnam_Thin_FD.ttf');
}
@font-face {
  font-family: 'CustomFont15';
  src: url('fonts/Vazir-Medium.ttf');
}
@font-face {
  font-family: 'CustomFont16';
  src: url('fonts/Khandevane.ttf');
}
@font-face {
  font-family: 'CustomFont17';
  src: url('fonts/DiodrumArabic-Medium.ttf');
}
.caption1
{
    position: relative;
    text-align:center;
     width:90vw;
   font-family: 'CustomFont11'; /* Use the font family */
   font-size:10px;
    direction:rtl;
     margin:1rem;
     padding:0;
}
/* ===== فرم ورود اصلی ===== */
.loginform {
  max-width: 400px;
  margin: 60px auto;
  background-color: white;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== لوگو بالا ===== */
.loginlogo {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 12px;
}

/* ===== عنوان فرم ===== */
.footerfont1_mob {
  font-family: 'CustomFont5', sans-serif;
  font-size: clamp(1.3rem, 4vw, 2rem);
  margin-bottom: 20px;
  font-weight: bold;
  color: #333;
}
.footerfont1_mob7
{
    position: relative;
    width:75%;
    float:right;
    font-family: 'CustomFont1'; /* Use the font family */
   font-size:14px;
    text-align:right;
    direction:rtl;
    color:#222222;
    background-color:#ffffff;
    border-radius:30px;
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}
.marginmob1
{
    margin:30px 30px 0 0;
    padding:50px;
}
.loginform25
{
    float:right;
      text-align:right;
    width:100%;
    min-height:30vh;
    margin: 0 auto;
    padding-bottom:10vh;
     /* border:1px solid red;*/
}
/* ===== فیلدهای ورودی ===== */
.footerfont1_mob2 {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: clamp(1rem, 3vw, 1.2rem);
  transition: border 0.3s ease;
  font-family: 'CustomFont11', sans-serif;
}
.footerfont1_mob6 {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: clamp(1rem, 3vw, 1.2rem);
  transition: border 0.3s ease;
  font-family:sans-serif;
  text-align:left;
  direction:ltr;
}
.footerfont1_mob6:focus {
  border-color: #4A90E2;
  outline: none;
}
.dark .footerfont1_mob6 { background-color: #2a2a2a; color: #eee; border-color: #444; }
.dark .footerfont1_mob6 {
  background-color: #2a2a2a;
  color: #eee;
  border-color: #444;
}
.dark .footerfont1_mob6:focus {
  border-color: #888;
}
.footerfont1_mob2:focus {
  border-color: #4A90E2;
  outline: none;
}

/* ===== ردیف قوانین ===== */
.login2 {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
}

.footerfont1_mob4 {
  margin-right: 8px;
  text-decoration-line:underline;
  text-decoration-color: #CC26CA;
  font-family: 'CustomFont11', sans-serif;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
}
@media screen and (min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) {
  .text-mobile-safe {
    font-size: 13px !important;
  }
  .text-mobile-safe2 {
    font-size: 28px !important;
  }
  .text-mobile-safe3 {
    font-size: 20px !important;
  }
   .text-mobile-safe4 {
    font-size: 28px !important;
  }
  .text-mobile-safe5 {
    font-size: 18px !important;
  }
}
.footerfont1_mob4 a {
  color: #007BFF;
  text-decoration: none;
}

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

/* ===== دکمه ورود ===== */
.btnlogin {
  width: 100%;
  padding: 12px;
  background-color: transparent;
  border: 1px solid orange;
  color: red;
  font-size: clamp(1rem, 3.5vw, 1.3rem);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s ease;
  font-family: 'CustomFont5', sans-serif;
}

.btnlogin:hover {
  background-color: #ffe0c0;
}

/* ===== بخش لینک ورود با رمز عبور ===== */
.alli {
  margin-top: 20px;
  text-align: center;
}

.fontmob5 {
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  color: #666;
  margin-bottom: 5px;
  font-family: 'CustomFont11', sans-serif;
}
.myTextBox {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-family: 'CustomFont5', sans-serif;
  text-align: center;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: default;
  line-height: 1.375;
  white-space: normal;
  word-break: break-word;
  width: 7.5rem;
  color: #000; /* پیش‌فرض */
}
.marginmob2
{
    margin:60px 10vw 0 auto;
    padding:30px;
}
.qabtamas
{
   width:100%; 
   margin:1rem 0 0 0;
   padding:1rem 2rem 0 2rem;
}
.footerfont2
{
    width:100%;
    float:right;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:18px;
    font-weight:400;
    text-align:right;
    direction:rtl;
}
.footerfont3
{
    width:100%;
    float:right;
    font-family: 'CustomFont9'; /* Use the font family */
   font-size:18px;
    font-weight:300;
    text-align:right;
    direction:rtl;
}
.footerfont4
{
    width:100%;
    float:right;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:18px;
    text-align:right;
    direction:rtl;
}
.footerfont5
{
    width:100%;
    float:right;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:18px;
    font-weight:500;
    text-align:right;
    direction:rtl;
}
.footerfont6
{
    width:100%;
    float:right;
    font-family: 'CustomFont9'; /* Use the font family */
   font-size:18px;
    font-weight:300;
    text-align:right;
    direction:rtl;
}
.social1
{
     position: relative;
     text-align:right;
   width:2rem;
    height:2rem;
   background-color:#D6AF43;
    text-decoration:none;
}
.icon3
{
     position: relative;
   width:2rem;
    height:2rem;
   vertical-align:middle;
    padding:0;
    margin:2rem 5rem 0 0;
      text-align:right;
      float:right;
       background-color:#D6AF43;
       border-radius:10px;
}
.btnlogin254
{
    position: relative;
     width:75%;
    justify-content: center;
    align-items: center;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:22px;
    direction:rtl;
    color:#222222;
    background-color:transparent;
     border:10px solid orange;
     border-radius:50px;
}

@media (min-width: 640px) {
  .myTextBox {
    text-align: right;
    font-size: 1.1rem;   /* بزرگ‌تر برای لپ‌تاپ‌ها */
    width: auto;
  }
}

@media (prefers-color-scheme: dark) {
  .myTextBox {
    color: #ffffff;
  }
}


.atag1 {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  color: #007BFF;
  text-decoration: none;
  font-family: 'CustomFont11', sans-serif;
}
.atag2 {
  text-decoration: none;
  font-family: 'CustomFont11', sans-serif;
}
.atag1:hover {
  text-decoration: none;
}
.atag1:focus,
.atag1:active {
  text-decoration: none !important;
}

/* ===== پیام هشدار یا خطا ===== */
.alert-msg {
  background-color: #ffe0e0;
  color: #c00;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  width: 100%;
  text-align: center;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  font-family: 'CustomFont11', sans-serif;
}

/* ===== فونت‌های خاص برای استفاده دستی ===== */
.custom-title-font {
  font-family: 'CustomFont5', sans-serif;
}

.custom-desc-font {
  font-family: 'CustomFont11', sans-serif;
}
.dark .footerfont1_mob { color: #f5f5f5; }
.dark .footerfont1_mob2 { background-color: #2a2a2a; color: #eee; border-color: #444; }
.dark .footerfont1_mob3 { accent-color: orange; }
.dark .footerfont1_mob4 { color: #ccc; }
.dark .btnlogin { border: none; }
body.dark {
  background-color: #121212;
}

.dark .loginform {
  background-color: #1e1e1e;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.dark .footerfont1_mob {
  color: #f5f5f5;
}

.dark .footerfont1_mob2 {
  background-color: #2a2a2a;
  color: #eee;
  border-color: #444;
}

.dark .footerfont1_mob2:focus {
  border-color: #888;
}

.dark .footerfont1_mob4 {
  color: #ccc;
}

.dark .btnlogin {
  background-color: #333;
  color: #ffa500;
  border-color: orange;
}

.dark .btnlogin:hover {
  background-color: #555;
}
@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-in-out;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}
.border111
{
    border:3px solid red;
}
.topboard
{
    position:fixed;
    top:0;
    left:0;
    width: 99%;
    height:10vh;
    border:1px solid red;
    background-color:#f0f1f3;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-align:center;
    margin:0 auto;
    padding:0;
    z-index:3;
    box-shadow:10px .5px 30px -10px #808080;
}
.inlineqab
{
    position:relative;
     text-align:center;
    width:30rem;
    height:100%; 
     margin:0;
    padding:0;
  
}
.sitelogo_m
{
     position:relative;
     overflow:hidden; 
   width: 3rem;
    height:3rem; 
     margin:0 1rem 0 0;
    padding:0;
    border-radius:20px;
}
.footboard
{
    position:fixed;
    width: 100%;
    height:7vh;
    border-top:3px solid #b8b3b2;
    background-color:#f0f1f3;
     text-align:center;
      margin:0 auto;
       padding:0;
    /*border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;*/
    left:0;
    bottom:0;
    z-index:3;
   /* box-shadow:10px .5px 30px -10px #808080;*/
}
.backpage6
{
    position:absolute;
     overflow:hidden;
     top:1rem;
     left:7.5rem;
      width: 2rem;
    height:2rem; 
   margin: 0;
    padding:0;
    cursor: pointer;
}
@media (max-width: 480px) {
  .backpage6
{
    position:absolute;
     overflow:hidden;
     top:1.5rem;
     left:7.5rem;
      width: 2rem;
    height:2rem; 
   margin: 0;
    padding:0;
    cursor: pointer;
}
}
.txt252
{
   position:absolute;
       top:2.8rem;
     left:5.2rem;
      font-family: 'CustomFont5'; /* Use the font family */
   font-size:15px;
    direction:rtl;
     margin: 0;
    padding:0;
    cursor: pointer;  
}
@media (max-width: 480px) {
 .txt252
{
   position:absolute;
       top:3.3rem;
     left:5.2rem;
      font-family: 'CustomFont5'; /* Use the font family */
   font-size:14px;
    direction:rtl;
     margin: 0;
    padding:0;
    cursor: pointer;  
}
}
.saveicontxt5
{
      position:absolute;
       top:3rem;
     left:5.6rem;
      font-family: 'CustomFont10'; /* Use the font family */
   font-size:14px;
    direction:rtl;
     margin: 0;
    padding:0;
    cursor: pointer;
}
@media (max-width: 480px) {
  .saveicontxt5 {
    position:absolute;
       top:3.5rem;
     left:5.6rem;
      font-family: 'CustomFont10'; /* Use the font family */
   font-size:14px;
    direction:rtl;
     margin: 0;
    padding:0;
    cursor: pointer;
  }
}
.saveicon6
{
     top:1rem;
     left:5rem;
     position:absolute;
     overflow:hidden;
      width: 2rem;
    height:2rem; 
   margin:0;
    padding:0;
    cursor:pointer;
    z-index:3;
}
@media (max-width: 480px) {
  .saveicon6
{
     top:1.5rem;
     left:5rem;
     position:absolute;
     overflow:hidden;
      width: 2rem;
    height:2rem; 
   margin:0;
    padding:0;
    cursor:pointer;
    z-index:3;
}
}
.namebox6
{
     position:relative;
    height:100%; 
    margin:0;
    padding:0;
}
@media (max-width: 480px) {
.namebox6
{
     position:relative;
    height:100%; 
    margin:0.8rem 0 0 0;
    padding:0;
}
}
.nameboxfont5
{
    width:11rem;
   position: relative;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:22px;
    text-align:right;
    direction:rtl;
    color:#000000;
     margin:1rem 0.5rem 0 0;
    padding-right:0.5rem;
    background-color:transparent;
}
/*slide show*/
/* موبایل: فقط یکی یکی نمایش، با cycle */
.mobile-mode .qabslideshow,
.mobile-mode .slidepic {
  box-sizing: border-box;
}

.mobile-mode .qabslideshow {
  display: inline-block;
  width: 100vw;
  height:auto;
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.mobile-mode .slidepic {
  width: 100vw;
  height: auto;
  border-radius: 0.5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.desktop-mode .slider-wrapper {
   width: 100vw;
      overflow: hidden;
      border: 2px solid #ccc;
      direction: ltr;
}
.bodytblq {
    position: relative;
    width: 100vw;
    height: 36vh;
    margin:0;
    padding: 0;
     justify-content: center;
    align-items: center;
    z-index:0;
}
@media (max-width: 480px) {
.bodytblq {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 0;
}
}
.qabcountslide
{
 display:none;
}
@media (max-width: 480px) {
     .qabcountslide
    {
      position: absolute;
      text-align: center;
      bottom: 3rem;
      left: 0;
      width: 100vw;
      height: 2rem;
      margin: 0 auto;
      padding: 0;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index:1;
    }
}
.qabcount_subslide
{
     display: flex;
  justify-content: center;
  align-items: center;
  /* عرض را خودکار بگذار یا مقدار مناسبی بده */
  width: auto;
  margin: 0 auto;
  padding: 0;
  border: 0; /* می‌تونی حذف کنی یا نگه‌داری */
  z-index:1;
}
.qabcountshape
{
      width: 1rem;
  height: 1rem;
  border: 1px solid black;
  background-color: transparent;
  border-radius: 50%;
  margin: 0 5px;
  padding: 0;
  z-index:1;
}
/*desktop mode ***css*/


.desktop-mode .qabslideshow {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  white-space: nowrap;
  animation: scroll-slide 20s linear infinite;
  width: max-content;
      /*transition: all 0.2s ease-out;*/
}

/* هنگام هاور توقف کند */
.desktop-mode .qabslideshow:hover {
  animation-play-state: paused;
}

.desktop-mode .slidepic {
  width: 30vw;
  height: 17vw;
  min-width: 30vw;
  min-height: 17vw;
  border-radius: 0.5rem;
  margin: 0 0.2rem 0 0.3rem;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
}


/*end slide show*/
.animated-text {
  display: inline-block;
  font-size: 24px;
  transition: transform 0.3s ease;
}

.scale {
  animation: scaleAnimation 0.9s ease 3;
}

@keyframes scaleAnimation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}



.mainpage
{
    position:relative;
    overflow-y:auto;
    width:100vw;
    height:78vh;
    margin:3vh 0 0 0;
    padding:0 0 0 0;
    z-index:0;
    background-color:transparent;
    /* border:1px solid red;*/
}
@media (max-width: 480px) {
 .mainpage {
  position: relative;
  overflow-y: auto;
  width: 100vw;
  height: 73vh;
  margin: 3vh 0 0 0;
  padding: 0 0 2rem 0;
  background-color: transparent;
  z-index: 0;
  /*border:1px solid red;*/
}
}

* {
  box-sizing: border-box;
}
.body_store2
{
    position:relative;
    float:right;
     width:98vw;
    height:34vh;
     margin:0;
     padding:0;
    /* border:2px solid blue;*/
}
@media (max-width: 480px) {
  .body_store2 {
  position: relative;
   float:right;
  width: 100%;
  height: auto;
  padding: 1rem 0;
  margin: 0 auto;
  /*border: 2px solid blue;*/
}
}

.body_store {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
   float:right;
  padding: 0 1rem;
  gap: 1rem;
  overflow-x: auto;
  height: auto;
  padding: 0.5rem 0 1rem 0;
}

.storeqaleb {
     position: relative;
  flex: 0 0 auto;
  width: 20rem;
  height: 12rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 10px .5px 30px -10px #808080;
  /*border: 2px solid red;*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 480px) {
     .storeqaleb {
         position: relative;
      flex: 0 0 auto;
      width: 20rem;
      height: 11rem;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 10px .5px 30px -10px #808080;
      /*border: 2px solid red;*/
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
}
.storeqaleb2
{
     position: relative;
    overflow:hidden;
      float:right;
       text-align:right;
     width:27rem;
     height:27rem;
      margin:1rem 1rem 2rem 1rem;
      padding:0;
      background-color:#ffffff;
      border-radius:15px;
       box-shadow:10px .5px 30px -10px #808080; 
}
.storelogoclass
{
     position: absolute;
      float:left;
      top:1rem;
      left:1rem;
     width:5rem;
     height:5rem;
     vertical-align: middle;
      margin:0;
      padding:0;
      border-radius:15px;
       box-shadow:10px .5px 30px -10px #808080; 
}
@media screen and (max-width: 600px) {
  .storeqaleb {
   height: 11rem;
  }
}
.bazdid1
{
    position: absolute;
      top:6.7rem;
      left:1rem;
     width:1.5rem;
     height:1.5rem;
     vertical-align: middle;
      margin:0;
      padding:0;
      stroke:#D2691E;
}
.bazdid1_1
{
     text-align:left;
    position: absolute;
     width:10rem;
      top:6.5rem;
      left:3rem;
      margin:0;
      padding:0;
      color:#D2691E;
      font-family: 'CustomFont11'; /* Use the font family */
   font-size:21px;
  
  
}
.nazarat
{
    position: absolute;
    width:10rem;
    text-align:right;
    direction:rtl;
    right:5rem;
    top:7.5rem;  
    margin:0;
    padding:0;
    font-family: 'CustomFont11'; /* Use the font family */
    font-size:30px;
   
}
.frush2
{
    position: absolute;
    width:10rem;
    text-align:right;
    direction:rtl;
    right:5rem;
    top:10.5rem;  
    margin:0;
    padding:0;
    font-family: 'CustomFont11'; /* Use the font family */
    font-size:30px;
    
}
.fontstore3
{
    position: absolute;
     width:10rem;
    float:right;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:30px;
    font-weight:500;
    text-align:right;
    direction:rtl;
    right:1rem;
    top:1rem;
    margin:0;
    padding:0;
}
.my-rating
{
    position: absolute; 
    float:right;
     right:1rem;
    top:5rem;
}
.veiw1
{
     position: absolute; 
     width:3rem;
     height:3rem;
     right:1rem;
    top:7rem;  
}
.frsh1
{
     position: absolute; 
      width:3rem;
     height:3rem;
     right:1.2rem;
    top:10rem;  
}
.fontstore2_1
{
    position: absolute;
   min-width:100%;
    float:right;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:30px;
    font-weight:500;
    text-align:right;
    direction:rtl;
    right:0;
    bottom:0.5rem;
    margin:0;
    padding:0;
     white-space: nowrap;
      animation-name: example1;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
    border:1px solid red;
}
@keyframes example1 {
  0%   {right:-4rem;}
  25%  {right:-8rem;}
  50%   {right:-12rem;}
  75%   {right:-16rem;}
  100%  {right:2rem;}
}
.fontstore2
{
    position: absolute;
    width:100%;
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:30px;
    font-weight:500;
    text-align:center;
    direction:rtl;
    right:0;
    bottom:0.5rem;
    margin:0;
    padding:0;
     white-space: nowrap;
}
.menu_store
{
    position:relative;
     float:right;
      text-align:right;
     width:100vw;
     margin:0;
     padding:0;
}
.storetitr
{
   position:relative;
    float:right;
       text-align:right;
   display:flex;
      font-family: 'CustomFont11'; /* Use the font family */
   font-size:16px;
    direction:rtl;
     margin:1rem 2rem 0 0;
    padding:0;
}
/* ===== واکنش‌گرا برای موبایل ===== */
@media (max-width: 480px) {
  .loginform {
    margin: 30px 15px;
    padding: 20px;
  }
}
/* آیکن فعال */
.active-icon svg,
.active-icon span {
  color: #0088cc !important; /* یا هر رنگ دلخواه مثل آبی/سبز */
}

/* لرزش کوتاه */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.icon-shake {
  animation: shake 0.3s ease-in-out;
}
.active-icon svg {
  color: #0d9488 !important; /* teal */
}
.active-icon span {
  color: #0d9488 !important;
}
@media (prefers-color-scheme: dark) {
  .active-icon svg,
  .active-icon span {
    color: #5eead4 !important; /* teal-300 در حالت دارک */
  }
}

.footerfont10
{
   
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:24px;
    font-weight:300;
    direction:rtl;
}
.footerfont11
{
  
    font-family: 'CustomFont11'; /* Use the font family */
   font-size:16px;
    direction:rtl;
}
.font11
{
   font-family: 'CustomFont11'; /* Use the font family */
   font-size:16px;
    direction:rtl;  
}
.footerfont12
{
    font-family: 'CustomFont1'; /* Use the font family */
   font-size:16px;
    direction:rtl;
}
.footerfont13
{
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:32px;
    direction:rtl;
}
.footerfont14
{
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:32px;
    direction:rtl;
}
.footerfont15
{
    font-family: 'CustomFont10'; /* Use the font family */
   font-size:26px;
    direction:rtl;
}
.footerfont16
{
    
    font-family: 'CustomFont11'; /* Use the font family */
   font-size:14px;
    direction:rtl;
}
.footerfont17
{
    
    font-family: 'CustomFont11'; /* Use the font family */
   font-size:22px;
    direction:rtl;
}
.guid678
{
     position:absolute;
     top:30%;
     left:10%;
     text-align:center;
    width: 85%; 
    height:14vh;
    border:2px solid red;
    border-radius:1rem;
    background-color:white;
     font-family: 'CustomFont11'; /* Use the font family */
   font-size:38px;
    font-weight:300;
    direction:rtl;
     margin: 0;
    padding:0;
    z-index:1;
}
.instltxt789
{
     position:absolute;
      top:5rem;
     left:0;
    width:95%;
    height:2vh;
    margin:0;
    padding:1rem;
     
}
.btnext {
       position:absolute;
        top:50%;
        z-index: 7;
        right:1rem;
        cursor: pointer;
        display: block;
        opacity: 0.7;
    }
@media (max-width: 480px) {
     .btnext {
         position:absolute;
        top:50%;
       color:black;
        right:2%;
        cursor: pointer;
        opacity: 0.7;
         z-index: 50;
    }
}    
    .qabstoretitle3
{
      position: relative;
     margin:0;
     padding:0;
    width:100vw;
    height:100%;
      overflow:hidden;
     /*  border: 5px solid orange;*/
       
}
.qabcountslide2
{
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  margin: 0 auto;
  padding: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
.divkhub254
{
  width:100%;  
}
.input_field {
    position:relative;
     text-align:center; 
     direction:rtl;
     font-family:Tahoma,sans-serif;
    font-size:18px;
            width: 100%;
            padding:0.2rem;
            margin: 0.5rem auto 0 auto;
              border:1px solid orange;
               border-radius: 1rem;
        }
.input_field2 {
    position:relative;
     text-align:center; 
     direction:rtl;
     font-family:Tahoma,sans-serif;
    font-size:18px;
            width: 100%;
             padding:0.2rem;
             border:1px solid orange;
            border-radius: 1rem;
            margin: 0.5rem auto 0 auto;
        }        
.input_field3 {
      position:relative;
     text-align:left; 
     direction:rtl;
     font-family:Tahoma,sans-serif;
    font-size:18px;
            width: 100%;
             padding:0.2rem;
             border:1px solid orange;
            border-radius: 1rem;
            margin: 0.5rem auto 0 auto;
        }  
@keyframes blink-border {
  0% {
    border-width: 4px;
    border-color: red;
  }
  50% {
    border-width: 8px;
    border-color: orange;
  }
  100% {
    border-width: 4px;
    border-color: red;
  }
}
.storepic
{
  width:100vw;
     height:73vh; 
     position: relative;
     margin:0;
     padding:0;
}
@media screen and (min-width: 1024px) {
    .storepic {
      width:100vw;
     height:76.5vh; 
     position: relative;
     margin:0;
     padding:0;
        
    }
}

    .qabstoretitle
{
    float:left;
    text-align:left;
     position: relative;
     display:flex;
     margin:0;
    width:100%;
    height:2%;
      overflow-x:scroll;
      
}
.backpage4
{
     position:absolute;
     overflow:hidden;
       top:1rem;
     left:1rem;
      width: 2rem;
    height:2rem; 
   margin: 0;
    padding:0;
    cursor: pointer;
    z-index:6;
}
.btprev {
        position: absolute;
        top:50%;
        left:1rem;
        z-index: 7;
        cursor: pointer;
        display: block;
        opacity: 0.7;
    }

.qabstore {
    position: absolute;
    top: 10vh; /* حالت پیش‌فرض در موبایل و تبلت */
    left: 0;
    width: 100vw;
    height: 73vh;
    /*border: 5px solid red;*/
    z-index: 3;
    margin: 0;
    padding: 0;
    background-color: white;
    overflow: hidden;
    transform: none;
}

/* حالت لپ‌تاپ و بالاتر: وسط‌چین کامل */
@media screen and (min-width: 1024px) {
    .qabstore {
      
        width: 100%;
    height: 78vh;
        top: 27%;
        left: 50%;
        transform: translate(-50%, -40%);
        
    }
}

.saveicontxt6
{
   font-family: 'CustomFont10'; /* Use the font family */
   font-size:14px;
   cursor: pointer;
}
.innerdiv2345
{
   position:relative;
    width:100%;
    height:100%;
    margin: 0;
    padding:0;
}
.txtlogo5
{
   width:1.5rem;
   height:1.5rem;
}
.txtlogo6
{
 
   width:1.5rem;
   height:1.5rem;
}
.txtlogo7
{
   width:2rem;
   height:2rem;
}
.txtlogo8
{
  width:3rem;
   height:3rem;
}
.txtlogo9
{
   width:3.5rem;
   height:3.5rem;
}
.rowfottrndkala
{
     position: absolute;
   min-width:110rem;
    float:right;
    text-align:right;
    direction:rtl;
    right:0;
    bottom:1rem;
    margin:0;
    padding:0;
     white-space: nowrap;
      animation-name: example1;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.rowfottrndkala2
{
   position: absolute;
   min-width:110rem;
    float:right;
    text-align:right;
    direction:rtl;
    right:2rem;
    bottom:1rem;
    margin:0;
    padding:0;
     white-space: nowrap;  
}
.fontstore2_2
{
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:30px;
    font-weight:500;
    text-align:right;
    direction:rtl;
    margin:0;
    padding:0;
}
.fontstore2_3
{
    font-family: 'CustomFont10'; /* Use the font family */
   font-size:28px;
    font-weight:500;
    margin:0;
    padding:0;
}
.body_storetitle4 {
     position: relative;
    width:94vw;
    height:25vh;
    margin:1rem 0.2rem 1rem 0.2rem;
    padding:0 0 0 0;
     /*border: 2px solid red;*/
     border-radius:1rem;
     box-shadow:4px 7px 10px -1px #808080;
     overflow:hidden;
}
.qabbarcode
{
     position: absolute;
     top:20%;
     left:15%;
   width:50vw;
    height:50vw; 
     border: 3px solid darkblue;
      margin:0;
      padding:6rem;
      background-color:white;
       border-radius:1rem;
}
.qabdial
{
     position: absolute;
     top:20%;
     left:15%;
   width:60vw;
    height:48vw; 
      border: 3px solid darkblue;
      margin:0;
      padding:2rem;
      background-color:white;
      border-radius:1rem;
}
.tamasform
{
      position: relative;
      float:right;
       text-align:center;
        direction:rtl;
        margin:0 auto;
        padding:0 3rem 0 3rem;
    width:95%; 
    height:12vh;
}
.tamasformfont1
{
    font-family: 'CustomFont5'; /* Use the font family */
   font-size:22px;
    font-weight:900;
     width:100%; 
}
.tamasformfont2
{
    font-family: 'CustomFont11'; /* Use the font family */
   font-size:16px;
    font-weight:500;
     width:100%; 
}
.fright
{
    float:right;
}
.fleft
{
    float:left;
}
.tamasform2
{
      position: relative;
      float:right;
       text-align:center;
        direction:rtl;
        margin:0 auto;
        padding:0 3rem 0 3rem;
    width:95%; 
    height:62vh;
}
.tamasform3
{
      position: relative;
      float:right;
       text-align:center;
        direction:rtl;
        margin:0 5rem 2rem 5rem;
        padding:0 3rem 0 3rem;
    width:73%; 
    height:62vh;
     border-radius:30px;
     background-color:#f8f8ff;
}

.marginbase1
{
    margin-left:10px;
}
.colorbase1
{
   color: #16A257;  
}
.colorbase2
{
   color: #E1423D;  
}
.colorbase3
{
   color: #E1423D;  
}
.color4
{ /*طلایی*/
    color:#F5A221;
}
.color5
{ /*red*/
    color:#FF0000;
}
.color6
{ /*مشکی*/
    color:#000000;
}
.color7
{ /*خاکستری*/
    color:#808b96;
}
.color8
{
    /*dark blue*/
    color:#2775aa;
}
.color9
{
    /*orange*/
    color:#d68910;
}
.color10
{
    /*Teal Green*/
    color:#00827F;
}
.color11
{
    /*white*/
    color:#FFFFFF;
}
.color12
{
    /*Sheet Metal*/
    color:#888B90;
}
.color13
{
    /*Dim Grey*/
    color:#696969;
}
.color14
{
    /*Cadet Blue*/
    color:#5f9ea0;
}
.color15
{
    /*Caribbean Green*/
    color:#00cc99;
}
.color16
{
    /*Green (Crayola)*/
    color:#1cac78;
}
.color17
{
    /*Olivine*/
    color:#9ab973;
}
.color18
{
    /*Davy’s grey*/
    color:#555555;
}
.color19
{
    /*Chamoisee*/
    color:#a0785a;
}
.color20
{
    /*Coral*/
    color:#ff7f50;
}
.color21
{
    /*Sea Green*/
    color:#2e8b57;
}