/* ---------- Design Tokens (scoped, will not leak/collide) ---------- */
  .ansar-scope{
    --ansar-primary:#0B1E40;
    --ansar-secondary:#1a6b58;
    --ansar-accent-green:#20C076;
    --ansar-gold:#c9952a;
    --ansar-dark-bg:#0A1533;
    --ansar-light-gray:#E5E5E5;
    --ansar-dark-accent:#1A170F;
    --ansar-cream:#FAF8F2;
    --ansar-white:#FFFFFF;
    --ansar-text-muted:#35393e;
    --ansar-radius-lg:24px;
    --ansar-radius-md:16px;
    --ansar-radius-sm:10px;
    --ansar-shadow-soft:0 20px 50px -20px rgba(11,30,64,0.18);
    --ansar-shadow-card:0 10px 30px -10px rgba(11,30,64,0.15);
    --ansar-transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
    font-family:'Poppins', sans-serif;
  }

  .ansar-scope *{ box-sizing:border-box; }

  /* ---------- Layout Helpers ---------- */
  .ansar-section{
    position:relative;
    width:100%;
    overflow:hidden;
  }

  .ansar-container{
    max-width:1400px;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;
    position:relative;
    z-index:2;
  }

  /* ---------- Hero Section ---------- */
  .ansar-hero{
    background:
      radial-gradient(circle at 88% 12%, rgba(201,149,42,0.08), transparent 45%),
      linear-gradient(180deg, var(--ansar-cream) 0%, var(--ansar-white) 60%);
    padding:40px 0 0;
  }

  /* Subtle Islamic geometric pattern overlay */
  .ansar-hero-pattern{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B1E40' stroke-width='1.2'%3E%3Cpath d='M60 4 L94 30 L94 90 L60 116 L26 90 L26 30 Z'/%3E%3Cpath d='M60 22 L80 38 L80 82 L60 98 L40 82 L40 38 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
    background-size:120px 120px;
  }

  .ansar-hero-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:center;
    padding-bottom:60px;
  }

  /* ---------- Eyebrow Badge ---------- */
  .ansar-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 18px;
    border:1px solid rgba(11,30,64,0.15);
    border-radius:999px;
    background:var(--ansar-white);
    color:var(--ansar-secondary);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.3px;
    box-shadow:var(--ansar-shadow-card);
    margin-bottom:26px;
  }

  .ansar-badge .ansar-icon{
    color:var(--ansar-gold);
    width:13px;
    height:13px;
  }

  /* ---------- Base icon sizing (all inline SVG icons) ----------
    Icons use currentColor, so they inherit color from their parent
    unless overridden — same mental model as an icon font, no
    external dependency required. */
  .ansar-icon{
    width:2em;
    height:2em;
    display:inline-block;
    vertical-align:-0.14em;
    flex-shrink:0;
  }

  /* ---------- Headline ---------- */
  .ansar-hero-title{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:52px;
    line-height:1.15;
    color:var(--ansar-primary);
    margin:0 0 22px;
    letter-spacing:-0.5px;
  }

  .ansar-hero-title .ansar-highlight{
    color:var(--ansar-secondary);
    position:relative;
    white-space:nowrap;
  }

  .ansar-hero-title .ansar-highlight::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    height:10px;
    background:rgba(32,192,118,0.18);
    z-index:-1;
    border-radius:4px;
  }

  /* ---------- Sub-headline ---------- */
  .ansar-hero-subtitle{
    font-size:18px;
    line-height:1.7;
    color:#0b1e40;
    max-width:520px;
    margin:0 0 34px;
    font-weight:400;
  }

  /* ---------- CTA Buttons ---------- */
  .ansar-hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:28px;
  }

  .ansar-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 30px;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    border:1.5px solid #000000eb;
    cursor:pointer;
    transition:var(--ansar-transition);
    white-space:nowrap;
  }

  .ansar-btn-primary{
    background:var(--ansar-primary);
    color:var(--ansar-white);
    box-shadow:0 12px 28px -10px rgba(11,30,64,0.45);
  }

  .ansar-btn-primary .ansar-icon{
    transition:var(--ansar-transition);
  }

  .ansar-btn-primary:hover{
    background:var(--ansar-secondary);
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 16px 34px -10px rgba(26,107,88,0.5);
  }

  .ansar-btn-primary:hover .ansar-icon{
    transform:translateX(4px);
  }

  .ansar-btn-outline{
    background:transparent;
    color:var(--ansar-primary);
    border-color:rgba(11,30,64,0.2);
  }

  .ansar-btn-outline:hover{
    border-color:var(--ansar-primary);
    background:rgba(11,30,64,0.04);
    transform:translateY(-3px);
  }

  /* ---------- Trust Strip ---------- */
  .ansar-trust-strip{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0;
    padding:0;
  }

  .ansar-trust-strip li{
    display:flex;
    align-items:center;
    gap:2px;
    font-size:14px;
    font-weight:500;
    color:var(--ansar-primary);
    letter-spacing: -0.3px;
  }

  .ansar-trust-strip li .ansar-icon{
    color:var(--ansar-accent-green);
    width:13px;
    height:15px;
  }

  /* ---------- Hero Media ---------- */
  .ansar-hero-media{
    position:relative;
    z-index:1;
  }

  .ansar-hero-image-wrap{
    position:relative;
    z-index:1;
    border-radius:var(--ansar-radius-lg);
    overflow:hidden;
    box-shadow:var(--ansar-shadow-soft);
  }

  .ansar-hero-image{
    width:100%;
    height:auto;
    aspect-ratio:860/640;
    object-fit:cover;
    display:block;
    border-radius:var(--ansar-radius-lg);
  }

  /* ---------- Verse Card: anchored to the IMAGE, not the heading ----------
    Positioned relative to .ansar-hero-image-wrap, so it always floats
    over the photo's top-left corner and can never drift toward the
    text column, regardless of how the heading wraps at any screen
    width (this replaces an earlier version that anchored to the word
    "Community", which broke on in-between "laptop" widths). */
  .ansar-verse-card{
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    max-width:230px;
    background:var(--ansar-primary);
    color:var(--ansar-white);
    padding:16px 18px 14px;
    border-radius:var(--ansar-radius-md);
    box-shadow:0 16px 34px -10px rgba(0,0,0,0.4);
    border:1px solid rgba(201,149,42,0.35);
    font-family:'Poppins', sans-serif;
    z-index:10;
    pointer-events:none;
    animation:ansarVerseFloat 4.5s ease-in-out infinite;
  }



