/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: 1px solid red !important; */
}

/* BASE */
body {
  font-family: "Vazirmatn", sans-serif;
  background: #fff;
  color: #0f172a;
  overflow-x: hidden;
  color: #a3a3a3;
}
i {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------------HEADER ----------------- */

/* ===========================
   HEADER (GLASS + SCROLL)
=========================== */
/* =========================================================
   HEADER + OFFCANVAS (Optimized, Solid Dark Offcanvas)
   Works with Bootstrap Offcanvas + Navbar
========================================================= */

/* --------- VARIABLES --------- */
:root {
  --ep-accent: #00a3ff;
  --ep-blue: #318fe3;

  --ep-dark: #071a33; /* offcanvas solid background */
  --ep-dark-2: #0a2140;
  --ep-text-light: rgba(255, 255, 255, 0.92);
  --ep-text-light-soft: rgba(255, 255, 255, 0.62);

  --ep-text-dark: #0f172a;
  --ep-border-light: rgba(255, 255, 255, 0.12);
  --ep-border-dark: rgba(15, 23, 42, 0.12);

  --ep-radius: 14px;
  --ep-radius-sm: 12px;

  --ep-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.35);
  --ep-shadow-md: 0 10px 22px rgba(0, 0, 0, 0.12);
}

/* --------- Z-INDEX (ALWAYS ON TOP) --------- */
.glassy-nav {
  z-index: 2147483646 !important;
}

.ep-offcanvas.offcanvas {
  z-index: 2147483647 !important;
}
/* 
.offcanvas-backdrop {
  z-index: 2147483645 !important;
} */

/* =========================================================
   HEADER
========================================================= */
.glassy-nav {
  padding: 0.55rem 0;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Optional: make header slightly readable on top of hero */
.glassy-nav:not(.scrolled) {
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: saturate(110%);
}

/* On scroll -> white */
.glassy-nav.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Brand */
.brand-logo {
  height: 40px;
  width: auto;
}

/* Nav links */
.glassy-nav .nav-link {
  font-weight: 700;
  color: #fff !important;
  position: relative;
  padding: 0.35rem 0.15rem;
  transition: color 0.25s ease;
}

.glassy-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0%;
  height: 2px;
  background: var(--ep-accent);
  transition: width 0.3s ease;
}
.glassy-nav .nav-link:hover::after {
  width: 100%;
}

/* scrolled link color */
.glassy-nav.scrolled .nav-link {
  color: #111 !important;
}

/* Desktop button */
.glassy-nav .btn-outline-glass {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  border-radius: 5px;
  font-weight: 800;
  padding: 0.45rem 0.95rem;
  transition: background 0.25s ease, border-color 0.25s ease,
    transform 0.2s ease;
}
.glassy-nav .btn-outline-glass:hover {
  background: rgba(0, 163, 255, 0.16);
  border-color: var(--ep-accent);
  /* transform: translateY(-1px); */
}

.glassy-nav.scrolled .btn-outline-glass {
  color: #111;
  background: #f2f4f7;
  border-color: rgba(0, 0, 0, 0.18);
}

/* Toggler / offcanvas trigger icon */
.ep-oc-trigger i {
  font-size: 2rem;
  color: #fff !important;
}
.glassy-nav.scrolled .ep-oc-trigger i {
  color: #318fe3 !important;
}

/* Remove bootstrap focus ring on toggler */
.glassy-nav .navbar-toggler:focus,
.glassy-nav .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

/* =========================================================
   OFFCANVAS (SOLID DARK BLUE, NOT GLASS)
========================================================= */
.ep-offcanvas {
  width: min(92vw, 380px);
  border: 0 !important;

  background: white !important;
  color: var(--ep-text-light);

  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.55);
}

