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

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #334744;
    background: #edf7f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}


/* ============================================================
   2. APPLICATION STRUCTURE
============================================================ */

.portal-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4faf9;
}

.portal-main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* ============================================================
   3. HEADER
============================================================ */

.top-header {
    width: 100%;
    height: 135px;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    background: url("../images/header-bg.jpg") center center / cover no-repeat;
    border-bottom: 3px solid #007267;
    box-shadow: 0 4px 15px rgba(0, 73, 66, 0.13);
}

.header-content {
    width: 92%;
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* GAIL Logo */

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

.logo-link {
    display: inline-flex;
    align-items: center;
}

.gail-logo {
    width: 175px;
    height: auto;
    display: block;
}


/* ============================================================
   4. HEADER NAVIGATION
============================================================ */

.top-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
}

.top-menu li {
    position: relative;
    padding: 0 15px;
}

    .top-menu li:first-child {
        padding-left: 0;
    }

    .top-menu li:last-child {
        padding-right: 0;
    }

    .top-menu li:not(:last-child)::after {
        content: "";
        width: 1px;
        height: 18px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 89, 79, 0.30);
    }

.top-menu a {
    padding: 8px 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00594f;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.18s ease, transform 0.18s ease;
}

    .top-menu a i {
        font-size: 15px;
    }

    .top-menu a:hover,
    .top-menu a:focus {
        color: #008779;
        transform: translateY(-1px);
    }


/* ============================================================
   5. MAIN LOGIN PAGE
============================================================ */

.login-page {
    width: 100%;
    flex: 1;
    position: relative;
    padding: 34px 30px 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient( circle at 8% 18%, rgba(26, 169, 153, 0.14) 0%, rgba(26, 169, 153, 0.05) 22%, transparent 38% ), radial-gradient( circle at 91% 80%, rgba(49, 151, 181, 0.11) 0%, rgba(49, 151, 181, 0.04) 24%, transparent 40% ), linear-gradient( 135deg, #e5f5f2 0%, #fafdfc 48%, #e8f3f6 100% );
}

    .login-page::before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        left: -220px;
        bottom: -240px;
        border-radius: 50%;
        background: linear-gradient( 135deg, rgba(0, 105, 92, 0.08), rgba(34, 190, 171, 0.02) );
        pointer-events: none;
    }

    .login-page::after {
        content: "";
        position: absolute;
        width: 390px;
        height: 390px;
        right: -200px;
        top: -210px;
        border-radius: 50%;
        background: linear-gradient( 135deg, rgba(18, 145, 131, 0.07), rgba(45, 138, 177, 0.025) );
        pointer-events: none;
    }


/* ============================================================
   6. THREE COLUMN LAYOUT
============================================================ */

.login-dashboard {
    width: 94%;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(290px, 0.95fr) minmax(350px, 1fr) minmax(330px, 1fr);
    gap: 22px;
    align-items: stretch;
}


/* ============================================================
   7. COMMON SECTION CARD
============================================================ */

.portal-section-card {
    min-width: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #afd8d2;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(28, 77, 72, 0.11);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .portal-section-card:hover {
        box-shadow: 0 12px 34px rgba(28, 77, 72, 0.15);
    }

    .portal-section-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient( 90deg, #00695c, #30b8a6, #65c8bc );
        z-index: 6;
    }


/* ============================================================
   8. COMMON SECTION HEADING
============================================================ */

.section-heading {
    min-height: 58px;
    padding: 0 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #00594f;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient( 110deg, #f4fbfa 0%, #e5f5f1 100% );
    border-bottom: 1px solid #cfe5e1;
}

    .section-heading i {
        color: #00796b;
        font-size: 21px;
    }


/* ============================================================
   9. GOLDEN RETIREMENT PORTAL - LEFT PANEL
============================================================ */

.welcome-section {
    display: flex;
    flex-direction: column;
    background: #ffffff;
}


/* Prominent portal heading */

.portal-title-area {
    min-height: 112px;
    padding: 19px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient( 120deg, #edf9f6 0%, #ffffff 55%, #e7f5f1 100% );
    border-bottom: 1px solid #cfe5e1;
}


/* Circular icon */

.portal-title-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient( 135deg, #00695c, #159487 );
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.20);
}

    .portal-title-icon i {
        font-size: 23px;
    }


/* Portal title */

.portal-title-content {
    min-width: 0;
}

    .portal-title-content h1 {
        margin: 0;
        color: #00594f;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.35px;
    }