.ansar-cta-text .ansar-btn{
    border: 1.5px solid #0b1e406b;;
  }



  /* Gentle non-stop float + soft gold glow pulse */
  @keyframes ansarVerseFloat{
    0%, 100%{
      transform:translateY(0);
      box-shadow:0 16px 34px -10px rgba(0,0,0,0.4), 0 0 0 rgba(201,149,42,0);
    }
    50%{
      transform:translateY(-8px);
      box-shadow:0 22px 40px -10px rgba(0,0,0,0.45), 0 0 22px rgba(201,149,42,0.3);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .ansar-verse-card{ animation:none; }
  }

  .ansar-verse-arabic{
    font-size:16px;
    line-height:1.8;
    color:var(--ansar-gold);
    margin:0 0 8px;
    font-weight:600;
    text-align:right;
  }

  .ansar-verse-text{
    font-size:12px;
    line-height:1.55;
    color:rgba(255,255,255,0.9);
    font-style:italic;
    margin:0 0 6px;
  }

  .ansar-verse-ref{
    font-size:10.5px;
    color:var(--ansar-gold);
    font-weight:600;
    letter-spacing:0.3px;
  }

  /* ---------- Stats Bar ---------- */
  .ansar-stats-bar{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    background:linear-gradient(135deg, var(--ansar-primary) 0%, var(--ansar-secondary) 100%);
    border-radius:var(--ansar-radius-lg);
    box-shadow:var(--ansar-shadow-soft);
    border:1px solid rgba(201,149,42,0.25);
    margin-top:-80px;
    margin-bottom:0;
    position:relative;
    overflow:hidden;
  }

  /* Slow-moving gold/green shimmer line along the top edge */
  .ansar-stats-bar::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--ansar-gold), var(--ansar-accent-green), var(--ansar-gold));
    background-size:200% 100%;
    animation:ansarShimmer 6s linear infinite;
  }

  @keyframes ansarShimmer{
    0%{ background-position:0% 0; }
    100%{ background-position:200% 0; }
  }

  .ansar-stat-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
    padding:34px 20px;
    border-right:1px solid rgba(255,255,255,0.12);
    transition:var(--ansar-transition);
  }

  .ansar-stat-item:hover{
    background:rgba(255,255,255,0.06);
    transform:translateY(-4px);
  }

  .ansar-stat-item:last-child{
    border-right:none;
  }

  .ansar-stat-icon-badge{
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(201,149,42,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:0;
    transition:var(--ansar-transition);
  }

  .ansar-stat-item:hover .ansar-stat-icon-badge{
    background:rgba(201,149,42,0.32);
    transform:scale(1.08);
  }

  .ansar-stat-icon{
    width:20px;
    height:20px;
    color:var(--ansar-gold);
  }

  .ansar-stat-number{
    font-size:30px;
    font-weight:700;
    color:var(--ansar-white);
    line-height:1;
  }

  .ansar-stat-label{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.75);
  }

  @media (prefers-reduced-motion: reduce){
    .ansar-stats-bar::before{ animation:none; }
  }

  /* Spacer so stats bar overlap doesn't collide with next section */
  .ansar-stats-spacer{
    height:70px;
    background:var(--ansar-white);
  }

  /* ---------- Load-in Animation (CSS-only, no JS dependency) ----------
    Content is visible by default (safe if JS is blocked/stripped by
    Elementor or a security plugin). The animation is a progressive
    enhancement layered on top via @keyframes + animation-delay. */
  @keyframes ansarFadeUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .ansar-animate{
    animation:ansarFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
  }

  .ansar-hero-content .ansar-badge{ animation-delay:0.05s; }
  .ansar-hero-content .ansar-hero-title{ animation-delay:0.15s; }
  .ansar-hero-content .ansar-hero-subtitle{ animation-delay:0.25s; }
  .ansar-hero-content .ansar-hero-cta{ animation-delay:0.35s; }
  .ansar-hero-content .ansar-trust-strip{ animation-delay:0.45s; }
  .ansar-hero-media{ animation-delay:0.2s; }
  .ansar-stats-bar{ animation-delay:0.55s; }

  /* Reduced motion respect: skip the motion, keep content visible */
  @media (prefers-reduced-motion: reduce){
    .ansar-animate{
      animation:none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .ansar-hero-title{ font-size:42px; }
    .ansar-hero-inner{ gap:10px; }
  }

  @media (max-width:900px){
    .ansar-hero-inner{
      grid-template-columns:1fr;
      padding-bottom:40px;
    }
    .ansar-hero-media{ order:-1; }
    .ansar-hero-title{ font-size:38px; }
    .ansar-hero-subtitle{ max-width:100%; }
    .ansar-stats-bar{
      grid-template-columns:repeat(2, 1fr);
      margin-top:-40px;
    }
    .ansar-stat-item{
      border-bottom:1px solid rgba(255,255,255,0.12);
    }
    .ansar-stat-item:nth-child(2n){
      border-right:none;
    }
    .ansar-stats-spacer{ height:110px; }
  }

  @media (max-width:600px){
    .ansar-container{ padding-left:20px; padding-right:20px; }
    .ansar-hero{ padding-top:50px; }
    .ansar-hero-title{ font-size:30px; }
    .ansar-hero-subtitle{ font-size:16px; }
    .ansar-btn{ width:100%; }
    .ansar-hero-cta{ flex-direction:column; }
    /* Image (and the card floating on it) is narrower on phones,
      so shrink the card's text to keep it comfortably inside. */
    .ansar-verse-card{
      top:14px; left:14px; right:14px;
      padding:12px 14px 10px;
    }
    .ansar-verse-arabic{ font-size:13px; margin-bottom:6px; }
    .ansar-verse-text{ font-size:10.5px; }
    .ansar-stats-bar{ grid-template-columns:1fr 1fr; }
    .ansar-stat-item{ padding:22px 12px; }
    .ansar-stat-number{ font-size:25px; }
  }

  
/* section 2 gap*/

.ansar-scope{
  --ansar-primary:#0B1E40;
  --ansar-secondary:#1a6b58;
  --ansar-accent-green:#20C076;
  --ansar-gold:#c9952a;
  --ansar-dark-bg:#0A1533;
  --ansar-light-gray:#E5E5E5;
  --ansar-dark-accent:#1A170F;
  --ansar-cream:#FAF8F2;
  --ansar-white:#FFFFFF;
  --ansar-text-muted:#5B6472;
  --ansar-radius-lg:24px;
  --ansar-radius-md:16px;
  --ansar-radius-sm:10px;
  --ansar-shadow-soft:0 20px 50px -20px rgba(11,30,64,0.18);
  --ansar-shadow-card:0 10px 30px -10px rgba(11,30,64,0.15);
  --ansar-transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  font-family:'Poppins', sans-serif;
}

.ansar-scope *{ box-sizing:border-box; }

.ansar-section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.ansar-container{
  max-width:1400px;
  margin:0 auto;
  padding-left:30px;
  padding-right:30px;
  position:relative;
  z-index:2;
}

.ansar-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.14em;
  flex-shrink:0;
}

