:root {
    --ncpes-primary: #06437a;
    --ncpes-primary-soft: #e7f1fb;
    --ncpes-accent: #f4b000;
    --ncpes-dark: #0b1f33;
    --ncpes-text: #233043;
    --ncpes-muted: #6c7890;
    --ncpes-bg-soft: #f5f7fb;
    --ncpes-radius-lg: 18px;
    --ncpes-radius-md: 12px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ncpes-text);
    background: #ffffff;
}

/* Top bar */
.top-bar {
    background: var(--ncpes-dark);
    padding: 6px 0;
    font-size: 0.8rem;
}

/* Navbar */
.main-nav {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.navbar-brand {
    font-size: 0.85rem;
}

.logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon {
    color: var(--ncpes-primary);
    font-size: 1.2rem;
}

.brand-abbr {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.brand-full {
    font-size: 0.7rem;
    color: var(--ncpes-muted);
}

.nav-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem !important;
}

.nav-link.active,
.nav-link:hover {
    color: var(--ncpes-primary) !important;
}




/* Sections */
.section-padding {
    padding: 4.5rem 0;
}

.bg-soft {
    background: var(--ncpes-bg-soft);
}

.section-heading h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ncpes-dark);
}

.section-heading p {
    color: var(--ncpes-muted);
    max-width: 650px;
    margin: 0.5rem auto 0;
}

/* NEW HERO SECTION */
.new-hero {
    position: relative;
    padding: 4rem 0 4rem;
    background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 60%, #e8f0ff 100%);
    overflow: hidden;
}

/* LEFT SIDE */
.new-hero .hero-left {
    padding-top: 1rem;
}

.new-hero .hero-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ncpes-dark);
}

.new-hero .hero-title span {
    color: var(--ncpes-primary);
}

.new-hero .hero-subtitle {
    font-size: 1rem;
    color: var(--ncpes-muted);
}

/* COUNTERS */
.hero-counters {
    margin-top: 1.8rem;
}

.hero-counters div {
    min-width: 140px;
}

.counter-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ncpes-muted);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.counter {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ncpes-primary);
}

/* RIGHT SIDE WITH BACKGROUND IMAGE */
.hero-right {
    position: relative;
}

.hero-bg-image {
    width: 119%;
    height: 420px;
    border-radius: 26px;
    background-image: url("../assets/img/hero-psychology-team.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Badge on image */
.hero-img-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-img-badge i {
    font-size: 1.2rem;
    color: var(--ncpes-primary);
    margin-right: 8px;
}

.hero-img-badge .text .top {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ncpes-dark);
    display: block;
}

.hero-img-badge .text .bottom {
    font-size: 0.7rem;
    color: var(--ncpes-muted);
}

/* Tighter spacing on large screens */
@media (min-width: 1200px) {
    .new-hero {
        padding: 4rem 0 4rem;
    }

    .hero-bg-image {
        height: 460px;
    }
}

/* Hero visual with image */
.hero-visual-wrapper {
    display: flex;
    flex-direction: column;
}

.hero-image-wrapper {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(6, 67, 122, 0.18);
}

.hero-image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
}

.hero-image-badge i {
    color: var(--ncpes-primary);
    font-size: 1rem;
}

.badge-text-top {
    font-weight: 600;
    color: var(--ncpes-dark);
    display: block;
}

.badge-text-bottom {
    color: var(--ncpes-muted);
}

/* Hero card */
.hero-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-lg);
    padding: 1.8rem 1.5rem;
    margin-top: 1.5rem;
}

.hero-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-list li {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    color: var(--ncpes-muted);
    font-size: 0.9rem;
}

.hero-list i {
    color: var(--ncpes-primary);
    margin-top: 0.2rem;
}

/* Timeline inside hero card */
.hero-timeline {
    border-top: 1px solid #ecf0f7;
    margin-top: 1rem;
    padding-top: 1rem;
}

.timeline-step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.7rem;
}

