.elementor-57720 .elementor-element.elementor-element-cf716f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-57720 .elementor-element.elementor-element-7943f2b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-widget-heading.elementor-widget-heading .elementor-heading-title a:hover{color:var( --e-global-color-primary );}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-57720 .elementor-element.elementor-element-81fc0f5{--iteration-count:infinite;--animation-duration:1200ms;width:100%;max-width:100%;--dynamic-text-color:var( --e-global-color-primary );}.elementor-57720 .elementor-element.elementor-element-81fc0f5 .elementor-headline{text-align:center;font-size:35px;}.elementor-57720 .elementor-element.elementor-element-81fc0f5 .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-efc3c6d );}/* Start custom CSS for html, class: .elementor-element-75efb77 */:root {
  --brand-1:#0056d2;
  --brand-2:#0056d2;
  --accent:#00C0A0;
  --bg:#f7f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --card:#fff;
  --ring:rgba(0,86,210,0.15);
  --border:#e9eef6;
  --radius:18px;
  --shadow:0 10px 25px rgba(2,8,23,.06),0 2px 6px rgba(2,8,23,.04);
}

* { box-sizing: border-box; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
}
.wrap { max-width:1200px; margin:20px auto; padding:0 20px 64px; }

/* === HERO === */
.hero {
  background:linear-gradient(135deg,#fff,#f2f6ff 60%,#fff);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  padding:22px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow);
}
.hero h2 {
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--text);
}
.hero h2 span { color:var(--brand-1); }

/* === GRID (DESKTOP DEFAULT) === */
.grid {
  margin-top:15px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  justify-items:center;
}

/* === CARD BASE === */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  width:200px;
  height:250px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  text-decoration:none;
  color:inherit;
    position:relative;
    justify-content:flex-start;
    order:1; 
  }

  .card .info {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    flex-grow:1;
    justify-content:center;
    gap:2px;
  }

  .card .chip {
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-60%);
    margin:0 !important;
  }

.card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(2,8,23,.1);
  border-color:var(--accent);
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(2,8,23,.1);
  border-color:var(--accent);
}
.head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.avatar {
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--card);
  outline:5px solid var(--ring);
  background:#e8eefb;
}
.title { font-weight:700; font-size:15px; text-align:center; }
.meta { font-size:12px; color:var(--muted); text-align:center; margin-top:1px; }
.chip {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:var(--brand-1);
  padding:6px 10px;
  border-radius:10px;
}

/* === CTA CARD === */
.grid .cta { margin-top:1px; }
.cta {
  width:200px;
  height:250px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:conic-gradient(from 0deg at 50% 50%,rgba(0,86,210,.07),rgba(171,21,0,.07) 50%,rgba(0,86,210,.07) 100%);
  border:1px dashed #cbd5e1;
  border-radius:var(--radius);
  transition:background .3s ease,color .3s ease;
  color:var(--brand-1);
  grid-column:3;
}
.cta:hover { background:rgba(0,192,160,0.08); color:var(--accent); }
.cta-title { font-size:18px; font-weight:700; margin:10px 0; color:var(--brand-1); }
.cta:hover .cta-title { color:var(--accent); }
.cta p { font-size:13px; color:var(--muted); margin:0 0 12px; }
.btn {
  display:inline-block;
  background:var(--brand-1);
  color:#fff;
  text-decoration:none;
  padding:8px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
}
.btn:hover { background:#0049b5; }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* فاصله بیشتر در دسکتاپ برای نظم کارت‌های اطراف CTA */
.grid .card:nth-child(6),
.grid .card:nth-child(7),
.grid .card:nth-child(9),
.grid .card:nth-child(10) {
  margin-top:1px;
}
/* === MOBILE VIEW === */
@media(max-width:768px) {
  .grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 10px;
    justify-items:center;
  }

  /* === کارت‌ها و CTA === */
  .card,
  .cta,
  .load-more {
    width:100%;
    max-width:100%;
    min-height:300px;
  }

  .card {
    display:flex;
    flex-direction:column;
    padding:20px;
    position:relative;
    justify-content:flex-start;
    order:1; 
  }

  .card .info {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    flex-grow:1;
    justify-content:center;
    gap:2px;
  }

  .card .chip {
    position:absolute;
    bottom:12px;
    left:30%;
    transform:translateX(-15%);
    margin:0 !important;
  }
  /* --- ۶ کارت اول --- */
  .grid .card:nth-of-type(1),
  .grid .card:nth-of-type(2),
  .grid .card:nth-of-type(3),
  .grid .card:nth-of-type(4),
  .grid .card:nth-of-type(5),
   {
    order:1;
  }

  /* --- کارت CTA بعد از ۶ کارت اول --- */
  .grid .cta {
    order:2;
    grid-column:span 2;
    width:100%;
    height:210px;
    justify-self:center;
    align-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }

  /* --- ۶ کارت بعد از CTA --- */
  .grid .card:nth-of-type(6)
  .grid .card:nth-of-type(7),
  .grid .card:nth-of-type(8),
  .grid .card:nth-of-type(9),
  .grid .card:nth-of-type(10),
  .grid .card:nth-of-type(11),
  .grid .card:nth-of-type(12) {
    order:3;
  }
  /* --- المان‌های داخلی --- */
  .avatar { width:80px; height:80px; }
  .title { font-size:14px; }
  .meta { font-size:12px; }
  .chip { font-size:11px; padding:5px 10px; }

  /* حذف فاصله کارت‌های خاص در موبایل */
  .grid .card:nth-child(6),
  .grid .card:nth-child(7),
  .grid .card:nth-child(9),
  .grid .card:nth-child(10) {
    margin-top:0 !important;
  }
}/* End custom CSS */