/* kill any “aura” or glass leftovers */
.ep-offcanvas::before {
  content: none !important;
}
.ep-offcanvas * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Offcanvas scrollbar (nice on dark) */
.ep-offcanvas .offcanvas-body {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.ep-offcanvas .offcanvas-body::-webkit-scrollbar {
  width: 10px;
}
.ep-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Top area */
.ep-offcanvas__top {
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 14px 16px 12px;
  background: var(--ep-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo + title */
.ep-oc-logo {
  height: 28px;
  width: auto;
}
.ep-oc-title {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--ep-text-light);
}

/* Divider */
.ep-oc-divider {
  height: 1px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.1);
}

/* Close button */
.ep-oc-close {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-close:hover {
  /* transform: translateY(-1px); */
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(90, 167, 255, 0.35);
}
.ep-oc-close i {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
}

/* Body */
.ep-offcanvas__body {
  padding: 14px 16px 18px;
}

/* Auth card */
.ep-oc-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  padding: 12px 12px;
  border-radius: 5px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--ep-text-light);
  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-auth:hover {
  /* transform: translateY(-1px); */
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(90, 167, 255, 0.35);
}

.ep-oc-auth__icon {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ep-oc-auth__icon i {
  color: #5aa7ff;
  font-size: 1.1rem;
}
.ep-oc-auth__text {
  font-weight: 900;
}
.ep-oc-auth__chev {
  margin-right: auto;
  color: rgba(255, 255, 255, 0.65);
}

/* Sections */
.ep-oc-section {
  margin-top: 14px;
}
.ep-oc-section__title {
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

/* Links */
.ep-oc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  padding: 12px 12px;
  border-radius: var(--ep-radius);

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);

  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;

  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-link:hover {
  /* transform: translateY(-1px); */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(90, 167, 255, 0.35);
}
.ep-oc-link i {
  font-size: 1.05rem;
  color: #5aa7ff;
}
.ep-oc-link__chev {
  margin-right: auto;
  opacity: 0.75;
  color: rgba(255, 255, 255, 0.62);
}

/* CTA box */
.ep-oc-cta {
  margin-top: 14px;
  padding: 14px;
  border-radius: 5px;
  border: 1px solid rgba(90, 167, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

.ep-oc-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-weight: 900;
  border-radius: 14px;

  padding: 12px 14px;
  background: var(--ep-blue);
  color: #fff;

  box-shadow: 0 12px 26px rgba(49, 143, 227, 0.24);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.ep-oc-cta__btn:hover {
  /* transform: translateY(-1px); */
  filter: brightness(0.98);
}

.ep-oc-cta__hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
}

/* Backdrop (darker + premium) */
.offcanvas-backdrop.show {
  opacity: 0.78;
  background-color: #000;
}

/* =========================================================
   MOBILE POLISH
========================================================= */
@media (max-width: 991.98px) {
  /* You wanted mobile header white */
  .glassy-nav {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }

  .glassy-nav .nav-link {
    color: #111 !important;
    font-size: 1.05rem;
  }

  .glassy-nav .btn-outline-glass {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111;
  }
  .glassy-nav .btn-outline-glass:hover {
    background: #e5e7eb;
    border-color: #cbd5e1;
    color: #000;
  }

  /* toggler icon always dark on mobile */
  .ep-oc-trigger i {
    color: #111;
  }

  .brand-logo {
    height: 34px;
  }
}

@media (max-width: 420px) {
  .ep-offcanvas {
    width: 92vw;
  }
  .brand-logo {
    height: 32px;
  }
}

.ep-offcanvas.offcanvas {
  --bs-offcanvas-width: 290px !important;
  width: 290px !important;
  max-width: 88vw !important;
}
/* =========================================================
   OFFCANVAS (WHITE THEME - SOLID, NOT GLASS)
========================================================= */

:root {
  --ep-oc-bg: #ffffff;
  --ep-oc-bg-2: #f6f8fc; /* subtle section bg */
  --ep-oc-text: rgba(15, 23, 42, 0.92);
  --ep-oc-text-soft: rgba(15, 23, 42, 0.62);
  --ep-oc-border: rgba(15, 23, 42, 0.1);
  --ep-oc-border-2: rgba(15, 23, 42, 0.08);
  --ep-oc-shadow: -24px 0 70px rgba(0, 0, 0, 0.18);
}

/* ✅ Always above everything */
.glassy-nav {
  z-index: 2147483646 !important;
}
.ep-offcanvas.offcanvas {
  z-index: 2147483647 !important;
}

/* ✅ Prevent mobile full width (Bootstrap default) */
.ep-offcanvas.offcanvas {
  --bs-offcanvas-width: 290px !important;
  width: var(--bs-offcanvas-width) !important;
  max-width: 88vw !important;
}

/* Panel base */
.ep-offcanvas {
  border: 0 !important;
  background: var(--ep-oc-bg) !important;
  color: var(--ep-oc-text) !important;
  box-shadow: var(--ep-oc-shadow);
}

/* kill any “aura/glass” */
.ep-offcanvas::before {
  content: none !important;
}
.ep-offcanvas * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Scrollbar (light) */
.ep-offcanvas .offcanvas-body {
  scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
}
.ep-offcanvas .offcanvas-body::-webkit-scrollbar {
  width: 10px;
}
.ep-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Top sticky area */
.ep-offcanvas__top {
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 14px 16px 12px;
  background: var(--ep-oc-bg) !important;
  border-bottom: 1px solid var(--ep-oc-border-2);
}

/* Title text in header */
.ep-oc-title {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--ep-oc-text);
}

/* Divider */
.ep-oc-divider {
  height: 1px;
  margin: 12px 0;
  background: var(--ep-oc-border-2);
}

/* Close button (white theme) */
.ep-oc-close {
  width: 38px;
  height: 38px;
  border-radius: var(--ep-radius-sm);
  border: 1px solid var(--ep-oc-border);
  background: var(--ep-oc-bg-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-close:hover {
  /* transform: translateY(-1px); */
  background: #eef3ff;
  border-color: rgba(49, 143, 227, 0.25);
}
.ep-oc-close i {
  font-size: 1.1rem;
  color: rgba(15, 23, 42, 0.82);
}

/* Body padding */
.ep-offcanvas__body {
  padding: 14px 16px 18px;
}

/* Auth card (white theme) */
.ep-oc-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  padding: 12px 12px;
  border-radius: 5px;

  background: var(--ep-oc-bg-2);
  border: 1px solid var(--ep-oc-border);
  color: var(--ep-oc-text);

  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-auth:hover {
  /* transform: translateY(-1px); */
  background: #eef3ff;
  border-color: rgba(49, 143, 227, 0.25);
}
.ep-oc-auth__icon {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  display: grid;
  place-items: center;

  background: #ffffff;
  border: 1px solid rgba(49, 143, 227, 0.18);
}
.ep-oc-auth__icon i {
  color: var(--ep-blue);
  font-size: 1.1rem;
}
.ep-oc-auth__text {
  font-weight: 900;
  color: var(--ep-oc-text);
}
.ep-oc-auth__chev {
  margin-right: auto;
  color: rgba(15, 23, 42, 0.5);
}

/* Section titles */
.ep-oc-section {
  margin-top: 14px;
}
.ep-oc-section__title {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--ep-oc-text-soft);
  margin-bottom: 10px;
}

/* Links (white theme) */
.ep-oc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  padding: 12px 12px;
  border-radius: 5px;

  background: #ffffff;
  border: 1px solid var(--ep-oc-border);
  color: var(--ep-oc-text);

  margin-bottom: 10px;
  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}
.ep-oc-link:hover {
  /* transform: translateY(-1px); */
  background: #f2f7ff;
  border-color: rgba(49, 143, 227, 0.25);
}
.ep-oc-link i {
  font-size: 1.05rem;
  color: var(--ep-blue);
}
.ep-oc-link__chev {
  margin-right: auto;
  opacity: 0.75;
  color: rgba(15, 23, 42, 0.55);
}

/* CTA box (white theme) */
.ep-oc-cta {
  margin-top: 14px;
  padding: 14px;
  border-radius: 5px;
  border: 1px solid rgba(49, 143, 227, 0.2);
  background: linear-gradient(180deg, #f6f9ff, #ffffff);
}
.ep-oc-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  font-weight: 900;
  border-radius: 5px;

  padding: 12px 14px;
  background: var(--ep-blue);
  color: #fff;

  box-shadow: 0 12px 26px rgba(49, 143, 227, 0.22);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.ep-oc-cta__btn:hover {
  /* transform: translateY(-1px); */
  filter: brightness(0.98);
}
.ep-oc-cta__hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ep-oc-text-soft);
}

/* Backdrop (premium, not too dark) */
.offcanvas-backdrop.show {
  opacity: 0.55;
  background-color: #000;
}

/* Tiny screens */
@media (max-width: 420px) {
  .ep-offcanvas.offcanvas {
    --bs-offcanvas-width: 280px !important;
    max-width: 90vw !important;
  }
}

/* =========================
   FULL CSS (Optimized + Fully Responsive)
   - Mobile -> Tablet -> Desktop -> 4K
========================= */

/* =========================================
   RESET / TOKENS
========================================= */
/* =========================================================
   GLOBAL
========================================================= */
/* =========================================================
   0) RESET + TOKENS
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* theme */
  --brand-blue: #318fe3;
  --brand-blue-deep: #1e5fa8;

  /* text */
  --text-dark: rgba(0, 0, 0, 0.86);
  --text-soft: rgba(0, 0, 0, 0.62);

  /* borders/shadows */
  --border: rgba(163, 163, 163, 0.22);
  --border-soft: rgba(0, 0, 0, 0.08);

  /* sizing */
  --radius: 7px;
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.08);

  /* controls */
  --h-control: 46px;
  --h-adv: 42px;

  /* layout */
  --container: min(1120px, 92vw);
  --hero-pad-top: clamp(110px, 10vh, 140px);

  /* layers (keep your intent, but consistent) */
  --z-base: 1;
  --z-advanced: 2000;
  --z-dd: 12000; /* dropdown above hero layers */
  --z-dialog: 999999; /* range dialogs above all */
}

