
  @font-face {
    font-family: 'regular';
    src: url('assamese/fonts/regular.woff2') format('truetype');
  }
 
:root{
  --primary:#0f766e;
  --primary-dark:#115e59;
  --primary-light:#14b8a6;
  --accent:#f97316;
  --accent-dark:#ea580c;
  --gold:#fbbf24;
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --success:#10b981;
  --danger:#ef4444;
        --gradient-nav: linear-gradient(to right, hsl(150, 60%, 75%), hsl(200, 70%, 76%));
              --gradient-accent: linear-gradient(to right, hsl(10, 80%, 63%), hsl(20, 75%, 72%));
                    --gradient-nav: linear-gradient(to right, hsl(150, 60%, 75%), hsl(200, 70%, 76%));
  --shadow-sm:0 4px 12px rgba(15,23,42,.06);
  --shadow-md:0 12px 30px rgba(15,23,42,.10);
  --shadow-lg:0 25px 60px rgba(15,118,110,.25);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{scroll-behavior:smooth}
body{
  font-family:'regular',serif;
  background:var(--bg);
  color:var(--text);
 
  overflow-x:hidden;
}
.en{font-family:'Poppins',sans-serif;direction:ltr;display:inline-block}
    
    .nav-lang {
  display: flex;
  align-items: center;
  gap: 10px;
}
    /* === NAVBAR === */
    .navbar {
      position: sticky; top: 0; z-index: 50;
      background: var(--gradient-nav);
      box-shadow: var(--card-shadow);
      padding: 0.75rem 1rem;
    }
    .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-brand {
  text-transform: uppercase;
}

.nav-brand .my {
  color: #0d3b66;
}

.nav-brand .jamia {
  color: #ff3d00;
  text-shadow: 0 2px 10px rgba(255, 61, 0, 0.6);
}
    .nav-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: var(--primary); cursor: pointer; }
    .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .nav-links a {
      padding: 0.5rem 1rem; border-radius: 50px;
      text-decoration: none; color: inherit; 
      background: var(--gradient-accent); color: var(--accent-fg);
      font-size: 0.9rem; font-weight: 600;
      transition: transform 0.3s;
    }
    .nav-links a:hover { transform: scale(1.05); }

    @media (max-width: 768px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none; flex-direction: column;
        position: absolute; top: 56px; right: 0; width: 55%;
        background: var(--gradient-nav); border-radius: 0 0 0 1rem;
        padding: 1rem; box-shadow: var(--card-shadow); gap: 0.5rem;
      }
      .nav-links.open { display: flex; }
    }
    
/* Links Style */
.nav-lang a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  transition: all 0.3s ease;
}

/* Hover Effect */
.nav-lang a:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.05);
}

/* Active Language (optional) */
.nav-lang a.active {
  background: #fff;
  color: #0f766e; /* match your theme */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-lang {
    gap: 6px;
  }

  .nav-lang a {
    font-size: 0.8rem;
    padding: 8px 8px;
  }
}
/* ===== HERO ===== */
.hero{
  position:relative;
  padding:80px 20px 60px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(20,184,166,.18), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(249,115,22,.15), transparent 50%),
    linear-gradient(180deg,#ecfeff 0%,#f0fdf4 100%);
  overflow:hidden;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;z-index:0;
}
.hero::before{width:300px;height:300px;background:var(--primary-light);top:-80px;right:-80px;animation:float 8s ease-in-out infinite}
.hero::after{width:250px;height:250px;background:var(--accent);bottom:-60px;left:-60px;animation:float 10s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.hero-inner{position:relative;z-index:2;max-width:800px;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  padding:8px 18px;border-radius:50px;font-size:18px;font-weight:600;
  color:var(--primary-dark);box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.eyebrow i{color:var(--accent)}
.hero h1{
  font-size:clamp(28px,5vw,46px);font-weight:800;line-height:1.4;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:16px;
}
.hero p{font-size:clamp(15px,2vw,18px);color:var(--muted);max-width:600px;margin:0 auto 30px}

/* ===== PLANS ===== */
.plans-section{padding:40px 20px 80px;max-width:1200px;margin:0 auto}
.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:24px;align-items:stretch;
}

.plan-card{
  position:relative;background:#fff;border-radius:var(--radius);
  padding:25px 18px;border:2px solid var(--border);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.plan-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(20,184,166,.05),rgba(249,115,22,.05));
  opacity:0;transition:.4s;
}
.plan-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--primary-light)}
.plan-card:hover::before{opacity:1}
.plan-card.featured{
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--primary),var(--accent)) border-box;
  transform:scale(1.04);box-shadow:var(--shadow-lg);
}
.plan-card.featured:hover{transform:scale(1.04) translateY(-8px)}

