@import "tailwindcss"; @import "header.css"; body { background: #fdfdff; } /* Breadcrumb Styles */ .breadcrumb-nav { width: 100%; margin: 1rem 0; } .breadcrumb-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .breadcrumb-list { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0.75rem 1rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .breadcrumb-item { display: flex; align-items: center; font-size: 0.875rem; color: #64748b; } .breadcrumb-item a { color: #64748b; text-decoration: none; transition: color 0.2s ease; display: flex; align-items: center; gap: 0.25rem; } .breadcrumb-item a:hover { color: #3b82f6; } .breadcrumb-item:not(:last-child)::after { content: "/"; margin: 0 0.5rem; color: #cbd5e1; } .breadcrumb-item.active { color: #3b82f6; font-weight: 500; } .breadcrumb-item i { font-size: 0.75rem; } /* Responsive styles */ @media (max-width: 768px) { .breadcrumb-list { padding: 0.5rem 0.75rem; } .breadcrumb-item { font-size: 0.8125rem; } .breadcrumb-item:not(:last-child)::after { margin: 0 0.25rem; } } /* @media (max-width: 480px) { .breadcrumb-item:nth-last-child(2):not(.active) { display: none; } } */