diff.txt

diff --git a/New/src/pages/Iqac.jsx b/New/src/pages/Iqac.jsx
index 52a81e2..e311331 100644
--- a/New/src/pages/Iqac.jsx
+++ b/New/src/pages/Iqac.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Shield, BookOpen, ExternalLink, Download, Globe, GraduationCap, Cpu, Laptop, Award, Info, Users, Target, CheckCircle2, ChevronRight, Maximize, Landmark, MessageSquare } from 'lucide-react';
+import {  Shield, BookOpen, ExternalLink, Download, Globe, GraduationCap, Cpu, Laptop, Award, Info, Users, Target, CheckCircle2, ChevronRight, Maximize, Landmark, MessageSquare , X } from 'lucide-react';
 import PageHero from '../components/PageHero';
 import SectionHeading from '../components/SectionHeading';
 
@@ -28,37 +28,38 @@ function HighlightText({ text }) {
 /* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
    COMPONENT: VISION/MISSION CARD
  ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
-const VISION_ICONS = [Target, Laptop, Globe, Cpu, Award, Info];
 
-function VisionCard({ index, item }) {
-  const Icon = VISION_ICONS[index % VISION_ICONS.length];
+const TIMELINE_ICONS = [MessageSquare, Target, CheckCircle2, Award, Shield, BookOpen, ExternalLink, Download, Globe, Cpu, Laptop, Info, Brain];
+
+function ItemCard({ index, text }) {
+  const Icon = TIMELINE_ICONS[index % TIMELINE_ICONS.length];
   return (
     <motion.div
       initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-40px" }}
-      transition={{ duration: 0.6, delay: index * 0.05, ease: [0.16, 1, 0.3, 1] }}
-      className="group relative rounded-[20px] bg-gradient-to-br from-brand-accent/[0.02] via-white to-white border border-brand-accent/10 border-l-[3px] border-l-brand-accent shadow-[0_6px_24px_rgba(0,0,0,0.04)] hover:-translate-y-[6px] hover:shadow-[0_12px_32px_rgba(0,139,139,0.1)] hover:border-brand-accent/30 transition-all duration-[250ms] ease-out mt-3 ml-3"
+      transition={{ duration: 0.6, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+      className="group relative rounded-[20px] bg-gradient-to-br from-brand-accent/[0.02] via-white to-white border border-brand-accent/10 border-l-[3px] border-l-[#fbbf24] shadow-[0_6px_24px_rgba(0,0,0,0.04)] hover:-translate-y-[6px] hover:shadow-[0_12px_32px_rgba(0,139,139,0.1)] hover:border-brand-accent/30 transition-all duration-[250ms] ease-out mt-3 ml-3"
     >
-      <div className="absolute -top-3 -left-4 w-10 h-10 rounded-full bg-brand-accent flex items-center justify-center shadow-[0_2px_4px_rgba(0,139,139,0.2)] group-hover:scale-[1.05] group-hover:shadow-[0_4px_8px_rgba(0,139,139,0.3)] transition-all duration-[250ms] ease-out z-10 border-2 border-white text-white">
-        <span className="text-[11px] font-mono font-black">{String(index + 1).padStart(2, '0')}</span>
+      <div className="absolute -top-3 -left-4 w-11 h-11 rounded-full bg-[#fbbf24] flex items-center justify-center shadow-[0_2px_4px_rgba(251,191,36,0.2)] group-hover:scale-[1.05] group-hover:shadow-[0_4px_8px_rgba(251,191,36,0.3)] transition-all duration-[250ms] ease-out z-10 border-2 border-white">
+        <span className="text-[12px] font-mono font-black text-slate-900">
+          {String(index + 1).padStart(2, '0')}
+        </span>
+        <div className="absolute top-1/2 left-full w-16 h-[2px] -translate-y-1/2 opacity-70 group-hover:opacity-100 group-hover:w-24 transition-all duration-[250ms] ease-out pointer-events-none" style={{ background: 'linear-gradient(to right, rgba(251,191,36,0.8), rgba(251,191,36,0.1), transparent)' }} />
       </div>
 
-      <div className="p-6 pt-7 flex gap-4 items-start relative z-10">
-        <div className="shrink-0 w-9 h-9 rounded-[30%] bg-brand-accent/[0.08] border border-brand-accent/40 flex items-center justify-center text-brand-accent group-hover:scale-105 transition-all duration-300">
-          <Icon size={18} />
+      <div className="p-6 pt-8 min-h-[140px] flex gap-4 items-start relative z-10">
+        <div className="shrink-0 w-10 h-10 rounded-[30%] bg-brand-accent/[0.08] border border-brand-accent/40 flex items-center justify-center text-brand-accent shadow-[0_2px_8px_rgba(0,139,139,0.1)] group-hover:scale-105 transition-all duration-300">
+          <Icon size={20} />
         </div>
-        <p className="text-[14px] font-body font-medium text-slate-700 leading-[1.7]">
-          <HighlightText text={item} />
+        <p className="text-[16px] font-body font-medium text-slate-700 leading-[1.8] group-hover:text-slate-900 transition-colors duration-[250ms] ease-out pt-1 pr-2">
+          <HighlightText text={text} />
         </p>
       </div>
     </motion.div>
   );
 }
 
-/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
-   COMPONENT: COMMITTEE MEMBER CARD
- ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
 function MemberCard({ index, member }) {
   return (
     <motion.div
@@ -68,7 +69,7 @@ function MemberCard({ index, member }) {
       transition={{ duration: 0.4, delay: index * 0.03 }}
       className="group p-4 bg-white border border-slate-100 rounded-xl hover:border-brand-accent/30 hover:shadow-md transition-all duration-300 flex items-center gap-4"
     >
-      <div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-brand-accent/10 group-hover:text-brand-accent transition-colors">
+      <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-slate-400 group-hover:bg-brand-accent/10 group-hover:text-brand-accent transition-colors">
         <Users size={18} />
       </div>
       <div>
@@ -81,6 +82,7 @@ function MemberCard({ index, member }) {
 
 export default function Iqac() {
   const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
+  const [selectedPdf, setSelectedPdf] = useState(null);
 
   const carouselPhrases = [
     { main: "INTERNAL QUALITY", highlight: "ASSURANCE CELL" },
@@ -174,7 +176,7 @@ export default function Iqac() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 + i * 0.07, ease: [0.16, 1, 0.3, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -215,7 +217,7 @@ export default function Iqac() {
                   transition={{ duration: 0.8, ease: "easeInOut" }}
                   className="absolute inset-0 flex items-center flex-wrap gap-2"
                 >
-                  <span className="font-heading font-black italic uppercase tracking-tighter text-white" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
+                  <span className="font-heading font-black italic uppercase tracking-tighter text-slate-800" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
                     {carouselPhrases[currentSentenceIdx].main}
                   </span>
                   <span className="font-heading font-black italic uppercase tracking-tighter text-brand-accent" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
@@ -229,7 +231,7 @@ export default function Iqac() {
       />
 
       {/* ΓöÇΓöÇ 02. VISION & MISSION ΓöÇΓöÇ */}
-      <section className="relative pt-24 pb-16 px-8 lg:px-24 bg-white">
+      <section className="relative pt-24 pb-0 px-8 lg:px-24 bg-white overflow-hidden">
         <SectionHeading
           title="Vision & Mission"
           tagline="The foundational quality benchmarks of NSEC."
