/* --- STYLES FROM FILE 1 (NEW NAVBAR) --- */
.main-body {
    :root {
      --primary-dark-blue: #0f1d97;
      --primary-teal: #05cab6;

      --bs-primary: var(--primary-dark-blue);
      --bs-primary-rgb: 15, 29, 151;
    }


    /* --- Breadcrumb --- */
    .breadcrumb-container {
      position: absolute;
      /* Allows positioning relative to the hero section */
      top: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 1320px;
      /* Use a max width for alignment with the container */
      padding: 0 15px;
      /* Add horizontal padding */
      z-index: 20;
      /* Ensure it's above the overlay */
    }

    .breadcrumb {
      display: flex;
      list-style: none;
      padding: 0;
      background: none;
      margin-bottom: 0;
    }

    .breadcrumb li {
      display: flex;
      align-items: center;
    }

    .breadcrumb-divider {
      margin: 0 0.2rem;
    }

    .breadcrumb li a {
      text-decoration: none;
      font-size: 12px;
      font-weight: 600 !important;
      color: white;
      /* Default color: white */
    }

    .breadcrumb li.active a {
      color: #daeeff;
      /* Active color: light blue/white */
    }

    /* Make sure divider is visible */
    .breadcrumb-divider svg {
      color: white;
    }

    /* --- END OF MEMORISED NAV STYLES --- */

    /* --- STYLES FROM FILE 2 (Original) --- */
    body {
      background-color: #f0f2f5;
      font-family: "Inter", sans-serif;
    }

    /* The old .navbar-custom styles are not needed as the new navbar is used */

    /* --- Filter Buttons (Original file's style) --- */
    .filter-btn-group .btn {
      border-radius: 0.75rem;
      font-weight: 600;
      margin: 0 0.4rem;
      padding: 0.6rem 1.4rem;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid #dee2e6;
      color: #495057;
      background-color: #fff;
    }

    .filter-btn-group .btn.active {
      background-color: #0d6efd;
      color: white;
      border-color: #0d6efd;
      box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
      transform: translateY(-2px);
    }

    .filter-btn-group .btn:hover:not(.active) {
      background-color: #e9ecef;
      border-color: #ced4da;
      color: #212529;
    }

    /* --- Workshop Cards (Original file's style) --- */
    #workshop-gallery {
      margin-top: 3rem;
    }

    .workshop-card {
      border: none;
      border-radius: 1rem;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      overflow: hidden;
      background-color: #fff;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .workshop-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .workshop-card img {
      height: 400px;
      width: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .workshop-card:hover img {
      transform: scale(1.05);
    }

    .workshop-card .card-body {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 1;
      text-align: justify;
    }

    .workshop-card .card-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: #212529;
      margin-bottom: 0.75rem;
      text-align: left !important;

    }

    .workshop-card .card-text {
      font-size: 0.95rem;
      color: #6c757d;
      line-height: 1.6;
      flex-grow: 1;
      text-align: justify;
      text-justify: inter-word;
    }

    .workshop-card .card-footer {
      background-color: transparent;
      border-top: none;
      padding: 0 1.5rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }

    .workshop-card .card-badge {
      font-size: 0.85rem;
      padding: 0.4em 0.8em;
      border-radius: 0.5rem;
      font-weight: 600;
    }

    .workshop-card .card-date {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 0.3rem 0.8rem;
      border-radius: 0.5rem;
      font-size: 0.8rem;
      font-weight: 600;
      z-index: 5;
    }

    /* --- JS-Controlled Filter Animation (Original file's style) --- */
    /* Changed 'block' to 'flex' for pagination logic to work correctly with d-flex cards */
    .workshop-item {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      height: auto;
      visibility: visible;
    }

    .workshop-item.hide {
      opacity: 0;
      transform: translateY(20px) scale(0.9);
      pointer-events: none;
      display: none !important;
    }

}