.step-number {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--ncpes-primary-soft);
    color: var(--ncpes-primary);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons & links */
.btn-primary {
    background: var(--ncpes-primary);
    border-color: var(--ncpes-primary);
    border-radius: 999px;
    font-size: 0.9rem;
    padding-inline: 1.3rem;
}

.btn-primary:hover {
    background: #042f57;
    border-color: #042f57;
}

.btn-outline-secondary {
    border-radius: 999px;
    font-size: 0.9rem;
}

.link-small {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ncpes-primary);
}

.link-small:hover {
    text-decoration: underline;
}

/* Feature cards */
.feature-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-md);
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 12px 30px rgba(15, 35, 52, 0.05);
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    color: var(--ncpes-primary);
}

.feature-card h5 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Standards section */
.standards-visual {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.standards-image {
    border-radius: var(--ncpes-radius-lg);
    width: 100%;
    display: block;
}

/* Standards grid */
.standards-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.standard-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-md);
    padding: 1.2rem 1.1rem;
    border: 1px solid #edf0f6;
}

.standard-card .tag {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ncpes-primary);
    background: var(--ncpes-primary-soft);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.4rem;
}

.standard-card h6 {
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}

.standard-card p {
    font-size: 0.85rem;
    color: var(--ncpes-muted);
}

/* Checklist */
.checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.checklist li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.checklist li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--ncpes-accent);
    font-size: 1.2rem;
}

/* Images */
.image-soft {
    border-radius: var(--ncpes-radius-lg);
    object-fit: cover;
}

.full-width-image {
    width: 100%;
    height: 100%;
}

/* Generic image card */
.image-card {
    border-radius: var(--ncpes-radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(5, 21, 39, 0.15);
}

/* Stats */
.stat-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-md);
    padding: 13px !important;
    box-shadow: 0 10px 26px rgba(17, 32, 56, 0.05);
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ncpes-muted);
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 0.2rem;
    color: var(--ncpes-primary);
}

/* Testimonials slider */
.testimonial-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-lg);
    padding: 1.8rem 1.6rem;
    max-width: 650px;
    margin-inline: auto;
    box-shadow: 0 18px 40px rgba(14, 32, 60, 0.08);
}

.testimonial-header h6 {
    margin: 0;
}

.testimonial-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: contain;
    background: #f4f6fb;
    padding: 0.3rem;
}

.testimonial-card .quote {
    font-size: 0.95rem;
    color: var(--ncpes-text);
    margin-bottom: 0.9rem;
}

.testimonial-card .meta {
    font-size: 0.8rem;
    color: var(--ncpes-muted);
}

/* Swiper navigation */
.swiper-button-next,
.swiper-button-prev {
    color: var(--ncpes-primary);
}

.swiper-pagination-bullet-active {
    background: var(--ncpes-primary);
}

/* News cards */
.news-card {
    background: #ffffff;
    border-radius: var(--ncpes-radius-md);
    padding: 1.2rem 1.2rem 1.3rem;
    border: 1px solid #edf0f6;
}

.news-thumb-wrapper {
    position: relative;
    border-radius: var(--ncpes-radius-md);
    overflow: hidden;
    margin-bottom: 0.7rem;
}

.news-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.news-tag {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    background: rgba(6, 67, 122, 0.9);
    color: #ffffff;
    font-size: 0.75rem;
}

.news-card h5 {
    font-size: 1rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.news-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* CTA section */
.cta-section {
    background: linear-gradient(135deg, var(--ncpes-primary) 0%, #021b34 100%);
    color: #ffffff;
}

.cta-section h2 {
    color: #ffffff;
}

.cta-section p {
    color: #e8edf5;
}

/* Footer */
.footer {
    background: #050b18;
    color: #c6cce0;
    font-size: 0.9rem;
}

.footer h5,
.footer h6 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.7rem;
}

.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-links li {
    margin-bottom: 0.3rem;
}

.footer-links a {
    color: #c6cce0;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-social a {
    color: #c6cce0;
    margin-right: 0.6rem;
    font-size: 1.1rem;
}

.footer-social a:hover {
    color: #ffffff;
}

/* Footer seal */
.footer-seal-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    background: #101731;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-seal {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* Newsletter */
.newsletter-form .form-control {
    background: #151c2f;
    border-color: #202842;
    color: #ffffff;
}

.newsletter-form .form-control::placeholder {
    color: #848daf;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-heading h2 {
        font-size: 1.7rem;
    }
}






