/* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700&family=Roboto:wght@400;500&display=swap'); /* Define Color Palette and Typography */ :root { --primary-color: #1A56DB; --text-color: #212529; --bg-color: #FFFFFF; --component-bg: #F9FAFB; --border-color: #E5E7EB; --font-family-headings: 'Inter', sans-serif; --font-family-body: 'Roboto', sans-serif; } /* General Body Styles */ body { background-color: var(--bg-color); font-family: var(--font-family-body); color: var(--text-color); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-headings); font-weight: 600; } /* Global Navigation Bar */ .navbar { background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); padding: 1rem 2rem; } .navbar-brand { font-family: var(--font-family-headings); font-weight: 700; font-size: 1.5rem; color: var(--text-color); } .navbar-nav .nav-link { font-family: var(--font-family-body); font-weight: 500; color: #4B5563; padding: 0.5rem 1rem; margin: 0 0.5rem; border-radius: 0.375rem; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--primary-color); background-color: rgba(26, 86, 219, 0.05); } /* Main Content Container */ .main-content { padding: 2rem; } /* Accordion Component Styling */ .accordion { border: none; } .accordion-item { background-color: var(--component-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; margin-bottom: 1rem; } .accordion-header { border-bottom: 1px solid var(--border-color); } .accordion-button { background-color: var(--component-bg); color: var(--text-color); font-family: var(--font-family-headings); font-size: 1.125rem; font-weight: 600; padding: 1.5rem; border-radius: 0.5rem 0.5rem 0 0; } .accordion-button:not(.collapsed) { background-color: var(--component-bg); color: var(--primary-color); box-shadow: none; } .accordion-button:focus { box-shadow: none; border-color: var(--primary-color); } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234B5563'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); transition: transform 0.2s ease-in-out; } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231A56DB'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion-body { padding: 1.5rem; font-size: 1rem; color: #4B5563; }