/* ============================================================
   GLOBAL VARIABLES + BASE
============================================================ */
:root {
    --who-blue: #0B4F6C;
    --who-blue-light: #1A76A3;
    --who-grey: #555;
    --who-bg: #F5F8FA;
}

body {
    margin: 0;
    padding-top: 80px; /* Space for navbar */
    background: var(--who-bg);
    font-family: "Segoe UI", Arial, sans-serif;
    color: #222;
}

/* Container */
.page-container {
    max-width: 1200px;
    margin: auto;
}
.ss-hero {
    position: relative;
    min-height: 72vh;
    background-image: url('/images/summer-school-hero-clean.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
}

.ss-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 38, 85, .92) 0%, rgba(0, 54, 110, .65) 45%, rgba(0, 54, 110, .15) 100%);
}

.ss-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 70px;
    padding-bottom: 70px;
}

.ss-badge {
    display: inline-block;
    background: #ffd900;
    color: #052b5f;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 999px;
    margin-bottom: 24px;
}

.ss-title {
    font-size: clamp(1.1rem, 3vw, 2.3rem);
    line-height: 1.08;
    font-weight: 800;
    text-shadow: 0 4px 12px rgba(0,0,0,.35);
}

.ss-yellow-line {
    width: 110px;
    height: 5px;
    background: #ffd900;
    margin: 24px 0;
}

.ss-subtitle {
    font-size: 1.25rem;
    max-width: 650px;
}

.ss-info-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 26px 0;
}

.ss-info-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 250px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    background: rgba(0, 43, 100, .55);
    backdrop-filter: blur(5px);
}

    .ss-info-box i {
        color: #ffd900;
        font-size: 1.8rem;
    }

    .ss-info-box strong,
    .ss-info-box span {
        display: block;
    }

.ss-main-btn,
.ss-access-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffd900;
    color: #052b5f;
    font-weight: 800;
    text-decoration: none;
    border-radius: 14px;
    padding: 15px 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.ss-content-section {
    background: #f5f9ff;
    padding: 24px 0 60px;
}

.ss-feature-strip,
.ss-flow-card,
.ss-access-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(0, 51, 102, .12);
    border: 1px solid #e3edf8;
}

.ss-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
}

.ss-feature-item {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-right: 1px solid #e6eef7;
}

    .ss-feature-item:last-child {
        border-right: 0;
    }

    .ss-feature-item i {
        font-size: 2rem;
        color: #0d6efd;
    }

    .ss-feature-item h5 {
        color: #07356f;
        font-weight: 800;
        margin-bottom: 6px;
    }

    .ss-feature-item p {
        margin: 0;
        font-size: .9rem;
    }

.ss-access-card {
    padding: 34px;
    margin-top: -70px;
    position: relative;
    z-index: 4;
}

.ss-access-icon {
    width: 58px;
    height: 58px;
    background: #1f6fe5;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 16px;
}

.ss-access-card h3 {
    color: #07356f;
    font-weight: 800;
}

.ss-access-card ul {
    padding-left: 0;
    list-style: none;
    margin: 22px 0;
}

.ss-access-card li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
}

    .ss-access-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #0d6efd;
        font-weight: 900;
    }

.ss-access-btn {
    width: 100%;
    background: #073f9e;
    color: #fff;
}

.ss-flow-card {
    padding: 24px;
}

    .ss-flow-card h4 {
        color: #07356f;
        font-weight: 800;
        margin-bottom: 20px;
    }

