/* =========================================================
   তাহফিজুল কুরআন ইন্টারন্যাশনাল একাডেমি — কাস্টম স্টাইলশিট
   (প্যাস্টেল পিংক/পার্পল থিম + ভ্যানিলা সিএসএস রিপ্লেসমেন্ট)
   ========================================================= */

:root{
  --sky-2:linear-gradient(135deg, #FDF1DD 0%, #F6E4D8 58%, #F4D8E9 100%);
  --sky-2-solid:#F6E4D8;
  --white:#FFFFFF;
  --blue:#6FC3E8;
  --blue-deep:#3FA6D6;
  --pink:#F7A8CB;
  --pink-deep:#E5789F;
  --purple:#C6A8EE;
  --purple-deep:#9C6FDD;
  --ink:#2E3A59;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Noto Sans Bengali','Noto Serif Bengali',serif;
  background:var(--white);
  color:var(--ink);
  margin:0;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,.heading,.title-main{
  font-family:'Noto Serif Bengali', serif;
  font-weight:900;
}
.arabic{ font-family:'Amiri', serif; }

.accent-text{ color:var(--purple-deep); }

.container-x{ max-width:1230px; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }

/* সেকশন অ্যাংকরে স্ক্রল করলে স্টিকি হেডারের নিচে ঠিক জায়গায় থামবে */
section[id]{ scroll-margin-top:90px; }

/* জ্যামিতিক ডিভাইডার (পিংক-পার্পল) */
.motif-divider{
  height:12px;
  background-image:
    linear-gradient(45deg, transparent 45%, var(--purple) 45%, var(--purple) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--pink) 45%, var(--pink) 55%, transparent 55%);
  background-size:12px 12px;
  background-repeat:repeat-x;
  opacity:.5;
}

/* ================= লোগো ================= */
.brand-logo{ width:42px; height:42px; border-radius:45%; overflow:hidden; filter:drop-shadow(0 2px 6px rgba(156,111,221,.35)); }

/* ================= হেডার ================= */
header.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(198,168,238,.4);
}

.nav-link{ position:relative; padding:.4rem .1rem; transition:color .2s ease; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:inherit; white-space: nowrap; }
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg, var(--pink-deep), var(--purple-deep));
  border-radius:2px;
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--purple-deep); }
.nav-link.active::after{ width:100%; }

/* মোবাইল হ্যামবার্গার */
.hamburger-btn{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--purple);
  background:rgba(198,168,238,.12);
  transition:box-shadow .2s ease, transform .15s ease;
  cursor:pointer;
}
.hamburger-btn:active{ box-shadow:0 0 14px rgba(198,168,238,.5); transform:scale(.95); }

