$page_title = 'Video Gallery';
$meta_description = 'Watch videos from Preset Pacesetters SHS, including school events, campus life, and student activities.';
$meta_keywords = 'video gallery, school videos, Preset Pacesetters SHS, YouTube school videos';

include 'includes/header.php'; ?>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #4a00e0;
            --secondary-color: #8e2de2;
            --accent-color: #ff416c;
            --youtube-red: #ff0000;
            --dark-color: #1a1a2e;
            --light-color: #f8f9fa;
            --text-dark: #333;
            --text-light: #666;
            --white: #ffffff;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Modal Styles */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            opacity: 0;
            transition: opacity 0.4s ease;
            overflow-y: auto;
        }

        .video-modal.active {
            display: flex;
            opacity: 1;
            animation: fadeIn 0.4s ease forwards;
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 1200px;
            margin: auto;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            transform: scale(0.9);
            transition: transform 0.4s ease;
        }

        .video-modal.active .modal-content {
            transform: scale(1);
        }

        .modal-header {
            padding: 25px 30px;
            background: rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin: 0;
        }

        .close-modal {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-modal:hover {
            background: var(--youtube-red);
            transform: rotate(90deg);
        }

        .video-player-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            background: #000;
        }

        .video-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .modal-body {
            padding: 30px;
            color: white;
        }

        .modal-video-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: white;
        }

        .modal-video-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
        }

        .modal-video-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            margin-bottom: 30px;
            font-size: 1rem;
        }

        .modal-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .modal-action-btn {
            padding: 12px 25px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition);
            font-size: 0.95rem;
        }

        .modal-watch-youtube {
            background: var(--youtube-red);
            color: white;
            text-decoration: none;
        }

        .modal-watch-youtube:hover {
            background: #cc0000;
            transform: translateY(-3px);
        }

        .modal-copy-link {
            background: var(--primary-color);
            color: white;
        }

        .modal-copy-link:hover {
            background: var(--secondary-color);
            transform: translateY(-3px);
        }

        /* Header Styles */
        .video-header {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(74, 0, 224, 0.35));
            color: white;
            padding: 100px 20px 80px;
            text-align: center;
            position: relative;
            overflow: visible;
            z-index: 1;
            margin-bottom: 60px;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        }

        .video-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,181.3C672,171,768,181,864,186.7C960,192,1056,192,1152,181.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center no-repeat;
            background-size: cover;
            animation: wave 20s linear infinite;
        }

        @keyframes wave {
            0% { background-position-x: 0; }
            100% { background-position-x: 1440px; }
        }

        .header-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
        }

        .video-header h1 {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 20px;
            letter-spacing: -1px;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: fadeInDown 1s ease;
        }

        .video-header .subtitle {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto 40px;
            animation: fadeInUp 1s ease 0.2s both;
        }

        /* Stats */
        .video-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease 0.4s both;
        }

        .stat-item {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 150px;
            transition: var(--transition);
        }

        .stat-item:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
        }

        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: var(--accent-color);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            display: block;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
            color: white;
        }

        /* Filter Controls - Simplified without category */
        .filter-container {
            max-width: 1200px;
            margin: 0 auto 40px;
            padding: 0 20px;
            animation: fadeIn 1s ease 0.6s both;
        }

        .filter-controls {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .sort-select {
            padding: 12px 25px;
            border: 2px solid #e0e6ed;
            border-radius: 50px;
            background: white;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            min-width: 200px;
        }

        .sort-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.1);
        }

        /* Video Grid */
        .videos-container {
            max-width: 1400px;
            margin: 0 auto 100px;
            padding: 0 20px;
            animation: fadeIn 1s ease 0.8s both;
        }

        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

        /* Video Card */
        .video-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            cursor: pointer;
            opacity: 0;
            transform: translateY(30px);
            animation: cardAppear 0.8s ease forwards;
        }

        .video-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
        }

        .video-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
            z-index: 1;
            opacity: 0;
            transition: var(--transition);
        }

        .video-card:hover::before {
            opacity: 1;
        }

        .video-thumbnail {
            position: relative;
            width: 100%;
            height: 220px;
            overflow: hidden;
        }

        .video-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .video-card:hover .video-thumbnail img {
            transform: scale(1.1);
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 80px;
            height: 80px;
            background: rgba(255, 0, 0, 0.85);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            transition: var(--transition);
            z-index: 2;
            opacity: 0;
        }

        .video-card:hover .play-button {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .play-button:hover {
            background: rgba(255, 0, 0, 1);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .video-content {
            padding: 25px;
            position: relative;
            z-index: 2;
        }

        .video-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--text-dark);
            line-height: 1.4;
        }

        .video-card:hover .video-title {
            color: white;
        }

        .video-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .video-card:hover .video-meta {
            color: rgba(255, 255, 255, 0.8);
        }

        .video-date {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .video-id {
            display: inline-block;
            padding: 5px 15px;
            background: var(--light-color);
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary-color);
            font-family: monospace;
        }

        .video-card:hover .video-id {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .video-description {
            color: var(--text-light);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease;
        }

        .video-card:hover .video-description {
            color: rgba(255, 255, 255, 0.9);
            max-height: 100px;
        }

        .video-actions {
            display: flex;
            gap: 10px;
            opacity: 0;
            transform: translateY(20px);
            transition: var(--transition);
        }

        .video-card:hover .video-actions {
            opacity: 1;
            transform: translateY(0);
        }

        .action-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
            text-decoration: none;
        }

        .watch-btn {
            background: var(--youtube-red);
            color: white;
        }

        .watch-btn:hover {
            background: #cc0000;
            transform: translateY(-2px);
        }

        .share-btn {
            background: var(--primary-color);
            color: white;
        }

        .share-btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 100px 20px;
            max-width: 600px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: var(--shadow);
        }

        .empty-state i {
            font-size: 80px;
            color: var(--youtube-red);
            margin-bottom: 30px;
            opacity: 0.5;
        }

        .empty-state h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--text-dark);
        }

        .empty-state p {
            color: var(--text-light);
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        /* Footer */
        .video-footer {
            background: var(--dark-color);
            color: white;
            padding: 80px 20px 40px;
            text-align: center;
            clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
        }

        

        /* Animations */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes cardAppear {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Video Card Stagger Animation */
        .video-card:nth-child(1) { animation-delay: 0.1s; }
        .video-card:nth-child(2) { animation-delay: 0.2s; }
        .video-card:nth-child(3) { animation-delay: 0.3s; }
        .video-card:nth-child(4) { animation-delay: 0.4s; }
        .video-card:nth-child(5) { animation-delay: 0.5s; }
        .video-card:nth-child(6) { animation-delay: 0.6s; }
        .video-card:nth-child(7) { animation-delay: 0.7s; }
        .video-card:nth-child(8) { animation-delay: 0.8s; }

        /* Loading Animation */
        .loader {
            display: none;
            text-align: center;
            padding: 40px;
        }

        .loader.active {
            display: block;
        }

        .loader .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top-color: var(--youtube-red);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Scroll to Top */
        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--youtube-red);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: var(--transition);
            z-index: 1000;
            box-shadow: 0 5px 20px rgba(255, 0, 0, 0.3);
        }

        .scroll-top.visible {
            display: flex;
            animation: bounceIn 0.5s ease;
        }

        .scroll-top:hover {
            background: #cc0000;
            transform: translateY(-5px) rotate(5deg);
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
            }
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .videos-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .video-header {
                padding: 80px 20px 60px;
            }
            
            .video-header h1 {
                font-size: 2.8rem;
            }
            
            .video-header .subtitle {
                font-size: 1.1rem;
            }
            
            .video-stats {
                gap: 20px;
            }
            
            .stat-item {
                min-width: 120px;
                padding: 15px;
            }
            
            .filter-controls {
                flex-direction: column;
                align-items: stretch;
            }
            
            .videos-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
            }
            
            .video-thumbnail {
                height: 200px;
            }
            
            .footer-links {
                flex-direction: column;
                gap: 20px;
            }
            
            .modal-content {
                width: 95%;
                margin: 20px auto;
            }
            
            .modal-header {
                padding: 20px;
            }
            
            .modal-body {
                padding: 20px;
            }
            
            .modal-video-title {
                font-size: 1.4rem;
            }
            
            .modal-actions {
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            .video-header {
                padding: 60px 15px 40px;
            }
            
            .video-header h1 {
                font-size: 2.2rem;
            }
            
            .video-stats {
                flex-direction: column;
                align-items: center;
            }
            
            .videos-grid {
                grid-template-columns: 1fr;
            }
            
            .video-content {
                padding: 20px;
            }
            
            .video-title {
                font-size: 1.2rem;
            }
            
            .modal-content {
                width: 100%;
                border-radius: 0;
                margin: 0;
                min-height: 100vh;
            }
        }
    </style>

    <!-- Video Modal -->
    <div class="video-modal" id="videoModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalVideoTitle">Video Title</h3>
                <button class="close-modal" id="closeModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="video-player-container">
                <iframe class="video-player" id="modalVideoPlayer" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                </iframe>
            </div>
            
            <div class="modal-body">
                <h2 class="modal-video-title" id="modalFullTitle">Video Title</h2>
                
                <div class="modal-video-meta">
                    <span class="modal-video-date">
                        <i class="far fa-calendar"></i>
                        <span id="modalVideoDate">Date</span>
                    </span>
                    <span class="modal-video-id">
                        <i class="fas fa-hashtag"></i>
                        <span id="modalVideoId">Video ID</span>
                    </span>
                </div>
                
                <div class="modal-video-description" id="modalVideoDescription">
                    Watch this video in high quality. Click the button below to watch it on YouTube for the best experience.
                </div>
                
                <div class="modal-actions">
                    <a href="#" target="_blank" class="modal-action-btn modal-watch-youtube" id="modalYouTubeLink">
                        <i class="fab fa-youtube"></i> Watch on YouTube
                    </a>
                    <button class="modal-action-btn modal-copy-link" id="modalCopyLink">
                        <i class="fas fa-link"></i> Copy Link
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll to Top Button -->
    <button class="scroll-top" id="scrollTop">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Header Section -->
    <header class="video-header">
        <div class="header-content">
            <h1><i class="fab fa-youtube"></i> Video Gallery</h1>
            <p class="subtitle">Watch, learn, and be inspired by our collection of videos. From school events to educational content, explore moments captured on video.</p>
            
            <div class="video-stats">
                <div class="stat-item">
                    <i class="fas fa-video stat-icon"></i>
                    <span class="stat-number">18</span>
                    <span class="stat-label">Total Videos</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-clock stat-icon"></i>
                    <span class="stat-number">HD</span>
                    <span class="stat-label">Quality</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-eye stat-icon"></i>
                    <span class="stat-number">YouTube</span>
                    <span class="stat-label">Platform</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Filter Controls -->
    <div class="filter-container">
        <div class="filter-controls">
            <select class="sort-select" id="sortSelect">
                <option value="newest">Newest First</option>
                <option value="oldest">Oldest First</option>
                <option value="title">By Title (A-Z)</option>
                <option value="title-desc">By Title (Z-A)</option>
            </select>
        </div>
    </div>

    <!-- Main Content -->
    <main>
        <div class="videos-container">
                            <div class="videos-grid" id="videosGrid">
                                            <div class="video-card" 
                             data-title="Excursion"
                             data-date="1785333348"
                             data-index="0"
                             data-video-id="zo7BtCVU5aQ"
                             data-youtube-link="https://www.youtube.com/watch?v=zo7BtCVU5aQ"
                             data-date-formatted="Jul 29, 2026">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/zo7BtCVU5aQ/maxresdefault.jpg" 
                                     alt="Excursion"
                                     onerror="this.src='https://img.youtube.com/vi/zo7BtCVU5aQ/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Excursion</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Jul 29, 2026                                    </div>
                                    <span class="video-id">ID: zo7BtCVU5aQ</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="zo7BtCVU5aQ"
                                            data-title="Excursion"
                                            data-youtube-link="https://www.youtube.com/watch?v=zo7BtCVU5aQ"
                                            data-date="Jul 29, 2026">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=zo7BtCVU5aQ" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Visit to UGMC"
                             data-date="1785333143"
                             data-index="1"
                             data-video-id="PYSdNt-W4_U"
                             data-youtube-link="https://www.youtube.com/watch?v=PYSdNt-W4_U&amp;t=9s"
                             data-date-formatted="Jul 29, 2026">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/PYSdNt-W4_U/maxresdefault.jpg" 
                                     alt="Visit to UGMC"
                                     onerror="this.src='https://img.youtube.com/vi/PYSdNt-W4_U/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Visit to UGMC</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Jul 29, 2026                                    </div>
                                    <span class="video-id">ID: PYSdNt-W4_U</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="PYSdNt-W4_U"
                                            data-title="Visit to UGMC"
                                            data-youtube-link="https://www.youtube.com/watch?v=PYSdNt-W4_U&amp;t=9s"
                                            data-date="Jul 29, 2026">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=PYSdNt-W4_U&amp;t=9s" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Mr. &amp; Mrs. Preset"
                             data-date="1767036523"
                             data-index="2"
                             data-video-id="Mixz4EQGOe0"
                             data-youtube-link="https://www.youtube.com/watch?v=Mixz4EQGOe0"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/Mixz4EQGOe0/maxresdefault.jpg" 
                                     alt="Mr. &amp; Mrs. Preset"
                                     onerror="this.src='https://img.youtube.com/vi/Mixz4EQGOe0/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Mr. &amp; Mrs. Preset</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: Mixz4EQGOe0</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="Mixz4EQGOe0"
                                            data-title="Mr. &amp; Mrs. Preset"
                                            data-youtube-link="https://www.youtube.com/watch?v=Mixz4EQGOe0"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=Mixz4EQGOe0" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Girls Having Supper"
                             data-date="1767036480"
                             data-index="3"
                             data-video-id="6Aukrde9aZs"
                             data-youtube-link="https://www.youtube.com/watch?v=6Aukrde9aZs"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/6Aukrde9aZs/maxresdefault.jpg" 
                                     alt="Preset SHS Girls Having Supper"
                                     onerror="this.src='https://img.youtube.com/vi/6Aukrde9aZs/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Girls Having Supper</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: 6Aukrde9aZs</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="6Aukrde9aZs"
                                            data-title="Preset SHS Girls Having Supper"
                                            data-youtube-link="https://www.youtube.com/watch?v=6Aukrde9aZs"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=6Aukrde9aZs" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Pre-SHS Programme"
                             data-date="1767036123"
                             data-index="4"
                             data-video-id="MckoXPiildk"
                             data-youtube-link="https://www.youtube.com/watch?v=MckoXPiildk"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/MckoXPiildk/maxresdefault.jpg" 
                                     alt="Pre-SHS Programme"
                                     onerror="this.src='https://img.youtube.com/vi/MckoXPiildk/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Pre-SHS Programme</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: MckoXPiildk</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="MckoXPiildk"
                                            data-title="Pre-SHS Programme"
                                            data-youtube-link="https://www.youtube.com/watch?v=MckoXPiildk"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=MckoXPiildk" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Urban Gospel Stylers perform at Preset SHS Carols"
                             data-date="1767035940"
                             data-index="5"
                             data-video-id="joZGpkXn8ps"
                             data-youtube-link="https://www.youtube.com/watch?v=joZGpkXn8ps"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/joZGpkXn8ps/maxresdefault.jpg" 
                                     alt="Urban Gospel Stylers perform at Preset SHS Carols"
                                     onerror="this.src='https://img.youtube.com/vi/joZGpkXn8ps/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Urban Gospel Stylers perform at Preset SHS Carols</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: joZGpkXn8ps</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="joZGpkXn8ps"
                                            data-title="Urban Gospel Stylers perform at Preset SHS Carols"
                                            data-youtube-link="https://www.youtube.com/watch?v=joZGpkXn8ps"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=joZGpkXn8ps" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Exams Week"
                             data-date="1767035907"
                             data-index="6"
                             data-video-id="hwmP99kEFwk"
                             data-youtube-link="https://www.youtube.com/watch?v=hwmP99kEFwk"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/hwmP99kEFwk/maxresdefault.jpg" 
                                     alt="Preset SHS Exams Week"
                                     onerror="this.src='https://img.youtube.com/vi/hwmP99kEFwk/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Exams Week</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: hwmP99kEFwk</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="hwmP99kEFwk"
                                            data-title="Preset SHS Exams Week"
                                            data-youtube-link="https://www.youtube.com/watch?v=hwmP99kEFwk"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=hwmP99kEFwk" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Girls Inspection"
                             data-date="1767035853"
                             data-index="7"
                             data-video-id="f8A41nsk9Xw"
                             data-youtube-link="https://www.youtube.com/watch?v=f8A41nsk9Xw"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/f8A41nsk9Xw/maxresdefault.jpg" 
                                     alt="Preset SHS Girls Inspection"
                                     onerror="this.src='https://img.youtube.com/vi/f8A41nsk9Xw/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Girls Inspection</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: f8A41nsk9Xw</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="f8A41nsk9Xw"
                                            data-title="Preset SHS Girls Inspection"
                                            data-youtube-link="https://www.youtube.com/watch?v=f8A41nsk9Xw"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=f8A41nsk9Xw" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Gospel Rock Show at Preset SHS"
                             data-date="1767035820"
                             data-index="8"
                             data-video-id="_Nk5sG8g6pQ"
                             data-youtube-link="https://www.youtube.com/watch?v=_Nk5sG8g6pQ"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/_Nk5sG8g6pQ/maxresdefault.jpg" 
                                     alt="Gospel Rock Show at Preset SHS"
                                     onerror="this.src='https://img.youtube.com/vi/_Nk5sG8g6pQ/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Gospel Rock Show at Preset SHS</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: _Nk5sG8g6pQ</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="_Nk5sG8g6pQ"
                                            data-title="Gospel Rock Show at Preset SHS"
                                            data-youtube-link="https://www.youtube.com/watch?v=_Nk5sG8g6pQ"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=_Nk5sG8g6pQ" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Vs. Presec Legon Basketball Match"
                             data-date="1767035785"
                             data-index="9"
                             data-video-id="NMFZ950qydY"
                             data-youtube-link="https://www.youtube.com/watch?v=NMFZ950qydY"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/NMFZ950qydY/maxresdefault.jpg" 
                                     alt="Preset SHS Vs. Presec Legon Basketball Match"
                                     onerror="this.src='https://img.youtube.com/vi/NMFZ950qydY/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Vs. Presec Legon Basketball Match</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: NMFZ950qydY</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="NMFZ950qydY"
                                            data-title="Preset SHS Vs. Presec Legon Basketball Match"
                                            data-youtube-link="https://www.youtube.com/watch?v=NMFZ950qydY"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=NMFZ950qydY" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Home Economics Practicals"
                             data-date="1767035753"
                             data-index="10"
                             data-video-id="6IJ-e4eUgUM"
                             data-youtube-link="https://www.youtube.com/watch?v=6IJ-e4eUgUM"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/6IJ-e4eUgUM/maxresdefault.jpg" 
                                     alt="Preset SHS Home Economics Practicals"
                                     onerror="this.src='https://img.youtube.com/vi/6IJ-e4eUgUM/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Home Economics Practicals</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: 6IJ-e4eUgUM</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="6IJ-e4eUgUM"
                                            data-title="Preset SHS Home Economics Practicals"
                                            data-youtube-link="https://www.youtube.com/watch?v=6IJ-e4eUgUM"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=6IJ-e4eUgUM" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset SHS Vs. Presec Legon Soccer Match"
                             data-date="1767035674"
                             data-index="11"
                             data-video-id="nHY1Sqlahu0"
                             data-youtube-link="https://www.youtube.com/watch?v=nHY1Sqlahu0"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/nHY1Sqlahu0/maxresdefault.jpg" 
                                     alt="Preset SHS Vs. Presec Legon Soccer Match"
                                     onerror="this.src='https://img.youtube.com/vi/nHY1Sqlahu0/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset SHS Vs. Presec Legon Soccer Match</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: nHY1Sqlahu0</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="nHY1Sqlahu0"
                                            data-title="Preset SHS Vs. Presec Legon Soccer Match"
                                            data-youtube-link="https://www.youtube.com/watch?v=nHY1Sqlahu0"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=nHY1Sqlahu0" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Simple Redox Titration"
                             data-date="1767035618"
                             data-index="12"
                             data-video-id="XCpzvR_pLec"
                             data-youtube-link="https://youtu.be/XCpzvR_pLec?si=ilbW8u2rO761OU4o"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/XCpzvR_pLec/maxresdefault.jpg" 
                                     alt="Simple Redox Titration"
                                     onerror="this.src='https://img.youtube.com/vi/XCpzvR_pLec/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Simple Redox Titration</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: XCpzvR_pLec</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="XCpzvR_pLec"
                                            data-title="Simple Redox Titration"
                                            data-youtube-link="https://youtu.be/XCpzvR_pLec?si=ilbW8u2rO761OU4o"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://youtu.be/XCpzvR_pLec?si=ilbW8u2rO761OU4o" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Rabbit Dissection"
                             data-date="1767035560"
                             data-index="13"
                             data-video-id="x0WzOwfNq8k"
                             data-youtube-link="https://www.youtube.com/watch?v=x0WzOwfNq8k"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/x0WzOwfNq8k/maxresdefault.jpg" 
                                     alt="Rabbit Dissection"
                                     onerror="this.src='https://img.youtube.com/vi/x0WzOwfNq8k/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Rabbit Dissection</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: x0WzOwfNq8k</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="x0WzOwfNq8k"
                                            data-title="Rabbit Dissection"
                                            data-youtube-link="https://www.youtube.com/watch?v=x0WzOwfNq8k"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=x0WzOwfNq8k" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset Pacesetters Robotics Club"
                             data-date="1767035426"
                             data-index="14"
                             data-video-id="OqIx20v1cuA"
                             data-youtube-link="https://youtu.be/OqIx20v1cuA?si=YQ9PsNntzn9_MBFB"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/OqIx20v1cuA/maxresdefault.jpg" 
                                     alt="Preset Pacesetters Robotics Club"
                                     onerror="this.src='https://img.youtube.com/vi/OqIx20v1cuA/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset Pacesetters Robotics Club</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: OqIx20v1cuA</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="OqIx20v1cuA"
                                            data-title="Preset Pacesetters Robotics Club"
                                            data-youtube-link="https://youtu.be/OqIx20v1cuA?si=YQ9PsNntzn9_MBFB"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://youtu.be/OqIx20v1cuA?si=YQ9PsNntzn9_MBFB" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="Preset Pacesetters Medical Club"
                             data-date="1767035332"
                             data-index="15"
                             data-video-id="6_4G4r1TpTk"
                             data-youtube-link="https://www.youtube.com/watch?v=6_4G4r1TpTk"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/6_4G4r1TpTk/maxresdefault.jpg" 
                                     alt="Preset Pacesetters Medical Club"
                                     onerror="this.src='https://img.youtube.com/vi/6_4G4r1TpTk/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">Preset Pacesetters Medical Club</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: 6_4G4r1TpTk</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="6_4G4r1TpTk"
                                            data-title="Preset Pacesetters Medical Club"
                                            data-youtube-link="https://www.youtube.com/watch?v=6_4G4r1TpTk"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=6_4G4r1TpTk" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="PRESET PACESETTERS SHS CANTEEN"
                             data-date="1767035294"
                             data-index="16"
                             data-video-id="mqFL7MyT4XQ"
                             data-youtube-link="https://www.youtube.com/watch?v=mqFL7MyT4XQ"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/mqFL7MyT4XQ/maxresdefault.jpg" 
                                     alt="PRESET PACESETTERS SHS CANTEEN"
                                     onerror="this.src='https://img.youtube.com/vi/mqFL7MyT4XQ/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">PRESET PACESETTERS SHS CANTEEN</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: mqFL7MyT4XQ</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="mqFL7MyT4XQ"
                                            data-title="PRESET PACESETTERS SHS CANTEEN"
                                            data-youtube-link="https://www.youtube.com/watch?v=mqFL7MyT4XQ"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=mqFL7MyT4XQ" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                            <div class="video-card" 
                             data-title="PRESET PACESETTERS PRE SHS CLASSES"
                             data-date="1767035245"
                             data-index="17"
                             data-video-id="0P96dI8J7xI"
                             data-youtube-link="https://www.youtube.com/watch?v=0P96dI8J7xI"
                             data-date-formatted="Dec 29, 2025">
                            
                            <div class="video-thumbnail">
                                <img src="https://img.youtube.com/vi/0P96dI8J7xI/maxresdefault.jpg" 
                                     alt="PRESET PACESETTERS PRE SHS CLASSES"
                                     onerror="this.src='https://img.youtube.com/vi/0P96dI8J7xI/hqdefault.jpg'">
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            
                            <div class="video-content">
                                <h3 class="video-title">PRESET PACESETTERS PRE SHS CLASSES</h3>
                                
                                <div class="video-meta">
                                    <div class="video-date">
                                        <i class="far fa-calendar"></i>
                                        Dec 29, 2025                                    </div>
                                    <span class="video-id">ID: 0P96dI8J7xI</span>
                                </div>
                                
                                <div class="video-description">
                                    Click to watch this video directly on our website.
                                </div>
                                
                                <div class="video-actions">
                                    <button class="action-btn watch-btn watch-video-btn"
                                            data-video-id="0P96dI8J7xI"
                                            data-title="PRESET PACESETTERS PRE SHS CLASSES"
                                            data-youtube-link="https://www.youtube.com/watch?v=0P96dI8J7xI"
                                            data-date="Dec 29, 2025">
                                        <i class="fas fa-play"></i> Play Video
                                    </button>
                                    <a href="https://www.youtube.com/watch?v=0P96dI8J7xI" 
                                       target="_blank" 
                                       class="action-btn share-btn">
                                        <i class="fab fa-youtube"></i> YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                                    </div>
            
            <!-- Loading Indicator -->
            <div class="loader" id="loader">
                <div class="spinner"></div>
                <p>Loading more videos...</p>
            </div>
        </div>
    </main>

    <script>
        // Video Modal Functionality
        const videoModal = document.getElementById('videoModal');
        const closeModalBtn = document.getElementById('closeModal');
        const modalVideoPlayer = document.getElementById('modalVideoPlayer');
        const modalVideoTitle = document.getElementById('modalVideoTitle');
        const modalFullTitle = document.getElementById('modalFullTitle');
        const modalVideoDate = document.getElementById('modalVideoDate');
        const modalVideoId = document.getElementById('modalVideoId');
        const modalYouTubeLink = document.getElementById('modalYouTubeLink');
        const modalCopyLinkBtn = document.getElementById('modalCopyLink');
        
        // Function to open video modal
        function openVideoModal(videoId, title, youtubeLink, date) {
            // Set modal content
            modalVideoTitle.textContent = title;
            modalFullTitle.textContent = title;
            modalVideoDate.textContent = date;
            modalVideoId.textContent = videoId;
            modalYouTubeLink.href = youtubeLink;
            
            // Set video player source
            modalVideoPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`;
            
            // Show modal
            videoModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        // Function to close video modal
        function closeVideoModal() {
            videoModal.classList.remove('active');
            document.body.style.overflow = 'auto';
            
            // Stop video when modal is closed
            modalVideoPlayer.src = '';
        }
        
        // Event listeners for video cards
        document.querySelectorAll('.watch-video-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const videoId = this.getAttribute('data-video-id');
                const title = this.getAttribute('data-title');
                const youtubeLink = this.getAttribute('data-youtube-link');
                const date = this.getAttribute('data-date');
                
                openVideoModal(videoId, title, youtubeLink, date);
            });
        });
        
        // Also allow clicking on play button to open modal
        document.querySelectorAll('.play-button').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.video-card');
                const videoId = card.getAttribute('data-video-id');
                const title = card.getAttribute('data-title');
                const youtubeLink = card.getAttribute('data-youtube-link');
                const date = card.getAttribute('data-date-formatted');
                
                openVideoModal(videoId, title, youtubeLink, date);
            });
        });
        
        // Allow clicking on video card (excluding action buttons) to open modal
        document.querySelectorAll('.video-card').forEach(card => {
            card.addEventListener('click', function(e) {
                // Don't trigger if clicking on action buttons
                if (!e.target.closest('.action-btn') && !e.target.closest('.play-button')) {
                    const videoId = this.getAttribute('data-video-id');
                    const title = this.getAttribute('data-title');
                    const youtubeLink = this.getAttribute('data-youtube-link');
                    const date = this.getAttribute('data-date-formatted');
                    
                    openVideoModal(videoId, title, youtubeLink, date);
                }
            });
        });
        
        // Close modal events
        closeModalBtn.addEventListener('click', closeVideoModal);
        
        // Close modal when clicking outside
        videoModal.addEventListener('click', function(e) {
            if (e.target === videoModal) {
                closeVideoModal();
            }
        });
        
        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && videoModal.classList.contains('active')) {
                closeVideoModal();
            }
        });
        
        // Copy link functionality
        modalCopyLinkBtn.addEventListener('click', function() {
            const link = modalYouTubeLink.href;
            
            navigator.clipboard.writeText(link).then(() => {
                // Show success message
                const originalHTML = this.innerHTML;
                this.innerHTML = '<i class="fas fa-check"></i> Copied!';
                this.style.background = '#28a745';
                
                setTimeout(() => {
                    this.innerHTML = originalHTML;
                    this.style.background = '';
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy link: ', err);
                alert('Failed to copy link. Please try again.');
            });
        });

        // Scroll to Top
        const scrollTopBtn = document.getElementById('scrollTop');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 500) {
                scrollTopBtn.classList.add('visible');
            } else {
                scrollTopBtn.classList.remove('visible');
            }
        });

        scrollTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Sort Videos
        const sortSelect = document.getElementById('sortSelect');
        
        sortSelect.addEventListener('change', function() {
            const cards = Array.from(document.querySelectorAll('.video-card'));
            const container = document.getElementById('videosGrid');
            
            cards.sort((a, b) => {
                const aTitle = a.getAttribute('data-title').toLowerCase();
                const bTitle = b.getAttribute('data-title').toLowerCase();
                const aDate = parseInt(a.getAttribute('data-date'));
                const bDate = parseInt(b.getAttribute('data-date'));
                
                switch(this.value) {
                    case 'newest':
                        return bDate - aDate;
                    case 'oldest':
                        return aDate - bDate;
                    case 'title':
                        return aTitle.localeCompare(bTitle);
                    case 'title-desc':
                        return bTitle.localeCompare(aTitle);
                    default:
                        return 0;
                }
            });
            
            // Animate sorting
            cards.forEach((card, index) => {
                card.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
                card.style.transitionDelay = (index * 0.05) + 's';
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    container.appendChild(card);
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 50);
            });
        });

        // Infinite Scroll Simulation
        let isLoading = false;
        
        window.addEventListener('scroll', function() {
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && !isLoading) {
                loadMoreVideos();
            }
        });

        function loadMoreVideos() {
            const loader = document.getElementById('loader');
            loader.classList.add('active');
            isLoading = true;
            
            // In a real implementation, this would make an AJAX call to load more videos
            setTimeout(() => {
                loader.classList.remove('active');
                isLoading = false;
                
                // For demo purposes, show a message
                if (Math.random() > 0.7) {
                    alert('No more videos to load. Check back later for new content!');
                }
            }, 1500);
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Animate cards sequentially
            setTimeout(() => {
                document.querySelectorAll('.video-card').forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animationDelay = (index * 0.1) + 's';
                    }, 50);
                });
            }, 300);
            
            // Add hover effect
            document.querySelectorAll('.video-card').forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.zIndex = '10';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.zIndex = '';
                });
            });
        });

        // Update video thumbnail quality based on screen size
        function updateThumbnailQuality() {
            const thumbnails = document.querySelectorAll('.video-thumbnail img');
            const quality = window.innerWidth > 768 ? 'maxresdefault' : 'hqdefault';
            
            thumbnails.forEach(img => {
                const currentSrc = img.src;
                if (currentSrc.includes('youtube.com')) {
                    const videoIdMatch = currentSrc.match(/vi\/([^\/]+)\//);
                    if (videoIdMatch) {
                        const videoId = videoIdMatch[1];
                        img.src = `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
                    }
                }
            });
        }

        // Update on resize
        window.addEventListener('resize', updateThumbnailQuality);
        
        // Initialize
        updateThumbnailQuality();
    </script>