/* Optional: better motion behavior */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   1) HERO SECTION
========================================================= */
.hero-section * {
  overflow: visible !important;
}
.hero-section {
  width: 100%;
  min-height: 92vh;
  padding: var(--hero-pad-top) 0 64px;

  background: linear-gradient(
      to bottom,
      rgba(0, 10, 20, 0.62),
      rgba(49, 143, 227, 0.18)
    ),
    url("/src/img/eskanParsMainBgImg.webp") center/cover no-repeat;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
    circle at 50% 18%,
    rgba(255, 255, 255, 0.14),
    transparent 38%
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  width: var(--container);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: 14px;

  padding-inline: 10px;

  /* ✅ better responsive spacing than hard 150px */
  margin-top: clamp(72px, 9vh, 150px);
}

.hero-title {
  width: 100%;
  max-width: 980px;
  margin: 0;

  font-size: clamp(1.2rem, 2vw, 2.6rem);
  line-height: 1.55;
  font-weight: 900;
  letter-spacing: -0.4px;

  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);

  text-wrap: balance;
}

.hero-title__accent {
  color: rgba(62, 168, 255, 1);
}

/* =========================================================
   2) GLASS WRAPPER
========================================================= */
.glassyBgSearch {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;

  padding: 10px;
  border-radius: 5px;

  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(7px) saturate(170%);
  -webkit-backdrop-filter: blur(7px) saturate(170%);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

  position: relative;

  /* ✅ important for dropdowns/dialogs */
  overflow: visible;
  isolation: isolate;
}

/* =========================================================
   3) SEARCH CARD
========================================================= */
.hero-search {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  box-shadow: var(--shadow);

  position: relative;
  z-index: var(--z-base);

  /* ✅ for dropdown visibility */
  overflow: visible;
}

.hero-search:focus-within {
  border-color: rgba(49, 143, 227, 0.35);
  box-shadow: 0 14px 34px rgba(49, 143, 227, 0.12);
}

/* =========================================================
   4) TOP ROW (DESKTOP DEFAULT)
========================================================= */
.hero-search__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px;
  flex-wrap: nowrap;
  min-width: 0;

  overflow: visible;
}

/* unified heights */
.hero-search__input-wrap,
.hero-search__select,
.hero-search__icon-btn,
.hero-search__submit {
  height: var(--h-control);
}

/* input block */
.hero-search__input-col {
  flex: 1 1 520px;
  min-width: 240px;
}

.hero-search__input-wrap {
  display: flex;
  align-items: center;
  padding: 0 14px;

  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.hero-search__input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--text-dark);
}

/* select */
.hero-search__select {
  min-width: 160px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  background: #fff;
  color: var(--text-soft);
  font-size: 0.92rem;
  padding: 0 12px;

  cursor: pointer;
  appearance: none;
}

/* gear button */
.hero-search__icon-btn {
  width: var(--h-control);
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 5px;

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  transform: translateZ(0);
}

.hero-search__icon-btn:hover {
  background: rgba(49, 143, 227, 0.08);
}

.hero-search__icon {
  font-size: 1.15rem;
  color: var(--brand-blue);
  transition: transform 180ms ease, color 180ms ease;
}

.hero-search__icon-btn:active {
  transform: scale(0.98);
}

/* open state */
.hero-search__icon-btn.is-open {
  background: var(--brand-blue);
  border-color: rgba(49, 143, 227, 0.55);
  border-radius: 999px;
}

.hero-search__icon-btn.is-open .hero-search__icon {
  color: #fff;
  transform: rotate(90deg) scale(1.05);
}

/* submit button */
.hero-search__submit {
  min-width: 150px;
  border: 1px solid var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;

  border-radius: 5px;
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: filter 150ms ease;
}

.hero-search__submit:hover {
  filter: brightness(0.95);
}

/* =========================================================
   5) ADVANCED WRAP (OUT OF FLOW)
========================================================= */
.hero-advanced-wrap {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: var(--z-advanced);

  opacity: 0;
  transform: translateY(-10px) scale(0.99);
  pointer-events: none;

  transition: opacity 180ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

.hero-advanced-wrap.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hero-advanced {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  box-shadow: var(--shadow);
  padding: 12px;

  position: relative;
  overflow: visible;
}

.hero-advanced__inner {
  overflow: visible;
}

.hero-advanced__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;

  flex-wrap: nowrap;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hero-advanced__row::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.hero-field {
  flex: 0 0 180px;
  min-width: 0;
}

.hero-field.small {
  flex: 0 0 140px;
}

.hero-field__input {
  width: 100%;
  height: var(--h-adv);
  border-radius: 5px;
  border: 1px solid rgba(163, 163, 163, 0.28);
  padding: 0 12px;

  outline: none;
  box-shadow: none;
  font-size: 0.9rem;
  background: #fff;
}

.hero-search__select--adv {
  width: 100%;
  height: var(--h-adv);
  border-radius: 5px;
  border: 1px solid rgba(163, 163, 163, 0.28);
  background: #fff;
  color: rgba(0, 0, 0, 0.72);
  padding: 0 12px;
}

.hero-checks {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  flex-wrap: nowrap;
  white-space: nowrap;

  overflow: visible;
}

/* =========================================================
   6) RANGE DIALOG (FIXED)
========================================================= */
.range-wrapper {
  position: relative;
}

.filter-dialog {
  display: none;
  position: fixed;
  z-index: var(--z-dialog);

  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100vh - 140px));

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  background: #fff;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  padding: 12px;

  /* darker shadow on right/bottom */
  box-shadow: 14px 18px 38px rgba(0, 0, 0, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.28);

  direction: rtl;
  font-family: inherit;
}

.filter-dialog .dialog-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.filter-dialog .dialog-inputs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.filter-dialog .input-wrapper {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.filter-dialog .dialog-inputs input {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 5px;
  border: 1px solid #a3a3a3;
  text-align: center;
}

.filter-dialog .dialog-inputs input:focus {
  border-color: var(--brand-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(49, 143, 227, 0.18);
}

.filter-dialog .between-text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.9rem;
  color: #a3a3a3;
}

.filter-dialog .input-wrapper input {
  padding-right: 28px !important;
}

.filter-dialog .clear-inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  color: #a3a3a3;
  display: none;
}

.filter-dialog .clear-inside:hover {
  color: #d00;
}

.filter-dialog .slider-container {
  position: relative;
  height: 40px;
  margin-bottom: 10px;
}

.filter-dialog .slider-track {
  position: absolute;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #a3a3a3;
  border-radius: 999px;
  width: 100%;
  overflow: hidden;
}

.filter-dialog .slider-track::before {
  content: "";
  position: absolute;
  height: 100%;
  left: var(--fill-start, 0%);
  right: var(--fill-end, 0%);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue));
}

.filter-dialog .slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
}

.filter-dialog .slider-container input::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--brand-blue);
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.filter-dialog .dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.filter-dialog .dialog-footer button {
  width: 50%;
}

.filter-dialog.filter-dialog-sm {
  width: 240px;
  padding: 10px;
  border-radius: 5px;
}