.portal-title-line {
    width: 50px;
    height: 3px;
    margin: 9px 0 7px;
    border-radius: 3px;
    background: linear-gradient( 90deg, #00796b, #42b9aa );
}

.portal-title-content p {
    margin: 0;
    color: #647a77;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}


/* ============================================================
   10. HOME IMAGE
============================================================ */

.welcome-image-container {
    flex: 1;
    min-height: 285px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 180deg, #ffffff, #f9fcfb );
}

.home-image {
    width: 100%;
    height: auto;
    max-height: 285px;
    display: block;
    object-fit: contain;
    border: none;
    border-radius: 8px;
    background: transparent;
}


/* ============================================================
   11. WELCOME BOTTOM TEXT
============================================================ */

.welcome-footer-text {
    padding: 15px 20px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    background: linear-gradient( 180deg, #f9fcfb, #edf8f5 );
    border-top: 1px solid #d7e9e5;
}

    .welcome-footer-text strong {
        color: #00695c;
        font-size: 13px;
        font-weight: 700;
    }

    .welcome-footer-text span {
        max-width: 320px;
        color: #6d7e7b;
        font-size: 10px;
        line-height: 15px;
    }


/* ============================================================
   12. LOGIN PANEL
============================================================ */

.login-section-card {
    display: flex;
    flex-direction: column;
    border-color: #9bcfc7;
    box-shadow: 0 10px 32px rgba(18, 92, 82, 0.14);
}


/* Login green heading */

.section-heading-primary {
    min-height: 61px;
    color: #ffffff;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    border-bottom: none;
}

    .section-heading-primary i {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.90);
        border-radius: 50%;
        font-size: 18px;
    }


/* ============================================================
   13. LOGIN BODY
============================================================ */

.login-body {
    flex: 1;
    padding: 24px 24px 22px;
}

.login-form-label {
    margin-bottom: 7px;
    display: inline-block;
    color: #334744;
    font-size: 12px;
    font-weight: 700;
}


/* ============================================================
   14. LOGIN INPUTS
============================================================ */

.login-input-wrapper {
    position: relative;
    margin-bottom: 17px;
}

.login-input {
    width: 100%;
    height: 43px;
    padding: 8px 40px 8px 12px;
    color: #334744;
    background: #fbfdfd;
    border: 1px solid #bccdca;
    border-radius: 6px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .login-input::placeholder {
        color: #9ba9a7;
    }

    .login-input:hover {
        border-color: #83aaa4;
    }

    .login-input:focus {
        background: #ffffff;
        border-color: #087f70;
        box-shadow: 0 0 0 3px rgba(8, 127, 112, 0.10);
    }

.login-input-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #7f9793;
    font-size: 14px;
    pointer-events: none;
}

/* ============================================================
   15. CAPTCHA
============================================================ */
/* ============================================================
   CAPTCHA
============================================================ */

.captcha-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 10px;
    align-items: center;
}

.captcha-input-wrapper {
    min-width: 0;
}

    .captcha-input-wrapper .login-input {
        width: 100%;
        margin: 0;
    }

/* Complete CAPTCHA area */
.captcha-box {
    width: 145px;
    height: 43px;
    display: flex;
    align-items: center;
    padding: 3px;
    background: #f4faf9;
    border: 1px dashed #91b8b2;
    border-radius: 6px;
    overflow: hidden;
}

/* CAPTCHA image */
.captcha-image {
    display: block;
    width: calc(100% - 32px);
    height: 35px;
    object-fit: contain;
    border: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: none;
    user-select: none;
}

/* Refresh button */
.captcha-refresh {
    width: 30px;
    height: 35px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-left: 1px solid #c7ddd9;
    color: #00796b;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

    .captcha-refresh i {
        display: block;
        line-height: 1;
    }

    .captcha-refresh:hover,
    .captcha-refresh:focus {
        color: #004f46;
        text-decoration: none;
    }


/* ============================================================
   MOBILE CAPTCHA
============================================================ */

@media (max-width: 576px) {

    .captcha-row {
        grid-template-columns: minmax(0, 1fr) 125px;
        gap: 7px;
    }

    .captcha-box {
        width: 125px;
        height: 42px;
        padding: 3px;
    }

    .captcha-image {
        width: calc(100% - 29px);
        height: 34px;
    }

    .captcha-refresh {
        width: 27px;
        height: 34px;
        flex-basis: 27px;
        font-size: 15px;
    }
}

/* ============================================================
   16. LOGIN BUTTON
============================================================ */
/* ============================================================
   PASSWORD SHOW / HIDE
============================================================ */

.password-wrapper {
    position: relative;
    width: 100%;
}

    .password-wrapper .login-input {
        width: 100%;
        padding-right: 45px;
    }

.password-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #00796b;
    font-size: 18px;
    cursor: pointer;
}

    .password-toggle:hover {
        color: #004f46;
    }

    .password-toggle:focus {
        outline: 2px solid #80cbc4;
        outline-offset: 1px;
        border-radius: 4px;
    }


.login-btn {
    width: 100%;
    height: 46px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff !important;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    border: none;
    border-radius: 7px;
    box-shadow: 0 5px 14px rgba(0, 105, 92, 0.19);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .login-btn:hover,
    .login-btn:focus {
        color: #ffffff !important;
        background: linear-gradient( 110deg, #004d44, #076c61 );
        box-shadow: 0 7px 17px rgba(0, 105, 92, 0.25);
        transform: translateY(-1px);
    }


/* ============================================================
   17. LOGIN ACTION BUTTONS
============================================================ */

.login-actions {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.login-action-btn {
    min-height: 45px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #405653;
    background: linear-gradient( 180deg, #ffffff, #f8fbfa );
    border: 1px solid #bfd1ce;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .login-action-btn i {
        color: #00796b;
        font-size: 15px;
    }

    .login-action-btn:hover,
    .login-action-btn:focus {
        color: #00695c;
        background: #edf8f6;
        border-color: #188f80;
        transform: translateY(-1px);
    }


/* ============================================================
   18. LOGIN MESSAGES
============================================================ */

.login-message {
    margin-top: 13px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 17px;
}

.login-message-error {
    color: #a72a21;
    background: #fff4f3;
    border: 1px solid #f2c5c1;
}

.login-message-success {
    color: #087149;
    background: #eefaf4;
    border: 1px solid #b9e5ce;
}


/* ============================================================
   19. PHOTO GALLERY PANEL
============================================================ */

.gallery-service-section {
    display: flex;
    flex-direction: column;
}

.section-heading-gallery {
    background: linear-gradient( 110deg, #f2faf8, #e1f3ef );
}


/* ============================================================
   20. PHOTO GALLERY
   KEEP IMAGE FILLING FRAME - NOT CENTERED/REDUCED
============================================================ */

.portal-gallery {
    width: 100%;
    padding: 18px 18px 12px;
    background: #ffffff;
}

.simple-gallery-slider {
    width: 100%;
    height: 275px;
    position: relative;
    overflow: hidden;
    background: #eef6f5;
    border: 1px solid #d2e5e2;
    border-radius: 9px;
}


/* Each slide fills the gallery */

.gallery-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

    .gallery-slide.active {
        opacity: 1;
        visibility: visible;
    }


    /* Original gallery behaviour:
   image fills complete slider */

    .gallery-slide img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        border: 0;
        border-radius: 8px;
    }


/* ============================================================
   21. GALLERY PREVIOUS / NEXT
============================================================ */

.gallery-nav {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00695c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 105, 92, 0.18);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .gallery-nav i {
        font-size: 17px;
    }

.gallery-prev {
    left: 12px;
}

.gallery-next {
    right: 12px;
}

.gallery-nav:hover {
    color: #ffffff;
    background: #00695c;
}


/* Gallery dots */

.gallery-dots {
    min-height: 27px;
    padding-top: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #b6cbc7;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

    .gallery-dot.active {
        width: 22px;
        background: #00796b;
        border-radius: 5px;
    }


/* ============================================================
   22. QUICK SERVICES
============================================================ */

.quick-services {
    margin-top: auto;
    padding: 19px 12px 21px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient( 180deg, #fbfefd, #f0f8f6 );
    border-top: 1px solid #d5e7e4;
}

.quick-service-item {
    min-width: 0;
    padding: 0 7px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #36534f;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    transition: color 0.18s ease, transform 0.18s ease;
}

    .quick-service-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 0;
        width: 1px;
        height: 60px;
        background: #d4e5e2;
    }

.quick-service-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00796b;
    background: linear-gradient( 145deg, #e1f5f1, #c9ebe5 );
    border: 1px solid #c1e3dd;
    border-radius: 50%;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .quick-service-icon i {
        font-size: 22px;
    }

.quick-service-item:hover,
.quick-service-item:focus {
    color: #00695c;
    transform: translateY(-1px);
}

    .quick-service-item:hover .quick-service-icon {
        background: linear-gradient( 145deg, #cceee8, #b8e4dc );
        transform: translateY(-2px);
    }


/* ============================================================
   23. FOOTER
============================================================ */

.portal-footer {
    width: 100%;
    min-height: 48px;
    flex-shrink: 0;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient( 100deg, #004c44 0%, #00695c 52%, #087c70 100% );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -2px 10px rgba(0, 75, 67, 0.08);
    font-size: 10px;
}

.portal-footer-content {
    width: 92%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-separator {
    opacity: 0.55;
}


/* ============================================================
   24. LAPTOP
============================================================ */

@media (max-width: 1199px) {

    .header-content {
        width: 94%;
    }

    .login-page {
        padding: 28px 18px 35px;
    }

    .login-dashboard {
        width: 97%;
        grid-template-columns: minmax(260px, 0.90fr) minmax(320px, 1fr) minmax(290px, 0.95fr);
        gap: 15px;
    }

    .gail-logo {
        width: 155px;
    }

    .portal-title-content h1 {
        font-size: 21px;
    }

    .portal-title-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .welcome-image-container {
        min-height: 260px;
    }

    .home-image {
        max-height: 255px;
    }

    .simple-gallery-slider {
        height: 250px;
    }

    .quick-service-item {
        padding: 0 3px;
        font-size: 9px;
    }

    .quick-service-icon {
        width: 43px;
        height: 43px;
    }

        .quick-service-icon i {
            font-size: 20px;
        }
}


/* ============================================================
   25. TABLET
============================================================ */

@media (max-width: 991px) {

    .top-header {
        height: 120px;
    }

    .login-dashboard {
        max-width: 800px;
        grid-template-columns: repeat(2, 1fr);
        gap: 17px;
    }

    .welcome-section {
        order: 1;
    }

    .login-section-card {
        order: 2;
    }

    .gallery-service-section {
        order: 3;
        grid-column: 1 / -1;
    }

    .simple-gallery-slider {
        height: 280px;
    }
}


/* ============================================================
   26. MOBILE
============================================================ */

@media (max-width: 767px) {

    .top-header {
        height: auto;
        min-height: 108px;
    }

    .header-content {
        min-height: 108px;
        padding: 12px 10px;
        flex-direction: column;
        justify-content: center;
        gap: 9px;
    }

    .gail-logo {
        width: 120px;
    }

    .top-menu ul {
        justify-content: center;
    }

    .top-menu li {
        padding: 0 10px;
    }

    .top-menu a {
        font-size: 11px;
    }

    .login-page {
        padding: 20px 12px 28px;
    }

    .login-dashboard {
        width: 100%;
        max-width: 550px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Login appears first on mobile */

    .login-section-card {
        order: 1;
    }

    .welcome-section {
        order: 2;
    }

    .gallery-service-section {
        order: 3;
    }

    .portal-title-area {
        min-height: auto;
        padding: 18px;
    }

    .portal-title-content h1 {
        font-size: 23px;
    }

    .welcome-image-container {
        min-height: auto;
    }

    .home-image {
        max-height: 300px;
    }

    .simple-gallery-slider {
        height: 235px;
    }

    .quick-services {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .quick-service-item:nth-child(2)::after {
        display: none;
    }

    .portal-footer-content {
        flex-wrap: wrap;
    }
}


/* ============================================================
   27. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .top-menu a i {
        display: none;
    }

    .top-menu li {
        padding: 0 8px;
    }

    .portal-title-area {
        padding: 16px;
    }

    .portal-title-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

        .portal-title-icon i {
            font-size: 20px;
        }

    .portal-title-content h1 {
        font-size: 20px;
    }

    .section-heading {
        min-height: 52px;
        padding: 0 15px;
        font-size: 15px;
    }

        .section-heading i {
            font-size: 19px;
        }

    .login-body {
        padding: 20px 16px;
    }

    .captcha-row {
        grid-template-columns: minmax(0, 1fr) 110px;
        gap: 6px;
    }

    .captcha-text {
        font-size: 12px;
        letter-spacing: 2px;
    }

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

    .login-action-btn {
        min-height: 45px;
        font-size: 9px;
    }

    .portal-gallery {
        padding: 13px;
    }

    .simple-gallery-slider {
        height: 205px;
    }

    .gallery-nav {
        width: 32px;
        height: 32px;
    }

    .gallery-prev {
        left: 7px;
    }

    .gallery-next {
        right: 7px;
    }

    .quick-services {
        padding-left: 8px;
        padding-right: 8px;
    }

    .portal-footer {
        padding: 10px;
    }

    .portal-footer-content {
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .footer-separator {
        display: none;
    }
}


/* ============================================================
   PRMS COMMON MESSAGE MODAL
============================================================ */

.portal-message-modal {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(19, 72, 66, 0.22);
}


/* Header */

.portal-modal-header {
    padding: 16px 20px;
    background: linear-gradient( 110deg, #eef9f7, #ffffff );
    border-bottom: 1px solid #d5e7e4;
}


.modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
}


.modal-status-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: #00796b;
    border-radius: 50%;
}


    .modal-status-icon i {
        font-size: 17px;
    }


.portal-modal-header .modal-title {
    margin: 0;
    color: #31524d;
    font-size: 16px;
    font-weight: 700;
}


/* Body */

.portal-modal-body {
    padding: 24px 22px;
    color: #465d59;
    font-size: 13px;
    line-height: 21px;
    background: #ffffff;
}


/* Footer */

.portal-modal-footer {
    padding: 12px 20px 17px;
    background: #ffffff;
    border-top: 0;
}


.portal-modal-btn {
    min-width: 85px;
    height: 38px;
    padding: 0 20px;
    color: #ffffff;
    background: linear-gradient( 110deg, #00695c, #138b7e );
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}


    .portal-modal-btn:hover {
        background: linear-gradient( 110deg, #00574d, #087568 );
    }


/* ============================================================
   MODAL TYPES
============================================================ */

/* Error */

.modal-error .modal-status-icon {
    background: #c83e36;
}

    .modal-error .modal-status-icon i::before {
        content: "\f623";
    }


/* Warning */

.modal-warning .modal-status-icon {
    color: #664d03;
    background: #ffc107;
}


/* Success */

.modal-success .modal-status-icon {
    background: #198754;
}


/* Information */

.modal-info .modal-status-icon {
    background: #087f70;
}


/* Slightly narrower than normal Bootstrap modal */

#messageModal .modal-dialog {
    max-width: 430px;
}

/* ============================================================
   CONTACT US MODAL
============================================================ */

#contactModal .modal-dialog {
    max-width: 470px;
}

.contact-modal {
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 18px 50px rgba(18, 73, 67, 0.22);
}


/* Header */

.contact-modal-header {
    padding: 17px 20px;
    background: linear-gradient( 110deg, #eaf7f4, #ffffff );
    border-bottom: 1px solid #d1e7e2;
}

.contact-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-title-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient( 135deg, #00695c, #159487 );
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 105, 92, 0.18);
}

    .contact-title-icon i {
        font-size: 19px;
    }

.contact-modal-title h5 {
    margin: 0 0 2px;
    color: #00594f;
    font-size: 17px;
    font-weight: 700;
}

.contact-modal-title span {
    color: #748984;
    font-size: 11px;
    font-weight: 600;
}


/* Body */

.contact-modal-body {
    padding: 20px;
    background: #ffffff;
}


/* ============================================================
   CONTACT / NODAL OFFICER
============================================================ */

.contact-officer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    background: linear-gradient( 135deg, #f4fbf9 0%, #e8f6f3 100% );
    border: 1px solid #c5e1dc;
    border-left: 4px solid #087a6d;
    border-radius: 8px;
    color: #334744;
}


    /* Officer icon */

    .contact-officer > i {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #087a6d;
        color: #ffffff;
        border-radius: 50%;
        font-size: 20px;
    }


    /* Content */

    .contact-officer > div {
        min-width: 0;
    }


    /* Small heading */

    .contact-officer span {
        display: block;
        margin-bottom: 4px;
        color: #087a6d;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }


    /* Officer name */

    .contact-officer strong {
        display: block;
        margin-bottom: 5px;
        color: #163f39;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
    }


    /* Officer details */

    .contact-officer small {
        display: block;
        color: #536864;
        font-size: 14px;
        line-height: 1.65;
    }


    /* Email links */

    .contact-officer a {
        color: #00796b;
        font-weight: 600;
        text-decoration: none;
    }

        .contact-officer a:hover {
            color: #004f46;
            text-decoration: underline;
        }


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 576px) {

    .contact-officer {
        gap: 10px;
        padding: 13px;
    }

        .contact-officer > i {
            width: 36px;
            height: 36px;
            flex-basis: 36px;
            font-size: 17px;
        }

        .contact-officer strong {
            font-size: 15px;
        }

        .contact-officer small {
            font-size: 13px;
            line-height: 1.6;
        }
}

/* Organisation */

.contact-organisation {
    padding: 17px 4px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #e2ecea;
}

    .contact-organisation strong {
        color: #00695c;
        font-size: 14px;
    }

    .contact-organisation span {
        color: #5e716e;
        font-size: 12px;
        line-height: 19px;
    }


/* Contact items */

.contact-details {
    padding-top: 8px;
}

.contact-item {
    min-height: 58px;
    padding: 9px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    border-bottom: 1px solid #edf2f1;
}

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

a.contact-item:hover {
    background: #f7fbfa;
    border-radius: 6px;
}

.contact-item-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00796b;
    background: #e8f6f3;
    border-radius: 50%;
}

    .contact-item-icon i {
        font-size: 15px;
    }

.contact-item > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-item span {
    color: #81928f;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.contact-item strong {
    color: #3c5551;
    font-size: 12px;
    font-weight: 600;
}


/* Footer */

.contact-modal-footer {
    padding: 11px 20px 16px;
    background: #ffffff;
    border-top: 0;
}

.contact-close-btn {
    min-width: 85px;
    height: 37px;
    padding: 0 18px;
    color: #ffffff;
    background: linear-gradient( 110deg, #00695c, #128b7e );
    border: 0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .contact-close-btn:hover {
        background: #005c51;
    }

/* ============================================================
   PRMS APP DOWNLOAD MODAL
============================================================ */

.app-download-dialog {
    max-width: 650px;
}

.app-download-modal {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(18, 73, 67, 0.24);
}


/* ============================================================
   HEADER
============================================================ */

.app-download-header {
    padding: 17px 20px;
    background: linear-gradient( 110deg, #eaf7f4, #ffffff );
    border-bottom: 1px solid #d1e7e2;
}

.app-download-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-download-title-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient( 135deg, #00695c, #159487 );
    border-radius: 50%;
    box-shadow: 0 4px 11px rgba(0, 105, 92, 0.18);
}

    .app-download-title-icon i {
        font-size: 19px;
    }

.app-download-title h5 {
    margin: 0 0 2px;
    color: #00594f;
    font-size: 17px;
    font-weight: 700;
}

.app-download-title span {
    color: #758985;
    font-size: 11px;
    font-weight: 600;
}


/* ============================================================
   BODY
============================================================ */

.app-download-body {
    padding: 22px;
    background: linear-gradient( 180deg, #ffffff, #f7fbfa );
}

.app-download-intro {
    margin-bottom: 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

    .app-download-intro strong {
        color: #31534e;
        font-size: 15px;
    }

    .app-download-intro span {
        color: #71827f;
        font-size: 11px;
    }


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

.app-platforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.app-platform-card {
    padding: 15px;
    background: #ffffff;
    border: 1px solid #cfe4df;
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(31, 87, 80, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .app-platform-card:hover {
        border-color: #91c9c0;
        box-shadow: 0 8px 21px rgba(31, 87, 80, 0.12);
        transform: translateY(-2px);
    }


/* Platform heading */

.app-platform-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-platform-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eef8f6;
    border-radius: 50%;
}

    .app-platform-icon img {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

.app-platform-heading > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-platform-heading strong {
    color: #31534e;
    font-size: 13px;
}

.app-platform-heading span {
    color: #83938f;
    font-size: 10px;
}


/* ============================================================
   QR CODE
============================================================ */

.app-qr-container {
    min-height: 190px;
    margin: 14px 0 11px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2ecea;
    border-radius: 8px;
}

.app-qr-image {
    width: 175px;
    height: 175px;
    display: block;
    object-fit: contain;
}


/* ============================================================
   SCAN LABEL
============================================================ */

.app-scan-text {
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
    background: linear-gradient( 110deg, #00695c, #128b7e );
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

    .app-scan-text i {
        font-size: 15px;
    }


/* ============================================================
   INFORMATION NOTE
============================================================ */

.app-download-note {
    margin-top: 17px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526964;
    background: #edf7f5;
    border: 1px solid #d1e6e2;
    border-radius: 7px;
    font-size: 10px;
    line-height: 16px;
}

    .app-download-note i {
        flex-shrink: 0;
        color: #00796b;
        font-size: 14px;
    }


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

.app-download-footer {
    padding: 10px 20px 15px;
    background: #f7fbfa;
    border-top: 0;
}


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

@media (max-width: 600px) {

    .app-download-dialog {
        margin: 12px;
    }

    .app-platforms {
        grid-template-columns: 1fr;
    }

    .app-qr-container {
        min-height: 170px;
    }

    .app-qr-image {
        width: 155px;
        height: 155px;
    }
}

/* ============================================================
   FORGOT PASSWORD
============================================================ */

.forgot-page {
    width: 100%;
    min-height: calc(100vh - 150px);
    padding: 35px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-card {
    width: 100%;
    max-width: 590px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cfe3df;
    border-radius: 13px;
    box-shadow: 0 10px 32px rgba(24, 82, 74, 0.12);
}


/* Header */

.forgot-header {
    padding: 20px 23px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient( 110deg, #eaf7f4, #ffffff );
    border-bottom: 1px solid #d2e7e3;
}

.forgot-header-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient( 135deg, #00695c, #159487 );
    border-radius: 50%;
}

    .forgot-header-icon i {
        font-size: 20px;
    }

.forgot-header h2 {
    margin: 0 0 3px;
    color: #00594f;
    font-size: 19px;
    font-weight: 700;
}

.forgot-header p {
    margin: 0;
    color: #758985;
    font-size: 11px;
}


/* Body */

.forgot-body {
    padding: 23px;
}

.forgot-field {
    margin-bottom: 15px;
}

    .forgot-field label {
        display: block;
        margin-bottom: 6px;
        color: #3d5954;
        font-size: 11px;
        font-weight: 700;
    }

.required {
    color: #c63d35;
}


/* Inputs */

.forgot-input-wrapper {
    position: relative;
}

.forgot-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    color: #3d5551;
    background: #ffffff;
    border: 1px solid #cbdeda;
    border-radius: 6px;
    outline: none;
    font-size: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.forgot-input-wrapper .forgot-input {
    padding-right: 40px;
}

.forgot-input-wrapper > i {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #6e9991;
    transform: translateY(-50%);
}

.forgot-input:focus {
    border-color: #168b7e;
    box-shadow: 0 0 0 3px rgba(22, 139, 126, .10);
}


/* Captcha */

.forgot-captcha-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 10px;
}

.forgot-captcha-box {
    height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: repeating-linear-gradient( -45deg, #edf7f5, #edf7f5 7px, #e4f1ee 7px, #e4f1ee 14px );
    border: 1px solid #bcd8d2;
    border-radius: 6px;
}

.forgot-captcha-text {
    color: #31544e;
    font-family: Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    user-select: none;
}

.forgot-captcha-refresh {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #087b6e;
    border-radius: 50%;
    text-decoration: none;
}


/* Information */

.forgot-info {
    margin: 5px 0 18px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526964;
    background: #eef8f6;
    border: 1px solid #d3e8e4;
    border-radius: 6px;
    font-size: 10px;
}

    .forgot-info i {
        color: #087b6e;
    }


/* Buttons */

.forgot-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.forgot-submit-btn,
.forgot-back-btn {
    min-height: 39px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.forgot-submit-btn {
    color: #ffffff;
    background: linear-gradient( 110deg, #00695c, #128b7e );
}

.forgot-back-btn {
    color: #50635f;
    background: #e6eeec;
    border: 1px solid #d0ddda;
}


/* Mobile */

@media (max-width: 600px) {

    .forgot-page {
        padding: 20px 12px;
    }

    .forgot-captcha-row {
        grid-template-columns: 1fr;
    }

    .forgot-captcha-box {
        width: 180px;
    }

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

    .forgot-submit-btn,
    .forgot-back-btn {
        width: 100%;
    }
}

/* ============================================================
   CHANGE PASSWORD PAGE
============================================================ */

.change-password-page {
    width: 100%;
    min-height: calc(100vh - 150px);
    padding: 30px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-password-card {
    width: 100%;
    max-width: 620px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cfe3df;
    border-radius: 13px;
    box-shadow: 0 10px 32px rgba(24, 82, 74, 0.12);
}


/* HEADER */

.change-password-header {
    padding: 20px 23px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient( 110deg, #eaf7f4, #ffffff );
    border-bottom: 1px solid #d2e7e3;
}

.change-password-header-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient( 135deg, #00695c, #159487 );
    border-radius: 50%;
}

    .change-password-header-icon i {
        font-size: 20px;
    }

.change-password-header h2 {
    margin: 0 0 3px;
    color: #00594f;
    font-size: 19px;
    font-weight: 700;
}

.change-password-header p {
    margin: 0;
    color: #758985;
    font-size: 11px;
}


/* BODY */

.change-password-body {
    padding: 23px;
}

.change-password-field {
    margin-bottom: 14px;
}

    .change-password-field label {
        display: block;
        margin-bottom: 6px;
        color: #3d5954;
        font-size: 11px;
        font-weight: 700;
    }


/* INPUT */

.change-password-input-wrapper {
    position: relative;
}

.change-password-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    color: #3d5551;
    background: #ffffff;
    border: 1px solid #cbdeda;
    border-radius: 6px;
    outline: none;
    font-size: 12px;
}

.change-password-input-wrapper
.change-password-input {
    padding-right: 40px;
}

.change-password-input-wrapper > i {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #6e9991;
    transform: translateY(-50%);
}

.change-password-input:focus {
    border-color: #168b7e;
    box-shadow: 0 0 0 3px rgba(22, 139, 126, .10);
}


/* PASSWORD POLICY */

.password-policy {
    margin: 4px 0 16px;
    padding: 12px 14px;
    background: #f6faf9;
    border: 1px solid #d8e8e4;
    border-radius: 7px;
}

.password-policy-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #176d63;
    font-size: 11px;
    font-weight: 700;
}

.password-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px 14px;
}

    .password-policy-grid span {
        color: #647873;
        font-size: 10px;
    }

    .password-policy-grid i {
        margin-right: 3px;
        color: #168778;
    }


/* CAPTCHA */

.change-password-captcha-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 10px;
}

.change-password-captcha-box {
    height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: repeating-linear-gradient( -45deg, #edf7f5, #edf7f5 7px, #e4f1ee 7px, #e4f1ee 14px );
    border: 1px solid #bcd8d2;
    border-radius: 6px;
}

.change-password-captcha-text {
    color: #31544e;
    font-family: Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    user-select: none;
}

.change-password-captcha-refresh {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #087b6e;
    border-radius: 50%;
    text-decoration: none;
}


/* INFO */

.change-password-info {
    margin: 5px 0 18px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526964;
    background: #eef8f6;
    border: 1px solid #d3e8e4;
    border-radius: 6px;
    font-size: 10px;
}

    .change-password-info i {
        color: #087b6e;
    }


/* BUTTONS */

.change-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.change-password-submit,
.change-password-back {
    min-height: 39px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.change-password-submit {
    color: #ffffff;
    background: linear-gradient( 110deg, #00695c, #128b7e );
    border: 0;
}

.change-password-back {
    color: #50635f;
    background: #e6eeec;
    border: 1px solid #d0ddda;
}


/* MOBILE */

@media (max-width: 600px) {

    .change-password-page {
        padding: 20px 12px;
    }

    .password-policy-grid {
        grid-template-columns: 1fr;
    }

    .change-password-captcha-row {
        grid-template-columns: 1fr;
    }

    .change-password-captcha-box {
        width: 180px;
    }

    .change-password-actions {
        flex-direction: column;
    }

    .change-password-submit,
    .change-password-back {
        width: 100%;
    }
}

/* ==========================================================
   GOLDEN RETIREMENT PORTAL - AUTHENTICATED HOME
   Green Gradient Theme
========================================================== */

.portal-home {
    width: 100%;
    min-height: calc(100vh - 150px);
    padding: 20px 0 35px;
    background: radial-gradient(circle at 10% 10%, rgba(21, 148, 135, 0.08), transparent 28%), radial-gradient(circle at 90% 80%, rgba(0, 89, 79, 0.06), transparent 30%), linear-gradient(135deg, #f8fbfa 0%, #eef6f4 50%, #f9fbfb 100%);
}

.portal-home-container {
    width: calc(100% - 40px);
    max-width: 1450px;
    margin: 0 auto;
}


/* ==========================================================
   EMPLOYEE PROFILE BAR
========================================================== */

.employee-profile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 89, 79, 0.18);
    color: #ffffff;
}

.employee-profile-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.employee-avatar {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    border: 2px solid rgba(255,255,255,0.35);
    color: #ffffff;
    font-size: 25px;
}

.employee-profile-details {
    min-width: 0;
}

.employee-welcome {
    margin-bottom: 1px;
    color: rgba(255,255,255,0.78);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.employee-name {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.employee-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 5px;
    color: rgba(255,255,255,0.88);
    font-size: 11px;
}

    .employee-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .employee-meta i {
        color: #d7f5ef;
    }

.employee-meta-divider {
    display: block !important;
    width: 1px;
    height: 13px;
    background: rgba(255,255,255,0.35);
}


/* ==========================================================
   LOGOUT BUTTON
========================================================== */

.employee-profile-right {
    flex-shrink: 0;
}

.portal-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 7px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

    .portal-logout-btn:hover {
        background: #ffffff;
        border-color: #ffffff;
        color: #00685d;
        text-decoration: none;
    }


/* ==========================================================
   PRMS / EPS / EPF GRID
========================================================== */

.portal-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.portal-service-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e4e1;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(24, 72, 67, 0.07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .portal-service-card:hover {
        transform: translateY(-2px);
        border-color: #b6d5cf;
        box-shadow: 0 8px 22px rgba(0, 89, 79, 0.12);
    }


/* ==========================================================
   SERVICE CARD HEADER
========================================================== */

.service-card-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 17px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
}

.service-card-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    font-size: 20px;
}

.service-card-header h3 {
    margin: 0 0 2px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.service-card-header span {
    display: block;
    color: rgba(255,255,255,0.82);
    font-size: 10.5px;
}


/* ==========================================================
   SERVICE LINKS
========================================================== */

.service-card-links {
    padding: 7px 14px 10px;
}

.service-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid #edf2f1;
    color: #3d514e;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease, background .15s ease;
}

    .service-link:last-child {
        border-bottom: 0;
    }

    .service-link:hover {
        padding-left: 8px;
        color: #006b60;
        text-decoration: none;
    }

.service-link-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: #eaf6f3;
    color: #087a6d;
    font-size: 14px;
}

.service-link-text {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
}

.service-arrow {
    color: #8fa49f;
    font-size: 11px;
}

.service-link:hover .service-arrow {
    color: #087a6d;
}


/* ==========================================================
   LOWER SECTION
========================================================== */

.portal-secondary-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}


/* ==========================================================
   COMMON PANEL
========================================================== */

.portal-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e4e1;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(24, 72, 67, 0.07);
}


/* ==========================================================
   PANEL HEADER
========================================================== */

.portal-panel-header {
    position: relative;
    padding: 12px 15px;
    background: linear-gradient( 110deg, rgba(0, 89, 79, 0.08) 0%, rgba(8, 122, 109, 0.07) 55%, rgba(21, 148, 135, 0.05) 100% );
    border-bottom: 1px solid #d7e6e3;
}

    .portal-panel-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, #00594f, #159487 );
    }

.portal-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-panel-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient( 135deg, #00685d, #159487 );
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(0,89,79,.15);
}

.portal-panel-title h2 {
    margin: 0 0 2px;
    color: #00594f;
    font-size: 15px;
    font-weight: 700;
}

.portal-panel-title span {
    color: #748783;
    font-size: 10.5px;
}


/* ==========================================================
   QUICK LINKS
========================================================== */

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    padding: 14px;
}

.quick-link-item {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: #fbfdfc;
    border: 1px solid #e1ebe8;
    border-radius: 8px;
    color: #3e514e;
    text-decoration: none;
    transition: all .18s ease;
}

    .quick-link-item:hover {
        background: #edf7f4;
        border-color: #b9d7d1;
        transform: translateY(-1px);
        color: #00685d;
        text-decoration: none;
        box-shadow: 0 3px 9px rgba(0,89,79,.06);
    }

.quick-link-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e8f5f2;
    border-radius: 8px;
    color: #087a6d;
    font-size: 15px;
}

.quick-link-content {
    flex: 1;
    min-width: 0;
}

    .quick-link-content strong {
        display: block;
        margin-bottom: 2px;
        color: #38524d;
        font-size: 12px;
        font-weight: 600;
    }

    .quick-link-content span {
        display: block;
        color: #7a8b87;
        font-size: 10px;
        line-height: 1.3;
    }

.quick-arrow {
    color: #9baba7;
    font-size: 10px;
}

.quick-link-item:hover .quick-arrow {
    color: #087a6d;
}


/* ==========================================================
   RESOURCES & INFORMATION
========================================================== */

.resource-list {
    padding: 7px 14px 10px;
}

.resource-item {
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 3px;
    border-bottom: 1px solid #edf2f1;
    color: #3e514e;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}

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

    .resource-item:hover {
        padding-left: 7px;
        color: #00685d;
        text-decoration: none;
    }

.resource-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: #e8f5f2;
    color: #087a6d;
    font-size: 13px;
}

.resource-text {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.resource-item > .bi-chevron-right {
    color: #9baba7;
    font-size: 10px;
}

.resource-item:hover > .bi-chevron-right {
    color: #087a6d;
}


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

.service-link:focus,
.quick-link-item:focus,
.resource-item:focus,
.portal-logout-btn:focus {
    outline: 2px solid #159487;
    outline-offset: 2px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

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

    .portal-service-card:last-child {
        grid-column: span 2;
    }

    .portal-secondary-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .portal-home {
        padding-top: 12px;
    }

    .portal-home-container {
        width: calc(100% - 20px);
    }

    .employee-profile-bar {
        align-items: flex-start;
        padding: 14px;
    }

    .employee-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .employee-meta-divider {
        display: none !important;
    }

    .portal-service-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .portal-service-card:last-child {
        grid-column: auto;
    }

    .portal-secondary-grid {
        gap: 13px;
    }

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


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .employee-profile-bar {
        flex-direction: column;
    }

    .employee-profile-left {
        width: 100%;
    }

    .employee-profile-right {
        width: 100%;
    }

    .portal-logout-btn {
        width: 100%;
    }

    .employee-name {
        font-size: 17px;
    }

    .service-card-header {
        min-height: 68px;
    }
}

/* =========================================================
   RESOURCE PAGE
========================================================= */

.resource-page {
    padding: 30px 20px 50px;
    background: #f5f8f7;
    min-height: 600px;
}

.resource-page-container {
    max-width: 1100px;
    margin: 0 auto;
}


/* HEADER */

.resource-page-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 28px;
    margin-bottom: 25px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #fff;
    border-radius: 12px;
}

.resource-page-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    font-size: 27px;
}

.resource-page-header h2 {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 600;
}

.resource-page-header p {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 14px;
}

/* ============================================================
   EPS-95 ONLINE SERVICES
============================================================ */

.eps-online-section {
    margin-top: 24px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #d9e9e6;
    border-radius: 10px;
}


/* Section Heading
------------------------------------------------------------ */

.eps-online-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e3efed;
}

    .eps-online-heading > i {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e4f4f1;
        color: #087a6d;
        border-radius: 8px;
        font-size: 20px;
    }

    .eps-online-heading h3 {
        margin: 0 0 3px;
        color: #174b44;
        font-size: 18px;
        font-weight: 700;
    }

    .eps-online-heading p {
        margin: 0;
        color: #71817e;
        font-size: 14px;
    }


/* Service List
------------------------------------------------------------ */

.eps-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


/* Individual Link
------------------------------------------------------------ */

.eps-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 13px 14px;
    background: #f8fcfb;
    border: 1px solid #dbeae7;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

    .eps-service-item:hover {
        background: #f0f9f7;
        border-color: #9fcfc7;
        transform: translateY(-1px);
        text-decoration: none;
    }


/* Icons
------------------------------------------------------------ */

.eps-service-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2f3f0;
    color: #087a6d;
    border-radius: 8px;
    font-size: 18px;
}


/* Text
------------------------------------------------------------ */

.eps-service-content {
    flex: 1;
    min-width: 0;
}

    .eps-service-content strong {
        display: block;
        margin-bottom: 4px;
        color: #234a44;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
    }

    .eps-service-content span {
        display: block;
        color: #687b77;
        font-size: 13px;
        line-height: 1.4;
    }


/* External Link Arrow
------------------------------------------------------------ */

.eps-service-arrow {
    flex: 0 0 auto;
    margin-left: 4px;
    color: #769d97;
    font-size: 15px;
}

.eps-service-item:hover .eps-service-arrow {
    color: #087a6d;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .eps-online-section {
        margin-top: 18px;
        padding: 14px;
    }

    .eps-service-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .eps-service-item {
        min-height: 70px;
        padding: 11px;
        gap: 10px;
    }

    .eps-service-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 17px;
    }

    .eps-service-content strong {
        font-size: 15px;
    }

    .eps-service-content span {
        font-size: 13px;
    }

    .eps-online-heading h3 {
        font-size: 17px;
    }
}

/* ============================================================
   GRIEVANCE - FILE UPLOAD
============================================================ */

.grievance-file-upload {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #334744;
    background: #ffffff;
    border: 1px solid #b8ceca;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}


    /* Choose File button */
    .grievance-file-upload::file-selector-button {
        min-height: 34px;
        margin-right: 12px;
        padding: 7px 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #00695c;
        background: #e4f3f0;
        border: 1px solid #b7d9d3;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }


        .grievance-file-upload::file-selector-button:hover {
            background: #d5ebe7;
            border-color: #7fb9af;
        }


    /* Focus */
    .grievance-file-upload:focus {
        outline: none;
        border-color: #00796b;
        box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.12);
    }


/* ============================================================
   FILE INFORMATION / DISCLAIMER
============================================================ */

.file-help {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 7px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #536763;
    background: #f4faf9;
    border-left: 3px solid #168577;
    border-radius: 4px;
}


    .file-help i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 14px;
        color: #00796b;
    }


/* Optional text beside label */
.optional-text {
    margin-left: 4px;
    font-size: 13px;
    font-weight: normal;
    color: #71817e;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 576px) {

    .grievance-file-upload {
        min-height: 50px;
        padding: 7px;
        font-size: 14px;
    }

        .grievance-file-upload::file-selector-button {
            min-height: 36px;
            margin-right: 8px;
            padding: 7px 10px;
            font-size: 14px;
        }

    .file-help {
        font-size: 13px;
        line-height: 1.45;
    }
}


/* =========================================================
   DOCUMENT SECTION
========================================================= */

.document-section {
    background: #fff;
    border: 1px solid #e1e9e7;
    border-radius: 12px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

    .document-section h3 {
        margin: 0;
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 600;
        color: #00594f;
        background: #f4f9f8;
        border-bottom: 1px solid #e1e9e7;
    }

        .document-section h3 i {
            margin-right: 8px;
        }


/* DOCUMENT ITEM */

.document-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    text-decoration: none;
    border-bottom: 1px solid #edf1f0;
    transition: background .2s ease;
}

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

    .document-item:hover {
        background: #f7fbfa;
    }


/* ICON */

.document-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 9px;
    background: #fff0f0;
    color: #c53b3b;
    font-size: 21px;
}

    .document-icon.excel {
        background: #eaf6ef;
        color: #217346;
    }

    .document-icon.contact {
        background: #e8f4f2;
        color: #087a6d;
    }


/* DOCUMENT INFORMATION */

.document-info {
    flex: 1;
}

    .document-info strong {
        display: block;
        margin-bottom: 3px;
        color: #253b37;
        font-size: 14px;
        font-weight: 600;
    }

    .document-info span {
        display: block;
        color: #71817e;
        font-size: 12px;
    }


/* ACTION */

.document-action {
    margin-left: 20px;
    color: #087a6d;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .document-action i {
        margin-left: 4px;
    }


/* BACK */

.resource-back {
    margin-top: 25px;
}

    .resource-back a {
        color: #087a6d;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }

        .resource-back a:hover {
            text-decoration: underline;
        }


/* MOBILE */

@media (max-width: 650px) {

    .resource-page {
        padding: 18px 12px 35px;
    }

    .resource-page-header {
        padding: 20px;
    }

        .resource-page-header h2 {
            font-size: 20px;
        }

    .document-item {
        padding: 14px;
    }

    .document-info span {
        display: none;
    }

    .document-action {
        margin-left: 10px;
    }
}

/* =========================================================
   SUPERANNUATION BENEFIT PAGE
========================================================= */

.resource-top-navigation {
    margin-bottom: 18px;
}

.resource-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
}

    .resource-dashboard-btn:hover {
        color: #fff;
        text-decoration: none;
        opacity: 0.92;
    }


/* CONTACT INFORMATION */

.contact-information-box {
    padding: 5px 0;
}

.contact-introduction {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: #f4faf9;
    border-left: 4px solid #087a6d;
    border-radius: 5px;
    color: #344642;
    font-size: 14px;
    line-height: 1.7;
}


/* CONTACT CARDS */

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-detail-card {
    border: 1px solid #d8e4e1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    background: #f1f8f7;
    border-bottom: 1px solid #d8e4e1;
    color: #00594f;
    font-size: 15px;
}

    .contact-card-header i {
        font-size: 19px;
    }

.contact-card-body {
    padding: 15px 17px;
    color: #3f4b49;
    font-size: 14px;
    line-height: 1.7;
}

    .contact-card-body p {
        margin: 0 0 11px 0;
    }

        .contact-card-body p:last-child {
            margin-bottom: 0;
        }

    .contact-card-body i {
        color: #087a6d;
        margin-right: 5px;
    }

    .contact-card-body a {
        color: #087a6d;
        font-weight: 600;
        text-decoration: none;
    }

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


/* IMPORTANT NOTE */

.contact-important-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 15px;
    border: 1px solid #e1d7aa;
    background: #fffbea;
    border-radius: 6px;
    color: #665719;
    font-size: 14px;
}

    .contact-important-note i {
        font-size: 18px;
    }


/* MOBILE */

@media (max-width: 768px) {

    .contact-cards-grid {
        grid-template-columns: 1fr;
    }

    .resource-dashboard-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   RESOURCE PAGE HEADER
========================================================= */

.resource-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    border-radius: 9px;
    color: #fff;
}


/* LEFT SIDE */

.resource-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resource-page-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    flex-shrink: 0;
}

    .resource-page-icon i {
        font-size: 21px;
        color: #fff;
    }

.resource-page-header h2 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
}


/* BACK TO DASHBOARD */

.resource-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fff;
    color: #00685e;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

    .resource-dashboard-btn i {
        font-size: 14px;
    }

    .resource-dashboard-btn:hover {
        background: #f0f8f7;
        color: #004e47;
        text-decoration: none;
        transform: translateX(-2px);
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .resource-page-header {
        padding: 13px 14px;
        gap: 10px;
    }

        .resource-page-header h2 {
            font-size: 17px;
        }

    .resource-page-icon {
        width: 36px;
        height: 36px;
    }

        .resource-page-icon i {
            font-size: 18px;
        }

    .resource-dashboard-btn {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* =========================================================
   DOCUMENT LIST - ICON + TEXT ALIGNMENT
   Applies to all existing document pages
========================================================= */

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.document-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.document-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.document-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

    .document-text h4 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4;
        font-size: 16px;
        font-weight: 500;
    }

.document-download-btn {
    flex-shrink: 0;
}

/* Life Certificate Disclaimer */
.document-disclaimer {
    display: block;
    width: 100%;
    margin: 7px 0 0;
    padding: 8px 10px;
    background: #fff8e6;
    border-left: 3px solid #e0a800;
    border-radius: 4px;
    color: #66521c;
    font-size: 13px;
    line-height: 1.5;
}

    .document-disclaimer i {
        margin-right: 5px;
        color: #c89000;
        font-size: 14px;
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .document-item {
        gap: 10px;
    }

    .document-info {
        gap: 10px;
    }

    .document-text h4 {
        font-size: 15px;
    }
}


/* =========================================================
   CIRCULAR / RESOURCE PAGE
========================================================= */

.resource-page {
    width: 100%;
    padding: 24px 15px 40px;
    box-sizing: border-box;
}

.resource-page-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.resource-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    padding: 16px 20px;
    border-radius: 10px 10px 0 0;
}

.resource-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resource-page-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #ffffff;
    font-size: 21px;
}

.resource-page-header h2 {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 600;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.resource-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 6px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

    .resource-dashboard-btn:hover {
        background: #ffffff;
        color: #00695f !important;
    }

    .resource-dashboard-btn i {
        font-size: 14px;
    }


/* =========================================================
   DOCUMENT SECTION
========================================================= */

.document-section {
    background: #ffffff;
    border: 1px solid #d9e5e3;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   RESPONSIVE TABLE CONTAINER
========================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   RESOURCE TABLE
========================================================= */

.resource-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
    font-size: 13px;
    color: #333333;
}


    /* =========================================================
   TABLE HEADER
========================================================= */

    .resource-table thead th {
        background: #eef7f5;
        color: #00594f;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        padding: 12px 14px;
        border: 1px solid #d6e5e2;
        vertical-align: middle;
    }


    /* =========================================================
   TABLE BODY
========================================================= */

    .resource-table tbody td {
        padding: 11px 14px;
        border: 1px solid #e1e7e6;
        vertical-align: middle;
        line-height: 1.5;
        background: #ffffff;
    }


    /* Alternate row */

    .resource-table tbody tr:nth-child(even) td {
        background: #fafcfc;
    }


    /* Row hover */

    .resource-table tbody tr:hover td {
        background: #f1f8f7;
    }


    /* =========================================================
   COLUMN WIDTHS
========================================================= */

    /* Sr. No. */

    .resource-table th:nth-child(1),
    .resource-table td:nth-child(1) {
        width: 65px;
        text-align: center;
        white-space: nowrap;
    }


    /* Reference Number */

    .resource-table th:nth-child(2),
    .resource-table td:nth-child(2) {
        width: 170px;
        white-space: nowrap;
    }


    /* Date */

    .resource-table th:nth-child(3),
    .resource-table td:nth-child(3) {
        width: 150px;
        white-space: nowrap;
    }


    /* Subject */

    .resource-table th:nth-child(4),
    .resource-table td:nth-child(4) {
        width: auto;
    }


    /* =========================================================
   PDF / SUBJECT LINKS
========================================================= */

    .resource-table td a {
        display: inline-flex;
        align-items: center;
        color: #00695f;
        text-decoration: none;
        font-weight: 500;
        line-height: 1.45;
        transition: color 0.2s ease;
    }

        .resource-table td a:hover {
            color: #004d40;
            text-decoration: underline;
        }


    /* PDF icon before document */

    .resource-table td:nth-child(4) a::before {
        content: "\F63E";
        font-family: "bootstrap-icons";
        display: inline-block;
        margin-right: 8px;
        color: #c62828;
        font-size: 17px;
        flex-shrink: 0;
    }


    /* =========================================================
   IMPORTANT:
   KEEP PDF ICON AND TEXT ON SAME LINE/FLOW
========================================================= */

    .resource-table td:nth-child(4) a {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .resource-page {
        padding: 15px 10px 30px;
    }

    .resource-page-header {
        padding: 14px 15px;
    }

        .resource-page-header h2 {
            font-size: 18px;
        }

    .resource-page-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .resource-dashboard-btn {
        padding: 7px 10px;
        font-size: 12px;
    }

    .document-section {
        padding: 12px;
    }

    .resource-table {
        min-width: 850px;
        font-size: 12px;
    }

        .resource-table thead th,
        .resource-table tbody td {
            padding: 9px 10px;
        }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .resource-page-header {
        gap: 10px;
    }

    .resource-heading-left {
        gap: 8px;
    }

    .resource-page-header h2 {
        font-size: 16px;
    }

    .resource-dashboard-btn {
        padding: 6px 8px;
    }

        .resource-dashboard-btn i {
            margin: 0;
        }
}

/* =========================================================
   SEARCH COLLEAGUES
========================================================= */

.colleague-search-box {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 18px;
    margin-bottom: 18px;
    background: #f7fbfa;
    border: 1px solid #d9e8e5;
    border-radius: 8px;
}


.colleague-search-field {
    flex: 1;
    max-width: 500px;
}


    .colleague-search-field label {
        display: block;
        margin-bottom: 7px;
        color: #334744;
        font-size: 13px;
        font-weight: 600;
    }


.colleague-search-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #c8d8d5;
    border-radius: 5px;
    background: #ffffff;
    color: #333333;
    font-size: 14px;
    box-sizing: border-box;
}


    .colleague-search-input:focus {
        outline: none;
        border-color: #087a6d;
        box-shadow: 0 0 0 3px rgba(8, 122, 109, 0.10);
    }


.colleague-search-btn {
    height: 40px;
    padding: 0 22px;
    border: none;
    border-radius: 5px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


    .colleague-search-btn:hover {
        opacity: 0.92;
    }


/* SEARCH INFORMATION */

.colleague-search-info {
    margin: 5px 0 15px;
    padding: 10px 13px;
    background: #eef7f5;
    border-left: 4px solid #087a6d;
    color: #405552;
    font-size: 13px;
}


/* NO RECORD */

.colleague-no-record {
    padding: 35px 20px;
    text-align: center;
    border: 1px dashed #ccd9d7;
    border-radius: 7px;
    background: #fafcfc;
    color: #667774;
}


    .colleague-no-record i {
        display: block;
        margin-bottom: 8px;
        color: #087a6d;
        font-size: 25px;
    }


/* COLUMN WIDTHS FOR THIS GRID */

#ContentPlaceHolder1_gvColleagues th:nth-child(1),
#ContentPlaceHolder1_gvColleagues td:nth-child(1) {
    width: 65px;
    text-align: center;
}

#ContentPlaceHolder1_gvColleagues th:nth-child(2),
#ContentPlaceHolder1_gvColleagues td:nth-child(2) {
    width: 190px;
}

#ContentPlaceHolder1_gvColleagues th:nth-child(3),
#ContentPlaceHolder1_gvColleagues td:nth-child(3) {
    width: 130px;
}

#ContentPlaceHolder1_gvColleagues th:nth-child(4),
#ContentPlaceHolder1_gvColleagues td:nth-child(4) {
    width: 200px;
}


/* MOBILE */

@media (max-width: 768px) {

    .colleague-search-box {
        display: block;
    }

    .colleague-search-field {
        max-width: none;
    }

    .colleague-search-btn {
        width: 100%;
        margin-top: 10px;
    }

    #ContentPlaceHolder1_gvColleagues {
        min-width: 900px;
    }
}


/* ============================================================
   FEEDBACK / GRIEVANCE / SUGGESTION PAGE
============================================================ */

.feedback-form {
    max-width: 850px;
    margin: 0 auto;
    padding: 30px 35px;
    background: #ffffff;
    border: 1px solid #e1e8e6;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 89, 79, 0.07);
}


/* ============================================================
   FORM ROW
============================================================ */

.feedback-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
}

.feedback-description-row {
    align-items: flex-start;
}


/* ============================================================
   LABEL
============================================================ */

.feedback-label {
    width: 250px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #263b38;
    line-height: 1.5;
}

.required {
    color: #d93025;
    margin-left: 3px;
}


/* ============================================================
   CONTROL AREA
============================================================ */

.feedback-control {
    flex: 1;
    min-width: 0;
}


/* ============================================================
   INPUT / SELECT
============================================================ */

.feedback-input,
.feedback-select {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #ccd9d6;
    border-radius: 7px;
    background: #ffffff;
    color: #263b38;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .feedback-input:focus,
    .feedback-select:focus,
    .feedback-textarea:focus {
        border-color: #087a6d;
        box-shadow: 0 0 0 3px rgba(8, 122, 109, 0.10);
    }


/* ============================================================
   DROPDOWN
============================================================ */

.feedback-select {
    cursor: pointer;
}


/* ============================================================
   DESCRIPTION TEXTAREA
============================================================ */

.feedback-textarea {
    width: 100%;
    min-height: 145px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #ccd9d6;
    border-radius: 7px;
    background: #ffffff;
    color: #263b38;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .feedback-textarea::placeholder {
        color: #929f9c;
    }


/* ============================================================
   CHARACTER HELP
============================================================ */

.feedback-help {
    margin-top: 6px;
    font-size: 12px;
    color: #788784;
    text-align: right;
}


/* ============================================================
   BUTTON AREA
============================================================ */

.feedback-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}


/* ============================================================
   SUBMIT BUTTON
============================================================ */

.feedback-submit-btn {
    min-width: 120px;
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 7px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 89, 79, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .feedback-submit-btn:hover {
        opacity: 0.94;
        box-shadow: 0 5px 12px rgba(0, 89, 79, 0.23);
        transform: translateY(-1px);
    }

    .feedback-submit-btn:active {
        transform: translateY(0);
    }


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

.feedback-reset-btn {
    min-width: 110px;
    height: 42px;
    padding: 0 24px;
    border: 1px solid #b9c9c6;
    border-radius: 7px;
    background: #ffffff;
    color: #455c58;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .feedback-reset-btn:hover {
        background: #f3f8f7;
        border-color: #087a6d;
        color: #087a6d;
    }


/* ============================================================
   SUCCESS / ERROR MESSAGE
============================================================ */

.feedback-message {
    margin-top: 25px;
    padding: 13px 16px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.feedback-message-success {
    color: #176b58;
    background: #edf8f4;
    border: 1px solid #b7dfd3;
}

.feedback-message-error {
    color: #a72b2b;
    background: #fff3f3;
    border: 1px solid #efc2c2;
}


/* ============================================================
   RESOURCE PAGE HEADER
   Keep if not already defined in your common CSS
============================================================ */

.resource-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.resource-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .resource-heading-left h2 {
        margin: 0;
    }

.resource-page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   BACK TO DASHBOARD BUTTON
============================================================ */

.resource-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.10);
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .resource-dashboard-btn:hover {
        background: rgba(255, 255, 255, 0.20);
        border-color: #ffffff;
        color: #ffffff;
        text-decoration: none;
    }


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

@media (max-width: 768px) {

    .feedback-form {
        padding: 22px 18px;
    }

    .feedback-row {
        display: block;
        margin-bottom: 20px;
    }

    .feedback-label {
        width: 100%;
        margin-bottom: 7px;
    }

    .feedback-control {
        width: 100%;
    }

    .feedback-input,
    .feedback-select,
    .feedback-textarea {
        width: 100%;
    }

    .feedback-actions {
        margin-top: 25px;
    }

    .resource-page-header {
        align-items: flex-start;
    }

    .resource-dashboard-btn {
        white-space: nowrap;
    }
}


@media (max-width: 480px) {

    .feedback-form {
        padding: 18px 14px;
    }

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

    .feedback-submit-btn,
    .feedback-reset-btn {
        width: 100%;
    }

    .resource-page-header {
        flex-direction: column;
    }

    .resource-dashboard-btn {
        align-self: flex-start;
    }
}

/* =========================================================
   ADD / CHANGE ADDRESS
========================================================= */

.address-page {
    width: 100%;
    padding: 24px 18px 40px;
    box-sizing: border-box;
}

.address-card {
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e1e8e6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 89, 79, 0.08);
}


/* HEADER */

.address-header {
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.address-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.address-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
}

.address-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}

.address-header p {
    margin: 4px 0 0;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
}


/* BACK BUTTON */

.address-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 7px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

    .address-back-btn:hover {
        background: rgba(255,255,255,0.25);
        color: #ffffff;
    }


/* BODY */

.address-body {
    padding: 28px 32px 32px;
}


/* FIELDS */

.address-field {
    margin-bottom: 21px;
}

    .address-field > label {
        display: block;
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 600;
        color: #263c38;
    }

.required {
    color: #c62828;
}


/* INPUT */

.address-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #cfdad7;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #263c38;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .address-input:focus {
        border-color: #087a6d;
        box-shadow: 0 0 0 3px rgba(8, 122, 109, 0.10);
    }