@@ -246,7 +248,7 @@ export default function Iqac() {
             </div>
             <div className="flex flex-col gap-6">
               {visionPoints.map((p, i) => (
-                <VisionCard key={i} index={i} item={p} />
+                <ItemCard key={i} index={i} text={p} />
               ))}
             </div>
           </div>
@@ -261,16 +263,7 @@ export default function Iqac() {
             </div>
             <div className="grid grid-cols-1 gap-4">
               {missionPoints.map((p, i) => (
-                <motion.div
-                  key={i}
-                  initial={{ opacity: 0, x: 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: i * 0.05 }}
-                  className="p-4  rounded-lg border-l-2 border-brand-maroon/30 text-[13px] font-body font-medium text-slate-600 leading-relaxed"
-                >
-                  {p}
-                </motion.div>
+                <ItemCard key={i} index={i} text={p} />
               ))}
             </div>
           </div>
@@ -278,33 +271,20 @@ export default function Iqac() {
       </section>
 
       {/* ΓöÇΓöÇ 03. OBJECTIVES ΓöÇΓöÇ */}
-      <section className="relative py-16 px-8 lg:px-24 ">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <SectionHeading
           title="Functions & Objectives"
           tagline="Strategic goals for quality sustenance and enhancement."
         />
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto mt-12">
           {objectives.map((obj, i) => (
-            <motion.div
-              key={i}
-              initial={{ opacity: 0, scale: 0.9 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              className="p-6 bg-white rounded-2xl shadow-sm border border-slate-200 hover:border-brand-accent/40 transition-all duration-300"
-            >
-              <div className="w-8 h-8 rounded-lg bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-4">
-                <Award size={16} />
-              </div>
-              <p className="text-[14px] font-body font-medium text-slate-700 leading-relaxed">
-                {obj}
-              </p>
-            </motion.div>
+            <ItemCard key={i} index={i} text={obj} />
           ))}
         </div>
       </section>
 
       {/* ΓöÇΓöÇ 04. COMPOSITION ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/3 w-96 h-96 bg-brand-accent/5 rounded-full blur-3xl" />
         <SectionHeading
           title="IQAC Composition"
@@ -318,7 +298,7 @@ export default function Iqac() {
       </section>
 
       {/* ΓöÇΓöÇ 05. LINKS & REPORTS ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 overflow-hidden">
+      <section className="relative pt-16 pb-24 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="absolute inset-0 opacity-10 pointer-events-none bg-grid" />
         <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-16 relative z-10">
           <div className="lg:w-1/2">
@@ -329,11 +309,7 @@ export default function Iqac() {
                 { title: "Meeting & Action Taken Reports", url: "https://www.nsec.ac.in/page.php?id=514" },
                 { title: "AQAR Submissions", url: "https://www.nsec.ac.in/page.php?id=512" }
               ].map((link, i) => (
-                <a
-                  key={i}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <button key={i} onClick={() => setSelectedPdf(link.url)}
                   className="group flex items-center justify-between p-6 bg-white border border-slate-200 rounded-2xl hover:bg-brand-accent/5 hover:border-brand-accent/30 shadow-sm hover:shadow-md transition-all duration-300"
                 >
                   <div className="flex items-center gap-4">
@@ -343,7 +319,7 @@ export default function Iqac() {
                     <span className="text-lg font-heading font-black italic uppercase tracking-tight text-slate-700 group-hover:text-brand-accent">{link.title}</span>
                   </div>
                   <ChevronRight size={20} className="text-slate-300 group-hover:translate-x-1 group-hover:text-brand-accent transition-all" />
-                </a>
+                </button>
               ))}
             </div>
           </div>
@@ -352,19 +328,17 @@ export default function Iqac() {
             <h2 className="text-4xl font-heading font-black italic uppercase tracking-tighter text-slate-800 mb-6">Annual Reports</h2>
             <div className="grid grid-cols-2 gap-4">
               {reports.map((report, i) => (
-                <a
+                <button
                   key={i}
-                  href={report.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="p-4 bg-white border border-slate-200 rounded-xl flex items-center justify-between hover:bg-brand-maroon/5 hover:border-brand-maroon/30 shadow-sm hover:shadow-md transition-all group"
+                  onClick={() => setSelectedPdf(report.url)}
+                  className="w-full text-left focus:outline-none p-4 bg-white border border-slate-200 rounded-xl flex items-center justify-between hover:bg-brand-maroon/5 hover:border-brand-maroon/30 shadow-sm hover:shadow-md transition-all group"
                 >
                   <div className="flex items-center gap-3">
                     <Download size={16} className="text-brand-maroon group-hover:scale-110 transition-transform" />
                     <span className="text-sm font-mono font-bold text-slate-600 group-hover:text-brand-maroon">{report.year}</span>
                   </div>
                   <span className="text-[9px] font-mono font-black text-slate-400 uppercase tracking-widest group-hover:text-brand-maroon/60">PDF</span>
-                </a>
+                </button>
               ))}
             </div>
           </div>
@@ -372,6 +346,49 @@ export default function Iqac() {
       </section>
 
 
+    
+      {/* PDF Modal Preview */}
+      <AnimatePresence>
+        {selectedPdf && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setSelectedPdf(null)}
+            className="fixed inset-0 z-[200] bg-white/80 backdrop-blur-sm flex items-center justify-center p-4 lg:p-12"
+          >
+            <motion.div
+              initial={{ scale: 0.95, opacity: 0, y: 20 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              exit={{ scale: 0.95, opacity: 0, y: 20 }}
+              onClick={(e) => e.stopPropagation()}
+              className="w-full max-w-5xl h-[85vh] bg-white rounded-3xl overflow-hidden shadow-2xl border border-slate-200 flex flex-col relative"
+            >
+              <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-white/50">
+                <div className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-full bg-brand-accent/10 flex items-center justify-center text-brand-accent">
+                    <BookOpen size={16} />
+                  </div>
+                  <h3 className="text-sm font-heading font-black italic uppercase tracking-widest text-slate-800">Document Preview</h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button onClick={() => setSelectedPdf(selectedPdf)} className="p-2 rounded-full hover:bg-slate-200 text-slate-500 hover:text-slate-800 transition-colors" title="Open in new tab">
+                    <ExternalLink size={18} />
+                  </button>
+                  <button onClick={() => setSelectedPdf(null)} className="p-2 rounded-full hover:bg-red-100 text-slate-500 hover:text-red-600 transition-colors" title="Close">
+                    <Shield size={18} className="rotate-45" />
+                  </button>
+                </div>
+              </div>
+              <div className="flex-1 bg-white relative">
+                <iframe src={selectedPdf} className="absolute inset-0 w-full h-full border-0" title="PDF Preview" />
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <PdfModal selectedPdf={selectedPdf} setSelectedPdf={setSelectedPdf} />
     </div>
   );
 }
diff --git a/New/src/pages/Moocs.jsx b/New/src/pages/Moocs.jsx
index d5c1620..94a28af 100644
--- a/New/src/pages/Moocs.jsx
+++ b/New/src/pages/Moocs.jsx
@@ -41,7 +41,7 @@ function PlatformCard({ index, platform }) {
       className="group relative rounded-[20px] bg-gradient-to-br from-brand-accent/[0.02] via-white to-white border border-brand-accent/10 border-l-[3px] border-l-brand-accent shadow-[0_6px_24px_rgba(0,0,0,0.04)] hover:-translate-y-[6px] hover:shadow-[0_12px_32px_rgba(0,139,139,0.1)] hover:border-brand-accent/30 transition-all duration-[250ms] ease-out mt-3 ml-3"
     >
       {/* Number Badge */}
-      <div className="absolute -top-3 -left-4 w-11 h-11 rounded-full bg-brand-accent flex items-center justify-center shadow-[0_2px_4px_rgba(0,139,139,0.2)] group-hover:scale-[1.05] group-hover:shadow-[0_4px_8px_rgba(0,139,139,0.3)] transition-all duration-[250ms] ease-out z-10 border-2 border-white text-white">
+      <div className="absolute -top-3 -left-4 w-11 h-11 rounded-full bg-brand-accent flex items-center justify-center shadow-[0_2px_4px_rgba(0,139,139,0.2)] group-hover:scale-[1.05] group-hover:shadow-[0_4px_8px_rgba(0,139,139,0.3)] transition-all duration-[250ms] ease-out z-10 border-2 border-white text-slate-800">
         <span className="text-[12px] font-mono font-black">
           {String(index + 1).padStart(2, '0')}
         </span>
@@ -57,9 +57,9 @@ function PlatformCard({ index, platform }) {
           <p className="text-[14px] font-body font-medium text-slate-600 leading-[1.6]">
             {platform.description}
           </p>
-          <a href={platform.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-brand-accent font-mono text-[10px] uppercase tracking-widest font-black hover:gap-2 transition-all duration-200 mt-2">
+          <button onClick={() => setSelectedPdf(platform.url)} className="inline-flex items-center gap-1.5 text-brand-accent font-mono text-[10px] uppercase tracking-widest font-black hover:gap-2 transition-all duration-200 mt-2">
             Visit Platform <ExternalLink size={12} />
-          </a>
+          </button>
         </div>
       </div>
     </motion.div>
@@ -79,7 +79,7 @@ function BasketCard({ index, item }) {
       className="group relative rounded-[20px] bg-gradient-to-br from-brand-maroon/[0.04] via-white to-white border border-brand-maroon/[0.12] border-l-[3px] border-l-brand-maroon shadow-[0_6px_24px_rgba(0,0,0,0.06)] hover:-translate-y-[6px] hover:shadow-[0_12px_32px_rgba(128,0,0,0.14)] hover:border-brand-maroon/[0.22] transition-all duration-[250ms] ease-out mt-3 ml-3"
     >
       <div className="absolute -top-3 -left-4 w-11 h-11 rounded-full bg-brand-maroon flex items-center justify-center shadow-[0_2px_4px_rgba(128,0,0,0.15)] group-hover:scale-[1.05] group-hover:shadow-[0_4px_8px_rgba(128,0,0,0.25)] transition-all duration-[250ms] ease-out z-10 border-2 border-brand-accent/80">
-        <span className="text-[12px] font-mono font-black text-white">
+        <span className="text-[12px] font-mono font-black text-slate-800">
           {String(index + 1).padStart(2, '0')}
         </span>
         <div className="absolute top-1/2 left-full w-20 h-[2px] -translate-y-1/2 opacity-70 group-hover:opacity-100 group-hover:w-32 transition-all duration-[250ms] ease-out pointer-events-none" style={{ background: 'linear-gradient(to right, rgba(128,0,0,0.5), rgba(128,0,0,0.1), transparent)' }} />
@@ -93,9 +93,9 @@ function BasketCard({ index, item }) {
           <HighlightText text={item.text} />
         </p>
         {item.url && (
-          <a href={item.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-brand-maroon font-mono text-[10px] uppercase tracking-widest font-black hover:gap-2 transition-all duration-200 mt-3">
+          <button onClick={() => setSelectedPdf(item.url)} className="inline-flex items-center gap-1.5 text-brand-maroon font-mono text-[10px] uppercase tracking-widest font-black hover:gap-2 transition-all duration-200 mt-3">
             Download PDF <Download size={12} />
-          </a>
+          </button>
         )}
       </div>
     </motion.div>
@@ -103,7 +103,8 @@ function BasketCard({ index, item }) {
 }
 
 export default function Moocs() {
-  const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
+    const [selectedPdf, setSelectedPdf] = useState(null);
+const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
   const PDF_SRC = 'https://www.nsec.ac.in/notice/GUIDELINES-FOR-MOOCS-Aug-2021.pdf';
 
   const carouselPhrases = [
@@ -157,7 +158,7 @@ export default function Moocs() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 + i * 0.07, ease: [0.16, 1, 0.3, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -191,7 +192,7 @@ export default function Moocs() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 1.0 + i * 0.06, ease: [0.16, 1, 0.3, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -213,7 +214,7 @@ export default function Moocs() {
                   transition={{ duration: 0.8, ease: "easeInOut" }}
                   className="absolute inset-0 flex items-center flex-wrap gap-2"
                 >
-                  <span className="font-heading font-black italic uppercase tracking-tighter text-white" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
+                  <span className="font-heading font-black italic uppercase tracking-tighter text-slate-800" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
                     {carouselPhrases[currentSentenceIdx].main}
                   </span>
                   <span className="font-heading font-black italic uppercase tracking-tighter text-brand-accent" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>
@@ -276,19 +277,19 @@ export default function Moocs() {
             initial={{ opacity: 0, y: 24 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            className="group relative p-10 bg-slate-900 rounded-2xl border border-slate-800 shadow-xl flex flex-col gap-6 hover:shadow-[0_20px_40px_rgba(0,139,139,0.15)] hover:border-brand-accent/40 transition-all duration-500 overflow-hidden"
+            className="group relative p-10 bg-white rounded-2xl border border-slate-800 shadow-xl flex flex-col gap-6 hover:shadow-[0_20px_40px_rgba(0,139,139,0.15)] hover:border-brand-accent/40 transition-all duration-500 overflow-hidden"
           >
-            <div className="absolute inset-0 z-0 bg-slate-900/80 group-hover:bg-slate-900/60 transition-colors duration-500 rounded-2xl" />
+            <div className="absolute inset-0 z-0 bg-white/80 group-hover:bg-white/60 transition-colors duration-500 rounded-2xl" />
             <div className="flex items-center justify-between relative z-10">
-              <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center text-brand-accent group-hover:bg-brand-accent group-hover:text-white transition-all duration-300">
+              <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center text-brand-accent group-hover:bg-brand-accent group-hover:text-slate-800 transition-all duration-300">
                 <GraduationCap size={22} />
               </div>
               <span className="text-sm font-mono font-black text-brand-accent uppercase tracking-[0.2em]">SPoC-Coursera</span>
             </div>
             <div className="relative z-10">
-              <h4 className="text-xl font-heading font-black italic uppercase tracking-tighter text-white mb-2">Prof. Anupam Ghosh</h4>
-              <p className="text-sm font-mono text-white/70 uppercase tracking-widest">Head of Department, CSE (AIML)</p>
-              <p className="text-xs font-body text-white/50 mt-2">Contact for Coursera invitation and credit transfer assistance.</p>
+              <h4 className="text-xl font-heading font-black italic uppercase tracking-tighter text-slate-800 mb-2">Prof. Anupam Ghosh</h4>
+              <p className="text-sm font-mono text-slate-600 uppercase tracking-widest">Head of Department, CSE (AIML)</p>
+              <p className="text-xs font-body text-slate-600 mt-2">Contact for Coursera invitation and credit transfer assistance.</p>
             </div>
           </motion.div>
 
@@ -297,18 +298,18 @@ export default function Moocs() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.1 }}
-            className="group relative p-10 bg-slate-900 rounded-2xl border border-slate-800 shadow-xl flex flex-col gap-6 hover:shadow-[0_20px_40px_rgba(128,0,0,0.15)] hover:border-brand-maroon/40 transition-all duration-500 overflow-hidden"
+            className="group relative p-10 bg-white rounded-2xl border border-slate-800 shadow-xl flex flex-col gap-6 hover:shadow-[0_20px_40px_rgba(128,0,0,0.15)] hover:border-brand-maroon/40 transition-all duration-500 overflow-hidden"
           >
-            <div className="absolute inset-0 z-0 bg-slate-900/80 group-hover:bg-slate-900/60 transition-colors duration-500 rounded-2xl" />
+            <div className="absolute inset-0 z-0 bg-white/80 group-hover:bg-white/60 transition-colors duration-500 rounded-2xl" />
             <div className="flex items-center justify-between relative z-10">
-              <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md border border-brand-accent/30 flex items-center justify-center text-brand-accent group-hover:bg-brand-accent group-hover:text-white transition-all duration-300">
+              <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md border border-brand-accent/30 flex items-center justify-center text-brand-accent group-hover:bg-brand-accent group-hover:text-slate-800 transition-all duration-300">
                 <Info size={22} />
               </div>
               <span className="text-sm font-mono font-black text-brand-accent uppercase tracking-[0.2em]">NPTEL Steps</span>
             </div>
             <div className="relative z-10">
-              <h4 className="text-xl font-heading font-black italic uppercase tracking-tighter text-white mb-2">NPTEL-Swayam Join</h4>
-              <p className="text-[13px] font-body text-white/70">Visit Swayam portal → Search Catalog → Select Course → Join with <span className="text-brand-accent">Gmail ID</span>.</p>
+              <h4 className="text-xl font-heading font-black italic uppercase tracking-tighter text-slate-800 mb-2">NPTEL-Swayam Join</h4>
+              <p className="text-[13px] font-body text-slate-600">Visit Swayam portal → Search Catalog → Select Course → Join with <span className="text-brand-accent">Gmail ID</span>.</p>
             </div>
           </motion.div>
         </div>
@@ -327,7 +328,7 @@ export default function Moocs() {
           transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
           className="max-w-6xl mx-auto rounded-2xl overflow-hidden shadow-[0_4px_40px_rgba(0,0,0,0.08)] border border-slate-200/60 mt-12"
         >
-          <div className="flex items-center justify-between px-6 py-4 bg-slate-900">
+          <div className="flex items-center justify-between px-6 py-4 bg-white">
             <div className="flex items-center gap-5">
               <div className="flex gap-2">
                 {['bg-red-400', 'bg-yellow-400', 'bg-green-400'].map((c, i) => (
@@ -336,18 +337,18 @@ export default function Moocs() {
               </div>
               <div className="hidden sm:flex items-center gap-2 px-4 py-1.5 bg-white/[0.06] rounded-lg border border-white/[0.08]">
                 <Shield size={11} className="text-brand-accent/60" />
-                <span className="text-[10px] font-mono text-white/40 uppercase tracking-widest">
+                <span className="text-[10px] font-mono text-slate-600 uppercase tracking-widest">
                   MOOCs-Guidelines-NSEC.pdf
                 </span>
               </div>
             </div>
             <div className="flex items-center gap-2.5">
-              <a href={PDF_SRC} target="_blank" rel="noopener noreferrer" className="p-2.5 bg-brand-accent/10 text-brand-accent border border-brand-accent/20 rounded-lg hover:bg-brand-accent hover:text-white transition-all">
+              <button onClick={() => setSelectedPdf(PDF_SRC)} className="p-2.5 bg-brand-accent/10 text-brand-accent border border-brand-accent/20 rounded-lg hover:bg-brand-accent hover:text-slate-800 transition-all">
                 <Maximize size={14} />
-              </a>
-              <a href={PDF_SRC} download className="px-4 py-2 bg-brand-maroon text-white rounded-lg font-mono font-black text-[10px] uppercase tracking-[0.15em] hover:bg-white hover:text-brand-maroon transition-all">
+              </button>
+              <a href={PDF_SRC} download className="px-4 py-2 bg-brand-maroon text-slate-800 rounded-lg font-mono font-black text-[10px] uppercase tracking-[0.15em] hover:bg-white hover:text-brand-maroon transition-all">
                 Download
-              </a>
+              </button>
             </div>
           </div>
           <div className="w-full h-[78vh] bg-white">
@@ -355,6 +356,8 @@ export default function Moocs() {
           </div>
         </motion.div>
       </section>
+    
+      <PdfModal selectedPdf={selectedPdf} setSelectedPdf={setSelectedPdf} />
     </div>
   );
 }
diff --git a/New/src/pages/Naac.jsx b/New/src/pages/Naac.jsx
index 1b479ac..bdda32f 100644
--- a/New/src/pages/Naac.jsx
+++ b/New/src/pages/Naac.jsx
@@ -38,7 +38,8 @@ function HighlightText({ text }) {
 }
 
 export default function Naac() {
-  const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
+    const [selectedPdf, setSelectedPdf] = useState(null);
+const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
   const [activeCriterion, setActiveCriterion] = useState(null);
 
   const carouselPhrases = [
@@ -724,7 +725,7 @@ export default function Naac() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 + i * 0.07, ease: [0.16, 1, 0.3, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -744,7 +745,7 @@ export default function Naac() {
             <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 1.8 }} className="h-8 relative w-full mt-2">
               <AnimatePresence mode="wait">
                 <motion.div key={currentSentenceIdx} initial={{ opacity: 0, y: 10, filter: 'blur(4px)' }} animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, y: -10, filter: 'blur(4px)' }} transition={{ duration: 0.8, ease: "easeInOut" }} className="absolute inset-0 flex items-center flex-wrap gap-2">
-                  <span className="font-heading font-black italic uppercase tracking-tighter text-white" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
+                  <span className="font-heading font-black italic uppercase tracking-tighter text-slate-800" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
                   <span className="font-heading font-black italic uppercase tracking-tighter text-brand-accent" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].highlight}</span>
                 </motion.div>
               </AnimatePresence>
@@ -765,9 +766,9 @@ export default function Naac() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.1 }}
-              className="p-8 rounded-[24px] bg-slate-50 border border-slate-100 flex flex-col items-center text-center group hover:bg-white hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-500"
+              className="p-8 rounded-[24px] bg-white border border-slate-100 flex flex-col items-center text-center group hover:bg-white hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-500"
             >
-              <div className="w-16 h-16 rounded-2xl bg-brand-accent/5 border border-brand-accent/10 flex items-center justify-center text-brand-accent mb-6 group-hover:scale-110 group-hover:bg-brand-accent group-hover:text-white transition-all duration-500">
+              <div className="w-16 h-16 rounded-2xl bg-brand-accent/5 border border-brand-accent/10 flex items-center justify-center text-brand-accent mb-6 group-hover:scale-110 group-hover:bg-brand-accent group-hover:text-slate-800 transition-all duration-500">
                 <stat.icon size={32} />
               </div>
               <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-[0.3em] mb-2">{stat.label}</p>
@@ -790,7 +791,7 @@ export default function Naac() {
       </section>
 
       {/* ΓöÇΓöÇ 02.5 ABOUT IQAC & COORDINATOR ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent" />
         <div className="max-w-7xl mx-auto relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           <div>
@@ -816,22 +817,22 @@ export default function Naac() {
             <div className="absolute -inset-4 bg-brand-accent/5 rounded-[40px] blur-2xl" />
             <div className="relative bg-white border border-slate-100 rounded-[40px] p-10 shadow-xl overflow-hidden">
               <div className="flex flex-col sm:flex-row items-center gap-8 mb-8">
-                <div className="w-24 h-24 rounded-3xl bg-slate-100 overflow-hidden border-2 border-brand-accent/20 shrink-0">
+                <div className="w-24 h-24 rounded-3xl bg-white overflow-hidden border-2 border-brand-accent/20 shrink-0">
                   <img src="https://www.nsec.ac.in/images/dr-sukumar-roy.jpg" alt="Dr. Sukumar Roy" className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500" />
                 </div>
                 <div>
                   <h3 className="text-2xl font-heading font-black italic uppercase tracking-tight text-slate-900 leading-none mb-2">{iqacData.coordinator.name}</h3>
                   <p className="text-xs font-mono font-bold text-brand-accent uppercase tracking-widest mb-4">{iqacData.coordinator.role}</p>
                   <div className="flex flex-wrap gap-3">
-                    <a href={`mailto:${iqacData.coordinator.email.split(',')[0]}`} className="p-2 bg-slate-50 rounded-lg text-slate-400 hover:text-brand-accent hover:bg-brand-accent/5 transition-all"><MessageSquare size={16} /></a>
-                    <a href={`tel:${iqacData.coordinator.phone}`} className="p-2 bg-slate-50 rounded-lg text-slate-400 hover:text-brand-accent hover:bg-brand-accent/5 transition-all"><Download size={16} /></a>
+                    <a href={`mailto:${iqacData.coordinator.email.split(',')[0]}`} className="p-2 bg-white rounded-lg text-slate-400 hover:text-brand-accent hover:bg-brand-accent/5 transition-all"><MessageSquare size={16} /></a>
+                    <a href={`tel:${iqacData.coordinator.phone}`} className="p-2 bg-white rounded-lg text-slate-400 hover:text-brand-accent hover:bg-brand-accent/5 transition-all"><Download size={16} /></a>
                   </div>
                 </div>
               </div>
               <p className="text-[15px] font-body font-medium text-slate-500 leading-relaxed mb-8 border-l-2 border-slate-100 pl-6 italic">
                 "{iqacData.coordinator.desk}"
               </p>
-              <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
+              <div className="p-4 bg-white rounded-2xl border border-slate-100 flex items-center justify-between">
                 <div>
                   <p className="text-[9px] font-mono font-black text-slate-400 uppercase tracking-widest">Contact Node</p>
                   <p className="text-[11px] font-heading font-black italic text-slate-700">{iqacData.coordinator.email.split(',')[0]}</p>
@@ -847,10 +848,10 @@ export default function Naac() {
       </section>
 
       {/* ΓöÇΓöÇ 02.6 VISION, MISSION & OBJECTIVES ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white">
         <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Vision */}
-          <div className="lg:col-span-1 p-10 bg-slate-900 rounded-[40px] text-white relative overflow-hidden group">
+          <div className="lg:col-span-1 p-10 bg-white rounded-[40px] text-slate-800 relative overflow-hidden group">
             <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:scale-110 transition-transform duration-700">
               <ShieldCheck size={120} />
             </div>
@@ -861,12 +862,12 @@ export default function Naac() {
           </div>
 
           {/* Mission */}
-          <div className="lg:col-span-2 p-10 bg-slate-50 border border-slate-100 rounded-[40px] relative overflow-hidden group">
+          <div className="lg:col-span-2 p-10 bg-white border border-slate-100 rounded-[40px] relative overflow-hidden group">
             <h3 className="text-3xl font-heading font-black italic uppercase tracking-tighter text-slate-900 mb-8">Quality <span className="text-brand-accent">Mission</span></h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
               {iqacData.mission.map((item, i) => (
                 <div key={i} className="flex gap-4 group/item">
-                  <div className="w-6 h-6 rounded-lg bg-brand-accent/10 flex items-center justify-center text-brand-accent shrink-0 group-hover/item:bg-brand-accent group-hover/item:text-white transition-all">
+                  <div className="w-6 h-6 rounded-lg bg-brand-accent/10 flex items-center justify-center text-brand-accent shrink-0 group-hover/item:bg-brand-accent group-hover/item:text-slate-800 transition-all">
                     <CheckCircle2 size={12} />
                   </div>
                   <p className="text-sm font-body font-medium text-slate-600 leading-snug">{item}</p>
@@ -881,7 +882,7 @@ export default function Naac() {
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {iqacData.objectives.map((obj, i) => (
                 <div key={i} className="p-6 bg-white border border-slate-100 rounded-2xl shadow-sm hover:shadow-md transition-all">
-                  <div className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-slate-400 mb-4 font-heading font-black italic">{i + 1}</div>
+                  <div className="w-8 h-8 rounded-lg bg-white flex items-center justify-center text-slate-400 mb-4 font-heading font-black italic">{i + 1}</div>
                   <p className="text-[13px] font-body font-medium text-slate-600 leading-relaxed italic">"{obj}"</p>
                 </div>
               ))}
@@ -891,7 +892,7 @@ export default function Naac() {
       </section>
 
       {/* ΓöÇΓöÇ 02.7 IQAC COMPOSITION ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <SectionHeading title="IQAC Composition" tagline="Institutional governance and quality monitoring board." />
         <div className="max-w-7xl mx-auto mt-16 overflow-hidden">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -906,7 +907,7 @@ export default function Naac() {
               >
                 <div className="flex items-center justify-between mb-4">
                   <div className="px-2 py-1 bg-brand-accent/10 rounded text-[9px] font-mono font-black text-brand-accent uppercase tracking-widest">{member.role}</div>
-                  <div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-200 group-hover:text-brand-accent transition-colors"><ShieldCheck size={16} /></div>
+                  <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-slate-200 group-hover:text-brand-accent transition-colors"><ShieldCheck size={16} /></div>
                 </div>
                 <h4 className="text-sm font-heading font-black italic uppercase tracking-tight text-slate-800 mb-1 leading-tight group-hover:text-brand-accent transition-colors">{member.name}</h4>
                 <p className="text-[11px] font-body font-medium text-slate-400 leading-tight">{member.detail}</p>
@@ -917,12 +918,12 @@ export default function Naac() {
       </section>
 
       {/* ΓöÇΓöÇ 02.8 FUNCTIONS OF IQAC ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           <div className="order-2 lg:order-1">
             <div className="grid grid-cols-1 gap-4">
               {iqacData.functions.map((fn, i) => (
-                <div key={i} className="flex gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-100 hover:bg-white hover:shadow-lg transition-all group">
+                <div key={i} className="flex gap-4 p-4 bg-white rounded-2xl border border-slate-100 hover:bg-white hover:shadow-lg transition-all group">
                   <div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-300 group-hover:text-brand-accent group-hover:border-brand-accent/30 transition-all shrink-0">
                     <CheckCircle2 size={18} />
                   </div>
@@ -946,9 +947,9 @@ export default function Naac() {
               </div>
               <div className="grid grid-cols-3 gap-2">
                 {iqacData.annualReports.map((r, i) => (
-                  <a key={i} href={r.url} target="_blank" rel="noopener noreferrer" className="p-2 rounded-lg bg-white border border-slate-100 text-[10px] font-mono font-bold text-slate-500 hover:bg-brand-maroon hover:text-white transition-all text-center">
+                  <button key={i} onClick={() => setSelectedPdf(r.url)} className="p-2 rounded-lg bg-white border border-slate-100 text-[10px] font-mono font-bold text-slate-500 hover:bg-brand-maroon hover:text-slate-800 transition-all text-center">
                     {r.year}
-                  </a>
+                  </button>
                 ))}
               </div>
             </div>
@@ -957,13 +958,13 @@ export default function Naac() {
       </section>
 
       {/* ΓöÇΓöÇ 03. QUALITY & STATUTORY PORTALS ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden border-y border-slate-200">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden border-y border-slate-200">
         <SectionHeading title="NAAC Cycles & Statutory" tagline="Institutional evaluation history and compliance repository." />
         <div className="max-w-7xl mx-auto mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12">
           
           {/* Cycle 2 Panel */}
           <div className="bg-white rounded-[40px] border border-slate-100 shadow-xl overflow-hidden flex flex-col">
-            <div className="p-10 bg-slate-900 text-white relative">
+            <div className="p-10 bg-white text-slate-800 relative">
               <div className="absolute top-0 right-0 p-8 opacity-20"><ShieldCheck size={80} /></div>
               <span className="text-[10px] font-mono font-black text-brand-accent uppercase tracking-[0.4em] mb-2 block">Ongoing Accreditation</span>
               <h3 className="text-4xl font-heading font-black italic uppercase tracking-tighter mb-1">NAAC 2nd Cycle</h3>
@@ -973,21 +974,21 @@ export default function Naac() {
               <div className="space-y-3">
                 <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-widest mb-4">Statutory Documents</p>
                 {cycles.second.docs.map((doc, i) => (
-                  <a key={i} href={doc.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-transparent hover:border-brand-accent/30 hover:bg-white hover:shadow-lg transition-all group">
+                  <button key={i} onClick={() => setSelectedPdf(doc.url)} className="flex items-center gap-3 p-4 bg-white rounded-2xl border border-transparent hover:border-brand-accent/30 hover:bg-white hover:shadow-lg transition-all group">
                     <FileText size={16} className="text-slate-300 group-hover:text-brand-accent transition-colors" />
                     <span className="text-[11px] font-heading font-black italic uppercase tracking-tight text-slate-700 leading-none group-hover:text-slate-900">{doc.title}</span>
-                  </a>
+                  </button>
                 ))}
               </div>
               <div className="space-y-3">
                 <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-widest mb-4">AQAR Reports</p>
                 {cycles.second.aqars.map((aq, i) => (
-                  <a key={i} href={aq.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between p-4 bg-brand-accent/[0.03] rounded-2xl border border-brand-accent/10 hover:bg-brand-accent hover:text-white transition-all group">
+                  <button key={i} onClick={() => setSelectedPdf(aq.url)} className="flex items-center justify-between p-4 bg-brand-accent/[0.03] rounded-2xl border border-brand-accent/10 hover:bg-brand-accent hover:text-slate-800 transition-all group">
                     <span className="text-xs font-heading font-black italic uppercase tracking-tight">AQAR {aq.year}</span>
                     <Download size={14} className="opacity-40 group-hover:opacity-100 group-hover:translate-y-1 transition-all" />
-                  </a>
+                  </button>
                 ))}
-                <div className="p-6 bg-slate-50 rounded-3xl border border-dashed border-slate-200 mt-4">
+                <div className="p-6 bg-white rounded-3xl border border-dashed border-slate-200 mt-4">
                   <p className="text-[10px] font-mono font-bold text-slate-400 uppercase leading-relaxed text-center">Extended Profiles and DVV Clarifications are integrated in the criteria explorer below.</p>
                 </div>
               </div>
@@ -996,7 +997,7 @@ export default function Naac() {
 
           {/* Cycle 1 Panel */}
           <div className="bg-white rounded-[40px] border border-slate-100 shadow-xl overflow-hidden flex flex-col">
-            <div className="p-10 bg-slate-50 border-b border-slate-100 relative">
+            <div className="p-10 bg-white border-b border-slate-100 relative">
               <div className="absolute top-0 right-0 p-8 opacity-10 text-slate-900"><History size={80} /></div>
               <span className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-[0.4em] mb-2 block">Archival History</span>
               <h3 className="text-4xl font-heading font-black italic uppercase tracking-tighter text-slate-900 mb-1">NAAC 1st Cycle</h3>
@@ -1006,20 +1007,20 @@ export default function Naac() {
               <div className="space-y-3">
                 <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-widest mb-4">Historical Certificates</p>
                 {cycles.first.docs.map((doc, i) => (
-                  <a key={i} href={doc.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-transparent hover:border-slate-200 hover:bg-white transition-all group">
+                  <button key={i} onClick={() => setSelectedPdf(doc.url)} className="flex items-center gap-3 p-4 bg-white rounded-2xl border border-transparent hover:border-slate-200 hover:bg-white transition-all group">
                     <FileText size={16} className="text-slate-300 group-hover:text-slate-600 transition-colors" />
                     <span className="text-[11px] font-heading font-black italic uppercase tracking-tight text-slate-600 leading-none group-hover:text-slate-800">{doc.title}</span>
-                  </a>
+                  </button>
                 ))}
               </div>
               <div className="space-y-3">
                 <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-widest mb-4">AQAR (2018-2023)</p>
                 <div className="grid grid-cols-1 gap-2">
                   {cycles.first.aqars.map((aq, i) => (
-                    <a key={i} href={aq.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-transparent hover:border-slate-200 hover:bg-white transition-all group">
+                    <button key={i} onClick={() => setSelectedPdf(aq.url)} className="flex items-center justify-between p-3 bg-white rounded-xl border border-transparent hover:border-slate-200 hover:bg-white transition-all group">
                       <span className="text-[11px] font-heading font-black italic uppercase tracking-tight text-slate-500">AQAR {aq.year}</span>
                       <Download size={12} className="opacity-20 group-hover:opacity-100 transition-all" />
-                    </a>
+                    </button>
                   ))}
                 </div>
               </div>
@@ -1031,7 +1032,7 @@ export default function Naac() {
 
 
       {/* ΓöÇΓöÇ 04. CRITERION DOCUMENTS ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <SectionHeading title="Criterion-wise Data" tagline="Detailed breakdown of institutional performance metrics." />
         
         <div className="max-w-7xl mx-auto mt-12 overflow-x-auto pb-8">
@@ -1046,9 +1047,9 @@ export default function Naac() {
                 transition={{ delay: i * 0.05 }}
                 className={`group relative flex flex-col items-center text-center transition-all duration-300 ${activeCriterion === crit.id ? 'scale-105' : 'hover:scale-102'}`}
               >
-                <div className={`w-full aspect-square rounded-2xl border flex flex-col items-center justify-center p-4 transition-all duration-300 ${activeCriterion === crit.id ? 'bg-brand-accent border-brand-accent shadow-2xl' : 'bg-slate-50 border-slate-100 hover:bg-brand-accent/5 hover:border-brand-accent/30'}`}>
-                  <span className={`text-4xl font-heading font-black italic transition-colors mb-2 ${activeCriterion === crit.id ? 'text-white/40' : 'text-brand-accent/20 group-hover:text-brand-accent/40'}`}>C{crit.id}</span>
-                  <span className={`text-[9px] font-mono font-black uppercase tracking-widest transition-colors leading-tight ${activeCriterion === crit.id ? 'text-white' : 'text-slate-400 group-hover:text-slate-800'}`}>{crit.title}</span>
+                <div className={`w-full aspect-square rounded-2xl border flex flex-col items-center justify-center p-4 transition-all duration-300 ${activeCriterion === crit.id ? 'bg-brand-accent border-brand-accent shadow-2xl' : 'bg-white border-slate-100 hover:bg-brand-accent/5 hover:border-brand-accent/30'}`}>
+                  <span className={`text-4xl font-heading font-black italic transition-colors mb-2 ${activeCriterion === crit.id ? 'text-slate-600' : 'text-brand-accent/20 group-hover:text-brand-accent/40'}`}>C{crit.id}</span>
+                  <span className={`text-[9px] font-mono font-black uppercase tracking-widest transition-colors leading-tight ${activeCriterion === crit.id ? 'text-slate-800' : 'text-slate-400 group-hover:text-slate-800'}`}>{crit.title}</span>
                 </div>
                 <div className={`mt-3 flex items-center gap-1 transition-all duration-300 ${activeCriterion === crit.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
                   <span className={`text-[9px] font-mono font-bold uppercase tracking-widest italic ${activeCriterion === crit.id ? 'text-brand-accent' : 'text-brand-accent'}`}>{activeCriterion === crit.id ? 'Close Details' : 'View Metrics'}</span>
@@ -1069,7 +1070,7 @@ export default function Naac() {
               transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
               className="max-w-7xl mx-auto mt-12 overflow-hidden"
             >
-              <div className="p-8 lg:p-12 rounded-[32px] bg-slate-50 border border-slate-200 shadow-inner relative">
+              <div className="p-8 lg:p-12 rounded-[32px] bg-white border border-slate-200 shadow-inner relative">
                 <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-accent to-transparent" />
                 
                 <div className="flex flex-col lg:flex-row lg:items-center justify-between mb-12 gap-6">
@@ -1114,15 +1115,11 @@ export default function Naac() {
                           <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-widest mb-3">Enrollment Data (5 Year Cycle)</p>
                           <div className="flex flex-wrap gap-2">
                             {indicator.years.map((y, yi) => (
-                              <a
-                                key={yi}
-                                href={y.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-100 text-[10px] font-mono font-bold text-slate-600 hover:bg-brand-accent hover:text-white hover:border-brand-accent transition-all"
+                              <button key={yi} onClick={() => setSelectedPdf(y.url)}
+                                className="px-3 py-1.5 rounded-lg bg-white border border-slate-100 text-[10px] font-mono font-bold text-slate-600 hover:bg-brand-accent hover:text-slate-800 hover:border-brand-accent transition-all"
                               >
                                 {y.label}
-                              </a>
+                              </button>
                             ))}
                           </div>
                         </div>
@@ -1130,19 +1127,15 @@ export default function Naac() {
 
                       <div className="flex flex-col gap-3">
                         {indicator.links.map((link, li) => (
-                          <a
-                            key={li}
-                            href={link.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-between p-4 rounded-xl bg-slate-50/50 border border-slate-100 hover:border-brand-accent/30 hover:bg-white transition-all group/link"
+                          <button key={li} onClick={() => setSelectedPdf(link.url)}
+                            className="flex items-center justify-between p-4 rounded-xl bg-white/50 border border-slate-100 hover:border-brand-accent/30 hover:bg-white transition-all group/link"
                           >
                             <div className="flex items-center gap-3">
                               {link.type === 'pdf' ? <FileText size={16} className="text-brand-maroon" /> : <Download size={16} className="text-green-600" />}
                               <span className="text-[11px] font-mono font-bold text-slate-700 uppercase tracking-wider">{link.label}</span>
                             </div>
                             <ExternalLink size={14} className="text-slate-300 group-hover/link:text-brand-accent group-hover/link:translate-x-1 transition-all" />
-                          </a>
+                          </button>
                         ))}
                       </div>
                     </motion.div>
@@ -1157,6 +1150,8 @@ export default function Naac() {
 
 
 
+    
+      <PdfModal selectedPdf={selectedPdf} setSelectedPdf={setSelectedPdf} />
     </div>
   );
 }
diff --git a/New/src/pages/Nba.jsx b/New/src/pages/Nba.jsx
index 926f52f..57e285b 100644
--- a/New/src/pages/Nba.jsx
+++ b/New/src/pages/Nba.jsx
@@ -63,7 +63,8 @@ function ProgramCard({ index, program }) {
 }
 
 export default function Nba() {
-  const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
+    const [selectedPdf, setSelectedPdf] = useState(null);
+const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
 
   const carouselPhrases = [
     { main: "NBA", highlight: "ACCREDITED" },
@@ -98,7 +99,7 @@ export default function Nba() {
   return (
     <div className="min-h-screen bg-white">
       <PageHero
-        showParticles={true}
+        showParticles={false}
         maxHeight="33vh"
         titleStroke="NBA"
         titleFill="PROG"
@@ -115,7 +116,7 @@ export default function Nba() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 + i * 0.07, ease: [0.16, 1, 0.3, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -135,7 +136,7 @@ export default function Nba() {
             <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 1.8 }} className="h-8 relative w-full mt-2">
               <AnimatePresence mode="wait">
                 <motion.div key={currentSentenceIdx} initial={{ opacity: 0, y: 10, filter: 'blur(4px)' }} animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, y: -10, filter: 'blur(4px)' }} transition={{ duration: 0.8, ease: "easeInOut" }} className="absolute inset-0 flex items-center flex-wrap gap-2">
-                  <span className="font-heading font-black italic uppercase tracking-tighter text-white" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
+                  <span className="font-heading font-black italic uppercase tracking-tighter text-slate-800" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
                   <span className="font-heading font-black italic uppercase tracking-tighter text-brand-accent" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].highlight}</span>
                 </motion.div>
               </AnimatePresence>
@@ -150,7 +151,7 @@ export default function Nba() {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            src="https://www.nsec.ac.in/images/nba-logo.png" 
+            src="/public/assets/nba/nba_logo.png" 
             alt="NBA Logo" 
             className="h-24 md:h-32 mb-8 grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition-all duration-500 cursor-pointer"
             onClick={() => window.open('https://www.nbaind.org/', '_blank')}
@@ -158,7 +159,7 @@ export default function Nba() {
           <SectionHeading title="Accreditation Status" tagline="National Board of Accreditation (NBA) approved programs at NSEC." />
         </div>
         <div className="max-w-7xl mx-auto mt-12">
-          <div className="p-8 bg-slate-50 border border-slate-200 rounded-3xl mb-12 flex flex-col md:flex-row items-center gap-8 shadow-sm">
+          <div className="p-8 bg-white border border-slate-200 rounded-3xl mb-12 flex flex-col md:flex-row items-center gap-8 shadow-sm">
             <div className="w-20 h-20 shrink-0 bg-brand-accent/10 rounded-2xl flex items-center justify-center text-brand-accent">
               <ShieldCheck size={40} />
             </div>
@@ -176,7 +177,7 @@ export default function Nba() {
         </div>
       </section>
 
-      <section className="relative py-32 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-grid" />
         
         {/* Decorative background logo */}
@@ -186,55 +187,40 @@ export default function Nba() {
 
         <SectionHeading title="Historical Excellence" tagline="A consistent record of accreditation and quality since 2005." />
         
-        <div className="max-w-5xl mx-auto mt-24 relative">
-          {/* Vertical Timeline Line */}
-          <div className="absolute left-[21px] md:left-1/2 top-0 bottom-0 w-[2px] bg-gradient-to-b from-brand-accent/0 via-brand-accent/20 to-brand-accent/0 md:-translate-x-1/2" />
-
-          <div className="space-y-16">
+        <div className="max-w-7xl mx-auto mt-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {historicalCycles.map((cycle, i) => (
-              <motion.div 
-                key={i} 
-                initial={{ opacity: 0, y: 30 }} 
-                whileInView={{ opacity: 1, y: 0 }} 
-                viewport={{ once: true, margin: "-100px" }} 
-                transition={{ duration: 0.7, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] }} 
-                className={`relative flex flex-col md:flex-row items-center gap-8 ${i % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] }}
+                className="group relative rounded-[20px] bg-white border border-slate-200 p-8 shadow-[0_4px_20px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(0,139,139,0.12)] hover:border-brand-accent/30 transition-all duration-500 overflow-hidden"
               >
-                {/* Timeline Node */}
-                <div className="absolute left-0 md:left-1/2 w-11 h-11 rounded-full bg-white border-2 border-brand-accent flex items-center justify-center z-10 md:-translate-x-1/2 shadow-[0_4px_12px_rgba(0,139,139,0.15)]">
-                  <div className="w-2 h-2 rounded-full bg-brand-accent animate-pulse" />
+                <div className="absolute -top-4 -right-4 text-[120px] font-heading font-black italic text-slate-50 opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity">
+                  {String(i + 1).padStart(2, '0')}
                 </div>
-
-                {/* Content Card */}
-                <div className={`w-full md:w-[45%] p-8 bg-slate-50 border border-slate-100 rounded-2xl hover:bg-white hover:border-brand-accent/30 hover:shadow-xl transition-all duration-500 group`}>
-                  <div className="flex flex-col gap-4">
-                    <div className="flex items-center justify-between">
-                      <span className="text-2xl font-heading font-black italic uppercase tracking-tighter text-brand-accent group-hover:scale-110 transition-transform origin-left">
-                        {cycle.period}
-                      </span>
-                      <div className="px-3 py-1 bg-brand-accent/10 border border-brand-accent/20 rounded-full">
-                        <span className="text-[9px] font-mono font-black text-brand-accent uppercase tracking-widest">{cycle.status}</span>
-                      </div>
+                <div className="relative z-10">
+                  <div className="flex items-center justify-between mb-6">
+                    <div className="w-14 h-14 rounded-2xl bg-brand-accent/5 border border-brand-accent/10 flex items-center justify-center text-brand-accent group-hover:scale-110 transition-transform duration-500">
+                      <History size={28} />
                     </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-mono font-bold text-slate-400 uppercase tracking-[0.2em] mb-2">Programmes Covered</h4>
-                      <p className="text-lg font-heading font-black italic uppercase tracking-tight text-slate-800 group-hover:text-slate-900 transition-colors leading-tight">
-                        {cycle.programs}
-                      </p>
+                    <div className="px-3 py-1 bg-brand-accent/10 border border-brand-accent/20 rounded-full">
+                      <span className="text-[9px] font-mono font-black text-brand-accent uppercase tracking-widest">{cycle.status}</span>
                     </div>
-
-                    <div className="pt-4 border-t border-slate-100 flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-lg bg-brand-accent/5 flex items-center justify-center text-brand-accent group-hover:bg-brand-accent/10 transition-colors">
-                        <ShieldCheck size={16} />
-                      </div>
-                      <span className="text-[10px] font-mono text-slate-400 group-hover:text-slate-600 transition-colors uppercase tracking-widest">Quality Assurance Audit Passed</span>
+                  </div>
+                  <h3 className="text-2xl font-heading font-black italic uppercase tracking-tighter text-slate-900 mb-2 leading-tight">
+                    {cycle.period}
+                  </h3>
+                  <div className="space-y-4 pt-4 border-t border-slate-100">
+                    <div>
+                      <h4 className="text-xs font-mono font-bold text-slate-400 uppercase tracking-widest mb-1">Programmes</h4>
+                      <p className="text-sm font-heading font-black italic text-brand-accent">{cycle.programs}</p>
                     </div>
                   </div>
                 </div>
-
-                {/* Empty spacer for desktop layout */}
-                <div className="hidden md:block md:w-[45%]" />
+                <div className="absolute bottom-0 left-0 h-[3px] bg-brand-accent w-0 group-hover:w-full transition-all duration-700" />
               </motion.div>
             ))}
           </div>
@@ -245,7 +231,7 @@ export default function Nba() {
           <motion.div 
             initial={{ opacity: 0 }}
             whileInView={{ opacity: 1 }}
-            className="inline-block px-6 py-3 bg-slate-50 border border-slate-100 rounded-xl"
+            className="inline-block px-6 py-3 bg-white border border-slate-100 rounded-xl"
           >
             <span className="text-xs font-mono font-bold text-slate-300 uppercase tracking-[0.3em]">Timeline Baseline: Established 2005</span>
           </motion.div>
@@ -253,7 +239,7 @@ export default function Nba() {
       </section>
 
       {/* ΓöÇΓöÇ 04. AICTE & MAKAUT ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none grayscale invert" style={{ backgroundImage: 'url("https://www.nsec.ac.in/images/nba-logo.png")', backgroundSize: '400px', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }} />
         
         <div className="max-w-7xl mx-auto relative z-10">
@@ -274,10 +260,10 @@ export default function Nba() {
                   { title: "Engg & MBA (2024-25)", url: "https://www.nsec.ac.in/circular/EOA-Report-2024-25_BTech.PDF" },
                   { title: "MCA & BCA Program (2024-25)", url: "https://www.nsec.ac.in/circular/EOA-REPORT-2024-2025-MCA-BCA.PDF" }
                 ].map((doc, i) => (
-                  <a key={i} href={doc.url} target="_blank" rel="noopener noreferrer" className="p-5 bg-white border border-slate-100 rounded-2xl flex items-center justify-between hover:border-brand-accent/40 hover:shadow-lg transition-all group">
+                  <button key={i} onClick={() => setSelectedPdf(doc.url)} className="p-5 bg-white border border-slate-100 rounded-2xl flex items-center justify-between hover:border-brand-accent/40 hover:shadow-lg transition-all group">
                     <span className="text-[13px] font-heading font-black italic uppercase tracking-tight text-slate-800">{doc.title}</span>
                     <Download size={16} className="text-slate-300 group-hover:text-brand-accent group-hover:translate-y-1 transition-all" />
-                  </a>
+                </button>
                 ))}
               </div>
             </div>
@@ -302,69 +288,21 @@ export default function Nba() {
                   { name: "BBA (Hospital Mgmt)", url: "https://www.nsec.ac.in/circular/109%20-BBA%28Spl%29-2-25-26.pdf" },
                   { name: "BBA Digital Marketing", url: "https://www.nsec.ac.in/circular/109%20-BBA%28Spl%29-2-25-26.pdf" }
                 ].map((prog, i) => (
-                  <a key={i} href={prog.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 bg-white border border-slate-50 rounded-xl hover:border-brand-maroon/20 hover:bg-slate-50 transition-all group">
+                  <button key={i} onClick={() => setSelectedPdf(prog.url)} className="flex items-center gap-3 p-3 bg-white border border-slate-50 rounded-xl hover:border-brand-maroon/20 hover:bg-white transition-all group">
                     <CheckCircle2 size={14} className="text-brand-accent shrink-0 group-hover:scale-110" />
                     <span className="text-[11px] font-mono font-bold text-slate-600 uppercase tracking-tight leading-none">{prog.name} [2025-26]</span>
-                  </a>
+                  </button>
                 ))}
               </div>
               <a href="https://www.nsec.ac.in/page.php?id=533" target="_blank" rel="noreferrer" className="mt-8 inline-flex items-center gap-2 text-[10px] font-mono font-black text-brand-accent uppercase tracking-[0.2em] hover:translate-x-2 transition-transform">
                 View All Affiliation Letters <ChevronRight size={14} />
-              </a>
+              </button>
             </div>
           </div>
         </div>
       </section>
-      {/* ΓöÇΓöÇ 04. ACCREDITATION TIMELINE ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden border-y border-slate-200">
-        <div className="absolute top-0 right-0 w-96 h-96 bg-brand-accent/5 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />
-        <SectionHeading title="Accreditation Journey" tagline="Chronological milestones of institutional excellence." />
-        
-        <div className="max-w-5xl mx-auto mt-20 relative">
-          {/* Center Line */}
-          <div className="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-slate-200 to-transparent -translate-x-1/2 hidden md:block" />
-          
-          <div className="space-y-12 relative">
-            {historicalCycles.map((cycle, i) => (
-              <motion.div
-                key={i}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.1 }}
-                className={`flex flex-col md:flex-row items-center gap-8 ${i % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}
-              >
-                {/* Content */}
-                <div className={`flex-1 w-full ${i % 2 === 0 ? 'md:text-right' : 'md:text-left'}`}>
-                  <div className="p-8 bg-white border border-slate-100 rounded-[32px] shadow-sm hover:shadow-xl transition-all duration-500 group relative overflow-hidden">
-                    <div className={`absolute top-0 bottom-0 w-1.5 bg-brand-accent ${i % 2 === 0 ? 'right-0' : 'left-0'}`} />
-                    <span className="text-[10px] font-mono font-black text-brand-accent uppercase tracking-[0.4em] mb-2 block">{cycle.status}</span>
-                    <h3 className="text-3xl font-heading font-black italic uppercase tracking-tighter text-slate-900 mb-2 leading-none">{cycle.period}</h3>
-                    <p className="text-lg font-heading font-black italic uppercase tracking-tight text-slate-500 mb-4">{cycle.programs}</p>
-                    <div className="flex flex-wrap gap-2 justify-end md:justify-start">
-                      {cycle.programs.split(', ').map((p, pi) => (
-                        <span key={pi} className="px-3 py-1 bg-slate-50 rounded-lg text-[9px] font-mono font-bold text-slate-400 group-hover:bg-brand-accent/10 group-hover:text-brand-accent transition-colors">{p}</span>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Dot */}
-                <div className="relative z-10 shrink-0">
-                  <div className="w-12 h-12 rounded-full bg-white border-4 border-slate-100 flex items-center justify-center text-brand-accent shadow-lg group-hover:scale-110 transition-transform">
-                    <History size={20} />
-                  </div>
-                </div>
-
-                {/* Spacer for reverse layout */}
-                <div className="flex-1 hidden md:block" />
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
       {/* ΓöÇΓöÇ 05. ACCREDITATION NODE ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
 
         <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-16">
           <div className="lg:w-1/2">
@@ -375,13 +313,13 @@ export default function Nba() {
                 { title: "NBA Certificate (2019 - 2022)", url: "https://www.nsec.ac.in/impdoc/nba-nsec-2019-2022.pdf" },
                 { title: "Historical Certificates (2005 - 2019)", url: "https://www.nsec.ac.in/impdoc/NBA_Accreditation_2005-2019_opt.pdf" }
               ].map((doc, i) => (
-                <a key={i} href={doc.url} target="_blank" rel="noopener noreferrer" className="group flex items-center justify-between p-6 bg-slate-50 border border-slate-100 rounded-2xl hover:border-brand-accent/40 hover:bg-white hover:shadow-xl transition-all duration-300">
+                <button key={i} onClick={() => setSelectedPdf(doc.url)} className="group flex items-center justify-between p-6 bg-white border border-slate-100 rounded-2xl hover:border-brand-accent/40 hover:bg-white hover:shadow-xl transition-all duration-300">
                   <div className="flex items-center gap-4">
                     <div className="w-10 h-10 rounded-xl bg-brand-accent/10 flex items-center justify-center text-brand-accent"><FileText size={20} /></div>
                     <span className="text-lg font-heading font-black italic uppercase tracking-tight text-slate-800 group-hover:text-brand-accent transition-colors">{doc.title}</span>
                   </div>
                   <Download size={20} className="text-slate-300 group-hover:text-brand-accent group-hover:translate-y-1 transition-all" />
-                </a>
+                </button>
               ))}
             </div>
           </div>
@@ -406,6 +344,8 @@ export default function Nba() {
       </section>
 
 
+    
+      <PdfModal selectedPdf={selectedPdf} setSelectedPdf={setSelectedPdf} />
     </div>
   );
 }
diff --git a/New/src/pages/ariia.jsx b/New/src/pages/ariia.jsx
index ea43408..fba6977 100644
--- a/New/src/pages/ariia.jsx
+++ b/New/src/pages/ariia.jsx
@@ -40,7 +40,8 @@ function HighlightText({ text }) {
 }
 
 export default function Ariia() {
-  const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
+    const [selectedPdf, setSelectedPdf] = useState(null);
+const [currentSentenceIdx, setCurrentSentenceIdx] = useState(0);
 
   const carouselPhrases = [
     { main: "INNOVATION", highlight: "RANKING" },
@@ -96,7 +97,7 @@ export default function Ariia() {
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 + i * 0.07, ease: [0.16, 1, 0.32, 1] }}
-                  className="text-white/70 text-[15px] font-body font-medium"
+                  className="text-slate-600 text-[15px] font-body font-medium"
                 >
                   {word}
                 </motion.span>
@@ -116,7 +117,7 @@ export default function Ariia() {
             <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 1.8 }} className="h-8 relative w-full mt-2">
               <AnimatePresence mode="wait">
                 <motion.div key={currentSentenceIdx} initial={{ opacity: 0, y: 10, filter: 'blur(4px)' }} animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }} exit={{ opacity: 0, y: -10, filter: 'blur(4px)' }} transition={{ duration: 0.8, ease: "easeInOut" }} className="absolute inset-0 flex items-center flex-wrap gap-2">
-                  <span className="font-heading font-black italic uppercase tracking-tighter text-white" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
+                  <span className="font-heading font-black italic uppercase tracking-tighter text-slate-800" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].main}</span>
                   <span className="font-heading font-black italic uppercase tracking-tighter text-brand-accent" style={{ fontSize: 'clamp(0.9rem, 1.8vw, 1.5rem)' }}>{carouselPhrases[currentSentenceIdx].highlight}</span>
                 </motion.div>
               </AnimatePresence>
@@ -141,9 +142,9 @@ export default function Ariia() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.1 }}
-              className="p-8 rounded-[24px] bg-slate-50 border border-slate-100 flex flex-col items-center text-center group hover:bg-white hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-500"
+              className="p-8 rounded-[24px] bg-white border border-slate-100 flex flex-col items-center text-center group hover:bg-white hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-500"
             >
-              <div className="w-16 h-16 rounded-2xl bg-brand-accent/5 border border-brand-accent/10 flex items-center justify-center text-brand-accent mb-6 group-hover:scale-110 group-hover:bg-brand-accent group-hover:text-white transition-all duration-500">
+              <div className="w-16 h-16 rounded-2xl bg-brand-accent/5 border border-brand-accent/10 flex items-center justify-center text-brand-accent mb-6 group-hover:scale-110 group-hover:bg-brand-accent group-hover:text-slate-800 transition-all duration-500">
                 <stat.icon size={32} />
               </div>
               <p className="text-[10px] font-mono font-black text-slate-400 uppercase tracking-[0.3em] mb-2">{stat.label}</p>
@@ -154,7 +155,7 @@ export default function Ariia() {
       </section>
 
       {/* ΓöÇΓöÇ 02. DATA PORTAL ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-slate-50 overflow-hidden border-y border-slate-200">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden border-y border-slate-200">
         <div className="absolute top-0 right-0 w-96 h-96 bg-brand-accent/5 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />
         
         <div className="max-w-7xl mx-auto">
@@ -182,21 +183,17 @@ export default function Ariia() {
 
                 <div className="space-y-4 relative z-10">
                   {cycle.docs.map((doc, di) => (
-                    <a
-                      key={di}
-                      href={doc.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center justify-between p-6 bg-slate-50 border border-slate-100 rounded-2xl hover:border-brand-accent/40 hover:bg-white transition-all group/item"
+                    <button key={di} onClick={() => setSelectedPdf(doc.url)}
+                      className="flex items-center justify-between p-6 bg-white border border-slate-100 rounded-2xl hover:border-brand-accent/40 hover:bg-white transition-all group/item"
                     >
                       <div className="flex items-center gap-4">
-                        <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-brand-accent shadow-sm group-hover/item:bg-brand-accent group-hover/item:text-white transition-all">
+                        <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-brand-accent shadow-sm group-hover/item:bg-brand-accent group-hover/item:text-slate-800 transition-all">
                           <FileText size={20} />
                         </div>
                         <span className="text-lg font-heading font-black italic uppercase tracking-tight text-slate-800 group-hover/item:text-brand-accent transition-colors">{doc.label}</span>
                       </div>
                       <Download size={20} className="text-slate-300 group-hover/item:text-brand-accent transition-all" />
-                    </a>
+                    </button>
                   ))}
                 </div>
               </motion.div>
@@ -206,30 +203,30 @@ export default function Ariia() {
       </section>
 
       {/* ΓöÇΓöÇ 03. TRANSPARENCY & VERIFICATION ΓöÇΓöÇ */}
-      <section className="relative py-24 px-8 lg:px-24 bg-white overflow-hidden">
+      <section className="relative pt-16 pb-8 px-8 lg:px-24 bg-white overflow-hidden">
         <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
           <div>
             <span className="text-[10px] font-mono font-black text-brand-accent uppercase tracking-[0.4em] mb-4 block">Institutional Ethics</span>
             <h2 className="text-5xl font-heading font-black italic uppercase tracking-tighter text-slate-900 mb-8 leading-none">
               Transparency & <br/> <span className="text-brand-accent">Accuracy</span>
             </h2>
-            <div className="p-8 bg-slate-50 border border-slate-100 rounded-[32px] relative overflow-hidden">
+            <div className="p-8 bg-white border border-slate-100 rounded-[32px] relative overflow-hidden">
               <p className="text-[17px] font-body font-medium text-slate-600 leading-relaxed italic">
                 "The institution is also ensuring that the <span className="text-brand-accent font-bold">Submitted Data for ARIIA 2020</span>, reflecting on institution's website is correct. We pro-actively examine all comments and feedback to effect corrections, if so warranted."
               </p>
             </div>
             <div className="mt-8 flex gap-4">
               <div className="px-4 py-2 bg-brand-accent/10 border border-brand-accent/20 rounded-lg text-[9px] font-mono font-black text-brand-accent uppercase tracking-widest">Data Integrity</div>
-              <div className="px-4 py-2 bg-slate-100 border border-slate-200 rounded-lg text-[9px] font-mono font-black text-slate-400 uppercase tracking-widest">Verified Node</div>
+              <div className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-[9px] font-mono font-black text-slate-400 uppercase tracking-widest">Verified Node</div>
             </div>
           </div>
 
-          <div className="relative p-12 bg-slate-900 rounded-[48px] text-white shadow-2xl overflow-hidden group">
+          <div className="relative p-12 bg-white rounded-[48px] text-slate-800 shadow-2xl overflow-hidden group">
             <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:scale-110 transition-transform duration-700">
               <Mail size={160} />
             </div>
-            <h3 className="text-3xl font-heading font-black italic uppercase tracking-tighter text-white mb-8 leading-none">Feedback & <span className="text-brand-accent">Comments</span></h3>
-            <p className="text-sm font-body font-medium text-white/60 leading-relaxed mb-8">
+            <h3 className="text-3xl font-heading font-black italic uppercase tracking-tighter text-slate-800 mb-8 leading-none">Feedback & <span className="text-brand-accent">Comments</span></h3>
+            <p className="text-sm font-body font-medium text-slate-600 leading-relaxed mb-8">
               Institutions pro-actively examine comments and feedback related to Submitted Data. Please reach out to the nodal offices below:
             </p>
             <div className="space-y-4">
@@ -243,16 +240,16 @@ export default function Ariia() {
                   className="flex items-center justify-between p-6 bg-white/5 border border-white/10 rounded-2xl hover:bg-brand-accent hover:border-transparent transition-all group/node"
                 >
                   <div className="flex items-center gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center text-white/40 group-hover/node:bg-white group-hover/node:text-brand-accent transition-all">
+                    <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center text-slate-600 group-hover/node:bg-white group-hover/node:text-brand-accent transition-all">
                       <Mail size={18} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-mono font-black text-white/40 uppercase tracking-widest leading-none mb-1 group-hover/node:text-white/60">{node.label}</p>
-                      <p className="text-sm font-heading font-black italic tracking-wide group-hover/node:text-white">{node.email}</p>
+                      <p className="text-[10px] font-mono font-black text-slate-600 uppercase tracking-widest leading-none mb-1 group-hover/node:text-slate-600">{node.label}</p>
+                      <p className="text-sm font-heading font-black italic tracking-wide group-hover/node:text-slate-800">{node.email}</p>
                     </div>
                   </div>
-                  <ChevronRight size={18} className="text-white/20 group-hover/node:text-white group-hover/node:translate-x-1 transition-all" />
-                </a>
+                  <ChevronRight size={18} className="text-slate-600 group-hover/node:text-slate-800 group-hover/node:translate-x-1 transition-all" />
+                </button>
               ))}
             </div>
           </div>
@@ -260,6 +257,8 @@ export default function Ariia() {
       </section>
 
 
+    
+      <PdfModal selectedPdf={selectedPdf} setSelectedPdf={setSelectedPdf} />
     </div>
   );
 }