@php
use Illuminate\Support\Str;
@endphp
<div>
    <div class="w-full hidden lg:block  lg:fixed lg:top-0  " x-data="{ open: true }" style="z-index: 99;">
        <div x-show="open" class="w-full flex items-center text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 py-2 h-70">
            <div class="w-3/4 mx-auto">
                <div class="grid grid-cols-3 px-4 lg:px-0 mx-auto md:items-center md:justify-between md:flex-row " x-data="{ open: false }">
                    <figure>
                        <a href="{{ route('home') }}">
                            <img src="/img/logo.svg" alt="Logo">
                        </a>
                    </figure>
                    <nav :class="{'flex': open, 'hidden': !open}" class="w-full flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-center place-items-center md:flex-row">

                        <!-- Vennx -->
                        <div class="" @click.away="open = false" x-data="{ open: false }">
                            <div @mouseenter="open = true" @mouseleave="open = false" class="flex flex-row  
                                items-center w-full px-5 py-3 mt-2 text-base font-medium bg-transparent rounded-lg md:w-auto 
                                md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200
                                focus:bg-gray-200 focus:outline-none focus:shadow-outline cursor-pointer relative ">
                                <span class=" font-medium">Vennx</span>
                            </div>
                            <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class=" w-3/4 absolute right-1/2 translate-x-1/2 pt-4 origin-top-right rounded-md shadow-lg z-50" @mouseenter="open = true" @mouseleave="open = false">
                                <nav class="  bg-preto_36 rounded-md shadow dark-mode:bg-gray-700 w-full grid grid-cols-4 text-white 2xl:min-h-96 mt-2">
                                    <ul class=" h-fit bg-black rounded-l-md py-4 px-3 2xl:min-h-96 text-xs xl:text-sm ">
                                        <li class="text-azul_menu_255 font-bold mb-2">
                                            <p>Novidades</p>
                                        </li>

                                        @foreach($blogs as $blog)
                                        <a href="{{ route('blog.detalhes', ['slug' => $blog->slug, 'ano' => ($blog->ano), 'mes' => ($blog->mes), 'dia' => ($blog->dia)]) }}">
                                            <ul class=" mt-6">
                                                <li class="text-white font-bold  ">{{$blog->tema}}</li>
                                                <li class="text-white text-opacity-70 font-medium text-sm pt-2">{{$blog->titulo_novidade}}</li>
                                            </ul>
                                        </a>
                                       
                                        @endforeach
                                    </ul>
                                    <ul class="grid gap-4 h-fit py-4 px-3 text-xs xl:text-sm">
                                        <li class="text-white font-bold">
                                            <a href="{{route ('quem-somos')}}">Sobre a Vennx</a>
                                        </li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('quem-somos')}}">Quem Somos</a></li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('quem-somos')}}#nossa_missao">Nossa Missão</a></li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('quem-somos')}}#valores">Valores</a></li>
                                    </ul>
                                    <ul class="grid gap-4 h-fit py-4 px-3 text-xs xl:text-sm">
                                        <li class="text-white font-bold">
                                            <a href="{{route ('carreira')}}">Carreira</a>
                                        </li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('carreira')}}#vagas_abertas">Junte-se a nós</a></li>
                                    </ul>
                                    <ul class="grid gap-4 h-fit py-4 px-3 text-xs xl:text-sm ">
                                        <li class="font-bold">
                                            <a href="{{route ('contato')}}">Contato</a>
                                        </li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('denuncia')}}">Denúncia</a></li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('requerimento')}}">Requerimento de dados</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <!-- Soluções -->
                        <div class="" @click.away="open = false" x-data="{ open: false }">
                            <div @mouseenter="open = true" @mouseleave="open = false" class="flex flex-row items-center w-full px-5 py-3 mt-2 text-base font-medium bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline cursor-pointer relative">
                                <span class=" font-medium">Soluções</span>
                            </div>
                            <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-3/4 absolute right-1/2 translate-x-1/2 pt-4 origin-top-right rounded-md shadow-lg z-50" @mouseenter="open = true" @mouseleave="open = false ">
                                <nav class="2xl:min-h-96 py-4 px-3 bg-preto_36 rounded-md shadow dark-mode:bg-gray-700 w-full grid grid-cols-4 text-white mt-2 gap-4">
                                    <ul class="grid gap-4 h-fit text-xs xl:text-sm ">
                                        <li class="text-white font-bold">
                                            <a href="{{route ('consultoria-grc')}}">GRC e Operações</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-0" onclick="adjustScroll(0)">Avaliação e Implementação de Riscos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-1">Desenvolvimento de Controles Internos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-3">Auditoria Interna e Investigação Forense</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-4">Lei Sarbanes-Oxley </a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-6">Auditoria Interna e Controles Internos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-7">Gerenciamento de Riscos Corporativos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-8">GCN e Gestão de Crises</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-grc')}}#artigo-10">Monitoramento de Riscos</a>
                                        </li>
                                    </ul>
                                    <ul class="grid gap-4 h-fit text-xs xl:text-sm">
                                        <li class="text-white font-bold">
                                            <a href="{{route ('consultoria-estrategia')}}">Consultoria Empresarial</a>
                                        </li>
                                        <li class="text-white text-opacity-70"><a href="{{route ('consultoria-estrategia')}}#artigo-0">Estratégia, Digitalização e Operações</a></li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-estrategia')}}#artigo-0">Mapeamento de Processos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-estrategia')}}#artigo-0">Gestão de Acessos</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-estrategia')}}#artigo-0">Auditoria Forense</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-estrategia')}}#artigo-0">Auditoria SOX</a>
                                        </li>
                                    </ul>

                                    <ul class="grid gap-4 h-fit text-xs xl:text-sm">
                                        <li class="font-bold">
                                            <a href="{{route ('consultoria-cyber')}}">Cyber, Privacidade e TI</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-cyber')}}#artigo-0">LGPD e correlatas globais</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-cyber')}}#artigo-1">Implementação de IDM</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-cyber')}}#artigo-3">Governança de TI</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{route ('consultoria-cyber')}}#artigo-4">CyberSecurity e Testes de Intrusão e Infra</a>
                                        </li>
                                    </ul>

                                    <ul class="grid gap-4 h-fit text-xs xl:text-sm">
                                        <!-- Tecnologia vennx / todas tecnologias -->
                                        <li class="text-white font-bold">
                                            <a href="{{ route('tecnologia') }}" rel="noopener noreferrer">Tecnologia Vennx</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{ route('tecnologia') }}" >VX - IA aplicada ao GRC</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{ route('tecnologia') }}" >VAR - Vennx Acess Radar</a>
                                        </li>
                                        <!-- <li class="text-white text-opacity-70">
                                            <a href="{{ route('vx-vendas') }}" target="_blank" rel="noopener noreferrer">VX - IA aplicada ao GRC</a>
                                        </li>
                                        <li class="text-white text-opacity-70">
                                            <a href="{{ route('lp-var') }}" target="_blank" rel="noopener noreferrer">VAR - Vennx Acess Radar</a>
                                        </li> -->
                                        <li class="invisible">.</li>
                                        <li class="text-white font-bold">
                                            <a href="{{ route('consultoria') }}" class="text-azul_menu_255" rel="noopener noreferrer">Todas as Soluções</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <!-- Grid Dropdown -->
                        <div class="" @click.away="open = false" x-data="{ open: false }">
                            <div @mouseenter="open = true" @mouseleave="open = false" class="flex flex-row items-center w-full px-5 py-3 mt-2 text-base font-medium bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline cursor-pointer relative">
                                <span class=" font-medium">Conteúdos</span>
                            </div>
                            <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-3/4 absolute right-1/2 translate-x-1/2 pt-4 origin-top-right rounded-md shadow-lg z-50" @mouseenter="open = true" @mouseleave="open = false">
                                <nav class=" bg-preto_36 rounded-md shadow dark-mode:bg-gray-700 w-full grid grid-cols-4 text-white  mt-2 2xl:min-h-96">
                                    <ul class="h-fit bg-black rounded-l-md py-4 px-3 2xl:min-h-96 text-xs xl:text-sm">
                                        <li class="text-azul_menu_255 font-bold mb-2">
                                            <p>Novidades</p>
                                        </li>
                                        @foreach($blogs as $blog)
                                        <a href="{{ route('blog.detalhes', ['slug' => $blog->slug, 'ano' => ($blog->ano), 'mes' => ($blog->mes), 'dia' => ($blog->dia)]) }}">
                                            <ul class=" mt-6">
                                                <li class="text-white font-bold ">{{$blog->tema}}</li>
                                                <li class="text-white text-opacity-70 font-medium text-sm pt-2">{{$blog->titulo_novidade}}</li>
                                            </ul>
                                        </a>
                                      
                                        @endforeach
                                    </ul>
                                    <ul class="grid gap-4 h-fit py-4 px-3 text-xs xl:text-sm">
                                        
                                        <li class="text-white font-bold"><a href="{{route ('blog')}}">Blog Vennx</a></li>
                                        <li class="text-white font-bold invisible"><a href="{{route ('voz-especialista')}}">Voz do Especialista</a></li>

                                        <li class="text-white text-opacity-70 invisible">E-books e guias</li>
                                    </ul>

                                </nav>
                            </div>
                        </div>
                    </nav>
                    <div class="grid justify-end">
                        <a href="{{route('contato')}}" rel="noopener noreferrer" class=" min-w-32 grid place-items-center px-6 py-3 bg-gradient-to-r from-azul_238 to-azul_240 rounded-xl text-white font-semibold text-sm hover:to-azul_101  transition-all duration-300 ease-in-out">
                            Contato
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <!-- MOBILE -->
    <div x-show="open" class="flex flex-col w-full lg:hidden ">
        <div @click.away="open = false" class="flex flex-col flex-shrink-0 w-full text-gray-700 bg-white lg:w-64 dark-mode:text-gray-200 dark-mode:bg-gray-800" x-data="{ open: false }">
            <div class="flex flex-row items-center justify-between flex-shrink-0 px-8 py-4">
                <a href="{{route ('home')}}" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"><img src="/img/logo.svg" alt=""></a>
                <button class="rounded-lg lg:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
                        <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                        <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <nav :class="{'block': open, 'hidden': !open}" class="flex-grow px-4 pb-4 lg:block lg:pb-0 lg:overflow-y-auto bg-preto_10">
                <div @click.away="open = false" class="relative" x-data="{ open: false }">
                    <button @click="open = !open" class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                        <span class=" font-medium">Vennx</span>
                        <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class=" w-full mt-2 origin-top-right rounded-md shadow-lg">
                        <nav class="px-2 py-2 rounded-t-md relative z-50 bg-preto_10 border-b border-white ">
                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route('quem-somos')}}">Novidades</a>
                            <ul>
                                <a class="block px-4 py-2 mt-10 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route('quem-somos')}}">
                                    Sobre a Vennx
                                </a>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('quem-somos')}}">Quem Somos</a></li>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('quem-somos')}}#nossa_missao">Nossa Missão</a></li>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('quem-somos')}}#valores">Valores</a></li>
                            </ul>
                           
                            <ul>
                                <a class="block px-4 py-2 mt-10 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route('carreira')}}">
                                    Carreira
                                </a>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('carreira')}}#vagas_abertas">Junte-se a nós</a></li>
                            </ul>
                           

                            <ul>
                                <a class="block px-4 py-2 mt-10 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route('contato')}}">
                                    Contato
                                </a>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('denuncia')}}">Denúncia</a></li>
                                <li class="text-white text-opacity-70 mt-4 px-4"><a href="{{route ('requerimento')}}">Requerimento de dados</a></li>
                                
                            </ul>
                            
                        </nav>
                    </div>
                </div>


                <div @click.away="open = false" class="relative" x-data="{ open: false }">
                    <button @click="open = !open" class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                        <span class=" font-medium">Soluções</span>
                        <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class=" w-full mt-2 origin-top-right rounded-md shadow-lg">
                        <div class="px-2 py-2 rounded-t-md relative z-50 bg-preto_10 border-b border-white ">
                           
                            <ul>
                                <li>
                                    <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{ route('tecnologia') }}">
                                        Tecnologia Vennx
                                    </a>
                                </li>
                                <li class="text-white text-opacity-70">
                                    <a href="{{ route('tecnologia') }}">VX - IA aplicada ao GRC</a>
                                </li>
                                <li class="text-white text-opacity-70">
                                    <a href="{{ route('tecnologia') }}">VAR - Vennx Acess Radar</a>
                                </li>
                                <!-- <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{ route('vx-vendas') }}" target="_blank" rel="noopener noreferrer">VX - IA aplicada ao GRC</a>
                                </li>
                               
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{ route('lp-var') }}" target="_blank" rel="noopener noreferrer">VAR - Vennx Acess Radar</a>
                                </li> -->
                                <li class="text-white font-bold px-4 mt-4">
                                    <a href="{{ route('consultoria') }}" class="text-azul_menu_255" rel="noopener noreferrer">Todas as Soluções</a>
                                </li>
                            </ul>

                           
                            <ul>
                                <a class="block px-4 py-2 mt-10 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('consultoria-estrategia')}}">
                                    Consultoria Empresarial
                                </a>
                                <li class="text-white text-opacity-70 px-4  mt-4">
                                    <a href="{{route ('consultoria-estrategia')}}#artigo-0">Estratégia, Digitalização e Operações</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4  mt-4">
                                    <a href="{{route ('consultoria-estrategia')}}#artigo-0">Mapeamento de Processos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4  mt-4">
                                    <a href="{{route ('consultoria-estrategia')}}#artigo-0">Gestão de Acessos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4  mt-4">
                                    <a href="{{route ('consultoria-estrategia')}}#artigo-0">Auditoria Forense</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4  mt-4">
                                    <a href="{{route ('consultoria-estrategia')}}#artigo-0">Auditoria SOX</a>
                                </li>
                            </ul>
                           
                            <ul>
                                <a class="block mt-10 px-4 py-2  text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('consultoria-grc')}}">
                                    GRC e Operações
                                </a>
                                <li class="text-white text-opacity-70 px-4  mt-4 ">
                                    <a href="{{route ('consultoria-grc')}}#artigo-0" onclick="adjustScroll(0)">Avaliação e Implementação de Riscos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-1">Desenvolvimento de Controles Internos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-3">Auditoria Interna e Investigação Forense</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-4">Lei Sarbanes-Oxley </a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-6">Auditoria Interna e Controles Internos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-7">Gerenciamento de Riscos Corporativos</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-grc')}}#artigo-8">GCN e Gestão de Crises</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4 ">
                                    <a href="{{route ('consultoria-grc')}}#artigo-10">Monitoramento de Riscos</a>
                                </li>
                            </ul>
                           
                            <ul>
                                <a class="block px-4 py-2 mt-10 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('consultoria-cyber')}}">
                                    Cyber, Privacidade e TI
                                </a>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-cyber')}}#artigo-0">LGPD e correlatas globais</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-cyber')}}#artigo-1">Implementação de IDM</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4">
                                    <a href="{{route ('consultoria-cyber')}}#artigo-3">Governança de TI</a>
                                </li>
                                <li class="text-white text-opacity-70 px-4 mt-4 ">
                                    <a href="{{route ('consultoria-cyber')}}#artigo-4">CyberSecurity e Testes de Intrusão e Infra</a>
                                </li>
                            </ul>

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

                <div @click.away="open = false" class="relative" x-data="{ open: false }">
                    <button @click="open = !open" class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                        <span class=" font-medium">Conteúdos</span>
                        <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class=" w-full mt-2 origin-top-right rounded-md shadow-lg">
                        <div class="px-2 py-2 rounded-t-md relative z-50 bg-preto_10 border-b border-white ">
                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('blog')}}">
                                Novidades</a>
                            <a class=" invisible block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('voz-especialista')}}">
                                Voz do Especialista</a>
                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600  dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 text-white hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="{{route ('blog')}}">Blog Vennx</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>

</div>