/* TEXTAREA */

.address-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.55;
}


/* INPUT ICON */

.address-input-wrapper {
    position: relative;
}

    .address-input-wrapper .address-input {
        padding-right: 42px;
    }

    .address-input-wrapper > i {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #087a6d;
        font-size: 16px;
    }


/* TELEPHONE */

.telephone-row {
    display: flex;
    gap: 14px;
}

.telephone-std {
    width: 30%;
}

.telephone-number {
    width: 70%;
}

.telephone-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    color: #71807d;
}


/* SELECT */

.address-select {
    cursor: pointer;
    background-color: #ffffff;
}


/* INFORMATION */

.address-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 5px;
    margin-bottom: 24px;
    padding: 11px 13px;
    background: #f2f8f7;
    border-left: 3px solid #087a6d;
    border-radius: 5px;
    color: #49635e;
    font-size: 12px;
    line-height: 1.5;
}

    .address-info i {
        color: #087a6d;
        margin-top: 1px;
    }


/* BUTTON */

.address-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
}

.address-save-btn {
    border: 0;
    border-radius: 7px;
    padding: 11px 22px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .address-save-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 13px rgba(0, 89, 79, 0.20);
    }


/* SUCCESS / ERROR */

.address-message {
    display: block;
    margin-bottom: 20px;
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.address-message-success {
    background: #edf8f3;
    border: 1px solid #b9dfcf;
    color: #176b50;
}

.address-message-error {
    background: #fff1f1;
    border: 1px solid #efc0c0;
    color: #a42626;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .address-page {
        padding: 15px 10px 30px;
    }

    .address-header {
        padding: 17px;
        align-items: flex-start;
    }

        .address-header p {
            display: none;
        }

    .address-back-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .address-body {
        padding: 22px 18px;
    }

    .telephone-row {
        flex-direction: column;
    }

    .telephone-std,
    .telephone-number {
        width: 100%;
    }
}