#wholePriceDialog.filter-dialog,
#meterPriceDialog.filter-dialog {
  width: 320px;
  max-width: calc(100vw - 24px);
}

/* =========================================================
   7) PURE DROPDOWN (hero-dd)
========================================================= */
.hero-dd {
  position: relative;
  min-width: 160px;
  direction: rtl;
  overflow: visible;
}

.hero-dd__btn {
  height: var(--h-control);
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  background: #fff;
  color: var(--text-soft);
  font-size: 0.92rem;
  padding: 0 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  user-select: none;
  outline: none;
}

.hero-dd__btn:focus {
  border-color: rgba(49, 143, 227, 0.35);
  box-shadow: 0 0 0 3px rgba(49, 143, 227, 0.14);
}

.hero-dd__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-dd__chev {
  font-size: 0.85rem;
  opacity: 0.75;
  transition: transform 180ms ease;
}

.hero-dd.is-open .hero-dd__chev {
  transform: rotate(180deg);
}

.hero-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;

  display: flex;
  flex-direction: column;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding: 6px;

  z-index: var(--z-dd);

  box-shadow: 14px 18px 38px rgba(0, 0, 0, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.28);

  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms ease;
}

.hero-dd.is-open .hero-dd__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hero-dd__item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: right;

  border-radius: 5px;
  padding: 10px 12px;

  cursor: pointer;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.78);
}

.hero-dd__item:hover {
  background: rgba(49, 143, 227, 0.08);
}

.hero-dd__item.is-active {
  background: rgba(49, 143, 227, 0.12);
  color: #000;
}

/* =========================================================
   8) RESPONSIVE (MOBILE/TABLET)
========================================================= */
@media (max-width: 992px) {
  .hero-search__row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-search__input-col,
  .hero-search__select,
  .hero-dd {
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
  }

  #toggleAdvancedBtn {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    height: 44px;
    padding: 0;
    order: 80;
  }

  .hero-search__submit {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
    order: 81;
    white-space: nowrap;
  }

  .hero-advanced__row {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
  }

  .hero-field,
  .hero-field.small,
  .hero-checks {
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
  }

  .hero-checks {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  :root {
    --h-control: 44px;
    --h-adv: 42px;
  }

  .glassyBgSearch {
    padding: 8px;
  }

  .hero-search__row {
    padding: 10px;
    gap: 8px;
  }
  .value-tooltip {
    display: none;
  }
}

@media (min-width: 1400px) {
  :root {
    --h-control: 52px;
    --h-adv: 46px;
    --radius: 14px;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
    --container: min(1320px, 92vw);
    --hero-pad-top: clamp(130px, 12vh, 180px);
  }

  .hero-section {
    min-height: 94vh;
    padding: var(--hero-pad-top) 0 80px;
  }

  .hero-title {
    max-width: 1320px;
    font-size: clamp(1.8rem, 1.7vw, 3.1rem);
    line-height: 1.45;
  }

  .glassyBgSearch {
    max-width: 1320px;
    padding: 12px;
  }

  .hero-search__row {
    gap: 12px;
    padding: 14px;
  }

  .hero-search__input {
    font-size: 1rem;
  }

  .hero-search__select {
    min-width: 180px;
    font-size: 0.95rem;
  }

  .hero-search__submit {
    min-width: 170px;
    font-size: 1rem;
  }

  .hero-field {
    flex: 0 0 200px;
  }
  .hero-field.small {
    flex: 0 0 160px;
  }

  .hero-field__input,
  .hero-search__select--adv {
    font-size: 0.95rem;
  }
}
/* 
@media (min-width: 1920px) {
  :root {
    --container: min(1480px, 88vw);
  }

  .hero-title {
    max-width: 1480px;
    font-size: clamp(2rem, 1.5vw, 3.4rem);
  }

  .glassyBgSearch {
    max-width: 1480px;
  }
} */

/* =========================================================
   9) VALUE TOOLTIP (BIGGER + BLUE)
========================================================= */
.value-tooltip {
  position: fixed;
  z-index: var(--z-dialog);
  pointer-events: none;

  max-width: min(92vw, 520px);
  padding: 10px 14px;

  background: linear-gradient(
    135deg,
    var(--brand-blue),
    var(--brand-blue-deep)
  );
  color: #fff;

  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);

  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.value-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

.value-tooltip__label {
  display: inline-block;
  margin-left: 6px;
  opacity: 0.9;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.value-tooltip__value {
  font-weight: 800;
  color: #fff;
}

/* =========================================================
   OPTIONAL: Force title to one line (ellipsis)
   (Uncomment if you REALLY want one-line always)
========================================================= */
/*
.hero-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
*/
/* ------------------- HERO SECTION ------------- */

/* -------------- special files ------------------ */

:root {
  --ep-blue: #318fe3;

  --ep-bg: #f7faff;
  --ep-card: #ffffff;

  --ep-text: rgba(15, 23, 42, 0.92);
  --ep-soft: rgba(15, 23, 42, 0.62);
  --ep-gray: #a3a3a3;

  --ep-border: rgba(15, 23, 42, 0.1);
  --ep-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

  --ep-radius: 12px;

  /* Responsive sizing */
  --ep-img-h: clamp(150px, 16vw, 205px);
  --ep-pad: clamp(12px, 1.2vw, 16px);

  --ep-title: clamp(1.25rem, 2vw, 1.95rem);
  --ep-sub: clamp(0.95rem, 1.1vw, 1.15rem);
}

/* =========================
   SECTION
========================= */
.ep-special-files {
  background: var(--ep-bg);
  border-top: 1px solid #e3eefb;
  border-bottom: 1px solid #e3eefb;
  overflow: hidden;
}

/* better container feel on large screens (still Bootstrap-friendly) */
.ep-special-files .container {
  max-width: 1240px;
}

/* Title / subtitle */
.ep-title {
  font-size: var(--ep-title);
  color: #0f172a;
  line-height: 1.45;
  margin-inline: auto;
  max-width: 46ch;
  text-wrap: balance;
}

.ep-subtitle {
  font-size: var(--ep-sub);
  line-height: 1.9;
  color: #7f7f7f;
  margin-inline: auto;
  max-width: 64ch;
}

.text-brand {
  color: var(--ep-blue) !important;
}

/* =========================
   CARD
========================= */
.ep-card.card {
  border-radius: 5px;
  border: 1px solid var(--ep-border);
  overflow: hidden;
  background: var(--ep-card);
  box-shadow: var(--ep-shadow);

  height: 100%;
  display: flex;
  flex-direction: column;

  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ep-card:hover {
    /* transform: translateY(-4px); */
    border-color: rgba(49, 143, 227, 0.45);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  }
}

/* =========================
   MEDIA (Image)
========================= */
.ep-card__media {
  position: relative;
  overflow: hidden;
}

.ep-card__img {
  width: 100%;
  height: var(--ep-img-h);
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.25s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ep-card:hover .ep-card__img {
    filter: brightness(0.88);
    /* transform: scale(1.03); */
  }
}

/* subtle gradient for readability */
.ep-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}