/* ---------- Section ---------- */
.ansar-gap{
  background:var(--ansar-white);
  padding:0;
}

.ansar-gap-pattern{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0.045;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B1E40' stroke-width='1.2'%3E%3Cpath d='M60 4 L94 30 L94 90 L60 116 L26 90 L26 30 Z'/%3E%3Cpath d='M60 22 L80 38 L80 82 L60 98 L40 82 L40 38 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---------- Header ---------- */
.ansar-gap-header{
  max-width:920px;
  margin:0 auto 44px;
  text-align:center;
}

.ansar-gap-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border:1px solid rgba(11,30,64,0.15);
  border-radius:999px;
  background:var(--ansar-cream);
  color:var(--ansar-secondary);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  margin-bottom:20px;
}


.ansar-network-col .ansar-gap-badge{
    margin-bottom: 10px;
}


.ansar-gap-badge .ansar-icon{
  color:var(--ansar-gold);
  width:13px;
  height:13px;
}

.ansar-gap-title{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:44px;
  line-height:1.2;
  color:var(--ansar-primary);
  margin:0 0 18px;
  letter-spacing:-0.5px;
}

.ansar-gap-title .ansar-highlight{
  color:var(--ansar-secondary);
}

.ansar-gap-intro{
  font-size:17px;
  line-height:1.75;
  color:var(--ansar-text-muted);
  margin:0;
}

/* ---------- Comparison Grid ---------- */
.ansar-gap-compare{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:stretch;
  max-width:1180px;
  margin:0 auto;
}

.ansar-gap-col{
  border-radius:var(--ansar-radius-lg);
  padding:38px 34px 34px;
  position:relative;
  transition:var(--ansar-transition);
}

/* "Before" column: what most communities do — muted, subdued */
.ansar-gap-col--before{
  background:#fff2d6;
  border:1px solid rgba(11,30,64,0.08);
}

/* "After" column: what Ansar does — the hero of the comparison */
.ansar-gap-col--after{
  background:var(--ansar-primary);
  border:1px solid rgba(201,149,42,0.3);
  box-shadow:0 24px 60px -24px rgba(11,30,64,0.45);
  transform:translateY(-10px);
}

.ansar-gap-col-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  margin-bottom:14px;
}

.ansar-gap-col--before .ansar-gap-col-eyebrow{
  color:var(--ansar-text-muted);
}

.ansar-gap-col--after .ansar-gap-col-eyebrow{
  color:var(--ansar-gold);
}

.ansar-gap-col-title{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:21px;
  margin:0 0 24px;
  line-height:1.35;
}

.ansar-gap-col--before .ansar-gap-col-title{
  color:var(--ansar-primary);
}

.ansar-gap-col--after .ansar-gap-col-title{
  color:var(--ansar-white);
}

.ansar-gap-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.ansar-gap-list li{
  display:flex;
  align-items:flex-start;
  gap:13px;
  font-size:15px;
  line-height:1.6;
  border-radius:var(--ansar-radius-sm);
  padding:12px 14px;
  transition:var(--ansar-transition);
}

.ansar-gap-col--before .ansar-gap-list li{
  color:#191a1c;
}

.ansar-gap-col--before .ansar-gap-list li:hover{
  background:rgba(11,30,64,0.05);
}

.ansar-gap-col--after .ansar-gap-list li{
  color:rgba(255,255,255,0.92);
}