/* =========================================================
   PAYMENT DETAILS
========================================================= */

.payment-page {
    width: 100%;
    padding: 24px 18px 40px;
    box-sizing: border-box;
}

.payment-card {
    max-width: 1150px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e1e8e6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 89, 79, 0.08);
}


/* HEADER */

.payment-header {
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.payment-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.payment-header-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 22px;
}

.payment-header h2 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.payment-header p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.88);
    font-size: 13px;
}


/* BACK */

.payment-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 7px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
}

    .payment-back-btn:hover {
        background: rgba(255,255,255,.25);
    }


/* BODY */

.payment-body {
    padding: 26px;
}


/* TABLE WRAPPER */

.payment-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


/* GRID */

.payment-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}

    .payment-table th {
        background: #f0f7f5;
        color: #24463f;
        padding: 13px 10px;
        border-bottom: 2px solid #d8e7e3;
        text-align: left;
        font-weight: 700;
        white-space: nowrap;
    }

    .payment-table td {
        padding: 12px 10px;
        border-bottom: 1px solid #e8eeee;
        color: #344d48;
        vertical-align: middle;
    }

    .payment-table tr:hover td {
        background: #f9fcfb;
    }

.payment-sr {
    width: 60px;
    text-align: center !important;
}

.payment-date {
    white-space: nowrap;
}

