/*
Theme Name: Skin Cancer Club
Description: Custom editable WordPress theme converted from Frontdesk HTML.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: skin-cancer-club
*/


html {
        
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #03297c;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #03297c;
    }
    
    }

        :root {
            --bg-dark: #07090e;
            --blue: #03297c;
            --blue-dark: #021f5e;

            --gold: #c6a367;
            --gold-dark: #a88851;

            --ivory: #efe7db;
            --cream: #f7f4ef;
            --white: #ffffff;

            --text-dark: #16191d;
            --text-muted: #686b70;

            --border: #e7e2da;

            --display-font: "Cinzel", serif;
            --body-font: "Plus Jakarta Sans", sans-serif;
        }

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

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: var(--body-font);
            -webkit-font-smoothing: antialiased;
        }

        body {
            background: var(--bg-dark);
            color: var(--text-dark);
            overflow: hidden;
            font-family: var(--body-font);
        }
        
        .member-dash-links {
            display: flex;
    flex-direction: column;
    gap: 15px;
        }

        /* ========================================
       GENERAL VIEW
    ======================================== */

        .view-screen {
            position: absolute;
            inset: 0;

            width: 100%;
            height: 100vh;
            height: 100dvh;

            transition:
                opacity 0.7s ease,
                transform 0.7s ease;

            opacity: 1;
            transform: scale(1);
        }

        .view-screen.hidden {
            opacity: 0;
            transform: scale(0.97);
            pointer-events: none;
            display: none !important;
        }

        /* ========================================
       SPLASH PAGE
    ======================================== */

        #splash-page {
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 0;

            overflow: hidden;

            background: #efe7db;
        }

        #splash-page::before {
            content: "";

            position: absolute;
            inset: 0;

            background: var(--scc-welcome-bg, url("assets/door.webp")) center center / cover no-repeat;

            filter: blur(34px) saturate(.85);

            transform: scale(1.09);

            opacity: .34;
        }

        #splash-page::after {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(90deg,
                    rgba(239, 231, 219, .98) 0%,
                    rgba(239, 231, 219, .78) 24%,
                    rgba(239, 231, 219, .08) 39%,
                    rgba(239, 231, 219, .08) 61%,
                    rgba(239, 231, 219, .78) 76%,
                    rgba(239, 231, 219, .98) 100%);

            backdrop-filter: blur(10px);

            z-index: 1;
        }

        .hero-wrapper {
            position: relative;

            z-index: 2;

            max-width: none;

            width: 100%;
            height: 100%;

            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 0;
        }

        .side-logo-container {
            flex: 1 1 0;

            height: 100%;

            min-width: 180px;

            padding: 2rem;

            display: flex;

            align-items: center;
            justify-content: center;

            background: transparent;

            border: 0;
            border-radius: 0;

            backdrop-filter: none;
        }

        .side-logo {
            width: 96%;

            max-width: 330px;
            max-height: 260px;

            object-fit: contain;

            filter:
                drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
        }

        .hero-center {
            align-self: stretch;

            flex: 0 1 min(58vw, 860px);

            display: flex;

            flex-direction: column;

            align-items: center;
            justify-content: flex-end;

            padding:
                3rem 3rem clamp(2.5rem, 7vh, 5.5rem);

            border-radius: 0;

            background:
                linear-gradient(rgba(7, 9, 14, .08),
                    rgba(7, 9, 14, .34)),
                var(--scc-welcome-bg, url("assets/door.webp")) center center / cover no-repeat;

            box-shadow:
                0 0 55px rgba(0, 0, 0, .3);
        }

        .hero-headline {
            font-family: var(--display-font);

            font-size: clamp(2.2rem, 3.3vw, 4.2rem);

            font-weight: 400;

            line-height: 1.2;

            letter-spacing: 1px;

            color: var(--ivory);

            margin-bottom: 1.25rem;

            text-align: center;

            text-shadow: 0 0 5px #000;
        }

        .enter-btn {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            gap: 0.6rem;

            background:
                linear-gradient(135deg,
                    var(--gold) 0%,
                    var(--gold-dark) 100%);

            color: #07090e;

            font-size: 0.85rem;

            font-weight: 700;

            letter-spacing: 1.8px;

            text-transform: uppercase;

            padding: 0.95rem 2.6rem;

            border: none;

            border-radius: 50px;

            cursor: pointer;

            box-shadow:
                0 8px 24px rgba(198, 163, 103, 0.25);

            transition: all 0.3s ease;
        }

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

            box-shadow:
                0 12px 30px rgba(198, 163, 103, 0.45);
        }

        .enter-btn svg {
            width: 16px;
            height: 16px;
        }

        /* ========================================
       HOME PAGE
    ======================================== */

        #home-page {
            display: grid;

            grid-template-columns:
                340px minmax(0, 1fr);

            width: 100%;

            height: 100vh;
            height: 100dvh;

            background: #f5f2ed;
        }

        /* ========================================
       SIDEBAR
    ======================================== */

        .left-sidebar {
            height: 100vh;
            height: 100dvh;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            padding: 2.2rem 1.8rem;

            background: var(--ivory);

            border-right:
                1px solid rgba(0, 0, 0, 0.08);

            box-shadow:
                5px 0 25px rgba(0, 0, 0, 0.12);

            z-index: 20;
        }

        .brand-group {
            display: flex;

            align-items: center;
            justify-content: center;
        }

        .brand-logo-main {
            width: auto;

            height: 120px;

            object-fit: contain;
        }

        .vertical-nav {
            display: flex;

            flex-direction: column;

            gap: 0.75rem;

            margin: auto 0;
        }

        .nav-button {
            display: flex;

            align-items: center;
            justify-content: space-between;

            padding: 0.95rem 1.25rem;

            border-radius: 12px;

            background: rgba(0, 0, 0, 0.035);

            border:
                1px solid rgba(0, 0, 0, 0.07);

            color: #4a4d48;

            font-family: var(--display-font);

            font-size: 0.85rem;

            letter-spacing: 0.8px;

            text-decoration: none;

            transition: all 0.3s ease;
        }

        .nav-button:hover {
            background: rgba(0, 0, 0, 0.07);

            color: #07090e;

            border-color: var(--gold);

            transform: translateX(4px);
        }

        .nav-button.active {
            background: var(--blue);

            color: var(--ivory);

            border-color: var(--blue);

            box-shadow:
                0 5px 16px rgba(3, 41, 124, 0.22);
        }

        .btn-arrow {
            width: 14px;
            height: 14px;

            stroke: currentColor;

            opacity: 0;

            transition: opacity 0.25s ease;
        }

        .nav-button:hover .btn-arrow,
        .nav-button.active .btn-arrow {
            opacity: 1;
        }

        .sidebar-member-btn {
            display: block;

            text-align: center;

            padding: 0.85rem 1.4rem;

            border-radius: 50px;

            background: var(--blue);

            color: var(--ivory);

            border: 1px solid var(--blue);

            text-decoration: none;

            font-size: 0.8rem;

            font-weight: 600;

            letter-spacing: 1.5px;

            text-transform: uppercase;

            transition: all 0.3s ease;
        }

        .sidebar-member-btn:hover {
            background: transparent;

            color: var(--blue);

            transform: translateY(-2px);
        }

        .members-login-nav {
            margin-top: .35rem;

            border-color:
                rgba(198, 163, 103, .55);
        }

        .members-login-nav span {
            font-weight: 600;
        }

        .ft-text {
            color: var(--text-muted);
            font-size: 0.65rem;
            line-height: 1.6;
            text-align: center;
        }

        .ft-text a {
            color: inherit;
        }

        .ft-btm {
            display: none;
        }

        .section-block > .ft-btm {
            display: none;
        }

        /* ========================================
       RIGHT CONTENT
    ======================================== */

        .right-scroll-container {
            position: relative;

            height: 100vh;
            height: 100dvh;

            overflow: hidden;

            background: #efe7db;
        }

        .right-scroll-container::-webkit-scrollbar {
            width: 8px;
        }

        .right-scroll-container::-webkit-scrollbar-track {
            background: #eeeae3;
        }

        .right-scroll-container::-webkit-scrollbar-thumb {
            background: #c8c1b6;

            border-radius: 20px;
        }

        .section-block {
            min-height: 100vh;
            min-height: 100dvh;

            width: 100%;

            display: flex;

            justify-content: center;

            align-items: flex-start;

            padding: 25px 30px 70px;

            background: #efe7db;
        }

        .right-scroll-container>.section-block {
            display: none !important;

            height: 100%;

            min-height: 0 !important;

            overflow-y: auto;

            overscroll-behavior: contain;
        }

        .right-scroll-container>.section-block.active-section {
            display: block !important;
        }

        .section-inner {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        .section-banner {
            width: 100%;

            display: block;

            object-fit: cover;

            object-position: center center;
        }

        .section-content {
            padding: 45px 30px 20px;

            background: transparent;
        }

        .content-heading {
            position: relative;

            padding-left: 28px;

            margin-bottom: 38px;
        }

        .content-heading::before {
            content: "";

            position: absolute;

            left: 0;
            top: 0;

            width: 4px;

            height: 100%;

            min-height: 72px;

            background: var(--blue);
        }

        .pane-title {
            font-family: var(--display-font);
            font-size: 2.5rem;
            font-weight: 500;
            line-height: 1.35;
            color: #1c2430;
            margin-bottom: 0;
        }

        .pane-description {
            max-width: 760px;

            color: #50545a;

            font-size: 0.98rem;

            line-height: 1.9;

            font-weight: 400;

            margin-bottom: 22px;
        }

        .content-list {
            color: #50545a;

            font-size: 0.98rem;

            line-height: 1.9;

            padding-left: 1.35rem;

            margin: -8px 0 30px;
        }

        .content-list li {
            margin-bottom: 15px;

            padding-left: 8px;
        }

        .sub-content-title {
            font-family: var(--display-font);

            color: #1c2430;

            font-size: 2rem;

            font-weight: 500;

            line-height: 1.35;

            margin: 42px 0 22px;
        }

        .content-emphasis {
            color: #1c2430;

            font-size: 1rem;

            line-height: 1.85;

            font-weight: 600;

            margin: 24px 0 28px;
        }

        /* ========================================
       IMAGE SECTIONS
    ======================================== */

        #sec-home,
        #sec-vision,
        #sec-visionary,
        #sec-benefits {
            display: block;

            padding: 0 0 70px;

            min-height: 100vh;
        }

        #sec-home .section-inner,
        #sec-vision .section-inner,
        #sec-visionary .section-inner,
        #sec-benefits .section-inner {
            max-width: none;

            width: 100%;

            min-height: 100dvh;
        }

        #sec-home .section-banner,
        #sec-vision .section-banner,
        #sec-visionary .section-banner,
        #sec-benefits .section-banner {
            width: 100% !important;

            height: auto !important;

            min-height: 0 !important;

            max-height: none !important;

            object-fit: contain !important;

            object-position: center center !important;

            display: block !important;
        }

        #sec-home .section-content,
        #sec-vision .section-content,
        #sec-visionary .section-content,
        #sec-benefits .section-content {
            width: min(900px,
                    calc(100% - 60px));

            margin: 0 auto;

            padding: 55px 0 20px;
        }

        #sec-home .pane-description,
        #sec-vision .pane-description,
        #sec-visionary .pane-description,
        #sec-benefits .pane-description {
            max-width: 100%;
        }

        /* ========================================
       SCROLL CUE
    ======================================== */

        .image-tab {
            position: relative;
        }

        .scroll-down-cue {
            position: absolute;

            right: 28px;
            bottom: 26px;

            z-index: 12;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 11px 16px;

            border:
                1px solid rgba(255, 255, 255, .58);

            border-radius: 999px;

            background:
                rgba(239, 231, 219, .82);

            backdrop-filter: blur(12px);

            color: #1c2430;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 1.4px;

            text-transform: uppercase;

            cursor: pointer;

            box-shadow:
                0 8px 24px rgba(0, 0, 0, .12);
        }

        .scroll-down-cue span {
            font-size: 17px;

            line-height: 1;

            animation:
                scrollCue 1.5s ease-in-out infinite;
        }

        @keyframes scrollCue {

            0%,
            100% {
                transform: translateY(-2px);
            }

            50% {
                transform: translateY(3px);
            }
        }

        /* ========================================
       CANDIDATE / APPLY
    ======================================== */

        #sec-candidate,
        #sec-apply {
            min-height: 100%;

            padding: 0;

            background: #efe7db;

            position: relative;
        }

        #sec-candidate::before,
        #sec-apply::before {
            content: "";

            position: absolute;

            inset: 0;

            background:
                radial-gradient(circle at center,
                    rgba(255, 255, 255, .76),
                    rgba(239, 231, 219, .9) 52%,
                    #efe7db 100%);

            filter: blur(8px);
        }

        #sec-candidate .section-inner,
        #sec-apply .section-inner {
            position: relative;

            z-index: 1;

            min-height: 100dvh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 3rem;
        }

        #sec-candidate .section-banner,
        #sec-apply .section-banner {
            display: none !important;
        }

        #sec-candidate .section-content,
        #sec-apply .section-content {
            width: min(760px, 100%);

            max-width: 760px;

            margin: 0 auto;

            padding: 4rem 2.5rem;

            text-align: center;

            background:
                rgba(247, 244, 239, .96);

            border-radius: 20px;

            box-shadow:
                0 22px 60px rgba(0, 0, 0, .16);
        }

        #sec-candidate .content-heading,
        #sec-apply .content-heading {
            padding-left: 0;

            margin-bottom: 30px;
        }

        #sec-candidate .content-heading::before,
        #sec-apply .content-heading::before {
            display: none;
        }

        #sec-candidate .pane-description,
        #sec-apply .pane-description {
            margin-left: auto;

            margin-right: auto;
        }

        #sec-candidate .content-list,
        #sec-apply .content-list {
            display: inline-block;

            text-align: left;

            margin-left: auto;

            margin-right: auto;
        }

        /* ========================================
       MEMBER LOGIN PAGE
    ======================================== */

        #member-login-page {
            position: fixed;

            inset: 0;

            z-index: 9999;

            display: none;

            align-items: center;

            justify-content: center;

            background:
                linear-gradient(135deg,
                    rgba(239, 231, 219, .97),
                    rgba(247, 244, 239, .98));

            padding: 30px;
        }

        #member-login-page.active {
            display: flex;
        }

        .member-login-card {
            width: min(520px, 100%);

            padding: 50px 40px;

            text-align: center;

            background:
                rgba(255, 255, 255, .94);

            border:
                1px solid rgba(3, 41, 124, .12);

            border-radius: 24px;

            box-shadow:
                0 25px 70px rgba(0, 0, 0, .15);

            animation:
                loginFadeIn .4s ease;
        }

        @keyframes loginFadeIn {
            from {
                opacity: 0;

                transform:
                    translateY(20px) scale(.98);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0) scale(1);
            }
        }

        .member-login-logo {
            width: 150px;

            max-height: 110px;

            object-fit: contain;

            margin-bottom: 25px;
        }

        .member-login-title {
            font-family: var(--display-font);

            font-size: 2.4rem;

            font-weight: 500;

            color: #1c2430;

            margin-bottom: 12px;
        }

        .member-login-description {
            color: #686b70;

            font-size: .95rem;

            line-height: 1.7;

            margin-bottom: 30px;
        }

        .member-login-buttons {
            display: flex;

            justify-content: center;

            gap: 14px;

            margin-bottom: 25px;
        }

        .member-login-btn {
            min-width: 140px;

            padding: 13px 25px;

            border-radius: 50px;

            font-family: var(--body-font);

            font-size: .8rem;

            font-weight: 700;

            letter-spacing: 1.2px;

            text-transform: uppercase;

            cursor: pointer;

            transition: all .3s ease;
        }

        .member-signin-btn {
            color: var(--ivory);

            background: var(--blue);

            border:
                1px solid var(--blue);
        }

        .member-signin-btn:hover {
            background: var(--blue-dark);

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(3, 41, 124, .25);
        }

        .member-signup-btn {
            color: var(--blue);

            background: transparent;

            border:
                1px solid var(--blue);
        }

        .member-signup-btn:hover {
            color: white;

            background: var(--blue);

            transform: translateY(-2px);
        }

        .member-login-message {
            min-height: 24px;

            color: var(--blue);

            font-size: .9rem;

            font-weight: 600;

            margin-bottom: 25px;
        }

        .member-login-back {
            background: none;

            border: none;

            color: #686b70;

            font-family: var(--body-font);

            font-size: .78rem;

            font-weight: 600;

            letter-spacing: .8px;

            cursor: pointer;

            transition: color .25s ease;
        }

        .member-login-back:hover {
            color: var(--blue);
        }

        /* ========================================
       RESPONSIVE
    ======================================== */

        @media (max-width: 1024px) {

            #home-page {
                grid-template-columns: minmax(0, 1fr);

                grid-template-rows: auto 1fr;

                width: 100%;
            }

            .left-sidebar {
                height: auto;

                min-width: 0;

                padding: 1rem 1.2rem;

                border-right: none;

                border-bottom:
                    1px solid rgba(0, 0, 0, .08);

                box-shadow:
                    0 4px 15px rgba(0, 0, 0, .08);
            }

            .left-sidebar > .ft-text:not(.ft-btm) {
                display: none;
            }

            .brand-group {
                margin-bottom: 12px;
            }

            .brand-logo-main {
                height: 80px;
            }

            .vertical-nav {
                flex-direction: row;

                flex-wrap: wrap;

                margin: 0;

                padding-bottom: 0;
            }

            .nav-button {
                flex: 1 1 9rem;

                white-space: nowrap;
            }

            .sidebar-member-btn {
                display: none;
            }

            .side-logo {
                max-width: 240px;

                max-height: 190px;
            }
        }

        @media (max-width: 700px) {

            #splash-page {
                padding: 0;
            }

            .hero-wrapper {
                justify-content: center;
            }

            .side-logo-container {
                display: none;
            }

            .hero-center {
                flex: 1 1 100%;

                min-width: 0;
                width: 100%;

                padding:
                    1.2rem 1rem 2.5rem;
            }

            .hero-headline {
                font-size: 1.45rem;
            }

            .enter-btn {
                padding: .8rem 1.35rem;

                font-size: .72rem;
            }

            .left-sidebar {
                align-items: center;

                gap: .65rem;

                padding: .65rem .75rem;
            }

            .brand-group {
                margin-bottom: 0;
            }

            .brand-logo-main {
                height: 52px;
            }

            .vertical-nav {
                width: 100%;

                flex-wrap: wrap;

                justify-content: center;

                gap: .5rem;

                overflow: visible;

                padding-bottom: 0;
            }

            .nav-button {
                flex: 1 1 calc(50% - .5rem);

                min-width: 0;

                justify-content: space-between;

                padding: .65rem .75rem;

                font-size: .72rem;
            }

            #home-page {
                grid-template-rows: auto minmax(0, 1fr);

                min-height: 100dvh;
            }

            .right-scroll-container {
                min-width: 0;
                min-height: 0;
            }

            .section-block {
                padding: 16px 12px 48px;
            }

            .section-block > .ft-btm {
                display: block;
                margin-top: 2rem;
                padding-top: 1rem;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
            }

            .section-content {
                padding: 28px 0 20px;
            }

            #sec-home .section-content,
            #sec-vision .section-content,
            #sec-visionary .section-content,
            #sec-benefits .section-content {
                width: 100%;

                padding: 35px 0 20px;
            }

            .content-heading {
                padding-left: 20px;

                margin-bottom: 28px;
            }

            .content-heading::before {
                width: 3px;

                min-height: 55px;
            }

            .pane-title {
                font-size: 1.35rem;
            }

            .pane-description {
                font-size: .88rem;

                line-height: 1.75;
            }

            .content-list {
                font-size: .88rem;

                line-height: 1.75;
            }

            .sub-content-title {
                font-size: 1.45rem;
            }

            .content-emphasis {
                font-size: .9rem;
            }

            .scroll-down-cue {
                right: 14px;
                bottom: 20px;
                padding: 9px 12px;
                font-size: 9px;
                position: fixed;
            }

            #sec-candidate .section-inner,
            #sec-apply .section-inner {
                padding: 1rem;
            }

            #sec-candidate .section-content,
            #sec-apply .section-content {
                padding: 2.2rem 1rem;

                border-radius: 14px;
            }

            .member-login-card {
                padding: 38px 22px;

                border-radius: 18px;
            }

            .member-login-title {
                font-size: 1.8rem;
            }

            .member-login-buttons {
                flex-direction: column;
            }

            .member-login-btn {
                width: 100%;
            }
        }


        /* MEMBER PORTAL EXTENSION */
        .member-login-card {
            max-height: 92dvh;
            overflow-y: auto;
        }

        .member-auth-form {
            display: none;
            text-align: left;
            margin: 20px 0;
        }

        .member-auth-form.active {
            display: block;
        }

        .member-auth-form label {
            display: block;
            font-size: .8rem;
            font-weight: 700;
            margin: 13px 0 6px;
            color: #1c2430;
        }

        .member-auth-form input {
            width: 100%;
            padding: 13px 14px;
            border: 1px solid #d6d0c8;
            border-radius: 9px;
            font: inherit;
            background: #fff;
        }

        .member-auth-form input:focus {
            outline: 2px solid #c6a367;
            outline-offset: 1px;
        }

        .member-auth-submit {
            width: 100%;
            margin-top: 22px;
            padding: 14px;
            background: #03297c;
            color: white;
            border: 0;
            border-radius: 25px;
            font-weight: 700;
            cursor: pointer;
            font-family: var(--body-font);
        }

        .member-auth-note {
            font-size: .76rem;
            color: #686b70;
            line-height: 1.6;
            margin-top: 12px;
        }

        #member-dashboard {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: none;
            background: #f7f4ef;
            font-family: var(--body-font);
        }

        #member-dashboard.active {
            display: grid;
            grid-template-columns: 300px minmax(0, 1fr);
        }

        .member-dash-sidebar {
            background: #efe7db;
            padding: 35px 22px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-right: 1px solid #ded6cb;
            overflow-y: auto;
        }

        .member-dash-sidebar img {
               width: auto;
    height: 120px;
    object-fit: contain;
            align-self: center;
            margin-bottom: 16px;
        }

        .member-dash-nav {
            display: block;
            text-align: left;
            width: 100%;
            padding: 15px;
            background: transparent;
            border: 1px solid #d7cec0;
            border-radius: 10px;
            color: #25334b;
            font: 600 .85rem var(--body-font);
            cursor: pointer;
        }

        .member-dash-nav.active,
        .member-dash-nav:hover {
            background: #03297c;
            color: white;
            border-color: #03297c;
        }

        .member-dash-logout {
            margin-top: auto;
            padding: 12px;
            background: transparent;
            border: 1px solid #03297c;
            border-radius: 30px;
            color: #03297c;
            font-weight: 700;
            font-family: var(--body-font);
            cursor: pointer;
        }

        .member-dash-main {
            overflow-y: auto;
            padding: clamp(25px, 5vw, 75px);
        }

        .member-dash-eyebrow {
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #a88851;
            font-weight: 700;
            font-size: .75rem;
        }

        .member-dash-main h1 {
            font: 500 clamp(1.8rem, 3.5vw, 3rem) var(--display-font);
            color: #1c2430;
            margin: 15px 0 30px;
        }

        .member-resource-panel {
            max-width: 820px;
            padding: clamp(25px, 4vw, 50px);
            background: #fff;
            border: 1px solid #e7e2da;
            border-radius: 16px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, .04);
        }

        .member-resource-panel p {
            font-size: 1rem;
            line-height: 1.9;
            color: #50545a;
            margin-bottom: 26px;
        }

        .member-resource-link {
            display: inline-flex;
            gap: 10px;
            align-items: center;
            padding: 13px 20px;
            border-radius: 30px;
            background: #03297c;
            color: #fff;
            text-decoration: none;
            font-size: .86rem;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .member-resource-link:hover {
            background: #021f5e;
        }

        .member-dash-welcome {
            color: #686b70;
            font-size: .85rem;
            margin-bottom: 25px;
        }

        @media(max-width:750px) {
            #member-dashboard.active {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
            }

            .member-dash-sidebar {
                padding: 12px;
                gap: 8px;
            }

            .member-dash-sidebar img {
                height: 55px;
                margin: 0 auto;
            }

            .member-dash-links {
                display: flex;
                overflow-x: auto;
                background: #efe7db;
                flex-direction: row;
                gap: 8px;
                padding-bottom: 4px;
                scrollbar-width: thin;

            }

            .member-dash-nav {
                flex: 0 0 auto;

                min-width: 155px;
                font-size: .73rem;
                padding: 11px;
            }

            .member-dash-logout {
                margin-top: 6px;
            }

            .member-dash-main {
                padding: 22px 16px;
            }
        }
    
/* Smooth native scrolling without modifying original layout. */
.section-block { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .section-block { scroll-behavior: auto !important; }
}






.container.main-content, .container.normal-container.row {
    --scroll-bar-w: 0px !important;
}


/* =========================================
   Extra Large Screens / 4K / Wide Monitors
========================================= */
@media (min-width: 1600px) {
}
/* =========================================
   Large Desktop Screens
========================================= */
@media (min-width: 1400px) and (max-width: 1599px) {
}
/* =========================================
   Desktop / Large Laptop
========================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
}
/* =========================================
   Small Laptop / Notebook
========================================= */
@media (min-width: 992px) and (max-width: 1199px) {
.section-block {
    padding-bottom: 200px !important;
}
	
}
/* =========================================
   Tablet / iPad
========================================= */
@media (min-width: 768px) and (max-width: 991px) {
}
/* =========================================
   Large Mobile Devices
========================================= */
@media (min-width: 576px) and (max-width: 767px) {
}
/* =========================================
   Mobile Devices
========================================= */
@media (max-width: 575px) {
.section-block {
    padding-bottom: 300px !important;
}



	
	
	
}