<?php
/**
 * IBVTE Portal - Homepage
 * Dynamic Marquee & Notifications included
 */
require_once __DIR__ . '/includes/db_config.php';
include 'includes/header.php';
?>

        <!-- Hero Section -->
        <section class="hero-section">
            <?php
            $sliders = [];
            try {
                $stmt = $pdo->query("SELECT * FROM sliders WHERE status = 'active' ORDER BY display_order ASC, created_at DESC");
                $sliders = $stmt->fetchAll();
            } catch(Exception $e) {}
            $slideCount = empty($sliders) ? 2 : count($sliders);
            ?>
            <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
                <div class="carousel-indicators">
                    <?php for ($i = 0; $i < $slideCount; $i++): ?>
                        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?= $i ?>" class="<?= $i === 0 ? 'active' : '' ?>"></button>
                    <?php endfor; ?>
                </div>
                <div class="carousel-inner">
                    <?php if (empty($sliders)): ?>
                        <!-- Fallback Slide 1 -->
                        <div class="carousel-item active" data-bs-interval="3000">
                            <img src="<?= $base ?>assets/images/slide1.webp" class="d-block w-100 hero-img" alt="Technical Education" style="object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block animated fadeInDown">
                                <h2 class="display-4 fw-bold">Empowering India Through Technical Education</h2>
                                <p class="lead">IBVTE provides national-level vocational, technical, and skill development programs to build a career-ready generation.</p>
                                <a href="affiliation/apply.php" class="btn btn-warning btn-lg rounded-pill fw-bold px-5 py-3 shadow-lg">Apply for Affiliation</a>
                            </div>
                        </div>
                        <!-- Fallback Slide 2 -->
                        <div class="carousel-item" data-bs-interval="3000">
                            <img src="<?= $base ?>assets/images/slide2.webp" class="d-block w-100 hero-img" alt="Skill Development" style="object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block animated fadeInDown">
                                <h2 class="display-4 fw-bold">National Skill Development Initiatives</h2>
                                <p class="lead">Partnering with colleges and centers across the country to deliver standard, high-quality, practical vocational curricula.</p>
                                <a href="all-courses.php" class="btn btn-warning btn-lg rounded-pill fw-bold px-5 py-3 shadow-lg">Explore Departments</a>
                            </div>
                        </div>
                    <?php else: ?>
                        <?php foreach($sliders as $index => $slider): ?>
                            <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-bs-interval="3000">
                                <img src="<?= htmlspecialchars($slider['image_path']) ?>" class="d-block w-100 hero-img" alt="<?= htmlspecialchars($slider['title']) ?>" style="object-fit: cover;">
                                <div class="carousel-caption d-none d-md-block animated fadeInDown">
                                    <h2 class="display-4 fw-bold"><?= htmlspecialchars($slider['title']) ?></h2>
                                    <?php if($slider['description']): ?>
                                        <p class="lead"><?= htmlspecialchars($slider['description']) ?></p>
                                    <?php endif; ?>
                                    <?php if($slider['button_text']): ?>
                                        <a href="<?= htmlspecialchars($slider['button_link']) ?>" class="btn btn-warning btn-lg rounded-pill fw-bold px-5 py-3 shadow-lg"><?= htmlspecialchars($slider['button_text']) ?></a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </section>

        <!-- Ticker Bar -->
        <section class="ticker-bar bg-primary text-white py-2 overflow-hidden border-bottom border-warning border-3">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <div class="bg-warning text-dark px-3 fw-bold small me-3 py-1 rounded">UPDATES</div>
                    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" class="flex-grow-1 pt-1">
                        <?php
                        try {
                            $stmt = $pdo->query("SELECT id, title FROM notifications WHERE is_marquee = 1 AND status = 'active' ORDER BY created_at DESC LIMIT 8");
                            $marqueeItems = $stmt->fetchAll();
                            if (empty($marqueeItems)) {
                                echo '<span class="mx-4 small fw-bold">WELCOME TO IBVTE</span>';
                            } else {
                                foreach ($marqueeItems as $item) {
                                    echo '<a href="notification-detail.php?id=' . $item['id'] . '" class="text-white text-decoration-none mx-4 small fw-bold"><i class="fas fa-bullhorn me-2 text-warning"></i>' . htmlspecialchars($item['title']) . '</a>';
                                }
                            }
                        } catch (Exception $e) {
                            echo '<span class="mx-4 small fw-bold">WELCOME TO IBVTE</span>';
                        }
                        ?>
                    </marquee>
                </div>
            </div>
        </section>

        <!-- Leadership & Director Desk Section -->
        <section class="leadership-showcase py-5 bg-light">
            <div class="container">
                <div class="row g-4 align-items-stretch">

                    <!-- BOX 1: Hon'ble Commission -->
                    <div class="col-lg-3">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3 text-center">
                                <span class="badge bg-warning text-dark mb-2">HON'BLE BOARD MEMBERS</span>
                                <h4 class="fw-bold mb-1">Board Leadership</h4>
                                <p class="small text-muted">Core leadership directing the vision of IBVTE.</p>
                            </div>
                            <!-- ECI Style Vertical Scrolling Marquee of 3 leaders -->
                            <div class="commission-marquee-wrap flex-grow-1" style="height: 330px; overflow: hidden; position: relative;">
                                <div class="commission-marquee-inner d-flex flex-column" style="gap: 15px;">
                                    <!-- Member 1: Dr. Furkan Saifi -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/secretary_furkan.webp" alt="Dr. Furkan Saifi">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Dr. Furkan Saifi</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Secretary</span>
                                    </div>
                                    <!-- Member 2: Smt. Sashi Sagar -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/president_sashi.webp" alt="Smt. Sashi Sagar">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Smt. Sashi Sagar</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Registrar</span>
                                    </div>
                                    <!-- Member 3: Dr. Vinod Kothari -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/exam_controller_vinod.webp" alt="Dr. Vinod Kothari">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Dr. Vinod Kothari</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Exam Controller</span>
                                    </div>
                                    <!-- Member 4: Charan Singh -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/president_charan.webp" alt="Charan Singh">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Charan Singh</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">President</span>
                                    </div>
                                    <!-- Member 5: Sanjay Kumar Verma -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/joint_secretary_sanjay.webp" alt="Sanjay Kumar Verma">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Sanjay Kumar Verma</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Joint Secretary</span>
                                    </div>
                                    <!-- Member 6: Arshi Saifi -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/board_member_arshi.webp" alt="Arshi Saifi">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Arshi Saifi</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Board Member</span>
                                    </div>
                                    <!-- Member 7: Adv. Abhishek Giri -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?php echo $base; ?>assets/images/abhishek_giri.jpeg" alt="Adv. Abhishek Giri" style="object-fit: contain; background: #fff;">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Adv. Abhishek Giri</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Legal Advisor</span>
                                    </div>

                                    <!-- DUPLICATES FOR SEAMLESS LOOPING -->
                                    <!-- Member 1 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/secretary_furkan.webp" alt="Dr. Furkan Saifi">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Dr. Furkan Saifi</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Secretary</span>
                                    </div>
                                    <!-- Member 2 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/president_sashi.webp" alt="Smt. Sashi Sagar">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Smt. Sashi Sagar</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Registrar</span>
                                    </div>
                                    <!-- Member 3 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/exam_controller_vinod.webp" alt="Dr. Vinod Kothari">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Dr. Vinod Kothari</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Exam Controller</span>
                                    </div>
                                    <!-- Member 4 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/president_charan.webp" alt="Charan Singh">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Charan Singh</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">President</span>
                                    </div>
                                    <!-- Member 5 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/joint_secretary_sanjay.webp" alt="Sanjay Kumar Verma">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Sanjay Kumar Verma</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Joint Secretary</span>
                                    </div>
                                    <!-- Member 6 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?= $base ?>assets/images/board_member_arshi.webp" alt="Arshi Saifi">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Arshi Saifi</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Board Member</span>
                                    </div>
                                    <!-- Member 7 Duplicate -->
                                    <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                        <div class="eci-photo-frame">
                                            <img loading="lazy" src="<?php echo $base; ?>assets/images/abhishek_giri.jpeg" alt="Adv. Abhishek Giri" style="object-fit: contain; background: #fff;">
                                        </div>
                                        <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;">Adv. Abhishek Giri</h5>
                                        <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 600; text-transform: uppercase; color: #d90429 !important;">Legal Advisor</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- BOX 2: Our Events Gallery -->
                    <div class="col-lg-5">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3 text-center">
                                <span class="badge bg-primary text-white mb-2">OUR EVENTS</span>
                                <h4 class="fw-bold mb-1">Our Events Gallery</h4>

                            </div>
                             <!-- Mosaic-Style Gallery of 5 Event/Award images -->
                             <div class="gov-gallery-grid flex-grow-1" style="height: 330px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px;">
                                 <!-- Image 1 (Large / Top Left) -->
                                 <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="grid-column: span 3; grid-row: span 3; cursor: pointer; position: relative;">
                                     <img loading="lazy" src="<?= $base ?>assets/images/gov_gallery_1.webp" class="w-100 h-100 object-fit-fill" alt="IBVTE Event 1">
                                 </div>
                                 <!-- Image 2 (Top Right) -->
                                 <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="grid-column: span 3; grid-row: span 2; cursor: pointer; position: relative;">
                                     <img loading="lazy" src="<?= $base ?>assets/images/gov_gallery_2.webp" class="w-100 h-100 object-fit-fill" alt="IBVTE Event 2">
                                 </div>
                                 <!-- Image 3 (Middle Right) -->
                                 <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="grid-column: span 3; grid-row: span 2; cursor: pointer; position: relative;">
                                     <img loading="lazy" src="<?= $base ?>assets/images/gov_gallery_3.webp" class="w-100 h-100 object-fit-fill" alt="IBVTE Event 3">
                                 </div>
                                 <!-- Image 4 (Bottom Left) -->
                                 <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="grid-column: span 3; grid-row: span 3; cursor: pointer; position: relative;">
                                     <img loading="lazy" src="<?= $base ?>assets/images/gov_gallery_4.webp" class="w-100 h-100 object-fit-fill" alt="IBVTE Event 4">
                                 </div>
                                 <!-- Image 5 (Bottom Right) -->
                                 <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="grid-column: span 3; grid-row: span 2; cursor: pointer; position: relative;">
                                     <img loading="lazy" src="<?= $base ?>assets/images/gov_gallery_5.webp" class="w-100 h-100 object-fit-fill" alt="IBVTE Event 5">
                                 </div>
                             </div>
                        </div>
                    </div>

                    <!-- BOX 3: Director's Desk -->
                    <div class="col-lg-4">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3">
                                <span class="badge bg-danger text-white mb-2">DIRECTOR'S DESK</span>
                                <h4 class="fw-bold mb-2">From Director's Desk</h4>
                                <p class="small text-muted">IBVTE leadership vision and message for the vocational ecosystem.</p>
                            </div>
                             <div class="director-photo-container text-center mb-3">
                                <div class="director-box overflow-hidden rounded-4 mb-2 mx-auto" style="position: relative; max-width: 300px; height: 220px;">
                                    <img loading="lazy" src="<?= $base ?>assets/images/director_improved.webp" class="img-fluid rounded-4 w-100 h-100" style="object-fit: cover; object-position: center top;" alt="Director IBVTE">
                                </div>
                                <div class="mt-2">
                                    <span class="d-block text-muted small fw-semibold">Director</span>
                                    <h6 class="fw-bold text-dark mb-0 fs-5">Dr. Nitin Raj Varma</h6>
                                </div>
                            </div>
                            <div class="flex-grow-1 d-flex flex-column justify-content-between">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="director-quote-container" style="position: relative; min-height: 105px; padding: 0 5px; text-align: justify;">
                                            <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: absolute; top: -5px; left: -2px; opacity: 0.35;">&ldquo;</span>
                                            <span style="font-style: italic; font-weight: 700; color: #0f172a; font-size: 0.88rem; line-height: 1.6; display: inline; padding-left: 14px; font-family: 'Outfit', sans-serif;">
                                                IBVTE is committed to transforming technical education through industry-aligned skills, practical training, and collaborative certification frameworks to build real-world careers and national development.
                                            </span>
                                            <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: relative; bottom: -12px; opacity: 0.35;">&rdquo;</span>
                                        </div>
                                    </div>
                                    <div class="col-5 text-center">
                                        <img loading="lazy" src="https://ibvte.com/assets/images/logo_official.webp" alt="IBVTE Logo" class="img-fluid" style="max-height: 110px; object-fit: contain;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div><!-- /.row -->
            </div><!-- /.container -->
        </section>

        <style>
        /* ECI Style Photo Frame and Marquee */
        @keyframes borderRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .eci-photo-frame {
            position: relative;
            width: 130px;
            height: 140px;
            margin: 15px auto 10px;
            overflow: hidden;
            border-radius: 8px;
            padding: 3px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .eci-photo-frame::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: conic-gradient(
                #0d6efd,
                #d90429,
                #ffc107,
                #0d6efd
            );
            animation: borderRotate 4s linear infinite;
            z-index: -1;
        }
        .eci-photo-frame::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background: #fff;
            z-index: 0;
            border-radius: 5px;
        }
        .eci-photo-frame img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            border-radius: 5px;
            border: none;
            box-shadow: none;
        }
        
        /* Large ECI Style Photo Frame for original image sizes */
        .eci-photo-frame-large {
            position: relative;
        }
        .eci-photo-frame-large::before {
            content: '';
            position: absolute;
            bottom: -8px;
            right: -8px;
            width: 100%;
            height: 100%;
            background-color: #0d2c54; /* Solid navy blue offset */
            z-index: 1;
            border-radius: 6px;
        }
        .eci-photo-frame-large::after {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            width: 100%;
            height: 100%;
            border-top: 3px solid #d90429; /* Red-pink top border */
            border-left: 3px solid #d90429; /* Red-pink left border */
            z-index: 2;
            pointer-events: none;
        }
        
        /* Commission Scrolling Marquee */
        .commission-marquee-wrap {
            position: relative;
            height: 330px;
            overflow: hidden;
        }
        .commission-marquee-inner {
            display: flex;
            flex-direction: column;
            animation: commissionScrollUp 42s linear infinite;
        }
        .commission-marquee-wrap:hover .commission-marquee-inner {
            animation-play-state: paused;
        }
        @keyframes commissionScrollUp {
            0%   { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }

        /* Premium Leadership Square Card Styles */
        .leadership-square-card {
            border: 2px solid rgba(13, 110, 253, 0.12) !important;
            position: relative;
            background: #fff;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .leadership-square-card::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px; right: -2px; bottom: -2px;
            background: linear-gradient(135deg, #ffc107, #0d6efd);
            z-index: -1;
            border-radius: 6px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .leadership-square-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 24px rgba(13, 110, 253, 0.2) !important;
            border-color: transparent !important;
        }
        .leadership-square-card:hover::before {
            opacity: 1;
        }
        .leadership-square-card .transition-img {
            transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .leadership-square-card:hover .transition-img {
            transform: scale(1.08);
        }

        /* ── Vertical scrolling minister marquee ── */
        .minister-marquee-wrap { position: relative; }
        .minister-marquee-inner {
            display: flex;
            flex-direction: column;
            animation: scrollUp 18s linear infinite;
        }
        .minister-marquee-wrap:hover .minister-marquee-inner { animation-play-state: paused; }
        @keyframes scrollUp {
            0%   { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
        .minister-card { background: #fff; transition: background .3s; }
        .minister-card:hover { background: #fffbf0; }
        .extra-small { font-size: 0.72rem; }
        .gallery-card img { transition: transform .4s; }
        .gallery-card:hover img { transform: scale(1.05); }
        @keyframes logoPulse {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-8px) rotate(0.8deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        .logo-3d-glow-container {
            animation: logoPulse 4s ease-in-out infinite;
            display: inline-block;
        }
        .logo-3d-glow-container:hover {
            animation-play-state: paused;
        }
        
        /* Premium Mosaic Gallery Styles */
        .gallery-mosaic-item {
            position: relative;
            padding: 3px;
            background: #fff;
            overflow: hidden;
            border-radius: 12px;
            z-index: 1;
            border: none !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .gallery-mosaic-item::before {
            content: '';
            position: absolute;
            width: 250%;
            height: 250%;
            top: -75%;
            left: -75%;
            background: conic-gradient(
                #0d6efd,
                #d90429,
                #ffc107,
                #0d6efd
            );
            animation: borderRotate 5s linear infinite;
            z-index: -2;
            transition: all 0.4s;
        }
        .gallery-mosaic-item:hover::before {
            animation-duration: 2.5s;
        }
        .gallery-mosaic-item::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background: #fff;
            border-radius: 9px;
            z-index: -1;
        }
        .gallery-mosaic-item img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            background-color: #fff;
            border-radius: 9px;
            z-index: 2;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .gallery-mosaic-item:hover {
            box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
            z-index: 5;
            transform: translateY(-3px);
        }
        .gallery-mosaic-item:hover img {
            transform: scale(1.08);
        }
        </style>

        <script>
        // Duplicate cards so scroll loops seamlessly
        document.addEventListener('DOMContentLoaded', function(){
            // jQuery interactive hover effect for leadership cards
            if (window.jQuery) {
                jQuery('.leadership-square-card').hover(
                    function() {
                        jQuery(this).css('border-color', 'transparent');
                    },
                    function() {
                        jQuery(this).css('border-color', 'rgba(13, 110, 253, 0.12)');
                    }
                );
            }
            var inner = document.querySelector('.minister-marquee-inner');
            if(inner){
                var clone = inner.cloneNode(true);
                inner.parentNode.appendChild(clone);
            }

            // 3D Parallax Tilt Effect for Logo
            const card = document.querySelector('.logo-3d-card');
            const container = document.querySelector('.logo-3d-glow-container');
            if (card && container) {
                container.addEventListener('mousemove', (e) => {
                    const rect = container.getBoundingClientRect();
                    const x = e.clientX - rect.left - rect.width/2;
                    const y = e.clientY - rect.top - rect.height/2;

                    const rotateX = -y / 5;
                    const rotateY = x / 5;

                    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`;
                    card.style.boxShadow = `${-x/3}px ${-y/3}px 40px rgba(13, 110, 253, 0.35), 0 0 25px rgba(255, 193, 7, 0.25)`;
                });

                container.addEventListener('mouseleave', () => {
                    card.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';
                    card.style.boxShadow = '0 10px 30px rgba(13, 110, 253, 0.2)';
                });
            }
        });
        </script>

        <!-- Section 2: Vision & Grid -->
        <section id="about" class="py-4 bg-light">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-7">
                        <div class="board-vision-card bg-white p-4 rounded-4 shadow-sm h-100 position-relative border-0" style="transition: all 0.3s ease;">
                            <!-- Accent top line gradient -->
                            <div style="position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #3b0b7c, #0d6efd); border-top-left-radius: 16px; border-top-right-radius: 16px;"></div>
                            
                            <div class="row align-items-center h-100 g-3">
                                <div class="col-md-5 text-center d-flex flex-column align-items-center justify-content-center py-3 py-md-0 position-relative" style="border-right: 1px solid rgba(0, 0, 0, 0.08);">
                                    <div class="vision-logo-container mb-3" style="width: 135px; height: 135px; border-radius: 50%; padding: 6px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; transition: transform 0.5s ease;">
                                        <img loading="lazy" src="<?= $base ?>assets/images/logo_official.webp" class="img-fluid object-fit-contain" style="max-height: 100%;" alt="IBVTE Logo">
                                    </div>
                                    <div class="vision-brand-block text-center mt-2 w-100 px-2">
                                        <div style="font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 800; color: #0f172a; letter-spacing: 0.2px; line-height: 1.4;">भारतीय व्यावसायिक एवं तकनीकी शिक्षा बोर्ड (नई दिल्ली)</div>
                                        <div style="font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 800; color: #0d6efd; margin-top: 6px; letter-spacing: 0.3px; line-height: 1.4; text-transform: uppercase;">INDIAN BOARD OF VOCATIONAL & TECHNICAL EDUCATION (NEW DELHI)</div>
                                    </div>
                                </div>
                                <div class="col-md-7 ps-md-4 py-2 py-md-0">
                                    <div class="d-inline-block text-primary small fw-bold text-uppercase mb-2" style="letter-spacing: 1.5px; font-size: 0.68rem; background: rgba(13, 110, 253, 0.08); padding: 4px 12px; border-radius: 30px;">Our Vision</div>
                                    <h3 class="fw-bold mb-3" style="color: #0f172a; font-family: 'Outfit', sans-serif; font-size: 1.6rem;">Redefining Vocational Education</h3>
                                    <p class="text-muted mb-3" style="font-size: 0.8rem; line-height: 1.7; text-align: justify; font-family: 'Outfit', sans-serif; margin-bottom: 1.5rem;">
                                        The Indian Board of Vocational and Technical Education (IBVTE) aims to redefine technical education and vocational training across India. We focus on hands-on practical knowledge, industry-aligned skill-based curriculum, and recognized national level certifications that provide students a distinct competitive edge in the modern global market.
                                    </p>
                                    <a href="about.php" class="vision-more-btn d-inline-flex align-items-center text-decoration-none fw-bold" style="color: #0d6efd; font-size: 0.82rem; transition: color 0.2s ease;">
                                        <span>Know More About Board</span>
                                        <i class="fas fa-arrow-right ms-2" style="font-size: 0.78rem; transition: transform 0.2s ease;"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="row g-2">
                            <div class="col-4"><a href="page.php?slug=general" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-orange hover-up shadow-sm small-grid"><i class="fas fa-home"></i><span class="extra-small fw-bold text-center">General</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=main-exam" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-cyan hover-up shadow-sm small-grid"><i class="fas fa-user-graduate"></i><span class="extra-small fw-bold text-center">Main Exam</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=affiliation" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-secondary hover-up shadow-sm small-grid"><i class="fas fa-search"></i><span class="extra-small fw-bold text-center">Affiliation</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=prastav" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-purple hover-up shadow-sm small-grid"><i class="fas fa-file-alt"></i><span class="extra-small fw-bold text-center">Prastav</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=check-result" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-success hover-up shadow-sm small-grid"><i class="fas fa-poll-h"></i><span class="extra-small fw-bold text-center">Check Result</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=registration" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-primary hover-up shadow-sm small-grid"><i class="fas fa-user"></i><span class="extra-small fw-bold text-center">Registration</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=lgs" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-dark hover-up shadow-sm small-grid"><i class="fas fa-list-ul"></i><span class="extra-small fw-bold text-center">LGS</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=verify" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-danger hover-up shadow-sm small-grid"><i class="fas fa-check-circle"></i><span class="extra-small fw-bold text-center">Verify</span></div></a></div>
                            <div class="col-4"><a href="page.php?slug=brochure" class="text-decoration-none text-white d-block"><div class="service-icon-box bg-warning hover-up shadow-sm small-grid"><i class="fas fa-book-open"></i><span class="extra-small fw-bold text-center">Brochure</span></div></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3: Action Cards -->
        <section class="py-4 bg-white">
            <div class="container">
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-info border-5 shadow-sm text-uppercase">
                            <h5 class="fw-bold text-info mb-3">Main School/College</h5>
                            <p class="extra-small text-muted mb-4">For board-affiliated schools/colleges, student registration, and academic procedures.</p>
                            <div class="d-flex gap-2">
                                <a href="college/login.php" class="btn btn-dark rounded-pill fw-bold flex-fill">Login Here</a>
                                <a href="https://ibvte.com/affiliation/apply.php" class="btn btn-warning rounded-pill fw-bold flex-fill">Apply Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-primary border-5 shadow-sm text-uppercase">
                            <h5 class="fw-bold text-primary mb-3">ARC Center Login</h5>
                            <p class="extra-small text-muted mb-4">Authorized Admission Partner Centers can login and register students here.</p>
                            <div class="d-flex gap-2">
                                <a href="college/login.php" class="btn btn-dark rounded-pill fw-bold flex-fill">Login Here</a>
                                <a href="https://ibvte.com/affiliation/apply.php" class="btn btn-warning rounded-pill fw-bold flex-fill">Apply Now</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-danger border-5 shadow-sm text-uppercase">
                            <h5 class="fw-bold text-danger mb-3">Student Login For Final Registration</h5>
                            <p class="extra-small text-muted mb-4">Duly registered students can login to view results, materials, and profiles.</p>
                            <div class="d-flex gap-2">
                                <a href="student/login.php" class="btn btn-dark rounded-pill fw-bold flex-fill">Login Here</a>
                                <a href="https://ibvte.com/page.php?slug=registration" class="btn btn-warning rounded-pill fw-bold flex-fill">Apply Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Our Courses Section -->
        <section class="py-5 bg-light">
            <!-- Swiper CSS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
            
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="fw-bold text-primary mb-2" style="letter-spacing: 1px; font-size: 2.5rem !important;">OUR <span class="text-warning" style="font-size: inherit !important;">COURSES</span></h2>
                    <div class="mx-auto bg-primary" style="height: 4px; width: 80px; border-radius: 2px;"></div>
                </div>
                
                <?php
                try {
                    require_once 'includes/db.php';
                    $db = DB();
                    
                    // Fetch all active categories
                    $isLive = false; try { $db->fetchOne("SELECT category_id FROM courses LIMIT 1"); $isLive = true; } catch(Exception $e) {}
                    if ($isLive) {
                        $allCats = $db->fetchAll("SELECT * FROM course_categories WHERE is_active = 1 AND EXISTS (SELECT 1 FROM courses c WHERE c.category_id = course_categories.id AND c.is_active = 1) ORDER BY display_order, name");
                    } else {
                        $allCats = $db->fetchAll("SELECT * FROM course_categories WHERE is_active = 1 AND EXISTS (SELECT 1 FROM courses c WHERE c.short_name COLLATE utf8mb4_unicode_ci = course_categories.name COLLATE utf8mb4_unicode_ci AND c.is_active = 1) ORDER BY display_order, name");
                    }
                ?>
                
                <div class="swiper courseSwiper px-2 py-3">
                    <div class="swiper-wrapper">
                        <?php foreach ($allCats as $c): ?>
                        <div class="swiper-slide h-auto">
                            <a href="all-courses.php?category=<?= urlencode($c['slug'] ?? $c['name']) ?>" class="text-decoration-none h-100 d-block">
                                <div class="course-box bg-white rounded-4 shadow-sm overflow-hidden border-0 hover-up h-100 shadow-hover d-flex flex-column">
                                    <div class="position-relative">
                                        <div class="ratio ratio-4x3" style="background: #e9ecef;">
                                            <img loading="lazy" src="<?= !empty($c['image']) ? htmlspecialchars($c['image']) : 'https://images.unsplash.com/photo-1513258496099-48168024adb0?w=400' ?>" class="object-fit-cover w-100 h-100 transition-transform" alt="<?= htmlspecialchars($c['name']) ?>">
                                        </div>
                                        <div class="course-overlay">
                                            <span class="btn btn-light btn-sm rounded-pill fw-bold extra-small px-3 text-primary">Explore Programs</span>
                                        </div>
                                    </div>
                                    <div class="p-3 text-center flex-grow-1 d-flex align-items-center justify-content-center">
                                        <h6 class="text-dark mb-0 fw-bold" style="line-height: 1.4; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px;"><?= htmlspecialchars($c['name']) ?></h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <?php endforeach; ?>
                        
                        <?php if(!$allCats): ?>
                        <div class="col-12 text-center py-5">
                            <h5 class="text-muted">Courses will be updated shortly.</h5>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Swiper Navigation -->
                    <?php if($allCats): ?>
                    <div class="swiper-button-next d-none d-md-flex" style="color: var(--bs-primary);"></div>
                    <div class="swiper-button-prev d-none d-md-flex" style="color: var(--bs-primary);"></div>
                    <div class="swiper-pagination mt-4 position-relative bottom-0"></div>
                    <?php endif; ?>
                </div>
                
                <?php } catch(Exception $e) {} ?>

                <style>
                    .course-box { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #f0f0f0 !important; }
                    .course-box:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; border-bottom: 3px solid var(--bs-warning) !important; }
                    .course-box img { transition: transform 0.5s ease; }
                    .course-box:hover img { transform: scale(1.1); }
                    .course-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(59, 11, 124, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
                    .course-box:hover .course-overlay { opacity: 1; }
                    .extra-small { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
                    
                    /* Swiper Overrides */
                    .courseSwiper { padding-bottom: 50px !important; padding-left: 10px; padding-right: 10px; }
                    .courseSwiper .swiper-button-next, .courseSwiper .swiper-button-prev { 
                        background: white; width: 45px; height: 45px; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
                    }
                    .courseSwiper .swiper-button-next:after, .courseSwiper .swiper-button-prev:after { font-size: 1.2rem; font-weight: bold; }
                    .courseSwiper .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 0.5; }
                    .courseSwiper .swiper-pagination-bullet-active { background: var(--bs-primary); opacity: 1; width: 25px; border-radius: 5px; }
                </style>
                
                <!-- Swiper JS Init -->
                <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        if (typeof Swiper !== 'undefined') {
                            new Swiper('.courseSwiper', {
                                slidesPerView: 1,
                                spaceBetween: 20,
                                loop: false,
                                autoplay: {
                                    delay: 3500,
                                    disableOnInteraction: false,
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                breakpoints: {
                                    576: { slidesPerView: 2, spaceBetween: 20 },
                                    768: { slidesPerView: 3, spaceBetween: 25 },
                                    992: { slidesPerView: 4, spaceBetween: 30 },
                                    1200: { slidesPerView: 5, spaceBetween: 30 }
                                }
                            });
                        }
                    });
                </script>
                
                <div class="text-center mt-2">
                    <a href="all-courses.php" class="btn btn-primary rounded-pill px-5 py-2 fw-bold shadow-sm" style="font-size: 1.1rem; letter-spacing: 0.5px;">View All Courses <i class="fas fa-arrow-right ms-2"></i></a>
                </div>
            </div>
        </section>

        <!-- News Section -->
        <section class="py-5 bg-white border-top">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center mb-4 bg-primary text-white p-2 rounded shadow-sm">
                    <h3 class="fw-bold m-0 fs-5 ps-2">News</h3>
                    <a href="news.php" class="btn btn-sm btn-outline-light rounded-pill px-3">View All</a>
                </div>
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe loading="lazy" src="https://www.youtube.com/embed/phIuP8XU9KQ" title="Introduction to Vocational Training Excellence" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 10, 2026</p><h6 class="fw-bold small mb-0">Introduction to Vocational Training Excellence</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe loading="lazy" src="https://www.youtube.com/embed/9RXKFoFb7jA" title="New Opportunities in Technical Education" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 10, 2026</p><h6 class="fw-bold small mb-0">New Opportunities in Technical Education</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe loading="lazy" src="https://www.youtube.com/embed/wbwlmkORyH4" title="Annual Convocation Highlights 2025" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 03, 2026</p><h6 class="fw-bold small mb-0">Annual Convocation Highlights 2025</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe loading="lazy" src="https://www.youtube.com/embed/p9IYAiw4AZs" title="Career Guidance for Vocational Students" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 02, 2026</p><h6 class="fw-bold small mb-0">Career Guidance for Vocational Students</h6></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Notifications, Syllabus & Bank Details Section -->
        <section class="py-5 bg-light border-top border-bottom">
            <div class="container">
                <!-- Row 1: Notifications & Dr. Vinod Kothari -->
                <div class="row g-4 mb-5 animate-on-scroll">
                    <!-- Notifications Column -->
                    <div class="col-lg-4">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100">
                            <div class="card-header bg-gradient-primary text-white py-3 border-0"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-bullhorn me-2"></i>Notifications/ Press Release</h5></div>
                            <div class="card-body p-0 bg-white">
                                <div class="scroll-list p-3 custom-scrollbar" style="max-height: 380px; overflow-y: auto;">
                                    <?php
                                    try {
                                        $stmt = $pdo->query("SELECT * FROM notifications WHERE status = 'active' ORDER BY created_at DESC LIMIT 10");
                                        $notifications = $stmt->fetchAll();
                                        if (empty($notifications)) {
                                            echo '<p class="text-muted small">No notifications found.</p>';
                                        } else {
                                            foreach ($notifications as $notif) {
                                                $date = date('Y-m-d', strtotime($notif['created_at']));
                                                echo '<div class="notification-item border-bottom pb-3 mb-3 hover-text-primary transition-all"><p class="text-muted extra-small mb-1"><i class="far fa-calendar-alt me-1 text-primary"></i>' . $date . '</p><a href="notification-detail.php?id=' . $notif['id'] . '" class="text-dark fw-bold small text-decoration-none d-block lh-sm">' . htmlspecialchars($notif['title']) . '</a></div>';
                                            }
                                        }
                                    } catch (Exception $e) {}
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Message Column 1 -->
                    <div class="col-lg-8">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100 bg-white">
                            <div class="row g-0 h-100">
                                <div class="col-md-5 position-relative overflow-hidden">
                                    <div class="img-overlay-gradient"></div>
                                    <img loading="lazy" src="https://ibvte.com/assets/images/exam_controller_vinod.webp" class="img-fluid h-100 w-100 object-fit-cover profile-zoom" alt="Dr. Vinod Kothari" style="min-height: 250px;">
                                </div>
                                <div class="col-md-7 d-flex align-items-center">
                                    <div class="card-body p-4 p-lg-5 position-relative">
                                        <i class="fas fa-quote-left text-primary opacity-10 fs-1 position-absolute top-0 start-0 mt-4 ms-4"></i>
                                        <h4 class="card-title fw-bold text-primary mb-1">Dr. Vinod Kothari</h4>
                                        <h6 class="card-subtitle mb-4 text-uppercase tracking-wide text-muted fw-semibold" style="letter-spacing: 1px; font-size: 0.8rem;">Exam Controller</h6>
                                        <p class="card-text text-secondary lh-lg" style="font-size: 0.95rem;">"Welcome to IBVTE. We are dedicated to providing excellent vocational training and education. Our examination processes are designed to be fair, transparent, and rigorous, ensuring that our students are well-prepared for their future careers."</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Row 2: Departments & Charan Singh -->
                <div class="row g-4 mb-5 animate-on-scroll">
                    <!-- Syllabus/Departments Column -->
                    <div class="col-lg-4">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100">
                            <div class="card-header bg-gradient-success text-white py-3 border-0"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-graduation-cap me-2"></i>Our Departments</h5></div>
                            <div class="card-body p-3 bg-white">
                                <ul class="list-unstyled small mb-0 scroll-list custom-scrollbar" style="max-height: 380px; overflow-y: auto;">
                                    <?php
                                    try {
                                        $isLive = false; try { $db->fetchOne("SELECT category_id FROM courses LIMIT 1"); $isLive = true; } catch(Exception $e) {}
                                        if ($isLive) {
                                            $deptCats = $db->fetchAll("SELECT name FROM course_categories WHERE is_active = 1 AND EXISTS (SELECT 1 FROM courses c WHERE c.category_id = course_categories.id AND c.is_active = 1) ORDER BY display_order ASC LIMIT 6");
                                        } else {
                                            $deptCats = $db->fetchAll("SELECT name FROM course_categories WHERE is_active = 1 AND EXISTS (SELECT 1 FROM courses c WHERE c.short_name COLLATE utf8mb4_unicode_ci = course_categories.name COLLATE utf8mb4_unicode_ci AND c.is_active = 1) ORDER BY display_order ASC LIMIT 6");
                                        }
                                        if (!empty($deptCats)) {
                                            $count = 0;
                                            foreach ($deptCats as $dcat) {
                                                $catUrl = "all-courses.php?category=" . urlencode($dcat['name']);
                                                $mbClass = ($count === count($deptCats) - 1) ? 'mb-0' : 'mb-3 border-bottom pb-3';
                                                echo '<li class="' . $mbClass . '"><a href="' . $catUrl . '" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">' . htmlspecialchars($dcat['name']) . ' Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>';
                                                $count++;
                                            }
                                        } else {
                                            ?>
                                            <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Paramedical" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Paramedical Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                            <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Nursing" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Nursing Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                            <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Vocational" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Vocational Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                            <li class="mb-0"><a href="all-courses.php?category=IT" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">IT Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                            <?php
                                        }
                                    } catch (Exception $e) {
                                        ?>
                                        <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Paramedical" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Paramedical Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                        <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Nursing" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Nursing Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                        <li class="mb-3 border-bottom pb-3"><a href="all-courses.php?category=Vocational" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">Vocational Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                        <li class="mb-0"><a href="all-courses.php?category=IT" class="text-decoration-none text-dark d-flex justify-content-between align-items-center group-hover-success"><span class="fw-semibold">IT Education</span><div class="icon-circle bg-light text-success"><i class="fas fa-arrow-right"></i></div></a></li>
                                        <?php
                                    }
                                    ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Message Column 2 -->
                    <div class="col-lg-8">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100 bg-white">
                            <div class="row g-0 h-100 flex-md-row-reverse">
                                <div class="col-md-5 position-relative overflow-hidden">
                                    <div class="img-overlay-gradient-success"></div>
                                    <img loading="lazy" src="https://ibvte.com/assets/images/president_charan.webp" class="img-fluid h-100 w-100 object-fit-cover profile-zoom" alt="Charan Singh" style="min-height: 250px;">
                                </div>
                                <div class="col-md-7 d-flex align-items-center">
                                    <div class="card-body p-4 p-lg-5 position-relative">
                                        <i class="fas fa-quote-left text-success opacity-10 fs-1 position-absolute top-0 end-0 mt-4 me-4" style="transform: scaleX(-1);"></i>
                                        <h4 class="card-title fw-bold text-success mb-1">Charan Singh</h4>
                                        <h6 class="card-subtitle mb-4 text-uppercase tracking-wide text-muted fw-semibold" style="letter-spacing: 1px; font-size: 0.8rem;">President</h6>
                                        <p class="card-text text-secondary lh-lg" style="font-size: 0.95rem;">"It is my great pleasure to welcome you to the Indian Board of Vocational and Technical Education. Our mission is to empower individuals through quality education and skill development, enabling them to achieve their professional goals and contribute meaningfully to society."</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Row 3: Bank Details & QR Code -->
                <div class="row g-4 animate-on-scroll">
                    <!-- QR Code Column (Full Box) -->
                    <div class="col-lg-4">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100">
                            <div class="card-header bg-gradient-danger text-white py-3 border-0"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-qrcode me-2"></i>Scan & Pay</h5></div>
                            <div class="card-body p-0 bg-white d-flex align-items-center justify-content-center">
                                <img loading="lazy" src="https://i.ibb.co/Cs6vbtWk/upi.jpg" alt="Scan to Pay - UPI QR Code" class="img-fluid w-100 h-100" style="object-fit: contain; padding: 10px;">
                            </div>
                        </div>
                    </div>
                    <!-- Bank Details Column -->
                    <div class="col-lg-8">
                        <div class="card premium-card border-0 rounded-4 overflow-hidden h-100">
                            <div class="card-header bg-gradient-danger text-white py-3 border-0"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-university me-2"></i>Fee Deposit Bank Details</h5></div>
                            <div class="card-body p-4 p-lg-5 bg-white d-flex flex-column justify-content-center">
                                <div class="bg-light p-4 rounded-3 border-start border-danger border-4">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <div style="width:42px;height:42px;border-radius:50%;background:rgba(231,74,59,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                                    <i class="fas fa-building text-danger"></i>
                                                </div>
                                                <div>
                                                    <div class="text-muted small">Bank Name</div>
                                                    <div class="fw-bold text-dark">YES BANK</div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <div style="width:42px;height:42px;border-radius:50%;background:rgba(231,74,59,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                                    <i class="fas fa-user-circle text-danger"></i>
                                                </div>
                                                <div>
                                                    <div class="text-muted small">Account Name</div>
                                                    <div class="fw-bold text-dark" style="font-size:0.9rem;">Indian Board of Vocational and Technical Education</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <div style="width:42px;height:42px;border-radius:50%;background:rgba(231,74,59,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                                    <i class="fas fa-hashtag text-danger"></i>
                                                </div>
                                                <div>
                                                    <div class="text-muted small">Account Number</div>
                                                    <div class="fw-bold text-dark fs-5 letter-spacing-1">149788700000112</div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <div style="width:42px;height:42px;border-radius:50%;background:rgba(231,74,59,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                                    <i class="fas fa-code-branch text-danger"></i>
                                                </div>
                                                <div>
                                                    <div class="text-muted small">IFSC Code</div>
                                                    <div class="fw-bold text-dark fs-5">YESB0001497</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-3 border-top border-danger border-opacity-25">
                                        <p class="text-danger small fw-bold mb-0"><i class="fas fa-info-circle me-1"></i>Please use the QR code on the left or transfer directly to the above account details to pay your fees.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Premium Styling & jQuery Animations -->
        <style>
            .bg-gradient-primary { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); }
            .bg-gradient-success { background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%); }
            .bg-gradient-danger { background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%); }
            
            .premium-card {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
                border: 1px solid rgba(0,0,0,0.03) !important;
            }
            .premium-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            }
            
            .profile-zoom { transition: transform 0.6s ease; }
            .premium-card:hover .profile-zoom { transform: scale(1.05); }
            
            .img-overlay-gradient {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                background: linear-gradient(to right, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
                z-index: 1; pointer-events: none;
            }
            .img-overlay-gradient-success {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                background: linear-gradient(to left, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
                z-index: 1; pointer-events: none;
            }
            .img-overlay-gradient-danger {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                background: linear-gradient(to right, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
                z-index: 1; pointer-events: none;
            }

            .icon-circle {
                width: 32px; height: 32px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                transition: all 0.3s ease;
            }
            .group-hover-success:hover .icon-circle { background-color: #1cc88a !important; color: white !important; transform: translateX(5px); }
            
            .transition-all { transition: all 0.3s ease; }
            .hover-text-primary:hover a { color: #4e73df !important; }
            .qr-hover:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(231, 74, 59, 0.2) !important; border-color: #e74a3b !important; }
            
            .custom-scrollbar::-webkit-scrollbar { width: 6px; }
            .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
            .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
            .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
            
            .opacity-10 { opacity: 0.05 !important; font-size: 5rem !important; }
            
            /* Scroll Animation Classes */
            .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
            .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
        </style>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Check if jQuery is loaded, use native JS as fallback for animations
                const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };
                const observer = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('is-visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, observerOptions);
                
                document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
            });
        </script>
            </div>
        </section>

        <style>
            .course-box { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
            .course-box:hover { border-color: var(--bs-warning) !important; transform: translateY(-10px); }
            .course-box img { transition: transform 0.5s ease; }
            .course-box:hover img { transform: scale(1.1); }
            .shadow-hover:hover { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }

            /* Board Vision 9-Boxes Styles with Conic-Gradient Border Ring */
            .service-icon-box {
                position: relative;
                border-radius: 12px !important;
                border: none !important; /* Remove physical border */
                padding: 3px !important; /* Sets border thickness */
                overflow: hidden;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                box-shadow: 0 4px 15px rgba(0,0,0,0.05);
                z-index: 1;
            }
            /* Conic Gradient Border overlay */
            .service-icon-box::before {
                content: '';
                position: absolute;
                width: 250%;
                height: 250%;
                top: -75%;
                left: -75%;
                /* Default: Deep Dark saturated colors */
                background: conic-gradient(
                    from var(--border-angle, 0deg),
                    #994d00,
                    #006775,
                    #351c62,
                    #0a3622,
                    #052c65,
                    #58151c,
                    #664d03,
                    #994d00
                );
                z-index: -2;
                animation: borderRotate 8s linear infinite;
                transition: background 0.3s ease;
            }
            /* Inner card body mask - inherits parent solid background */
            .service-icon-box::after {
                content: '';
                position: absolute;
                top: 3px;
                left: 3px;
                right: 3px;
                bottom: 3px;
                border-radius: 10px;
                background: inherit;
                z-index: -1;
                transition: all 0.3s ease;
            }
            
            /* On hover: speed up rotation and use vibrant glowing colors */
            .service-icon-box:hover::before {
                animation-duration: 2.5s;
                background: conic-gradient(
                    from var(--border-angle, 0deg),
                    #ff9800,
                    #00bcd4,
                    #6f42c1,
                    #198754,
                    #0d6efd,
                    #dc3545,
                    #ffc107,
                    #ff9800
                );
            }
            
            @keyframes borderRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Rotating Conic Border Effect for Director Portrait Box */
            .director-box {
                position: relative;
                padding: 4px;
                background: #0d2c54;
                overflow: hidden;
                border-radius: 16px;
                z-index: 1;
                border: none !important;
                box-shadow: 0 8px 25px rgba(0,0,0,0.08);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
            .director-box::before {
                content: '';
                position: absolute;
                width: 250%;
                height: 250%;
                top: -75%;
                left: -75%;
                background: conic-gradient(
                    #0d6efd,
                    #d90429,
                    #ffc107,
                    #0d6efd
                );
                animation: borderRotate 5s linear infinite;
                z-index: -2;
                transition: all 0.4s;
            }
            .director-box:hover::before {
                animation-duration: 2.5s;
            }
            .director-box::after {
                content: '';
                position: absolute;
                top: 4px;
                left: 4px;
                right: 4px;
                bottom: 4px;
                background: #fff;
                border-radius: 12px;
                z-index: -1;
            }
            .director-box img {
                border-radius: 12px !important;
            }

            /* Director Floating Logo Overlap Styles */
            .director-logo-float {
                position: absolute;
                bottom: -32px;
                right: 10px;
                z-index: 10;
            }
            .director-logo-ring {
                width: 140px;
                height: 140px;
                border-radius: 50%;
                background: #fff;
                padding: 6px;
                box-shadow: 0 10px 25px rgba(13, 37, 69, 0.25);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                transition: all 0.4s ease;
                border: 4px solid #0d6efd;
                opacity: 0;
                transform: scale(0.5) translateY(20px);
            }
            .director-logo-img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 50%;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }
            @keyframes directorLogoEntry {
                from { 
                    transform: scale(0.5) translateY(20px); 
                    opacity: 0; 
                }
                to { 
                    transform: scale(1) translateY(0); 
                    opacity: 1; 
                }
            }
            @keyframes directorLogoPulse {
                0% {
                    box-shadow: 0 0 15px rgba(255, 255, 255, 0.45), 
                                0 0 30px rgba(13, 110, 253, 0.35), 
                                0 0 45px rgba(217, 4, 41, 0.25);
                }
                50% {
                    box-shadow: 0 0 25px rgba(255, 255, 255, 0.85), 
                                0 0 50px rgba(13, 110, 253, 0.65), 
                                0 0 85px rgba(217, 4, 41, 0.55);
                }
                100% {
                    box-shadow: 0 0 15px rgba(255, 255, 255, 0.45), 
                                0 0 30px rgba(13, 110, 253, 0.35), 
                                0 0 45px rgba(217, 4, 41, 0.25);
                }
            }
            /* Hover effects on photo frame */
            .eci-photo-frame-large {
                position: relative;
            }
            .eci-photo-frame-large:hover .director-logo-ring {
                border-color: #d90429;
                box-shadow: 0 12px 30px rgba(217, 4, 41, 0.35);
                transform: scale(1.15) !important;
            }
            .eci-photo-frame-large:hover .director-logo-img {
                transform: rotate(360deg);
            }

            /* Secretary SVEEP Banner Styles */
            .secretary-banner-section {
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                position: relative;
                overflow: hidden;
            }
            .secretary-banner-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(circle at 80% 50%, rgba(13, 110, 253, 0.05) 0%, rgba(0,0,0,0) 60%);
                z-index: 1;
            }
            .secretary-board-title {
                font-size: 1.55rem;
                letter-spacing: 0.5px;
                white-space: nowrap;
                text-shadow: none;
            }
            @media (max-width: 1199.98px) {
                .secretary-board-title {
                    font-size: 1.25rem;
                    white-space: normal;
                }
            }
            .secretary-logo-container {
                width: 110px;
                height: 110px;
                border-radius: 50%;
                background: #fff;
                padding: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 5;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            }
            .sec-board-title-hindi {
                font-size: clamp(1rem, 2vw, 1.55rem);
                font-weight: 800;
                color: #0f172a;
                font-family: 'Outfit', sans-serif;
                line-height: 1.3;
                margin-bottom: 2px;
            }
            .sec-board-title-english {
                font-size: clamp(0.85rem, 1.6vw, 1.25rem);
                font-weight: 700;
                color: #475569;
                font-family: 'Outfit', sans-serif;
                line-height: 1.3;
                margin-bottom: 6px;
            }
            @media (min-width: 992px) {
                .sec-board-title-hindi, .sec-board-title-english {
                    white-space: nowrap;
                }
            }
            .sec-border-top {
                height: 4px;
                background: #e9ecef;
                overflow: hidden;
            }
            .sec-border-line {
                display: block;
                height: 100%;
                width: 0%;
                background: linear-gradient(90deg, #3b0b7c, #ffd700, #ff6b00, #3b0b7c);
                transition: width 1.4s cubic-bezier(.4,0,.2,1);
            }
            .sec-border-line.animated {
                width: 100%;
            }

            .secretary-box {
                position: relative;
                padding: 6px;
                background: #fff;
                overflow: hidden;
                border-radius: 16px;
                z-index: 1;
                border: 4px solid #1e293b !important; /* Thick dark slate border */
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                transition: transform 0.1s ease, box-shadow 0.3s ease, border-color 0.3s ease;
                transform-style: preserve-3d;
            }
            .secretary-box::before {
                display: none;
            }
            .secretary-box::after {
                display: none;
            }
            .secretary-box img {
                border-radius: 12px !important;
                transition: all 0.5s ease;
            }
            .secretary-box:hover img {
                transform: scale(1.05);
            }
            .secretary-box:hover {
                border-color: #3b0b7c !important; /* Transition to primary color on hover */
            }
            .board-vision-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
            }
            .board-vision-card:hover .vision-logo-container {
                transform: scale(1.05) rotate(2deg);
            }
            .vision-more-btn:hover {
                color: #3b0b7c !important;
            }
            .vision-more-btn:hover i {
                transform: translateX(4px);
            }
        </style>

        <!-- Event Gallery Lightbox Modal -->
        <div id="galleryLightbox" class="gallery-lightbox" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 37, 69, 0.95); z-index: 99999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
            <span class="lightbox-close" style="position: absolute; top: 25px; right: 35px; font-size: 50px; color: #fff; cursor: pointer; transition: all 0.2s; font-weight: bold; line-height: 1; user-select: none;">&times;</span>
            <div class="lightbox-wrapper" style="position: relative; max-width: 90%; max-height: 85%; transform: scale(0.9); transition: transform 0.3s ease; display: flex; flex-direction: column; align-items: center;">
                <img class="lightbox-content" id="lightboxImg" src="" alt="Enlarged Event" style="max-width: 100%; max-height: 80vh; object-fit: contain; border: 4px solid #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);">
                <div class="lightbox-caption" id="lightboxCaption" style="color: #fff; margin-top: 15px; font-size: 1.1rem; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.8); text-align: center;"></div>
            </div>
        </div>

        <style>
            .gallery-lightbox .lightbox-close:hover {
                color: #d90429 !important;
                transform: scale(1.2);
            }
        </style>

        <script>
        document.addEventListener('DOMContentLoaded', function(){
            var lightbox = document.getElementById('galleryLightbox');
            var lightboxImg = document.getElementById('lightboxImg');
            var lightboxCaption = document.getElementById('lightboxCaption');
            var wrapper = lightbox.querySelector('.lightbox-wrapper');
            var closeBtn = lightbox.querySelector('.lightbox-close');

            // Open Lightbox
            var items = document.querySelectorAll('.gallery-mosaic-item');
            items.forEach(function(item) {
                item.addEventListener('click', function() {
                    var img = item.querySelector('img');
                    if (img) {
                        var src = img.getAttribute('src');
                        var alt = img.getAttribute('alt');
                        lightboxImg.setAttribute('src', src);
                        lightboxCaption.textContent = alt || 'IBVTE Event Image';
                        lightbox.style.display = 'flex';
                        setTimeout(function(){
                            lightbox.style.opacity = '1';
                            wrapper.style.transform = 'scale(1)';
                        }, 50);
                    }
                });
            });

            // Close Lightbox function
            function closeLightbox() {
                lightbox.style.opacity = '0';
                wrapper.style.transform = 'scale(0.9)';
                setTimeout(function(){
                    lightbox.style.display = 'none';
                }, 300);
            }

            closeBtn.addEventListener('click', closeLightbox);
            lightbox.addEventListener('click', function(e) {
                if (e.target === lightbox) {
                    closeLightbox();
                }
            });

            // ESC key to close
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && lightbox.style.display === 'flex') {
                    closeLightbox();
                }
            });

            // Interactive jQuery Effects for Board Vision 9-Grid Boxes
            $(function() {
                $('.service-icon-box').each(function() {
                    var $box = $(this);
                    // Add matching border-glow classes based on background
                    if ($box.hasClass('bg-orange')) $box.addClass('border-glow-orange');
                    else if ($box.hasClass('bg-cyan')) $box.addClass('border-glow-cyan');
                    else if ($box.hasClass('bg-secondary')) $box.addClass('border-glow-secondary');
                    else if ($box.hasClass('bg-purple')) $box.addClass('border-glow-purple');
                    else if ($box.hasClass('bg-success')) $box.addClass('border-glow-success');
                    else if ($box.hasClass('bg-primary')) $box.addClass('border-glow-primary');
                    else if ($box.hasClass('bg-dark')) $box.addClass('border-glow-dark');
                    else if ($box.hasClass('bg-danger')) $box.addClass('border-glow-danger');
                    else if ($box.hasClass('bg-warning')) $box.addClass('border-glow-warning');
                });

                // Mouse move mathematical tracking for rotating conic-gradient border angle
                $('.service-icon-box').on('mousemove', function(e) {
                    var $box = $(this);
                    var offset = $box.offset();
                    var width = $box.outerWidth();
                    var height = $box.outerHeight();
                    
                    var centerX = offset.left + width / 2;
                    var centerY = offset.top + height / 2;
                    
                    var mouseX = e.pageX;
                    var mouseY = e.pageY;
                    
                    var angle = Math.atan2(mouseY - centerY, mouseX - centerX) * (180 / Math.PI);
                    if (angle < 0) angle += 360;
                    
                    $box.css('--border-angle', angle + 'deg');
                });

                $('.service-icon-box').on('mouseenter', function() {
                    var $box = $(this);
                    var $icon = $box.find('i');
                    var iconColor = $icon.css('color') || '#fff';
                    
                    // jQuery animate: scale up icon softly
                    $icon.stop().animate({
                        fontSize: '2.8rem'
                    }, 200);
                    
                    // Dynamic dynamic box glow match using jQuery CSS
                    var shadowColor = iconColor.replace('rgb', 'rgba').replace(')', ', 0.45)');
                    if (shadowColor.indexOf('rgba') === -1) {
                        shadowColor = 'rgba(255,255,255,0.45)';
                    }
                    
                    $box.css({
                        'transform': 'translateY(-8px) scale(1.05) rotate(1deg)',
                        'box-shadow': '0 12px 30px ' + shadowColor,
                        'transition': 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                    });
                }).on('mouseleave', function() {
                    var $box = $(this);
                    var $icon = $box.find('i');
                    
                    $icon.stop().animate({
                        fontSize: '2.3rem'
                    }, 200);
                    
                    $box.css({
                        'transform': 'translateY(0) scale(1) rotate(0deg)',
                        'box-shadow': '',
                        'transition': 'all 0.3s ease'
                    });
                });
            });

            // Scroll reveal animation for Director's Badge Logo using jQuery
            $(window).on("scroll.directorBadge", function() {
                var badge = $(".director-logo-ring");
                if (badge.length) {
                    var docTop = $(window).scrollTop();
                    var docBottom = docTop + $(window).height();
                    var elemTop = badge.offset().top;
                    if (elemTop <= docBottom - 60) {
                        badge.css({
                            animation: "directorLogoEntry 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, directorLogoPulse 3s ease-in-out infinite 1s"
                        });
                        $(window).off("scroll.directorBadge");
                    }
                }
            });



            // Typewriter pencil writing effect for Secretary Banner
            var secText = "Empowering the nation through industrial integration, specialized skill development, and innovative vocational learning frameworks. We are dedicated to creating career-oriented training models that connect students, institutions, and employers for sustainable national development. By offering industry-aligned curriculums and globally recognized standards, we strive to transform every learner into a highly skilled asset for the nation's future.";
            var secSpeed = 25;
            var secIdx = 0;
            var secTypewriter = document.getElementById('secretaryTypewriter');
            var secPencil = document.getElementById('secretaryPencilCursor');

            if (secTypewriter && secPencil) {
                function secTypeWriter() {
                    if (secIdx < secText.length) {
                        secTypewriter.textContent += secText.charAt(secIdx);
                        secIdx++;
                        var rotation = 90 + (Math.sin(secIdx) * 15);
                        secPencil.style.transform = 'rotate(' + rotation + 'deg) translateY(' + (Math.sin(secIdx) * 2) + 'px)';
                        setTimeout(secTypeWriter, secSpeed);
                    } else {
                        setTimeout(function() {
                            secPencil.style.opacity = '0';
                        }, 800);
                    }
                }

                if ('IntersectionObserver' in window) {
                    var secObserver = new IntersectionObserver(function(entries) {
                        if (entries[0].isIntersecting) {
                            secPencil.style.opacity = '1';
                            secTypeWriter();
                            $(".sec-border-line").addClass("animated");
                            secObserver.disconnect();
                        }
                    }, { threshold: 0.1 });
                    secObserver.observe(secTypewriter);
                } else {
                    secPencil.style.opacity = '1';
                    secTypeWriter();
                    $(".sec-border-line").addClass("animated");
                }
            }

            // HTML Canvas background particle floating orbs effect with mouse hover interaction
            $(function() {
                var canvas = document.getElementById('secretaryCanvas');
                if (!canvas) return;
                var ctx = canvas.getContext('2d');
                var orbs = [];
                var maxOrbs = 20;
                var mouse = { x: null, y: null, radius: 180 };

                function resizeCanvas() {
                    var rect = canvas.parentNode.getBoundingClientRect();
                    canvas.width = rect.width;
                    canvas.height = rect.height;
                }
                resizeCanvas();
                $(window).on('resize.secCanvas', resizeCanvas);

                $(canvas.parentNode).on('mousemove', function(e) {
                    var rect = canvas.getBoundingClientRect();
                    mouse.x = e.clientX - rect.left;
                    mouse.y = e.clientY - rect.top;
                }).on('mouseleave', function() {
                    mouse.x = null;
                    mouse.y = null;
                });

                function Orb() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.vx = (Math.random() - 0.5) * 0.5;
                    this.vy = (Math.random() - 0.5) * 0.5;
                    this.radius = Math.random() * 90 + 50; // Large glowing blobs
                    this.color1 = Math.random() > 0.5 ? 'rgba(59, 11, 124, 0.28)' : 'rgba(13, 110, 253, 0.18)'; // Soft primary / secondary glows
                    this.color2 = 'rgba(255, 255, 255, 0)';
                }

                Orb.prototype.update = function() {
                    this.x += this.vx;
                    this.y += this.vy;

                    // Bounce off boundaries
                    if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) this.vx *= -1;
                    if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) this.vy *= -1;

                    // Mouse hover gravity attraction
                    if (mouse.x !== null && mouse.y !== null) {
                        var dx = mouse.x - this.x;
                        var dy = mouse.y - this.y;
                        var dist = Math.hypot(dx, dy);
                        if (dist < mouse.radius) {
                            var force = (mouse.radius - dist) / mouse.radius;
                            this.x += (dx / dist) * force * 1.6;
                            this.y += (dy / dist) * force * 1.6;
                        }
                    }
                };

                Orb.prototype.draw = function() {
                    ctx.save();
                    var grad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
                    grad.addColorStop(0, this.color1);
                    grad.addColorStop(1, this.color2);
                    
                    ctx.fillStyle = grad;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();
                };

                for (var i = 0; i < maxOrbs; i++) {
                    orbs.push(new Orb());
                }

                function animate() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    for (var i = 0; i < orbs.length; i++) {
                        var orb = orbs[i];
                        orb.update();
                        orb.draw();
                    }
                    requestAnimationFrame(animate);
                }

                if ('IntersectionObserver' in window) {
                    var obs = new IntersectionObserver(function(entries) {
                        if (entries[0].isIntersecting) {
                            animate();
                            obs.disconnect();
                        }
                    }, { threshold: 0.1 });
                    obs.observe(canvas.parentNode);
                } else {
                    animate();
                }

                // 3D Parallax Hover/Tilt Effect for Secretary Photo using jQuery
                $('.secretary-box').on('mousemove', function(e) {
                    var box = $(this);
                    var width = box.width();
                    var height = box.height();
                    var offset = box.offset();
                    var x = e.pageX - offset.left - (width / 2);
                    var y = e.pageY - offset.top - (height / 2);
                    
                    var tiltX = (y / (height / 2)) * -10; // Max tilt angle
                    var tiltY = (x / (width / 2)) * 10;
                    
                    box.css({
                        'transform': 'perspective(1000px) rotateX(' + tiltX + 'deg) rotateY(' + tiltY + 'deg) scale(1.02)',
                        'box-shadow': (-tiltY * 1.5) + 'px ' + (tiltX * 1.5) + 'px 30px rgba(59, 11, 124, 0.25)'
                    });
                }).on('mouseleave', function() {
                    $(this).css({
                        'transform': 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)',
                        'box-shadow': '0 8px 25px rgba(0, 0, 0, 0.15)'
                    });
                });
            });
        });
        </script>

        <!-- SECRETARY SVEEP-STYLE BANNER SECTION -->
        <section class="secretary-banner-section py-5 mt-5 mb-0 shadow-lg overflow-hidden position-relative">
            <!-- Animated top border -->
            <div class="sec-border-top" style="position: absolute; top: 0; left: 0; width: 100%; height: 4px;"><span class="sec-border-line"></span></div>

            <!-- Background HTML Canvas for Floating Particle Constellation -->
            <canvas id="secretaryCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.75;"></canvas>

            <div class="container position-relative" style="z-index: 2;">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-8 d-flex flex-column justify-content-center">
                        <div class="d-flex align-items-center mb-4">
                            <div class="secretary-logo-container me-4 flex-shrink-0">
                                <img loading="lazy" src="https://ibvte.com/assets/images/logo_official.webp" style="width: 100%; height: 100%; object-fit: contain; border-radius: 50%;" alt="IBVTE Logo">
                            </div>
                            <div style="z-index: 5;">
                                <h3 class="sec-board-title-hindi">भारतीय व्यावसायिक एवं तकनीकी शिक्षा बोर्ड (नई दिल्ली)</h3>
                                <h4 class="sec-board-title-english">INDIAN BOARD OF VOCATIONAL AND TECHNICAL EDUCATION (NEW DELHI)</h4>
                                <span class="text-primary small fw-bold text-uppercase" style="letter-spacing: 2.5px; display: block; margin-top: 4px;">Secretary Message</span>
                            </div>
                        </div>
                        <div class="secretary-quote-box mb-4" style="position: relative; min-height: 240px; padding: 0 10px; z-index: 5;">
                            <span style="font-size: 4rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: absolute; top: -15px; left: -15px; opacity: 0.3;">&ldquo;</span>
                            <span id="secretaryTypewriter" style="font-style: italic; color: #212529; font-weight: 700; font-size: 2.1rem; line-height: 1.6; display: inline; padding-left: 25px; font-family: 'Outfit', sans-serif;"></span>
                            <span id="secretaryPencilCursor" style="display: inline-block; transition: all 0.05s ease; opacity: 0; vertical-align: middle;"><i class="fas fa-pencil-alt text-primary" style="font-size: 1.6rem; transform: rotate(90deg); margin-left: 6px;"></i></span>
                            <span style="font-size: 4rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: relative; bottom: -25px; opacity: 0.3;">&rdquo;</span>
                        </div>
                    </div>
                    <div class="col-lg-4 d-flex flex-column align-items-center justify-content-center text-end" style="z-index: 5;">
                        <div class="secretary-photo-frame mb-3" style="position: relative; width: 100%; max-width: 460px; aspect-ratio: 16/10;">
                            <div class="secretary-box overflow-hidden rounded-4 h-100 w-100" style="position: relative; z-index: 3;">
                                <img loading="lazy" src="<?= $base ?>assets/images/secretary_furkan.webp" class="w-100 h-100" style="object-fit: cover;" alt="Dr. Furkan Saifi">
                            </div>
                        </div>
                        <div class="w-100 text-end pe-md-2 pe-0" style="z-index: 6;">
                            <h4 class="text-dark fw-bold mb-0 fs-5">Dr. Furkan Saifi</h4>
                            <span class="text-primary small fw-semibold">Secretary, IBVTE</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<?php
// Website Popup Logic
try {
    $popup_stmt = $pdo->query("SELECT * FROM popup_settings ORDER BY id DESC LIMIT 1");
    $popup = $popup_stmt->fetch(PDO::FETCH_ASSOC);
    if ($popup && $popup['is_active'] && !empty($popup['image_path'])) {
        ?>
        <!-- Website Popup Modal -->
        <div class="modal fade" id="websitePopupModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content border-0 bg-transparent">
                    <div class="modal-body p-0 position-relative text-center">
                        <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3 shadow-none" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1055; background-color: rgba(0,0,0,0.5); border-radius: 50%; padding: 10px;"></button>
                        <img loading="lazy" src="<?= htmlspecialchars($base . $popup['image_path']) ?>" class="img-fluid rounded-4 shadow-lg" alt="Popup Announcement" style="max-height: 80vh;">
                    </div>
                </div>
            </div>
        </div>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (!sessionStorage.getItem('websitePopupShown')) {
                var popupModal = new bootstrap.Modal(document.getElementById('websitePopupModal'));
                popupModal.show();
                sessionStorage.setItem('websitePopupShown', 'true');
            }
        });
        </script>
        <?php
    }
} catch (Exception $e) {
    // Popup table might not exist yet or connection failed
}
?>

<?php include 'includes/footer.php'; ?>