/* =========================
   ICONS ON IMAGE (optional)
========================= */
.ep-card__icons {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;

  display: flex;
  gap: 8px;
}

.ep-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(49, 143, 227, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

.ep-icon-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (hover: hover) and (pointer: fine) {
  .ep-icon-btn:hover {
    background: rgba(49, 143, 227, 0.78);
    /* transform: translateY(-1px); */
  }
}

/* =========================
   BODY
========================= */
.ep-card__body {
  padding: var(--ep-pad);
  text-align: right;

  /* keep bottom meta aligned */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Title */
.ep-card__title {
  margin: 0;
  font-size: clamp(0.98rem, 1vw, 1.05rem);
  font-weight: 900;
  color: var(--ep-text);
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Address */
.ep-card__address {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ep-gray);
  min-width: 0;
}

.ep-card__address i {
  color: var(--ep-blue);
  flex: 0 0 auto;
  margin-top: 2px;
}

.ep-card__address-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7f7f7f !important;
}

/* =========================
   SPECS
========================= */
.ep-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ep-spec {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;

  font-size: 0.9rem;
  color: var(--ep-soft);
}

.ep-spec img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.ep-spec span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black !important;
}

/* =========================
   PRICES
========================= */
.ep-card__prices {
  display: grid;
  gap: 6px;
}

.ep-price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.ep-price-label {
  font-weight: 800;
  color: #7f7f7f;
  white-space: nowrap;
}

.ep-price-value {
  font-weight: 900;
  color: var(--ep-text);
  white-space: nowrap;
  text-align: left;
}

/* HR */
.ep-card__hr {
  margin: 6px 0 0;
  opacity: 0.12;
}

/* =========================
   META (sticks to bottom)
========================= */
.ep-card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ep-chip {
  font-size: 0.78rem;
  color: #7f7f7f;
  border-radius: 5px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* =========================
   RESPONSIVE TUNING
========================= */

/* Phones: better centered feel */
@media (max-width: 575.98px) {
  .ep-special-files .container {
    padding-inline: 14px;
  }

  .ep-card__body {
    text-align: right;
  }

  .ep-card__address {
    justify-content: right;
  }

  .ep-card__address-text {
    max-width: 100%;
  }

  .ep-card__specs {
    grid-template-rows: 3fr;
    gap: 8px;
    justify-items: right;
  }

  .ep-price-row {
    flex-wrap: wrap;
    justify-content: right;
  }

  .ep-price-value {
    text-align: right;
  }

  .ep-card__meta {
    justify-content: right;
  }

  .ep-card__icons {
    top: 8px;
    left: 8px;
  }
}

/* Tablets: slightly more spacing */
@media (min-width: 576px) and (max-width: 991.98px) {
  .ep-card__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Big screens: wider container, slightly larger image and padding */
@media (min-width: 1400px) {
  :root {
    --ep-img-h: clamp(190px, 14vw, 235px);
    --ep-pad: 16px;
  }

  .ep-special-files .container {
    max-width: 1320px;
  }
}

/* Very big screens: avoid tiny cards on 2K/4K */
@media (min-width: 1920px) {
  .ep-special-files .container {
    max-width: 1480px;
  }

  .ep-title {
    max-width: 52ch;
  }
}
/* --------------- special files ------------------- */

/* ----------------- why eskan pars ------------------ */

/* =========================
  WHY ESKANPARS (FULL CSS)
  - Fully responsive
  - Centered content
  - Balanced typography
  - Minimal + premium glass
========================= */

:root {
  --eskan-blue-1: #2e7fd0;
  --eskan-blue-2: #2b6fb6;
  --eskan-blue-3: #1f4f85;

  --eskan-accent-green: rgba(74, 222, 128, 0.9);
  --eskan-accent-teal: rgba(45, 212, 191, 0.8);

  --eskan-text: rgba(255, 255, 255, 0.92);
  --eskan-text-soft: rgba(255, 255, 255, 0.78);

  --eskan-card: rgba(10, 18, 32, 0.62);
  --eskan-card-hover: rgba(10, 18, 32, 0.82);

  --eskan-border: rgba(255, 255, 255, 0.16);
  --eskan-shadow: 0 18px 40px rgba(10, 20, 40, 0.35);
  --eskan-radius: 18px;
}

/* =========================
  SECTION
========================= */
.eskan-why {
  width: 100%;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0;

  background: radial-gradient(
      1200px 600px at 20% 10%,
      rgba(255, 255, 255, 0.14),
      transparent 55%
    ),
    radial-gradient(
      900px 520px at 80% 25%,
      rgba(74, 222, 128, 0.14),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      var(--eskan-blue-1) 0%,
      var(--eskan-blue-2) 45%,
      var(--eskan-blue-3) 100%
    );

  position: relative;
  overflow: hidden;
  color: var(--eskan-text);
  isolation: isolate;
}

.eskan-why::before,
.eskan-why::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

.eskan-why::before {
  background: radial-gradient(
    circle at 40% 35%,
    rgba(255, 255, 255, 0.16),
    transparent 55%
  );
  transform: rotate(12deg);
}

.eskan-why::after {
  background: radial-gradient(
    circle at 60% 60%,
    rgba(45, 212, 191, 0.18),
    transparent 58%
  );
  transform: rotate(-10deg);
}

.eskan-why .container-xxl {
  position: relative;
  z-index: 1;
}

/* =========================
  HEADER
========================= */
.eskan-why__head {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
}

.eskan-why__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.6px;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.eskan-why__subtitle {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  color: white;
  line-height: 1.95;

  max-width: 62ch;
  text-wrap: balance;
}

/* =========================
  GRID
========================= */
.eskan-why__grid {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

/* =========================
  CARD
========================= */
.eskan-feature {
  position: relative;

  height: 100%;
  border-radius: 5px;
  padding: clamp(1.15rem, 1.8vw, 1.65rem) clamp(1rem, 1.6vw, 1.35rem);

  text-align: center;
  color: var(--eskan-text);

  background: var(--eskan-card);
  border: 1px solid var(--eskan-border);

  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);

  box-shadow: var(--eskan-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  transform: translateZ(0);
}

.eskan-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.38),
    rgba(49, 143, 227, 0.55),
    rgba(74, 222, 128, 0.55)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.eskan-feature > * {
  position: relative;
  z-index: 1;
}

/* hover only non-touch */
@media (hover: hover) and (pointer: fine) {
  .eskan-feature:hover {
    background: var(--eskan-card-hover);
    box-shadow: 0 24px 55px rgba(8, 18, 36, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* transform: translateY(-4px); */
  }

  .eskan-feature:hover::before {
    opacity: 1;
  }
}

/* keyboard focus */
.eskan-feature:focus-within {
  outline: 0;
  box-shadow: 0 24px 55px rgba(8, 18, 36, 0.55),
    0 0 0 3px rgba(49, 143, 227, 0.22);
}

/* =========================
  ICON
========================= */
.eskan-feature__icon-wrap {
  width: clamp(72px, 7vw, 124px);
  height: clamp(72px, 7vw, 124px);

  border-radius: 999px;

  display: grid;
  place-items: center;

  background: #fff;

  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  flex: 0 0 auto;
  margin-bottom: 2px;
}

.eskan-feature__icon-wrap img {
  width: clamp(34px, 3.6vw, 74px);
  height: clamp(34px, 3.6vw, 74px);
  object-fit: contain;
}
.eskan-feature__icon-wrap.support img {
  width: clamp(68px, 4.3vw, 109px);
  height: clamp(68px, 4.3vw, 109px);
  object-fit: contain;
}

/* =========================
  TEXTS
========================= */
.eskan-feature__title {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  font-weight: 900;
  letter-spacing: -0.2px;
}

.eskan-feature__text {
  margin: 0;

  font-size: clamp(0.88rem, 1vw, 0.94rem);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.84);

  max-width: 48ch;
  text-wrap: pretty;

  /* ✅ prevent super tall cards on desktop by clamping */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ✅ desktop clamp (keeps grid balanced) */
@media (min-width: 992px) {
  .eskan-feature__text {
    -webkit-line-clamp: 7;
  }
}

/* ✅ tablet clamp */
@media (min-width: 576px) and (max-width: 991.98px) {
  .eskan-feature__text {
    -webkit-line-clamp: 8;
    max-width: 60ch;
  }
}

/* ✅ mobile: no clamp (readable), more spacing */
@media (max-width: 575.98px) {
  .eskan-why {
    padding: 2.6rem 0 3.2rem;
  }

  .eskan-why__subtitle {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  .eskan-feature {
    padding: 1.25rem 1rem;
    border-radius: 5px;
  }

  .eskan-feature__text {
    -webkit-line-clamp: unset;
    overflow: visible;
    max-width: 100%;
    font-size: 0.86rem;
    line-height: 1.9;
  }
}

/* ✅ ultra small devices */
@media (max-width: 360px) {
  .eskan-feature__icon-wrap {
    width: 68px;
    height: 68px;
  }
  .eskan-feature__title {
    font-size: 0.98rem;
  }
}

/* ------------------ why eskan pars ------------------ */

/* -------------------- app intro ----------------------- */

:root {
  --brand-blue: #318fe3;
  --brand-blue-2: #4ba8ff;

  --text-dark: #0f172a;
  --text-soft: rgba(15, 23, 42, 0.62);

  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(148, 163, 184, 0.35);
  --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.12);

  --radius-card: 20px;
  --radius-video: 26px;

  --video-max: 520px;
  --circle-size: 430px;
}

/* =========================
  SECTION
========================= */
.app-intro {
  padding: clamp(2.6rem, 6vw, 5rem) 0;

  background: radial-gradient(
    circle at top left,
    #e0f2ff 0,
    #f8fafc 45%,
    #eef2ff 100%
  );
  overflow: hidden;
}

/* ensure everything feels centered */
.app-intro .container-xxl {
  position: relative;
}

/* =========================
  TEXT SIDE
========================= */
.app-intro__text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ center box within column */
}

.app-intro-box {
  width: min(620px, 100%);
  border-radius: 5px;
  padding: clamp(1.25rem, 2vw, 2rem);

  display: flex;
  flex-direction: column;
  gap: 10px;

  text-align: inherit; /* controlled by text-center/text-lg-end in HTML */
}

.app-intro__title {
  margin: 0;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.3px;
  line-height: 1.6;

  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
}

.app-intro__desc {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.9;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-weight: 700;
  text-decoration: none;

  color: var(--brand-blue);
}
.more-link:hover {
  text-decoration: underline;
}

.app-intro__cta {
  display: flex;
  justify-content: center;
}
@media (min-width: 992px) {
  .app-intro__cta {
    justify-content: flex-end; /* ✅ align with RTL end on desktop */
  }
}

/* button */
.app-intro .btn-brand {
  background: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  color: #fff;

  border-radius: 5px;
  font-size: 0.95rem;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.75rem 1.1rem;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-shadow: none;
}

.app-intro .btn-brand:hover {
  filter: brightness(0.95);
}
.app-intro .btn-brand:active {
  /* transform: translateY(1px); */
}

/* =========================
  MEDIA SIDE
========================= */
.app-intro__media {
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center; /* ✅ center video in column */

  min-height: 260px;
  padding: 8px 0;
}

/* background circle */
.video-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 999px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle at 30% 30%,
    var(--brand-blue-2),
    var(--brand-blue)
  );
  filter: drop-shadow(0 18px 45px rgba(49, 143, 227, 0.35));
  opacity: 0.95;

  z-index: 0;
  animation: floatCircle 8s ease-in-out infinite;
}

