@import url(fontiran.css);
:root{
  --accent:#0bd1b9;
  --hero1:#0B4887;
  --hero2:#102a43;
  --white-10: rgba(255,255,255,.10);
  --white-15: rgba(255,255,255,.15);
}

body {
	font-family: IRANSansX  !important;
	direction: rtl;
	background-color: #cdcdcd;
	margin: 0;
}
h1, h2, h3, h4, h5, h6,input, textarea {
	font-family: IRANSansX !important;
}
h1 {
	font-weight: bold;
}

html{ scroll-behavior:smooth; }
.bg-body{ background: #f7f9fb; font-family: IRANSansX  !important; }

/* ===== Header / Hero ===== */
.bg-gradient-hero{
  background: linear-gradient(135deg, var(--hero1), #1b2e55 60%, #0a203b);
}
.logo-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--accent); display:inline-block;
  box-shadow:0 0 0 6px rgba(11,209,185,.15);
}

/* شماره تماس داخل هدر (دسکتاپ) */
.call-inline{
  color:#fff; text-decoration:none; padding:.35rem .75rem; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; background:rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease;
}
.call-inline:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); }
.call-inline .call-text{
  position:relative; display:inline-block;
  background: linear-gradient(90deg, #fff 0%, #d5fff6 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.8s linear infinite;
}
@keyframes shimmer{ to{ background-position: -200% center; } }

:root{
  --na-accent:#E10C22; /* قرمز سازمانی */
  --na-primary:#0B4887; /* سرمه‌ای سازمانی */
  --na-glass: rgba(255,255,255,.08);
}
.text-accent{color:var(--na-accent)!important;}
.btn-accent{background:var(--na-accent); color:#fff; border:none;}
.btn-accent:hover{filter:brightness(.95); color:#fff;}
.text-white-75{color:rgba(255,255,255,.85)!important;}

.na-hero{
  background: radial-gradient(1000px 500px at 10% 0%, rgba(11,72,135,.55), transparent 60%),
              radial-gradient(900px 500px at 100% 20%, rgba(225,12,34,.45), transparent 60%),
              #0a1530;
  position: relative;
  isolation: isolate;
}
.na-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,21,48,.4) 0%, rgba(10,21,48,.75) 60%, rgba(10,21,48,1) 100%);
  z-index:0;
}
.na-blob{
  position:absolute; filter: blur(40px); opacity:.35; z-index:0;
  border-radius:50%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(225,12,34,.7), rgba(11,72,135,.7), rgba(225,12,34,.7));
  animation: float 14s ease-in-out infinite;
}
.na-blob--1{ width:480px; height:480px; top:-120px; inset-inline-start:-140px;}
.na-blob--2{ width:420px; height:420px; bottom:-120px; inset-inline-end:-120px; animation-delay: -5s;}
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) scale(1);}
  50%{ transform: translateY(-12px) translateX(8px) scale(1.02);}
}

/* Device mock */
.na-device{
  width: 320px; height: 640px; border-radius: 36px;
  background: linear-gradient(180deg, #0e1b3a, #0b1530);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.03);
  position: relative; overflow:hidden;
}
.na-device__glow{
  position:absolute; inset:-30% -30% auto -30%; height:50%;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.12), transparent 70%);
}
.na-device__screen{
  position:absolute; inset:16px; border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(120% 60% at 50% 0%, rgba(225,12,34,.12), transparent 60%),
    #0b1228;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.na-scan-line{
  position:absolute; inset-inline:0; top:-100%;
  height:100%; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  animation: scan 4.5s linear infinite;
}
@keyframes scan{ 0%{top:-100%} 100%{top:100%} }