.badge-top{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-family:'Poppins',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:1px;padding:6px 20px;
  border-radius:0 0 12px 12px;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(249,115,22,.4);
}

.plan-icon{
  width:64px;height:64px;border-radius:18px;
  display:grid;place-items:center;font-size:26px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  margin:10px 0 18px;box-shadow:0 8px 20px rgba(15,118,110,.3);
  position:relative;z-index:1;
}
.plan-card.featured .plan-icon{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 20px rgba(249,115,22,.4);
}

.plan-name{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:24px;color:var(--text);margin-bottom:6px;position:relative;z-index:1;
}
.plan-tag{font-size:24px;color:var(--muted);margin-bottom:12px;position:relative;z-index:1}

.price-wrap{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:6px;position:relative;z-index:1;
  font-family:'Poppins',sans-serif;direction:ltr;justify-content:flex-start;
}
.price-currency{font-size:22px;font-weight:600;color:var(--text)}
.price-amount{
  font-size:48px;font-weight:800;color:var(--primary-dark);
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;
}
.plan-card.featured .price-amount{
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-period{font-size:15px;color:var(--muted);font-weight:500}
.price-old{
  font-family:'Poppins',sans-serif;direction:ltr;
  font-size:15px;color:var(--muted);text-decoration:line-through;
  margin-bottom:0px;display:block;position:relative;z-index:1;
}

.divider{height:1px;background:var(--border);margin:10px 0;position:relative;z-index:1}

.features-list{list-style:none;margin-bottom:24px;flex-grow:1;position:relative;z-index:1}
.features-list li{
  display:flex;align-items:center;gap:5px;
  padding:4px 0;font-size:18.5px;color:#334155;
}
.features-list li i{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;flex-shrink:0;
}
.features-list li.ok i{background:rgba(16,185,129,.15);color:var(--success)}
.features-list li.no i{background:rgba(239,68,68,.1);color:var(--danger)}
.features-list li.no{color:var(--muted);text-decoration:line-through;opacity:.7}

.btn-plan{
  width:100%;border:none;cursor:pointer;
  padding:14px 22px;border-radius:14px;
  font-family:'regular','Poppins',sans-serif;
  font-size:16px;font-weight:700;
  background:#f1f5f9;color:var(--text);
  transition:.3s;display:flex;align-items:center;justify-content:center;gap:10px;
  position:relative;z-index:1;
}
.btn-plan:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,118,110,.3)}
.btn-plan.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;box-shadow:0 8px 20px rgba(249,115,22,.35);
}
.btn-plan.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(249,115,22,.5)}


/* ===== FAQ ===== */
.faq-section{
  max-width:800px;margin:0 auto;padding:0px 20px 80px;
}
.section-title{
  text-align:center;font-size:clamp(28px,4vw,34px);
  font-weight:800;margin-bottom:8px;color:var(--text);
}
.section-sub{text-align:center;color:var(--muted);margin-bottom:26px}

.faq-item{
  background:#fff;border-radius:16px;margin-bottom:12px;
  border:1px solid var(--border);overflow:hidden;transition:.3s;
}
.faq-item:hover{border-color:var(--primary-light);box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  padding:18px 22px;display:flex;justify-content:space-between;align-items:center;
  font-family:inherit;font-size:19px;font-weight:600;color:var(--text);text-align:right;
}
.faq-q i{transition:.3s;color:var(--primary)}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  padding:0 22px;color:var(--muted);font-size:18px;
}
.faq-item.open .faq-a{max-height:300px;padding:0 22px 18px}

