{# templates/index.html #}
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="px-0">

  {# — Hero Banner — #}
  <section class="vinted-hero position-relative" style="height: 400px;">
    <div class="h-100 w-100 position-absolute"
         style="background: url('{% static 'images/hero-banner2.jpg' %}') center/cover no-repeat;">
    </div>
    <div class="container-fluid h-100 position-relative px-0">
      <div class="hero-content position-absolute bottom-0 start-0 p-4 mb-4 ms-md-4 bg-white rounded shadow-sm"
           style="max-width: 500px;">
        <h1 class="h2 fw-bold mb-3">Shop Sustainably, Save the Planet.</h1>
        <div class="d-flex flex-wrap gap-2">
          <a href="{% if user.is_authenticated %}{% url 'listings:item-add' %}{% else %}{% url 'accounts:login' %}?next={% url 'listings:item-add' %}{% endif %}"
             class="default__button default__button--2 px-4 py-2 fw-bold">
            <i class="fas fa-plus-circle me-2"></i>Sell now
          </a>
          <a href="#" class="default__button px-4 py-2">About Us</a>
        </div>
      </div>
    </div>
  </section> 
 <!-- ▸ Browse-by-category carousel ─────────────────────────────── -->
 <section class="container-fluid py-4 bg-light px-2">
  <h2 class="h5 fw-bold mb-3 px-3">Browse by category</h2>
  <div class="d-flex overflow-auto px-3 gap-3">
    {% for cat in featured_categories %}
      <a href="{% url 'listings:category-detail' cat.slug %}"
         class="category-card d-flex flex-column align-items-center text-decoration-none">
        <div class="category-icon d-flex align-items-center justify-content-center mb-2">
          <i class="{{ cat.fa_icon }} fs-2"></i>
        </div>
        <span class="small text-dark text-center">{{ cat.name }}</span>
      </a>
    {% endfor %}
  </div>
</section>


  {# — Trending in featured category — #}
  {% if trending_category %}
  <section class="container-fluid py-5 px-0">
    <h3 class="h5 fw-bold mb-4 px-3">
      Trending in {{ trending_category.category.name }}
    </h3>
    <div class="row g-3 px-3">
      {% for item in trending_category.items %}
        {% include "listings/item_card.html" %}
      {% empty %}
        <div class="col-12 text-center py-5">
          <p class="text-muted">Nothing trending here…</p>
        </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {# — Top sellers strip — #}
  <section class="container-fluid py-5 bg-white px-0">
    <h3 class="h5 fw-bold mb-4 px-3">Top sellers</h3>
    <div class="d-flex overflow-auto px-3">
      {% for profile in top_sellers %}
        <div class="text-center me-4" style="min-width:80px;">
          {% if profile.avatar %}
            <img src="{{ profile.avatar.url }}"
                 class="rounded-circle mb-2"
                 style="width:64px; height:64px; object-fit:cover;">
          {% else %}
            <i class="fas fa-user-circle fs-1 mb-2 text-secondary"  style="width:64px; height:64px;"></i>
          {% endif %}
          <div class="small text-truncate">{{ profile.user.username }}</div>
          <div class="text-warning small">
            {% with score=profile.user.trustscore.score|floatformat:0 %}
              {% for i in "12345" %}
                {% if forloop.counter <= score %}
                  <i class="fas fa-star"></i>
                {% else %}
                  <i class="far fa-star"></i>
                {% endif %}
              {% endfor %}
            {% endwith %}
          </div>
        </div>
      {% endfor %}
    </div>
  </section>

  {# — New arrivals feed — #}
  <section class="container-fluid py-5 px-0">
    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
      <h2 class="h5 fw-bold mb-0">New arrivals</h2>
      <div class="dropdown">
        <button class="default__button default__button dropdown-toggle"
                type="button" data-bs-toggle="dropdown">
          Sort by: Newest
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Newest first</a></li>
          <li><a class="dropdown-item" href="#">Price: Low to High</a></li>
          <li><a class="dropdown-item" href="#">Price: High to Low</a></li>
        </ul>
      </div>
    </div>

    <div class="row g-3 px-4">
      {% for item in items %}
        {% include "listings/item_card.html" %}
      {% empty %}
        <div class="col-12 text-center py-5">
          <p class="text-muted">No items available yet</p>
        </div>
      {% endfor %}
    </div>

    {# Pagination controls #}
    {% if is_paginated %}
      <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
          {% if page_obj.has_previous %}
            <li class="page-item">
              <a href="?page={{ page_obj.previous_page_number }}" class="page-link">‹</a>
            </li>
          {% else %}
            <li class="page-item disabled"><span class="page-link">‹</span></li>
          {% endif %}

          {% for num in paginator.page_range %}
            <li class="page-item {% if page_obj.number == num %}active{% endif %}">
              <a href="?page={{ num }}" class="page-link">{{ num }}</a>
            </li>
          {% endfor %}

          {% if page_obj.has_next %}
            <li class="page-item">
              <a href="?page={{ page_obj.next_page_number }}" class="page-link">›</a>
            </li>
          {% else %}
            <li class="page-item disabled"><span class="page-link">›</span></li>
          {% endif %}
        </ul>
      </nav>
    {% endif %}
  </section>

</main>
 <style>
  /* ─── 1. Hero content fade‑in from below ─── */
  .vinted-hero .hero-content {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    will-change: transform, opacity;
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── 2. Section “fade‑up” on load ─── */
  main > section {
    opacity: 0;
    transform: translateY(20px);
    animation: sectionFadeUp 0.6s ease-out forwards;
  }
  main > section:nth-of-type(1) { animation-delay: 0.1s; }
  main > section:nth-of-type(2) { animation-delay: 0.3s; }
  main > section:nth-of-type(3) { animation-delay: 0.5s; }
  main > section:nth-of-type(4) { animation-delay: 0.7s; }
  main > section:nth-of-type(5) { animation-delay: 0.9s; }

  @keyframes sectionFadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── 3. Category‑card hover pop ─── */
  .category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }
  .category-card .category-icon {
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .category-card:hover .category-icon {
    transform: scale(1.15);
    color: var(--secondaryColor);
  }

  /* ─── 4. Listing/item cards hover lift ─── */
  .card, .item-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover, .item-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  /* ─── 5. Button hover “bounce” ─── */
  .default__button {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .default__button:hover {
    transform: translateY(-3px);
    background-color: rgba(29, 78, 216, 0.9); /* slight darken */
  }

  /* ─── 6. Top‑seller avatar pulse ─── */
  .top-sellers .text-center {
    transition: transform 0.3s ease;
  }
  .top-sellers .text-center:hover {
    transform: scale(1.1);
  }

  /* ─── 7. Search bar focus glow ─── */
  .input-group .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(29, 78, 216, 0.25);
  }

  /* ─── 8. Carousel scroll indicator ─── */
  .overflow-auto {
    scroll-behavior: smooth;
  }
  .overflow-auto::-webkit-scrollbar {
    height: 6px;
  }
  .overflow-auto::-webkit-scrollbar-thumb {
    background: rgba(29, 78, 216, 0.4);
    border-radius: 3px;
  }

  /* ─── 9. Global link hover color ─── */
  a.text-decoration-none:hover {
    color: var(--primaryColor);
    text-decoration: none;
  }
</style>

{% endblock %}
can we correctly hide the category sidebar that we have on the desktop on mobile so it can be easier for mobile view and user get to see the hero banner and the item on mobile view the view is perfect on desktop but just need to fix the mobile for better user performance 
this section is what we need to hide on mobile (Browse Categories,Top Sellers, and the  Special Promotion!
Get extra 10% off on Electronics items this week only.-banner)
Generate the complete corrected correction for this code , The goal is to ensure the sidebar is hidden on mobile devices (typically screens narrower than 768px) to improve the mobile user experience without affecting the desktop view.