.na-kpis{
  position:absolute; inset:0; display:grid; place-content:center; gap:14px;
}
.na-kpis > div{
  display:flex; align-items:center; gap:10px;
  background: var(--na-glass);
  border:1px solid rgba(255,255,255,.14);
  color:#e8eefc; padding:10px 14px; border-radius:14px;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.na-kpis i{font-size:1.1rem;}
.na-kpis span{opacity:.9;}
.na-kpis strong{margin-inline-start:6px; color:#fff;}

/* Finder card inside hero bottom */
.na-finder-wrap{
  margin-top: 28px;
  position: relative;
  z-index: 2;
  transform: translateY(10px);
}
.na-finder-wrap .card{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
}

/* Result cards */
.na-card{
  background:#fff; border:1px solid #eef0f3; border-radius:16px;
  padding:16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.na-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  border-color:#e3e7ee;
}
.na-card__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.na-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#f3f6ff; color:#1d4ed8; font-size:.8rem; border:1px solid #e2e8ff;
}
.na-card__body{display:grid; gap:6px; color:#334155; font-size:.95rem;}
.na-meta{display:flex; gap:8px; align-items:flex-start;}
.na-meta i{opacity:.7;}
.na-card__foot{display:flex; gap:8px; margin-top:12px;}

/* Small helpers */
[data-animate]{opacity:0; transform:translateY(10px); transition:all .7s cubic-bezier(.2,.6,.2,1);}
[data-animate].is-in{opacity:1; transform:none;}
/* Responsive */
@media (max-width: 991.98px){
  .na-device{transform: scale(.85);}
}
/* ===== Buttons ===== */
.btn-accent{
  background:var(--accent); border:none; color:#052b2a;
  box-shadow: 0 10px 24px rgba(11,209,185,.25);
}
.btn-accent:hover{ filter: brightness(.95); color:#031c1b; }

/* ===== Brand marquee ===== */
.brand-marquee{
  position:relative; overflow:hidden; border:1px dashed #eaeef3; border-radius:14px; background:#fbfdff;
}
.brand-marquee .track{
  display:inline-flex; gap:14px; padding:12px 14px;
  animation: marquee 28s linear infinite;
  white-space: nowrap; min-width: 150%;
}
@keyframes marquee{
  0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) }
}
.brand-chip{
  display:inline-flex; align-items:center; gap:6px; font-weight:600;
  background:#fff; border:1px solid #edf1f5; color:#1e2a39;
  border-radius:999px; padding:.45rem .9rem; box-shadow:0 6px 16px rgba(28,55,90,.06);
}
.brand-chip small{ font-weight:500; color:#6b7a90; }

.badge-card{
  background:#fff; border:1px solid #edf1f5; border-radius:14px; text-align:center;
  padding:.9rem; font-weight:600; color:#223047; box-shadow:0 10px 24px rgba(28,55,90,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.badge-card:hover{ transform: translateY(-4px); box-shadow:0 16px 32px rgba(28,55,90,.1); }

/* ===== Notices ===== */
.bg-amber-50{ background:#fff8e6; }
.border-y{ border-top:1px solid #ffe7b3; border-bottom:1px solid #ffe7b3; }
.notice{
  display:flex; gap:12px; padding:14px; border:1px solid #ffe0a3;
  background:#fffaf0; border-radius:12px;
}
.notice i{ font-size:24px; color:#d48a00; }

/* ===== Timeline ===== */
.timeline{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.timeline li{
  display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid #edf1f5; border-radius:12px; padding:12px;
  box-shadow:0 8px 20px rgba(28,55,90,.05);
}
.timeline .num{
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#042523;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}

/* Glass card */
.glass{
  background: rgba(255,255,255,.65)!important;
  backdrop-filter: blur(8px) saturate(120%);
  border:1px solid rgba(0,0,0,.06)!important;
}

/* Features */
.feature-card{
  background:#fff; border:1px solid #edf1f5; border-radius:16px; padding:18px;
  box-shadow:0 14px 30px rgba(28,55,90,.06); text-align:center; height:100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{ transform: translateY(-6px); box-shadow:0 20px 40px rgba(28,55,90,.12); }
.feature-card i{ font-size:30px; color:var(--accent); margin-bottom:8px; display:block; }

/* Map placeholder */
.map-placeholder{
  height: 340px; border-radius:16px; background:
    radial-gradient(800px 300px at 80% 20%, #e9f3ff, transparent 60%),
    linear-gradient(180deg,#f8fbff,#eef4fb);
  border:1px solid #dbe5f3; display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden;
}
.map-placeholder .pulse{
  position:absolute; width:12px; height:12px; background:#2c7be5; border-radius:50%;
  box-shadow:0 0 0 0 rgba(44,123,229,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(44,123,229,.6) }
  70%{ box-shadow:0 0 0 24px rgba(44,123,229,0) }
  100%{ box-shadow:0 0 0 0 rgba(44,123,229,0) }
}
.map-placeholder span{ color:#4a5b78; font-weight:600; }

/* Results */
.result-card{
  background:#fff; border:1px solid #edf1f5; border-radius:12px; padding:14px; box-shadow:0 10px 22px rgba(28,55,90,.06);
}
.animate-pop{ animation: pop .35s ease; }
@keyframes pop{ 0%{ transform:scale(.96); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* Footer */
.footer{
  background: linear-gradient(180deg, #0b1d36, #071526);
  color:#fff;
}
.footer-link{ color:#c7d4ea; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }
.border-white-10{ border-color:var(--white-10)!important; }
.hover-up{ transition: transform .2s ease; }
.hover-up:hover{ transform: translateY(-3px); }

/* Reveal on scroll */
[data-animate]{ opacity:0; transform: translateY(16px); transition: all .6s cubic-bezier(.2,.6,.2,1); }
[data-animate].in-view{ opacity:1; transform:none; }

/* ===== Floating Action Buttons ===== */
.fab-wrap{
  position: fixed; right: 16px; bottom: 16px; z-index: 1050;
  display: flex; flex-direction: column; gap: 10px;
}

.fab-wrap-2{
  position: fixed; left: 16px; bottom: 16px; z-index: 1050;
  display: flex; flex-direction: column; gap: 10px;
}


/* Call FAB */
.fab-call{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  background: #ffd900; color:#052b2a; border-radius: 999px;
  padding:.6rem .8rem; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(11,205,182,.35);
  transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease;
}
.fab-call:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(11,205,182,.45); }
.fab-call i{ font-size:1.1rem; }
.fab-number{
  font-weight:700; letter-spacing:.3px; position:relative;
  background: linear-gradient(90deg, #063, #021, #063);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: numberWave 2.6s ease-in-out infinite;
}
@keyframes numberWave{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%{ filter: drop-shadow(0 0 10px rgba(255,255,255,.45)); }
}

/* Back-to-top FAB */
.fab-top{
  width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: #111827; color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all .25s ease; cursor:pointer;
}
.fab-top i{ font-size:1.4rem; }
.fab-top.show{ opacity:1; visibility:visible; transform: translateY(0); }


#namava-branches .form-label{ font-weight:600; }
#namava-branches .card{ backdrop-filter:saturate(120%); }
#namava-branches .card .card-body{ padding-bottom:.75rem; }
#namava-branches .card .card-footer{ padding-top:0; }


.province {
  width: 100%;
  overflow-x: auto; /* در موبایل به جای شکستن، اسکرول داخلی کنترل شود */
}

.province table {
  width: 100%;
  min-width: 600px; /* حداقل عرض تا جدول نشکنه */
  border-collapse: collapse;
  font-family: "IRANSans", sans-serif;
  font-size: 14px;
  color: #333;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* هدر */
.province table thead th {
  background-color: #0B4887; /* رنگ هدر */
  color: #fff;
  font-weight: 600;
  text-align: right;
  padding: 12px 15px;
  white-space: nowrap; /* جلوگیری از شکستن متن */
}

/* سطر اول body رنگ متفاوت */
.province table tbody tr:first-child {
  background-color: #f1f6fb;
}

/* سلول‌ها */
.province table th,
.province table td {
  padding: 12px 15px;
  text-align: right;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* هاور */
.province table tbody tr:hover {
  background-color: #f7faff;
  transition: background 0.2s ease-in-out;
}

/* آخرین سطر بدون خط پایینی */
.province table tbody tr:last-child td {
  border-bottom: none;
}

/* واکنش‌گرا */
@media (max-width: 768px) {
  .province table {
    font-size: 13px;
    min-width: unset; /* اجازه بده جدول جمع بشه */
  }
  .province table th,
  .province table td {
    padding: 8px 10px;
  }
}




/* ===== Mobile-first compaction for hero & finder ===== */
@media (max-width: 576px){
  /* ارتفاع و فاصله‌ها */
  .na-hero .row.align-items-center { padding-top: 1.25rem; padding-bottom: .75rem; }
  .na-hero .container { padding-inline: 14px; }

  /* تایپوگرافی هیرو */
  .na-hero h1.display-5{ font-size: 1.45rem; line-height: 1.5; }
  .na-hero .lead{ font-size: .95rem; margin-top: .5rem; }

  /* دکمه‌ها */
  .na-hero .btn-lg{ padding: .5rem .75rem; font-size: .95rem; border-radius: .75rem; }
  .na-hero .d-flex.gap-2.mt-4{ gap: .5rem; margin-top: .75rem !important; }

  /* بلاب‌ها و بک‌گراند برای کاهش شلوغی */
  .na-blob{ opacity: .22; filter: blur(30px); }
  .na-blob--1{ width: 360px; height: 360px; top: -80px; inset-inline-start: -100px; }
  .na-blob--2{ width: 320px; height: 320px; bottom: -90px; inset-inline-end: -90px; }

  /* ماک‌آپ دستگاه: خیلی جا می‌گیرد؛ یا پنهانش کن یا کوچک */
  .na-device{ display: none; }          /* گزینه پیشنهادی برای کم‌اسکرول‌ترین حالت */
  /* یا اگر نمی‌خواهی کاملاً مخفی شود:
  .na-device{ transform: scale(.78); margin-top: .25rem; }
  */

  /* کارت فایندر نزدیک‌تر به بالا بیاید و فاصله اضافه نداشته باشد */
  .na-finder-wrap{
    margin-top: .5rem;     /* قبلاً 28px بود */
    transform: none;       /* حذف translateY */
  }
  .na-finder-wrap .card{
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.7);
  }

  /* فرم داخل فایندر فشرده‌تر شود */
  #na-filters .form-label{ font-size: .85rem; margin-bottom: .3rem; }
  #na-filters .form-control, #na-filters .form-select{
    padding: .45rem .6rem; font-size: .95rem; border-radius: .6rem;
  }
  #na-btn-reset.btn{ padding: .5rem .6rem; }

  /* کارت نتایج جمع‌وجور */
  .na-card{ padding: 12px; border-radius: 12px; }
  .na-card__body{ font-size: .92rem; }
}

/* تبلت: ماک‌آپ هنوز کوچک باشد تا فرم بالاتر دیده شود */
@media (min-width: 577px) and (max-width: 991.98px){
  .na-device{ transform: scale(.85); margin-top: .25rem; }
  .na-hero .row.align-items-center { padding-top: 1.75rem; padding-bottom: 1rem; }
  .na-finder-wrap{ margin-top: 10px; transform: none; }
}