/* video frame */
.app-video-landscape {
  position: relative;
  z-index: 1;

  width: min(var(--video-max), 100%);
  aspect-ratio: 16 / 9;

  border-radius: 5px;
  overflow: hidden;

  background: #020617;
  border: 4px solid #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);

  transform: translateZ(0);
}

/* subtle gradient ring */
.app-video-landscape::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(49, 143, 227, 0.9),
    rgba(45, 212, 191, 0.85)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

.app-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* circle float */
@keyframes floatCircle {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-14px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

/* =========================
  RESPONSIVE
========================= */
@media (max-width: 991.98px) {
  :root {
    --circle-size: 300px;
    --video-max: 420px;
    --radius-video: 22px;
  }

  .app-intro__text {
    text-align: center;
  }

  .app-intro-box {
    margin: 0 auto;
  }

  .app-intro__cta {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  :root {
    --circle-size: 260px;
    --video-max: 320px;
    --radius-video: 18px;
  }

  .app-intro-box {
    width: 100%;
  }

  /* button full width on small */
  .app-intro .btn-brand {
    width: 100%;
  }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .video-circle {
    animation: none;
  }
  .app-intro .btn-brand {
    transition: none;
  }
}

/* base */
.reveal {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* directions */
.reveal-left {
  transform: translateX(-128px);
}
.reveal-right {
  transform: translateX(128px);
}
.reveal-up {
  transform: translateY(18px);
} /* optional if needed */

/* stagger */
.reveal--delay-1 {
  transition-delay: 0.08s;
}
.reveal--delay-2 {
  transition-delay: 0.16s;
}
.reveal--delay-3 {
  transition-delay: 0.24s;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ----------------------- app intro --------------------------- */

/* -------------------------- packages ---------------------------- */
/* =========================
  PACKAGES (FULL CSS)
  - Fully responsive
  - Cleaner typography
  - Better alignment on small screens
  - Featured plan highlight
========================= */

:root {
  --p-bg-1: #eef3fb;
  --p-bg-2: #f9fafb;
  --p-bg-3: #ffffff;

  --p-text: #0f172a;
  --p-soft: rgba(15, 23, 42, 0.62);

  --p-blue: #3490e3;
  --p-blue-2: #2779bd;

  --p-border: #e5e7eb;
  --p-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  --p-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.12);

  --p-radius: 14px;
  --p-radius-img: 999px;
}

/* =========================
  SECTION
========================= */
.packages {
  padding: clamp(2.6rem, 6vw, 4.2rem) 0;
  background: radial-gradient(
    circle at top,
    var(--p-bg-1) 0,
    var(--p-bg-2) 45%,
    var(--p-bg-3) 100%
  );
}

.packages__head {
  max-width: 920px;
  margin: 0 auto;
}

.packages-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #111;
  letter-spacing: -0.3px;
  margin: 0;
}

.packages-subtitle {
  color: #7f7f7f;
  line-height: 1.9;
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  margin: 0 auto;
  max-width: 72ch;
  padding-inline: 10px;
}

/* add spacing between header and grid */
.packages__grid {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

/* =========================
  CARD
========================= */
.pack-card {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 5px;
  padding: 1.5rem 1.25rem;

  display: flex;
  flex-direction: column;
  gap: 14px;

  height: 100%;
  box-shadow: var(--p-shadow);
  position: relative;
  overflow: hidden;

  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

/* subtle top glow line */
.pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* only show a thin top gradient */
  background: linear-gradient(
      90deg,
      rgba(52, 144, 227, 0.65),
      rgba(39, 121, 189, 0.25)
    )
    top/100% 3px no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* hover on non-touch */
@media (hover: hover) and (pointer: fine) {
  .pack-card:hover {
    box-shadow: var(--p-shadow-hover);
    border-color: rgba(52, 144, 227, 0.55);
  }
  .pack-card:hover::before {
    opacity: 1;
  }
}

/* Top block keeps elements centered nicely */
.pack-top {
  text-align: center;
}

/* =========================
  FEATURED CARD
========================= */
.pack-card--featured {
  background: linear-gradient(145deg, #3490e3, #2779bd);
  border-color: transparent;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.28);
}

.pack-card--featured::before {
  opacity: 1; /* keep glow line */
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.18)
    )
    top/100% 3px no-repeat;
}

.pack-badge {
  position: absolute;
  top: 12px;
  left: 12px; /* RTL-friendly "start" visually */
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

/* =========================
  IMAGE
========================= */
.pack-img {
  width: clamp(74px, 18vw, 112px);
  height: clamp(74px, 18vw, 112px);
  object-fit: cover;

  border-radius: 5px;
  margin: 0 auto 12px;

  background: #fff;
}

/* featured image ring */
.pack-card--featured .pack-img {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* =========================
  TEXT
========================= */
.pack-title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #111827;
}

.pack-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(17, 24, 39, 0.62);
}

/* invert texts in featured */
.pack-card--featured .pack-title,
.pack-card--featured .pack-subtitle {
  color: rgba(255, 255, 255, 0.96);
}

/* =========================
  LIST
========================= */
.pack-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* each row: label + value */
.pack-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding-top: 8px;
  border-top: 1px dashed rgba(229, 231, 235, 0.9);

  font-size: 0.92rem;
  color: rgba(17, 24, 39, 0.78);
}

.pack-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.pack-list li span {
  color: rgba(17, 24, 39, 0.62);
}

.pack-list li strong {
  font-weight: 900;
  color: #111827;
}

/* featured list */
.pack-card--featured .pack-list li {
  border-top-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}
.pack-card--featured .pack-list li span {
  color: rgba(255, 255, 255, 0.75);
}
.pack-card--featured .pack-list li strong {
  color: #fff;
}

/* =========================
  BUTTON
========================= */
.pack-btn {
  margin-top: auto;

  background: var(--p-blue);
  color: #fff;
  border: none;

  border-radius: 5px;
  padding: 0.7rem 1rem;
  font-weight: 900;
  font-size: 0.95rem;

  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pack-btn i {
  font-size: 1.05rem;
}

.pack-btn:hover {
  background: var(--p-blue-2);
  box-shadow: none;
}

/* featured button (inverted) */
.pack-card--featured .pack-btn {
  background: #fff;
  color: #0f172a;
  box-shadow: none;
}
.pack-card--featured .pack-btn:hover {
  background: #f3f4f6;
  box-shadow: none;
}

/* =========================
  RESPONSIVE
========================= */

/* tablets */
@media (max-width: 991.98px) {
  .pack-card {
    padding: 1.35rem 1.1rem;
    border-radius: 5px;
  }
  .pack-title {
    font-size: 1.05rem;
  }
  .pack-subtitle,
  .pack-list li {
    font-size: 0.9rem;
  }
}

/* phones */
@media (max-width: 575.98px) {
  .packages {
    padding: 2.6rem 0;
  }

  .pack-card {
    padding: 1.15rem 1rem;
  }

  /* better readability: center + stack list rows */
  .pack-list li {
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 4px;

    /* border-top: none; */
    padding-top: 0;
  }

  .pack-list {
    gap: 8px;
  }

  .pack-btn {
    font-size: 0.92rem;
    padding: 0.65rem 0.9rem;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pack-card,
  .pack-btn {
    transition: none;
  }
}
/* ---------------------------- packages ----------------------------- */

/* ------------------------------- footer ------------------------------ */

.soft-footer {
  background: radial-gradient(
    circle at top,
    #f9fafb 0,
    #f2f3f5 45%,
    #e5e7eb 100%
  );
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  color: #4b5563;
  font-size: 0.9rem;
}

/* روی هر چیزی داخل فوتر، رنگ متن را کنترل می‌کنیم */
.soft-footer * {
  color: inherit;
}

/* عنوان هر ستون */
.soft-footer-title {
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  font-weight: 800;
  color: #111827;
}

/* لینک‌ها */
.soft-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.soft-footer-links li {
  margin-bottom: 0.45rem;
}

.soft-footer-links a {
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.15s ease;
}

.soft-footer-links a:hover {
  color: #111827;
  transform: translateX(-2px);
}

/* لوگو و شبکه اجتماعی */
.soft-footer .col:first-child p {
  color: #6b7280;
}

/* آیکن شبکه اجتماعی در دایره ملایم */
.footer-social-icon {
  font-size: 1.4rem;
  color: #4b5563;
  transition: color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e5e7eb;
}

.footer-social-icon:hover {
  color: #000;
  /* transform: translateY(-1px); */
}

/* دکمه دانلود اپ */
.soft-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.6rem;
  background: #3490e3;
  color: #ffffff;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  width: auto;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.soft-download-btn i {
  font-size: 1rem;
}

.soft-download-btn:hover {
  background: #2677c6;
  /* transform: translateY(-2px); */
  box-shadow: none;
}

/* پایین فوتر */
.soft-footer-bottom {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.8;
}

/* خط بالای بخش پایینی کمی ملایم‌تر */
.soft-footer-bottom.border-top {
  border-color: #e5e7eb !important;
}

/* ========= Responsive Tweaks ========= */

/* تراز بهتر روی تبلت و موبایل */
@media (max-width: 991.98px) {
  .soft-footer .row > .col {
    text-align: center;
  }

  .soft-footer img[alt="لوگو"] {
    margin: 0 auto 0.75rem;
    display: block;
  }

  .soft-footer .col:nth-child(4) img {
    max-width: 120px;
    margin: 0 auto;
    display: block;
  }

  .soft-download-btn {
    width: 100%;
    justify-content: center;
  }
}

/* موبایل خیلی کوچک */
@media (max-width: 575.98px) {
  .soft-footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .soft-footer-title {
    margin-top: 0.5rem;
  }

  .soft-footer .row {
    row-gap: 1.5rem;
  }
}

/* --------------------------------- footer ------------------------------- */

/* =================== cart slider ================== */

:root {
  --ep-blue: #318fe3;
  --ep-gray: #a3a3a3;
  --ep-ink: #0b1220;
  --ep-bg: #ffffff;

  /* derived only from your blue/gray */
  --ep-blue-weak: rgba(49, 143, 227, 0.12);
  --ep-blue-mid: rgba(49, 143, 227, 0.22);
  --ep-gray-weak: rgba(163, 163, 163, 0.18);
  --ep-gray-mid: rgba(163, 163, 163, 0.35);

  --ep-shadow: 0 14px 40px rgba(2, 8, 23, 0.08);
  --ep-shadow-hover: 0 18px 54px rgba(2, 8, 23, 0.12);
}

/* =========================
   Carousel wrapper
========================= */
.ep-feature-carousel {
  margin-top: clamp(28px, 4vw, 80px);
  direction: rtl; /* keep RTL safe */
}

/* Center slide content */
.ep-feature-slide {
  display: flex;
  justify-content: center;
  align-items: stretch; /* better for variable content height */
  padding: clamp(10px, 2vw, 18px) clamp(8px, 2vw, 14px) clamp(28px, 4vw, 52px);
}

/* =========================
   Card (responsive)
========================= */
.ep-feature-card {
  /* big but safe */
  width: min(92vw, 1180px);
  background: var(--ep-bg);
  border: 1px solid rgba(163, 163, 163, 0.28);
  border-radius: 5px;
  box-shadow: var(--ep-shadow);
  position: relative;
  overflow: hidden;

  /* layout */
  padding: clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  /* prevent accidental text overflow */
  min-height: unset;
  height: auto;
}

/* top accent line (blue only) */

/* =========================
   Icon (your image icons are big)
========================= */
.ep-feature-card__icon {
  width: clamp(110px, 18vw, 220px);
  height: clamp(110px, 18vw, 220px);
  border-radius: 5px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  flex: 0 0 auto;
}

.ep-feature-card__icon img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
}

/* =========================
   Title
========================= */
.ep-feature-card__title {
  margin: 0;
  margin-bottom: 30px;
  text-align: center;
  color: var(--ep-ink);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.85;
  max-width: 980px;
}

/* =========================
   Text rows (RTL + bullet icon)
========================= */
.ep-feature-card__text {
  margin: 0;
  width: 100%;
  max-width: 980px;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  color: rgba(11, 18, 32, 0.78);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 2.05;

  /* long words safety */
  overflow-wrap: anywhere;
}

.ep-feature-card__text i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--ep-blue);
  background: var(--ep-blue-weak);
  border: 1px solid rgba(49, 143, 227, 0.22);

  font-size: 1.2rem;
  margin-top: 2px;
}

