/* =========================================================
   GWC — GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND COLORS
       ----------------------------------------------------- */

    --color-primary: #5B247A;
    --color-primary-dark: #3B1554;
    --color-primary-light: #7B3FA0;

    --color-gold: #D4AF37;
    --color-gold-light: #E7CA70;
    --color-gold-dark: #A8871F;

    --color-white: #FFFFFF;
    --color-black: #111111;

    --color-dark: #21182A;
    --color-dark-soft: #33263B;

    --color-gray-50: #FAF9FB;
    --color-gray-100: #F4F1F6;
    --color-gray-200: #E8E3EB;
    --color-gray-300: #D5CDD9;
    --color-gray-500: #77717C;
    --color-gray-700: #4A454D;

    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    --font-display:
        "Playfair Display",
        Georgia,
        serif;

    --font-body:
        "Inter",
        Arial,
        sans-serif;

    /* -----------------------------------------------------
       FONT SIZES
       ----------------------------------------------------- */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1280px;
    --container-padding: 1.5rem;

    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;

    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-sm:
        0 4px 12px rgba(33, 24, 42, 0.06);

    --shadow-md:
        0 10px 30px rgba(33, 24, 42, 0.10);

    --shadow-lg:
        0 20px 60px rgba(33, 24, 42, 0.15);

    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --transition-fast:
        0.2s ease;

    --transition:
        0.35s ease;

    --transition-slow:
        0.6s ease;
}


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-dark);
    background: var(--color-white);

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--color-dark);
}


h1 {
    font-size: clamp(
        2.75rem,
        6vw,
        var(--text-6xl)
    );
}


h2 {
    font-size: clamp(
        2rem,
        4vw,
        var(--text-4xl)
    );
}


h3 {
    font-size: clamp(
        1.5rem,
        3vw,
        var(--text-3xl)
    );
}


p {
    color: var(--color-gray-700);
}


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.container {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline: auto;
}


.section {
    padding-block: var(--space-24);
}


.section-sm {
    padding-block: var(--space-16);
}


.section-header {
    max-width: 760px;
    margin-bottom: var(--space-12);
}


.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    margin-bottom: var(--space-4);

    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: var(--color-primary);
}


.section-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;

    background: var(--color-gold);
}


.section-title {
    margin-bottom: var(--space-5);
}


.section-description {
    max-width: 680px;
    font-size: var(--text-lg);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: 52px;

    padding-inline: 1.5rem;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: var(--text-sm);
    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.btn:hover {
    transform: translateY(-2px);
}


.btn-primary {
    color: var(--color-white);
    background: var(--color-primary);

    box-shadow:
        0 8px 24px rgba(91, 36, 122, 0.25);
}


.btn-primary:hover {
    background: var(--color-primary-dark);
}


.btn-gold {
    color: var(--color-dark);
    background: var(--color-gold);

    box-shadow:
        0 8px 24px rgba(212, 175, 55, 0.25);
}


.btn-gold:hover {
    background: var(--color-gold-light);
}


.btn-outline {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
}


.btn-outline:hover {
    color: var(--color-white);
    background: var(--color-primary);
}


.btn-white {
    color: var(--color-primary);
    background: var(--color-white);
}


.btn-white:hover {
    background: var(--color-gray-100);
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    background: var(--color-white);

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}


/* =========================================================
   DARK SECTIONS
   ========================================================= */

.section-dark {
    color: var(--color-white);
    background: var(--color-dark);
}


.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-white);
}


.section-dark p {
    color: rgba(255, 255, 255, 0.75);
}


.section-purple {
    color: var(--color-white);
    background: var(--color-primary);
}


.section-purple h1,
.section-purple h2,
.section-purple h3 {
    color: var(--color-white);
}


.section-purple p {
    color: rgba(255, 255, 255, 0.8);
}


/* =========================================================
   UTILITIES
   ========================================================= */

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


.text-gold {
    color: var(--color-gold);
}


.text-primary {
    color: var(--color-primary);
}


.bg-light {
    background: var(--color-gray-50);
}


.bg-white {
    background: var(--color-white);
}


.hidden {
    display: none !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}
/* ==========================================================================
   MEMBER PROFILE
   ========================================================================== */

.member-page {
    padding: 4rem 0 6rem;
}

.member-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}

.member-page-header h1 {
    margin: .5rem 0;
}

.member-page-header p {
    margin: 0;
    opacity: .7;
}

.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}

.profile-sidebar {
    position: sticky;
    top: 2rem;
}

.profile-card {
    padding: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
}