.ss-flow {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.ss-flow-step {
    flex: 1;
    background: #fff;
    border: 1px solid #dce8f5;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

    .ss-flow-step span {
        display: inline-flex;
        width: 36px;
        height: 36px;
        background: #1f6fe5;
        color: #fff;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .ss-flow-step h6 {
        font-weight: 800;
        color: #07356f;
    }

    .ss-flow-step p {
        font-size: .82rem;
        margin-bottom: 0;
    }

.ss-flow-arrow {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 1.8rem;
}

/* Mobile */
@media (max-width: 991px) {
    .ss-hero {
        min-height: auto;
        background-position: center;
    }

    .ss-hero-overlay {
        background: rgba(0, 38, 85, .82);
    }

    .ss-title {
        font-size: 2.4rem;
    }

    .ss-feature-strip {
        grid-template-columns: 1fr 1fr;
    }

    .ss-access-card {
        margin-top: 0;
    }

    .ss-flow {
        flex-direction: column;
    }

    .ss-flow-arrow {
        transform: rotate(90deg);
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .ss-title {
        font-size: 2rem;
    }

    .ss-subtitle {
        font-size: 1rem;
    }

    .ss-info-box {
        width: 100%;
        min-width: auto;
    }

    .ss-feature-strip {
        grid-template-columns: 1fr;
    }

    .ss-feature-item {
        border-right: 0;
        border-bottom: 1px solid #e6eef7;
    }
}
/* ============================================================
   NAVBAR
============================================================ */
.kehub-navbar {
    background: var(--who-blue) !important;
    padding: 0.7rem 1.2rem;
    border-bottom: 2px solid rgba(255,255,255,0.15);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}

    .kehub-navbar .navbar-brand {
        font-size: 1.3rem;
        color: #fff !important;
        display: flex;
        align-items: center;
    }

    .kehub-navbar .nav-link {
        color: rgba(255,255,255,0.85) !important;
        font-weight: 500;
        margin-right: 12px;
    }

        .kehub-navbar .nav-link:hover,
        .kehub-navbar .nav-link.active {
            color: #fff !important;
            text-decoration: underline;
        }

/* ============================================================
   HERO SECTION
============================================================ */
.hero-section-tfa {
    background: linear-gradient(135deg, var(--who-blue), var(--who-blue-light));
    color: white;
    padding: 70px 40px;
    border-radius: 0px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
}
.hero-row {
    max-width: 1400px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.hero-left {
    flex: 1;
    max-width: 650px;
    z-index: 2;
}

.hero-title-tfa {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.hero-subtext-tfa {
    font-size: 1.15rem;
    opacity: 0.95;
    margin-bottom: 20px;
}

/* Join Box */
.join-box,
.unauthenticated-box {
    background: rgba(255,255,255,0.14);
    padding: 24px 28px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
   
}

.join-title {
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.join-text {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 10px;
}

/* Illustration */
.hero-illustration {
    background: url('/images/health-illustration.png') right center / contain no-repeat;
    width: 480px;
    height: 250px;
    opacity: 0.22;
}

/* Mobile hero */
@media (max-width: 992px) {
    .hero-row {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   TWO-COLUMN PLATFORM SECTION
============================================================ */
.tfa-platform-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    margin-bottom: 40px;
}

.tfa-platform-illustration img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.section-title-tfa {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--who-blue);
}
@media (min-width: 1200px) {
    .tfa-platform-content {
        padding-right: 40px;
    }
}
.section-text-tfa {
    color: #000000 !important; /* force real black */
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.tfa-platform-content {
    padding-right: 20px; /* adjust as needed */
}
.tfa-feature-list {
    padding-left: 0;
    list-style: none;
    color: #000000 !important; /* force real black */
    font-size: 1.25rem;
}

    .tfa-feature-list li::before {
        content: "•";
        color: var(--who-blue);
        font-weight: bold;
        padding-right: 6px;
    }

/* Mobile */
@media (max-width: 900px) {
    .tfa-platform-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   IMAGE GRID 3-PANEL
============================================================ */
.tfa-image-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

    .tfa-image-grid .img-large img {
        width: 100%;
        border-radius: 16px;
    }

    .tfa-image-grid .img-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

.img-small img {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .tfa-image-grid .img-row {
        grid-template-columns: 1fr;
    }
    .tfa-image-grid .img-row {
        display: none;
    }
}

/* ================================
   EXPERT FLIP CARD DESIGN
================================ */

.experts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-items: center;
}

/* Card container */
.expert-flip-card {
    width: 100%;
    max-width: 420px;
    height: 350px;
    perspective: 1200px;
}

/* Inner flip wrapper */
.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.expert-flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

/* FRONT + BACK BASE */
.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 18px;
    padding: 25px;
    background: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    text-align: center;
}

    /* FRONT SIDE */
    .flip-front img.expert-photo-large {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
        border: 4px solid #0B4F6C;
    }

/* BACK SIDE */
.flip-back {
    transform: rotateY(180deg);
    background: #f2f9ff;
    border: 1px solid #d7e7f5;
}

.expert-name {
    color: #0B4F6C;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 5px;
}

.expert-title {
    color: #444;
    font-size: 1rem;
    margin-bottom: 15px;
}

.expert-bio {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Buttons */
.expert-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.expert-btn {
    background: #0B4F6C;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.2s ease;
}

    .expert-btn:hover {
        background: #09465a;
    }

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .expert-flip-card {
        height: 500px;
    }
}

/* ------------------------------- */
/* WHO TEAM SECTION (4-column grid) */
/* ------------------------------- */

/* ============================
   WHO TEAM — FLIP CARD STYLES
   ============================ */

.who-team-section .section-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0B4F6C;
    margin-bottom: 25px;
}

/* Grid Layout */
.who-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

@media (max-width: 1200px) {
    .who-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .who-team-grid {
        grid-template-columns: 1fr;
    }
}

/* Flip Card Container */
.who-flip-card {
    perspective: 1100px;
}

.who-flip-inner {
    width: 100%;
    height: 350px;
    text-align: center;
    border-radius: 16px;
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.who-flip-card:hover .who-flip-inner {
    transform: rotateY(180deg);
}

/* FRONT + BACK */
.who-card-front,
.who-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    backface-visibility: hidden;
    border-radius: 16px;
    background: #ffffff;
}

/* Back side */
.who-card-back {
    transform: rotateY(180deg);
    background: #0B4F6C;
    color: white;
}

/* Image */
.who-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0B4F6C;
    margin-bottom: 15px;
    background: white;
}

/* Text */
.who-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B4F6C;
}

.who-card-back .who-name {
    color: white;
}

.who-role {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 12px;
}

.who-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e9f4ff;
    margin-bottom: 18px;
}

/* Button */
.who-btn {
    background: white;
    color: #0B4F6C;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

    .who-btn:hover {
        background: #e6f4ff;
    }


/* ============================================================
   PARTNERS FOOTER
============================================================ */
/* Footer wrapper */
.kehub-footer {
    background-color: #0b4f6c;
    color: #ffffff;
}

/* Footer bar */
.footer-bar {
    padding: 22px 0;
}

/* Layout */
.footer-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* WHO logo */
.footer-logo img {
    max-height: 90px;
    width: auto;
}

/* Copyright */
.footer-copy {
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Links */
.footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

    .footer-links a,
    .footer-link-btn {
        color: #ffffff;
        text-decoration: none;
        opacity: 0.9;
    }

        .footer-links a:hover,
        .footer-link-btn:hover {
            text-decoration: underline;
            opacity: 1;
        }

/* Cookie banner */
.cookie-banner {
    background: #083b52;
    padding: 12px 0;
    font-size: 0.9rem;
}

.btn-accept {
    background-color: #ffffff;
    color: #0b4f6c;
    font-weight: 500;
    border-radius: 6px;
}


/* ============================================================
   UPCOMING WEBINAR CARD (highlight)
============================================================ */
.upcoming-webinar-card {
    background: rgba(255,255,255,0.14);
    border-left: 6px solid #fff;
    border-radius: 14px;
    padding: 26px;
    max-width: 540px;
    backdrop-filter: blur(6px);
}

.uw-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.uw-session-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.uw-btn {
    background: #fff !important;
    color: var(--who-blue) !important;
    padding: 10px 24px !important;
    font-weight: 600;
    border-radius: 8px;
}

/* --------------------------------------
   TEAMS PAGE HERO SECTION
--------------------------------------- */

.teams-hero {
    background: linear-gradient(135deg, #0B4F6C, #1A76A3);
    padding: 40px 34px;
    border-radius: 0 0 12px 12px;
    color: #ffffff;
    box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}

.teams-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.teams-subtext {
    font-size: 1.05rem;
    opacity: 0.95;
    line-height: 1.55;
    max-width: 900px;
}
/* -----------------------------
   WORKSPACES GRID (LOGGED-IN)
------------------------------*/

.workspaces-section {
    margin-top: 50px;
}

.workspaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 25px;
}

.workspace-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 16px;
    border: 1px solid #e5e9ec;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: 0.25s ease;
}

    .workspace-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    }

.workspace-title {
    color: var(--who-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.workspace-text {
    color: #444;
    font-size: 1rem;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* BUTTON */
.workspace-btn {
    background: var(--who-blue);
    color: #ffffff !important;
    padding: 6px 18px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s ease;
    border: none;
}

    .workspace-btn:hover {
        background: #094a63;
        transform: translateY(-2px);
    }

/* MOBILE FIXES */
@media (max-width: 768px) {
    .workspaces-grid {
        grid-template-columns: 1fr;
    }

    .workspace-card {
        padding: 22px;
    }
}

/* Material grid */
.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Material card */
.material-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    transition: 0.25s ease;
}

    .material-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

.material-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--who-blue);
    margin-bottom: 10px;
}

.material-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.material-card .btn {
    padding: 6px 14px !important;
    font-size: 0.9rem;
}
/* ---------------------------------------
   TRAINING MATERIALS STYLING
--------------------------------------- */

.materials-section {
    margin-top: 30px;
}

.materials-heading {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0B4F6C;
    margin-bottom: 1.2rem;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
}

.materials-card {
    background: #fff;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #e8edf1;
    transition: 0.2s ease;
}

    .materials-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    }

.mat-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0B4F6C;
    margin-bottom: 8px;
}