.ansar-gap-col--after .ansar-gap-list li:hover{
  background:rgba(255,255,255,0.07);
}

.ansar-gap-list .ansar-icon{
  width:20px;
  height:20px;
  margin-top:1px;
}

.ansar-gap-col--before .ansar-gap-list .ansar-icon{
  color:#191a1c;
}

.ansar-gap-col--after .ansar-gap-list .ansar-icon{
  color:var(--ansar-accent-green);
}

/* ---------- VS Badge ---------- */
.ansar-gap-vs{
  position:absolute;
  top:50%;
  left:47%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  border-radius:50%;
  background:var(--ansar-white);
  border:2px solid var(--ansar-gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.5px;
  color:var(--ansar-primary);
  box-shadow:0 14px 32px -10px rgba(11,30,64,0.35);
  z-index:5;
}

/* Slow, gentle pulse ring so the VS badge feels alive without
   being distracting. Non-stop, respects reduced-motion. */
.ansar-gap-vs::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1.5px solid rgba(201,149,42,0.45);
  animation:ansarVsPulse 2.8s ease-out infinite;
}

@keyframes ansarVsPulse{
  0%{ transform:scale(0.85); opacity:0.9; }
  100%{ transform:scale(1.35); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ansar-gap-vs::before{ animation:none; display:none; }
}

/* ---------- Load-in animation (CSS-only, no JS dependency) ---------- */
@keyframes ansarGapFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.ansar-animate{
  animation:ansarGapFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

.ansar-gap-header .ansar-gap-badge{ animation-delay:0.05s; }
.ansar-gap-header .ansar-gap-title{ animation-delay:0.12s; }
.ansar-gap-header .ansar-gap-intro{ animation-delay:0.2s; }
.ansar-gap-col--before{ animation-delay:0.3s; }
.ansar-gap-col--after{ animation-delay:0.4s; }
.ansar-gap-vs{ animation-delay:0.5s; }

@media (prefers-reduced-motion: reduce){
  .ansar-animate{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ansar-gap-title{ font-size:36px; }
  .ansar-gap-col--after{ transform:translateY(0); }
}

@media (max-width:860px){
  .ansar-gap-compare{
    grid-template-columns:1fr;
    gap:56px;
  }
  .ansar-gap-vs{
    top:auto;
    bottom:-40px;
    left:50%;
    transform:translate(-50%,0);
  }
  .ansar-gap-col--after{ transform:translateY(0); }
}

@media (max-width:600px){
  .ansar-gap{ padding:70px 0 80px; }
  .ansar-container{ padding-left:20px; padding-right:20px; }
  .ansar-gap-title{ font-size:28px; }
  .ansar-gap-intro{ font-size:15.5px; }
  .ansar-gap-col{ padding:30px 22px 26px; }
  .ansar-gap-header{ margin-bottom:70px; }
}

/* ansar cordination */

.ansar-scope{
  --ansar-primary:#0B1E40;
  --ansar-secondary:#1a6b58;
  --ansar-accent-green:#20C076;
  --ansar-gold:#c9952a;
  --ansar-dark-bg:#0A1533;
  --ansar-light-gray:#E5E5E5;
  --ansar-dark-accent:#1A170F;
  --ansar-cream:#FAF8F2;
  --ansar-white:#FFFFFF;
  --ansar-text-muted:#5B6472;
  --ansar-radius-lg:24px;
  --ansar-radius-md:16px;
  --ansar-radius-sm:10px;
  --ansar-shadow-soft:0 20px 50px -20px rgba(11,30,64,0.18);
  --ansar-shadow-card:0 10px 30px -10px rgba(11,30,64,0.15);
  --ansar-transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  font-family:'Poppins', sans-serif;
}

.ansar-scope *{ box-sizing:border-box; }

.ansar-section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.ansar-container{
  max-width:1400px;
  margin:0 auto;
  padding-left:30px;
  padding-right:30px;
  position:relative;
  z-index:2;
  padding-bottom: 80px;
}

.ansar-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.14em;
  flex-shrink:0;
}

/* ---------- Section: night-sky gradient ---------- */
.ansar-coord{
  background:linear-gradient(160deg, var(--ansar-dark-bg) 0%, var(--ansar-primary) 55%, #12294f 100%);
  padding:80px 0 0;
}

/* Subtle gold geometric pattern, dimmer than on light sections */
.ansar-coord-pattern{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0.05;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9952a' stroke-width='1.2'%3E%3Cpath d='M60 4 L94 30 L94 90 L60 116 L26 90 L26 30 Z'/%3E%3Cpath d='M60 22 L80 38 L80 82 L60 98 L40 82 L40 38 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* Radial glow behind the crescent moon */
.ansar-coord-glow{
  position:absolute;
  top:-120px;
  right:-100px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,149,42,0.22) 0%, rgba(201,149,42,0) 70%);
  z-index:1;
  pointer-events:none;
}

/* ---------- Crescent moon ---------- */
.ansar-coord-moon{
  position:absolute;
  top:56px;
  right:64px;
  width:54px;
  height:54px;
  color:var(--ansar-gold);
  z-index:2;
  animation:ansarMoonGlow 5s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(201,149,42,0.5));
}

@keyframes ansarMoonGlow{
  0%, 100%{ opacity:0.85; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

/* ---------- Twinkling stars ---------- */
.ansar-coord-star{
  position:absolute;
  border-radius:50%;
  background:var(--ansar-white);
  z-index:2;
  pointer-events:none;
  animation:ansarTwinkle 3.4s ease-in-out infinite;
}

@keyframes ansarTwinkle{
  0%, 100%{ opacity:0.15; transform:scale(0.8); }
  50%{ opacity:0.9; transform:scale(1.15); }
}

@media (prefers-reduced-motion: reduce){
  .ansar-coord-moon,
  .ansar-coord-star{ animation:none !important; opacity:0.7; }
}

/* ---------- Mosque illustration: full-section ambient background ----------
   Covers the whole section as a faint watermark rather than a strip
   pinned to the bottom edge, so it no longer forces extra section
   height and reads as atmosphere behind the content instead of a
   footer decoration. */
.ansar-coord-skyline{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0.16;
  pointer-events:none;
}

/* ---------- Header ---------- */
.ansar-coord-header{
  position:relative;
  z-index:3;
  max-width:720px;
  margin:0 auto 36px;
  text-align:center;
}

.ansar-coord-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border:1px solid rgba(201,149,42,0.35);
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  color:var(--ansar-gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  margin-bottom:22px;
}

.ansar-coord-badge .ansar-icon{
  width:13px;
  height:13px;
}

.ansar-coord-title{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:38px;
  line-height:1.3;
  color:var(--ansar-white);
  margin:0 0 20px;
  letter-spacing:-0.3px;
}

.ansar-coord-title .ansar-highlight{
  color:var(--ansar-gold);
}

.ansar-coord-subtext{
  font-size:16.5px;
  line-height:1.75;
  color:rgba(255,255,255,0.78);
  margin:0;
}

/* ---------- Feature cards (glass-morphism) ---------- */
.ansar-coord-cards{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:36px;
}

.ansar-coord-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--ansar-radius-md);
  padding:22px 22px;
  transition:var(--ansar-transition);
}

.ansar-coord-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.09);
  border-color:rgba(201,149,42,0.45);
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.5);
}

