<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 flex-shrink-0 flex-grow-0" data-vanilla-module="StickyHeader">
    <div class="bg-white py-6 relative">
        <div class="container">
            <div class="flex flex-row justify-between items-stretch">
                <a href="./index.html" class="flex items-center w-24 lg:w-auto">
                    <img src="/front-end/images/logo.svg" class="" alt="British Institute of Radiology" width="173" height="72" />
                </a>
                <div class="flex flex-col gap-4 justify-center">
                    <div class="justify-end gap-6 hidden lg:flex">
                        <ul class="flex justify-end space-x-10 items-center">

                            <li class="relative">
                                <a class="text-bravo font-heading flex items-center font-medium text-3xl lg:text-base hover:underline" href="./join-us.html">

                                    Join us
                                </a>
                            </li>

                        </ul>
                        <div class="items-center hidden lg:flex gap-6">
                            <div class="flex items-center">
                                <button class="block w-5 h-5 lg:w-6 lg:h-6" data-micromodal-trigger="search-modal">
                                    <span class="sr-only">
                                        Open Search Modal
                                    </span>
                                    <svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-search"></use>
                                    </svg>
                                </button>
                            </div>
                            <a href="" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
                                <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                                    Login
                                </div>
                                <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                                    <svg class="w-full h-full fill-current">
                                        <use href="/front-end/sprite.svg#icon-chevron"></use>
                                    </svg>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="flex items-center lg:items-stretch lg:justify-end lg:flex-1 lg:pl-4">

                        <div class="items-center flex lg:hidden mr-5">
                            <div class="flex items-center gap-5">
                                <button>
                                    <span class="sr-only">
                                        login
                                    </span>
                                    <div class="h-5 w-5">
                                        <svg class="w-full h-full fill-current text-bravo" aria-hidden="true">
                                            <use href="/front-end/sprite.svg#icon-user"></use>
                                        </svg>
                                    </div>
                                </button>
                                <button class="block w-5 h-5 lg:w-6 lg:h-6" data-micromodal-trigger="search-modal">
                                    <span class="sr-only">
                                        Open Search Modal
                                    </span>
                                    <svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300" aria-hidden="true">
                                        <use href="/front-end/sprite.svg#icon-search"></use>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <button aria-controls="menu" aria-expanded="false" data-vanilla-module="MobileMenuToggle" class="w-8 h-6 block relative transform lg:hidden text-bravo-900 group" data-state="off">
                            <span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=off]:-translate-y-2 group-data-[state=on]:rotate-45"></span>
                            <span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current  transform transition duration-500 ease-in-out group-data-[state=on]:opacity-0"></span>
                            <span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current transform  transition duration-500 ease-in-out group-data-[state=off]:translate-y-2 group-data-[state=on]:-rotate-45"></span>
                            <span class="sr-only">Toggle Menu</span>
                        </button>

                        <nav id="menu" data-vanilla-module="Menu" class="items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 bg-white w-full lg:h-auto lg:flex lg:bg-transparent lg:static lg:p-0 lg:left-auto lg:w-auto">
                            <div class="overflow-y-auto lg:overflow-visible h-full js-menu-overlay mt-8 lg:mt-0">
                                <ul class="overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-center lg:overflow-visible">

                                    <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
                                        <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./about-us.html">
                                            About BIR

                                            <div class="h-3 w-3 hidden lg:block">
                                                <svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                </svg>
                                            </div>

                                        </a>

                                        <button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-1" aria-haspopup="true">
                                            <span class="sr-only">
                                                Open Second Level
                                            </span>
                                            <div class="h-6 w-6">
                                                <svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-arrow"></use>
                                                </svg>
                                            </div>
                                        </button>

                                        <div id="second-level-menu-about-bir" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
                                            <div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
                                                <div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
                                                    <div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
                                                        <button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-about-bir" aria-expanded="false" aria-controls="second-level-menu-about-bir">
                                                            <div class="w-4 h-4 mr-4">
                                                                <svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
                                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                                </svg>
                                                            </div>
                                                            <span class="font-medium text-3xl text-bravo-900 lg:hidden">
                                                                About BIR
                                                            </span>
                                                        </button>
                                                        <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">

                                                            <div class="lg:col-span-3 mb-5">
                                                                <ul>
                                                                    <li>
                                                                        <h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
                                                                            <span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">About BIR</span>
                                                                        </h2>
                                                                        <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                                                                            <div class="lg:flex lg:space-x-8">

                                                                                <ul class="lg:flex-1">

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">For patients</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Prizes, awards and bursaries</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Special interest groups</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">World Partner Network</a>
                                                                                    </li>

                                                                                </ul>

                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </li>

                                    <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
                                        <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./.html">
                                            Membership

                                            <div class="h-3 w-3 hidden lg:block">
                                                <svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                </svg>
                                            </div>

                                        </a>

                                        <button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-2" aria-haspopup="true">
                                            <span class="sr-only">
                                                Open Second Level
                                            </span>
                                            <div class="h-6 w-6">
                                                <svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-arrow"></use>
                                                </svg>
                                            </div>
                                        </button>

                                        <div id="second-level-menu-membership" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
                                            <div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
                                                <div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
                                                    <div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
                                                        <button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-membership" aria-expanded="false" aria-controls="second-level-menu-membership">
                                                            <div class="w-4 h-4 mr-4">
                                                                <svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
                                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                                </svg>
                                                            </div>
                                                            <span class="font-medium text-3xl text-bravo-900 lg:hidden">
                                                                Membership
                                                            </span>
                                                        </button>
                                                        <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">

                                                            <div class="lg:col-span-3 mb-5">
                                                                <ul>
                                                                    <li>
                                                                        <h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
                                                                            <span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Membership</span>
                                                                        </h2>
                                                                        <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                                                                            <div class="lg:flex lg:space-x-8">

                                                                                <ul class="lg:flex-1">

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./join-us.html">Join us</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Benefits</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Corporate membership</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Meet our team</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">FAQs</a>
                                                                                    </li>

                                                                                </ul>

                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </li>

                                    <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
                                        <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./news.html">
                                            Publishing

                                            <div class="h-3 w-3 hidden lg:block">
                                                <svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                </svg>
                                            </div>

                                        </a>

                                        <button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-3" aria-haspopup="true">
                                            <span class="sr-only">
                                                Open Second Level
                                            </span>
                                            <div class="h-6 w-6">
                                                <svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-arrow"></use>
                                                </svg>
                                            </div>
                                        </button>

                                        <div id="second-level-menu-publishing" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
                                            <div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
                                                <div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
                                                    <div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
                                                        <button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-publishing" aria-expanded="false" aria-controls="second-level-menu-publishing">
                                                            <div class="w-4 h-4 mr-4">
                                                                <svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
                                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                                </svg>
                                                            </div>
                                                            <span class="font-medium text-3xl text-bravo-900 lg:hidden">
                                                                Publishing
                                                            </span>
                                                        </button>
                                                        <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">

                                                            <div class="lg:col-span-3 mb-5">
                                                                <ul>
                                                                    <li>
                                                                        <h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
                                                                            <span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Publishing</span>
                                                                        </h2>
                                                                        <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                                                                            <div class="lg:flex lg:space-x-8">

                                                                                <ul class="lg:flex-1">

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Journals</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Special publications</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Podcasts</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Authors/Submit</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Open access</a>
                                                                                    </li>

                                                                                </ul>

                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </li>

                                    <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
                                        <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./education-&amp;-events.html">
                                            Education &amp; events

                                            <div class="h-3 w-3 hidden lg:block">
                                                <svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                </svg>
                                            </div>

                                        </a>

                                        <button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-4" aria-haspopup="true">
                                            <span class="sr-only">
                                                Open Second Level
                                            </span>
                                            <div class="h-6 w-6">
                                                <svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
                                                    <use href="/front-end/sprite.svg#icon-arrow"></use>
                                                </svg>
                                            </div>
                                        </button>

                                        <div id="second-level-menu-education-&amp;-events" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
                                            <div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
                                                <div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
                                                    <div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
                                                        <button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-education-&amp;-events" aria-expanded="false" aria-controls="second-level-menu-education-&amp;-events">
                                                            <div class="w-4 h-4 mr-4">
                                                                <svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
                                                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                                                </svg>
                                                            </div>
                                                            <span class="font-medium text-3xl text-bravo-900 lg:hidden">
                                                                Education &amp; events
                                                            </span>
                                                        </button>
                                                        <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">

                                                            <div class="lg:col-span-3 mb-5">
                                                                <ul>
                                                                    <li>
                                                                        <h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
                                                                            <span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Education &amp; events</span>
                                                                        </h2>
                                                                        <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                                                                            <div class="lg:flex lg:space-x-8">

                                                                                <ul class="lg:flex-1">

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Upcoming events</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">BIR video courses</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">AI Essentials webinar series</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">PET- CT webinar series</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Therapy webinar series</a>
                                                                                    </li>

                                                                                    <li class="lg:mb-2">
                                                                                        <a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Webinar and virtual events FAQs</a>
                                                                                    </li>

                                                                                </ul>

                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

                                                                <a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
                                                                    <div class="mb-4">

                                                                        <picture class="block overflow-hidden rounded-xl w-full">

                                                                            <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">

                                                                        </picture>
                                                                    </div>
                                                                    <div>
                                                                        <h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
                                                                        <p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </li>

                                    <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
                                        <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./news.html">
                                            News

                                        </a>

                                    </li>

                                </ul>
                                <div class="lg:hidden px-6">
                                    <ul class="pt-5 mt-8 border-t border-bravo-200">

                                        <li>
                                            <a class="flex my-4 text-1xl  text-bravo-900 font-heading font-medium" href="./join-us.html">
                                                Join us
                                                <div class="w-6 h-6 ml-3">
                                                    <svg class="w-full h-full fill-current text-alpha-700" aria-hidden="true">
                                                        <use href="/front-end/sprite.svg#"></use>
                                                    </svg>
                                                </div>
                                            </a>
                                        </li>

                                    </ul>
                                    <a href="" class="sm:max-w-64 flex justify-center leading-none items-center relative z-0 font-heading font-medium text-lg align-middle py-3 px-8 no-underline rounded-lg transition duration-500 ease-in-out group bg-bravo-900 text-white border-2 border-bravo-900">
                                        <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                                            Login
                                        </div>
                                        <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                                            <svg class="w-full h-full fill-current">
                                                <use href="/front-end/sprite.svg#icon-chevron"></use>
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" aria-hidden="true" data-vanilla-module="Modal">
    <div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
        <div class="js-model-content w-full md:max-w-screen-md m-auto" role="dialog" aria-modal="true">
            <div class="flex justify-end pb-4">
                <button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
                    <svg class="fill-current w-5 h-5 text-white group-hover:text-bravo-900 pointer-events-none">
                        <use href="/front-end/sprite.svg#icon-close"></use>
                    </svg>
                    <span class="sr-only">Close Search Modal</span>
                </button>
            </div>
            <div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-2xl" role="dialog" aria-modal="true">
                <main class="w-full">
                    <form action="./search-results.html" class="pb-2">
                        <label class="block text-center text-4xl mb-2 text-bravo-900" for="modalSearchTerm">Search</label>
                        <div class="flex justify-center w-full items-stretch">
                            <div class="flex-1 mr-4">
                                <input class="block w-full rounded-lg border-grey-400 shadow-sm default-focus focus-within:ring-black" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
                            </div>
                            <button>
                                <span class="sr-only">Search site</span>
                                <div class="w-6 h-6">
                                    <svg class="fill-current w-full h-full text-bravo-900 transition-colors ease-in-out duration-300 hover:text-bravo-900">
                                        <use href="/front-end/sprite.svg#icon-search"></use>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </form>
                </main>
            </div>
        </div>
    </div>
