diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..4534b9e
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+### Added
+- Added `.no-scrollbar` utility class in `src/index.css` to enable smooth horizontal scrolling without visible scrollbars for mobile tab navigation.
+- Added `Fredoka` font (a modern groovy font) to replace the previous display font on Theme card titles.
+- Added a "Team Members" toggle button with a spring-animated chevron that smoothly reveals the "Operating Partners" grid underneath the "Sub Heads" section.
+
+### Changed
+- **Themes Section**:
+  - Overhauled interaction: Replaced "click-to-view" modal system with an inline smooth dropdown (hover on desktop, tap on mobile/tablet).
+  - Cleaned up titles: Removed legacy "2026", "Theme XX" numbering labels.
+  - Renamed "IOT & Smart Cities" theme to **"IOT & Sustainability"** and updated tags (added GreenTech).
+  - Renamed "Web3 / Sustain" theme to **"Blockchain & Fintech"** with an updated description, updated emoji to `🔗`, and tags to `Smart Contracts`, `DeFi`, `Fintech`, `Crypto`.
+  - Updated card titles font-weight to `normal` (400) mapping to the `Fredoka` groovy font design.
+- **Team Section Header**: Replaced the slide-in (`x: ±300`) animation with a bulletproof fade-up (`y: 30 → 0`) animation to prevent the "Meet The Team" heading from clipping completely off-screen on constrained mobile displays due to `overflow-hidden`.
+- **Team Section Layout**: Integrated proper CSS grid configuration (`grid-cols-2` mobile, `grid-cols-3` tablet, `grid-cols-4` desktop) over the previous fixed-width wrapping implementation.
+- **Team Section Responsiveness**:
+  - Adjusted container to `w-[92%]` on tablet and correctly incremented padding (`px-5`, `px-6`) so the retro shadow offsets (`10px_10px`, `16px_16px`) no longer clip via the responsive bounds.
+  - Sub-headings now safely `clamp` sizing alongside smaller card text metrics to avoid horizontal scrollbar lock.
+  - Active Tab Button CSS explicitly utilizes inline style coloring (`#f3ecd2`) overriding systemic tailwind specificity cascading rendering the default black rectangle bug.
+
+### Removed
+- Removed the standalone "Operating Partners" tab grouping, integrating it as a sub-collapse element under "Sub Heads".
+- Removed hardcoded margins and large scale fonts causing overflow clipping from mobile versions (e.g., swapped `text-6xl` to `clamp(2rem, 7vw, 6rem)`).
diff --git a/src/App.tsx b/src/App.tsx
index f8c4e9b..f3a3f3a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import Hero from './sections/Hero'
 import Themes from './components/Themes'
 import Timeline from './sections/Timeline'
 import FAQ from './sections/FAQ'
-// import Team from './sections/Team'
+import Team from './sections/Team'
 import Prizes from './sections/Prizes'
 import Sponsors from './sections/Sponsors'
 import Footer from './sections/Footer'
@@ -100,11 +100,12 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
               animate={{ opacity: 1 }}
               className="hidden md:flex gap-8 lg:gap-10 font-bold text-lg lg:text-xl uppercase tracking-widest text-[#1a1a1a]"
             >
-              <a href="#hero" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Main</a>
-              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Timeline</a>
+               <a href="#hero" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Main</a>
               <a href="#themes" onClick={handleLinkClick} className="hover:text-[#f3a20f] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Themes</a>
               <a href="#prizes" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Prizes</a>
               <a href="#sponsors" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Sponsors</a>
+              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Timeline</a>
+              <a href="#team" onClick={handleLinkClick} className="hover:text-[#f3a20f] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Team</a>
               <a href="#faq" onClick={handleLinkClick} className="hover:text-[#ff5ea8] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">FAQ</a>
             </motion.div>
           )}
@@ -139,10 +140,11 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
             >
               <div className="h-[2px] w-full bg-[#1a1a1a]/10 mb-2" />
               <a href="#hero" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Main</a>
-              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] active:text-[#f97028]">Timeline</a>
               <a href="#themes" onClick={handleLinkClick} className="hover:text-[#f3a20f] active:text-[#f3a20f]">Themes</a>
               <a href="#prizes" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Prizes</a>
               <a href="#sponsors" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Sponsors</a>
+              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] active:text-[#f97028]">Timeline</a>
+              <a href="#team" onClick={handleLinkClick} className="hover:text-[#f3a20f] active:text-[#f3a20f]">Team</a>
               <a href="#faq" onClick={handleLinkClick} className="hover:text-[#ff5ea8] active:text-[#ff5ea8]">FAQ</a>
             </motion.div>
           )}
