:root {

            --primary-gradient-dark:
                linear-gradient(
                    90deg,
                    #004437,
                    #072a4d
                );

            --primary-green:
                #006b54;

            --primary-blue:
                #0f4c81;

            --danger-red:
                #dc3545;

            --danger-red-light:
                #fff0f1;

            --danger-red-border:
                #f2b8be;

            --text-dark:
                #173f3a;

            --text-muted:
                #687474;
        }


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

        html {
            scroll-behavior: smooth;
        }


        body {

            min-height: 100vh;

            margin: 0;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            background: #ffffff;

            color: #444444;
        }


        /* =====================================================
           NAVBAR
        ====================================================== */

        .portal-navbar {

            background: #ffffff;

            border-bottom:
                3px solid
                var(--primary-green);

            box-shadow:
                0 4px 18px
                rgba(0,68,55,.10);
        }


        .portal-logo {

            width: 260px;

            max-width: 100%;

            height: auto;
        }


        .navbar-nav .nav-link {

            color:
                var(--primary-blue);

            font-weight: 600;

            font-size: .92rem;

            padding:
                .75rem .8rem !important;

            transition:
                all .2s ease;
        }


        .navbar-nav .nav-link:hover {

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


        .login-btn {

            background:
                var(--primary-gradient-dark);

            color:
                #ffffff !important;

            border: none;

            border-radius: 7px;

            padding:
                .65rem 1.15rem !important;

            box-shadow:
                0 5px 14px
                rgba(0,68,55,.18);
        }


        .login-btn:hover {

            color: #ffffff !important;

            transform:
                translateY(-1px);

            box-shadow:
                0 7px 18px
                rgba(15,76,129,.25);
        }


        /* =====================================================
           HERO
        ====================================================== */

        .portal-header {

            background:
                var(--primary-gradient-dark);

            padding:
                55px 0 50px;

            position: relative;

            overflow: hidden;
        }


        .portal-header::before {

            content: "";

            position: absolute;

            width: 260px;

            height: 260px;

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

            border-radius: 50%;

            top: -120px;

            right: 5%;
        }


        .portal-header::after {

            content: "";

            position: absolute;

            width: 180px;

            height: 180px;

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

            border-radius: 50%;

            bottom: -100px;

            left: 8%;
        }


        .portal-header-content {

            position: relative;

            z-index: 2;
        }


        .portal-title {

            color: #ffffff;

            font-size:
                clamp(2rem,5vw,3rem);

            font-weight: 700;

            margin:
                0 0 10px;
        }


        .portal-subtitle {

            color: #ffffff;

            opacity: .90;

            font-size: 1.05rem;

            margin: 0;
        }


        /* =====================================================
           ANNOUNCEMENTS
        ====================================================== */

        .announcements-section {

            padding:
                40px 0 25px;
        }


        .announcement-wrapper {

            background: #ffffff;

            border:
                1px solid
                #e8eeee;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 6px 20px
                rgba(0,0,0,.08);
        }


        .announcement-header {

            background:
                var(--primary-gradient-dark);

            color: #ffffff;
        }


        .announcement-header-content {

            padding:
                22px 25px;
        }


        .announcement-icon {

            width: 48px;

            height: 48px;

            border-radius: 10px;

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

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 14px;

            font-size: 20px;
        }


        .announcement-title {

            color: #ffffff;

            font-size: 1.35rem;

            font-weight: 700;

            text-transform: uppercase;

            margin: 0;
        }


        .announcement-subtitle {

            margin:
                3px 0 0;

            color:
                rgba(255,255,255,.78);

            font-size: .88rem;
        }


        .announcement-badge {

            white-space: nowrap;

            padding:
                5px 9px;

            border-radius: 20px;

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

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

            font-size: .68rem;

            font-weight: 700;
        }


        .pulse-dot {

            width: 7px;

            height: 7px;

            display: inline-block;

            border-radius: 50%;

            background: #7ee2b8;
        }


        .announcement-alert {

            width: 40px;

            height: 40px;

            border-radius: 50%;

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

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 17px;
        }


        .announcement-body {

            padding: 18px;

            max-height: 520px;

            overflow-y: auto;

            overflow-x: hidden;

            scrollbar-width: thin;

            scrollbar-color:
                #006b54
                #eef3f2;
        }


        .announcement-body::-webkit-scrollbar {

            width: 7px;
        }


        .announcement-body::-webkit-scrollbar-track {

            background: #eef3f2;
        }


        .announcement-body::-webkit-scrollbar-thumb {

            background: #006b54;

            border-radius: 10px;
        }


        .announcement-item {

            display: flex;

            background: #ffffff;

            border:
                1px solid
                #e7eded;

            border-radius: 10px;

            overflow: hidden;
        }


        .announcement-item + .announcement-item {

            margin-top: 12px;
        }


        .announcement-side-bar {

            width: 4px;

            flex-shrink: 0;

            background:
                var(--primary-gradient-dark);
        }


        .announcement-content {

            flex: 1;

            padding:
                16px 18px;
        }


        .announcement-user {

            display: flex;

            align-items: center;

            gap: 10px;
        }


        .announcement-avatar {

            width: 42px;

            height: 42px;

            border-radius: 50%;

            object-fit: cover;

            border:
                2px solid
                #e5eeee;
        }


        .announcement-shared {

            display: flex;

            align-items: center;

            gap: 7px;
        }


        .shared-by {

            color:
                #17473f;

            font-size: .88rem;

            font-weight: 700;
        }


        .announcement-label {

            color:
                #8a9494;

            font-size: .72rem;
        }


        .new-badge {

            padding:
                3px 7px;

            border-radius: 4px;

            background:
                #e9f7f2;

            color:
                var(--primary-green);

            font-size: .61rem;

            font-weight: 700;
        }


        .announcement-message {

            margin-top: 12px;

            color: #4f5c5c;

            font-size: .86rem;

            line-height: 1.65;

            overflow-wrap: anywhere;
        }


        .announcement-message p {

            margin-bottom: 8px;
        }


        .announcement-message ul,
        .announcement-message ol {

            margin-top: 8px;

            margin-bottom: 8px;

            padding-left: 22px;
        }


        .announcement-message img {

            max-width: 100%;

            height: auto;

            border-radius: 7px;
        }


        .announcement-message a {

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


        .no-announcement {

            padding: 30px;

            text-align: center;

            border:
                1px dashed
                #d6e2e0;

            border-radius: 10px;

            background: #fafcfc;

            color: #7a8583;
        }


        .no-announcement i {

            display: block;

            margin-bottom: 8px;

            color:
                var(--primary-green);

            font-size: 28px;
        }


        .no-announcement strong {

            display: block;

            color: #365450;

            font-size: .9rem;
        }


        .announcement-footer {

            display: flex;

            justify-content:
                space-between;

            align-items: center;

            gap: 10px;

            padding:
                11px 18px;

            border-top:
                1px solid
                #edf1f1;

            color:
                #899393;

            font-size: .72rem;
        }


        .footer-status {

            display: flex;

            align-items: center;

            gap: 5px;

            color:
                var(--primary-green);

            font-weight: 600;
        }


        /* =====================================================
           TRAINING
        ====================================================== */

        .training-section {

            padding:
                15px 0 40px;
        }


        .training-wrapper {

            background: #ffffff;

            border:
                1px solid
                #e8eeee;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 6px 20px
                rgba(0,0,0,.08);
        }


        .training-header {

            background:
                var(--primary-gradient-dark);

            padding:
                22px 25px;

            color: #ffffff;
        }


        .training-header-icon {

            width: 48px;

            height: 48px;

            border-radius: 10px;

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

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 14px;

            font-size: 21px;
        }


        .training-main-title {

            margin: 0;

            font-size: 1.35rem;

            font-weight: 700;

            text-transform: uppercase;
        }


        .training-subtitle {

            margin:
                3px 0 0;

            color:
                rgba(255,255,255,.78);

            font-size: .88rem;
        }


        .training-badge {

            white-space: nowrap;

            padding:
                7px 12px;

            border-radius: 20px;

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

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

            font-size: .78rem;

            font-weight: 600;
        }


        .training-list {

            padding: 18px;
        }


        .training-card {

            padding: 18px;

            background: #ffffff;

            border:
                1px solid
                #e6eceb;

            border-radius: 11px;

            transition:
                all .2s ease;
        }


        .training-card + .training-card {

            margin-top: 12px;
        }


        .training-card:hover {

            box-shadow:
                0 5px 15px
                rgba(0,0,0,.07);

            transform:
                translateY(-1px);
        }


        .training-icon {

            width: 48px;

            height: 48px;

            border-radius: 10px;

            background: #eef7f4;

            color:
                var(--primary-green);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;
        }


        .training-code {

            display: inline-block;

            margin-bottom: 5px;

            padding:
                3px 8px;

            border-radius: 5px;

            background: #eef4f7;

            color:
                var(--primary-blue);

            font-size: .68rem;

            font-weight: 700;

            letter-spacing: .3px;
        }


        .training-title {

            margin:
                0 0 6px;

            color:
                var(--text-dark);

            font-size: 1.05rem;

            font-weight: 700;
        }


        .training-date {

            color:
                var(--primary-blue);

            font-size: .86rem;

            font-weight: 600;
        }


        .training-venue {

            margin-top: 6px;

            color:
                #687474;

            font-size: .82rem;
        }


        .training-venue i {

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


        .training-registration {

            margin-top: 6px;

            color:
                #777777;

            font-size: .79rem;
        }


        .training-registration i {

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


        .training-registration strong {

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


        /* =====================================================
           TRAINING STATUS
        ====================================================== */

        .training-status {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            margin-top: 7px;

            padding:
                5px 9px;

            border-radius: 5px;

            font-size: .68rem;

            font-weight: 700;
        }


        /* REGISTRATION OPEN */

        .training-status.open {

            background:
                #e8f7f1;

            color:
                #006b54;
        }


        /* REGISTRATION NOT YET OPEN */

        .training-status.upcoming {

            background:
                #eef4fa;

            color:
                #0f4c81;
        }


        /* =====================================================
           REGISTRATION CLOSED - RED
        ====================================================== */

        .training-status.closed {

            background:
                var(--danger-red-light);

            color:
                var(--danger-red);

            border:
                1px solid
                var(--danger-red-border);
        }


        /* =====================================================
           TRAINING ACTIONS
        ====================================================== */

        .training-actions {

            display: flex;

            flex-direction: column;

            gap: 7px;

            min-width: 180px;
        }


        .training-register-btn,
        .training-portal-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 100%;

            padding:
                9px 13px;

            border-radius: 7px;

            text-decoration: none;

            font-size: .80rem;

            font-weight: 600;

            white-space: nowrap;

            transition:
                all .2s ease;
        }


        /* REGISTER */

        .training-register-btn {

            background:
                var(--primary-gradient-dark);

            color: #ffffff;
        }


        .training-register-btn:hover {

            color: #ffffff;

            opacity: .92;

            transform:
                translateY(-1px);
        }


        .training-register-btn.disabled {

            background:
                #dfe5e4;

            color:
                #7a8583;

            pointer-events: none;

            cursor: not-allowed;
        }


        /* =====================================================
           TRAINING PORTAL
        ====================================================== */

        .training-portal-btn {

            background: #ffffff;

            color:
                var(--primary-blue);

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


        .training-portal-btn:hover {

            background:
                var(--primary-blue);

            color: #ffffff;

            transform:
                translateY(-1px);
        }


        /* =====================================================
           NO TRAINING
        ====================================================== */

        .no-training {

            padding: 30px;

            text-align: center;

            border:
                1px dashed
                #d6e2e0;

            border-radius: 10px;

            background: #fafcfc;

            color: #7a8583;
        }


        .no-training i {

            display: block;

            margin-bottom: 8px;

            color:
                var(--primary-green);

            font-size: 27px;
        }


        .no-training strong {

            display: block;

            color: #365450;

            font-size: .9rem;
        }


        /* =====================================================
           SERVICES
        ====================================================== */

        .services-section {

            padding:
                35px 0 65px;
        }


        .section-heading {

            color:
                var(--primary-blue);

            font-size: 1.8rem;

            font-weight: 700;

            margin-bottom: 8px;
        }


        .section-description {

            color:
                var(--primary-green);

            margin-bottom: 30px;
        }


        .service-card {

            height: 100%;

            border:
                1px solid
                rgba(0,68,55,.18);

            border-top:
                4px solid
                var(--primary-green);

            border-radius: 12px;

            background: #ffffff;

            box-shadow:
                0 7px 22px
                rgba(0,68,55,.08);

            transition:
                all .25s ease;

            overflow: hidden;
        }


        .service-card:hover {

            transform:
                translateY(-5px);

            border-top-color:
                var(--primary-blue);

            box-shadow:
                0 14px 30px
                rgba(15,76,129,.15);
        }


        .service-card-body {

            padding: 28px;

            display: flex;

            flex-direction: column;

            height: 100%;
        }


        .service-icon {

            width: 58px;

            height: 58px;

            border-radius: 10px;

            background:
                var(--primary-gradient-dark);

            color: #ffffff;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.35rem;

            margin-bottom: 20px;
        }


        .service-title {

            color:
                var(--primary-blue);

            font-size: 1.18rem;

            font-weight: 700;

            margin-bottom: 10px;
        }


        .service-description {

            color:
                var(--primary-green);

            font-size: .9rem;

            line-height: 1.6;

            margin-bottom: 18px;

            flex-grow: 1;
        }


        .client-notice {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            padding:
                10px 12px;

            margin-bottom: 18px;

            border-radius: 7px;

            background:
                rgba(15,76,129,.06);

            border:
                1px solid
                rgba(15,76,129,.14);

            color:
                var(--primary-blue);

            font-size: .78rem;

            line-height: 1.45;
        }


        .client-notice i {

            margin-top: 2px;

            flex-shrink: 0;

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


        .service-link {

            display: inline-flex;

            align-items: center;

            justify-content: space-between;

            gap: 12px;

            width: 100%;

            padding:
                11px 14px;

            border-radius: 7px;

            background:
                rgba(0,107,84,.07);

            color:
                var(--primary-blue);

            text-decoration: none;

            font-weight: 700;

            font-size: .88rem;

            border:
                1px solid
                rgba(0,107,84,.15);

            transition:
                all .2s ease;
        }


        .service-link:hover {

            background:
                var(--primary-gradient-dark);

            color: #ffffff;

            border-color: transparent;
        }


        .service-link i {

            transition:
                transform .2s ease;
        }


        .service-link:hover i {

            transform:
                translateX(4px);
        }


        /* =====================================================
           FOOTER BORDER
        ====================================================== */

        .portal-footer-border {

            height: 5px;

            background:
                var(--primary-gradient-dark);
        }


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

        @media (max-width: 991.98px) {

            .portal-logo {

                width: 230px;
            }


            .navbar-nav {

                padding-top: 10px;
            }


            .login-btn {

                display: inline-block;

                margin-top: 8px;

                margin-bottom: 8px;
            }

        }


        @media (max-width: 767.98px) {

            .portal-header {

                padding:
                    42px 0;
            }


            .announcements-section {

                padding:
                    25px 0 15px;
            }


            .training-section {

                padding:
                    10px 0 25px;
            }


            .announcement-header-content,
            .training-header {

                padding: 18px;
            }


            .training-badge {

                display: none;
            }


            .announcement-body {

                max-height: 450px;

                padding: 12px;
            }


            .announcement-title,
            .training-main-title {

                font-size: 1.15rem;
            }


            .announcement-icon,
            .training-header-icon {

                width: 42px;

                height: 42px;

                font-size: 18px;
            }


            .announcement-alert {

                display: none;
            }


            .training-card {

                padding: 14px;
            }


            .training-title {

                font-size: .98rem;
            }


            .training-actions {

                width: 100%;

                min-width: 0;

                margin-top: 5px;
            }


            .announcement-footer {

                flex-direction: column;

                align-items: flex-start;
            }


            .services-section {

                padding:
                    30px 0 50px;
            }

        }


        @media (max-width: 575.98px) {

            .portal-logo {

                width: 205px;
            }


            .portal-title {

                font-size: 2rem;
            }


            .portal-subtitle {

                font-size: .95rem;
            }


            .announcement-content {

                padding: 14px;
            }


            .announcement-message {

                font-size: .84rem;
            }

        }


/* =========================================================
   SMALL FLOATING QUICK ACCESS TOOLBAR
========================================================= */

.portal-quick-toolbar {
    position: fixed;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 1050;

    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 5px;

    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(0, 68, 55, .12);
    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .12);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Auto-hide */
    opacity: .18;
    transition: opacity .35s ease;
}

/* Fully visible when interacted with */
.portal-quick-toolbar:hover,
.portal-quick-toolbar:focus-within {
    opacity: 1;
}

/* Auto-hidden state */
.portal-quick-toolbar.toolbar-idle {
    opacity: .12;
}


/* =========================================================
   QUICK ACCESS BUTTONS
========================================================= */

.portal-quick-link {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;
    color: #fff;
    text-decoration: none;

    transition: all .2s ease;
}

.portal-quick-link.gmail {
    background: #ea4335;
}

.portal-quick-link.chatgpt {
    background: #111827;
}

.portal-quick-link.hostinger {
    background: #673de6;
}

.portal-quick-link i {
    font-size: 15px;
}

.portal-quick-link span {
    display: none;
}

.portal-quick-link:hover {
    transform: translateX(-2px) scale(1.08);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}


/* =========================================================
   MOBILE
   Keep toolbar on the RIGHT side
========================================================= */

@media (max-width: 767.98px) {

    .portal-quick-toolbar {
        top: 50%;
        right: 5px;
        bottom: auto;
        transform: translateY(-50%);

        padding: 4px;
        gap: 4px;
        border-radius: 10px;

        opacity: .25;
    }

    .portal-quick-toolbar:hover,
    .portal-quick-toolbar:focus-within,
    .portal-quick-toolbar:active {
        opacity: 1;
    }

    .portal-quick-link {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .portal-quick-link i {
        font-size: 13px;
    }

    .portal-quick-link:hover {
        transform: translateX(-2px) scale(1.05);
    }
}