/* Icon + title sit side by side on one row now, instead of the
   icon stacked above the title on its own line. */
.ansar-coord-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.ansar-coord-card-icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(201,149,42,0.16);
  border:1px solid rgba(201,149,42,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--ansar-transition);
}

.ansar-coord-card:hover .ansar-coord-card-icon{
  background:rgba(201,149,42,0.28);
  transform:scale(1.06);
}

.ansar-coord-card-icon .ansar-icon{
  width:20px;
  height:20px;
  color:var(--ansar-gold);
}

.ansar-coord-card-title{
  font-size:16px;
  font-weight:600;
  color:var(--ansar-white);
  margin:0;
}

.ansar-coord-card-desc{
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
  margin:0;
}

/* ---------- Impact Dashboard Preview panel ---------- */
.ansar-coord-dashboard{
  position:relative;
  z-index:3;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--ansar-radius-lg);
  padding:30px 28px;
  margin-bottom:36px;
  text-align:center;
}

.ansar-coord-dashboard-title{
  font-size:19px;
  font-weight:700;
  color:var(--ansar-white);
  margin:0 0 5px;
}

.ansar-coord-dashboard-subtitle{
  font-size:12.5px;
  color:rgba(255,255,255,0.55);
  margin:0 0 24px;
}

.ansar-coord-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

/* Icon + number/label sit side by side in one row, matching the
   reference layout - not icon-above-text. */
.ansar-coord-stat{
  background:var(--ansar-cream);
  border-radius:var(--ansar-radius-md);
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  transition:var(--ansar-transition);
}

.ansar-coord-stat:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -10px rgba(0,0,0,0.35);
}

.ansar-coord-stat-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ansar-coord-stat-icon .ansar-icon{
  width:19px;
  height:19px;
  color:var(--ansar-white);
}

.ansar-coord-stat-icon--a{ background:var(--ansar-secondary); }
.ansar-coord-stat-icon--b{ background:var(--ansar-gold); }
.ansar-coord-stat-icon--c{ background:var(--ansar-accent-green); }
.ansar-coord-stat-icon--d{ background:var(--ansar-primary); }

.ansar-coord-stat-number{
  font-size:17px;
  font-weight:700;
  color:var(--ansar-primary);
  margin:0;
  line-height:1.25;
}

.ansar-coord-stat-label{
  font-size:11px;
  line-height:1.3;
  color:var(--ansar-text-muted);
  margin:0;
}

/* ---------- Pull quote ---------- */
.ansar-coord-quote{
  position:relative;
  z-index:3;
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding-bottom:6px;
}

.ansar-coord-quote-mark{
  width:34px;
  height:34px;
  color:var(--ansar-gold);
  margin:0 auto 18px;
  opacity:0.85;
}

.ansar-coord-quote-text{
  font-size:22px;
  line-height:1.6;
  font-weight:500;
  font-style:italic;
  color:var(--ansar-white);
  margin:0 0 18px;
}

.ansar-coord-quote-cite{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--ansar-gold);
  font-style:normal;
}

/* ---------- Load-in animation (CSS-only, no JS dependency) ---------- */
@keyframes ansarCoordFadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

.ansar-animate{
  animation:ansarCoordFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) both;
}

.ansar-coord-badge{ animation-delay:0.05s; }
.ansar-coord-title{ animation-delay:0.14s; }
.ansar-coord-subtext{ animation-delay:0.22s; }
.ansar-coord-cards .ansar-coord-card:nth-child(1){ animation-delay:0.32s; }
.ansar-coord-cards .ansar-coord-card:nth-child(2){ animation-delay:0.42s; }
.ansar-coord-cards .ansar-coord-card:nth-child(3){ animation-delay:0.52s; }
.ansar-coord-dashboard{ animation-delay:0.6s; }
.ansar-coord-quote{ animation-delay:0.7s; }

