    <!-- Cookie Bar -->
    <div class="cookie-bar bg-dark text-white py-2 fixed-bottom" id="cookieBar">
        <div class="container d-flex justify-content-between align-items-center small">
            <div>Do you like cookies? We use cookies to ensure you get the best experience on our website.</div>
            <button class="btn btn-primary btn-sm px-4" onclick="document.getElementById('cookieBar').remove()">I agree</button>
        </div>
    </div>

    <!-- Load OwlCarousel CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>

    <!-- ══ Important Sites Section ══ -->
    <div class="imp-sites-wrapper" id="impSitesSection">
        <!-- Animated top border -->
        <div class="imp-border-top"><span class="imp-border-line"></span></div>

        <div class="container-fluid bg-light py-4">
            <div class="container text-center">
                <h5 class="fw-bold mb-4 imp-title">
                    <i class="fas fa-globe me-2"></i>Important Sites
                </h5>
                <div class="owl-carousel owl-theme" id="importantSitesCarousel">
                    <div class="item"><a href="https://igod.gov.in/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_igod.png" alt="IGOD"></div><span class="site-label">IGOD</span></a></div>
                    <div class="item"><a href="https://www.pmindia.gov.in/en/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_pmindia.png" alt="PM India"></div><span class="site-label">PM India</span></a></div>
                    <div class="item"><a href="https://www.india.gov.in/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_indiagov.png" alt="India Gov"></div><span class="site-label">India Gov</span></a></div>
                    <div class="item"><a href="https://dsel.education.gov.in/hi/ebsb" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_ebsb.jpg" alt="EBSB"></div><span class="site-label">EBSB</span></a></div>
                    <div class="item"><a href="https://www.makeinindia.com/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_makeinindia.png" alt="Make in India"></div><span class="site-label">Make in India</span></a></div>
                    <div class="item"><a href="https://rtionline.gov.in/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_rti.png" alt="RTI Online"></div><span class="site-label">RTI Online</span></a></div>
                    <div class="item"><a href="https://fitindia.gov.in/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_fitindia.jpg" alt="Fit India"></div><span class="site-label">Fit India</span></a></div>
                    <div class="item"><a href="https://services.india.gov.in/" target="_blank" class="site-circle-wrap"><div class="site-circle"><img loading="lazy" src="<?php echo $base; ?>assets/images/site_indiaservices.png" alt="India Services"></div><span class="site-label">India Services</span></a></div>
                </div>
            </div>
        </div>

        <!-- Animated bottom border -->
        <div class="imp-border-bottom"><span class="imp-border-line"></span></div>
    </div>

    <!-- ══ MAIN FOOTER ══ -->
    <footer class="ibvte-footer-main" id="mainFooter">

        <!-- Logo floating out above footer -->
        <div class="footer-logo-float">
            <div class="footer-logo-ring">
                <img src="<?php echo $base; ?>assets/images/logo.webp" alt="IBVTE Logo" class="footer-logo-img" id="floatLogo">
            </div>
            <div class="footer-logo-tagline">IBVTE &bull; (New Delhi)</div>
        </div>

        <!-- Glowing top line -->
        <div class="footer-glow-line"></div>

        <div class="container" style="padding-top: 90px;">
            <div class="row g-4">

                <!-- COL 1: Contact -->
                <div class="col-lg-3 col-md-6 footer-col" data-delay="0" style="overflow: hidden; word-wrap: break-word; overflow-wrap: break-word;">
                    <h6 class="footer-col-title">About Board</h6>
                    <p class="footer-org-name mb-1" style="font-size: 11.5px; font-weight: 700; color: #fff; line-height: 1.4; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">भारतीय व्यावसायिक एवं तकनीकी शिक्षा बोर्ड (नई दिल्ली)</p>
                    <p class="footer-org-name" style="font-size: 11px; color: #ffd700; font-weight: 700; margin-bottom: 12px; line-height: 1.4; text-transform: uppercase; padding-right: 10px; word-wrap: break-word; overflow-wrap: break-word;">INDIAN BOARD OF VOCATIONAL AND TECHNICAL EDUCATION (New Delhi)</p>
                    <div class="footer-contact-item">
                        <span class="fci-icon"><i class="fas fa-map-marker-alt"></i></span>
                        <span><strong>Regd. Office:</strong> 60 Futa Road, Samar Garden Colony, Meerut (UP) – 250002</span>
                    </div>
                    <div class="footer-contact-item">
                        <span class="fci-icon"><i class="fas fa-map-marker-alt"></i></span>
                        <span><strong>Delhi Office:</strong> 6/23, 33 Futa Road, Kabir Nagar, Shahdara Road, Delhi - 110094</span>
                    </div>
                    <div class="footer-contact-item">
                        <span class="fci-icon"><i class="fas fa-phone-alt"></i></span>
                        <span>+91-9627769817 | +91-9639681797</span>
                    </div>
                    <div class="footer-contact-item">
                        <span class="fci-icon"><i class="fas fa-envelope"></i></span>
                        <span>ibvtenewdelhi@gmail.com</span>
                    </div>

                </div>

                <!-- COL 2: Useful Links -->
                <div class="col-lg-2 col-md-6 footer-col" data-delay="100">
                    <h6 class="footer-col-title">Useful Links</h6>
                    <ul class="footer-link-list">
                        <li><a href="<?php echo $base; ?>index.php"><i class="fas fa-caret-right"></i>Home</a></li>
                        <li><a href="<?php echo $base; ?>about.php"><i class="fas fa-caret-right"></i>About Us</a></li>
                        <li><a href="<?php echo $base; ?>gallery.php"><i class="fas fa-caret-right"></i>Gallery</a></li>
                        <li><a href="<?php echo $base; ?>downloads.php"><i class="fas fa-caret-right"></i>Downloads</a></li>
                        <li><a href="<?php echo $base; ?>rti/rti-form.php"><i class="fas fa-caret-right"></i>RTI Form</a></li>
                        <li><a href="<?php echo $base; ?>privacy-policy.php"><i class="fas fa-caret-right"></i>Privacy Policy</a></li>
                        <li><a href="<?php echo $base; ?>contact.php"><i class="fas fa-caret-right"></i>Contact Us</a></li>
                    </ul>
                </div>

                <!-- COL 3: Important Links -->
                <div class="col-lg-3 col-md-6 footer-col" data-delay="200">
                    <h6 class="footer-col-title">Important Links</h6>
                    <ul class="footer-link-list">
                        <li><a href="<?php echo $base; ?>affiliation/apply.php"><i class="fas fa-caret-right"></i>Apply For Affiliation</a></li>
                        <li><a href="<?php echo $base; ?>student/login.php"><i class="fas fa-caret-right"></i>Student Login</a></li>
                        <li><a href="<?php echo $base; ?>college/login.php"><i class="fas fa-caret-right"></i>College Login</a></li>
                        <li><a href="<?php echo $base; ?>college/login.php"><i class="fas fa-caret-right"></i>ARC Center Login</a></li>
                        <li><a href="<?php echo $base; ?>faq/student-faq.php"><i class="fas fa-caret-right"></i>Student FAQ</a></li>
                        <li><a href="<?php echo $base; ?>faq/accreditation-faq.php"><i class="fas fa-caret-right"></i>Affiliation FAQ</a></li>
                        <li><a href="<?php echo $base; ?>noc/apply-detailed.php"><i class="fas fa-caret-right"></i>Apply NOC</a></li>
                    </ul>
                </div>

                <!-- COL 4: Map -->
                <div class="col-lg-4 col-md-6 footer-col" data-delay="300">
                    <h6 class="footer-col-title">Reach Us</h6>
                    <div class="footer-map-wrap">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3499.3!2d77.706!3d28.974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjjCsDU4JzI2LjQiTiA3N8KwNDInMjEuNiJF!5e0!3m2!1sen!2sin!4v1620000000000" width="100%" height="190" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                    <p class="mt-2 mb-3" style="font-size:12px;color:rgba(255,255,255,0.55);">
                        <i class="fas fa-map-pin me-1" style="color:#ffd700;"></i>
                        IBVTE, Meerut, Uttar Pradesh, India
                    </p>
                    <!-- Social icons -->
                    <div class="footer-social-row mt-3">
                        <a href="#" class="fsoc-btn" style="background:#1877f2;" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="fsoc-btn" style="background:#000;" title="X/Twitter"><i class="fab fa-x-twitter"></i></a>
                        <a href="#" class="fsoc-btn" style="background:#0a66c2;" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="fsoc-btn" style="background:#e1306c;" title="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="fsoc-btn" style="background:#25d366;" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                        <a href="#" class="fsoc-btn" style="background:#ff0000;" title="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>

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



            <hr style="border-color:rgba(255,215,0,0.2);margin-top:0;">
            <div class="text-center" style="font-size:12px;color:rgba(255,255,255,0.5);padding-bottom:14px;">
                &copy; <?php echo date('Y'); ?> Indian Board of Vocational and Technical Education (IBVTE) (New Delhi). All Rights Reserved. &nbsp;|&nbsp;
                <a href="<?php echo $base; ?>privacy-policy.php" style="color:#ffd700;text-decoration:none;">Privacy Policy</a> &nbsp;|&nbsp;
                <a href="<?php echo $base; ?>contact.php" style="color:#ffd700;text-decoration:none;">Contact Us</a>
            </div>
        </div>
    </footer>

    <!-- Fixed WhatsApp Floating Button -->
    <a href="https://wa.me/919627769817" class="whatsapp-float-btn" target="_blank" rel="noopener noreferrer" title="Chat on WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <style>
    /* ═══ Important Sites Border Effect ═══ */
    .imp-sites-wrapper { position: relative; }
    .imp-border-top, .imp-border-bottom {
        height: 4px;
        background: #e9ecef;
        overflow: hidden;
        position: relative;
    }
    .imp-border-line {
        display: block;
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--primary-color, #3b0b7c), #ffd700, #ff6b00, var(--primary-color, #3b0b7c));
        transition: width 1.4s cubic-bezier(.4,0,.2,1);
    }
    .imp-border-line.animated { width: 100%; }
    .imp-title { color: var(--primary-color, #3b0b7c); position: relative; display: inline-block; }
    .imp-title::after { content:''; display:block; height:3px; width:0; background:#ffd700; margin:4px auto 0; transition: width .8s ease; }
    .imp-title.title-animated::after { width: 80%; }

    /* ═══ Carousel sites ═══ */
    .site-circle-wrap { display:flex;flex-direction:column;align-items:center;text-decoration:none!important;padding:8px; }
    .site-circle { width:125px;height:125px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:12px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:2px solid transparent;transition:all .4s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;margin-bottom:7px; }
    .site-circle img { max-height:94px;max-width:94px;width:auto!important;object-fit:contain;transition:transform .4s ease; }
    .site-label { font-size:11px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.5px;transition:color .3s; }
    .site-circle-wrap:hover .site-circle { transform:scale(1.1) rotate(5deg);border-color:var(--primary-color,#3b0b7c);box-shadow:0 8px 25px rgba(59,11,124,.25); }
    .site-circle-wrap:hover .site-circle img { transform:scale(1.15); }
    .site-circle-wrap:hover .site-label { color:var(--primary-color,#3b0b7c); }
    .owl-theme .owl-dots .owl-dot span { width:10px;height:10px;background:#ccc;transition:all .3s; }
    .owl-theme .owl-dots .owl-dot.active span { width:28px;background:var(--primary-color,#3b0b7c); }

    /* ═══ Main Footer ═══ */
    .ibvte-footer-main {
        background: linear-gradient(160deg, #0d1b6e 0%, #112280 50%, #0d1b6e 100%);
        color: #fff;
        position: relative;
        overflow: visible; /* allow logo to float out */
        padding-bottom: 0;
    }
    .footer-glow-line {
        height: 4px;
        background: linear-gradient(90deg, transparent, #ffd700, #ff6b00, #ffd700, transparent);
        position: absolute;
        top: 0; left: 0; right: 0;
    }

    /* ── Logo Float-Out (popup hut effect) ── */
    .footer-logo-float {
        position: absolute;
        top: -70px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 20;
    }
    .footer-logo-ring {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid #ffd700;
        box-shadow: 0 -6px 30px rgba(0,0,0,0.35), 0 6px 20px rgba(255,215,0,0.3);
        animation: logoPulse 3s ease-in-out infinite;
        overflow: hidden;
        padding: 4px;
    }
    .footer-logo-img { width: 118px; height: 118px; object-fit: contain; border-radius: 50%; }
    .footer-logo-tagline {
        margin-top: 6px;
        font-size: 11px;
        font-weight: 700;
        color: #ffd700;
        letter-spacing: 1.5px;
        text-shadow: 0 1px 4px rgba(0,0,0,0.5);
        white-space: nowrap;
    }
    @keyframes logoPulse {
        0%,100% { box-shadow: 0 -6px 30px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,215,0,0.5); }
        50% { box-shadow: 0 -6px 30px rgba(0,0,0,0.35), 0 0 0 14px rgba(255,215,0,0); }
    }

    /* ── Footer columns ── */
    .footer-col { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
    .footer-col.visible { opacity: 1; transform: translateY(0); }
    .footer-col-title {
        font-size: 17px;
        font-weight: 800;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-bottom: 8px;
        border-bottom: 2px solid #ffd700;
        display: inline-block;
        margin-bottom: 14px;
    }
    .footer-org-name { font-size: 15px; color: #ffd700; font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
    .footer-contact-item { display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;font-size:14.5px;color:rgba(255,255,255,0.8); }
    .fci-icon { width:26px;height:26px;border-radius:50%;background:rgba(255,215,0,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#ffd700;font-size:11px; }

    .footer-link-list { list-style:none;padding:0;margin:0; }
    .footer-link-list li { margin-bottom:6px; }
    .footer-link-list li a { color:rgba(255,255,255,0.72);text-decoration:none;font-size:15.5px;display:flex;align-items:center;gap:7px;transition:color .2s, gap .2s; }
    .footer-link-list li a:hover { color:#ffd700;gap:12px; }
    .footer-link-list li a i { font-size:10px;color:#ffd700; }

    /* Social icons */
    .footer-social-row { display:flex;gap:6px;flex-wrap:wrap; }
    .fsoc-btn { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;text-decoration:none;transition:transform .3s, box-shadow .3s; }
    .fsoc-btn:hover { transform:translateY(-4px) scale(1.15);box-shadow:0 6px 20px rgba(0,0,0,0.4);color:#fff; }

    /* Map */
    .footer-map-wrap { border-radius:8px;overflow:hidden;border:2px solid rgba(255,215,0,0.35);box-shadow:0 4px 20px rgba(0,0,0,0.3); }



    @media (max-width: 767px) {
        .footer-logo-float { top: -55px; }
        .footer-logo-ring { width: 100px;height:100px; }
        .footer-logo-img { width:90px;height:90px; }
        .ibvte-footer-main .container { padding-top: 70px; }
        .footer-stats-row { gap: 20px; }
    }

    /* Fix footer column overlap on smaller/medium screens */
    .footer-col {
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }
    .footer-col .footer-org-name {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .footer-contact-item span {
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }
    @media (max-width: 1200px) {
        .footer-col .footer-org-name { font-size: 10.5px !important; }
        .footer-contact-item { font-size: 13px !important; }
        .footer-link-list li a { font-size: 13.5px !important; }
    }
    @media (max-width: 991px) {
        .footer-col .footer-org-name { font-size: 11px !important; }
    }

    /* Fixed WhatsApp Floating Button CSS */
    .whatsapp-float-btn {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 30px;
        right: 30px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 50%;
        text-align: center;
        font-size: 36px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s ease;
        animation: waPulse 2s infinite;
    }
    .whatsapp-float-btn:hover {
        background-color: #128c7e;
        color: #FFF;
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }
    @keyframes waPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
    }
    </style>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- AOS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>AOS.init({duration:800,once:true});</script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- OwlCarousel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
    $(document).ready(function(){

        /* ── Owl Carousel ── */
        $("#importantSitesCarousel").owlCarousel({
            loop:true, margin:20, nav:false, dots:true,
            autoplay:true, autoplayTimeout:2500, autoplayHoverPause:true, smartSpeed:900,
            responsive:{ 0:{items:2}, 600:{items:4}, 1000:{items:6} }
        });

        /* ── Animated border lines on Important Sites ── */
        function checkImpSites(){
            var top = $("#impSitesSection").offset().top;
            var scroll = $(window).scrollTop() + $(window).height();
            if(scroll > top + 40){
                $(".imp-border-line").addClass("animated");
                $(".imp-title").addClass("title-animated");
                $(window).off("scroll.impSites");
            }
        }
        $(window).on("scroll.impSites", checkImpSites);
        checkImpSites();

        /* ── Footer columns slide-up on scroll ── */
        function checkFooterCols(){
            var wBottom = $(window).scrollTop() + $(window).height();
            $(".footer-col").each(function(){
                var delay = parseInt($(this).data("delay")) || 0;
                var elTop = $(this).offset().top;
                if(wBottom > elTop + 30){
                    var $el = $(this);
                    setTimeout(function(){ $el.addClass("visible"); }, delay);
                }
            });
        }
        $(window).on("scroll", checkFooterCols);
        checkFooterCols();

        /* ── Logo float bounce-in on footer reveal ── */
        $(window).on("scroll", function(){
            var footerTop = $("#mainFooter").offset().top;
            var wBottom = $(window).scrollTop() + $(window).height();
            if(wBottom > footerTop){
                $("#floatLogo").css({ animation: "logoEntry .7s ease forwards" });
                $(window).off("scroll.logoEntry");
            }
        });



        /* ── Social btn pulse on hover (jQuery) ── */
        $(".fsoc-btn").on("mouseenter", function(){
            $(this).stop(true).animate({ marginTop: "-4px" }, 180);
        }).on("mouseleave", function(){
            $(this).stop(true).animate({ marginTop: "0px" }, 180);
        });

        /* ── Footer link hover chain effect ── */
        $(".footer-link-list li").each(function(i){
            $(this).delay(i * 60).queue(function(next){
                $(this).css("opacity","1"); next();
            });
        });

    });

    /* Logo entry keyframe (added via JS to avoid CSS specificity issues) */
    var style = document.createElement("style");
    style.innerHTML = "@keyframes logoEntry { from { transform: scale(0.5) translateY(-20px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }";
    document.head.appendChild(style);
    </script>

    <script src="<?php echo $base; ?>assets/js/main.js?v=<?php echo file_exists($_SERVER['DOCUMENT_ROOT'] . $base . 'assets/js/main.js') ? filemtime($_SERVER['DOCUMENT_ROOT'] . $base . 'assets/js/main.js') : time(); ?>"></script>
</body>
</html>