/*Accreditation Page*/

/* ================================
   MEMBERSHIPS PAGE – SECTIONS
================================ */

/* General section spacing – reuseable */
.section-padding {
    padding: 4rem 0;
}

.section-heading h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ncpes-dark);
    margin-bottom: 0.4rem;
}

.section-heading p {
    margin: 0;
    max-width: 640px;
    color: var(--ncpes-muted);
    margin-inline: auto;
    font-size: 0.95rem;
}

/* ---------- Page Hero ---------- */

.page-hero {
    padding: 3.5rem 0 3.5rem;
    background: linear-gradient(120deg, #ffffff 0%, #edf3ff 55%, #e4edff 100%);
}

.hero-badge {
    background: var(--ncpes-primary-soft);
    color: var(--ncpes-primary);
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
}

.page-hero-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--ncpes-dark);
}

.page-hero-title span {
    color: var(--ncpes-primary);
}

.page-hero-subtitle {
    font-size: 1rem;
    color: var(--ncpes-muted);
    max-width: 640px;
}

.page-hero-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.7rem 1.5rem;
    box-shadow: 0 16px 40px rgba(15, 35, 52, 0.08);
}

/* ---------- Membership Category Cards ---------- */

.pathway-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.pathway-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.8rem;
}

/* Checklist bullets (used in hero & cards) */
.checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 0.6rem;
}

.checklist li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

.checklist li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--ncpes-accent);
    font-size: 1.1rem;
}

/* ---------- Stakeholder Tabs (Benefits) ---------- */

.stakeholder-tabs .tab-pane {
    margin-top: 0.5rem;
}

/* Make pills look like segmented control */
.nav-pills#stakeholderTabs .nav-link {
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    font-size: 0.9rem;
}

/* Specific colours for stakeholder tabs to avoid text disappearing */
#stakeholderTabs .nav-link {
    color: var(--ncpes-muted);
    font-weight: 500;
}

#stakeholderTabs .nav-link:hover {
    color: var(--ncpes-primary);
}

/* ACTIVE pill: blue bg + white text */
#stakeholderTabs .nav-link.active {
    background-color: var(--ncpes-primary);
    color: #ffffff !important;
}

/* ---------- Images on tabs ---------- */

.image-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(5, 21, 39, 0.15);
}

.image-soft {
    border-radius: 18px;
    object-fit: cover;
}

.full-width-image {
    width: 100%;
    height: 100%;
}

/* ---------- Membership Process Timeline ---------- */

.process-timeline {
    margin-top: 1.5rem;
    border-left: 2px solid #dbe2f2;
    position: relative;
}

.process-step {
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: 1.6rem;
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    position: absolute;
    left: -14px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ncpes-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(6, 67, 122, 0.4);
}

.process-step h5 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.process-step p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* ---------- Stats (Membership Network) ---------- */

.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 10px 26px rgba(17, 32, 56, 0.05);
    text-align: left;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ncpes-muted);
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 0.2rem;
    color: var(--ncpes-primary);
}

/* ---------- FAQ (Membership) ---------- */

.faq-accordion .accordion-button {
    font-size: 0.95rem;
}