/* =========================
   Indicators (gray -> blue)
========================= */
.ep-feature-carousel .carousel-indicators {
  margin-bottom: 8px; /* visible, not negative */
  gap: 10px;
}

.ep-feature-carousel .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 999px;

  background: transparent;
  border: 2px solid rgba(163, 163, 163, 0.55);
  opacity: 1;
  margin: 0;
}

.ep-feature-carousel .carousel-indicators .active {
  background: var(--ep-blue);
  border-color: var(--ep-blue);
}

/* =========================
   Controls (always on-screen)
   NOTE: Your HTML swapped prev/next icons.
   We style the button itself, not rely on icon classes.
========================= */
.ep-feature-carousel .carousel-control-prev,
.ep-feature-carousel .carousel-control-next {
  width: 54px;
  height: 54px;

  top: 50%;
  transform: translateY(-50%);
  opacity: 1;

  /* make them easy to click */
  padding: 0;
}

/* keep them inside viewport */
.ep-feature-carousel .carousel-control-prev {
  left: -52px;
  right: auto;
}
.ep-feature-carousel .carousel-control-next {
  right: -52px;
  left: auto;
}

.ep-feature-carousel .carousel-control-prev-icon,
.ep-feature-carousel .carousel-control-next-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #318fe3;
  border: 1px solid rgba(49, 143, 227, 0.35);
  box-shadow: var(--ep-shadow);
  background-size: 18px 18px;
  filter: none;
  transition: box-shadow 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}