.mat-text {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.hero-small {
    background: linear-gradient(135deg, #0B4F6C, #1A76A3);
    padding: 40px 34px;
    border-radius: 0 0 12px 12px;
    color: #ffffff;
    box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}

.hero-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.hero-subtext {
    font-size: 1.05rem;
    opacity: 0.95;
    line-height: 1.55;
    max-width: 900px;
}

/* ------------------------------------------
   WEBINARS LIBRARY PAGE
------------------------------------------- */

/* Webinar List */
.webinar-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.webinar-item {
    background: #fff;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    transition: transform .2s, box-shadow .2s;
}

    .webinar-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

.webinar-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0B4F6C;
}

.webinar-desc {
    font-size: .95rem;
    color: #555;
    margin-bottom: 12px;
}

/* Upcoming Webinar Highlight */
.upcoming-webinar-card {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(6px);
    padding: 28px;
    border-left: 6px solid #fff;
    border-radius: 16px;
    max-width: 720px;
    color: #fff;
}

    .upcoming-webinar-card h3,
    .upcoming-webinar-card h4 {
        color: #fff;
    }

.uw-header {
    display: flex;
    align-items: center;
}

.uw-icon {
    font-size: 1.8rem;
    margin-right: 10px;
}

.uw-btn {
    background: #ffffff !important;
    color: #0B4F6C !important;
    font-weight: 600;
    padding: 10px 24px !important;
    border-radius: 8px;
    margin-top: 12px;
}
/* ===========================
   UPCOMING WEBINAR (WHO STYLE)
   =========================== */

.upcoming-webinar {
    margin-top: 40px;
}

/* Main Card */
.uw-card {
    background: #ffffff;
    border-left: 6px solid #0B4F6C;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    max-width: 900px;
    margin: auto;
    animation: fadeSlideIn 0.6s ease-out;
}

/* Header Row */
.uw-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.uw-icon {
    font-size: 1.8rem;
    margin-right: 12px;
    animation: pulseGlow 2s infinite;
}

/* Titles */
.uw-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0B4F6C;
    margin: 0;
}