<!-- Footer for Preset Pacesetters SHS -->
<footer class="footer-section">
    <div class="footer-container">
        <div class="footer-grid">
            <!-- School Info & Contact -->
            <div class="footer-col footer-school-info">
                <div class="footer-logo">
                    <!-- Logo from assets folder -->
                    <img src="assets/images/logo.png" alt="Preset Pacesetters SHS Logo" class="footer-logo-img" 
                         onerror="this.src='https://via.placeholder.com/180x70/1a365d/ffffff?text=PP+SHS'; this.alt='Logo Placeholder'">
                </div>
                
                <p class="footer-description">
                    Preset Pacesetters SHS is a private GES accredited Senior High School offering 
                    General Science, General Arts, Business, Home Economics and Visual Arts.
                </p>
                
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="contact-text">
                            P.O. Box LG 621
                            Accra, Ghana.<br>
                            Near Firestone-Madina, Accra
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div class="contact-text contact-text-large">
                            <a href="mailto:admin@presetshs.com">admin@presetshs.com</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div class="contact-text contact-text-large contact-phones">
                            <a href="tel:+233246467089">+233 24 646 7089</a>
                            <span class="phone-sep">/</span>
                            <a href="tel:+233548180857">+233 54 818 0857</a>
                        </div>
                    </div>

                    <div class="contact-item">
                        <i class="fab fa-whatsapp"></i>
                        <div class="contact-text contact-text-large contact-phones">
                            <a href="https://wa.me/233246467089" class="whatsapp-link" target="_blank" rel="noopener noreferrer">+233 24 646 7089</a>
                            <span class="phone-sep">/</span>
                            <a href="https://wa.me/233548180857" class="whatsapp-link" target="_blank" rel="noopener noreferrer">+233 54 818 0857</a>
                        </div>
                    </div>
                </div>

                <!-- Social Media Icons - Better aligned -->
                <div class="social-links-footer">
                    <h4 class="social-heading">Follow Us</h4>
                    <div class="social-icons-container">
                        <a href="https://facebook.com/ppacesetters" class="social-icon-link" target="_blank" rel="noopener noreferrer" title="Facebook">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://x.com/PresetSHS" class="social-icon-link" target="_blank" rel="noopener noreferrer" title="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.instagram.com/preset_shs/" class="social-icon-link" target="_blank" rel="noopener noreferrer" title="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://youtube.com/@presetshs1897" class="social-icon-link" target="_blank" rel="noopener noreferrer" title="YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://www.tiktok.com/@preset_shs" class="social-icon-link" target="_blank" rel="noopener noreferrer" title="TikTok">
                            <i class="fab fa-tiktok"></i>
                        </a>
                        <a href="https://wa.me/233246467089" class="social-icon-link social-whatsapp" target="_blank" rel="noopener noreferrer" title="WhatsApp">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Admissions -->
            <div class="footer-col">
                <h3 class="footer-heading">Admissions</h3>
                <ul class="footer-links">
                    <li><a href="apply">Apply Now</a></li>
                    <li><a href="prospectivestudents">Prospective Students</a></li>
                    <li><a href="schoolprospectus">School Prospectus</a></li>
                    <li><a href="contact">Contact Us</a></li>
                    <li><a href="international-students">International Students</a></li>
                </ul>
            </div>
            
            <!-- Departments -->
            <div class="footer-col">
                <h3 class="footer-heading">Departments</h3>
                <ul class="footer-links">
                    <li><a href="general-science">General Science</a></li>
                    <li><a href="general-arts">General Arts</a></li>
                    <li><a href="businessd">Business</a></li>
                    <li><a href="home-economics">Home Economics</a></li>
                    <li><a href="visual-arts">Visual Arts</a></li>
                </ul>
            </div>
            
            <!-- Clubs & Jobs -->
            <div class="footer-col">
                <div class="footer-group">
                    <h3 class="footer-heading">Clubs</h3>
                    <ul class="footer-links">
                        <li><a href="robotics-club">Robotics and Innovation Club</a></li>
                        <li><a href="programming">Programming and Networking Club</a></li>
                        <li><a href="medical-club">Medical Club</a></li>
                        <li><a href="chess-club">Chess Club</a></li>
                        <li><a href="swimming-club">Swimming Club</a></li>
                    </ul>
                </div>
                
                <div class="footer-group">
                    <h3 class="footer-heading">Jobs</h3>
                    <ul class="footer-links">
                        <li><a href="jobs?type=job">Apply Now</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer Bottom -->
    <div class="footer-bottom">
        <div class="footer-bottom-content">
            <div class="copyright">
                &copy; <span id="current-year">2026</span> Preset Pacesetters Senior High School. All rights reserved.
            </div>
            
            <div class="footer-bottom-links">
                <a href="privacy-policy">Privacy Policy</a>
            </div>
        </div>
    </div>