/* মোবাইল ড্রয়ার */
.mobile-drawer{
  position:fixed;top:0;right:0;height:100%;width:80%;max-width:320px;
  background:var(--white);
  z-index:70;
  transform:translateX(100%);
  transition:transform .32s ease;
  box-shadow:-12px 0 36px rgba(156,111,221,.18);
  border-left:2px solid var(--purple);
  overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.drawer-overlay{
  position:fixed;inset:0;background:rgba(46,58,89,.45);z-index:65;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.drawer-overlay.show{ opacity:1;pointer-events:auto; }
.drawer-link{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.25rem;font-weight:600;
  min-height:52px;
  border-bottom:1px solid rgba(198,168,238,.18);
  transition:background .2s ease, color .2s ease;
  text-decoration:none;
  color:inherit;
}
.drawer-link:hover, .drawer-link.active{
  background:linear-gradient(90deg, rgba(198,168,238,.18), transparent);
  color:var(--purple-deep);
}

/* ================= হিরো — বাবল ও ওয়েভি রিবন ডিজাইন ================= */
.hero-bg{
  position:relative;
  background:#BEE7F6;
  color:var(--ink);
  overflow:hidden;
}
.hero-wave{ position:absolute; left:0; width:100%; pointer-events:none; }
.hero-wave-top{ top:0; }
.hero-wave-bottom{ bottom:0; transform:scaleY(-1); }

.hero-blob{
  position:absolute; border-radius:50%; pointer-events:none;
  box-shadow: inset -6px -8px 16px rgba(0,0,0,.08), inset 5px 6px 12px rgba(255,255,255,.65), 0 8px 16px rgba(46,58,89,.12);
}
.blob-1{ width:78px;height:78px; background:radial-gradient(circle at 32% 28%, #ffffff 0%, #F7BBD9 20%, #EE86BC 60%, #D766A0 100%); top:8%; left:5%; }
.blob-2{ width:46px;height:46px; background:radial-gradient(circle at 32% 28%, #ffffff 0%, #E4C9F9 20%, #B482E8 65%, #9A63D6 100%); top:16%; right:9%; }
.blob-3{ width:64px;height:64px; background:radial-gradient(circle at 32% 28%, #ffffff 0%, #F7BBD9 20%, #EE86BC 60%, #D766A0 100%); bottom:10%; right:10%; }
.blob-4{ width:40px;height:40px; background:radial-gradient(circle at 32% 28%, #ffffff 0%, #F7BBD9 20%, #EE86BC 60%, #D766A0 100%); bottom:18%; left:14%; }

.hero-confetti{ position:absolute; border-radius:4px; pointer-events:none; box-shadow:0 3px 6px rgba(46,58,89,.15); }
.confetti-1{ width:10px;height:26px; background:#B482E8; top:5%; left:14%; transform:rotate(-18deg); }
.confetti-2{ width:9px;height:22px; background:#7EC8E3; top:58%; left:3%; transform:rotate(20deg); }
.confetti-3{ width:9px;height:24px; background:#EE86BC; top:78%; left:22%; transform:rotate(-12deg); }
.confetti-4{ width:9px;height:22px; background:#B482E8; bottom:6%; right:20%; transform:rotate(16deg); }
.confetti-5{ width:9px;height:24px; background:#7EC8E3; top:30%; right:22%; transform:rotate(-22deg); }

.hero-photo-ring{
  width:150px;height:150px;border-radius:50%;
  padding:5px;
  background:linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  box-shadow:0 10px 30px rgba(156,111,221,.3), 0 0 0 4px rgba(255,255,255,.7);
  margin:0 auto 1.25rem;
}
.hero-photo-ring img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:3px solid #fff;
}

/* ================= বোতাম ================= */
.btn-primary{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg, #F6DAB9 0%, #F0B7A6 55%, #E9A6AC 100%);
  color:var(--ink);font-weight:700;
  padding:.95rem 2rem;border-radius:10px;
  min-height:48px;
  box-shadow:0 10px 26px rgba(233,166,172,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-40%;width:35%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:shimmerMove 3.2s ease-in-out infinite;
}
@keyframes shimmerMove{
  0%{ left:-40%; }
  55%{ left:120%; }
  100%{ left:120%; }
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(233,166,172,.6);
}
.btn-primary:active{ transform:translateY(-1px) scale(.98); }

.btn-outline{
  border:1.5px solid var(--purple-deep);color:var(--purple-deep);font-weight:700;
  padding:.9rem 1.9rem;border-radius:10px;
  min-height:48px;
  display:inline-flex;align-items:center;gap:.6rem;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
  background:rgba(198,168,238,.08);
  text-decoration:none;
}
.btn-outline:hover{
  background:rgba(198,168,238,.2);
  box-shadow:0 0 20px rgba(198,168,238,.35);
  transform:translateY(-2px);
}

#contact .btn-outline{
  border:0;
  background:linear-gradient(135deg, #F6DAB9 0%, #F0B7A6 55%, #E9A6AC 100%);
  color:var(--ink);
  box-shadow:0 10px 26px rgba(233,166,172,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
}
#contact .btn-outline:hover{
  background:linear-gradient(135deg, #F6DAB9 0%, #F0B7A6 55%, #E9A6AC 100%);
  box-shadow:0 16px 34px rgba(233,166,172,.6);
}

/* ================= কার্ড ================= */
.card{
  background:var(--white);
  border:1px solid rgba(198,168,238,.25);
  border-radius:12px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--purple);
  box-shadow:0 18px 34px rgba(156,111,221,.18);
}

/* ================= অ্যাকর্ডিয়ন ================= */
.accordion-btn{ min-height:52px; background:transparent; border:none; cursor:pointer; }
.accordion-btn.active .chev{ transform:rotate(180deg); color:var(--purple-deep); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }

/* ================= ফ্লোটিং বোতাম ================= */
.fab{
  position:fixed;right:20px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.fab:hover{ transform:scale(1.08); }
#whatsapp-fab{ bottom:24px;background:#25D366;color:#fff;font-size:1.6rem; box-shadow:0 8px 20px rgba(0,0,0,.22), 0 0 18px rgba(37,211,102,.4); }

.hadith-symbol{ color:var(--purple-deep); font-size:2rem; line-height:1; font-weight:900; letter-spacing:.05em; }

/* ================= লাইটবক্স ================= */
.lightbox{
  position:fixed;inset:0;background:rgba(46,58,89,.85);
  display:none;align-items:center;justify-content:center;z-index:100;padding:2rem;
  cursor:pointer;
}
.lightbox.show{ display:flex; }

::selection{ background:var(--purple); color:#fff; }

a, button{ -webkit-tap-highlight-color:transparent; }
select{ min-height:40px; }

/* ================= ভিউ-হাইডিং (পেজ-ভিউ/নেভিগেশন) ================= */
.page-hidden{ display:none !important; }

/* ================= সনদপত্র গ্যালারি ================= */
.cert-card{ position:relative; overflow:hidden; }
.cert-card img{
  height:230px; width:100%; object-fit:contain;
  background:#fff; border-radius:6px; padding:8px;
  border:1px solid rgba(198,168,238,.25);
}

/* ================= ফুটার ================= */
.footer-col{ text-align:center; }

/* ================= স্ক্রলবার ================= */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--sky-2); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--blue), var(--purple));
  border-radius:10px;
  border:2px solid var(--sky-2-solid);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, var(--blue-deep), var(--purple-deep)); }
html{ scrollbar-width:thin; scrollbar-color:var(--purple) var(--sky-2-solid); }

/* ================= আরবি (RTL) সাপোর্ট ================= */
body.lang-ar, body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .heading{
  font-family:'Amiri', serif;
}
[dir="rtl"] .mobile-drawer{ right:auto; left:0; border-left:none; border-right:2px solid var(--purple); transform:translateX(-100%); }
[dir="rtl"] .mobile-drawer.open{ transform:translateX(0); }
[dir="rtl"] .mobile-drawer{ box-shadow:12px 0 36px rgba(156,111,221,.18); }
[dir="rtl"] .fab{ right:auto; left:20px; }
[dir="rtl"] .nav-link::after{ left:auto; right:0; }

/* ================= ইমোজি আইকন ================= */
.icon-emoji{
  display:inline-block;
  line-height:1;
  filter:drop-shadow(0 2px 3px rgba(46,58,89,.18));
}

/* =========================================================
   TAILWIND UTILITY REPLACEMENTS (PURE VANILLA CSS)
   ========================================================= */

/* Display & Flexbox */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Grid Layout */
.grid { display: grid; }

/* Spacing / Gap */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-12 { gap: 3rem; }

/* Space Y Utility */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Padding */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-4 { padding-bottom: 1rem; }

/* Margin */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-8 { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Sizing & Alignment */
.w-full { width: 100%; }
.max-w-xs { max-width: 20rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-\[85vh\] { max-height: 85vh; }
.relative { position: relative; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Typography & Font Weight */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.tracking-wide { letter-spacing: 0.025em; }

/* Colors, Opacity, Borders, Shadows */
.bg-transparent { background-color: transparent; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }

.border { border: 1px solid rgba(198,168,238,.4); }
.border-b { border-bottom: 1px solid rgba(198,168,238,.4); }
.rounded { border-radius: 0.375rem; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.object-cover { object-fit: cover; }
.cursor-pointer { cursor: pointer; }
.transition-transform { transition: transform 0.2s ease; }

/* Responsive Media Queries matching Tailwind Breakpoints */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}