.uw-session-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 15px;
    color: #0B4F6C;
    line-height: 1.4;
}

/* Webinar metadata */
.uw-meta {
    color: #333;
    margin: 3px 0 3px 0;
    font-size: 1rem;
}

.separator {
    padding: 0 6px;
    opacity: 0.6;
}

/* Button */
.uw-btn {
    background: #0B4F6C !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 18px;
    display: inline-block;
    transition: all 0.2s ease;
}

    .uw-btn:hover {
        background: #09506a !important;
        transform: translateY(-2px);
    }

/* Animations */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes pulseGlow {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.9;
        transform: scale(1);
    }
}
/* Webinar Detail */
.webinar-detail {
    max-width: 900px;
}

.webinar-info-card,
.webinar-programme-card,
.webinar-speakers-card,
.webinar-downloads-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.webinar-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0B4F6C;
    margin-bottom: 20px;
}

.programme-list li {
    margin-bottom: 14px;
    font-size: 1.05rem;
    line-height: 1.5;
}

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

.speaker-card {
    text-align: center;
}

.speaker-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0B4F6C;
    margin-bottom: 10px;
}

.webinar-downloads-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border-left: 5px solid #0B4F6C;
}

.webinar-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0B4F6C;
}

.download-caption {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.webinar-downloads-card .btn-outline-primary {
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 18px;
}
/* ==========================
   PROFILE PAGE STYLING
   ========================== */

/* Hero Section */


.profile-title {
    font-size: 2.2rem;
    font-weight: 700;
}

.profile-subtext {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Profile Card */
.profile-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid #e5e8eb;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.profile-name {
    font-size: 1.8rem;
    color: #0B4F6C;
    font-weight: 700;
}

.profile-meta {
    color: #555;
    margin-bottom: 6px;
    font-size: 1rem;
}

.profile-actions .btn-who {
    background: #0B4F6C;
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
}

    .profile-actions .btn-who:hover {
        background: #093f57;
    }

/* Details Section */
.profile-details p {
    margin-bottom: 10px;
    font-size: 1rem;
}

.data-label {
    font-weight: 600;
    color: #0B4F6C;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .profile-actions {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
}
/* Fix mobile join box alignment */
.join-buttons {
    text-align: center;
    width: 100%;
}

    /* Make buttons block-style on mobile */
    .join-buttons .btn {
        display: block;
        width: 80%;
        max-width: 320px;
        margin: 0 auto 14px auto;
        font-size: 1.35rem;
        font-weight: 600;
        border-radius: 12px;
        padding: 14px 20px;
    }

/* Primary (white button) */
.join-btn-primary {
    color: #000;
}

/* Secondary (outline button) */
.join-btn-secondary {
    border-width: 2px;
}

/* Tablet & above – horizontal layout if needed */
@media (min-width: 992px) {
    .join-buttons .btn {
        display: inline-block;
        width: auto;
        margin: 0 10px;
    }
}
/* ============================
   PARTNERS & SUPPORTERS STRIP
   ============================ */
.partners-section {
    /*   background: var(--who-blue);  Blue background */
    padding: 48px 0 0;
    color: #ffffff;
    text-align: center;
}

/* Heading */
.partners-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 32px;
}