</footer>

<!-- Floating Call & Apply button -->
<div class="floating-contact-button">
    <div class="floating-button-content">
        <a href="tel:+233246467089" class="float-call-btn" aria-label="Call +233 24 646 7089">
            <i class="fas fa-phone float-call-icon"></i>
            <span class="float-call-number">+233 24 646 7089</span>
        </a>
        <a href="apply.php" class="float-apply-btn">
            APPLY NOW
        </a>
    </div>
</div>

<style>
    /* ===== FOOTER STYLES ===== */
    .footer-section {
        background: #1a365d;
        color: #fff;
        padding: clamp(30px, 5vw, 60px) 0 0;
        margin-top: clamp(40px, 5vw, 80px);
        position: relative;
    }

    .footer-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 clamp(15px, 3vw, 20px);
    }

    /* Logo Styles */
    .footer-logo {
        display: flex;
        justify-content: center;
        margin-bottom: clamp(15px, 3vw, 25px);
    }

    .footer-logo-img {
        max-width: 200px;
        height: auto;
        object-fit: contain;
    }

    /* Grid Layout */
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: clamp(20px, 4vw, 40px);
        margin-bottom: clamp(30px, 4vw, 50px);
    }

    /* Responsive Typography */
    .footer-description {
        font-size: clamp(0.85rem, 2vw, 0.95rem);
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: clamp(15px, 3vw, 25px);
        text-align: center;
    }

    .contact-info {
        margin-top: clamp(15px, 3vw, 20px);
    }

    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: clamp(8px, 2vw, 12px);
        margin-bottom: clamp(10px, 2vw, 15px);
    }

    .contact-item i {
        color: #d6e64c;
        font-size: clamp(0.9rem, 2vw, 1rem);
        margin-top: 3px;
        min-width: 20px;
    }

    .contact-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: clamp(0.85rem, 2vw, 0.95rem);
        line-height: 1.5;
    }

    /* Email & phone: +3pt (~0.25rem) larger for easier tapping */
    .contact-text-large,
    .contact-text-large a {
        font-size: clamp(1.05rem, 2.2vw, 1.15rem);
    }

    .contact-phones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .phone-sep {
        color: rgba(255, 255, 255, 0.6);
    }

    .contact-text a {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        transition: color 0.3s ease;
        font-size: clamp(0.85rem, 2vw, 0.95rem);
    }

    .contact-text a:hover {
        color: #d6e64c;
    }

    .social-whatsapp:hover {
        background: #d6e64c;
        border-color: #d6e64c;
        color: #1a365d;
    }

    /* Social Media Styles - Better aligned */
    .social-links-footer {
        margin-top: 25px;
        text-align: center;
    }

    .social-heading {
        font-size: clamp(0.9rem, 2vw, 1rem);
        color: #fff;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .social-icons-container {
        display: flex;
        justify-content: center;
        gap: clamp(8px, 2vw, 15px);
        flex-wrap: wrap;
    }

    .social-icon-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(36px, 4vw, 42px);
        height: clamp(36px, 4vw, 42px);
        background: #2c5282;
        border-radius: 50%;
        color: #fff;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
        transition: all 0.3s ease;
        text-decoration: none;
        border: 2px solid transparent;
    }

    .social-icon-link:hover {
        background: #d6e64c;
        color: #1a365d;
        transform: translateY(-3px);
        border-color: #d6e64c;
    }

    .footer-heading {
        font-size: clamp(1rem, 3vw, 1.2rem);
        font-weight: 600;
        color: #fff;
        margin-bottom: clamp(15px, 3vw, 20px);
        padding-bottom: clamp(8px, 2vw, 10px);
        border-bottom: 2px solid #2c5aa0;
        text-align: center;
    }

    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        margin-bottom: clamp(8px, 2vw, 10px);
    }

    .footer-links a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: clamp(0.8rem, 2vw, 0.95rem);
        transition: all 0.3s ease;
        display: inline-block;
        line-height: 1.4;
        word-break: break-word;
        text-align: center;
        width: 100%;
    }

    .footer-links a:hover {
        color: #d6e64c;
        transform: translateX(5px);
    }

    .footer-group {
        margin-bottom: clamp(20px, 4vw, 30px);
    }

    /* Footer Bottom */
    .footer-bottom {
        background: rgba(0, 0, 0, 0.2);
        padding: clamp(15px, 3vw, 25px) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(15px, 3vw, 20px);
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 clamp(15px, 3vw, 20px);
        text-align: center;
    }

    .copyright {
        color: rgba(255, 255, 255, 0.7);
        font-size: clamp(0.8rem, 2vw, 0.9rem);
    }

    .footer-bottom-links {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-bottom-links a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: clamp(0.8rem, 2vw, 0.85rem);
        transition: color 0.3s ease;
    }

    .footer-bottom-links a:hover {
        color: #d6e64c;
    }

    .separator {
        color: rgba(255, 255, 255, 0.5);
    }

    /* ===== FLOATING CALL / APPLY BUTTON ===== */
    .floating-contact-button {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
        width: min(280px, calc(100vw - 32px));
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 2px solid #d6e64c;
        background: #1a365d;
        animation: floatButton 6s ease-in-out infinite;
    }

    .floating-contact-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    .floating-button-content {
        display: flex;
        flex-direction: column;
    }

    .float-call-btn,
    .float-apply-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 16px 18px;
        transition: background 0.25s ease;
        background: #1a365d;
    }

    .float-call-btn {
        gap: 12px;
        border-bottom: 1px solid rgba(214, 230, 76, 0.55);
    }

    .float-call-btn:hover,
    .float-apply-btn:hover {
        background: #2c5282;
    }

    .float-call-icon {
        color: #fff;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .float-call-number {
        color: #d6e64c;
        font-size: clamp(1.05rem, 3.8vw, 1.35rem);
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
        white-space: nowrap;
    }

    .float-apply-btn {
        color: #d6e64c;
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

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

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    
    /* Tablet and Small Desktop (768px - 1023px) */
    @media (min-width: 768px) {
        .footer-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .footer-school-info {
            grid-column: span 2;
        }
        
        .footer-bottom-content {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
        
        .footer-description,
        .contact-item,
        .footer-heading,
        .footer-links,
        .footer-links a {
            text-align: left;
        }
        
        .footer-logo {
            justify-content: flex-start;
        }
        
        .social-links-footer {
            text-align: left;
        }
        
        .social-icons-container {
            justify-content: flex-start;
        }
    }

    /* Medium Desktop (1024px - 1279px) */
    @media (min-width: 1024px) {
        .footer-grid {
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 30px;
        }
        
        .footer-school-info {
            grid-column: span 1;
        }
    }

    /* Large Desktop (1280px and above) */
    @media (min-width: 1280px) {
        .footer-grid {
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
        }
    }

    /* ===== MOBILE-SPECIFIC ADJUSTMENTS ===== */
    
    /* Mobile-specific adjustments (Tablets and smaller) */
    @media (max-width: 767px) {
        .floating-contact-button {
            width: min(240px, calc(100vw - 28px));
            bottom: 14px;
            right: 14px;
        }

        .float-call-btn,
        .float-apply-btn {
            padding: 14px 14px;
        }

        .float-call-icon {
            font-size: 1rem;
        }
        
        .footer-logo-img {
            max-width: 160px;
        }
    }

    /* Small mobile devices (Phones) */
    @media (max-width: 480px) {
        .floating-contact-button {
            width: min(220px, calc(100vw - 24px));
            right: 10px;
            bottom: 10px;
            border-width: 1.5px;
            border-radius: 12px;
        }

        .float-call-btn,
        .float-apply-btn {
            padding: 12px 12px;
        }

        .float-call-btn {
            gap: 8px;
        }
        
        .footer-bottom-links {
            flex-direction: column;
            gap: 5px;
        }
        
        .separator {
            display: none;
        }
    }

    /* Very small screens (Small phones) */
    @media (max-width: 360px) {
        .floating-contact-button {
            width: min(200px, calc(100vw - 16px));
            right: 8px;
            bottom: 8px;
        }

        .float-call-btn,
        .float-apply-btn {
            padding: 10px 10px;
        }

        .float-call-number {
            font-size: 0.95rem;
        }

        .float-apply-btn {
            font-size: 1rem;
        }
        
        .footer-logo-img {
            max-width: 140px;
        }
    }
    
    /* Extra small screens (iPhone SE, Galaxy Fold) */
    @media (max-width: 320px) {
        .floating-contact-button {
            width: min(180px, calc(100vw - 12px));
            right: 5px;
            bottom: 5px;
        }

        .float-call-number {
            font-size: 0.85rem;
        }

        .float-apply-btn {
            font-size: 0.9rem;
        }
    }

    /* ===== LANDSCAPE ORIENTATION OPTIMIZATIONS ===== */
    @media (max-height: 500px) and (orientation: landscape) {
        .floating-contact-button {
            width: min(210px, calc(100vw - 24px));
            bottom: 10px;
            right: 10px;
        }

        .float-call-btn,
        .float-apply-btn {
            padding: 8px 12px;
        }

        .float-call-number,
        .float-apply-btn {
            font-size: 0.95rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set current year
        const yearSpan = document.getElementById('current-year');
        if (yearSpan && !yearSpan.textContent.trim()) {
            yearSpan.textContent = new Date().getFullYear();
        }
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('.footer-links a').forEach(link => {
            link.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                if (href && href.startsWith('#')) {
                    e.preventDefault();
                    const target = document.querySelector(href);
                    if (target) {
                        const headerHeight = document.querySelector('header')?.offsetHeight || 80;
                        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
                        window.scrollTo({
                            top: targetPosition - headerHeight,
                            behavior: 'smooth'
                        });
                    }
                }
            });
        });
        
        // Floating apply click (optional analytics hook)
        const applyBtn = document.querySelector('.float-apply-btn');
        if (applyBtn) {
            applyBtn.addEventListener('click', function() {
                console.log('Apply Now button clicked from floating widget');
            });
        }
    });
</script>

<!-- Font Awesome for icons <script src="//code.tidio.co/h55agxeo692zcksz07iztcqwys0dura6.js" async></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="assets/css/hero-overlays.css">

<script src="assets/script/home-script.js"></script>