{{-- Header demo-creative-portfolio
     Dark minimalist sticky. Hereda Porto theme + overrides via CSS scope
     html.demo-creative-portfolio. Logo limitado por CSS (max-height: 32px).
--}}
<header id="header" class="header header-effect-shrink"
        data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    <div class="header-body border-top-0 border-bottom-0 box-shadow-none">
        <div class="header-container container-fluid container-xxl">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">

                        {{-- Logo --}}
                        <div class="header-logo">
                            <a href="{{ front_homepage_url() }}" class="d-inline-flex">
                                <img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}"
                                     data-sticky-top="20"
                                     src="{{ site_asset_url('main_logo') }}">
                            </a>
                        </div>

                    </div>
                </div>
                <div class="header-column justify-content-end">
                    <div class="header-row">

                        {{-- Nav principal --}}
                        <div class="header-nav header-nav-line header-nav-bottom-line header-nav-light-text justify-content-end">
                            <div class="header-nav-main header-nav-main-text-capitalize header-nav-main-arrows header-nav-main-arrows-side header-nav-main-effect-2 header-nav-main-sub-effect-1">
                                <nav class="collapse">
                                    <ul class="nav nav-pills" id="mainNav">
                                        <x-header-nav :dropdowns="true" />
                                    </ul>
                                </nav>
                            </div>
                            <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
                                <i class="fas fa-bars"></i>
                            </button>
                        </div>

                        {{-- CTA --}}
                        <x-header-cta classes="btn btn-cta btn-rounded font-weight-bold text-2 text-uppercase ms-3 px-4 btn-py-2" />

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