.payment-reference {
    white-space: nowrap;
}

.payment-amount {
    text-align: right !important;
    white-space: nowrap;
    font-weight: 600;
}

.payment-view {
    text-align: center !important;
}


/* DETAILS BUTTON */

.payment-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 5px;
    background: #eef7f5;
    color: #087a6d !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
}

    .payment-details-btn:hover {
        background: #087a6d;
        color: #fff !important;
    }


/* PAGER */

.payment-pager td {
    padding: 16px 5px !important;
    border: 0 !important;
    text-align: center;
}

.payment-pager table {
    margin: auto;
}

.payment-pager a,
.payment-pager span {
    display: inline-flex;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    padding: 0 7px;
    border: 1px solid #d4e2df;
    border-radius: 5px;
    text-decoration: none;
    color: #087a6d;
}

.payment-pager span {
    background: #087a6d;
    border-color: #087a6d;
    color: #fff;
}


/* MESSAGE */

.payment-message {
    display: block;
    margin-bottom: 20px;
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 13px;
}

.payment-message-info {
    background: #f2f8f7;
    border: 1px solid #cce1dc;
    color: #365f56;
}

.payment-message-error {
    background: #fff1f1;
    border: 1px solid #efc0c0;
    color: #a42626;
}


/* EMPTY */

