:root {
            --brochure-bg: #080808;
            --brochure-accent: #ff8200;
            --brochure-surface: rgba(255, 255, 255, 0.06);
            --site-nav-height: 118px;
        }

        body.brochure-page {
            margin: 0;
            min-height: 100vh;
            overflow-x: hidden;
            background:
                radial-gradient(circle at top, rgba(255, 130, 0, 0.22), transparent 32%),
                linear-gradient(180deg, #121212 0%, #080808 58%, #030303 100%);
            color: #ffffff;
            font-family: 'Poppins', sans-serif;
        }

        .brochure-noise {
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.03;
            z-index: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
        }

        .brochure-shell {
            position: relative;
            z-index: 1;
            width: min(1100px, calc(100% - 2rem));
            margin: 0 auto;
            padding-top: calc(var(--site-nav-height) + 2.5rem);
            padding-bottom: 5rem;
        }

        .brochure-hero {
            max-width: 42rem;
            margin-bottom: 2.5rem;
        }

        .brochure-eyebrow {
            margin: 0 0 0.75rem;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(255, 196, 132, 0.86);
        }

        .brochure-title {
            margin: 0;
            font-size: clamp(2.3rem, 6vw, 4.7rem);
            line-height: 0.95;
            font-weight: 800;
        }

        .brochure-copy {
            margin: 1rem 0 0;
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
        }

        .brochure-stack {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .brochure-card {
            position: relative;
            display: block;
            width: 100%;
            padding: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.8rem;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
                rgba(14, 14, 14, 0.9);
            box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
            text-align: left;
            cursor: zoom-in;
            transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
        }

        .brochure-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 176, 96, 0.45);
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
        }

        .brochure-image {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 1.2rem;
            background: #111111;
        }

        .brochure-lightbox {
            position: fixed;
            inset: 0;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease, visibility 0.22s ease;
        }

        .brochure-lightbox.hidden {
            display: none;
        }

        .brochure-lightbox.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .brochure-lightbox__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(14px);
            opacity: 0;
            transition: opacity 0.22s ease;
        }

        .brochure-lightbox__dialog {
            position: relative;
            z-index: 1;
            width: min(1200px, 100%);
            max-height: calc(100vh - 2rem);
            padding: 1rem;
            border-radius: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(10, 10, 10, 0.96);
            box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
            transform: scale(0.965);
            opacity: 0;
            transition: transform 0.24s ease, opacity 0.24s ease;
        }

        .brochure-lightbox__title {
            margin: 0 0 0.85rem;
            padding-right: 3rem;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 214, 176, 0.86);
        }

        .brochure-lightbox__close {
            position: absolute;
            top: 0.85rem;
            right: 0.85rem;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.8rem;
            height: 2.8rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            cursor: pointer;
        }

        .brochure-lightbox__image {
            display: block;
            width: 100%;
            max-height: calc(100vh - 7rem);
            margin: 0 auto;
            object-fit: contain;
            border-radius: 1rem;
            background: #111111;
            transform: translateZ(0);
            will-change: transform, opacity;
        }

        .brochure-lightbox.is-open .brochure-lightbox__backdrop {
            opacity: 1;
        }

        .brochure-lightbox.is-open .brochure-lightbox__dialog {
            transform: scale(1);
            opacity: 1;
        }

        body.brochure-lightbox-open {
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .brochure-shell {
                width: min(100% - 1rem, 1100px);
                padding-top: calc(var(--site-nav-height) + 1.5rem);
                padding-bottom: 3rem;
            }

            .brochure-card {
                padding: 0.65rem;
                border-radius: 1.2rem;
            }

            .brochure-lightbox__dialog {
                padding: 0.75rem;
                border-radius: 1.1rem;
            }

            .brochure-lightbox__image {
                max-height: calc(100vh - 6rem);
            }
        }
*** Add File: d:\E drive\College\Pranathi\static\js\homepage\brochure.js
        const brochureLightbox = document.getElementById('brochureLightbox');
        const brochureLightboxImage = document.getElementById('brochureLightboxImage');
        const brochureLightboxClose = document.getElementById('brochureLightboxClose');
        const brochureTriggers = document.querySelectorAll('[data-brochure-trigger]');
        let closeTimerId = 0;

        function preloadBrochureImages() {
            brochureTriggers.forEach((trigger) => {
                const imageSrc = trigger.dataset.imageSrc;
                if (!imageSrc) {
                    return;
                }

                const preloadImage = new Image();
                preloadImage.decoding = 'async';
                preloadImage.src = imageSrc;

                if (typeof preloadImage.decode === 'function') {
                    preloadImage.decode().catch(() => undefined);
                }
            });
        }

        function openBrochureLightbox(imageSrc, imageAlt) {
            if (!brochureLightbox || !brochureLightboxImage) {
                return;
            }

            if (closeTimerId) {
                window.clearTimeout(closeTimerId);
                closeTimerId = 0;
            }

            brochureLightboxImage.src = imageSrc;
            brochureLightboxImage.alt = imageAlt || 'Brochure preview';
            brochureLightbox.classList.remove('hidden');
            brochureLightbox.setAttribute('aria-hidden', 'false');
            document.body.classList.add('brochure-lightbox-open');
            window.requestAnimationFrame(() => {
                brochureLightbox.classList.add('is-open');
            });
        }

        function closeBrochureLightbox() {
            if (!brochureLightbox || !brochureLightboxImage) {
                return;
            }

            brochureLightbox.classList.remove('is-open');
            brochureLightbox.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('brochure-lightbox-open');

            closeTimerId = window.setTimeout(() => {
                brochureLightbox.classList.add('hidden');
                closeTimerId = 0;
            }, 240);
        }

        preloadBrochureImages();

        brochureTriggers.forEach((trigger) => {
            trigger.addEventListener('click', () => {
                openBrochureLightbox(trigger.dataset.imageSrc, trigger.dataset.imageAlt);
            });
        });

        if (brochureLightbox) {
            brochureLightbox.addEventListener('click', (event) => {
                if (event.target instanceof HTMLElement && event.target.dataset.brochureClose === 'true') {
                    closeBrochureLightbox();
                }
            });
        }

        if (brochureLightboxClose) {
            brochureLightboxClose.addEventListener('click', closeBrochureLightbox);
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && brochureLightbox && !brochureLightbox.classList.contains('hidden')) {
                closeBrochureLightbox();
            }
        });
*** Delete File: d:\E drive\College\Pranathi\static\js\homepage\brochure_viewer.js
*** Delete File: d:\E drive\College\Pranathi\templates\homepage\brochure_viewer.html