@extends('layouts.base', ['title' => 'Fashion Store - 404 Error'])

@section('content')
    @include('layouts.partials.offcanvas')

    <!-- Search offcanvas -->
    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
        <div class="offcanvas-header border-bottom p-0 py-lg-1">
            <form class="container d-flex align-items-center">
                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
                    placeholder="Search the products" data-autofocus="offcanvas">
                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </form>
        </div>
        <div class="offcanvas-body px-0">
            <div class="container text-center">
                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
                    viewBox="0 0 512 512" fill="currentColor">
                    <path
                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
                </svg>
                <h6 class="mb-2">Your search results will appear here</h6>
                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
            </div>
        </div>
    </div>

    <!-- Topbar -->
    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
      <div class="container position-relative d-flex min-w-0">
        <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
          <div class="nav me-2">
            <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
              <i class="ci-chevron-left"></i>
            </button>
          </div>
          <div class="swiper fs-sm text-white" data-swiper='{
            "spaceBetween": 24,
            "loop": true,
            "autoplay": {
              "delay": 5000,
              "disableOnInteraction": false
            },
            "navigation": {
              "prevEl": "#topbarPrev",
              "nextEl": "#topbarNext"
            }
          }'>
            <div class="swiper-wrapper min-w-0">
              <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span class="d-none d-sm-inline">Don't miss a discount!</span></div>
              <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span class="d-none d-sm-inline">We return money within 30 days.</span></div>
              <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span class="d-none d-sm-inline">We've got you covered!</span></div>
            </div>
          </div>
          <div class="nav ms-2">
            <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
              <i class="ci-chevron-right"></i>
            </button>
          </div>
        </div>
        <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    </div>


    <!-- Navigation bar (Page header) -->
    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
      <div class="container py-2 py-lg-3">
        <div class="d-flex align-items-center gap-3">

          <!-- Mobile offcanvas menu toggler (Hamburger) -->
          <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
          <div class="dropdown d-none d-md-block nav">
            <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
              <div class="ratio ratio-1x1" style="width: 20px">
                <img src="/img/flags/en-us.png" alt="USA">
              </div>
            </a>
            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
              <li>
                <a class="dropdown-item" href="#!">
                  <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
                  United Kingdom
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="#!">
                  <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
                  France
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="#!">
                  <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
                  Deutschland
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="#!">
                  <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
                  Italia
                </a>
              </li>
            </ul>
          </div>

          <!-- City slect visible on screens > 768px wide (md breakpoint) -->
          <div class="dropdown d-none d-md-block nav">
            <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="animate-target">Washington</span>
            </a>
            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
              <li><a class="dropdown-item" href="#!">Chicago</a></li>
              <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
              <li><a class="dropdown-item" href="#!">New York</a></li>
              <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
            </ul>
          </div>
        </div>

        <!-- Navbar brand (Logo) -->
        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="{{ route('second', ['home', 'fashion']) }}">Cartzilla</a>

        <!-- Button group -->
        <div class="d-flex align-items-center">

          <!-- Navbar stuck nav toggler -->
          <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Theme switcher (light/dark/auto) -->
          <div class="dropdown">
            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
              <span class="theme-icon-active d-flex animate-target">
                <i class="ci-sun"></i>
              </span>
            </button>
            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
              <li>
                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-sun"></i>
                  </span>
                  <span class="theme-label">Light</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
              <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-moon"></i>
                  </span>
                  <span class="theme-label">Dark</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
              <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
                  <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-auto"></i>
                  </span>
                  <span class="theme-label">Auto</span>
                  <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
              </li>
            </ul>
          </div>

          <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
          </button>

          <!-- Account button visible on screens > 768px wide (md breakpoint) -->
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
            <i class="ci-user animate-target"></i>
            <span class="visually-hidden">Account</span>
          </a>

          <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
            <i class="ci-heart animate-target"></i>
            <span class="visually-hidden">Wishlist</span>
          </a>

          <!-- Cart button -->
          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
            <i class="ci-shopping-bag animate-target me-1"></i>
          </button>
        </div>
      </div>

      <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
      <div class="collapse navbar-stuck-hide" id="stuckNav">
        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
          <div class="offcanvas-header py-3">
            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>

          <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
          <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
            <div class="dropdown nav">
              <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
                <div class="ratio ratio-1x1" style="width: 20px">
                  <img src="/img/flags/en-us.png" alt="USA">
                </div>
              </a>
              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
                <li>
                  <a class="dropdown-item" href="#!">
                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
                    United Kingdom
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#!">
                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
                    France
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#!">
                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
                    Deutschland
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#!">
                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
                    Italia
                  </a>
                </li>
              </ul>
            </div>
            <div class="dropdown nav">
              <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="animate-target">Washington</span>
              </a>
              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
                <li><a class="dropdown-item" href="#!">Chicago</a></li>
                <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
                <li><a class="dropdown-item" href="#!">New York</a></li>
                <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
              </ul>
            </div>
          </div>
          <div class="offcanvas-body pt-1 pb-3 py-lg-0">
            <div class="container pb-lg-2 px-0 px-lg-3">

              <div class="position-relative d-lg-flex align-items-center justify-content-between">

                <!-- Categories mega menu -->
                <div class="navbar-nav">
                  <div class="dropdown position-static pb-lg-2">
                    <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
                      <i class="ci-menu fs-lg me-2"></i>
                      <span class="animate-target">Categories</span>
                    </button>
                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">

                      <!-- Nav tabs -->
                      <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
                        <li class="nav-item" role="presentation">
                          <button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane" aria-selected="true">
                            Women's
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane" aria-selected="false">
                            Men's
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane" aria-selected="false">
                            Kids'
                          </button>
                        </li>
                      </ul>

                      <!-- Tab panes -->
                      <div class="tab-content pb-xl-4">

                        <!-- Women's tab -->
                        <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel" aria-labelledby="womens-tab">
                          <div class="row g-4">
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Clothing</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shirts &amp; Tops</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Underwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Dresses</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Swimwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Shoes</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Heels</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Loafers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Slippers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Oxfords</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Accessories</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Handbags</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Eyewear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Watches</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Jewelry</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <div class="h6 mb-2">Specialty Sizes</div>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Plus Size</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Petite</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Wide Shoes</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Narrow Shoes</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
                                  <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
                                  <div>
                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="light">Shop now</a>
                                  </div>
                                </div>
                                <img src="/img/mega-menu/fashion/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- Men's tab -->
                        <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
                          <div class="row g-4">
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Clothing</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">T-Shirts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Jeans</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Underwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Pants</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Shoes</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Oxfords</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Loafers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Slippers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Accessories</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Backpacks</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sunglasses</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Bags</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Watches</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <div class="h6 mb-2">Specialty Shops</div>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Active Wear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sports Clothing</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Athletic Shoes</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
                                  <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
                                  <div>
                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="dark">Shop now</a>
                                  </div>
                                </div>
                                <img src="/img/mega-menu/fashion/02.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- Kids' tab -->
                        <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
                          <div class="row g-4">
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Boys</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Pants</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shorts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Girls</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shirts &amp; Tops</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Dresses</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hoodies</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                                <span class="animate-target">Accessories</span>
                              </a>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Backpacks</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Gloves</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shoe Laces</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Scarves</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-2">
                              <div class="h6 mb-2">Shop by Age</div>
                              <ul class="nav flex-column gap-2 mt-0">
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Infant</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Toddler</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Little Kid</a>
                                </li>
                                <li class="d-flex w-100 pt-1">
                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Big Kid</a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
                                  <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
                                  <div>
                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="light">Shop now</a>
                                  </div>
                                </div>
                                <img src="/img/mega-menu/fashion/03.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Navbar nav -->
                <ul class="navbar-nav position-relative me-xl-n5">
                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }} class="fw-medium">Electronics Store</span>
                          <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion']) }}">
                          <span class="fw-medium">Fashion Store v.1</span>
                          <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion']) }}">
                          <span class="fw-medium">Fashion Store v.2</span>
                          <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }} class="fw-medium">Furniture Store</span>
                          <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }} class="fw-medium">Grocery Store</span>
                          <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }} class="fw-medium">Marketplace</span>
                          <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                      <li class="hover-effect-opacity px-2 mx-n2">
                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single']) }}">
                          <span class="fw-medium">Single Product Store</span>
                          <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
                      <div class="d-flex flex-column flex-lg-row gap-4">
                        <div style="min-width: 190px">
                          <div class="h6 mb-2">Electronics Store</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
                            </li>
                          </ul>
                          <div class="h6 pt-4 mb-2">Fashion Store</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Catalog with Side Filters</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
                            </li>
                          </ul>
                          <div class="h6 pt-4 mb-2">Furniture Store</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
                            </li>
                          </ul>
                        </div>
                        <div style="min-width: 190px">
                          <div class="h6 mb-2">Grocery Store</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
                            </li>
                          </ul>
                          <div class="h6 pt-4 mb-2">Marketplace</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
                            </li>
                          </ul>
                        </div>
                        <div style="min-width: 190px">
                          <div class="h6 mb-2">Checkout v.1</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
                            </li>
                          </ul>
                          <div class="h6 pt-4 mb-2">Checkout v.2</div>
                          <ul class="nav flex-column gap-2 mt-0">
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
                        </ul>
                      </li>
                      <li class="dropend">
                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
                        </ul>
                      </li>
                      <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
                    </ul>
                  </li>                  
                </ul>

                <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
                <button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">
                  <i class="ci-search fs-base ms-n1 me-2"></i>
                  <span class="text-body-tertiary fw-normal">Search</span>
                </button>
              </div>
            </div>
          </div>

          <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
          <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
            <div class="nav nav-justified w-100">
              <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
                <i class="ci-user fs-lg opacity-60 me-2"></i>
                Account
              </a>
              <a class="nav-link" href="#!">
                <i class="ci-heart fs-lg opacity-60 me-2"></i>
                Wishlist
              </a>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- 404 error message -->
    <section class="container pt-3">
        <div class="position-relative py-5">
            <div class="row position-relative align-items-center justify-content-center z-2 py-xl-4">
                <!-- Illustration -->
                <div class="col-10 col-sm-7 col-md-6 col-lg-5 col-xxl-4 offset-lg-1 offset-xxl-2 order-md-2">
                    <svg fill="none" viewbox="0 0 447 420" width="447" xmlns="http://www.w3.org/2000/svg">
                        <g filter="url(#filter0_f_2921_40054)" opacity="0.05">
                            <ellipse cx="223.5" cy="371" fill="#181D25" rx="193.5" ry="19"></ellipse>
                        </g>
                        <path class="d-none-dark" d="M44 374V97H403V374H44Z" fill="url(#paint0_linear_2921_40054)"></path>
                        <path class="d-none d-block-dark" d="M44 374V97H403V374H44Z" fill="#394557"></path>
                        <path class="d-none-dark"
                            d="M387.803 74.034H232.968H208.083H46.3354L67.0016 85L44 97L208.083 96.8446H232.968L403.002 97L380.002 85L387.803 74.034Z"
                            fill="url(#paint1_linear_2921_40054)"></path>
                        <path class="d-none d-block-dark"
                            d="M387.803 74.034H232.968H208.083H46.3354L67.0016 85L44 97L208.083 96.8446H232.968L403.002 97L380.002 85L387.803 74.034Z"
                            fill="url(#paint0_linear_6256_34079)"></path>
                        <path class="d-none-dark" d="M67 85V97H44L67 85Z" fill="#cad0d9"></path>
                        <path class="d-none-dark" d="M380 85V97H403L380 85Z" fill="#cad0d9"></path>
                        <path class="d-none d-block-dark" d="M67 85V97H44L67 85Z" fill="#303947"></path>
                        <path class="d-none d-block-dark" d="M380 85V97H403L380 85Z" fill="#303947"></path>
                        <path class="text-body-emphasis"
                            d="M168 119.5C168 122.342 166.176 124.757 163.636 125.641C165.819 174.426 193.987 199.96 221.691 200.876C236.17 201.355 250.811 195.175 262.062 181.776C272.468 169.385 280.03 150.739 281.707 125.371C279.515 124.327 278 122.09 278 119.5C278 115.91 280.91 113 284.5 113C288.09 113 291 115.91 291 119.5C291 122.686 288.707 125.337 285.681 125.893C283.926 151.781 276.159 171.209 265.125 184.349C253.127 198.637 237.33 205.395 221.559 204.874C191.136 203.868 161.872 176.02 159.637 125.729C156.955 124.928 155 122.442 155 119.5C155 115.91 157.91 113 161.5 113C165.09 113 168 115.91 168 119.5Z"
                            fill="currentColor" style="animation-duration: 1.75s"></path>
                        <g clip-path="url(#clip0_2921_40054)">
                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
                                d="M85.5309 99.8036L81.1914 83.1734L105.747 6.60145L132.18 -0.295868L149.245 65.1031L161.632 61.8707L166.048 78.7935L153.661 82.0258L158.242 99.5826L138.052 104.851L133.471 87.2943L85.5309 99.8036ZM117.606 28.0932L118.386 27.8896L129.445 70.2697L102.378 77.3324L102.175 76.5521L117.606 28.0932Z"
                                fill="currentColor" fill-rule="evenodd"></path>
                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
                                d="M218.542 111.74C210 110.26 203.002 106.91 197.546 101.692C192.125 96.4801 188.428 89.6344 186.456 81.1554C184.517 72.682 184.507 62.8824 186.425 51.7565C188.305 40.6582 191.546 31.4775 196.15 24.2144C200.787 16.9569 206.516 11.8098 213.335 8.77286C220.192 5.70843 227.878 4.89721 236.393 6.3392C244.907 7.78118 251.881 11.0752 257.314 16.2213C262.78 21.3729 266.508 28.1386 268.497 36.5182C270.491 44.8647 270.532 54.5843 268.619 65.677C266.728 76.8416 263.456 86.1024 258.802 93.4592C254.181 100.822 248.453 106.071 241.617 109.207C234.781 112.344 227.089 113.188 218.542 111.74ZM221.563 93.9002C227.394 94.8877 232.545 92.7441 237.017 87.4693C241.489 82.1945 244.701 73.6905 246.654 61.957C247.962 54.2379 248.255 47.6761 247.534 42.2717C246.847 36.873 245.281 32.6375 242.836 29.5652C240.425 26.4986 237.281 24.6371 233.405 23.9806C227.607 22.9987 222.478 25.112 218.018 30.3205C213.557 35.529 210.331 43.9115 208.34 55.4681C207.016 63.2866 206.689 69.945 207.36 75.4431C208.069 80.9138 209.643 85.2018 212.082 88.3071C214.527 91.3794 217.687 93.2437 221.563 93.9002Z"
                                fill="currentColor" fill-rule="evenodd"
                                style="animation-duration: 3s; animation-delay: .35s"></path>
                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
                                d="M290.23 71.3761L288.056 88.425L337.203 94.6927L334.908 112.692L355.606 115.331L357.902 97.3324L370.601 98.9519L372.813 81.603L360.114 79.9835L368.664 12.9377L341.566 9.4819L290.23 71.3761ZM345.356 33.9476L344.556 33.8455L312.169 73.0561L312.067 73.8561L339.815 77.3948L345.356 33.9476Z"
                                fill="currentColor" fill-rule="evenodd"
                                style="animation-duration: 3s; animation-delay: .75s"></path>
                        </g>
                        <defs>
                            <filter color-interpolation-filters="sRGB" filterunits="userSpaceOnUse" height="98"
                                id="filter0_f_2921_40054" width="447" x="0" y="322">
                                <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
                                <feblend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape">
                                </feblend>
                                <fegaussianblur result="effect1_foregroundBlur_2921_40054" stddeviation="15">
                                </fegaussianblur>
                            </filter>
                            <lineargradient gradientunits="userSpaceOnUse" id="paint0_linear_2921_40054" x1="195"
                                x2="275" y1="125" y2="338">
                                <stop offset="0" stop-color="#ffffff"></stop>
                                <stop offset="1" stop-color="#eff5fd"></stop>
                            </lineargradient>
                            <lineargradient gradientunits="userSpaceOnUse" id="paint1_linear_2921_40054" x1="229.5"
                                x2="229.5" y1="101.5" y2="74">
                                <stop offset="0" stop-color="#9ca3af"></stop>
                                <stop offset="1" stop-color="#d2d4d9"></stop>
                            </lineargradient>
                            <lineargradient gradientunits="userSpaceOnUse" id="paint0_linear_6256_34079" x1="229.5"
                                x2="229.5" y1="101.5" y2="74">
                                <stop offset="0" stop-color="#21262f"></stop>
                                <stop offset="1" stop-color="#374150"></stop>
                            </lineargradient>
                            <clippath id="clip0_2921_40054">
                                <rect fill="white" height="97" transform="translate(44)" width="359"></rect>
                            </clippath>
                        </defs>
                    </svg>
                </div>
                <!-- Text -->
                <div class="col-md-5 col-xxl-4 offset-md-1 order-md-1">
                    <div class="text-center text-md-start px-4 px-sm-5 px-md-0">
                        <h1 class="mb-sm-4">We lost that page...</h1>
                        <p class="pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-5">The page you are looking for was moved, removed or
                            might never existed. Here some helpful links:</p>
                        <div class="position-relative">
                            <i class="ci-search position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
                            <input aria-label="Search" class="form-control form-control-lg form-icon-start"
                                placeholder="What are you looking for..." type="search" />
                        </div>
                    </div>
                </div>
            </div>
            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
                style="background: linear-gradient(124deg, #e2daec -29.7%, #e4eefd 65.5%)"></span>
            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
                style="background: linear-gradient(124deg, #37343b -29.7%, #222a36 65.5%)"></span>
        </div>
    </section>
    <!-- Links -->
    <section class="container pt-4">
        <div class="row row-cols-1 row-cols-md-3 g-3 g-lg-4">
            <div class="col">
                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
                        href="{{ route('second', ['home', 'fashion']) }}">
                        <span class="animate-target">Go to homepage</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                    <span class="fs-sm">Continue shopping from the homepage</span>
                </div>
            </div>
            <div class="col">
                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
                        href="{{ route('second', ['shop', 'catalog-fashion'])}}">
                        <span class="animate-target">Trending products</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                    <span class="fs-sm">Check out the trending products</span>
                </div>
            </div>
            <div class="col">
                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
                        href="#!">
                        <span class="animate-target">Help and support</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                    <span class="fs-sm">Our friendly team here to help</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Page footer -->
    <footer class="footer pt-5 pb-4 mt-2 mt-md-3 mt-lg-4 mt-xl-5">
      <div class="container text-center pb-sm-2 pb-md-3">
        <p class="fs-sm mb-0">
          &copy; All rights reserved. Made by <span class="animate-underline"><a class="animate-target text-dark-emphasis fw-medium text-decoration-none" href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
        </p>
      </div>
    </footer>
    
@endsection

@section('scripts')
@endsection