.payment-empty {
    padding: 35px !important;
    text-align: center !important;
    color: #6c7d79 !important;
}


/* =========================================================
   DETAIL MODAL
========================================================= */

.payment-modal {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.payment-modal-header {
    background: #f2f8f7;
    border-bottom: 1px solid #dbe8e5;
}

    .payment-modal-header h5 {
        color: #174f45;
        font-weight: 700;
    }

.payment-modal-subtitle {
    display: block;
    margin-top: 2px;
    color: #6a7f7a;
    font-size: 12px;
}

.payment-modal-body {
    padding: 24px;
}

.payment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.payment-detail-item,
.payment-detail-remarks {
    padding: 13px 15px;
    background: #f8fbfa;
    border: 1px solid #e2ece9;
    border-radius: 7px;
}

.payment-detail-label {
    display: block;
    margin-bottom: 5px;
    color: #70817d;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.payment-detail-value {
    color: #263e39;
    font-size: 14px;
    font-weight: 600;
}

.payment-detail-remarks {
    margin-top: 14px;
}

.payment-modal-footer {
    border-top: 1px solid #e4ecea;
}

.payment-close-btn {
    border: 0;
    border-radius: 6px;
    padding: 9px 20px;
    background: #087a6d;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}


/* MOBILE */

@media (max-width: 700px) {

    .payment-page {
        padding: 15px 10px 30px;
    }

    .payment-header {
        padding: 17px;
    }

        .payment-header p {
            display: none;
        }

    .payment-back-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .payment-body {
        padding: 16px;
    }

    .payment-table {
        min-width: 800px;
    }

    .payment-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   GUEST HOUSE PAGE
========================================================= */

.guest-page {
    width: 100%;
    padding: 24px 18px 40px;
    box-sizing: border-box;
}

.guest-card {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e1e8e6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 89, 79, 0.08);
}


/* HEADER */

.guest-header {
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.guest-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.guest-header-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    border-radius: 10px;
    color: #fff;
    font-size: 21px;
}

.guest-header h2 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.guest-header p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.88);
    font-size: 13px;
}


