diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 09f35229..4b8b601f 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -165,17 +165,17 @@ const config: Config = {
             //   label: "📺 Broadcast",
             //   to: "https://codeharborhub-broadcast-web.vercel.app/",
             // },
-            ],
-          },
-          {
-            to: "/blogs",
-            html: '<span class="nav-emoji">📰</span> Blogs',
-          },
-          {
-            type: "dropdown",
-            html: '<span class="nav-emoji">🔗</span> More',
-            position: "left",
-            items: [
+          ],
+        },
+        {
+          to: "/blogs",
+          html: '<span class="nav-emoji">📰</span> Blogs',
+        },
+        {
+          type: "dropdown",
+          html: '<span class="nav-emoji">🔗</span> More',
+          position: "left",
+          items: [
             {
               label: "📜Projects",
               to: "#",
@@ -195,16 +195,12 @@ const config: Config = {
             },
             {
               label: "📺 Broadcast",
-              to: "/broadcasts/",
+              to: "https://www.youtube.com/recodehive",
             },
             {
               label: "🎙️ Podcast",
-              to: "/podcasts/",
+              to: "podcasts/",
             },            
-
-            ],
-          },
-
           ],
         },
         {
@@ -212,7 +208,6 @@ const config: Config = {
           position: "right",
           value: '<div id="firebase-auth-github-navbar"></div>',
         },
-
         // {
         //   type: "dropdown",
         //   html: '<span class="nav-emoji">🏷️</span> Tags',
diff --git a/src/pages/broadcasts/details.tsx b/src/pages/broadcasts/details.tsx
deleted file mode 100644
index c4d96b80..00000000
--- a/src/pages/broadcasts/details.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Layout from '@theme/Layout';
-import type { ReactElement } from 'react';
-import { useLocation } from '@docusaurus/router';
-import './index.css';
-
-interface VideoData {
-  id: string;
-  youtubeUrl: string;
-  type: 'video' | 'shorts';
-}
-
-interface LocationState {
-  video: VideoData;
-}
-
-// Function to extract YouTube video ID from URL
-const getYoutubeVideoId = (url: string): string => {
-  let videoId = '';
-  const normalMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/);
-  const shortsMatch = url.match(/youtube\.com\/shorts\/([^&\s]+)/);
-  
-  if (normalMatch) {
-    videoId = normalMatch[1];
-  } else if (shortsMatch) {
-    videoId = shortsMatch[1];
-  }
-  return videoId;
-};
-
-export default function VideoDetails(): ReactElement {
-  const location = useLocation();
-  const state = location.state as LocationState;
-  const video = state?.video;
-  const [title, setTitle] = useState<string>('Loading...');
-
-  useEffect(() => {
-    const fetchVideoTitle = async () => {
-      if (!video?.youtubeUrl) return;
-      
-      try {
-        const response = await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(video.youtubeUrl)}&format=json`);
-        const data = await response.json();
-        setTitle(data.title);
-      } catch (error) {
-        setTitle('Video Title Unavailable');
-        console.error('Error fetching video title:', error);
-      }
-    };
-
-    fetchVideoTitle();
-  }, [video?.youtubeUrl]);
-
-  // Random descriptive text about videos
-  const descriptions = [
-    "Watch engaging content that inspires and educates.",
-    "Experience the power of visual storytelling.",
-    "Join us on a journey of learning through video.",
-    "Explore new concepts through dynamic video content.",
-    "Get inspired by expert insights and demonstrations.",
-    "Discover trending topics and timely tutorials.",
-    "Learn from the best in the field.",
-    "Stay updated with the latest trends and techniques.",
-    "Enhance your skills through visual learning.",
-  ];
-
-  // Get a random description
-  const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)];
-
-  if (!video) {
-    return (
-      <Layout>
-        <div className="video-container">
-          <h1>Video Not Found</h1>
-          <p>Sorry, we couldn't find the video you're looking for.</p>
-        </div>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout>
-      <div className="video-container">
-        <div className="video-card details-card">
-          <div className="video-content">
-            <div className="video-info">
-              <div className="video-title">
-                <strong>{title}</strong>
-              </div>
-              <div className="video-type">
-                {video.type === 'shorts' ? '📱 Shorts' : '🎥 Video'}
-              </div>
-            </div>
-            <div className="video-description">
-              <p>{randomDescription}</p>
-            </div>
-            <div className="video-embed-large">
-              <iframe
-                src={`https://www.youtube.com/embed/${getYoutubeVideoId(video.youtubeUrl)}${video.type === 'shorts' ? '?loop=1' : ''}`}
-                width="100%"
-                height="600"
-                frameBorder="0"
-                allowFullScreen
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                loading="lazy"
-                title={title}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/broadcasts/index.css b/src/pages/broadcasts/index.css
deleted file mode 100644
index 80ebeb8e..00000000
--- a/src/pages/broadcasts/index.css
+++ /dev/null
@@ -1,397 +0,0 @@
-.podcast-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.podcast-subtitle {
-  color: #666;
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-h1 {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.podcast-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-  margin-top: 2rem;
-}
-
-.podcast-card {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease;
-  cursor: pointer;
-}
-
-.podcast-card:hover {
-  transform: translateY(-4px);
-}
-
-.podcast-content {
-  height: 100%;
-}
-
-.podcast-info {
-  padding: 1rem;
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 8px 8px 0 0;
-}
-
-.podcast-info h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: #333;
-}
-
-.podcast-description {
-  font-size: 0.9rem;
-  color: #666;
-  margin-bottom: 0.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.podcast-publisher {
-  font-size: 0.8rem;
-  color: #888;
-  margin: 0;
-  font-style: italic;
-}
-
-.podcast-embed {
-  height: 100%;
-  border-radius: 0 0 12px 12px;
-  overflow: hidden;
-}
-
-.podcast-embed iframe {
-  border: none;
-  width: 100%;
-  height: 100%;
-  min-height: 352px;
-  background: #282828;
-  border-radius: 12px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 2rem;
-  padding: 1rem;
-}
-
-.pagination-button {
-  padding: 0.5rem 1rem;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.pagination-button:hover {
-  background: #f0f0f0;
-}
-
-.pagination-button.active {
-  background: #0066cc;
-  color: white;
-  border-color: #0066cc;
-}
-
-@media (max-width: 968px) {
-  .podcast-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .podcast-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .podcast-container {
-    padding: 1rem;
-  }
-}
-
-/* Podcast Details Page Styles */
-.back-button {
-  margin-bottom: 1rem;
-  padding: 0.5rem 1rem;
-  border: none;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  color: #333;
-  display: inline-flex;
-  align-items: center;
-  transition: background-color 0.2s;
-}
-
-.back-button:hover {
-  background-color: #e0e0e0;
-}
-
-.podcast-details {
-  max-width: 800px;
-  margin: 0 auto;
-  padding-top: 1rem;
-}
-
-.podcast-embed-large {
-  margin-bottom: 2rem;
-}
-
-.podcast-transcript {
-  background: #fff;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.podcast-transcript h2 {
-  margin-bottom: 1rem;
-  color: #333;
-}
-
-.podcast-card {
-  cursor: pointer;
-}
-
-.details-card {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background: var(--ifm-background-surface-color);
-}
-
-.video-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.video-subtitle {
-  color: #666;
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.video-section {
-  margin-bottom: 3rem;
-}
-
-.video-section h2 {
-  font-size: 1.8rem;
-  margin-bottom: 1.5rem;
-  color: var(--ifm-color-primary);
-  border-bottom: 2px solid var(--ifm-color-primary);
-  padding-bottom: 0.5rem;
-}
-
-.video-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-  margin-top: 1rem;
-}
-
-.video-card {
-  background: var(--ifm-card-background-color);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease;
-  height: 100%;
-}
-
-.video-card:hover {
-  transform: translateY(-4px);
-}
-
-.video-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.video-info {
-  padding: 1rem;
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.video-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.1rem;
-  color: var(--ifm-font-color-base);  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.4;
-}
-
-.video-type {
-  font-size: 0.9rem;
-  color: var(--ifm-color-emphasis-600);
-  margin-top: 0.5rem;
-}
-
-.video-thumbnail {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
-  overflow: hidden;
-  background: var(--ifm-color-emphasis-200);
-  flex-grow: 1;
-  border-radius: 12px;
-  margin: 0.5rem;
-}
-
-.video-play-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 68px;
-  height: 48px;
-  background: rgba(33, 33, 33, 0.8);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  color: white;
-  transition: all 0.2s ease;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.video-card:hover .video-play-button {
-  background: #ff0000;
-  transform: translate(-50%, -50%) scale(1.1);
-}
-
-.video-thumbnail img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  background: var(--ifm-color-emphasis-100);
-  transition: transform 0.3s ease;
-  z-index: 1;
-}
-
-.video-card:hover .video-thumbnail img {
-  transform: scale(1.05);
-}
-
-.video-embed-large {
-  width: 100%;
-  margin: 1rem 0;
-  position: relative;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
-}
-
-.video-embed-large iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 2rem;
-  padding: 1rem;
-}
-
-.pagination-button {
-  padding: 0.5rem 1rem;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.pagination-button:hover {
-  background: #f0f0f0;
-}
-
-.pagination-button.active {
-  background: #0066cc;
-  color: white;
-  border-color: #0066cc;
-}
-
-@media (max-width: 968px) {
-  .video-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .video-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .video-container {
-    padding: 1rem;
-  }
-  
-  .video-section h2 {
-    font-size: 1.5rem;
-  }
-}
-
-.pagination {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.pagination button {
-  padding: 8px 16px;
-  margin: 0 8px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.pagination button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-.pagination span {
-  font-weight: bold;
-}
diff --git a/src/pages/broadcasts/index.tsx b/src/pages/broadcasts/index.tsx
deleted file mode 100644
index 05332447..00000000
--- a/src/pages/broadcasts/index.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Layout from '@theme/Layout';
-import type { ReactElement } from 'react';
-import { useHistory } from '@docusaurus/router';
-import './video.css';
-
-interface VideoData {
-  id: string;
-  youtubeUrl: string;
-  type: 'video' | 'shorts';
-}
-
-const getYoutubeVideoId = (url: string): string => {
-  let videoId = '';
-  const normalMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/);
-  const shortsMatch = url.match(/youtube\.com\/shorts\/([^&\s]+)/);
-  if (normalMatch) videoId = normalMatch[1];
-  else if (shortsMatch) videoId = shortsMatch[1];
-  return videoId;
-};
-
-const getYoutubeContentType = (url: string): 'video' | 'shorts' =>
-  url.includes('/shorts/') ? 'shorts' : 'video';
-
-// List of both videos and shorts which will be handeled by the component
-const videoUrls: string[] = [
-    "https://youtu.be/Fl2L9bXSRy0?si=Pdvb0oBLCP4TCIwF",
-    "https://youtu.be/vuUusiD7EDM?si=4UTby9iK5hUNhNJ4",
-    "https://youtu.be/xdjZ0HXADjE?si=JkIuRgwJ8Z3qbjxi",
-    "https://youtu.be/DmYe2itxSQA?si=skfOHQcC6EI8kouM",
-    "https://youtu.be/V2nvZYe_q7g?si=SkagJNJNUqCGsPXX",
-    "https://youtu.be/7BL6eInh7qo?si=iwZmF9iWGzUly91r",
-    "https://youtu.be/oyi86CljSk4?si=FKQBbJQ1qmi1movv",
-    "https://youtu.be/akz9xHL1RQo?si=thHXvVijm4fo9N58",
-    "https://youtu.be/4JX-SIkM3uk?si=r2kvpCztaPEoCKoM",
-    "https://youtube.com/shorts/zSu-K54fI8s?si=CPriy5v8uCTV5YlW",
-    "https://youtube.com/shorts/Wj3GEuwoNWc?si=PdfmvBSYrC7vRtvc",
-    "https://youtube.com/shorts/YOY-6VCZhic?si=FSBCIhPkCLPRWTg5",
-    "https://youtube.com/shorts/QUe3MG8mrCA?si=-LPWBr6ugtYicH9d",
-    "https://youtube.com/shorts/OGx-8hVSkHI?si=yVdRjmuhI38EV51_",
-    "https://youtube.com/shorts/ETVU4yeOxB4?si=mV68Bv7q8ozmPg9v",
-    "https://youtube.com/shorts/HGLhwI5ieL0?si=Ay_E2DK43slrtRXn",
-    "https://youtube.com/shorts/WpDc9yNGDxA?si=zrrvKuu-c_ZOemYi",
-    "https://youtube.com/shorts/N-9NUXvdvcM?si=rD_uqweUQou5VAvD",
-    "https://youtube.com/shorts/sN6RtRiT8D8?si=MThSH4PMl5O1OVTN",
-];
-
-const VideoCard: React.FC<{
-  video: VideoData;
-  onClick: (video: VideoData, event: React.MouseEvent | React.KeyboardEvent) => void;
-}> = ({ video, onClick }) => {
-  const [title, setTitle] = useState('Loading...');
-  const [thumbnailError, setThumbnailError] = useState(false);
-  const videoId = getYoutubeVideoId(video.youtubeUrl);
-
-  useEffect(() => {
-    const fetchVideoTitle = async () => {
-      try {
-        const response = await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(video.youtubeUrl)}&format=json`);
-        const data = await response.json();
-        setTitle(data.title);
-      } catch (error) {
-        setTitle('Video Title Unavailable');
-        console.error('Error fetching video title:', error);
-      }
-    };
-
-    setThumbnailError(false);
-    fetchVideoTitle();
-  }, [video.youtubeUrl, videoId]);
-
-  return (
-    <div 
-      className="video-card"
-      onClick={(e) => onClick(video, e)}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') onClick(video, e);
-      }}
-    >
-      <div className="video-content">
-        <div className="video-info">          <div className="video-title">{title}</div>
-          <div className="video-type">
-            <span>
-              {video.type === 'shorts' ? (
-                <>
-                  <span role="img" aria-label="shorts">📱</span> Shorts
-                </>
-              ) : (
-                <>
-                  <span role="img" aria-label="video">🎥</span> Video
-                </>
-              )}
-            </span>
-          </div>
-        </div>
-        <div className="video-thumbnail">
-          {!thumbnailError && (
-            <img
-              src={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
-              alt={title}
-              loading="lazy"
-              onError={(e) => {
-                const img = e.target as HTMLImageElement;
-                if (img.src.includes('maxresdefault')) {
-                  img.src = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`;
-                } else if (img.src.includes('sddefault')) {
-                  img.src = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
-                } else if (img.src.includes('hqdefault')) {
-                  img.src = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
-                } else {
-                  setThumbnailError(true);
-                }
-              }}
-            />
-          )}
-          <div className="video-play-button">▶</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const VideoSection: React.FC<{
-  title: string;
-  videos: VideoData[];
-  onClick: (video: VideoData, event: React.MouseEvent | React.KeyboardEvent) => void;
-}> = ({ title, videos, onClick }) => {
-  if (videos.length === 0) return null;
-
-  return (
-    <div className="video-section">
-      <h2>{title}</h2>
-      <div className="video-grid">
-        {videos.map((video) => (
-          <VideoCard key={video.id} video={video} onClick={onClick} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const Pagination: React.FC<{
-  currentPage: number;
-  totalPages: number;
-  setCurrentPage: (page: number) => void;
-}> = ({ currentPage, totalPages, setCurrentPage }) => (
-  <div className="pagination">    <button
-      disabled={currentPage === 1}
-      onClick={() => setCurrentPage(currentPage - 1)}
-      title="Previous page"
-    >
-      ← Previous
-    </button>
-    <span>Page {currentPage} of {totalPages}</span>
-    <button
-      disabled={currentPage === totalPages}
-      onClick={() => setCurrentPage(currentPage + 1)}
-      title="Next page"
-    >
-      Next →
-    </button>
-  </div>
-);
-
-function BroadcastsPage(): ReactElement {
-  const history = useHistory();
-  const [currentPage, setCurrentPage] = useState(1);
-  const [activeTab, setActiveTab] = useState<'videos' | 'shorts'>('videos');
-  const videosPerPage = 6;
-
-  const videoData: VideoData[] = videoUrls.map((url, index) => ({
-    id: String(index + 1),
-    youtubeUrl: url,
-    type: getYoutubeContentType(url),
-  }));
-
-  const regularVideos = videoData.filter(video => video.type === 'video');
-  const shorts = videoData.filter(video => video.type === 'shorts');
-
-  const indexOfLastVideo = currentPage * videosPerPage;
-  const indexOfFirstVideo = indexOfLastVideo - videosPerPage;
-
-  const paginatedVideos = regularVideos.slice(indexOfFirstVideo, indexOfLastVideo);
-  const paginatedShorts = shorts.slice(indexOfFirstVideo, indexOfLastVideo);
-  const totalPages = Math.ceil((activeTab === 'videos' ? regularVideos.length : shorts.length) / videosPerPage);
-
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [activeTab]);
-
-  const handleVideoClick = (video: VideoData, event: React.MouseEvent | React.KeyboardEvent) => {
-    const target = event.target as HTMLElement;
-    if (target.tagName === 'IFRAME' || target.className === 'video-embed') return;
-    history.push('/broadcasts/details', { video });
-  };
-
-  return (
-    <Layout>
-      <div className="video-container">
-        <h1>Featured Content</h1>
-        <p className="video-subtitle">Watch our curated collection of videos and shorts</p>
-        
-        <div className="video-tabs">
-          <button 
-            className={`tab-button ${activeTab === 'videos' ? 'active' : ''}`}
-            onClick={() => setActiveTab('videos')}
-          >
-            🎥 Videos
-          </button>
-          <button 
-            className={`tab-button ${activeTab === 'shorts' ? 'active' : ''}`}
-            onClick={() => setActiveTab('shorts')}
-          >
-            📱 Shorts
-          </button>
-        </div>
-
-        {activeTab === 'videos' && (
-          <>
-            <VideoSection
-              title="Latest Videos"
-              videos={paginatedVideos}
-              onClick={handleVideoClick}
-            />
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              setCurrentPage={setCurrentPage}
-            />
-          </>
-        )}
-
-        {activeTab === 'shorts' && (
-          <>
-            <VideoSection
-              title="YouTube Shorts"
-              videos={paginatedShorts}
-              onClick={handleVideoClick}
-            />
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              setCurrentPage={setCurrentPage}
-            />
-          </>
-        )}
-      </div>
-    </Layout>
-  );
-}
-
-export default BroadcastsPage;
diff --git a/src/pages/broadcasts/video.css b/src/pages/broadcasts/video.css
deleted file mode 100644
index d55ad47f..00000000
--- a/src/pages/broadcasts/video.css
+++ /dev/null
@@ -1,233 +0,0 @@
-.video-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 3rem 2rem;
-  background: var(--ifm-background-color);
-}
-
-.video-subtitle {
-  color: var(--ifm-color-emphasis-600);
-  font-size: 1.25rem;
-  margin: 1rem auto 3rem;
-  text-align: center;
-  max-width: 800px;
-  line-height: 1.6;
-  font-weight: 300;
-}
-
-.video-section {
-  margin-bottom: 4rem;
-  position: relative;
-}
-
-.video-section h2 {
-  font-size: 1.8rem;
-  margin-bottom: 2rem;
-  color: var(--ifm-color-primary);
-  padding-bottom: 0.75rem;
-  position: relative;
-  font-weight: 600;
-}
-
-.video-section h2::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 60px;
-  height: 4px;
-  background: var(--ifm-color-primary);
-  border-radius: 2px;
-}
-
-.video-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-  margin-top: 1rem;
-}
-
-.video-card {
-  background: var(--ifm-card-background-color);
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 100%;
-  cursor: pointer;
-  padding: 1.5rem;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  position: relative;
-  isolation: isolate;
-}
-
-.video-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-
-.video-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.video-info {
-  padding: 1.25rem;
-  background: var(--ifm-background-surface-color);
-  border-radius: 16px;
-  margin-bottom: 1rem;
-  border: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.video-title {
-  margin: 0 0 0.75rem 0;
-  font-size: 1.15rem;
-  color: var(--ifm-heading-color);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.5;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.video-type {
-  font-size: 0.9rem;
-  color: var(--ifm-color-emphasis-600);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.video-type span {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.35rem 0.75rem;
-  background: var(--ifm-color-emphasis-100);
-  border-radius: 100px;
-  font-weight: 500;
-}
-
-.video-thumbnail {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
-  overflow: hidden;
-  background: var(--ifm-color-emphasis-200);
-  flex-grow: 1;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.video-play-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.9);
-  width: 70px;
-  height: 70px;
-  background: rgba(255, 0, 0, 0.9);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 28px;
-  color: white;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 2;
-  pointer-events: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.video-thumbnail img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-  background: var(--ifm-color-emphasis-200);
-}
-
-.video-card:hover .video-play-button {
-  background: rgb(255, 0, 0);
-  transform: translate(-50%, -50%) scale(1);
-  box-shadow: 0 6px 16px rgba(255, 0, 0, 0.3);
-}
-
-.video-card:hover .video-thumbnail img {
-  transform: scale(1.02);
-}
-
-.video-embed-large {
-  width: 100%;
-  margin: 1rem 0;
-  position: relative;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
-}
-
-.video-embed-large iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-}
-
-.video-tabs {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.tab-button {
-  padding: 0.875rem 2rem;
-  font-size: 1rem;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  background: var(--ifm-background-surface-color);
-  color: var(--ifm-color-emphasis-700);
-  border-radius: 100px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
-  margin: 0 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.tab-button:hover {
-  background: var(--ifm-color-primary-lighter);
-  color: var(--ifm-color-white);
-}
-
-.tab-button.active {
-  background: var(--ifm-color-primary);
-  color: var(--ifm-color-white);
-}
-
-@media (max-width: 968px) {
-  .video-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .video-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .video-container {
-    padding: 1rem;
-  }
-  
-  .video-section h2 {
-    font-size: 1.5rem;
-  }
-}