.faq-accordion .accordion-body {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* ---------- CTA Section (shared) ---------- */

.cta-section {
    background: linear-gradient(135deg, var(--ncpes-primary) 0%, #021b34 100%);
    color: #ffffff;
}

.cta-section h2 {
    color: #ffffff;
}

.cta-section p {
    color: #e8edf5;
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 991.98px) {
    .page-hero-title {
        font-size: 2rem;
    }

    .section-padding {
        padding: 3.2rem 0;
    }
}





/* ===========================
   ABOUT PAGE SPECIFIC STYLES
   (about.html)
=========================== */

/* Reuse existing .page-hero but allow subtle tweak if needed */
.about-hero {
    /* keeps same gradient – you can adjust if you like */
}

/* Hero card variation */
.about-hero-card {
    /* just reuse existing page-hero-card; here in case you want tweaks */
}

/* Who we are image */
.about-image-card {
    /* reuse generic .image-card shadow/rounding */
}

/* Mission / Vision / Values */
.value-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.value-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.value-card h5 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.value-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* What we do – pillars */

.pillar-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.pillar-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.pillar-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}

.pillar-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Governance & Council */

.council-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.4rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.council-role {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ncpes-muted);
    margin-bottom: 0.3rem;
    display: inline-block;
}

.council-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
    color: var(--ncpes-dark);
}

.council-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

.governance-panel {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.3rem 1.3rem;
    border: 1px solid #e0e5f2;
    height: 100%;
}

.governance-panel h5 {
    font-size: 0.98rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.governance-panel p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* History & Milestones timeline */

.history-timeline {
    border-left: 2px solid #dbe2f2;
    margin-top: 1.5rem;
    position: relative;
}

.history-item {
    position: relative;
    padding-left: 2.8rem;
    margin-bottom: 1.6rem;
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-year {
    position: absolute;
    left: -0.2rem;
    top: 0;
    transform: translateX(-100%);
    font-weight: 600;
    color: var(--ncpes-primary);
    font-size: 0.9rem;
}

.history-item::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 0.1rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--ncpes-primary);
}

.history-content h5 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.history-content p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Global reach cards */

.global-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.global-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 10px 26px rgba(17, 32, 56, 0.05);
}

.global-card h6 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: var(--ncpes-dark);
}

.global-card p {
    font-size: 0.88rem;
    color: var(--ncpes-muted);
}

/* Ensure CTA text always visible on dark gradient */
.cta-section {
    background: linear-gradient(135deg, var(--ncpes-primary) 0%, #021b34 100%);
    color: #ffffff;
}

.cta-section h2 {
    color: #ffffff;
}

.cta-section p {
    color: #e8edf5;
}

/* Responsive tweaks */

@media (max-width: 991.98px) {
    .page-hero-title {
        font-size: 2rem;
    }
}



/* ===========================
   STANDARDS PAGE (standards.html)
=========================== */

/* Hero variant (keeps same gradient for consistency) */
.standards-hero {
    /* uses .page-hero base; customise if needed */
}

/* Diagram image card */
.standards-diagram-card {
    /* reuses .image-card styles; here if you need later tweaks */
}

/* Domains cards */
.standards-domain-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.standards-domain-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.standards-domain-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.standards-domain-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Standards by Level – tabs */

.standards-level-tabs .tab-pane {
    margin-top: 0.5rem;
}

/* Pills look like segmented control */
.nav-pills#standardsTabs .nav-link {
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    font-size: 0.9rem;
}

/* Ensure good contrast on Standards tabs */
#standardsTabs .nav-link {
    color: var(--ncpes-muted);
    font-weight: 500;
}

#standardsTabs .nav-link:hover {
    color: var(--ncpes-primary);
}

/* Active: blue background, white text */
#standardsTabs .nav-link.active {
    background-color: var(--ncpes-primary);
    color: #ffffff !important;
}

/* Card on right side of tabs */
.standard-level-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.3rem 1.2rem;
    box-shadow: 0 12px 28px rgba(17, 32, 56, 0.06);
    height: 100%;
}

.standard-level-card h6 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    color: var(--ncpes-dark);
}

.standard-level-card ul {
    padding-left: 1.1rem;
    margin: 0;
}

.standard-level-card li {
    font-size: 0.88rem;
    color: var(--ncpes-muted);
    margin-bottom: 0.25rem;
}