.ep-feature-carousel .carousel-control-prev-icon:hover,
.ep-feature-carousel .carousel-control-next-icon:hover {
  border-color: rgba(49, 143, 227, 0.7);
  box-shadow: var(--ep-shadow-hover);
}

.ep-feature-carousel .carousel-control-prev:active .carousel-control-prev-icon,
.ep-feature-carousel .carousel-control-next:active .carousel-control-next-icon {
  transform: scale(0.97);
}

/* =========================
   Responsive tweaks
========================= */

/* Tablet: slightly tighter */
@media (max-width: 991.98px) {
  .ep-feature-card {
    width: min(94vw, 980px);
  }
  .ep-feature-carousel .carousel-control-prev,
  .ep-feature-carousel .carousel-control-next {
    width: 50px;
    height: 50px;
  }
  .ep-feature-carousel .carousel-control-prev-icon,
  .ep-feature-carousel .carousel-control-next-icon {
    width: 50px;
    height: 50px;
  }
}

/* Mobile: reduce padding and keep readability */
@media (max-width: 575.98px) {
  .ep-feature-slide {
    padding: 10px 8px 44px;
  }

  .ep-feature-card {
    width: 94vw;
    padding: 16px 14px;
    border-radius: 5px;
  }

  .ep-feature-card__text i {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}

/* ✅ disabled state for "اجاره" field when رهن کامل */
.hero-field.is-disabled {
  opacity: 0.55;
  pointer-events: none; /* disables click/open dialog */
}
.hero-field.is-disabled .hero-field__input {
  background: #f3f4f6;
  cursor: not-allowed;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .ep-price-row {
    width: 95%;
  }
}
@media (min-width: 1200px) and (max-width: 1410px) {
  .ep-price-row {
    width: 100%;
  }
}

@media (min-width: 1411px) {
  .ep-price-row {
    width: 90%;
  }
}

.btn-more-files {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-more-files:hover {
  background-color: #2579c9; /* کمی تیره‌تر */
  box-shadow: 0 14px 28px rgba(49, 143, 227, 0.35);
  filter: brightness(1.05);
}