@media (prefers-reduced-motion: reduce){
  .ansar-animate{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ansar-coord-title{ font-size:32px; }
}

@media (max-width:860px){
  .ansar-coord-cards{
    grid-template-columns:1fr;
    gap:20px;
  }
  .ansar-coord-stats{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:600px){
  .ansar-coord{ padding:70px 0; }
  .ansar-container{ padding-left:20px; padding-right:20px; }
  .ansar-coord-title{ font-size:27px; }
  .ansar-coord-subtext{ font-size:15px; }
  .ansar-coord-quote-text{ font-size:18px; }
  .ansar-coord-moon{ width:40px; height:40px; top:36px; right:32px; }
  .ansar-coord-stats{
    grid-template-columns:1fr;
  }
  .ansar-coord-dashboard{ padding:24px 20px; }
}

/* cta */



.ansar-scope{
  --ansar-primary:#0B1E40;
  --ansar-secondary:#1a6b58;
  --ansar-accent-green:#20C076;
  --ansar-gold:#c9952a;
  --ansar-dark-bg:#0A1533;
  --ansar-light-gray:#E5E5E5;
  --ansar-dark-accent:#1A170F;
  --ansar-cream:#FAF8F2;
  --ansar-white:#FFFFFF;
  --ansar-text-muted:#5B6472;
  --ansar-radius-lg:24px;
  --ansar-radius-md:16px;
  --ansar-radius-sm:10px;
  --ansar-shadow-soft:0 20px 50px -20px rgba(11,30,64,0.18);
  --ansar-shadow-card:0 10px 30px -10px rgba(11,30,64,0.15);
  --ansar-transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  font-family:'Poppins', sans-serif;
}

.ansar-scope *{ box-sizing:border-box; }

.ansar-section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.ansar-icon{
  width:2em;
  height:2em;
  display:inline-block;
  vertical-align:-0.14em;
  flex-shrink:0;
}

/* ---------- Section wrapper ---------- */
.ansar-cta{
  background:var(--ansar-cream);
  padding:60px 0 60px;
}

/* Contained (not full-width) - max-width 1024px per spec, own
   padding since it's narrower than the standard 1400px container
   used elsewhere. */
.ansar-cta-container{
  max-width:1024px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}

/* ---------- The banner itself ---------- */
.ansar-cta-banner{
  position:relative;
  background:linear-gradient(135deg, var(--ansar-white) 0%, var(--ansar-cream) 100%);
  border:3px solid var(--ansar-gold);
  border-radius:var(--ansar-radius-lg);
  overflow:hidden;
  box-shadow:0 24px 56px -24px rgba(11,30,64,0.28), 0 0 0 6px rgba(201,149,42,0.09);
  padding:52px 56px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  align-items:center;
}

/* Faint Islamic geometric pattern + mosque silhouette watermark */
.ansar-cta-pattern{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.055;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B1E40' stroke-width='1.2'%3E%3Cpath d='M60 4 L94 30 L94 90 L60 116 L26 90 L26 30 Z'/%3E%3Cpath d='M60 22 L80 38 L80 82 L60 98 L40 82 L40 38 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}

.ansar-cta-skyline{
  position:absolute;
  right:0;
  bottom:0;
  width:46%;
  height:auto;
  z-index:0;
  opacity:0.09;
  pointer-events:none;
}

/* ---------- Left: text + CTAs ---------- */
.ansar-cta-text{
  position:relative;
  z-index:2;
}

.ansar-cta-title{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:1.25;
  color:var(--ansar-primary);
  margin:0 0 16px;
  letter-spacing:-0.3px;
}

.ansar-cta-subtext{
  font-size:15px;
  line-height:1.7;
  color:#000000;
  margin:0 0 28px;
  max-width:460px;
}

.ansar-cta-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:18px;
}

.ansar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 24px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  border:1.5px solid #0b1e40;
  cursor:pointer;
  transition:var(--ansar-transition);
  white-space:nowrap;
}

.ansar-cta-btn-primary{
  background:var(--ansar-gold);
  color:#fff;
  box-shadow:0 12px 26px -8px rgba(201,149,42,0.5);
}

.ansar-cta-btn-primary .ansar-icon{
  transition:var(--ansar-transition);
}

.ansar-cta-btn-primary:hover{
  background:#dba63a;
  transform:translateY(-3px);
  box-shadow:0 16px 32px -8px rgba(201,149,42,0.6);
}

.ansar-cta-btn-primary:hover .ansar-icon{
  transform:translateX(3px);
}

.ansar-cta-btn-secondary{
  background:transparent;
  color:var(--ansar-primary);
  border-color:rgba(11,30,64,0.25);
}

.ansar-cta-btn-secondary:hover{
  border-color:var(--ansar-primary);
  background:rgba(11,30,64,0.05);
  transform:translateY(-3px);
}

.ansar-cta-meta{
  font-size:12.5px;
  color:var(--ansar-text-muted);
  margin:0;
}

.ansar-cta-meta a{
  color:var(--ansar-primary);
  text-decoration:underline;
  text-underline-offset:2px;
}

.ansar-cta-meta a:hover{
  color:var(--ansar-secondary);
}

.ansar-cta-meta-sep{
  color:var(--ansar-gold);
  margin:0 6px;
}

/* ---------- Right: Qur'an quote card ---------- */
.ansar-cta-quote{
  position:relative;
  z-index:2;
  background:var(--ansar-white);
  border:2px solid rgba(201,149,42,0.5);
  border-radius:var(--ansar-radius-md);
  padding:26px 26px;
  box-shadow:0 12px 30px -14px rgba(11,30,64,0.18);
}

.ansar-cta-quote-mark{
  width:26px;
  height:20px;
  color:var(--ansar-gold);
  margin-bottom:12px;
}

