.elementor-3049 .elementor-element.elementor-element-d9d77df{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-3fdbd5d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-5d9e6e3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-40549b9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-787bd74{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-6bc5b93{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-09ad732{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3049 .elementor-element.elementor-element-ca23aa4{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-8ae20e5 */:root{
  --brand-blue: #334aaf;
  --brand-pink: #f19d97;
  --hero-gradient-a: #334aaf;
  --hero-gradient-b: #6b5df0;
  --hero-gradient-c: #f19d97;
  --hero-bg-fade: linear-gradient(120deg, rgba(51,74,175,0.12), rgba(241,157,151,0.06));
  --hero-img: url('https://hilinko.com/wp-content/uploads/2025/11/google-ads-hero.webp'); /* replace if needed */
}

/* container helper */
.ads-hero-new .container{ max-width:1180px; margin:0 auto; padding:50px 0px; }

/* HERO base */
.ads-hero-new{
  direction: rtl;
  font-family: 'Vazirmatn', sans-serif;
  padding: 64px 0;
  position: relative;
  overflow: visible;
  /* energetic gradient background */
  background: radial-gradient(1200px 500px at 10% 10%, rgba(51,74,175,0.06), transparent 18%),
              radial-gradient(900px 400px at 90% 80%, rgba(241,157,151,0.06), transparent 20%),
              linear-gradient(120deg, #f7f8ff 0%, #fdf5fb 60%, #fff 100%);
}

/* subtle decorative flow lines using pseudo element */
.ads-hero-new::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(51,74,175,0.03) 0%, transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(241,157,151,0.03) 0%, transparent 30%);
  z-index:0;
}

/* layout */
.ads-hero-new__inner{
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* columns */
.ads-hero-new__col{ flex: 1 1 420px; min-width:260px; z-index:2; }

/* TEXT column */
.ads-hero-new__col--text{ max-width:640px; }

.ads-kicker{
  display:inline-block;
  color: var(--brand-blue);
  background: rgba(51,74,175,0.06);
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
  margin-bottom:12px;
  font-size:0.95rem;
}

.ads-title{
  color:#0f1724;
  font-size:2.25rem;
  line-height:1.08;
  margin:8px 0 18px;
  font-weight:700;
}

.ads-lead{
  color:#334155;
  font-size:1.05rem;
  margin-bottom:22px;
  line-height:1.7;
  max-width: 58ch;
}

/* CTAs */
.ads-ctas{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.ads-btn{
  font-weight:700;
  border-radius:999px;
  padding:12px 22px;
  text-decoration:none;
  cursor:pointer;
  border:0;
  font-size:1rem;
}
.ads-btn--primary{
  background: linear-gradient(90deg, var(--brand-blue), #5f6ef8);
  color:#fff;
  box-shadow: 0 12px 34px rgba(51,74,175,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ads-btn--primary:hover{ transform: translateY(-4px); box-shadow: 0 22px 60px rgba(51,74,175,0.14); }
.ads-btn--ghost{ background:transparent; color: var(--brand-blue); padding:10px 14px; }

/* trust logos */
.ads-trust{ display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
.ads-trust__text{ color:#6b7280; font-size:0.92rem; margin-right:6px; }
.ads-trust__logos img{ height:34px; filter:grayscale(100%); opacity:0.75; margin-left:10px; transition: all .18s; }
.ads-trust__logos img:hover{ filter:none; opacity:1; transform:scale(1.02); }

/* VISUAL column */
.ads-hero-new__col--visual{ display:flex; align-items:center; justify-content:center; position:relative; }
/* visual card */
.ads-visual-card{
  width: 100%;
  max-width: 92%;
  border-radius:8px;
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  box-shadow: 0 30px 60px rgba(14,22,60,0.02);
  padding:18px;
  overflow:visible;
  transform-origin:center center;
  animation: adsFloat 6s ease-in-out infinite;
}
.ads-visual-card__img{ display:block; width:100%; height:auto; border-radius:12px; }

/* subtle floating badges */
.ads-floating-badge{
  position:absolute;
  background:linear-gradient(90deg, #fff, rgba(255,255,255,0.98));
  padding:8px 12px;
  border-radius:12px;
  box-shadow: 0 8px 26px rgba(20,30,60,0.06);
  font-weight:700;
  color:var(--brand-blue);
  font-size:0.95rem;
}
.badge--kpi{ top:12px; left:18px; transform:translateX(-8%); }
.badge--conv{ bottom:12px; right:18px; transform:translateX(8%); }

/* float animation */
@keyframes adsFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}

/* responsive */
@media (max-width: 980px){
  .ads-title{ font-size:1.8rem; }
  .ads-lead{ font-size:1rem; }
  .ads-visual-card{ width:360px; }
}

@media (max-width: 720px){
  .ads-hero-new__inner{ flex-direction:column-reverse; gap:18px; align-items:center; }
  .ads-hero-new{ padding:36px 0; border-radius:0; }
  .ads-hero-new__col--text{ text-align:center; }
  .ads-hero-new__col--visual{ order:0; }
  .ads-floating-badge{ display:none; } /* hide badges on small screens */
  .ads-title{ font-size:1.45rem; }
  .ads-visual-card{ width:92%; max-width:420px; }
}

/* accessibility focus */
.ads-btn:focus{ outline:3px solid rgba(51,74,175,0.12); outline-offset:4px; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f4094c1 *//* Problem Section - ads-problem-section
   Requires Vazirmatn font and Font Awesome (remove imports if loaded globally) */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
/* Font Awesome (if not already present in site) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root{
  --brand-blue: #334aaf;
  --brand-pink: #f19d97;
  --bg-soft: #f8f9fb;
  --card-bg: #ffffff;
  --muted: #6b7280;
}

/* container helper (adjust to your site's container if needed) */
.ads-container{ max-width:1180px; margin:0 auto; padding:80px 20px; }

/* Section base */
.ads-problem-section{
  direction: rtl;
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* soft diagonal/pattern background */
.ads-problem-section::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(135deg, rgba(51,74,175,0.02) 25%, transparent 25%, transparent 50%, rgba(51,74,175,0.02) 50%, rgba(51,74,175,0.02) 75%, transparent 75%, transparent);
  background-size: 24px 24px;
  opacity: 0.35;
  z-index:0;
  pointer-events:none;
}

/* header */
.ads-problem-header{ text-align:center; position:relative; z-index:1; margin-bottom:28px; padding-top:6px; }
.ads-problem-header h2{ color:var(--brand-blue); font-size:1.8rem; margin:0 0 8px; font-weight:700; line-height:1.25; }
.ads-problem-sub{ color:var(--muted); margin:0 auto 22px; font-size:1rem; max-width:900px; }

/* pain grid */
.ads-pain-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(3, 1fr);
  margin:20px 0 30px;
  position:relative;
  z-index:1;
}

/* pain card - neumorphic-lite */
.ads-pain-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.98));
  border-radius:14px;
  padding:20px;
  box-shadow: 0 12px 30px rgba(14,22,60,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  text-align:right;
  min-height:150px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid rgba(14,22,60,0.03);
  opacity:0;
  transform: translateY(18px);
}

/* visible class toggled by JS */
.ads-pain-card.in-view{ opacity:1; transform: translateY(0); }

/* hover */
.ads-pain-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(14,22,60,0.08); }

/* icon */
.ads-pain-icon{
  width:52px; height:52px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(51,74,175,0.06), rgba(241,157,151,0.02));
  color:var(--brand-pink); font-size:20px; flex-shrink:0;
  box-shadow: 0 6px 18px rgba(51,74,175,0.04);
}
.ads-pain-title{ color:var(--brand-blue); font-weight:700; margin:0; font-size:1.05rem; }
.ads-pain-desc{ color:#4b5563; margin:0; font-size:0.95rem; line-height:1.6; }

/* before/after box */
.ads-beforeafter{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.55));
  border-radius:12px;
  padding:18px;
  box-shadow: 0 6px 18px rgba(14,22,60,0.04);
  z-index:1;
}

.ads-before, .ads-after{ text-align:right; }
.ads-before h4, .ads-after h4{ margin:0 0 10px; color:var(--brand-blue); font-size:1.05rem; font-weight:700; }
.ads-before ul, .ads-after ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; color:#374151; }
.ads-before li strong, .ads-after li strong{ margin-left:8px; font-size:0.95rem; }

/* small decorative vertical divider on desktop */
.ads-beforeafter::before{
  content:'';
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:1px;
  background: linear-gradient(#e9eefc, #f9f6f9);
  transform:translateX(-50%);
  z-index:0;
  opacity:0.6;
}

/* responsiveness */
@media (max-width: 1024px){
  .ads-pain-grid{ grid-template-columns: repeat(2, 1fr); }
  .ads-beforeafter{ grid-template-columns: 1fr; }
  .ads-beforeafter::before{ display:none; }
}

@media (max-width: 640px){
  .ads-container{ padding:28px 16px; }
  .ads-pain-grid{ grid-template-columns: 1fr; }
  .ads-problem-header h2{ font-size:1.35rem; }
  .ads-problem-sub{ font-size:0.95rem; }
  .ads-pain-card{ min-height:auto; padding:16px; }
}

/* subtle focus outline */
.ads-pain-card:focus-within{ outline:3px solid rgba(51,74,175,0.06); outline-offset:4px; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9b59ce0 *//* Problem Section - ads-problem-section
   Requires Vazirmatn font and Font Awesome (remove imports if loaded globally) */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
/* Font Awesome (if not already present in site) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* GENERAL */
.hilinko-ads-solution {
    direction: rtl;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
  font-family: 'Vazirmatn', sans-serif;
}

/* HILINKO CUSTOM PATTERN */
.hilinko-ads-solution::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(51,74,175,0.07) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(241,157,151,0.08) 0%, transparent 60%);
    opacity: 0.45;
}

/* HEADER */
.hilinko-ads-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 5;
}

.hilinko-ads-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #334aaf;
}

.hilinko-ads-header p {
    color: #555;
    margin-top: 10px;
    font-size: 1.05rem;
}

.ads-header-cta {
    background: linear-gradient(90deg, #334aaf, #5f6ef8);
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    margin-top: 20px;
    font-weight: 700;
    cursor: pointer;
    
}

/* MAIN CONTAINER */
.hilinko-ads-container {
    display: flex;
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    align-items: flex-start;
}

/* ILLUSTRATION */
.ads-illustration {
    flex: 1 1 40%;
}

.ads-illustration .ads-svg {
    width: 100%;
    height: auto;
}

/* CONTENT */
.ads-content {
    flex: 1 1 60%;
}

/* 3 CORE CARDS */
.ads-core {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.ads-core-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: 0.3s;
    text-align: right;
}

.ads-core-card:hover {
    transform: translateY(-6px);
}

.ads-core-card i {
    font-size: 28px;
    color: #f19d97;
    margin-bottom: 8px;
}

.ads-core-card h3 {
    margin: 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #334aaf;
}

.ads-core-card p {
    margin-top: 18px;
    color: #555;
    font-size: 0.95rem;
}

/* FEATURE GRID */
.ads-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
}

.ads-feature {
    background: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 500;
    color: #334aaf;
}

.ads-feature i {
    font-size: 18px;
    color: #f19d97;
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .hilinko-ads-container {
        flex-direction: column;
    }
    .ads-core {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ads-features {
        grid-template-columns: 1fr;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aa994e0 *//* Section 4: Campaigns Slider - Hilinko
   Put in custom css file or customizer -> Additional CSS */

/* Fonts: ensure Vazirmatn already loaded site-wide.
   If not, add <link href="https://fonts.googleapis.com/..." rel="stylesheet"> in header. */

.hilinko-campaigns { direction: rtl; padding: 80px 20px; background: transparent;   font-family: 'Vazirmatn', sans-serif;}
.hc-header { text-align:center; max-width:1180px; margin:0 auto 28px; }
.hc-header h2 { color:#334aaf; font-size:1.8rem; margin:0 0 6px; font-weight:700; }
.hc-header .hc-sub { color:#6b7280; margin:0; font-size:1rem; }

/* diagonal soft pattern (Hilinko F) */
.hilinko-campaigns {
  position: relative;
  overflow: visible;
  --max-w: 1180px;
}
.hilinko-campaigns::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(51,74,175,0.03) 25%, transparent 25%, transparent 50%, rgba(51,74,175,0.03) 50%),
    linear-gradient(45deg, rgba(241,157,151,0.02) 25%, transparent 25%, transparent 50%, rgba(241,157,151,0.02) 50%);
  background-size: 28px 28px;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

/* wrap: arrows + slider */
.hc-wrap { max-width:var(--max-w); margin: 0 auto; display:flex; align-items:center; gap:12px; position:relative; z-index:2; }

/* arrows */
.hc-arrow {
  width:46px; height:46px; border-radius:10px; border:0;
  background:#fff; box-shadow:0 8px 20px rgba(14,22,60,0.06);
  font-size:20px; color:#334aaf; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hc-prev{ transform: rotate(180deg); }

/* slider */
.hc-slider {
  display:flex;
  gap:18px;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 8px 4px;
  width: calc(100% - 120px); /* leave space for arrows */
}

/* card base */
.hc-card {
  flex: 0 0 300px; /* card width */
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius:14px;
  padding:18px;
  box-shadow: 0 8px 22px rgba(14,22,60,0.06);
  border:1px solid rgba(0,0,0,0.04);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
  box-sizing:border-box;
}

/* center highlight style */
.hc-card.center {
  transform: scale(1.06);
  box-shadow: 0 28px 60px rgba(14,22,60,0.12);
  z-index:4;
}

/* icon */
.hc-icon { width:80px; height:80px; margin-left:auto; margin-right:0; }
.hc-title { margin:0; color:#334aaf; font-weight:700; font-size:1rem; }
.hc-desc { margin:0; color:#334155; line-height:1.6; font-size:0.95rem; }

/* dots */
.hc-dots { display:flex; gap:8px; justify-content:center; margin-top:18px; z-index:2; }
.hc-dot { width:10px; height:10px; border-radius:50%; background:rgba(51,74,175,0.12); border:0; cursor:pointer; }
.hc-dot.active { background:linear-gradient(90deg,#334aaf,#f19d97); box-shadow:0 6px 16px rgba(51,74,175,0.08); }

/* responsive */
@media (max-width: 1100px){
  .hc-card { flex:0 0 280px; }
  .hc-slider { width: calc(100% - 100px); }
}
@media (max-width: 820px){
  .hc-wrap { gap:8px; }
  .hc-arrow { display:none; }
  .hc-slider { width:100%; }
  .hc-card { flex:0 0 78%; min-width:280px; }
}
@media (max-width:480px){
  .hc-card { min-height:200px; padding:14px; }
}

/* Accessibility focus */
.hc-dot:focus, .hc-arrow:focus, .hc-card:focus { outline:3px solid rgba(51,74,175,0.08); outline-offset:4px; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e9f7549 *//* Section 5 centered timeline zig-zag - Hilinko */
.hp-process-centered { direction: rtl; font-family: 'Vazirmatn', sans-serif; padding: 64px 18px; position: relative; overflow: visible; background: transparent; }

/* asymmetric background shapes (two decorative blobs) */
.hp-process-centered .hp-shapes::before,
.hp-process-centered .hp-shapes::after{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
}
.hp-process-centered .hp-shapes::before{
  width: 420px; height: 260px;
  right: -80px; top: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(51,74,175,0.14), transparent 30%), linear-gradient(180deg, rgba(51,74,175,0.06), rgba(241,157,151,0.04));
  transform: rotate(8deg);
  border-radius: 38% 62% 40% 60%;
}
.hp-process-centered .hp-shapes::after{
  width: 360px; height: 220px;
  left: -70px; bottom: -40px;
  background: radial-gradient(circle at 70% 70%, rgba(241,157,151,0.12), transparent 30%), linear-gradient(180deg, rgba(241,157,151,0.04), transparent 40%);
  transform: rotate(-14deg);
  border-radius: 50% 40% 60% 50%;
}

/* inner container */
.hp-inner { max-width:1180px; margin:0 auto; position: relative; z-index: 2; }

/* header */
.hp-header { text-align: center; margin-bottom: 34px; }
.hp-header h2 { color:#334aaf; font-size:1.9rem; margin:0 0 6px; font-weight:700; }
.hp-sub { color:#6b7280; margin:0; font-size:1rem; }

/* grid layout: three columns: left / timeline / right
   We'll use grid with 6 rows to place items zig-zag */
.hp-grid {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  grid-auto-rows: min-content;
  gap: 18px 8px;
  align-items: start;
}

/* placeholders (empty cells) */
.hp-empty { }

/* timeline column center */
.hp-timeline-col {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px 0;
}

/* vertical timeline line (full height of grid area) */
.hp-timeline-line{
  position:absolute;
  top: 8px;
  bottom: 8px;
  width: 6px;
  background: linear-gradient(180deg, rgba(51,74,175,0.95), rgba(241,157,151,0.6));
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(51,74,175,0.06);
  left: 50%;
  transform: translateX(-50%);
}

/* dot on timeline */
.hp-dot {
  position: relative;
  z-index: 4;
  width:56px;
  height:56px;
  border-radius:50%;
  border: 6px solid rgba(243,157,151,0.12);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: #334aaf;
  box-shadow: 0 12px 30px rgba(51,74,175,0.08);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.hp-dot.active {
  background: linear-gradient(180deg,#334aaf,#5f6ef8);
  color: #fff;
  border-color: rgba(241,157,151,0.12);
  transform: translateX(0) scale(1.03);
  box-shadow: 0 20px 48px rgba(51,74,175,0.18);
}

/* card wrapper positions:
   hp-card-right sits in column 3, hp-card-left in column 1.
   We'll arrange rows so they alternate (we used specific ordering in HTML) */
.hp-card-wrap { display:flex; align-items:center; justify-content:flex-end; } /* default */
.hp-card-wrap.hp-card-left { justify-content:flex-start; }

/* each card */
.hp-card {
  width: 520px;
  max-width: calc(100% - 120px); /* ensure spacing near timeline */
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(20,28,70,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  display:flex;
  gap:16px;
  align-items:center;
  position: relative;
  z-index: 3;
  transform-origin: center left;
  opacity: 0;
  transform: translateY(12px);
  transition: all .6s cubic-bezier(.2,.9,.2,1);
}

/* show when in view */
.hp-card.in-view { opacity:1; transform:none; }

/* iso icon */
.hp-iso { width:140px; flex: 0 0 140px; display:flex; align-items:center; justify-content:center; }
.iso-svg { width:100%; height:auto; display:block; }

/* body */
.hp-body h3 { margin:0 0 6px; color:#334aaf; font-size:1.05rem; font-weight:700; }
.hp-body p { margin:0; color:#374151; font-size:0.96rem; line-height:1.6; }

/* connector (short horizontal line from dot to card)
   For right-side cards, connector goes left; for left-side, connector goes right.
   We'll use pseudo-element on hp-card-wrap to draw the line. */
.hp-card-wrap::before{
  content: "";
  position: absolute;
  width: 50px;   /* distance from timeline to card (your B choice ~50px) */
  height: 3px;
  background: linear-gradient(90deg, rgba(51,74,175,0.85), rgba(241,157,151,0.7));
  top: 40px; /* aligns with dot vertical center (adjust if needed) */
  z-index:2;
  border-radius:2px;
}

/* for right cards, connector is on the left side of the card, extend left */
.hp-card-wrap.hp-card-right::before{
  right: calc(100% + 46px); /* 46px half of dot width + 6px border etc */
  left: auto;
}

/* for left cards, connector should extend rightwards */
.hp-card-wrap.hp-card-left::before{
  left: calc(100% + 46px);
  right: auto;
}

/* smaller screens: stack */
@media (max-width: 900px){
  .hp-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-timeline-line { display:none; }
  .hp-timeline-col { order: -1; display:flex; justify-content:center; gap:10px; }
  .hp-card-wrap { justify-content:center; }
  .hp-card { width:100%; max-width:100%; padding:14px; }
  .hp-card-wrap::before { display:none; }
  .hp-dots-mobile { display:flex; gap:8px; justify-content:center; margin-top:12px; }
}

/* mobile dot styles */
.hp-dots-mobile { display:none; margin-top:18px; z-index:4; }
.hp-dot-mobile { width:36px; height:36px; border-radius:8px; border:0; background:#eef2ff; color:#334aaf; font-weight:700; cursor:pointer; }
.hp-dot-mobile.active { background: linear-gradient(90deg,#334aaf,#f19d97); color:#fff; }

/* accessibility */
.hp-card:focus-within, .hp-dot:focus { outline:3px solid rgba(51,74,175,0.06); outline-offset:4px; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-51b14f3 *//* Social Proof (sp-) - Glass cards + Testimonials slider
   Font: Vazirmatn (ensure loaded in header if widget strips link)
*/
.sp-section { direction: rtl; font-family: 'Vazirmatn', sans-serif; position: relative; padding: 64px 20px; overflow: visible; background: transparent; }
.sp-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sp-blob-a { position: absolute; right: -6%; top: -8%; width:48%; opacity:0.06; }
.sp-blob-b { position: absolute; left: -6%; bottom: -8%; width:44%; opacity:0.05; }

.sp-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }

/* Header */
.sp-header { text-align:center; margin-bottom: 28px; }
.sp-header h2 { font-size:1.9rem; color:#334aaf; margin:0 0 8px; font-weight:700; }
.sp-sub { color:#6b7280; margin:0; font-size:1rem; }

/* KPI cards */
.sp-kpis { display:flex; gap:28px; justify-content:center; align-items:stretch; margin:40px; flex-wrap:wrap; }
.sp-kpi { background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius:14px; padding:18px; width: 320px; box-shadow: 0 14px 40px rgba(13,20,60,0.06); border:1px solid rgba(255,255,255,0.6); box-sizing:border-box; }
.sp-kpi-top { display:flex; align-items:baseline; gap:12px; }
.sp-kpi-num { font-size:2.1rem; font-weight:800; color:#111827; line-height:1; }
.sp-kpi-num .sp-kpi-suffix { font-size:1rem; font-weight:700; margin-right:4px; color:#334aaf; }
.sp-kpi-title { color:#334aaf; font-weight:700; font-size:0.96rem; }
.sp-kpi-sub { color:#425066; margin-top:10px; font-size:0.95rem; }
.sp-kpi-chart { margin-top:12px; opacity:0.95; }

/* CTA small */
.sp-cta { text-align:center; margin: 18px 0 28px; }
.sp-cta .sp-cta-btn { display:inline-block; background: linear-gradient(90deg,#334aaf,#5f6ef8); color:#fff; padding:10px 20px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(51,74,175,0.10); }

/* Testimonials slider */
.sp-testimonials { background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25)); border-radius:16px; padding:18px; box-shadow:0 18px 48px rgba(13,20,60,0.06); border:1px solid rgba(255,255,255,0.6); display:flex; flex-direction:column; gap:12px; }

/* slider track */
.sp-slider { display:flex; gap:14px; overflow:hidden; scroll-behavior:smooth; padding-bottom:4px; }

/* testimonial card */
.sp-test { min-width: 340px; max-width: 560px; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.65)); border-radius:12px; padding:14px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 12px 30px rgba(13,20,60,0.04); border:1px solid rgba(255,255,255,0.6); }

/* media */
.sp-test-media { position:relative; width:96px; flex:0 0 96px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.sp-avatar { width:96px; height:96px; border-radius:12px; overflow:hidden; box-shadow: 0 8px 20px rgba(16,24,64,0.06); border:1px solid rgba(255,255,255,0.6); }
.sp-badge { margin-top:6px; background: linear-gradient(90deg,#334aaf,#f19d97); color:#fff; padding:6px 8px; border-radius:999px; font-weight:700; font-size:0.92rem; display:flex; flex-direction:column; align-items:center; }

/* body */
.sp-test-body { flex:1 1 auto; }
.sp-quote { margin:0 0 10px; color:#111827; font-size:0.98rem; line-height:1.6; }
.sp-test-meta { color:#334aaf; font-weight:700; font-size:0.95rem; display:flex; gap:10px; align-items:center; }

/* controls */
.sp-controls { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:6px; }
.sp-prev, .sp-next { background:#fff; border:0; width:44px; height:44px; border-radius:10px; box-shadow:0 8px 22px rgba(13,20,60,0.06); color:#334aaf; font-size:20px; cursor:pointer; }
.sp-dots { display:flex; gap:8px; align-items:center; }
.sp-dot { width:10px; height:10px; border-radius:50%; background:rgba(51,74,175,0.12); border:0; cursor:pointer; }
.sp-dot.active { background:linear-gradient(90deg,#334aaf,#f19d97); box-shadow:0 8px 20px rgba(51,74,175,0.08); }

/* responsive */
@media (max-width: 1100px){
  .sp-kpis { justify-content:center; gap:12px; }
  .sp-kpi { width: 300px; }
  .sp-test { min-width: 300px; }
}
@media (max-width: 760px){
  .sp-kpis { flex-direction:column; align-items:center; }
  .sp-kpi { width: 100%; max-width: 520px; }
  .sp-slider { padding:0; }
  .sp-testimonials { padding:12px; }
  .sp-test { width:100%; min-width: 100%; }
}

/* accessibility focus */
.sp-prev:focus, .sp-next:focus, .sp-dot:focus { outline:3px solid rgba(51,74,175,0.08); outline-offset:4px; }

/* ensure good default when JS not running: show first card fully */
.sp-slider:not([data-js-ready]) .sp-test:nth-child(n+2) { opacity:0.7; transform:scale(0.98); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0292176 */#faq-section {
  background: radial-gradient(circle at center, rgba(51,74,175,0.15), transparent 70%);
  padding: 100px 20px;
  text-align: center;
  font-family: 'Vazirmatn', sans-serif;
}

.faq-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1d1d1f;
}

.faq-subtitle {
  color: #666;
  font-size: 1rem;
  margin-bottom: 60px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  padding: 20px 25px;
  text-align: right;
  transition: all 0.3s ease;
  position: relative;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(241, 157, 151, 0.25);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #1d1d1f;
}

.faq-question i {
  color: #f19d97;
  font-size: 1.3rem;
  margin-left: 12px;
}

.faq-question h3 {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
}

.toggle-icon {
  font-size: 1.4rem;
  color: #f19d97;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  margin-top: 15px;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  text-align: justify;
}

.faq-item.active .faq-answer {
  display: block;
  animation: fadeIn 0.4s ease;
}

.faq-item.active .toggle-icon {
  transform: rotate(45deg);
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-5px);}
  to {opacity: 1; transform: translateY(0);}
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1826b34 *//* =========================
   Optimized CTA v2 - Hilinko
   ========================= */
#final-cta-v2 { position: relative; font-family: 'Vazirmatn', sans-serif; direction: rtl; overflow: hidden; padding: 84px 18px; color: #fff; }

/* Background gradient + subtle noise + bloom */
#final-cta-v2 .ftv2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #071033 0%, #1b2a6f 30%, #4a3fc9 100%);
}

/* Light bloom behind CTA (radial) */
#final-cta-v2::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -220px;
  top: -140px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12) 0%, transparent 55%);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}

/* very subtle noise via overlay (CSS gradient stripes, lightweight) */
#final-cta-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  opacity: 0.03;
  pointer-events: none;
}

/* inner container */
#final-cta-v2 .ftv2-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
  justify-content: space-between;
}

/* left text column */
.ftv2-text { flex: 1 1 60%; }
.ftv2-text h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.5;
  color: #ffffff;
  text-wrap: balance;
}
.ftv2-sub { margin: 0 0 8px; color: rgba(255,255,255,0.92); font-size: 1.02rem; line-height:1.7; }
.ftv2-micro { margin: 12px 0; color: #e6f0ff; font-weight:600; font-size:0.9rem; }
.ftv2-micro strong { color:#fff; font-weight:400; }
.ftv2-caption { color: rgba(255,255,255,0.85); margin-top: 8px; font-size:0.95rem; }

/* CTA column */
.ftv2-cta-col { flex: 0 0 36%; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }

/* Primary CTA button (blue -> mint gradient per CRO suggestion) */
.ftv2-cta {
  display:inline-block;
  min-width: 240px;
  padding: 16px 26px;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  background: #f19d97; /* blue -> mint */
  box-shadow: 0 18px 50px rgba(7,17,48,0.30), inset 0 -3px 0 rgba(0,0,0,0.08);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s, filter .18s;
  position: relative;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

/* pulse subtle (slower) */
.ftv2-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 0 rgba(23,195,162,0.18);
  animation: ftv2Pulse 5s infinite ease-out;
  pointer-events: none;
}
@keyframes ftv2Pulse {
  0% { box-shadow: 0 0 0 0 rgba(23,195,162,0.18); }
  50% { box-shadow: 0 0 0 14px rgba(23,195,162,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,195,162,0); }
}

/* hover (CTA magnet) */
.ftv2-cta:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 26px 70px rgba(7,17,48,0.36);
}

/* badge */
.ftv2-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  color:#e9fbf7;
  font-weight:700;
  font-size:0.92rem;
  box-shadow: 0 8px 20px rgba(7,17,48,0.12);
}
.ftv2-badge .badge-dot {
  width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,#fff,#e5f7f0); box-shadow:0 6px 12px rgba(7,17,48,0.08);
}

/* small secure subtext */
.ftv2-subtext { color: rgba(255,255,255,0.9); font-size:0.92rem; margin-top:6px; }

/* Fixed mini CTA (bottom-right) */
.ftv2-mini-cta {
  position: fixed;
  bottom: 20px;
  left: 20px; /* RTL: left side is visually near screen-left; choose left to avoid covering LTR desktops' right */
  z-index: 9999;
  display: none; /* shown by JS after scroll */
  background: linear-gradient(90deg,#2b6cff,#17c3a2);
  color:#061026;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(7,17,48,0.32);
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, opacity .18s;
}

/* keyboard focus outlines */
.ftv2-cta:focus, .ftv2-mini-cta:focus, .ftv2-badge:focus { outline: 3px solid rgba(255,255,255,0.12); outline-offset:6px; }

/* responsive */
@media (max-width: 980px) {
  #final-cta-v2 { padding: 54px 14px; }
  #final-cta-v2 .ftv2-inner { flex-direction: column-reverse; gap: 20px; text-align:center; }
  .ftv2-cta-col { width:100%; }
  .ftv2-text { width:100%; }
  .ftv2-text h2 { font-size: 1.6rem; }
  .ftv2-cta { min-width: 100%; padding: 14px 18px; }
}

/* small screens */
@media (max-width: 520px) {
  .ftv2-micro { font-size:0.95rem; }
  .ftv2-badge { font-size:0.88rem; padding:6px 10px; }
  .ftv2-subtext { font-size:0.86rem; }
  .ftv2-mini-cta { left: 12px; bottom: 14px; padding:10px 12px; }
}/* End custom CSS */