/* BACK */

.guest-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 7px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
}

    .guest-back-btn:hover {
        background: rgba(255,255,255,.25);
    }


/* BODY */

.guest-body {
    padding: 25px;
}


/* SEARCH */

.guest-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.guest-search {
    width: 330px;
    display: flex;
    align-items: center;
    border: 1px solid #d3dfdc;
    border-radius: 7px;
    background: #fff;
    padding: 0 11px;
}

    .guest-search i {
        color: #71837f;
        margin-right: 8px;
    }

    .guest-search input {
        width: 100%;
        padding: 10px 0;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 13px;
        color: #334b46;
    }

    .guest-search:focus-within {
        border-color: #087a6d;
        box-shadow: 0 0 0 2px rgba(8,122,109,.08);
    }


/* TABLE */

.guest-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dde7e4;
    border-radius: 8px;
}

.guest-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    background: #fff;
    font-size: 12px;
}

    .guest-table th {
        background: #edf6f4;
        color: #244c44;
        padding: 12px 10px;
        border-bottom: 2px solid #d6e6e2;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        vertical-align: middle;
    }

    .guest-table td {
        padding: 11px 10px;
        border-bottom: 1px solid #e7eeee;
        color: #40544f;
        line-height: 1.55;
        vertical-align: top;
    }

    .guest-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .guest-table tbody tr:hover td {
        background: #f8fcfb;
    }


    /* SERIAL */

    .guest-table .guest-sr {
        width: 55px;
        text-align: center;
    }


/* LOCATION */

.guest-location {
    color: #176d61 !important;
    font-weight: 700;
    white-space: nowrap;
}


/* EMAIL */

.guest-table a {
    color: #087a6d;
    text-decoration: none;
    word-break: break-word;
}

    .guest-table a:hover {
        text-decoration: underline;
    }


/* NO RESULT */

.guest-no-result {
    padding: 35px 20px;
    text-align: center;
    color: #71817d;
    font-size: 13px;
}

    .guest-no-result i {
        margin-right: 5px;
    }


/* NOTE */

.guest-note {
    margin-top: 16px;
    padding: 11px 14px;
    background: #f2f8f7;
    border: 1px solid #d6e6e2;
    border-radius: 6px;
    color: #526c66;
    font-size: 12px;
}

    .guest-note i {
        color: #087a6d;
        margin-right: 6px;
    }


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

@media (max-width: 768px) {

    .guest-page {
        padding: 15px 10px 30px;
    }

    .guest-header {
        padding: 17px;
    }

        .guest-header p {
            display: none;
        }

    .guest-back-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .guest-body {
        padding: 15px;
    }

    .guest-toolbar {
        display: block;
    }

    .guest-search {
        width: 100%;
        box-sizing: border-box;
    }

    .guest-table {
        min-width: 1000px;
    }
}

/* =========================================================
   HOME PAGE - PHOTO GALLERY
========================================================= */

.home-gallery-section {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 18px;
    background: #ffffff;
    border: 1px solid #d9e5e3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}


/* =========================================================
   PHOTO GALLERY SECTION HEADER
========================================================= */

.home-gallery-heading {
    width: 100%;
    padding: 10px 14px;
    background: #f5faf9;
    border-bottom: 1px solid #d9e5e3;
    box-sizing: border-box;
}


.home-gallery-heading-left {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* HEADER ICON */

.home-gallery-main-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
    font-size: 16px;
}


/* HEADER TITLE */

.home-gallery-heading h3 {
    margin: 0;
    padding: 0;
    color: #163b37;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}


/* HEADER SUBTITLE */

.home-gallery-heading-left > div > span {
    display: block;
    margin-top: 2px;
    color: #7a8d89;
    font-size: 10px;
    line-height: 14px;
}


/* =========================================================
   EVENT CARDS CONTAINER
   4 EVENTS IN ONE ROW
========================================================= */

.home-gallery-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    box-sizing: border-box;
}


/* =========================================================
   INDIVIDUAL EVENT CARD
========================================================= */

.home-gallery-card {
    display: block;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dce7e5;
    border-radius: 8px;
    overflow: hidden;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}


    .home-gallery-card:hover {
        border-color: #8bc6bd;
        box-shadow: 0 5px 14px rgba(0, 89, 79, 0.12);
        transform: translateY(-2px);
        color: inherit !important;
        text-decoration: none !important;
    }


/* =========================================================
   EVENT CARD TITLE
========================================================= */

.home-gallery-card-title {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 10px;
    background: #f7fbfa;
    border-bottom: 1px solid #e1ebe9;
    box-sizing: border-box;
    color: #17413c;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}


    .home-gallery-card-title span {
        display: block;
        min-width: 0;
    }


    /* ARROW */

    .home-gallery-card-title > i {
        flex-shrink: 0;
        color: #008577;
        font-size: 12px;
        transition: transform 0.2s ease;
    }


.home-gallery-card:hover
.home-gallery-card-title > i {
    transform: translateX(3px);
}


/* =========================================================
   PHOTO PREVIEW AREA
========================================================= */

.home-gallery-preview {
    width: 100%;
    display: grid;
    /* 5 random photos */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    background: #ffffff;
    box-sizing: border-box;
}


/* =========================================================
   INDIVIDUAL PREVIEW PHOTO
========================================================= */

.home-gallery-photo {
    position: relative;
    width: 100%;
    height: 65px;
    overflow: hidden;
    background: #edf3f2;
    border-radius: 4px;
}


    .home-gallery-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }


/* PHOTO ZOOM ON CARD HOVER */

.home-gallery-card:hover
.home-gallery-photo img {
    transform: scale(1.06);
}


/* =========================================================
   OPTIONAL PHOTO OVERLAY EFFECT
========================================================= */

.home-gallery-photo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 89, 79, 0);
    pointer-events: none;
    transition: background 0.25s ease;
}


.home-gallery-card:hover
.home-gallery-photo::after {
    background: rgba(0, 89, 79, 0.05);
}


/* =========================================================
   LARGE / MEDIUM SCREEN
   2 EVENT CARDS PER ROW
========================================================= */

@media (max-width: 1100px) {

    .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .home-gallery-photo {
        height: 75px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .home-gallery-section {
        margin-top: 14px;
    }


    .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 9px;
    }


    .home-gallery-card-title {
        min-height: 40px;
        padding: 7px 8px;
        font-size: 9px;
    }


    .home-gallery-photo {
        height: 62px;
    }


    .home-gallery-preview {
        gap: 2px;
        padding: 4px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-gallery-heading {
        padding: 9px 10px;
    }


    .home-gallery-main-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
    }


    .home-gallery-heading h3 {
        font-size: 13px;
    }


    .home-gallery-heading-left > div > span {
        font-size: 9px;
    }


    /* One event per row */

    .home-gallery-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }


    .home-gallery-card-title {
        min-height: 38px;
        font-size: 10px;
    }


    /* Keep all 5 preview photos */

    .home-gallery-preview {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
    }


    .home-gallery-photo {
        height: 68px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .home-gallery-preview {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }


    .home-gallery-photo {
        height: 55px;
    }


    .home-gallery-card-title {
        font-size: 9px;
    }
}