.ansar-cta-quote-mark--end{
  position:absolute;
  right:22px;
  bottom:18px;
  margin-bottom:0;
  transform:rotate(180deg);
  opacity:0.9;
}

.ansar-cta-quote-text{
  font-size:15px;
  line-height:1.7;
  font-style:italic;
  color:var(--ansar-primary);
  margin:0 0 14px;
}

.ansar-cta-quote-ref{
  font-size:12.5px;
  font-weight:600;
  color:var(--ansar-secondary);
  font-style:normal;
}

/* ---------- Load-in animation (CSS-only, no JS dependency) ---------- */
@keyframes ansarCtaFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.ansar-animate{
  animation:ansarCtaFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

.ansar-cta-text{ animation-delay:0.05s; }
.ansar-cta-quote{ animation-delay:0.18s; }

@media (prefers-reduced-motion: reduce){
  .ansar-animate{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .ansar-cta-banner{
    grid-template-columns:1fr;
    padding:40px 32px;
    gap:32px;
  }
  .ansar-cta-subtext{ max-width:100%; }
  .ansar-cta-skyline{ width:60%; opacity:0.1; }
}

@media (max-width:600px){
  .ansar-cta{ padding:60px 0; }
  .ansar-cta-container{ padding-left:16px; padding-right:16px; }
  .ansar-cta-banner{ padding:32px 22px; border-radius:var(--ansar-radius-md); }
  .ansar-cta-title{ font-size:25px; }
  .ansar-cta-buttons{ flex-direction:column; }
  .ansar-btn{ width:100%; }
  .ansar-cta-meta{ line-height:1.8; }
  .ansar-cta-meta-sep{ display:block; margin:0; height:0; width:0; overflow:hidden; }
}

/* ansar network */

.ansar-scope{
  --ansar-primary:#0B1E40;
  --ansar-secondary:#1a6b58;
  --ansar-accent-green:#20C076;
  --ansar-gold:#c9952a;
  --ansar-dark-bg:#0A1533;
  --ansar-light-gray:#E5E5E5;
  --ansar-dark-accent:#1A170F;
  --ansar-cream:#FAF8F2;
  --ansar-white:#FFFFFF;
  --ansar-text-muted:#5B6472;
  --ansar-radius-lg:24px;
  --ansar-radius-md:16px;
  --ansar-radius-sm:10px;
  --ansar-shadow-soft:0 20px 50px -20px rgba(11,30,64,0.18);
  --ansar-shadow-card:0 10px 30px -10px rgba(11,30,64,0.15);
  --ansar-transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  font-family:'Poppins', sans-serif;
}

.ansar-scope *{ box-sizing:border-box; }

.ansar-section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.ansar-container{
  max-width:1400px;
  margin:0 auto;
  padding-left:30px;
  padding-right:30px;
  position:relative;
  z-index:2;
}

.ansar-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.14em;
  flex-shrink:0;
}


.ansar-stats-bar .ansar-icon{
  width:2em;
  height:2em;
  }



/* ---------- Section ---------- */
.ansar-network{
  background:var(--ansar-cream);
  padding:90px 0 20px;
}

.ansar-network-pattern{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0.04;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B1E40' stroke-width='1.2'%3E%3Cpath d='M60 4 L94 30 L94 90 L60 116 L26 90 L26 30 Z'/%3E%3Cpath d='M60 22 L80 38 L80 82 L60 98 L40 82 L40 38 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---------- Outer Card ---------- */
.ansar-network-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  background:var(--ansar-white);
  border-radius:var(--ansar-radius-lg);
  box-shadow:var(--ansar-shadow-soft);
  border:1px solid rgba(11,30,64,0.07);
  overflow:hidden;
}

.ansar-network-divider{
  background:linear-gradient(180deg, transparent, rgba(11,30,64,0.12) 15%, rgba(11,30,64,0.12) 85%, transparent);
}

.ansar-network-col{
  padding:48px 44px;
}

.ansar-network-col.ansar-network-col--right {
  padding:90px 44px 48px;
}

.ansar-network-col-title{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:26px;
  color:var(--ansar-primary);
  margin:0 0 12px;
  letter-spacing:-0.3px;
}

.ansar-network-col-intro{
  font-size:14.5px;
  line-height:1.7;
  color:var(--ansar-text-muted);
  margin:0 0 28px;
}

/* ---------- Left column: Live Snapshot stats ---------- */
.ansar-network-stats{
  background:var(--ansar-cream);
  border:1px solid rgba(11,30,64,0.07);
  border-radius:var(--ansar-radius-md);
  padding:18px 20px;
  margin-bottom:32px;
}

.ansar-network-stats-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.ansar-network-stat{
  font-size:13.5px;
  color:var(--ansar-primary);
  font-weight:500;
}

.ansar-network-stat strong{
  color:var(--ansar-secondary);
  font-weight:700;
}

.ansar-network-dot{
  color:var(--ansar-gold);
  font-size:12px;
}

.ansar-network-stats-note{
  font-size:11.5px;
  line-height:1.5;
  color:var(--ansar-text-muted);
  font-style:italic;
  margin:0;
}

.ansar-network-subheading{
  font-size:16px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--ansar-secondary);
  margin:0 0 18px;
}

/* ---------- Left column: "What's Included" list ---------- */
.ansar-network-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.ansar-network-list li{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.ansar-network-icon-box{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:var(--ansar-radius-sm);
  background:var(--ansar-cream);
  border:1px solid rgba(201,149,42,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--ansar-transition);
}

.ansar-network-list li:hover .ansar-network-icon-box{
  background:rgba(201,149,42,0.14);
  transform:translateY(-2px);
}

.ansar-network-icon-box .ansar-icon{
  width:20px;
  height:20px;
  color:var(--ansar-secondary);
}

.ansar-network-item-title{
  font-size:16px;
  font-weight:600;
  color:var(--ansar-primary);
  margin:0 0 4px;
}

.ansar-network-item-desc{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ansar-text-muted);
  margin:0;
}