.profile-avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #d4af37,
        #f3d77a
    );
    color: #171717;
    font-size: 2rem;
    font-weight: 800;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card h2 {
    margin: 0 0 .35rem;
}

.profile-email {
    margin: 0 0 1.5rem;
    opacity: .65;
    font-size: .9rem;
    word-break: break-word;
}

.membership-badge {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .2);
}

.membership-badge span,
.membership-badge strong {
    display: block;
}

.membership-badge span {
    font-size: .75rem;
    opacity: .6;
    margin-bottom: .25rem;
}

.membership-badge strong {
    color: #d4af37;
    font-size: .9rem;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36c275;
}

.profile-main {
    min-width: 0;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-section {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .025);
}

.section-heading {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.section-heading > span {
    color: #d4af37;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.section-heading h2 {
    margin: 0 0 .35rem;
    font-size: 1.25rem;
}

.section-heading p {
    margin: 0;
    opacity: .6;
    font-size: .9rem;
}

.profile-section .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.profile-section .form-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.profile-section .form-group:last-child {
    grid-column: 1 / -1;
}

.profile-section input,
.profile-section textarea {
    width: 100%;
    box-sizing: border-box;
}

.profile-section input[readonly] {
    opacity: .55;
    cursor: not-allowed;
}

.profile-section small {
    font-size: .75rem;
    opacity: .55;
}

.privacy-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(212, 175, 55, .05);
    border: 1px solid rgba(212, 175, 55, .15);
    cursor: pointer;
}

.privacy-option input {
    margin-top: .3rem;
    accent-color: #d4af37;
}

.privacy-option strong,
.privacy-option small {
    display: block;
}

.privacy-option strong {
    margin-bottom: .35rem;
}

.privacy-option small {
    line-height: 1.6;
}

.profile-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

@media (max-width: 900px) {

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
    }

}

@media (max-width: 767px) {

    .member-page {
        padding: 2.5rem 0 4rem;
    }

    .member-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-section {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .profile-section .form-grid {
        grid-template-columns: 1fr;
    }

    .profile-section .form-group:last-child {
        grid-column: auto;
    }

    .profile-actions {
        flex-direction: column;
    }

    .profile-actions .btn {
        width: 100%;
        text-align: center;
    }

}
/* ==========================================================================
   GWC MEMBER DASHBOARD
   ========================================================================== */

.member-dashboard {
    padding: 3rem 0 5rem;
}

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding: 3rem;
    margin-bottom: 1.5rem;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(212, 175, 55, .18),
            transparent 35%
        ),
        rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
}

.dashboard-welcome h1 {
    margin: .6rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.dashboard-welcome h1 span {
    color: #d4af37;
}

.dashboard-welcome p {
    max-width: 650px;
    margin: 0;
    opacity: .65;
    line-height: 1.8;
}

.membership-highlight {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    background: rgba(212, 175, 55, .06);
    border: 1px solid rgba(212, 175, 55, .18);
}

.membership-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #d4af37;
    color: #151515;
    font-size: .8rem;
    font-weight: 900;
}

.membership-info {
    flex: 1;
}

.membership-info span,
.membership-status small {
    display: block;
    font-size: .65rem;
    letter-spacing: .12em;
    opacity: .55;
}

.membership-info strong {
    display: block;
    margin-top: .25rem;
    color: #d4af37;
}

.membership-status {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #36c275;
}

.membership-status strong {
    display: block;
    margin-top: .2rem;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
}

.stat-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(212, 175, 55, .1);
    color: #d4af37;
    font-weight: 800;
}

.dashboard-stat span {
    display: block;
    font-size: .65rem;
    letter-spacing: .08em;
    opacity: .55;
}

.dashboard-stat strong {
    display: block;
    margin: .25rem 0;
    font-size: 1.5rem;
}

.dashboard-stat small {
    display: block;
    opacity: .5;
    font-size: .72rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
}