/* Quality cycle cards */

.quality-step-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 12px 26px rgba(12, 30, 52, 0.06);
    height: 100%;
    position: relative;
}

.quality-step-number {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ncpes-primary-soft);
    color: var(--ncpes-primary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.quality-step-card h5 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.quality-step-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Evidence accordion */

.standards-accordion .accordion-button {
    font-size: 0.95rem;
}

.standards-accordion .accordion-body {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Responsive tweaks */

@media (max-width: 991.98px) {
    .page-hero.standards-hero .page-hero-title {
        font-size: 2rem;
    }
}





/* ===========================
   RESOURCES PAGE (resources.html)
=========================== */

/* Hero variant – uses base .page-hero */
.resources-hero {
    /* you can customise later; using shared gradient for now */
}

/* Hero card variant if needed */
.resources-hero-card {
    /* reuses .page-hero-card; placeholder for tweaks */
}

/* Category cards */
.resource-category-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.resource-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.resource-category-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.resource-category-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Audience tabs */

.resources-tabs .tab-pane {
    margin-top: 0.5rem;
}

/* Pills look consistent with other pages */
.nav-pills#resourceTabs .nav-link {
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    font-size: 0.9rem;
}

/* Ensure strong contrast on resource tabs */
#resourceTabs .nav-link {
    color: var(--ncpes-muted);
    font-weight: 500;
}

#resourceTabs .nav-link:hover {
    color: var(--ncpes-primary);
}

/* Active: blue pill with white text */
#resourceTabs .nav-link.active {
    background-color: var(--ncpes-primary);
    color: #ffffff !important;
}

/* Resource list card (in tabs) */
.resource-list-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.3rem 1.2rem;
    box-shadow: 0 12px 28px rgba(17, 32, 56, 0.06);
    height: 100%;
}

.resource-list-card h6 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    color: var(--ncpes-dark);
}

.resource-list-card ul {
    padding-left: 1.1rem;
    margin: 0;
}

.resource-list-card li {
    font-size: 0.88rem;
    color: var(--ncpes-muted);
    margin-bottom: 0.25rem;
}

/* Featured resource cards */

.resource-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.resource-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ncpes-muted);
}

.resource-type i {
    margin-right: 4px;
}

.resource-format {
    font-weight: 600;
}

.resource-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
    color: var(--ncpes-dark);
}

.resource-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

.resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.resource-tags span {
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--ncpes-primary-soft);
    color: var(--ncpes-primary);
}

/* Resources FAQ accordion */

.resources-accordion .accordion-button {
    font-size: 0.95rem;
}

.resources-accordion .accordion-body {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Responsive tweaks */

@media (max-width: 991.98px) {
    .page-hero.resources-hero .page-hero-title {
        font-size: 2rem;
    }
}





/* ===========================
   DIRECTORY PAGE (directory.html)
=========================== */

/* Hero variant – uses base .page-hero */
.directory-hero {
    /* Same gradient as other inner pages for consistency */
}

/* Hero card if you want separate tweaks later */
.directory-hero-card {
    /* Reuses .page-hero-card */
}

/* Filter bar */

.directory-filter-section {
    padding-bottom: 1.5rem; /* slightly tighter as tabs follow */
}

.directory-filter-bar {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
}

/* Small labels */
.directory-filter-bar .form-label {
    color: var(--ncpes-muted);
}

/* Type filter pills */

.directory-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-pill {
    border-radius: 999px;
    border: 1px solid #dde3f2;
    background: #ffffff;
    padding: 0.22rem 0.75rem;
    font-size: 0.78rem;
    color: var(--ncpes-muted);
    cursor: pointer;
}

.filter-pill.active {
    background: var(--ncpes-primary-soft);
    border-color: var(--ncpes-primary);
    color: var(--ncpes-primary);
}

/* Region tabs */

.directory-region-tabs {
    margin-top: 1.6rem;
}

/* Make them pill style */
.nav-pills#directoryTabs .nav-link {
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
}