/* ---------- Right column: numbered step timeline ---------- */
.ansar-network-steps{
  list-style:none;
  margin:0;
  padding:0;
}

.ansar-network-step{
  display:flex;
  gap:16px;
  position:relative;
  padding-bottom:28px;
}

.ansar-network-step:last-child{
  padding-bottom:0;
}

.ansar-network-step-marker{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:26px;
}

.ansar-network-step-number{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ansar-accent-green);
  color:var(--ansar-white);
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  box-shadow:0 4px 10px -2px rgba(32,192,118,0.5);
}

.ansar-network-step-marker::after{
  content:"";
  position:absolute;
  top:28px;
  bottom:-28px;
  left:50%;
  width:2px;
  background:repeating-linear-gradient(180deg, rgba(201,149,42,0.4) 0 4px, transparent 4px 8px);
  transform:translateX(-50%);
  z-index:1;
}

.ansar-network-step:last-child .ansar-network-step-marker::after{
  display:none;
}

.ansar-network-step-body{
  padding-top:3px;
}

.ansar-network-step-title{
  font-size:16.5px;
  font-weight:600;
  color:var(--ansar-primary);
  margin:0 0 5px;
}

/* ---------- Connection illustration: mosque + volunteer ----------
   A proper illustrative scene (not just small icons) showing the
   masjid and a volunteer, with an animated connector between them
   representing the trust Ansar builds. Fills the space below the
   (shorter) numbered list. */
.ansar-network-illustration{
  margin-top:32px;
  padding:30px 24px 24px;
  background:linear-gradient(135deg, var(--ansar-cream) 0%, rgba(201,149,42,0.07) 100%);
  border:1px solid rgba(201,149,42,0.2);
  border-radius:var(--ansar-radius-md);
}

.ansar-network-illu-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.ansar-network-illu-figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.ansar-network-illu-circle{
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--ansar-white);
  border:2px solid rgba(201,149,42,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -12px rgba(11,30,64,0.18);
}

.ansar-network-illu-circle--mosque{
  border-color:rgba(11,30,64,0.18);
}

.ansar-network-illu-art{
  width:56px;
  height:56px;
}

.ansar-network-illu-circle--mosque .ansar-network-illu-art{
  color:var(--ansar-primary);
}

.ansar-network-illu-circle--volunteer .ansar-network-illu-art{
  color:var(--ansar-secondary);
}

.ansar-network-illu-caption{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:var(--ansar-primary);
}

/* Connector between the two figures: a dashed line with a dot that
   continuously travels from the masjid to the volunteer, standing
   in for the request/trust that flows between them. */
.ansar-network-illu-connector{
  position:relative;
  flex:1;
  min-width:56px;
  max-width:120px;
  height:2px;
  margin:0 6px 30px;
  background-image:repeating-linear-gradient(90deg, rgba(201,149,42,0.55) 0 6px, transparent 6px 12px);
}

.ansar-network-illu-connector-dot{
  position:absolute;
  top:50%;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ansar-accent-green);
  box-shadow:0 0 8px rgba(32,192,118,0.7);
  transform:translate(-50%, -50%);
  animation:ansarConnectorTravel 2.6s ease-in-out infinite;
}

@keyframes ansarConnectorTravel{
  0%{ left:0%; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ansar-network-illu-connector-dot{
    animation:none;
    left:50%;
    opacity:1;
  }
}

.ansar-network-illu-tagline{
  text-align:center;
  font-size:13px;
  line-height:1.6;
  color:var(--ansar-text-muted);
  margin:20px 0 0;
}

.ansar-network-step-desc{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ansar-text-muted);
  margin:0;
}

/* ---------- Load-in animation (CSS-only, no JS dependency) ---------- */
@keyframes ansarNetworkFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.ansar-animate{
  animation:ansarNetworkFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

.ansar-network-col--left{ animation-delay:0.1s; }
.ansar-network-col--right{ animation-delay:0.22s; }

@media (prefers-reduced-motion: reduce){
  .ansar-animate{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ansar-network-card{
    grid-template-columns:1fr;
  }
  .ansar-network-divider{
    height:1px;
    width:100%;
    background:linear-gradient(90deg, transparent, rgba(11,30,64,0.12) 15%, rgba(11,30,64,0.12) 85%, transparent);
  }
  .ansar-network-col, .ansar-network-col.ansar-network-col--right{
    padding:40px 34px;
  }

}

@media (max-width:600px){
  .ansar-network{ padding:60px 0; }
  .ansar-container{ padding-left:20px; padding-right:20px; }
  .ansar-network-col{ padding:32px 24px; }
  .ansar-network-col-title{ font-size:22px; }
  .ansar-network-stats-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .ansar-network-dot{ display:none; }
  .ansar-network-illustration{ padding:26px 18px 20px; }
  .ansar-network-illu-circle{ width:78px; height:78px; }
  .ansar-network-illu-art{ width:44px; height:44px; }
  .ansar-network-illu-connector{ min-width:36px; margin:0 4px 26px; }
}

@media (max-width:1360px){
.ansar-container {
    margin: 20px auto 0;  
}   

.ansar-hero-inner {
    grid-template-columns: 1.2fr 0.8fr;
}

.ansar-trust-strip li {
    font-size: 13px;
    letter-spacing: -0.4px;
}


}