.dashboard-panel {
    padding: 1.75rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.panel-eyebrow {
    display: block;
    margin-bottom: .4rem;
    color: #d4af37;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.panel-header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.panel-header > a {
    color: #d4af37;
    font-size: .8rem;
    text-decoration: none;
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 17px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
}

.project-image {
    width: 105px;
    min-width: 105px;
    height: 105px;
    overflow: hidden;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .1);
    color: #d4af37;
    font-weight: 900;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-location {
    display: block;
    margin-bottom: .3rem;
    color: #d4af37;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.project-content h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
}

.project-content p {
    margin: 0 0 .6rem;
    opacity: .55;
    font-size: .8rem;
    line-height: 1.6;
}

.project-content a {
    color: #d4af37;
    font-size: .75rem;
    text-decoration: none;
}

.event-list {
    display: flex;
    flex-direction: column;
}

.event-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.event-item:last-child {
    border-bottom: 0;
}

.event-date {
    width: 55px;
    min-width: 55px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(212, 175, 55, .1);
}

.event-date strong {
    color: #d4af37;
    font-size: 1.25rem;
}

.event-date span {
    font-size: .6rem;
    opacity: .55;
}

.event-content h3 {
    margin: 0 0 .3rem;
    font-size: .95rem;
}

.event-content span {
    display: block;
    margin-bottom: .4rem;
    opacity: .5;
    font-size: .75rem;
}

.event-content a {
    color: #d4af37;
    font-size: .7rem;
    text-decoration: none;
}

.mini-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mini-avatar {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d4af37;
    color: #151515;
    font-weight: 800;
}

.mini-profile h3 {
    margin: 0 0 .25rem;
}

.mini-profile p {
    margin: 0;
    opacity: .5;
    font-size: .75rem;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.profile-details > div {
    padding: .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.profile-details span {
    display: block;
    margin-bottom: .3rem;
    font-size: .6rem;
    opacity: .45;
}

.profile-details strong {
    display: block;
    font-size: .75rem;
    line-height: 1.4;
}

.notification-list {
    display: flex;
    flex-direction: column;
}

.notification-item {
    display: flex;
    gap: .85rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item.unread {
    position: relative;
}

.notification-item.unread::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 1.5rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4af37;
}

.notification-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212, 175, 55, .1);
    color: #d4af37;
    font-size: .75rem;
    font-weight: 800;
}

.notification-item h3 {
    margin: 0 0 .25rem;
    font-size: .85rem;
}

.notification-item p {
    margin: 0 0 .3rem;
    opacity: .55;
    font-size: .72rem;
    line-height: 1.5;
}

.notification-item small {
    opacity: .35;
    font-size: .65rem;
}

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state.compact {
    padding: 1.5rem .5rem;
}

.empty-icon {
    width: 45px;
    height: 45px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212, 175, 55, .08);
    color: #d4af37;
    font-weight: 800;
}

.empty-state h3 {
    margin: 0 0 .4rem;
    font-size: .95rem;
}

.empty-state p {
    max-width: 350px;
    margin: auto;
    opacity: .5;
    font-size: .75rem;
    line-height: 1.6;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.quick-action-intro,
.quick-action {
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
}

.quick-action-intro h2 {
    margin: .4rem 0;
}

.quick-action-intro p {
    margin: 0;
    opacity: .5;
    font-size: .75rem;
    line-height: 1.6;
}

.quick-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 110px;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease;
}

.quick-action:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, .4);
}

.quick-action span {
    font-size: .85rem;
    font-weight: 600;
}

.quick-action strong {
    color: #d4af37;
    font-size: 1.2rem;
}

.dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.dashboard-footer strong {
    display: block;
    font-size: .8rem;
}

.dashboard-footer span {
    opacity: .4;
    font-size: .7rem;
}

.logout-link {
    color: #d4af37;
    font-size: .75rem;
    text-decoration: none;
}

@media (max-width: 1100px) {

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-action-intro {
        grid-column: 1 / -1;
    }

}

@media (max-width: 900px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 767px) {

    .member-dashboard {
        padding: 2rem 0 4rem;
    }

    .dashboard-welcome {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.5rem;
        border-radius: 22px;
    }

    .dashboard-welcome h1 {
        font-size: 2.3rem;
    }

    .membership-highlight {
        flex-wrap: wrap;
    }

    .membership-status {
        width: 100%;
        padding-top: .75rem;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        padding: 1.25rem;
        border-radius: 20px;
    }

    .project-item {
        flex-direction: column;
    }

    .project-image {
        width: 100%;
        height: 150px;
    }

    .profile-details {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .quick-action-intro {
        grid-column: auto;
    }

    .dashboard-footer {
        align-items: flex-start;
        gap: 1rem;
    }

}/* =========================================================
   CHAIRPERSON WELCOME IMAGE
   ========================================================= */

.welcome-image {
    position: relative;
}

.welcome-image-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background: #f5f1e8;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.chairperson-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
}

.chairperson-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.chairperson-badge span {
    display: block;
    margin-bottom: 4px;
    color: #b8860b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chairperson-badge strong {
    display: block;
    color: #241b16;
    font-size: 13px;
}

@media (max-width: 768px) {

    .welcome-image-frame {
        max-width: 100%;
        border-radius: 18px;
    }

    .chairperson-badge {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

}
.admin-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

.admin-logo img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}