/* Ensure contrast on directory tabs */
#directoryTabs .nav-link {
    color: var(--ncpes-muted);
    font-weight: 500;
}

#directoryTabs .nav-link:hover {
    color: var(--ncpes-primary);
}

/* Active: blue pill with white text */
#directoryTabs .nav-link.active {
    background-color: var(--ncpes-primary);
    color: #ffffff !important;
}

/* Tab content spacing */

.directory-tab-content .tab-pane {
    margin-top: 0.5rem;
}

/* Institution cards */

.institution-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.4rem 1.4rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.institution-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    align-items: center;
    justify-content: space-between;
}

.institution-header h5 {
    font-size: 1.02rem;
    margin: 0;
    color: var(--ncpes-dark);
}

.status-pill {
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Status colour variants */
.status-accredited {
    background: #e5f7ea;
    border-color: #5cbf7a;
    color: #2d7b43;
}

.status-program {
    background: #fff3da;
    border-color: #f4b000;
    color: #8b6500;
}

.status-member {
    background: #e7f1fb;
    border-color: var(--ncpes-primary);
    color: var(--ncpes-primary);
}

.institution-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    font-size: 0.82rem;
    color: var(--ncpes-muted);
}

.institution-meta i {
    margin-right: 0.25rem;
}

.institution-desc {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
    margin-bottom: 0.2rem;
}

.institution-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.2rem;
}

.review-tag {
    font-size: 0.8rem;
    color: var(--ncpes-muted);
}

.review-tag i {
    margin-right: 0.25rem;
}

.institution-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.institution-links .divider {
    color: #c2c9da;
    font-size: 0.8rem;
}

/* Directory note / disclaimer */

.directory-note {
    margin-top: 1.8rem;
    border-top: 1px solid #e0e5f2;
    padding-top: 0.9rem;
}

/* Responsive tweaks */

@media (max-width: 991.98px) {
    .directory-filter-bar {
        padding: 1.1rem 1rem;
    }

    .page-hero.directory-hero .page-hero-title {
        font-size: 2rem;
    }
}





/* ===========================
   CONTACT PAGE (contact.html)
=========================== */

/* Hero variant – uses shared .page-hero styles */
.contact-hero {
    /* same gradient – override here if you ever want a different one */
}

/* Optional specific hero card tweaks */
.contact-hero-card {
    /* reuses .page-hero-card; keep for future tweaks if needed */
}

/* Contact form card */

.contact-form-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.7rem 1.6rem;
    box-shadow: 0 16px 40px rgba(15, 35, 52, 0.08);
}

.contact-form-card h2 {
    font-size: 1.4rem;
    color: var(--ncpes-dark);
}

.contact-form-card .form-label {
    font-size: 0.9rem;
    color: var(--ncpes-dark);
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    font-size: 0.9rem;
}

/* Right-hand contact info stack */

.contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.contact-info-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
}

.contact-info-card h5 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--ncpes-dark);
}

.contact-info-card p {
    font-size: 0.88rem;
    color: var(--ncpes-muted);
}

.contact-info-card a {
    color: var(--ncpes-primary);
    text-decoration: none;
}

.contact-info-card a:hover {
    text-decoration: underline;
}

/* Other ways to connect */

.contact-channel-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 14px 32px rgba(12, 30, 52, 0.06);
    height: 100%;
}

.channel-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ncpes-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ncpes-primary);
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.contact-channel-card h5 {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
    color: var(--ncpes-dark);
}

.contact-channel-card p {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* FAQ accordion */

.contact-accordion .accordion-button {
    font-size: 0.95rem;
}

.contact-accordion .accordion-body {
    font-size: 0.9rem;
    color: var(--ncpes-muted);
}

/* Responsive tweaks */

@media (max-width: 991.98px) {
    .page-hero.contact-hero .page-hero-title {
        font-size: 2rem;
    }

    .contact-form-card {
        padding: 1.4rem 1.3rem;
    }
}