/* Shared row style */
.partners-row {
    padding: 10px 20px; /* Some breathing space */
    margin: 0 auto 24px; /* Spacing between rows */
    margin-bottom: 0 !important;
    width: 90%;
    max-width: 1200px;
    border-radius: 12px; /* Soft clean look */

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* Primary row (big logos) */
.partners-row-primary .partner-logo {
    max-height: 120px;
}

/* Secondary row (small logos) */
.partners-row-secondary .partner-logo {
    background: #ffffff; /* White row background */
    max-height: 85px;
}

/* Logo visual quality */
.partner-logo {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Mobile optimization */
@media (max-width: 768px) {

    .partners-heading {
        font-size: 1.6rem;
    }

    .partners-row {
        padding: 20px 10px;
        gap: 24px;
    }

    .partners-row-primary .partner-logo {
        max-height: 90px;
    }

    .partners-row-secondary .partner-logo {
        max-height: 65px;
    }
}


.chat-expert-comingsoon .comingsoon-card {
    border-radius: 16px;
    background: #ffffff;
}

.expert-preview-item {
    padding: 10px 0;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}

.comingsoon-label {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid #0B4F6C;
    border-radius: 30px;
    font-weight: 600;
    color: #0B4F6C;
}


/* Hero Banner */
.discussion-hero {
    background: #0B4F6C;
    color: #fff;
    padding: 48px;
    text-align: left;
    border-radius: 0 0 12px 12px;
}

.discussion-title {
    font-size: 2.4rem;
    font-weight: 700;
}

.discussion-sub {
    max-width: 760px;
    font-size: 1.15rem;
    opacity: 0.9;
}

/* Coming Soon badge */
.coming-soon-badge {
    margin-top: 20px;
    display: inline-block;
    background: #ffffff33;
    border: 1px solid #fff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}

/* Coming Soon Container */
.discussion-container {
    padding: 40px 0;
}

.coming-soon-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 760px;
    margin: auto;
}

.coming-text {
    font-size: 1.1rem;
    color: #333;
}

.coming-list li {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

a[href^="mailto:"] {
    color: #0B4F6C;
    font-weight: 600;
    text-decoration: none;
}

    a[href^="mailto:"]:hover {
        text-decoration: underline;
    }



/* Webinar Recording Card */
.webinar-recording-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
}

/* Subtext */
.webinar-subtext {
    color: #6c757d;
    margin-bottom: 16px;
}

/* Tabs */
.webinar-tabs {
    border-bottom: 1px solid #dee2e6;
}

    .webinar-tabs .nav-link {
        border: none;
        color: #0b4f6c;
        font-weight: 500;
        padding: 10px 18px;
    }

        .webinar-tabs .nav-link.active {
            border-bottom: 3px solid #0b4f6c;
            color: #0b4f6c;
            background: transparent;
        }

/* Video container */
.webinar-video-container {
    padding-top: 20px;
}

/* Page spacing */
.webinar-library {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Section headings */
.library-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0b4f6c;
    margin-bottom: 20px;
}

/* Webinar cards */
.webinar-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    max-width: 720px;
}

    /* Upcoming style */
    .webinar-card.upcoming {
        border-left: 6px solid #adb5bd;
    }

    /* Past style */
    .webinar-card.past {
        border-left: 6px solid #0b4f6c;
    }

/* Titles */
.webinar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Meta */
.webinar-meta {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 14px;
}

/* Description */
.webinar-description {
    color: #343a40;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Button refinement */
.webinar-card .btn {
    border-radius: 8px;
}
/* Scorecard Card */
.scorecard-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
}

/* Map image */
.scorecard-map {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay */
.scorecard-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 79, 108, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

/* CTA text */
.scorecard-cta {
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    color: #0b4f6c;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s ease;
}

/* Hover effects */
.scorecard-card:hover .scorecard-overlay {
    background: rgba(11, 79, 108, 0.15);
}

.scorecard-card:hover .scorecard-cta {
    opacity: 1;
    transform: translateY(0);
}

/* Remove link underline */
.scorecard-link {
    text-decoration: none;
}

/* Section wrapper */
.partners-section {
    background-color: #f7f9fb;
    padding: 60px 0 80px;
    text-align: center;
}

/* Constrain width */
.partners-container {
    max-width: 920px;
    margin: 0 auto;
}

/* Text labels */
.partner-text-row {
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 14px;
}

/*.partner-text-spacing {
    margin-top: 40px;
}*/

/* Logo rows */
.partner-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

/* Logos */
.partner-logo {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    opacity: 0.95;
}

.partner-logo-large {
    max-height: 52px;
}

/* Slight hover polish (optional) */
.partner-logo:hover {
    opacity: 1;
}

/* Section wrapper */
.attribution-section-consistent {
    background-color: #f7f9fb;
    padding: 60px 0;
}

/* Card container */
.attribution-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 24px;
    margin: 0 auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Blocks */
.attribution-block {
    text-align: center;
}

/* Titles */
.attribution-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0b4f6c;
    margin-bottom: 20px;
}

/* Divider */
.attribution-divider {
    border: none;
    border-top: 5px solid #e5e7eb;
    
}

/* Logos row */
.attribution-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

/* Logos */
.attribution-logo {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    opacity: 0.95;
}

.attribution-logo-large {
    max-height: 52px;
}
/* ============================================================
   CHAT WITH AN EXPERT — COMING SOON
============================================================ */

.chat-expert-comingsoon {
    max-width: 900px;
}

    .chat-expert-comingsoon .comingsoon-card {
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e5e8eb;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

/* Expert preview list */
.expert-preview-list {
    margin-top: 20px;
}

.expert-preview-item {
    padding: 12px 0;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #eee;
}

    .expert-preview-item:last-child {
        border-bottom: none;
    }

/* Coming soon pill */
.comingsoon-label {
    display: inline-block;
    padding: 8px 20px;
    border: 2px solid #0B4F6C;
    border-radius: 30px;
    font-weight: 700;
    color: #0B4F6C;
    letter-spacing: 0.5px;
    margin-top: 24px;
    background: #f7fbff;
}

/* Mobile refinement */
@media (max-width: 768px) {
    .chat-expert-comingsoon .comingsoon-card {
        padding: 24px 18px;
    }

    .expert-preview-item {
        font-size: 0.95rem;
    }
}
/* ============================================================
   DISCUSSION FORUM STYLES (KEhub / WHO)
============================================================ */

/* ---------- Forum Hero ---------- */
.discussion-hero {
    background: linear-gradient(135deg, var(--who-blue), var(--who-blue-light));
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 0 0 14px 14px;
    margin-bottom: 40px;
}

.discussion-title {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.discussion-sub {
    font-size: 1.15rem;
    max-width: 800px;
    opacity: 0.95;
}

/* ---------- Categories ---------- */
.discussion-category-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 26px;
    border: 1px solid #e5e9ec;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .discussion-category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    }

.discussion-category-title {
    color: var(--who-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.discussion-category-meta {
    font-size: 0.95rem;
    color: #6c757d;
}

/* ---------- Question List ---------- */
.discussion-question-item {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 24px;
    border: 1px solid #e6eaee;
    margin-bottom: 14px;
    transition: 0.2s ease;
}

    .discussion-question-item:hover {
        background: #f8fbfd;
        transform: translateY(-2px);
    }

.discussion-question-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0b4f6c;
    margin-bottom: 4px;
}

.discussion-question-meta {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Locked badge */
.discussion-locked {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #adb5bd;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 10px;
}

/* ---------- Question Detail ---------- */
.discussion-question-body {
    font-size: 1.15rem;
    line-height: 1.65;
    color: #212529;
    margin-top: 16px;
}

/* ---------- Answers ---------- */
.discussion-answer-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #e5e9ec;
    margin-bottom: 18px;
    position: relative;
}

    /* Expert answer */
    .discussion-answer-card.expert {
        border-left: 6px solid #198754;
        background: #f0fff6;
    }

    /* Accepted answer */
    .discussion-answer-card.accepted {
        border-left: 6px solid #0b4f6c;
        background: #f4f9fd;
    }

/* Badges */
.discussion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-accepted {
    background-color: #0d6efd;
    color: #fff;
}

.badge-expert {
    background-color: #198754;
    color: #fff;
}
.discussion-action-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    text-decoration: underline;
}

    .discussion-action-link:hover {
        color: #0d6efd;
        text-decoration: none;
    }


/* Answer meta */
.discussion-answer-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------- Moderation Buttons ---------- */
.discussion-moderation-btn {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
}

/* ---------- Post Answer ---------- */
.discussion-answer-form {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e5e9ec;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-top: 40px;
}

    .discussion-answer-form h5 {
        font-weight: 700;
        color: var(--who-blue);
        margin-bottom: 14px;
    }

    .discussion-answer-form textarea {
        border-radius: 10px;
        resize: vertical;
    }

/* ---------- Accept / Expert Buttons ---------- */
.btn-accept-answer {
    background: #0b4f6c;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    padding: 4px 14px;
}

    .btn-accept-answer:hover {
        background: #094a63;
    }

.btn-mark-expert {
    border-radius: 8px;
    font-weight: 600;
    padding: 4px 14px;
}

/* ---------- Mobile Tweaks ---------- */
@media (max-width: 768px) {
    .discussion-hero {
        padding: 36px 24px;
        text-align: center;
    }

    .discussion-title {
        font-size: 1.9rem;
    }

    .discussion-answer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.badge-locked {
    background: #6c757d;
    color: #fff;
}

.badge-accepted {
    background: #0d6efd;
    color: #fff;
}

.badge-expert {
    background: #198754;
    color: #fff;
}

.discussion-answer-card.accepted {
    border-left: 6px solid #0d6efd;
}

.discussion-answer-card.expert {
    border-left: 6px solid #198754;
}

/* ============================
   BREADCRUMB
============================ */

.discussion-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.8);
}

    .discussion-breadcrumb a {
        color: rgba(255,255,255,0.9);
        text-decoration: none;
        font-weight: 500;
    }

        .discussion-breadcrumb a:hover {
            text-decoration: underline;
        }

    .discussion-breadcrumb span {
        opacity: 0.7;
    }

    .discussion-breadcrumb .current {
        font-weight: 600;
        color: #ffffff;
    }

/* Mobile tweak */
@media (max-width: 768px) {
    .discussion-breadcrumb {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }
}
/* ============================
   HERO
============================ */

.discussion-hero {
    background: linear-gradient(135deg, #0b4f6c, #126f99);
    padding: 3.5rem 0 3rem;
    color: #ffffff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.discussion-title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.discussion-sub {
    font-size: 1.05rem;
    max-width: 720px;
    line-height: 1.6;
    opacity: 0.95;
}

/* ============================
   ANSWER ACTION BUTTONS
============================ */

.discussion-action-btn {
    border: 1px solid #0d6efd;
    background: transparent;
    color: #0d6efd;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .discussion-action-btn:hover {
        background: #0d6efd;
        color: #ffffff;
    }

    .discussion-action-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
    }

.discussion-meta .d-flex {
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
/* ============================
   IMPORTANT NOTICE
============================ */

.important-notice {
    margin: 3rem auto;
    padding: 0 1.25rem;
}

.notice-container {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-left: 6px solid #0d6efd;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.notice-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

    .notice-header h2 {
        font-size: 1.6rem;
        font-weight: 700;
        margin: 0;
    }

.notice-badge {
    background: #0d6efd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.notice-deadline {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.75rem 0 1.25rem;
    color: #b02a37;
}

.notice-container h4 {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.notice-container ul {
    padding-left: 1.2rem;
}

    .notice-container ul li {
        margin-bottom: 0.4rem;
    }

.notice-email a {
    font-weight: 600;
    color: #0d6efd;
    text-decoration: none;
}

    .notice-email a:hover {
        text-decoration: underline;
    }

.notice-actions {
    margin: 1.75rem 0;
}

.notice-footer {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Mobile */
@media (max-width: 768px) {
    .notice-container {
        padding: 1.75rem;
    }

    .notice-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ============================
   IMPORTANT SUMMARY (PUBLIC)
============================ */

.important-summary {
    margin: 3rem auto 4rem;
    padding: 0 1.25rem;
}

.summary-card {
    max-width: 820px;
    margin: 0 auto;
    background: #ffffff;
    border-left: 5px solid #0d6efd;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

    .summary-header h3 {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
    }

.summary-badge {
    background: #0d6efd;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.summary-deadline {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.75rem 0;
    color: #b02a37;
}

.summary-note {
    color: #495057;
    font-size: 0.95rem;
}

.summary-actions {
    margin-top: 1.25rem;
}


/* ============================================================
   PARTICIPANT FEEDBACK
============================================================ */

.participant-feedback-section {
    padding: 30px 0 50px;
}

.feedback-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.feedback-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--who-blue);
    margin-bottom: 8px;
}

.feedback-subtitle {
    color: #555;
    font-size: 1rem;
    margin-bottom: 28px;
}

.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.feedback-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    border-top: 5px solid var(--who-blue);
    text-align: left;
}

.feedback-quote-mark {
    font-size: 3rem;
    line-height: 1;
    color: var(--who-blue);
    font-weight: 700;
    margin-bottom: 8px;
}

.feedback-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #222;
    margin-bottom: 18px;
    font-style: italic;
}

.feedback-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
}

@media (max-width: 768px) {
    .feedback-grid {
        grid-template-columns: 1fr;
    }

    .feedback-card {
        text-align: center;
    }
}

/* ============================================================
   PURPOSE FEEDBACK BOX
============================================================ */

.purpose-feedback-box {
    background: #ffffff;
    border-left: 5px solid var(--who-blue);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.purpose-feedback-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--who-blue);
    margin-bottom: 14px;
}

.purpose-feedback-quote {
    font-size: 1rem;
    line-height: 1.55;
    color: #222;
    font-style: italic;
    margin: 0 0 14px 0;
    padding-left: 16px;
    border-left: 3px solid #d7e7f5;
}

.purpose-feedback-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    margin: 8px 0 0;
}
.profile-image {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-image-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
}

.profile-image,
.profile-image-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.profile-image {
    object-fit: cover;
}

.profile-image-placeholder {
    background: #e9ecef;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
}

.project-card {
    border: 0;
    border-radius: 1rem;
}

.project-card-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.project-card-summary {
    font-size: 0.95rem;
}

.profile-image-sm,
.profile-image-placeholder-sm {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.profile-image-sm {
    object-fit: cover;
}

.profile-image-placeholder-sm {
    background: #e9ecef;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.admin-card {
    border: 0;
    border-radius: 1rem;
}

    .admin-card h4 {
        font-weight: 600;
    }


.ss-background-section {
    background: #dfeef5;
    padding: 70px 0;
}

.ss-background-card {
    max-width: 1100px;
    margin: 0 auto;
}

    .ss-background-card h2 {
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        color: #2f2b68;
        font-weight: 900;
        margin-bottom: 32px;
    }

    .ss-background-card p {
        font-size: 1.05rem;
        line-height: 1.8;
        color: #111;
        margin-bottom: 24px;
    }

.ss-partners-section {
    background: #dfeef5;
    padding: 45px 0 70px;
}

.ss-partners-card {
    background: rgba(255,255,255,0.45);
    border-radius: 22px;
    padding: 38px 30px;
    text-align: center;
    border: 1px solid rgba(11,79,108,0.12);
}

.ss-partner-label {
    color: #4d7184;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: lowercase;
}

.ss-logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    flex-wrap: wrap;
}

    .ss-logo-row img {
        max-height: 78px;
        max-width: 260px;
        object-fit: contain;
    }

.ss-logo-row-small img {
    max-height: 62px;
}

.ss-partners-card hr {
    border: 0;
    border-top: 2px solid rgba(11,79,108,0.12);
    margin: 35px auto;
    max-width: 760px;
}

.ss-support-text {
    margin-top: 28px;
    font-size: 0.85rem;
    color: #4d7184;
}

@media (max-width: 768px) {
    .ss-logo-row {
        gap: 28px;
    }

        .ss-logo-row img {
            max-height: 58px;
            max-width: 210px;
        }

    .ss-background-section {
        padding: 45px 0;
    }
}