/* =========================================================
   PHOTO GALLERY PAGE
========================================================= */

.photo-gallery-page {
    width: 100%;
    padding: 15px 0 35px;
    box-sizing: border-box;
}

.photo-gallery-container {
    width: 94%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.photo-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 16px;
    margin-bottom: 12px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

.photo-gallery-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.photo-gallery-header-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 17px;
}

.photo-gallery-header h2 {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
}

.photo-gallery-header p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
}


/* =========================================================
   BACK TO DASHBOARD
========================================================= */

.photo-gallery-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 5px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

    .photo-gallery-back:hover {
        background: #ffffff;
        color: #00695f !important;
    }


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

.gallery-event-navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.gallery-event-button {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #d5e4e1;
    border-radius: 6px;
    color: #315c56 !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

    .gallery-event-button i {
        color: #00897b;
        font-size: 12px;
    }

    .gallery-event-button:hover {
        background: #eef8f6;
        border-color: #80bdb5;
        color: #00695f !important;
        transform: translateY(-1px);
    }


    /* =========================================================
   ACTIVE EVENT
========================================================= */

    .gallery-event-button.gallery-event-active {
        background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
        border-color: #087a6d;
        color: #ffffff !important;
        box-shadow: 0 2px 7px rgba(0, 89, 79, 0.20);
    }

        .gallery-event-button.gallery-event-active i {
            color: #ffffff;
        }


/* =========================================================
   SELECTED EVENT INFORMATION
========================================================= */

.gallery-selected-event {
    padding: 9px 12px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #d8e5e2;
    border-radius: 7px;
}

.gallery-selected-event-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gallery-selected-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #e5f4f1;
    color: #00796b;
    font-size: 13px;
}

.gallery-selected-event h3 {
    margin: 0;
    color: #174b44;
    font-size: 13px;
    font-weight: 600;
}

.gallery-selected-event span {
    display: block;
    margin-top: 2px;
    color: #738b87;
    font-size: 9px;
}


/* =========================================================
   PHOTO GRID
========================================================= */

.gallery-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}


/* =========================================================
   PHOTO CARD
========================================================= */

.gallery-photo-card {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #eef4f3;
    border: 1px solid #d8e5e2;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-photo-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
    }

    .gallery-photo-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.35s ease;
    }

    .gallery-photo-card:hover img {
        transform: scale(1.05);
    }


/* =========================================================
   PHOTO HOVER OVERLAY
========================================================= */

.gallery-photo-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 89, 79, 0);
    transition: background 0.25s ease;
}

.gallery-photo-card:hover .gallery-photo-overlay {
    background: rgba(0, 89, 79, 0.28);
}

.gallery-view-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    color: #00695f;
    font-size: 15px;
    opacity: 0;
    transform: scale(0.75);
    transition: all 0.2s ease;
}

.gallery-photo-card:hover .gallery-view-icon {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   NO PHOTOS AVAILABLE
========================================================= */

.gallery-empty {
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #d9e6e3;
    border-radius: 7px;
    text-align: center;
    color: #718783;
}

.gallery-empty-icon {
    margin-bottom: 8px;
    color: #91aaa6;
    font-size: 30px;
}

.gallery-empty h4 {
    margin: 0;
    color: #58736e;
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   FULL SCREEN LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.90);
    box-sizing: border-box;
}

    .gallery-lightbox.gallery-lightbox-open {
        display: flex;
    }

body.gallery-lightbox-body {
    overflow: hidden;
}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.gallery-lightbox-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 88vw;
    max-height: 88vh;
}

    .gallery-lightbox-content img {
        display: block;
        width: auto;
        height: auto;
        max-width: 88vw;
        max-height: 82vh;
        object-fit: contain;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 8px 35px rgba(0, 0, 0, 0.55);
    }


/* =========================================================
   PHOTO COUNTER
========================================================= */

.gallery-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 15px;
    color: #ffffff;
    font-size: 11px;
    white-space: nowrap;
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
========================================================= */

.gallery-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 100001;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .gallery-lightbox-close:hover {
        background: rgba(255, 255, 255, 0.28);
        transform: rotate(90deg);
    }


/* =========================================================
   PREVIOUS / NEXT BUTTONS
========================================================= */

.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 100001;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}

    .gallery-lightbox-nav:hover {
        background: rgba(255, 255, 255, 0.30);
    }

.gallery-lightbox-prev {
    left: 22px;
}

.gallery-lightbox-next {
    right: 22px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .gallery-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-event-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 768px) {

    .photo-gallery-container {
        width: 96%;
    }

    .photo-gallery-header {
        padding: 11px 12px;
    }

        .photo-gallery-header h2 {
            font-size: 15px;
        }

    .gallery-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-photo-card {
        height: 155px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 550px) {

    .photo-gallery-page {
        padding-top: 8px;
    }

    .photo-gallery-header {
        align-items: center;
    }

    .photo-gallery-header-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .photo-gallery-header p {
        display: none;
    }

    .photo-gallery-back {
        padding: 6px 8px;
        font-size: 9px;
    }

    .gallery-event-navigation {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .gallery-event-button {
        min-height: 38px;
        justify-content: flex-start;
        padding: 7px 10px;
        text-align: left;
    }

    .gallery-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .gallery-photo-card {
        height: 125px;
    }

    .gallery-lightbox {
        padding: 8px;
    }

    .gallery-lightbox-content {
        max-width: 96vw;
    }

        .gallery-lightbox-content img {
            max-width: 96vw;
            max-height: 78vh;
        }

    .gallery-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .gallery-lightbox-prev {
        left: 5px;
    }

    .gallery-lightbox-next {
        right: 5px;
    }

    .gallery-lightbox-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}


/* =========================================================
   SESSION EXPIRED MODAL
========================================================= */

.session-expired-modal {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.20);
}


    /* Modal Body */

    .session-expired-modal .modal-body {
        padding: 35px 30px 30px;
    }


/* Icon */

.session-expired-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f5f2;
    color: #087a6d;
    font-size: 29px;
}


/* Heading */

.session-expired-title {
    margin: 0 0 10px;
    color: #163b37;
    font-size: 21px;
    font-weight: 600;
}


/* Message */

.session-expired-message {
    max-width: 360px;
    margin: 0 auto 24px;
    color: #667875;
    font-size: 13px;
    line-height: 1.6;
}


/* Login Button */

.session-login-btn {
    min-width: 145px;
    padding: 10px 20px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient( 110deg, #00594f 0%, #087a6d 55%, #159487 100% );
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


    .session-login-btn i {
        margin-right: 6px;
    }


    .session-login-btn:hover {
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 89, 79, 0.20);
    }


    .session-login-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(8, 122, 109, 0.15);
    }


/* Mobile */

@media (max-width: 576px) {

    .session-expired-modal .modal-body {
        padding: 28px 20px 24px;
    }

    .session-expired-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }

    .session-expired-title {
        font-size: 19px;
    }
}


/* ============================================================
   USEFUL LINKS
============================================================ */

.useful-links-section {
    width: 100%;
    padding: 10px 10px 10px 10px;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.useful-links-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}


.useful-links-heading-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #008577;
    color: #ffffff;
    border-radius: 7px;
    font-size: 19px;
}


.useful-links-heading-text {
    min-width: 0;
}


    .useful-links-heading-text h3 {
        margin: 0 0 2px 0;
        color: #073f39;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
    }


    .useful-links-heading-text span {
        display: block;
        color: #6c7f7c;
        font-size: 12px;
        line-height: 1.3;
    }


/* ============================================================
   GRID
============================================================ */

.useful-links-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}


/* ============================================================
   CARD
============================================================ */

/* .useful-link-card {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(0, 105, 92, 0.10);
    border-radius: 8px;
}


    .useful-link-card:hover {
        transform: translateY(-2px);
        border-color: #82bdb4;
        box-shadow: 0 5px 12px rgba(0, 105, 92, 0.10);
    } */

    .useful-link-card {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 8px;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #f5fbfc);
    border: 1px solid #e0eeed;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 105, 92, 0.07);
    transition: all 0.5s ease;
    cursor: pointer;
    overflow: hidden;
}

/* Top Accent Line */
.useful-link-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #007dcb, #00a896);
    transition: width 0.3s ease;
}

/* Hover Effect */
.useful-link-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 105, 92, 0.13);
}

.useful-link-card:hover::before {
    width: 100%;
}


.useful-link-card:hover i {
    color: #008f80;
    transform: scale(1.12);
}




/* ============================================================
   LOGO
============================================================ */

.useful-link-logo {
    width: 62px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    padding: 5px;
    background: #f5faf9;
    border: 1px solid #deece9;
    border-radius: 8px;
}


    .useful-link-logo img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }


/* ============================================================
   TEXT
============================================================ */

.useful-link-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .useful-link-content strong {
        width: 100%;
        min-height: 36px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 0;
        color: #003f39;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }


    .useful-link-content span {
        display: block;
        width: 100%;
        color: #647773;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: break-word;
    }


/* ============================================================
   EXTERNAL LINK ICON
============================================================ */

.useful-link-arrow {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 13px;
    color: #159b8e;
}


.useful-link-card:hover .useful-link-arrow {
    transform: translate(2px, -2px);
    color: #005f55;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .useful-links-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }


    .useful-link-card {
        padding: 13px 7px 11px;
    }


    .useful-link-content strong {
        display: block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        color: #003f39;
        text-align: center;
    }


    .useful-link-content span {
        font-size: 11px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .useful-links-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }


    .useful-link-card {
        position: relative;
        min-width: 0;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 14px 8px 12px;
        text-align: center;
        text-decoration: none;
        background: #ffffff;
        border: 1px solid #d3e5e1;
        border-radius: 8px;
    }


    /* LOGO - same position for every card */
    .useful-link-logo {
        width: 62px;
        height: 58px;
        flex: 0 0 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px auto;
        padding: 5px;
        background: #f5faf9;
        border: 1px solid #deece9;
        border-radius: 8px;
    }



    .useful-link-content {
        align-items: flex-start;
    }


        .useful-link-content strong {
            font-size: 14px;
        }


        .useful-link-content span {
            font-size: 12px;
        }


    .useful-link-arrow {
        top: 50%;
        right: 13px;
        transform: translateY(-50%);
    }


    .useful-link-card:hover .useful-link-arrow {
        transform: translate(2px, -50%);
    }
}