
<style>
    .logo-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover; /* Ensures the logo fits nicely within the circular area */
    transition: transform 0.3s ease;
}

.logo-circle:hover {
    transform: scale(1.1); /* Adds a subtle zoom-in effect on hover */
}

</style>
<section class="my_navbar" style="background-color: #F5EFFF">

    <div class="container-fluid">
        <div class="row navbar_inner">
            <div class="col-6 p-0">

                <div class="main_logo">
                   <a href="{{ route('home') }}">
                    <img src="{{ URL::to(website_logo()) }}" alt="logo" loading="lazy" class="logo-circle">
                </a>

                </div>

            </div>
            <div class="col-6 p-0">

                <div class="navbar_right d-flex justify-content-end ">
                    <div class="skype_logo ">
                        <div class="nav_details">
                            <a href="{{route('referral-program')}}" class="" aria-label="get in touch" rel="noopener">Referral Program</a>
                        </div>
                    </div>
                    
                    @auth
                        @if (auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                            <div class="skype_logo ">
                                <div class="nav_details">
                                    <a href="{{ route('admin.dashboard') }}" class="" aria-label="get in touch" rel="noopener">Admin</a>
                                </div>
                            </div>
                        @elseif(auth()->user()->role_id == 3)
                            <div class="skype_logo ">
                                <div class="nav_details">
                                    <a href="{{ route('user.dashboard') }}" class="" aria-label="get in touch" rel="noopener">Dashboard</a>
                                </div>
                            </div>
                        @endif
                        <div class="nav_details">
                            <a href="{{ route('logout') }}" class="" aria-label="get in touch" rel="noopener" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                            <i class="fa-solid fa-bars toggle_menu" data-toggle="modal" data-target="#exampleModalCenter"></i>
                        </div>
                    @else
                        <div class="skype_logo ">
                            <div class="nav_details">
                                <a href="{{ route('login') }}" class="" aria-label="get in touch" rel="noopener">Login</a>
                            </div>
                        </div>
                        <div class="nav_details">
                            <a href="{{ route('register') }}" class="" aria-label="get in touch" rel="noopener">Register</a>
                            <i class="fa-solid fa-bars toggle_menu" data-toggle="modal" data-target="#exampleModalCenter"></i>
                        </div>
                    @endauth
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade nav_modal" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content nav_modal-content" style="border-radius: 0 !important">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <a href="{{ route('home') }}" aria-label="logo" rel="noopener">
                            <img src="https://powerworkerearn.com/backend/img/website/yFAPvMeOJMTC2Pc9JS55.png" alt="logo" loading="lazy" />
                        </a>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <img src="https://www.powerworkerearn.com/frontend/img/modal_close.webp" loading="lazy" />
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="menus">
                                    <a href="{{ route('home') }}" class="" aria-label="career" rel="noopener" style="font-weight: bold">Home</a>
                                    @auth
                                        @if (auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                                            <a href="{{ route('admin.dashboard') }}" class="" aria-label="about" rel="noopener" style="font-weight: bold">Dashboard</a>
                                        @elseif(auth()->user()->role_id == 3)
                                            <a href="{{ route('user.dashboard') }}" class="" aria-label="about" rel="noopener" style="font-weight: bold">Dashboard</a>
                                        @endif
                                        <a href="{{ route('logout') }}" class="" aria-label="about" rel="noopener" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" style="font-weight: bold">Logout</a>
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    @else
                                        <a href="{{route('referral-program')}}" class="" aria-label="get in touch" rel="noopener" style="font-weight: bold">Referral Program</a>
                                        
                                        <a href="{{ route('register') }}" class="" aria-label="service" rel="noopener" style="font-weight: bold">Register</a>
                                        <a href="{{ route('login') }}" class="" aria-label="about" rel="noopener" style="font-weight: bold">Login</a>
                                        
                                    @endauth
                                    
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="nm_footer">©{{date('Y')}} Powerworkerearn</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>