/* ===== CTA ===== */
.cta-banner{
  max-width:1100px;margin:0 auto 0px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  border-radius:var(--radius);padding:50px 30px;
  text-align:center;color:#fff;position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(249,115,22,.3),transparent 70%);
  top:-100px;right:-100px;border-radius:50%;
}
.cta-banner h3{font-size:clamp(22px,3vw,30px);margin-bottom:10px;position:relative}
.cta-banner p{opacity:.9;margin-bottom:4px;position:relative}
.cta-banner a{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:var(--primary-dark);
  padding:14px 32px;border-radius:50px;text-decoration:none;
  font-weight:700;font-size:16px;transition:.3s;position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.cta-banner a:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,0,0,.3)}



/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .plan-card.featured{transform:none}
  .plan-card.featured:hover{transform:translateY(-8px)}
  .hero{padding:50px 16px 40px}
}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .6s forwards}
.fade-up:nth-child(2){animation-delay:.15s}
.fade-up:nth-child(3){animation-delay:.3s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ===== 350+ JOINED MADARIS SECTION ===== */
.joined-madaris-section {
  padding: 80px 20px;
  background: 
    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%),
    radial-gradient(circle at 20% 80%, rgba(20,184,166,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(249,115,22,0.03) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
}

.joined-madaris-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #14b8a6, #f97316, transparent);
  animation: shimmerLine 4s ease-in-out infinite;
}

@keyframes shimmerLine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* ===== MAIN STATS CONTAINER ===== */
.stats-hero {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #14b8a6, #10b981);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(20,184,166,0.3);
  margin-bottom: 30px;
  animation: badgeFloat 3s ease-in-out infinite;
}

.section-badge i {
  font-size: 20px;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.main-stat {
  font-size: clamp(64px, 20vw, 140px);
  font-weight: 900;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #10b981 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  line-height: 1;
  text-shadow: 0 20px 40px rgba(20,184,166,0.3);
  animation: counterUp 2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

.main-label {
  font-size: clamp(20px, 4vw, 28px);
  color: #334155;
  font-weight: 700;
  margin: 20px 0 40px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===== STATS GRID ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto 60px;
}

.stat-card {
  background: white;
  padding: 40px 30px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.08),
    0 8px 25px rgba(0,0,0,0.04);
  border: 1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #14b8a6, #f97316, #fbbf24);
  transition: left 0.6s ease;
}

.stat-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 35px 80px rgba(0,0,0,0.15),
    0 15px 40px rgba(20,184,166,0.2);
}

.stat-card:hover::before {
  left: 0;
}

.stat-number {
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 900;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ===== TRUST MARKS ===== */
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.trust-mark {
  padding: 20px 30px;
  background: rgba(255,255,255,0.7);
  border-radius: 16px;
  border: 2px solid rgba(20,184,166,0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #0f766e;
}

.trust-mark:hover {
  background: white;
  border-color: #14b8a6;
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(20,184,166,0.2);
}

.trust-mark i {
  font-size: 24px;
  color: #14b8a6;
}

/* ===== PARTICLE BACKGROUND ===== */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #14b8a6, transparent);
  border-radius: 50%;
  animation: particleFloat 12s linear infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; right: 15%; animation-delay: -3s; }
.particle:nth-child(3) { bottom: 30%; left: 70%; animation-delay: -6s; }
.particle:nth-child(4) { top: 80%; left: 20%; animation-delay: -9s; }

@keyframes particleFloat {
  0% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 1;
  }
  100% { 
    transform: translateY(-100vh) translateX(50px) scale(0); 
    opacity: 0;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .joined-madaris-section { padding: 60px 16px; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
  .stat-card { padding: 30px 20px; }
}

/* ===== ANIMATION TRIGGERS ===== */
@keyframes counterUp {
  to { opacity: 1; transform: translateY(0); }
}