@@ -251,7 +253,7 @@ export default function App() {
           <Prizes />
           <Sponsors />
           <Timeline />
-          {/* <Team /> */}
+          <Team />
           <FAQ />
         </main>
         <Footer />
diff --git a/src/components/TeamCarousel.tsx b/src/components/TeamCarousel.tsx
deleted file mode 100644
index edd450e..0000000
--- a/src/components/TeamCarousel.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-"use client";
-
-import React, { useState, useCallback, useEffect } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { motion, AnimatePresence, type TargetAndTransition} from 'framer-motion';
-import { cn } from '../lib/utils'; // Assuming this utility correctly merges class names
-
-export interface TeamMember {
-  id: string;
-  name: string;
-  role: string;
-  image: string;
-  bio?: string;
-  linkedin?: string;
-}
-
-export interface TeamCarouselProps {
-  /** Array of team members */
-  members: TeamMember[];
-  /** Title displayed above the carousel */
-  title?: string;
-  /** Title font size */
-  titleSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Title color */
-  titleColor?: string;
-  /** Background color or gradient. Overrides the default 'bg-background' class. */
-  background?: string;
-  /** Card width in pixels */
-  cardWidth?: number;
-  /** Card height in pixels */
-  cardHeight?: number;
-  /** Card border radius */
-  cardRadius?: number;
-  /** Enable/disable navigation arrows */
-  showArrows?: boolean;
-  /** Enable/disable dots indicator */
-  showDots?: boolean;
-  /** Enable/disable keyboard navigation */
-  keyboardNavigation?: boolean;
-  /** Enable/disable touch/swipe navigation */
-  touchNavigation?: boolean;
-  /** Animation duration in milliseconds */
-  animationDuration?: number;
-  /** Auto-play interval in milliseconds (0 to disable) */
-  autoPlay?: number;
-  /** Pause auto-play on hover */
-  pauseOnHover?: boolean;
-  /** Number of visible cards on each side */
-  visibleCards?: number;
-  /** Scale factor for side cards */
-  sideCardScale?: number;
-  /** Opacity for side cards */
-  sideCardOpacity?: number;
-  /** Apply grayscale filter to side cards */
-  grayscaleEffect?: boolean;
-  /** Custom className for container */
-  className?: string;
-  /** Custom className for cards */
-  cardClassName?: string;
-  /** Custom className for title */
-  titleClassName?: string;
-  /** Member info position */
-  infoPosition?: 'bottom' | 'overlay' | 'none';
-  /** Info text color */
-  infoTextColor?: string;
-  /** Info background */
-  infoBackground?: string;
-  /** Callback when active member changes */
-  onMemberChange?: (member: TeamMember, index: number) => void;
-  /** Callback when card is clicked */
-  onCardClick?: (member: TeamMember, index: number) => void;
-  /** Initial active index */
-  initialIndex?: number;
-}
-
-export const TeamCarousel: React.FC<TeamCarouselProps> = ({
-  members,
-  title = "OUR TEAM",
-  titleSize = "2xl",
-  titleColor = "rgba(0, 76, 255, 1)",
-  background,
-  cardWidth = 280,
-  cardHeight = 380,
-  cardRadius = 20,
-  showArrows = true,
-  showDots = true,
-  keyboardNavigation = true,
-  touchNavigation = true,
-  animationDuration = 800,
-  autoPlay = 0,
-  pauseOnHover = true,
-  visibleCards = 2,
-  sideCardScale = 0.9,
-  sideCardOpacity = 0.8,
-  grayscaleEffect = true,
-  className,
-  cardClassName,
-  titleClassName,
-  infoPosition = "bottom",
-  infoTextColor = "rgb(8, 42, 123)",
-  infoBackground = "transparent",
-  onMemberChange,
-  onCardClick,
-  initialIndex = 0,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [direction, setDirection] = useState(0); // 0: no movement, 1: next, -1: prev
-  const [touchStart, setTouchStart] = useState(0);
-  const [touchEnd, setTouchEnd] = useState(0);
-
-  const totalMembers = members.length;
-
-  const paginate = useCallback(
-    (newDirection: number) => {
-      if (totalMembers === 0) return;
-      setDirection(newDirection);
-      const nextIndex = (currentIndex + newDirection + totalMembers) % totalMembers;
-      setCurrentIndex(nextIndex);
-      onMemberChange?.(members[nextIndex], nextIndex);
-    },
-    [currentIndex, totalMembers, members, onMemberChange]
-  );
-
-  const wrapIndex = (index: number) => {
-    return (index + totalMembers) % totalMembers;
-  };
-
-  const calculatePosition = (index: number) => {
-    const activeIndex = currentIndex;
-    const diff = wrapIndex(index - activeIndex);
-
-    if (diff === 0) return 'center';
-
-    const half = Math.floor(totalMembers / 2);
-    
-    if (diff <= half) {
-      if (diff <= visibleCards) return `right-${diff}`;
-      return 'hidden';
-    } else {
-      const leftDiff = totalMembers - diff;
-      if (leftDiff <= visibleCards) return `left-${leftDiff}`;
-      return 'hidden';
-    }
-  };
-
-  // Explicitly type the return of getVariantStyles to match framer-motion's expectations
-  const getVariantStyles = (position: string): TargetAndTransition => {
-    // FIX: Changed ease from number[] to an array of string presets or a valid CubicBezier type
-    // Using string presets for simplicity and type compatibility.
-    // If you need the exact cubic-bezier values, ensure they are compatible with framer-motion's Easing type.
-    // For custom cubic-bezier, you might need to use a type assertion like `as [number, number, number, number]`
-    // or import CubicBezier from 'framer-motion/types/value/types'.
-    const transition = {
-      duration: animationDuration / 1000,
-      // You can use a string preset like 'easeInOut' or a valid cubic-bezier array if framer-motion's types support it directly
-      // For the given numbers, 'easeInOut' is a close approximation or 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' if framer-motion accepted it directly as string
-      // To strictly match [0.25, 0.46, 0.45, 0.94], framer-motion expects it as a CubicBezier tuple:
-      ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number],
-    };
-
-    switch (position) {
-      case 'center':
-        return {
-          zIndex: 10,
-          opacity: 1,
-          scale: 1.1,
-          x: 0,
-          filter: 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'right-1':
-        return {
-          zIndex: 5,
-          opacity: sideCardOpacity,
-          scale: sideCardScale,
-          x: cardWidth * 0.7,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'right-2':
-        return {
-          zIndex: 1,
-          opacity: sideCardOpacity * 0.7,
-          scale: sideCardScale * 0.9,
-          x: cardWidth * 1.4,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'left-1':
-        return {
-          zIndex: 5,
-          opacity: sideCardOpacity,
-          scale: sideCardScale,
-          x: -cardWidth * 0.7,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'left-2':
-        return {
-          zIndex: 1,
-          opacity: sideCardOpacity * 0.7,
-          scale: sideCardScale * 0.9,
-          x: -cardWidth * 1.4,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      default:
-        return {
-          zIndex: 0,
-          opacity: 0,
-          scale: 0.8,
-          x: direction > 0 ? cardWidth * (visibleCards + 1) : -cardWidth * (visibleCards + 1),
-          pointerEvents: 'none',
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          transition,
-        };
-    }
-  };
-
-  // Auto-play functionality
-  useEffect(() => {
-    let interval: ReturnType<typeof setInterval>;
-    if (autoPlay > 0) {
-      interval = setInterval(() => {
-        paginate(1);
-      }, autoPlay);
-    }
-
-    const carouselContainer = document.getElementById('team-carousel-container');
-
-    const handleMouseEnter = () => {
-      if (pauseOnHover && autoPlay > 0) clearInterval(interval);
-    };
-
-    const handleMouseLeave = () => {
-      if (pauseOnHover && autoPlay > 0) {
-        interval = setInterval(() => {
-          paginate(1);
-        }, autoPlay);
-      }
-    };
-
-    if (carouselContainer && pauseOnHover && autoPlay > 0) {
-      carouselContainer.addEventListener('mouseenter', handleMouseEnter);
-      carouselContainer.addEventListener('mouseleave', handleMouseLeave);
-    }
-
-    return () => {
-      clearInterval(interval);
-      if (carouselContainer && pauseOnHover && autoPlay > 0) {
-        carouselContainer.removeEventListener('mouseenter', handleMouseEnter);
-        carouselContainer.removeEventListener('mouseleave', handleMouseLeave);
-      }
-    };
-  }, [autoPlay, paginate, pauseOnHover]);
-
-  // Keyboard navigation
-  useEffect(() => {
-    if (!keyboardNavigation) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        paginate(-1);
-      } else if (e.key === 'ArrowRight') {
-        paginate(1);
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [keyboardNavigation, paginate]);
-
-  // Touch navigation
-  const handleTouchStart = (e: React.TouchEvent) => {
-    if (!touchNavigation) return;
-    setTouchStart(e.targetTouches[0].clientX);
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (!touchNavigation) return;
-    setTouchEnd(e.targetTouches[0].clientX);
-  };
-
-  const handleTouchEnd = () => {
-    if (!touchNavigation) return;
-
-    const swipeThreshold = 50;
-    const diff = touchStart - touchEnd;
-
-    if (Math.abs(diff) > swipeThreshold) {
-      if (diff > 0) {
-        paginate(1);
-      } else {
-        paginate(-1);
-      }
-    }
-  };
-
-  const titleSizeClasses = {
-    sm: 'text-4xl',
-    md: 'text-5xl',
-    lg: 'text-6xl',
-    xl: 'text-7xl',
-    '2xl': 'text-8xl',
-  };
-
-  return (
-    <div
-      id="team-carousel-container"
-      className={cn(`w-full py-24 flex flex-col items-center justify-start overflow-hidden relative transparent`, className)}
-      style={{ background: background, minHeight: '80vh' }}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      {/* Title */}
-      {title && (
-        <h2
-          className={cn(
-            "font-black uppercase tracking-tight text-center pointer-events-none whitespace-nowrap mb-12",
-            titleSizeClasses[titleSize],
-            titleClassName
-          )}
-          style={{
-            color: 'transparent',
-            background: `linear-gradient(to bottom, ${titleColor} 20%, ${titleColor}80 80%)`,
-            WebkitBackgroundClip: 'text',
-            backgroundClip: 'text',
-          }}
-        >
-          {title}
-        </h2>
-      )}
-
-      {/* Carousel Container */}
-      <div
-        className="w-full max-w-6xl relative"
-        style={{
-          height: cardHeight + 100,
-          perspective: '1000px',
-        }}
-      >
-        {/* Navigation Arrows */}
-        {showArrows && (
-          <>
-            <motion.button
-              onClick={() => paginate(-1)}
-              className="absolute left-5 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110"
-              whileTap={{ scale: 0.9 }}
-            >
-              <ChevronLeft className="w-6 h-6" />
-            </motion.button>
-            <motion.button
-              onClick={() => paginate(1)}
-              className="absolute right-5 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110"
-              whileTap={{ scale: 0.9 }}
-            >
-              <ChevronRight className="w-6 h-6" />
-            </motion.button>
-          </>
-        )}
-
-        {/* Cards Track */}
-        <div
-          className="w-full h-full flex justify-center items-center relative"
-          style={{ transformStyle: 'preserve-3d' }}
-        >
-          <AnimatePresence initial={false} custom={direction}>
-            {members.map((member, index) => {
-              const position = calculatePosition(index);
-              const isCurrent = index === currentIndex;
-
-              if (position === 'hidden' && !isCurrent) return null;
-
-              return (
-                <motion.div
-                  key={member.id}
-                  className={cn(
-                    "absolute bg-white overflow-hidden shadow-2xl cursor-pointer",
-                    cardClassName
-                  )}
-                  style={{
-                    width: cardWidth,
-                    height: cardHeight,
-                    borderRadius: cardRadius,
-                    top: '50%',
-                    left: '50%',
-                    marginLeft: -cardWidth / 2,
-                    marginTop: -cardHeight / 2,
-                  }}
-                  initial={getVariantStyles('hidden')}
-                  animate={getVariantStyles(position)}
-                  exit={getVariantStyles('hidden')}
-                  onClick={() => {
-                    if (!isCurrent) {
-                      const newDirection = index > currentIndex ? 1 : -1;
-                      setDirection(newDirection);
-                      setCurrentIndex(index);
-                      onMemberChange?.(members[index], index);
-                    }
-                    onCardClick?.(member, index);
-                  }}
-                >
-                  <img
-                    src={member.image}
-                    alt={member.name}
-                    className="w-full h-full object-cover"
-                  />
-
-                  {/* Overlay Info */}
-                  {infoPosition === 'overlay' && (
-                    <div
-                      className="absolute bottom-0 left-0 right-0 p-4 text-center"
-                      style={{
-                        background: infoBackground || "linear-gradient(transparent, rgba(0,0,0,0.8))",
-                        color: infoTextColor,
-                      }}
-                    >
-                      <h3 className="text-lg font-bold">{member.name}</h3>
-                      <p className="text-sm opacity-90">{member.role}</p>
-                    </div>
-                  )}
-                </motion.div>
-              );
-            })}
-          </AnimatePresence>
-        </div>
-      </div>
-
-      {/* Member Info (Bottom) */}
-      {infoPosition === 'bottom' && members[currentIndex] && (
-        <motion.div
-          key={members[currentIndex].id + "-info"}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{ duration: 0.3 }}
-          className="text-center mt-10"
-        >
-          <h2
-            className="text-4xl font-bold mb-3 relative inline-block"
-            style={{ color: infoTextColor }}
-          >
-            {members[currentIndex].name}
-            <span
-              className="absolute top-full left-0 w-full h-0.5 mt-2"
-              style={{ background: infoTextColor }}
-            />
-          </h2>
-          <p
-            className="text-xl font-medium opacity-80 uppercase tracking-wider"
-            style={{ color: infoTextColor }}
-          >
-            {members[currentIndex].role}
-          </p>
-          {members[currentIndex].bio && (
-            <p className="text-base mt-4 max-w-lg mx-auto opacity-70">
-              {members[currentIndex].bio}
-            </p>
-          )}
-          
-          {members[currentIndex].linkedin && (
-            <div className="mt-6 flex justify-center">
-              <a 
-                href={members[currentIndex].linkedin} 
-                target="_blank" 
-                rel="noopener noreferrer" 
-                className="opacity-70 hover:opacity-100 transition-opacity flex items-center justify-center gap-2 border-2 rounded-full px-5 py-2 hover:bg-black/5"
-                style={{ borderColor: infoTextColor, color: infoTextColor }}
-              >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                </svg>
-                <span className="font-semibold tracking-wider text-sm uppercase">LinkedIn Profile</span>
-              </a>
-            </div>
-          )}
-        </motion.div>
-      )}
-
-      {/* Dots Indicator */}
-      {showDots && (
-        <div className="flex justify-center gap-3 mt-15 ">
-          {members.map((_, index) => (
-            <motion.button
-              key={index}
-              onClick={() => {
-                if (index !== currentIndex) {
-                  const newDirection = index > currentIndex ? 1 : -1;
-                  setDirection(newDirection);
-                  setCurrentIndex(index);
-                  onMemberChange?.(members[index], index);
-                }
-              }}
-              className={cn(
-                "w-3 h-3 rounded-full transition-all duration-300",
-                index === currentIndex
-                  ? "scale-125"
-                  : "hover:scale-110"
-              )}
-              style={{
-                background: index === currentIndex
-                  ? infoTextColor
-                  : `${infoTextColor}40`,
-              }}
-              whileTap={{ scale: 0.9 }}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TeamCarousel;
diff --git a/src/components/Themes.tsx b/src/components/Themes.tsx
index 8c0f293..20bc842 100644
--- a/src/components/Themes.tsx
+++ b/src/components/Themes.tsx
@@ -17,76 +17,62 @@ export type Theme = {
   title: string;
   desc: string;
   tags: string[];
-  rotate: string;
-  year: string;
 };
 
 const themes: Theme[] = [
   {
     id: 1,
     emoji: '🤖',
-    color: '#f97028', // Orange
-    bg: '#fffdf9', // Very light cream
-    title: 'AI ML',
+    color: '#f97028',
+    bg: '#fffdf9',
+    title: 'AI / ML',
     desc: 'Build intelligent systems, chatbots, predictive models, and generative AI tools that think, learn, and adapt.',
     tags: ['LLMs', 'Computer Vision', 'NLP', 'Deep Learning'],
-    rotate: '-3deg',
-    year: '2026',
   },
   {
     id: 2,
     emoji: '🧠',
-    color: '#f489a3', // Pink
+    color: '#f489a3',
     bg: '#fffdf9',
     title: 'Agentic AI',
     desc: 'Develop autonomous agents that can plan, reason, and execute complex workflows without human intervention.',
     tags: ['Autonomous Agents', 'Reasoning', 'Workflows', 'Multi-Agent'],
-    rotate: '2deg',
-    year: '2026',
   },
   {
     id: 3,
     emoji: '📡',
-    color: '#f3a20f', // Yellow/Gold
+    color: '#f3a20f',
     bg: '#fffdf9',
-    title: 'IOT & Smart Cities',
-    desc: 'Bridge physical and digital worlds with embedded systems, sensor networks, edge intelligence, and urban tech.',
-    tags: ['Embedded', 'Edge AI', 'Sensors', 'Urban Tech'],
-    rotate: '-2deg',
-    year: '2026',
+    title: 'IOT & Sustainability',
+    desc: 'Bridge physical and digital worlds with embedded systems, sensor networks, edge intelligence, and sustainable tech solutions.',
+    tags: ['Embedded', 'Edge AI', 'Sensors', 'GreenTech'],
   },
   {
     id: 4,
     emoji: '⚕️',
-    color: '#4ade80', // Green
+    color: '#4ade80',
     bg: '#fffdf9',
     title: 'Healthcare',
     desc: 'Revolutionise patient care and medical research with modern health-tech, accessibility tools, and data analysis.',
     tags: ['HealthAI', 'Telemed', 'Accessibility', 'Bioinformatics'],
-    rotate: '3deg',
-    year: '2026',
   },
   {
     id: 5,
-    emoji: '🌐',
-    color: '#22d3ee', // Cyan
+    emoji: '🔗',
+    color: '#22d3ee',
     bg: '#fffdf9',
-    title: 'Web3 / Sustain',
-    desc: 'Decentralise the future and protect the planet — DeFi protocols, DAOs, green-tech, and sustainable innovation.',
-    tags: ['Smart Contracts', 'DeFi', 'GreenTech', 'NFTs'],
-    rotate: '-1deg',
-    year: '2026',
+    title: 'Blockchain & Fintech',
+    desc: 'Build the future of finance and trust — decentralised protocols, smart contracts, digital payments, and financial innovation.',
+    tags: ['Smart Contracts', 'DeFi', 'Fintech', 'Crypto'],
   },
   {
     id: 6,
     emoji: '💡',
-    color: '#a855f7', // Purple
+    color: '#a855f7',
     bg: '#fffdf9',
     title: 'Open Innovation',
-    desc: 'No boundaries. Build whatever crazy, groundbreaking idea you have that doesn’t fit into a box.',
+    desc: 'No boundaries. Build whatever crazy, groundbreaking idea you have that doesn\'t fit into a box.',
     tags: ['Moonshots', 'Creative', 'Anything Goes', 'Wildcard'],
-    rotate: '2deg',
-    year: '2026',
   },
 ];
 
@@ -94,202 +80,192 @@ const containerVariants: Variants = {
   hidden: {},
   visible: {
     transition: {
-      staggerChildren: 0.1,
+      staggerChildren: 0.12,
     },
   },
 };
 
 const cardVariants: Variants = {
-  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  hidden: { opacity: 0, y: 50, scale: 0.92 },
   visible: {
     opacity: 1,
     y: 0,
     scale: 1,
     transition: {
       type: 'spring',
-      stiffness: 90,
-      damping: 15,
+      stiffness: 80,
+      damping: 16,
     },
   },
 };
 
-function ThemeCard({ theme, onClick }: { theme: Theme; onClick: () => void }) {
+/** Returns true when viewport is below the given px width */
+function useIsMobile(breakpoint = 1024) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const update = () => setIsMobile(mql.matches);
+    update();
+    mql.addEventListener('change', update);
+    return () => mql.removeEventListener('change', update);
+  }, [breakpoint]);
+  return isMobile;
+}
+
+function ThemeCard({ theme, isMobile }: { theme: Theme; isMobile: boolean }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // On desktop: hover controls reveal; on mobile: tap toggles
+  const showContent = isMobile ? isOpen : isOpen;
+
   return (
     <motion.div
       variants={cardVariants}
-      whileHover={{
-        y: -10,
-        scale: 1.06,
-        transition: { type: 'spring', stiffness: 400, damping: 25 },
-      }}
-      className="relative group cursor-pointer w-full"
-      onClick={onClick}
+      onHoverStart={() => { if (!isMobile) setIsOpen(true); }}
+      onHoverEnd={() => { if (!isMobile) setIsOpen(false); }}
+      onClick={() => { if (isMobile) setIsOpen((v) => !v); }}
+      className="relative w-full cursor-pointer"
     >
-      {/* Outer wrapper provides the thick colorful border */}
-      <div
-        className="relative overflow-hidden rounded-[2.5rem] shadow-[8px_8px_0_#1a1a1a] group-hover:shadow-[14px_14px_0_#1a1a1a] transition-all duration-300 w-full"
+      <motion.div
+        animate={{
+          y: showContent ? -6 : 0,
+          boxShadow: showContent
+            ? '10px 10px 0px #1a1a1a'
+            : '6px 6px 0px #1a1a1a',
+        }}
+        transition={{ type: 'spring', stiffness: 400, damping: 25 }}
+        className="relative overflow-hidden rounded-2xl w-full"
         style={{
           backgroundColor: theme.bg,
-          border: `6px solid ${theme.color}`,
-          aspectRatio: '1 / 1.1',
+          border: `3px solid #1a1a1a`,
         }}
       >
-        {/* Top-left subtle branding / corner decoration if desired */}
-        <div className="absolute top-6 left-6 flex items-center gap-2 opacity-50 z-10 transition-opacity group-hover:opacity-100">
-          <span className="w-3 h-3 rounded-full" style={{ backgroundColor: theme.color }} />
-          <span className="text-xs font-bold font-sans tracking-widest text-[#1a1a1a] uppercase">Theme {theme.id < 10 ? `0${theme.id}` : theme.id}</span>
-        </div>
-
-        {/* Central Graphic (Emoji) */}
-        <div className="absolute inset-0 flex items-center justify-center p-6 transition-transform duration-500 group-hover:scale-105">
-          <span
-            className="text-[4rem] sm:text-[6rem] md:text-[7rem] drop-shadow-2xl"
-            style={{
-              filter: `drop-shadow(0 15px 25px ${theme.color}30) drop-shadow(0 0 30px ${theme.color}15)`
-            }}
-          >
-            {theme.emoji}
-          </span>
-        </div>
-
-        {/* The bottom-right Cutout/Tab mimicking Lando Norris helmet view */}
+        {/* Accent stripe at top */}
         <div
-          className="absolute bottom-0 right-0 flex items-center pr-4 md:pr-6 pl-6 md:pl-8 py-2 md:py-3 rounded-tl-[1.5rem] md:rounded-tl-[2rem]"
-          style={{
-            backgroundColor: theme.bg,
-            borderTop: `6px solid ${theme.color}`,
-            borderLeft: `6px solid ${theme.color}`,
-            // We use margin to pull it into the corner perfectly against the parent's border overflow
-            marginRight: '-2px',
-            marginBottom: '-2px',
-          }}
-        >
-          <span className="font-display text-[#1a1a1a] text-base md:text-xl tracking-wide whitespace-nowrap">
-            {theme.title} <span style={{ color: theme.color }} className="ml-2 font-sans font-black text-sm md:text-base">{theme.year}</span>
-          </span>
-        </div>
+          className="w-full h-[6px]"
+          style={{ backgroundColor: theme.color }}
+        />
 
-        {/* Hover overlay hint */}
-        <div className="absolute inset-x-0 top-1/2 -mt-4 opacity-0 group-hover:opacity-100 flex justify-center transition-opacity duration-300 z-20 pointer-events-none">
-          <span className="bg-[#1a1a1a] text-[#f3ecd2] px-4 py-2 rounded-full font-bold text-sm tracking-widest uppercase shadow-xl transform translate-y-4 group-hover:translate-y-0 transition-all">
-            Click to View
-          </span>
-        </div>
-      </div>
-    </motion.div>
-  );
-}
-
-// ── Shared Modal component ──
-function ThemeModal({ theme, onClose }: { theme: Theme; onClose: () => void }) {
-  // Prevent scrolling when modal is open
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, []);
-
-  return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-6 md:p-12 pointer-events-auto">
-      {/* Backdrop */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
-        className="absolute inset-0 bg-black/40 backdrop-blur-md cursor-pointer"
-        onClick={onClose}
-      />
-
-      {/* Modal Content Wrapper */}
-      <motion.div
-        initial={{ opacity: 0, scale: 0.9, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.9, y: 20, transition: { duration: 0.2 } }}
-        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-        className="relative w-full max-w-4xl max-h-[85vh] md:max-h-none bg-[#f3ecd2] rounded-[2rem] border-[4px] md:border-[6px] border-[#1a1a1a] shadow-[8px_8px_0_#1a1a1a] md:shadow-[16px_16px_0_rgba(26,26,26,0.5)] overflow-hidden flex flex-col md:flex-row z-10"
-      >
-        {/* Sticky Header for Close Button on Mobile */}
-        <div className="absolute top-0 right-0 p-4 z-50 md:sticky">
-          <button
-            onClick={onClose}
-            className="w-10 h-10 md:w-12 md:h-12 bg-[#1a1a1a] hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors duration-200 shadow-lg border-2 border-transparent"
-          >
-            <svg className="w-5 h-5 md:w-6 md:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Scrollable Content Container */}
-        <div className="flex-1 flex flex-col md:flex-row w-full overflow-y-auto md:overflow-visible min-h-0">
-          {/* Left Side (Visuals) */}
-          <div
-            className="w-full md:w-2/5 p-8 flex flex-col items-center justify-center relative min-h-[220px] md:min-h-[400px] shrink-0"
-            style={{ backgroundColor: `${theme.color}20` }}
-          >
+        <div className="p-5 sm:p-6 md:p-8">
+          {/* Emoji + Title row — always visible */}
+          <div className="flex items-center gap-3 sm:gap-4">
             <motion.div
-              initial={{ scale: 0.5, rotate: -10 }}
-              animate={{ scale: 1, rotate: 0 }}
-              transition={{ type: 'spring', delay: 0.1, damping: 15 }}
-              className="text-[6rem] sm:text-[8rem] md:text-[12rem] drop-shadow-2xl z-10"
+              animate={{
+                scale: showContent ? 1.1 : 1,
+                rotate: showContent ? -4 : 0,
+              }}
+              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+              className="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 rounded-xl flex items-center justify-center shrink-0"
               style={{
-                filter: `drop-shadow(0 20px 40px ${theme.color}60)`
+                backgroundColor: `${theme.color}18`,
+                border: `2px solid ${theme.color}40`,
               }}
             >
-              {theme.emoji}
+              <span className="text-2xl sm:text-3xl md:text-4xl">{theme.emoji}</span>
             </motion.div>
 
-            <div
-              className="absolute bottom-4 left-4 md:bottom-6 md:left-6 font-sans font-black text-5xl md:text-9xl opacity-10 pointer-events-none"
-              style={{ color: theme.color }}
-            >
-              0{theme.id}
+            <div className="flex-1 min-w-0">
+              <h3
+                className="text-[#1a1a1a] leading-tight uppercase"
+                style={{
+                  fontFamily: 'var(--font-groovy)',
+                  fontSize: 'clamp(1.2rem, 2.5vw, 2rem)',
+                  lineHeight: 1.15,
+                  fontWeight: 400,
+                }}
+              >
+                {theme.title}
+              </h3>
             </div>
-          </div>
 
-          {/* Right Side (Details) */}
-          <div className="w-full md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
-            <div className="inline-flex items-center gap-2 mb-4">
-              <span className="w-3 h-3 rounded-full" style={{ backgroundColor: theme.color }} />
-              <span className="text-xs md:text-sm font-bold uppercase tracking-widest text-[#1a1a1a]/60">Domain</span>
-            </div>
+            {/* Tap indicator on mobile/tablet */}
+            {isMobile && (
+              <motion.div
+                animate={{ rotate: showContent ? 180 : 0 }}
+                transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+                className="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
+                style={{
+                  backgroundColor: `${theme.color}20`,
+                  border: `2px solid ${theme.color}40`,
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#1a1a1a"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </motion.div>
+            )}
+          </div>
 
-            <h2 className="font-display text-3xl sm:text-4xl md:text-6xl text-[#1a1a1a] leading-tight mb-4 md:mb-6">
-              {theme.title}
-            </h2>
+          {/* Dropdown content — smooth reveal */}
+          <AnimatePresence initial={false}>
+            {showContent && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{
+                  height: { type: 'spring', stiffness: 300, damping: 30 },
+                  opacity: { duration: 0.2, delay: 0.05 },
+                }}
+                className="overflow-hidden"
+              >
+                {/* Divider */}
+                <div
+                  className="w-full h-[2px] mt-4 mb-3 sm:mb-4 opacity-30"
+                  style={{ backgroundColor: theme.color }}
+                />
 
-            <p className="text-base md:text-xl text-[#3a3a3a] leading-relaxed mb-6 md:mb-8 font-medium">
-              {theme.desc}
-            </p>
+                {/* Description */}
+                <p className="text-[13px] sm:text-sm md:text-base text-[#3a3a3a] leading-relaxed mb-4 sm:mb-5 font-medium font-sans">
+                  {theme.desc}
+                </p>
 
-            <div className="mt-auto">
-              <h4 className="text-xs md:text-sm font-bold uppercase tracking-widest text-[#1a1a1a]/50 mb-3">Key Focus Areas</h4>
-              <div className="flex flex-wrap gap-2 md:gap-3">
-                {theme.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="text-xs md:text-base font-bold uppercase tracking-wider px-3 md:px-4 py-1.5 md:py-2 rounded-full border-[2px] md:border-[3px] border-[#1a1a1a]"
-                    style={{ backgroundColor: theme.color, color: '#1a1a1a' }}
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            </div>
-          </div>
+                {/* Tags */}
+                <div className="flex flex-wrap gap-1.5 sm:gap-2">
+                  {theme.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full font-sans"
+                      style={{
+                        backgroundColor: `${theme.color}15`,
+                        color: '#1a1a1a',
+                        border: `1.5px solid ${theme.color}50`,
+                      }}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
+
+        {/* Bottom accent bar */}
+        <motion.div
+          animate={{ opacity: showContent ? 1 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="w-full h-1"
+          style={{ backgroundColor: theme.color }}
+        />
       </motion.div>
-    </div>
+    </motion.div>
   );
 }
 
 export default function Themes() {
   const sectionRef = useRef<HTMLDivElement>(null);
   const headingRef = useRef<HTMLDivElement>(null);
-
-  const [selectedTheme, setSelectedTheme] = useState<Theme | null>(null);
+  const isMobile = useIsMobile(1024);
 
   const isInView = useInView(sectionRef, { once: true, margin: '-10% 0px' });
 
@@ -304,90 +280,90 @@ export default function Themes() {
   const blobY2 = useTransform(smoothY, [0, 1], [0, 80]);
 
   return (
-    <>
-      <section
-        ref={sectionRef}
-        id="themes"
-        className="relative bg-[#f3ecd2] py-12 md:py-20 overflow-hidden"
+    <section
+      ref={sectionRef}
+      id="themes"
+      className="relative bg-[#f3ecd2] py-16 md:py-24 overflow-hidden"
+    >
+      {/* Decorative background blobs */}
+      <motion.div
+        style={{ y: blobY1 }}
+        className="absolute -top-32 -right-32 w-[420px] h-[420px] rounded-full opacity-20 pointer-events-none"
+        aria-hidden
       >
-        {/* Decorative background blobs */}
-        <motion.div
-          style={{ y: blobY1 }}
-          className="absolute -top-32 -right-32 w-[420px] h-[420px] rounded-full opacity-20 pointer-events-none"
-          aria-hidden
-        >
-          <div className="w-full h-full sunburst-bg rounded-full blur-2xl scale-75" />
-        </motion.div>
+        <div className="w-full h-full sunburst-bg rounded-full blur-2xl scale-75" />
+      </motion.div>
+
+      <motion.div
+        style={{ y: blobY2 }}
+        className="absolute -bottom-24 -left-24 w-[320px] h-[320px] rounded-full opacity-10 pointer-events-none shadow-[20px_20px_100px_rgba(244,137,163,0.5)]"
+        aria-hidden
+      >
+        <div className="w-full h-full bg-[#f489a3] rounded-full blur-3xl" />
+      </motion.div>
 
+      <div className="relative z-10 max-w-7xl mx-auto px-4 md:px-8">
+        {/* Section heading — more prominent */}
         <motion.div
-          style={{ y: blobY2 }}
-          className="absolute -bottom-24 -left-24 w-[320px] h-[320px] rounded-full opacity-10 pointer-events-none shadow-[20px_20px_100px_rgba(244,137,163,0.5)]"
-          aria-hidden
+          ref={headingRef}
+          className="text-center mb-14 md:mb-20"
         >
-          <div className="w-full h-full bg-[#f489a3] rounded-full blur-3xl" />
-        </motion.div>
-
-        <div className="relative z-10 max-w-6xl mx-auto px-4 md:px-8">
-          {/* Section heading */}
+          {/* Decorative top line */}
           <motion.div
-            ref={headingRef}
-            className="text-center mb-12 md:mb-16"
-          >
-            <motion.div
-              initial={{ opacity: 0, scale: 0.5 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
-              className="inline-block mb-4"
-            >
-              <div className="h-[2px] w-20 bg-[#f489a3] mx-auto" />
-            </motion.div>
-
-            <motion.h2
-              initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
-              whileInView={{ opacity: 1, y: 0, letterSpacing: "0em" }}
-              transition={{ duration: 1, ease: "easeOut" }}
-              className="font-display text-[#1a1a1a] tracking-tight uppercase"
-              style={{ fontSize: 'clamp(2.5rem, 6vw, 5.5rem)', lineHeight: 1 }}
-            >
-              <span
-                className="rainbow-text"
-                style={{ WebkitTextStroke: '0px' }}
-              >
-                Themes
-              </span>
-            </motion.h2>
-          </motion.div>
+            initial={{ opacity: 0, scaleX: 0 }}
+            whileInView={{ opacity: 1, scaleX: 1 }}
+            transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
+            className="mx-auto mb-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
+          />
 
-          {/* Theme cards grid */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-x-12 md:gap-y-16 px-6 sm:px-4 md:px-0"
+          <motion.h2
+            initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
+            whileInView={{ opacity: 1, y: 0, letterSpacing: "0.05em" }}
+            transition={{ duration: 1, ease: "easeOut" }}
+            className="font-display text-[#1a1a1a] uppercase mb-3"
+            style={{
+              fontSize: 'clamp(3rem, 8vw, 6.5rem)',
+              lineHeight: 1,
+              textShadow: '4px 4px 0px rgba(249, 112, 40, 0.25)',
+            }}
           >
-            {themes.map((theme) => (
-              <ThemeCard
-                key={theme.id}
-                theme={theme}
-                onClick={() => setSelectedTheme(theme)}
-              />
-            ))}
-          </motion.div>
+            Themes
+          </motion.h2>
 
-          {/* Bottom CTA */}
-
-        </div>
-      </section>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="text-[#3a3a3a] font-sans text-base md:text-lg font-medium tracking-wide max-w-xl mx-auto"
+          >
+            Choose your domain. Build your vision.
+          </motion.p>
 
-      {/* Modal Overlay */}
-      <AnimatePresence>
-        {selectedTheme && (
-          <ThemeModal
-            theme={selectedTheme}
-            onClose={() => setSelectedTheme(null)}
+          {/* Decorative bottom line */}
+          <motion.div
+            initial={{ opacity: 0, scaleX: 0 }}
+            whileInView={{ opacity: 1, scaleX: 1 }}
+            transition={{ type: "spring", stiffness: 200, delay: 0.4 }}
+            className="mx-auto mt-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
           />
-        )}
-      </AnimatePresence>
-    </>
+        </motion.div>
+
+        {/* Theme cards grid */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-2 sm:px-0"
+        >
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              isMobile={isMobile}
+            />
+          ))}
+        </motion.div>
+      </div>
+    </section>
   );
 }
diff --git a/src/index.css b/src/index.css
index 8e5b979..56c84bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Outfit:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Outfit:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');
 
 @font-face {
   font-family: 'Wonderful Snowflake';
@@ -28,6 +28,7 @@
 
   --font-display: "Wonderful Snowflake", "Shrikhand", serif;
   --font-sans: "Outfit", sans-serif;
+  --font-groovy: "Fredoka", "Outfit", sans-serif;
 }
 
 @layer base {
@@ -126,6 +127,14 @@
   .glow-effect {
     filter: drop-shadow(0 0 10px rgba(243, 162, 15, 0.6));
   }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 @keyframes marquee {
@@ -252,7 +261,7 @@
     0 0 0 2px rgba(243, 236, 210, 0.3),
     0 4px 0 #1a1a1a,
     0 0 15px rgba(249, 112, 40, 0.2);
-  transform: rotate(-1deg);
+  transform: rotate(0deg);
   animation: datePulse 2.5s ease-in-out infinite;
 }
 
@@ -339,12 +348,12 @@
 
   0%,
   100% {
-    transform: rotate(-1deg) scale(1);
+    transform: rotate(0deg) scale(1);
     opacity: 1;
   }
 
   50% {
-    transform: rotate(-1deg) scale(1.05);
+    transform: rotate(0deg) scale(1.05);
     opacity: 0.9;
   }
 }
@@ -428,4 +437,28 @@
   100% {
     background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
   }
+}
+
+@keyframes spinY {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.animate-spin-y {
+  animation: spinY 3s linear infinite;
+}
+
+.coin {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid #1a1a1a;
+  background: linear-gradient(135deg, #f3a20f, #f97028);
+  box-shadow: inset -2px -2px 0px rgba(0,0,0,0.2), 2px 2px 0px #1a1a1a;
+  display: inline-block;
+  margin: 0 8px;
 }
\ No newline at end of file
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
index 7de0348..8a3edfb 100644
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -65,6 +65,7 @@ export default function DevHackHeroCompact() {
   const card1Ref = useRef<HTMLDivElement | null>(null);
   const card2Ref = useRef<HTMLDivElement | null>(null);
   const videoFrameRef = useRef<HTMLDivElement | null>(null);
+  const dateStickerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     gsap.registerPlugin(ScrollTrigger);
@@ -77,9 +78,10 @@ export default function DevHackHeroCompact() {
     const card2 = card2Ref.current;
     const videoFrame = videoFrameRef.current;
 
-    if (!section || !baseLayer || !imagesFrame || !reveal || !card1 || !card2 || !videoFrame) {
+    if (!section || !baseLayer || !imagesFrame || !reveal || !card1 || !card2 || !videoFrame || !dateStickerRef.current) {
       return;
     }
+    const sticker = dateStickerRef.current;
 
 
 
@@ -96,19 +98,32 @@ export default function DevHackHeroCompact() {
         gsap.set(videoFrame, {
           opacity: 1,
           scale: 1,
-          top: isMobile ? "12vh" : "0",
-          height: isMobile ? "50vh" : "100vh",
-          width: isMobile ? "90vw" : "100vw",
-          left: isMobile ? "50%" : "0",
-          xPercent: isMobile ? -50 : 0,
+          top: isMobile ? "75px" : "9px",
+          height: isMobile ? "auto" : "100vh",
+          width: "100vw",
+          left: 0,
+          xPercent: 0,
+          borderRadius: 0,
         });
 
         gsap.set(baseLayer, { opacity: 1 });
-        gsap.set(reveal, { 
+        gsap.set(reveal, {
+          opacity: 1,
+          top: isMobile ? "calc(75px + 56vw + 60px)" : "100vh"
+        });
+        gsap.set(imagesFrame, {
+          opacity: 0,
+        });
+        gsap.set([card1, card2], {
           opacity: isMobile ? 1 : 0,
-          top: isMobile ? "100vh" : "0" 
+          y: isMobile ? 0 : 50
+        });
+        gsap.set(sticker, {
+          opacity: 1,
+          y: 0,
+          top: isMobile ? "calc(75px + 56vw)" : "auto",
+          bottom: isMobile ? "auto" : "2rem",
         });
-        gsap.set([card1, card2], { opacity: 0, y: 50 });
 
         const timeline = gsap.timeline({
           defaults: { ease: "none" },
@@ -126,7 +141,7 @@ export default function DevHackHeroCompact() {
           .to(
             videoFrame,
             {
-              scale: isMobile ? 1.2 : 1.8,
+              scale: isMobile ? 1 : 1.8,
               opacity: isMobile ? 1 : 0,
               duration: 2.0,
             },
@@ -135,10 +150,9 @@ export default function DevHackHeroCompact() {
           .to(
             reveal,
             {
-              top: isMobile ? "65vh" : "0",
-              opacity: 1,
-              duration: isMobile ? 3.0 : 1.5,
-              ease: "power2.out",
+              top: isMobile ? "75px" : "0",
+              duration: isMobile ? 4.0 : 1.5,
+              ease: "power2.inOut",
             },
             0.5
           )
@@ -167,6 +181,19 @@ export default function DevHackHeroCompact() {
               duration: 1.5,
             },
             isMobile ? 1.5 : 3.4
+          )
+          .to(
+            {},
+            { duration: 1 } // Adds extra scroll time at the end
+          )
+          .to(
+            sticker,
+            {
+              opacity: 0,
+              y: 20,
+              duration: 0.5,
+            },
+            0 // Starts immediately with scroll
           );
       }, section);
 
@@ -189,44 +216,45 @@ export default function DevHackHeroCompact() {
   }, []);
 
   return (
-    <section id="hero" ref={sectionRef} className="relative h-[400vh] bg-cream text-white">
+    <section id="hero" ref={sectionRef} className="relative h-[200vh] md:h-[700vh] bg-cream text-white">
       <div className="sticky top-0 h-screen overflow-hidden">
         <div ref={baseLayerRef} className="absolute inset-0 bg-cream" />
 
-        <div ref={videoFrameRef} className="absolute inset-0 z-0 overflow-hidden">
+        <div ref={videoFrameRef} className="absolute inset-x-0 z-0 overflow-hidden">
           <video
             autoPlay
             loop
             muted
             playsInline
-            className="w-full h-full object-cover"
+            className="w-full h-auto md:h-full md:object-cover"
           >
             <source src="/assets/devhack3.mp4" type="video/mp4" />
           </video>
         </div>
 
-        <div ref={imagesFrameRef} className="hero-images-frame absolute inset-0 pointer-events-none opacity-0 z-5">
-          <div className="h-full grid grid-rows-3 md:grid-rows-3 gap-1 sm:gap-3 md:gap-4 p-1 sm:p-3 md:p-4 opacity-100">
-            <Row speed="18s" />
-            <Row reverse speed="24s" />
-            <Row speed="20s" />
-            <div className="block sm:hidden">
-              <Row reverse speed="22s" />
+        <div ref={revealRef} className="absolute inset-x-0 min-h-screen z-10 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-6 px-6 pointer-events-none pb-20">
+
+          {/* Restricted Scrolling Background */}
+          <div ref={imagesFrameRef} className="absolute inset-0 pointer-events-none opacity-0 z-0 overflow-hidden">
+            <div className="h-full grid grid-rows-3 md:grid-rows-3 gap-1 sm:gap-3 md:gap-4 p-1 sm:p-3 md:p-4 opacity-100">
+              <Row speed="18s" />
+              <Row reverse speed="24s" />
+              <Row speed="20s" />
+              <div className="block sm:hidden">
+                <Row reverse speed="22s" />
+              </div>
             </div>
+            <div className="hero-images-overlay absolute inset-0 bg-black/40" />
           </div>
-          <div className="hero-images-overlay absolute inset-0" />
-        </div>
 
-
-        <div ref={revealRef} className="absolute inset-x-0 h-screen z-10 flex flex-col md:flex-row items-center justify-center gap-14 md:gap-6 px-6 pointer-events-none">
-          <div ref={card1Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-orange/10 shadow-2xl relative">
+          <div ref={card1Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-orange/10 shadow-2xl relative z-10 pointer-events-auto">
             <div className="text-orange font-bold text-4xl mb-4 opacity-30">01</div>
             <h2 className="text-[#2a1f14] font-display text-2xl mb-4">What is DevHack?</h2>
             <p className="text-[#5a4a3a] text-sm leading-relaxed">
               DSU DEVHACK 2026 is a national-level hackathon pushing the boundaries of innovation in AI, ML, IoT, Blockchain, Cybersecurity, and Cloud
             </p>
           </div>
-          <div ref={card2Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-pink/10 shadow-2xl relative">
+          <div ref={card2Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-pink/10 shadow-2xl relative z-10 pointer-events-auto">
             <div className="text-pink font-bold text-4xl mb-4 opacity-30">02</div>
             <h2 className="text-[#2a1f14] font-display text-2xl mb-4">Why Participate?</h2>
             <p className="text-[#5a4a3a] text-sm leading-relaxed">
@@ -235,6 +263,17 @@ export default function DevHackHeroCompact() {
           </div>
         </div>
 
+        {/* Date Sticker */}
+        <div
+          ref={dateStickerRef}
+          className="absolute inset-x-0 bottom-10 flex justify-center z-20 pointer-events-none"
+        >
+          <div className="hero-date-badge text-center whitespace-nowrap">
+            SEPTEMBER 18TH & 19TH, 2026
+          </div>
+        </div>
+
+
 
       </div>
     </section>
diff --git a/src/sections/Team.tsx b/src/sections/Team.tsx
index a18c19b..00fe83b 100644
--- a/src/sections/Team.tsx
+++ b/src/sections/Team.tsx
@@ -1,348 +1,450 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import TeamCarousel from '../components/TeamCarousel';
 
+// --- Types ---
 interface TeamMember {
   id: string;
   name: string;
   role: string;
   bio?: string;
   image: string;
+  twitter?: string;
   linkedin?: string;
 }
 
-// ── Main tabs ──
-const mainTabs = ['Organizing Team', 'Patrons', 'Faculty', 'Judges'] as const;
-type MainTab = (typeof mainTabs)[number];
-
-// ── Sub-tabs (under "Meet the Entire Team") ──
-const subTabs = ['Web Team', 'Design Team', 'Marketing Team', 'Sponsorship Team'] as const;
-type SubTab = (typeof subTabs)[number];
-
-// ── Data ──
-const organizingTeam: TeamMember[] = [
-  {
-    id: 'org-1',
-    name: 'Dr. Bipin Kumar Rai',
-    role: 'Faculty Coordinator',
-    bio: 'Professor, CSE',
-    image:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'org-2',
-    name: 'Utkarsh Priye Jha',
-    role: 'Student Coordinator',
-    image:
-      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'org-3',
-    name: 'Ritvik Vasundh',
-    role: 'Student Coordinator',
-    image:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-  },
+// --- Data ---
+
+const chiefPatrons: TeamMember[] = [
+  { id: 'cp1', name: 'Dr. D. Hemachandra Sagar', role: 'Chancellor, DSU', image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=400&q=80' },
+  { id: 'cp2', name: 'Dr. D. Premachandra Sagar', role: 'Pro Chancellor, DSU', image: 'https://images.unsplash.com/photo-1557862921-37829c790f19?auto=format&fit=crop&w=400&q=80' },
 ];
 
 const patrons: TeamMember[] = [
-  {
-    id: 'pat-1',
-    name: 'Prof. Ramesh Gupta',
-    role: 'Patron',
-    bio: 'Director',
-    image:
-      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'pat-2',
-    name: 'Dr. Meena Sharma',
-    role: 'Co-Patron',
-    bio: 'Dean, Engineering',
-    image:
-      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-  },
+  { id: 'p1', name: 'Dr. B. S. Satyanarayana', role: 'Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p2', name: 'Prof. R Janardhan', role: 'Pro Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p3', name: 'Dr. Prakash S', role: 'Pro Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p4', name: 'Dr. C.Puttamadapappa', role: 'Registrar, DSU', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fac1', name: 'Dr.Udaya Kumar Reddy K.R', role: 'Professor & Dean-SoE', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fac2', name: 'Dr. Girisha G S', role: 'Chairperson, CSE', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' }
 ];
 
-const faculty: TeamMember[] = [
-  {
-    id: 'fac-1',
-    name: 'Dr. Anjali Verma',
-    role: 'Faculty Advisor',
-    bio: 'HoD, CSE',
-    image:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'fac-2',
-    name: 'Dr. Vikram Patel',
-    role: 'Faculty Advisor',
-    bio: 'Associate Professor',
-    image:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-  },
+const judges: TeamMember[] = [
+  { id: 'j1', name: 'Arjun Mehta', role: 'CTO, TechCorp', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'j2', name: 'Sneha Iyer', role: 'VP Engineering, InnoSoft', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
 ];
 
-const judges: TeamMember[] = [
-  {
-    id: 'jud-1',
-    name: 'Arjun Mehta',
-    role: 'Industry Expert',
-    bio: 'CTO, TechCorp',
-    image:
-      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'jud-2',
-    name: 'Sneha Iyer',
-    role: 'Industry Expert',
-    bio: 'VP Engineering, InnoSoft',
-    image:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-  },
+const coreTeam: TeamMember[] = [
+  { id: '0', name: 'Dr. Bipin Kumar Rai', role: 'Faculty Coordinator', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },
+  { id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },
 ];
 
-const subTeams: Record<SubTab, TeamMember[]> = {
-  'Web Team': [
-    {
-      id: 'web-1',
-      name: 'Sachin Baluragi',
-      role: 'Web Team Co-Head',
-      image:
-        'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-2',
-      name: 'S Shreenidhi',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-3',
-      name: 'G Nithesh',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-4',
-      name: 'Manavi P',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Design Team': [
-    {
-      id: 'des-1',
-      name: 'Priya Nair',
-      role: 'Design Lead',
-      image:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'des-2',
-      name: 'Raj Kulkarni',
-      role: 'UI Designer',
-      image:
-        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Marketing Team': [
-    {
-      id: 'mkt-1',
-      name: 'Ananya Das',
-      role: 'Marketing Lead',
-      image:
-        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'mkt-2',
-      name: 'Karthik Rao',
-      role: 'Content Writer',
-      image:
-        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Sponsorship Team': [
-    {
-      id: 'spo-1',
-      name: 'Divya Hegde',
-      role: 'Sponsorship Lead',
-      image:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'spo-2',
-      name: 'Nihal Khan',
-      role: 'Sponsorship Associate',
-      image:
-        'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-};
-
-// ── Helpers ──
-function getMembersForMainTab(tab: MainTab): TeamMember[] {
-  switch (tab) {
-    case 'Organizing Team':
-      return organizingTeam;
-    case 'Patrons':
-      return patrons;
-    case 'Faculty':
-      return faculty;
-    case 'Judges':
-      return judges;
-  }
+const subHeads: TeamMember[] = [
+  { id: '3', name: 'Manavi P', role: 'Web Team Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Manavi' },
+  { id: '4', name: 'Raksha', role: 'Design Team Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Raksha' },
+  { id: '5', name: 'Aastha', role: 'Sponsorship Team Co Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Aastha' },
+  { id: '6', name: 'Nishchal Gowda R', role: 'Marketing and Media Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Nishchal' },
+  { id: '7', name: 'G Nithesh', role: 'Web Co Lead & Ops Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Nithesh' },
+];
+
+const theOperators: TeamMember[] = [
+  { id: 'w1', name: 'Omkar G K', role: 'Web Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Omkar' },
+  { id: 'w2', name: 'Supraj U Sivajji', role: 'Web Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Supraj' },
+  { id: 'd1', name: 'Moulika', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Moulika' },
+  { id: 'd2', name: 'Moulya', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Moulya' },
+  { id: 'd3', name: 'Hridya', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Hridya' },
+  { id: 's1', name: 'Naman Sharaff', role: 'Sponsorship Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Naman' },
+  { id: 's2', name: 'Thathagath', role: 'Sponsorship Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Thathagath' },
+];
+
+const facultyCoordinator: TeamMember[] = [
+  { id: 'fc1', name: 'Dr. Bipin Kumar Rai', role: 'Faculty Coordinator - Professor, CSE', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' }
+];
+
+const facultyOrganizers: TeamMember[] = [
+  { id: 'fo1', name: 'Dr. Meenakshi Malhotra', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo2', name: 'Dr. Sivananda Reddy', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo3', name: 'Prof. Bharath M B', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo4', name: 'Prof. Dharmendra D P', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo5', name: 'Dr. Kumar Dilip', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo6', name: 'Prof. Yashaswini H C', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo7', name: 'Dr. Shreekant Salotagi', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo8', name: 'Prof. Smriti Bharti', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo9', name: 'Prof. Shivani', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo10', name: 'Dr Naitik ST', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo11', name: 'Dr. Pannangi Naresh', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+];
+
+// --- Sub-components ---
+
+function CoinDivider() {
+  return (
+    <div className="w-full py-8 sm:py-12 md:py-16 flex items-center justify-center opacity-80 overflow-hidden relative">
+      <div className="absolute w-full h-[2px] bg-[#1a1a1a]" />
+      <div className="flex z-10 bg-[#f3ecd2] px-4 sm:px-6">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="coin animate-spin-y mx-1.5 sm:mx-2" style={{ animationDelay: `${i * 0.15}s` }} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
-function getMainTabTitle(tab: MainTab): string {
-  switch (tab) {
-    case 'Organizing Team':
-      return 'Organising Team';
-    case 'Patrons':
-      return 'Patrons';
-    case 'Faculty':
-      return 'Faculty';
-    case 'Judges':
-      return 'Judges';
-  }
+/** Reusable section sub-heading */
+function SectionSubHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="text-2xl sm:text-3xl lg:text-5xl font-black uppercase tracking-widest mb-6 sm:mb-8 md:mb-12 text-center w-full">
+      {children}
+    </h3>
+  );
 }
 
-// ── Pill Tab Bar ──
-function TabBar<T extends string>({
-  tabs,
-  active,
-  onChange,
-  accentColor,
-}: {
-  tabs: readonly T[];
-  active: T;
-  onChange: (tab: T) => void;
-  accentColor?: string;
-}) {
-  const accent = accentColor ?? '#f97028';
+function TeamCard({ member, onClickBio }: { member: TeamMember, onClickBio: (m: TeamMember) => void }) {
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
-    <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
-      {tabs.map((tab) => {
-        const isActive = tab === active;
-        return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-50px' }}
+      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+      whileHover={{ y: -8, scale: 1.02 }}
+      className="group relative bg-[#fff9f4] border-[3px] border-[#1a1a1a] shadow-[4px_4px_0px_#1a1a1a] sm:shadow-[6px_6px_0px_#1a1a1a] hover:shadow-[8px_8px_0px_#f97028] transition-all cursor-pointer flex flex-col h-full overflow-hidden w-full shrink-0"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onClickBio(member)}
+    >
+      {/* Corner Rivets */}
+      {[
+        { top: 4, left: 4 } as React.CSSProperties,
+        { top: 4, right: 4 } as React.CSSProperties,
+        { bottom: 4, left: 4 } as React.CSSProperties,
+        { bottom: 4, right: 4 } as React.CSSProperties,
+      ].map((pos, ri) => (
+        <div
+          key={ri}
+          style={{
+            position: 'absolute',
+            width: '4px',
+            height: '4px',
+            backgroundColor: '#1a1a1a',
+            borderRadius: '50%',
+            ...pos,
+          }}
+        />
+      ))}
+
+      {/* Image Box */}
+      <div className="relative w-full aspect-square border-b-2 border-[#1a1a1a] overflow-hidden bg-[#1a1a1a] p-1.5 sm:p-2">
+        {/* Scanline overlay */}
+        <div
+          className="absolute inset-0 pointer-events-none z-10 opacity-10"
+          style={{ backgroundImage: 'linear-gradient(transparent 50%, rgba(0,0,0,0.25) 50%)', backgroundSize: '100% 4px' }}
+        />
+        <img
+          src={member.image}
+          alt={member.name}
+          className="w-full h-full object-cover filter grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-105"
+        />
+      </div>
+
+      {/* Details Box */}
+      <div className="p-3 sm:p-4 md:p-5 flex flex-col flex-1 z-10 bg-[#fff9f4]">
+        <h3
+          className="text-base sm:text-lg md:text-xl font-black tracking-tight uppercase leading-tight transition-colors duration-300 font-sans"
+          style={{ color: isHovered ? '#f97028' : '#1a1a1a' }}
+        >
+          {member.name}
+        </h3>
+        <p className="font-mono text-[11px] sm:text-xs md:text-sm uppercase mt-1.5 sm:mt-2 opacity-70 font-bold leading-snug">{member.role}</p>
+
+        <div className="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t-2 border-[#1a1a1a] border-dashed">
           <button
-            key={tab}
-            onClick={() => onChange(tab)}
-            className="relative px-5 py-2 rounded-full text-sm sm:text-base font-bold uppercase tracking-wider transition-all duration-300 border-2 cursor-pointer"
-            style={{
-              borderColor: isActive ? accent : '#1a1a1a',
-              backgroundColor: isActive ? accent : 'transparent',
-              color: isActive ? '#fff' : '#1a1a1a',
-              boxShadow: isActive ? `0 4px 16px ${accent}40` : 'none',
-            }}
+            onClick={() => onClickBio(member)}
+            className="text-[11px] sm:text-xs md:text-sm font-bold uppercase tracking-widest hover:text-[#f97028] transition-colors flex items-center gap-1.5 sm:gap-2"
           >
-            {tab}
+            <span className="text-[#f97028]">+</span> SHOW BIO
           </button>
-        );
-      })}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+/** Responsive grid wrapper for team cards */
+function TeamGrid({ members, onClickBio }: { members: TeamMember[]; onClickBio: (m: TeamMember) => void }) {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
+      {members.map((member) => (
+        <TeamCard key={member.id} member={member} onClickBio={onClickBio} />
+      ))}
+    </div>
+  );
+}
+
+/** Small grid for 1-3 items — centers them */
+function TeamGridSmall({ members, onClickBio }: { members: TeamMember[]; onClickBio: (m: TeamMember) => void }) {
+  return (
+    <div className="flex flex-wrap justify-center gap-4 sm:gap-5 md:gap-6 lg:gap-8">
+      {members.map((member) => (
+        <div key={member.id} className="w-[calc(50%-0.5rem)] sm:w-[calc(50%-0.75rem)] md:w-[240px] lg:w-[280px]">
+          <TeamCard member={member} onClickBio={onClickBio} />
+        </div>
+      ))}
     </div>
   );
 }
 
-// ── Main Section ──
 export default function Team() {
-  const [activeMainTab, setActiveMainTab] = useState<MainTab>('Organizing Team');
-  const [activeSubTab, setActiveSubTab] = useState<SubTab>('Web Team');
+  const [selectedBio, setSelectedBio] = useState<TeamMember | null>(null);
+  const [activeTab, setActiveTab] = useState('Organising Team');
+  const [showOperators, setShowOperators] = useState(false);
 
-  const mainMembers = getMembersForMainTab(activeMainTab);
-  const sectionTitle = getMainTabTitle(activeMainTab);
+  const TABS = ['Organising Team', 'The Board', 'Faculty', 'Jury & Experts'];
+
+  if (selectedBio) {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'hidden';
+  } else {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'auto';
+  }
 
   return (
-    <section id="team" className="relative w-full overflow-hidden bg-[#f3ecd2] py-20 md:py-28">
-      {/* ── Main Tab Bar ── */}
-      <div className="relative z-10 mb-10">
-        <TabBar
-          tabs={mainTabs}
-          active={activeMainTab}
-          onChange={(t) => {
-            setActiveMainTab(t);
-            // Reset sub-tab when switching
-            setActiveSubTab('Web Team');
-          }}
-          accentColor="#f97028"
-        />
-      </div>
+    <section id="team" className="relative w-full bg-[#f3ecd2] py-12 sm:py-16 md:py-24 px-5 sm:px-6 md:px-10 text-[#1a1a1a] font-sans selection:bg-[#f97028] selection:text-[#f3ecd2]">
+      <div className="w-full sm:w-[92%] max-w-[1400px] mx-auto border-[3px] sm:border-4 border-[#1a1a1a] bg-[#f3ecd2] p-4 sm:p-6 md:p-10 lg:p-16 shadow-[6px_6px_0px_#1a1a1a] sm:shadow-[10px_10px_0px_#1a1a1a] md:shadow-[16px_16px_0px_#1a1a1a] relative">
 
-      {/* ── Section Title ── */}
-      <h2
-        className="text-center font-display text-4xl sm:text-5xl md:text-6xl mb-12"
-        style={{ color: '#1a1a1a' }}
-      >
-        {sectionTitle}
-      </h2>
-
-      {/* ── Main Tab Carousel ── */}
-      <AnimatePresence mode="wait">
-        <motion.div
-          key={activeMainTab}
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{ duration: 0.4 }}
-          className="flex justify-center -mt-20 -mb-10"
-        >
-          <TeamCarousel 
-            members={mainMembers} 
-            infoTextColor="#1a1a1a"
-            background="transparent"
-            className="w-full max-w-6xl mx-auto"
-          />
-        </motion.div>
-      </AnimatePresence>
+        {/* Header block conditionally rendered */}
+        <AnimatePresence>
+          {activeTab === 'Organising Team' && (
+            <motion.div
+              initial={{ opacity: 0, height: 0, marginBottom: 0, paddingBottom: 0 }}
+              animate={{ opacity: 1, height: 'auto', marginBottom: 40, paddingBottom: 24 }}
+              exit={{ opacity: 0, height: 0, marginBottom: 0, paddingBottom: 0 }}
+              className="flex flex-col justify-center items-center gap-4 sm:gap-6 md:gap-8 border-b-4 border-[#1a1a1a] relative text-center"
+            >
+              <div className="w-full">
+                <motion.h2
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ type: 'spring', damping: 25, stiffness: 120, delay: 0.15 }}
+                  className="font-display uppercase tracking-wider sm:tracking-widest text-[#1a1a1a] leading-none mb-3 sm:mb-6 flex flex-col sm:flex-row justify-center items-center w-full"
+                  style={{ fontSize: 'clamp(2rem, 7vw, 6rem)' }}
+                >
+                  <span className="sm:mr-4 lg:mr-6">Meet The</span>
+                  <span className="text-[#f97028]">Team</span>
+                </motion.h2>
+                <motion.p
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 0.3 }}
+                  className="text-base sm:text-lg md:text-2xl lg:text-3xl font-medium tracking-tight mt-2 sm:mt-4 md:mt-6 leading-relaxed max-w-3xl mx-auto px-2"
+                >
+                  We back the dreamers, the builders, and the rebels. The architectural minds behind DevHack 3.0.
+                </motion.p>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-      {/* ── "Meet the Entire Team" — only under Organizing Team ── */}
-      {activeMainTab === 'Organizing Team' && (
-        <motion.div
-          className="mt-20"
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-        >
-          <h2
-            className="text-center font-display text-3xl sm:text-4xl md:text-5xl mb-10"
-            style={{ color: '#1a1a1a' }}
-          >
-            Meet the Entire Team
-          </h2>
-
-          {/* Sub-tab bar */}
-          <div className="relative z-10 mb-10">
-            <TabBar
-              tabs={subTabs}
-              active={activeSubTab}
-              onChange={setActiveSubTab}
-              accentColor="#5b2d8e"
-            />
+        {/* Tab Navigation — scrollable on mobile */}
+        <div className="mb-6 sm:mb-8 md:mb-12 border-b-[3px] sm:border-b-4 border-[#1a1a1a] pb-4 sm:pb-6 md:pb-8">
+          <div className="flex overflow-x-auto gap-2 sm:gap-3 md:gap-4 justify-start sm:justify-center no-scrollbar -mx-1 px-1">
+            {TABS.map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 sm:px-6 md:px-8 py-2.5 sm:py-3 md:py-4 font-bold font-mono uppercase tracking-wider sm:tracking-widest border-[2px] sm:border-[3px] border-[#1a1a1a] transition-all text-xs sm:text-sm md:text-base whitespace-nowrap shrink-0 ${activeTab === tab
+                  ? 'bg-[#1a1a1a] shadow-[4px_4px_0px_#f97028] sm:shadow-[8px_8px_0px_#f97028] translate-x-[-2px] translate-y-[-2px]'
+                  : 'bg-[#fff9f4] text-[#1a1a1a] shadow-[3px_3px_0px_#1a1a1a] sm:shadow-[4px_4px_0px_#1a1a1a] hover:bg-[#f97028] hover:text-[#1a1a1a]'
+                  }`}
+                style={activeTab === tab ? { color: '#f3ecd2' } : undefined}
+              >
+                {tab}
+              </button>
+            ))}
           </div>
+        </div>
+
+        {/* Tab Content */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeTab}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+            className="min-h-[30vh] sm:min-h-[40vh]"
+          >
+            {activeTab === 'Organising Team' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Core Team</SectionSubHeading>
+                  <TeamGridSmall members={coreTeam} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Sub Heads</SectionSubHeading>
+                  <TeamGrid members={subHeads} onClickBio={setSelectedBio} />
 
-          {/* Sub-tab Carousel */}
-          <AnimatePresence mode="wait">
+                  {/* Dropdown toggle for Operating Partners */}
+                  <div className="mt-8 sm:mt-10">
+                    <button
+                      onClick={() => setShowOperators((v) => !v)}
+                      className="mx-auto flex items-center gap-2 sm:gap-3 px-6 sm:px-8 py-3 sm:py-4 border-[2px] sm:border-[3px] border-[#1a1a1a] bg-[#fff9f4] font-bold font-mono uppercase tracking-wider sm:tracking-widest text-xs sm:text-sm md:text-base shadow-[4px_4px_0px_#1a1a1a] hover:bg-[#f97028] hover:text-[#1a1a1a] transition-all active:translate-y-[2px] active:shadow-[2px_2px_0px_#1a1a1a]"
+                    >
+                      <span>Team Members</span>
+                      <motion.svg
+                        animate={{ rotate: showOperators ? 180 : 0 }}
+                        transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <polyline points="6 9 12 15 18 9" />
+                      </motion.svg>
+                    </button>
+
+                    <AnimatePresence initial={false}>
+                      {showOperators && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{
+                            height: { type: 'spring', stiffness: 250, damping: 30 },
+                            opacity: { duration: 0.25, delay: 0.05 },
+                          }}
+                          className="overflow-hidden"
+                        >
+                          <div className="pt-8 sm:pt-10">
+                            <h4 className="text-xl sm:text-2xl lg:text-3xl font-black uppercase tracking-widest mb-6 sm:mb-8 text-center w-full opacity-70">
+                              Operating Partners
+                            </h4>
+                            <TeamGrid members={theOperators} onClickBio={setSelectedBio} />
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'The Board' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Chief Patrons</SectionSubHeading>
+                  <TeamGridSmall members={chiefPatrons} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Patrons</SectionSubHeading>
+                  <TeamGrid members={patrons} onClickBio={setSelectedBio} />
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'Faculty' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Faculty Coordinator</SectionSubHeading>
+                  <TeamGridSmall members={facultyCoordinator} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Organising Team Members</SectionSubHeading>
+                  <TeamGrid members={facultyOrganizers} onClickBio={setSelectedBio} />
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'Jury & Experts' && (
+              <div className="mb-4">
+                <SectionSubHeading>Jury & Experts</SectionSubHeading>
+                <TeamGridSmall members={judges} onClickBio={setSelectedBio} />
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Decorative Divider */}
+        <div className="mt-8 sm:mt-12 md:mt-16">
+          <CoinDivider />
+        </div>
+
+      </div>
+
+      {/* Bio Modal Pop-in */}
+      <AnimatePresence>
+        {selectedBio && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(26,26,26,0.8)] backdrop-blur-sm p-3 sm:p-4"
+            onClick={() => setSelectedBio(null)}
+          >
             <motion.div
-              key={activeSubTab}
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              transition={{ duration: 0.4 }}
-              className="flex justify-center -mt-20"
+              layoutId={`modal-${selectedBio.id}`}
+              initial={{ scale: 0.9, y: 20 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 20 }}
+              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+              className="bg-[#f3ecd2] border-[3px] border-[#1a1a1a] shadow-[8px_8px_0px_#1a1a1a] sm:shadow-[16px_16px_0px_#1a1a1a] w-full max-w-lg p-5 sm:p-6 md:p-8 relative overflow-hidden"
+              onClick={(e) => e.stopPropagation()}
             >
-              <TeamCarousel 
-                members={subTeams[activeSubTab]} 
-                infoTextColor="#1a1a1a"
-                background="transparent"
-                className="w-full max-w-6xl mx-auto"
-              />
+              <button
+                className="absolute top-3 right-3 sm:top-4 sm:right-4 w-8 h-8 sm:w-10 sm:h-10 border-2 border-[#1a1a1a] flex items-center justify-center font-bold font-mono hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-sm sm:text-base"
+                onClick={() => setSelectedBio(null)}
+              >
+                X
+              </button>
+
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-display uppercase tracking-wider sm:tracking-widest text-[#f97028] mt-2 sm:mt-4 mb-1.5 sm:mb-2 pr-10 sm:pr-12 leading-tight">
+                {selectedBio.name}
+              </h2>
+              <p className="font-mono text-sm sm:text-base md:text-lg font-bold mb-4 sm:mb-6 opacity-70 uppercase">
+                {selectedBio.role}
+              </p>
+
+              <div className="w-full h-[2px] bg-[#1a1a1a] mb-4 sm:mb-6 opacity-20" />
+
+              <p className="text-sm sm:text-base md:text-lg leading-relaxed mb-6 sm:mb-8 md:mb-10 font-medium">
+                {selectedBio.bio || "No bio available right now. Currently busy building the future."}
+              </p>
+
+              <div className="flex gap-3 sm:gap-4">
+                <a
+                  href={selectedBio.twitter || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-2.5 sm:py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-wider sm:tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-xs sm:text-sm md:text-base"
+                >
+                  Twitter/X
+                </a>
+                <a
+                  href={selectedBio.linkedin || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-2.5 sm:py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-wider sm:tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-xs sm:text-sm md:text-base"
+                >
+                  LinkedIn
+                </a>
+              </div>
             </motion.div>
-          </AnimatePresence>
-        </motion.div>
-      )}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </section>
   );
 }
diff --git a/src/sections/Timeline.tsx b/src/sections/Timeline.tsx
index 3ce9bf9..eba3db1 100644
--- a/src/sections/Timeline.tsx
+++ b/src/sections/Timeline.tsx
@@ -101,6 +101,42 @@ function TrainSVG({ color }: { color: string }) {
   );
 }
 
+/* ─────────────────────────────────────
+   SVG SUBMARINE ICON (FOR MOBILE)
+   ───────────────────────────────────── */
+function SubmarineSVG({ color }: { color: string }) {
+  return (
+    <svg
+      width="64"
+      height="38"
+      viewBox="0 0 64 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* Submarine Body (Oval/Capsule) */}
+      <rect x="8" y="10" width="48" height="22" rx="11" fill="#1a1a1a" />
+      
+      {/* Conning Tower */}
+      <rect x="26" y="5" width="12" height="7" rx="2" fill="#1a1a1a" />
+      {/* Periscope */}
+      <path d="M30 5 L30 2 L33 2" stroke="#1a1a1a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+
+      {/* Portholes */}
+      <circle cx="24" cy="21" r="3" fill="#f3ecd2" />
+      <circle cx="32" cy="21" r="3" fill="#f3ecd2" />
+      <circle cx="40" cy="21" r="3" fill="#f3ecd2" />
+
+      {/* Accent Stripe */}
+      <rect x="15" y="26" width="34" height="3" rx="1.5" fill={color} />
+
+      {/* Rear Propeller Handle/Base */}
+      <rect x="2" y="18" width="6" height="6" rx="1" fill="#1a1a1a" />
+      {/* Propeller Blades */}
+      <rect x="4" y="14" width="2" height="14" rx="1" fill="#1a1a1a" />
+    </svg>
+  );
+}
+
 /* ─────────────────────────────────────
    TRACK COMPONENT
    ───────────────────────────────────── */
@@ -772,46 +808,48 @@ export default function Timeline() {
                 zIndex: 40,
               }}
             >
-              {/* Smoke puff animation */}
+              {/* Puffs or Bubbles animation */}
               <motion.div
                 className="absolute"
-                style={{ left: 12, top: -22, zIndex: 50 }}
-                animate={{ opacity: [0.7, 0, 0.7], y: [-2, -12, -2], scale: [0.7, 1.3, 0.7] }}
+                style={{ left: isMobile ? 4 : 12, top: isMobile ? 12 : -22, zIndex: 50 }}
+                animate={{ opacity: [0.7, 0, 0.7], y: isMobile ? [0, 0, 0] : [-2, -12, -2], x: isMobile ? [-2, -15, -2] : [0, 0, 0], scale: [0.7, 1.3, 0.7] }}
                 transition={{ duration: 1.4, repeat: Infinity, ease: 'easeInOut' }}
               >
                 <div
                   style={{
-                    width: 14,
-                    height: 14,
+                    width: isMobile ? 8 : 14,
+                    height: isMobile ? 8 : 14,
                     borderRadius: '50%',
-                    background: 'rgba(26,26,26,0.18)',
-                    filter: 'blur(3px)',
+                    background: isMobile ? 'rgba(255,255,255,0.45)' : 'rgba(26,26,26,0.18)',
+                    border: isMobile ? '1px solid rgba(255,255,255,0.2)' : 'none',
+                    filter: isMobile ? 'none' : 'blur(3px)',
                   }}
                 />
               </motion.div>
               <motion.div
                 className="absolute"
-                style={{ left: 6, top: -34, zIndex: 50 }}
-                animate={{ opacity: [0.5, 0, 0.5], y: [-2, -16, -2], scale: [0.5, 1.1, 0.5] }}
+                style={{ left: isMobile ? 0 : 6, top: isMobile ? 18 : -34, zIndex: 50 }}
+                animate={{ opacity: [0.5, 0, 0.5], y: isMobile ? [0, 0, 0] : [-2, -16, -2], x: isMobile ? [-2, -20, -2] : [0, 0, 0], scale: [0.5, 1.1, 0.5] }}
                 transition={{ duration: 1.4, repeat: Infinity, ease: 'easeInOut', delay: 0.3 }}
               >
                 <div
                   style={{
-                    width: 10,
-                    height: 10,
+                    width: isMobile ? 12 : 10,
+                    height: isMobile ? 12 : 10,
                     borderRadius: '50%',
-                    background: 'rgba(26,26,26,0.12)',
-                    filter: 'blur(4px)',
+                    background: isMobile ? 'rgba(255,255,255,0.35)' : 'rgba(26,26,26,0.12)',
+                    border: isMobile ? '1px solid rgba(255,255,255,0.15)' : 'none',
+                    filter: isMobile ? 'none' : 'blur(4px)',
                   }}
                 />
               </motion.div>
 
-              {/* Train body with bounce */}
+              {/* Vehicle body with bounce */}
               <motion.div
                 animate={{ y: [0, -4, 0] }}
                 transition={{ duration: 0.9, repeat: Infinity, ease: 'easeInOut' }}
               >
-                <TrainSVG color={COLORS[activeIdx]} />
+                {isMobile ? <SubmarineSVG color={COLORS[activeIdx]} /> : <TrainSVG color={COLORS[activeIdx]} />}
               </motion.div>
 
               {/* Active station name label on train */}