</div>
<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 flex-shrink-0 flex-grow-0" data-vanilla-module="StickyHeader">
    <div class="bg-white py-6 relative">
        <div class="container">
            <div class="flex flex-row justify-between items-stretch">
                {% render "@logo" %}
                <div class="flex flex-col gap-4 justify-center">
                    <div class="justify-end gap-6 hidden lg:flex">
                        <ul class="flex justify-end space-x-10 items-center">
                            {% for item in quickLinks %}
                                <li class="relative">
                                    {% render "@icon-link", { name: item.name, url: item.url, icon: item.icon, colour: 'text-bravo' } %}
                                </li>
                            {% endfor %}
                        </ul>
                        <div class="items-center hidden lg:flex gap-6">
                            <div class="flex items-center">
                                {% render "@search-button" %}
                            </div>
                            <a href="" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
                                <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                                    Login
                                </div>
                                <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                                    {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current' } %}
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="flex items-center lg:items-stretch lg:justify-end lg:flex-1 lg:pl-4">
                        {% render "@navigation", { pageTitle: pageTitle, navItems: navItems, quickLinks: quickLinks, dropDownButtons: dropDownButtons } %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

{% render "@search-modal" %}
{
  "siteName": "BIR Pattern Library",
  "quickLinks": [
    {
      "name": "Join us",
      "url": "./join-us"
    }
  ],
  "navItems": [
    {
      "menu_item": "About BIR",
      "url": "./about-us",
      "megaList": [
        {
          "component": "mega-secondary-list",
          "data": {
            "colHeading": "About BIR",
            "columns": [
              {
                "list": [
                  {
                    "url": "./index",
                    "name": "For patients"
                  },
                  {
                    "url": "./index",
                    "name": "Prizes, awards and bursaries"
                  },
                  {
                    "url": "./index",
                    "name": "Special interest groups"
                  },
                  {
                    "url": "./index",
                    "name": "World Partner Network"
                  }
                ]
              }
            ]
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./join-us",
            "heading": "Join us",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example1@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example1@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Benefits",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example4@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example4@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Get involved",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example6@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example6@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        }
      ]
    },
    {
      "menu_item": "Membership",
      "url": "./",
      "megaList": [
        {
          "component": "mega-secondary-list",
          "data": {
            "colHeading": "Membership",
            "columns": [
              {
                "list": [
                  {
                    "url": "./join-us",
                    "name": "Join us"
                  },
                  {
                    "url": "./index",
                    "name": "Benefits"
                  },
                  {
                    "url": "./index",
                    "name": "Corporate membership"
                  },
                  {
                    "url": "./index",
                    "name": "Meet our team"
                  },
                  {
                    "url": "./index",
                    "name": "FAQs"
                  }
                ]
              }
            ]
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./join-us",
            "heading": "Join us",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example1@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example1@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Benefits",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example4@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example4@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Get involved",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example6@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example6@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        }
      ]
    },
    {
      "menu_item": "Publishing",
      "url": "./news",
      "megaList": [
        {
          "component": "mega-secondary-list",
          "data": {
            "colHeading": "Publishing",
            "columns": [
              {
                "list": [
                  {
                    "url": "./index",
                    "name": "Journals"
                  },
                  {
                    "url": "./index",
                    "name": "Special publications"
                  },
                  {
                    "url": "./index",
                    "name": "Podcasts"
                  },
                  {
                    "url": "./index",
                    "name": "Authors/Submit"
                  },
                  {
                    "url": "./index",
                    "name": "Open access"
                  }
                ]
              }
            ]
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./join-us",
            "heading": "Join us",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example1@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example1@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Benefits",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example4@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example4@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Get involved",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example6@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example6@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        }
      ]
    },
    {
      "menu_item": "Education & events",
      "url": "./education-&-events",
      "megaList": [
        {
          "component": "mega-secondary-list",
          "data": {
            "colHeading": "Education & events",
            "columns": [
              {
                "list": [
                  {
                    "url": "./index",
                    "name": "Upcoming events"
                  },
                  {
                    "url": "./index",
                    "name": "BIR video courses"
                  },
                  {
                    "url": "./index",
                    "name": "AI Essentials webinar series"
                  },
                  {
                    "url": "./index",
                    "name": "PET- CT webinar series"
                  },
                  {
                    "url": "./index",
                    "name": "Therapy webinar series"
                  },
                  {
                    "url": "./index",
                    "name": "Webinar and virtual events FAQs"
                  }
                ]
              }
            ]
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./join-us",
            "heading": "Join us",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example1@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example1@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Benefits",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example4@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example4@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        },
        {
          "component": "mega-card",
          "data": {
            "colHeading": "",
            "url": "./index",
            "heading": "Get involved",
            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
            "image": {
              "src": "images/test-imagery/example6@16-9@1200w.jpg",
              "srcSet": [
                {
                  "url": "images/test-imagery/example6@16-9@1200w.jpg",
                  "size": "1200"
                }
              ]
            }
          }
        }
      ]
    },
    {
      "menu_item": "News",
      "url": "./news"
    }
  ]
}

No notes defined.