:root {
    --blue: #90d4ff;
    --blue-dark: #0B4F71;
    --gold: #EFCB89;
    --ink: #142332;
    --muted: #64748b;
    --getrude: #90d4ff;
    --soft: #F4F8FD;
}

* {
    box-sizing: border-box
}
        /* Optional: Keeps the cursor from jumping visually while typing */
        .uppercase-input {
            text-transform: uppercase;
        }
body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.5
}
#imageCropperOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    background: rgba(0,0,0,.78);

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

    padding: 15px;
}


.cropper-modal {
    width: min(750px, 100%);

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);
}


.cropper-header {
    display: flex;

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

    padding: 14px 18px;

    border-bottom: 1px solid #ddd;
}


.cropper-close {
    border: 0;

    background: transparent;

    font-size: 30px;

    cursor: pointer;
}


.cropper-body {
    padding: 15px;
}


.crop-area {
    position: relative;

    width: 100%;

    height: 350px;

    overflow: hidden;

    background: #111;

    user-select: none;

    touch-action: none;
}


.crop-area img {
    position: absolute;

    top: 0;
    left: 0;

    max-width: none;
    max-height: none;

    cursor: grab;

    transform-origin: top left;

    user-select: none;

    -webkit-user-drag: none;
}


#cropBox {
    position: absolute;

    border: 2px solid #fff;

    box-shadow:
        0 0 0 9999px rgba(0,0,0,.60);

    pointer-events: none;

    z-index: 10;
}


/* Crop handles */

.crop-handle {
    position: absolute;

    width: 18px;
    height: 18px;

    background: #fff;

    border: 2px solid #0B4F71;

    border-radius: 50%;

    pointer-events: auto;

    z-index: 20;
}


.crop-handle.nw {
    top: -9px;
    left: -9px;

    cursor: nwse-resize;
}


.crop-handle.ne {
    top: -9px;
    right: -9px;

    cursor: nesw-resize;
}


.crop-handle.sw {
    bottom: -9px;
    left: -9px;

    cursor: nesw-resize;
}


.crop-handle.se {
    bottom: -9px;
    right: -9px;

    cursor: nwse-resize;
}


/* Zoom */

.zoom-controls {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 15px;
}


.zoom-controls input[type="range"] {
    flex: 1;
}


.zoom-controls button {
    min-width: 42px;
}


.cropper-controls {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 15px;

    border-top: 1px solid #ddd;
}


.cropper-status {
    text-align: center;

    padding: 0 15px 12px;

    font-size: 14px;
}


@media (max-width: 576px) {

    .crop-area {
        height: 350px;
    }


    .cropper-controls {
        flex-direction: column;
    }


    .cropper-controls button {
        width: 100%;
    }

}

.topbar {
    background: var(--getrude);
    color: #fff;
    font-size: .9rem;
    padding: .45rem 0
}

.topbar a {
    color: #fff;
    margin-left: .8rem
}

.brandbar {
    padding: 1rem 0;
    background: #fff
}

.brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: #0B4F71;
}

.brand img {
    width: 62px;
    height: 62px;
    object-fit: contain
}

.brand strong {
    display: block;
    font-size: 1.08rem;
    line-height: 1.2
}

.brand span {
    display: block;
    color: var(--muted);
    font-size: .78rem
}

.mainnav {
    background: var(--getrude);
    padding: .10rem 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.mainnav .nav-link {
    color: #fff;
    font-weight: 600;
    padding: .80rem 1rem
}

.mainnav .nav-link:hover {
    color: var(--gold)
}

.btn {
    border-radius: 10px;
    font-weight: 700
}

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #153244
}

.hero-slide {
    min-height: 560px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center
}

.hero-copy {
    max-width: 760px;
    color: #fff;
    padding: 5rem 0
}

.hero-copy h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1.04;
    font-weight: 800
}

.hero-copy p {
    font-size: 1.15rem;
    max-width: 650px
}

.eyebrow,
.section-kicker {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .76rem;
    color: #D6F0FF
}

.quick-strip {
    background: #fff;
    position: relative;
    margin-top: -38px;
    z-index: 5
}

.quick-strip .container {
    box-shadow: 0 18px 50px rgba(5, 49, 75, .12);
    border-radius: 18px;
    background: #fff
}

.quick-strip a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem;
    text-decoration: none;
    color: var(--ink)
}

.quick-strip i {
    font-size: 1.7rem;
    color: var(--blue)
}

.quick-strip b,
.quick-strip small {
    display: block
}

.quick-strip small {
    color: var(--muted)
}

.section-pad {
    padding: 6rem 0
}

.soft-bg {
    background: var(--soft)
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 800
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem
}

.about-card {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    color: #fff;
    border-radius: 26px;
    padding: 2rem;
    box-shadow: 0 25px 60px rgba(3, 50, 82, .18)
}

.about-stat {
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18)
}

.about-stat:last-child {
    border-bottom: 0
}

.about-stat strong,
.about-stat span {
    display: block
}

.about-stat strong {
    font-size: 1.35rem
}

.about-stat span {
    color: #cfe6f1
}

.feature-card,
.news-card,
.event-card,
.gallery-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .07);
    height: 100%;
    overflow: hidden
}

.feature-card {
    padding: 2rem
}

.icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e3f1f8;
    color: var(--blue);
    font-size: 1.3rem;
    margin-bottom: 1rem
}

.feature-card h3,
.news-card h3,
.event-card h3 {
    font-size: 1.25rem;
    font-weight: 800
}

.news-img {
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #dceaf1
}

.news-card small {
    color: var(--blue);
    font-weight: 700
}

.news-card a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none
}

.cta-section {
    padding: 4rem 0;
    background: linear-gradient(100deg, var(--blue-dark), var(--blue));
    color: #fff
}

.cta-section p {
    color: #d7e8f0
}

.event-card {
    padding: 1.4rem;
    display: flex;
    gap: 1.2rem
}

.event-date {
    min-width: 72px;
    height: 72px;
    border-radius: 15px;
    background: var(--gold);
    display: grid;
    place-items: center;
    text-align: center;
    color: #203A5C
}

.event-date b {
    font-size: 1.6rem;
    line-height: 1
}

.event-date span {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase
}

.footer {
    background: #052B5F;
    color: #c7dbe5;
    padding: 4rem 0 1.5rem
}

.footer h4 {
    color: #fff;
    font-size: 1rem
}

.footer a {
    display: block;
    color: #c7dbe5;
    text-decoration: none;
    margin: .3rem 0
}

.brand-light {
    color: #fff
}

.brand-light span {
    color: #a8c6d5
}

.footer hr {
    border-color: rgba(255, 255, 255, .12);
    margin: 2rem 0
}

.page-hero {
    background: linear-gradient(100deg, var(--blue-dark), var(--blue));
    color: #fff;
    padding: 4.5rem 0
}

.page-hero h1 {
    font-size: 3rem;
    font-weight: 800
}

.form-card {
    background: #fff;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 15px 45px rgba(15, 23, 42, .08)
}

.gallery-card img {
    width: 100%;
    height: 220px;
    object-fit: cover
}

.admin-body {
    background: #f4f7fb
}

.admin-sidebar {
    background: #06366E;
    color: #d7e8f0;
    min-height: 100vh
}

.admin-sidebar a {
    color: #d7e8f0;
    text-decoration: none;
    display: block;
    padding: .65rem 1rem;
    border-radius: 8px
}

.admin-sidebar a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff
}

.stat-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06)
}

.table thead th {
    white-space: nowrap
}

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    display: grid;
    place-items: center
}

.login-card {
    width: min(440px, 92vw);
    background: #fff;
    border-radius: 24px;
    padding: 2.3rem;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .2)
}

@media(max-width:767px) {
    .hero-slide {
        min-height: 520px
    }

    .hero-copy {
        padding: 4rem 1rem
    }

    .quick-strip {
        margin-top: 0
    }

    .section-pad {
        padding: 4rem 0
    }

    .section-head {
        align-items: start;
        flex-direction: column
    }

    .brandbar .header-actions .btn-outline-primary {
        display: none !important
    }

    .brand strong {
        font-size: .9rem
    }

    .brand img {
        width: 52px;
        height: 52px
    }

    .brandbar {
        padding: .5rem 0
    }
}

.admin-shell {
    display: flex;
    min-height: 100vh
}

.admin-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: #06366E;
    color: #d7e8f0;
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1045
}

.admin-sidebar a {
    color: #d7e8f0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .68rem .8rem;
    border-radius: 8px
}

.admin-sidebar a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff
}

.admin-main {
    min-width: 0;
    flex: 1
}

.admin-overlay {
    display: none
}

@media(max-width:991.98px) {
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, .2)
    }

    .admin-sidebar.open {
        transform: translateX(0)
    }

    .admin-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040
    }

    .admin-overlay.show {
        display: block
    }

    .admin-main {
        width: 100%
    }
}

.admin-menu-open {
    overflow: hidden
}

@media(max-width:991.98px) {
    .admin-sidebar {
        z-index: 1050
    }

    .admin-overlay {
        z-index: 1040
    }

    .admin-sidebar.open {
        transform: translateX(0)
    }
}

/* V6 modern application form */
.application-page {
    background: linear-gradient(180deg, #f7fafc 0, #fff 55%)
}

.application-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start
}

.application-progress {
    position: sticky;
    top: 24px;
    align-self: start
}

.progress-card {
    background: #fff;
    border: 1px solid #e4edf3;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 16px 45px rgba(15, 23, 42, .07)
}

.app-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e5f2f8, #f9edc4);
    display: grid;
    place-items: center;
    color: var(--blue);
    font-size: 1.45rem;
    margin-bottom: 1rem
}

.application-card {
    padding: clamp(1.15rem, 3vw, 2.2rem);
    border-radius: 26px;
    border: 1px solid #e5edf3
}

.application-card-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e8eef2
}

.application-card-head h2 {
    font-size: clamp(1.55rem, 3vw, 2.2rem)
}

.application-section {
    padding: 1.8rem 0;
    border-bottom: 1px solid #e8eef2
}

.application-section:last-child {
    border-bottom: 0
}

.application-section-title {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: 1.5rem
}

.section-number {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: #e8f3f8;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-weight: 800
}

.application-section-title h4 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 0
}

.application-section-title p {
    font-size: .88rem;
    color: var(--muted);
    margin: .15rem 0 0
}

.application-field {
    max-width: 920px
}

.application-field .form-label {
    font-weight: 700;
    color: #243746;
    margin-bottom: .55rem
}

.application-input {
    min-height: 54px;
    border-radius: 12px;
    border: 1px solid #cfdce4;
    padding: .78rem 1rem;
    font-size: 1rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02)
}

textarea.application-input {
    min-height: 130px;
    resize: vertical
}

.application-input:focus {
    border-color: #4d9ac0;
    box-shadow: 0 0 0 .22rem rgba(7, 89, 133, .1)
}

.upload-box {
    padding: 1rem;
    border: 1px dashed #b9ccd8;
    border-radius: 14px;
    background: #fbfdfe
}

.application-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding-top: 1.6rem
}

.application-actions .btn {
    border-radius: 12px
}

.tz-location-select[data-tz-disabled="1"] {
    background: #f2f6f8
}

.builder-card {
    border: 1px solid #e5edf3
}

.builder-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #e8f3f8;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 1.2rem
}

.program-picker {
    min-width: 280px
}

.auto-help {
    background: #f1f8fb;
    border: 1px solid #d5eaf2;
    border-radius: 12px;
    padding: .8rem 1rem;
    color: #365466;
    font-size: .9rem
}

.application-hero {
    padding: 3.5rem 0
}

@media(max-width:991.98px) {
    .application-layout {
        grid-template-columns: 1fr
    }

    .application-progress {
        position: static
    }

    .progress-card {
        display: block
    }

    .application-card-head {
        flex-direction: column
    }

    .application-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .program-picker {
        width: 100%;
        min-width: 0
    }
}

@media(max-width:575.98px) {
    .application-card {
        padding: 1rem;
        border-radius: 18px
    }

    .application-section {
        padding: 1.35rem 0
    }

    .application-input {
        min-height: 52px
    }

    .application-actions .btn {
        width: 100%
    }

    .application-actions .d-flex {
        width: 100%
    }

    .application-card-head .btn {
        width: 100%
    }
}

/* V8 professional application form */
.application-page {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 55%)
}

.application-card {
    border: 1px solid rgba(7, 89, 133, .10);
    box-shadow: 0 18px 55px rgba(17, 55, 82, .08);
    border-radius: 22px;
    overflow: hidden
}

.application-card-head {
    padding: 28px 30px;
    background: linear-gradient(135deg, rgba(7, 89, 133, .08), rgba(218, 165, 32, .10));
    border-bottom: 1px solid rgba(7, 89, 133, .10);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center
}

.application-section {
    padding: 28px 30px;
    border-bottom: 1px solid #edf2f7
}

.application-section:last-child {
    border-bottom: 0
}

.application-section-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px
}

.application-section-title h4 {
    margin: 0;
    font-weight: 800
}

.application-section-title p {
    margin: 3px 0 0;
    color: #6b7c8f;
    font-size: .88rem
}

.section-number {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #90d4ff;
    color: #fff;
    flex: 0 0 auto
}

.application-field .form-label {
    font-weight: 700;
    color: #203547;
    margin-bottom: 8px
}

.application-input {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid #d8e1e9;
    padding: 12px 15px;
    font-size: 1rem;
    background: #fff;
    box-shadow: none
}

.application-input:focus {
    border-color: #0B4F71;
    box-shadow: 0 0 0 4px rgba(7, 89, 133, .10)
}

textarea.application-input {
    min-height: 125px;
    resize: vertical
}

.application-field {
    height: 100%
}

.upload-box {
    padding: 16px;
    border: 1px dashed #b9c9d6;
    border-radius: 14px;
    background: #f9fcff
}

.passport-preview {
    width: 135px;
    height: 165px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 7px 25px rgba(0, 0, 0, .12)
}

.passport-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.application-actions {
    padding: 24px 30px;
    background: #fbfcfe;
    border-top: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center
}

.tz-location-select:disabled {
    background: #f3f7fa;
    cursor: wait
}

.@media(max-width:767.98px) {
    .application-card-head {
        padding: 22px 18px;
        align-items: flex-start;
        flex-direction: column
    }

    .application-section {
        padding: 22px 18px
    }

    .application-actions {
        padding: 20px 18px;
        flex-direction: column;
        align-items: stretch
    }

    .application-actions .d-flex {
        width: 100%;
        flex-direction: column
    }

    .application-actions .btn {
        width: 100%
    }

    .application-input {
        min-height: 50px
    }

    .application-layout {
        display: block
    }

    .application-progress {
        display: block;
        margin-bottom: 1rem
    }
}

.admin-applicant-photo {
    width: 130px;
    height: 160px;
    object-fit: cover;
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
    background: #eef4f8
}

.admin-applicant-photo.placeholder {
    display: grid;
    place-items: center;
    font-size: 48px;
    color: #8aa0b2
}

/* V10 applicant approval/payment UI */
.application-side-photo {
    width: 118px;
    height: 148px;
    object-fit: cover;
    border-radius: 16px;
    border: 4px solid #fff;
    box-shadow: 0 10px 28px rgba(7, 89, 133, .18);
    display: block;
    margin: 0 auto 1rem
}

.payment-card {
    background: linear-gradient(135deg, #fff9e6, #f8f1d2);
    border: 1px solid #EFCB89;
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-bottom: 1rem
}

.status-result-card {
    background: #fff;
    border: 1px solid #e2ebf1;
    border-radius: 24px;
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    box-shadow: 0 18px 55px rgba(17, 55, 82, .08);
    margin-bottom: 1.5rem
}

.status-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    font-size: 2rem
}

.approved-card .status-icon {
    background: #e4f7eb;
    color: #16834b
}

.waiting-card .status-icon {
    background: #e9f4fb;
    color: #06469F
}

.rejected-card .status-icon {
    background: #fde9eb;
    color: #b42318
}

.status-result-card h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800
}

.status-result-card h4 {
    font-weight: 700;
    color: #526777
}

.status-result-card .alert {
    max-width: 560px;
    margin: 1rem auto 0
}

.btn-gold {
    background: #d8b85a;
    border-color: #d8b85a;
    color: #203A5C;
    font-weight: 700
}

.btn-gold:hover {
    background: #caa947;
    border-color: #caa947;
    color: #203A5C
}

/* V15: keep the applicant entry screen clean; strong borders are reserved for the printable PDF. */
.application-card {
    border: 0 !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06)
}

.application-card-head {
    border-bottom: 0 !important
}

.application-section {
    border-bottom: 0 !important
}

.application-field .form-label {
    font-weight: 600
}

.application-section-title .section-number {
    box-shadow: none
}


/* V16 form layout fix: explicit grid prevents email/job fields from overlapping the next section. */
.application-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 28px;
    align-items: start;
    width: 100%;
}

.application-field-wrap {
    min-width: 0;
    width: 100%;
}

.application-field-wrap.application-field-full {
    grid-column: 1 / -1;
}

.application-field {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
}

.application-field .form-label {
    display: block;
    line-height: 1.35;
    min-height: 1.35em;
    white-space: normal;
    overflow-wrap: anywhere;
}

.application-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.application-input[type="email"],
.application-input[type="text"],
.application-input[type="number"],
.application-input[type="date"],
.application-input[type="file"],
.application-input[type="password"],
.application-input.form-control,
.application-input.form-select {
    width: 100%;
    max-width: 100%;
}

.upload-box {
    width: 100%;
    min-width: 0;
}

.application-section {
    min-width: 0;
    overflow: visible;
}

.application-section .application-fields-grid>* {
    min-width: 0;
}

@media(max-width:767.98px) {
    .application-fields-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .application-field-wrap.application-field-full {
        grid-column: 1;
    }

    .application-section {
        overflow: visible;
    }
}

/* =========================================================
   OCEANIC BLUE MODERN UI — visual layer only
   Keeps existing PHP/database functionality unchanged.
   ========================================================= */
:root{
    --ocean:#90d4ff;
    --ocean-deep:#0B4F71;
    --ocean-dark:#073B55;
    --ocean-light:#E8F6FF;
    --ocean-mist:#F5FBFF;
    --accent-gold:#EFCB89;
    --logo-blue-light:#58B8F2;
    --logo-blue-mid:#2F8EC6;
    --logo-blue-pale:#C7E9FF;
    --logo-ink:#17384A;
    --white:#fff;
    --shadow-soft:0 14px 45px rgba(0,91,106,.10);
    --shadow-hover:0 24px 65px rgba(0,91,106,.18);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
::selection{background:rgba(6,70,159,.20);color:var(--ocean-dark)}
a{transition:color .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease}
.topbar{background:linear-gradient(90deg,var(--ocean-dark),var(--ocean));}
.brand{color:var(--ocean)!important}
.brand strong{color:var(--ocean-dark)}
.brandbar{padding:1.05rem 0;position:relative;z-index:20}
.brand img{filter:drop-shadow(0 7px 14px rgba(0,91,106,.14))}
.mainnav{background:linear-gradient(90deg,var(--ocean-deep),var(--ocean));position:sticky;top:0;z-index:1030;padding:.18rem 0;box-shadow:0 8px 28px rgba(0,63,74,.16)}
.mainnav .nav-link{position:relative;padding:.82rem .95rem}
.mainnav .nav-link:after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:2px;background:var(--accent-gold);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.mainnav .nav-link:hover:after,.mainnav .nav-link.active:after{transform:scaleX(1)}
.navbar-toggler{border-color:rgba(255,255,255,.45)}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(239,203,137,.25)}
.btn{border-radius:12px;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,91,106,.16)}
.btn-primary{background:var(--ocean);border-color:var(--ocean)}
.btn-primary:hover,.btn-primary:focus{background:var(--ocean-deep);border-color:var(--ocean-deep)}
.btn-outline-primary{color:var(--ocean);border-color:rgba(6,70,159,.45)}
.btn-outline-primary:hover{background:var(--ocean);border-color:var(--ocean);color:#fff}
.btn-gold{background:var(--accent-gold);border-color:var(--accent-gold)}
.hero-wrap{position:relative}
.hero-slide{min-height:600px}
.hero-copy{position:relative;text-shadow:0 2px 22px rgba(0,0,0,.28)}
.hero-copy h1{letter-spacing:-.035em}
.hero-copy .eyebrow{color:#D8E8FA}
.carousel-control-prev,.carousel-control-next{width:8%}
.quick-strip .container{border:1px solid rgba(6,70,159,.08);box-shadow:var(--shadow-hover)}
.quick-strip a{transition:transform .2s ease,background .2s ease}
.quick-strip a:hover{transform:translateY(-3px);background:var(--ocean-mist)}
.quick-strip i{color:var(--ocean)}
.section-kicker{color:var(--ocean)}
.section-head{margin-bottom:2.35rem}
.about-card{background:linear-gradient(145deg,var(--ocean-dark),var(--ocean-deep) 55%,var(--ocean));position:relative;overflow:hidden}
.about-card:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.15);border-radius:50%;right:-60px;top:-55px;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.025)}
.feature-card,.news-card,.event-card,.gallery-card,.form-card{border:1px solid rgba(0,91,106,.07);box-shadow:var(--shadow-soft);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.feature-card:hover,.news-card:hover,.event-card:hover,.gallery-card:hover,.form-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(6,70,159,.18)}
.icon-circle{background:linear-gradient(135deg,var(--ocean-light),#fff);color:var(--ocean);box-shadow:inset 0 0 0 1px rgba(6,70,159,.08)}
.news-img{transition:transform .45s ease}
.news-card:hover .news-img{transform:scale(1.035)}
.news-card small,.news-card a{color:var(--ocean)}
.cta-section{background:linear-gradient(115deg,var(--ocean-dark),var(--ocean-deep),var(--ocean))}
.page-hero{background:linear-gradient(115deg,var(--ocean-dark),var(--ocean-deep),var(--ocean));position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(255,255,255,.10);border-radius:50%;right:-100px;bottom:-190px;box-shadow:0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.02)}
.page-hero .container{position:relative;z-index:1}
.footer{background:var(--ocean-dark)}
.form-control,.form-select{border-radius:12px;border-color:#CFDEE2}
.form-control:focus,.form-select:focus{border-color:var(--ocean);box-shadow:0 0 0 .22rem rgba(6,70,159,.12)}
.badge.text-bg-primary{background:var(--ocean)!important}
.admin-sidebar{background:linear-gradient(180deg,var(--ocean-dark),#06366E)}
.admin-sidebar a:hover{background:rgba(255,255,255,.10)}
.admin-sidebar a.active{background:rgba(239,203,137,.16);color:#fff;border-left:3px solid var(--accent-gold)}
.stat-card{border-top:3px solid var(--ocean)}
.login-page{background:radial-gradient(circle at 20% 10%,var(--logo-blue-light) 0,var(--ocean-deep) 45%,var(--ocean-dark) 100%)}
.builder-icon,.section-number{background:var(--ocean-light);color:var(--ocean)}
.auto-help{background:var(--ocean-mist);border-color:#CDECEF}

/* Lightweight page loader: non-blocking top progress bar instead of a full-screen spinner. */
#siteLoader{position:fixed;left:0;right:0;top:0;height:3px;z-index:99999;background:transparent;pointer-events:none;opacity:1;transition:opacity .2s ease}
#siteLoader::before{content:"";display:block;height:100%;width:34%;background:linear-gradient(90deg,var(--ocean),var(--logo-blue-light),var(--accent-gold));box-shadow:0 0 12px rgba(6,70,159,.28);transform:translateX(-120%);animation:pageLoaderRun .8s ease-in-out infinite}
#siteLoader.is-hidden{opacity:0}
@keyframes pageLoaderRun{0%{transform:translateX(-120%)}60%{transform:translateX(280%)}100%{transform:translateX(420%)}}
/* Subtle reveal animation added by jQuery without changing content */
.reveal-item{opacity:1;transform:translateY(0);transition:opacity .45s ease,transform .45s ease}
.reveal-item.revealed{opacity:1;transform:none}
.loading-state{cursor:default}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .reveal-item{opacity:1;transform:none}
}
@media(max-width:767px){
    .hero-slide{min-height:540px}
    .mainnav .nav-link:after{display:none}
    .section-pad{padding:4.5rem 0}
}

/* Logo-palette polish */
.topbar .socials a:hover{color:var(--accent-gold);transform:translateY(-1px)}
.brandbar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--logo-blue-pale),transparent)}
.mainnav .nav-link.active{color:#fff}
.section-pad.soft-bg{background:linear-gradient(180deg,#F4F8FD 0%,#fff 100%)}
.quick-strip .container{backdrop-filter:blur(8px)}
.feature-card,.news-card,.event-card,.gallery-card,.form-card{will-change:transform}
.form-control:focus,.form-select:focus{border-color:var(--ocean);box-shadow:0 0 0 .22rem rgba(6,70,159,.14)}
.admin-sidebar a.active{box-shadow:inset 0 0 0 1px rgba(239,203,137,.18)}


/* =========================================================
   LIGHT BLUE IDENTITY — #90D4FF
   St. Getrude visual theme: light blue + deep ocean blue + warm gold.
   ========================================================= */
:root{
  --identity-blue:#90D4FF;
  --identity-blue-2:#BFE8FF;
  --identity-blue-3:#E8F6FF;
  --identity-blue-hover:#6FC4F4;
  --contrast-blue:#0B4F71;
  --contrast-deep:#073B55;
  --accent-gold:#EFCB89;
  --soft-white:#F7FCFF;
  --shadow-blue:0 16px 45px rgba(11,79,113,.12);
}

body{background:#fff;color:#17384A}
::selection{background:rgba(144,212,255,.55);color:var(--contrast-deep)}
.topbar{background:var(--contrast-deep);color:#fff}
.brand{color:var(--contrast-blue)!important}
.brand strong{color:var(--contrast-deep)}
.brandbar:after{background:linear-gradient(90deg,transparent,var(--identity-blue),transparent)}
.mainnav{background:var(--identity-blue);box-shadow:0 8px 25px rgba(11,79,113,.14)}
.mainnav .nav-link{color:var(--contrast-deep)}
.mainnav .nav-link:hover,.mainnav .nav-link.active{color:var(--contrast-deep)}
.mainnav .nav-link:after{background:var(--contrast-blue)}
.navbar-toggler{border-color:rgba(7,59,85,.35)}
.navbar-toggler-icon{filter:brightness(.45)}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(11,79,113,.15)}
.btn-primary{background:var(--contrast-blue);border-color:var(--contrast-blue);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--contrast-deep);border-color:var(--contrast-deep);color:#fff}
.btn-outline-primary{color:var(--contrast-blue);border-color:rgba(11,79,113,.45)}
.btn-outline-primary:hover{background:var(--identity-blue);border-color:var(--identity-blue);color:var(--contrast-deep)}
.btn-gold{background:var(--accent-gold);border-color:var(--accent-gold);color:#17384A}
.hero-slide{background-color:var(--contrast-deep)}
.hero-copy .eyebrow{color:#DDF4FF}
.quick-strip .container{border-color:rgba(144,212,255,.6);box-shadow:var(--shadow-blue)}
.quick-strip a:hover{background:var(--identity-blue-3)}
.quick-strip i,.section-kicker,.news-card small,.news-card a{color:var(--contrast-blue)}
.section-pad.soft-bg{background:linear-gradient(180deg,var(--soft-white),#fff)}
.about-card{background:linear-gradient(145deg,var(--contrast-deep),var(--contrast-blue) 58%,#2F8EC6)}
.feature-card,.news-card,.event-card,.gallery-card,.form-card{border-color:rgba(144,212,255,.48);box-shadow:var(--shadow-blue)}
.feature-card:hover,.news-card:hover,.event-card:hover,.gallery-card:hover,.form-card:hover{border-color:rgba(11,79,113,.28);box-shadow:0 22px 58px rgba(11,79,113,.16)}
.icon-circle{background:linear-gradient(135deg,var(--identity-blue-2),#fff);color:var(--contrast-blue);box-shadow:inset 0 0 0 1px rgba(11,79,113,.08)}
.cta-section,.page-hero{background:linear-gradient(115deg,var(--contrast-deep),var(--contrast-blue) 60%,#2F8EC6)}
.form-control:focus,.form-select:focus{border-color:var(--identity-blue-hover);box-shadow:0 0 0 .22rem rgba(144,212,255,.30)}
.badge.text-bg-primary{background:var(--contrast-blue)!important}
.admin-sidebar{background:linear-gradient(180deg,var(--contrast-deep),var(--contrast-blue))}
.admin-sidebar a:hover{background:rgba(144,212,255,.16)}
.admin-sidebar a.active{background:rgba(144,212,255,.22);border-left-color:var(--identity-blue);color:#fff}
.stat-card{border-top-color:var(--identity-blue)}
.builder-icon,.section-number{background:var(--identity-blue-3);color:var(--contrast-blue)}
.auto-help{background:var(--identity-blue-3);border-color:var(--identity-blue-2)}
.login-page{background:radial-gradient(circle at 20% 10%,var(--identity-blue) 0,var(--contrast-blue) 50%,var(--contrast-deep) 100%)}

/* Loader: short, finite and non-blocking. It never sits over the page. */
#siteLoader{height:2px;background:transparent;opacity:0;transition:opacity .18s ease}
#siteLoader::before{height:100%;width:28%;background:linear-gradient(90deg,var(--identity-blue),#DDF4FF,var(--contrast-blue));box-shadow:0 0 8px rgba(144,212,255,.45);transform:translateX(-130%);animation:none}
#siteLoader.is-active{opacity:1}
#siteLoader.is-active::before{animation:pageLoaderOnce .55s ease-out 1 forwards}
#siteLoader.is-hidden{opacity:0}
@keyframes pageLoaderOnce{0%{transform:translateX(-130%)}100%{transform:translateX(430%)}}

/* Light-blue accents for badges, separators and cards. */
.card-accent,.accent-line{background:var(--identity-blue)!important}
hr{border-color:var(--identity-blue-2)}


/* =========================================================
   ST. GETRUDE IDENTITY REFRESH — LIGHT OCEANIC BLUE
   Primary identity: #90D4FF
   Supporting colours are deliberately dark/neutral so that
   #90D4FF remains the visual signature without hurting text contrast.
   ========================================================= */
:root {
    --blue: #90D4FF;
    --blue-dark: #174B68;
    --blue-deep: #0D344A;
    --blue-mid: #4BA7D9;
    --blue-soft: #EAF7FF;
    --blue-pale: #F5FBFF;
    --gold: #EFCB89;
    --gold-deep: #9A6B19;
    --ink: #173042;
    --muted: #5E7180;
    --soft: #F4FBFF;
    --border-blue: #C5E8FA;
    --shadow-blue: rgba(23, 75, 104, .12);
}

/* Core identity surfaces */
body { color: var(--ink); background: #fff; }
.topbar { background: var(--blue-dark); color: #fff; }
.topbar a { color: #fff; }
.brandbar { background: linear-gradient(180deg, #fff 0%, var(--blue-pale) 100%); border-bottom: 1px solid var(--border-blue); }
.brand { color: var(--blue-dark); }
.brand strong { color: var(--blue-dark); }
.brand span { color: var(--muted); }

.mainnav {
    background: var(--blue);
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(23,75,104,.10);
    box-shadow: 0 7px 22px rgba(23,75,104,.14);
    padding: .18rem 0;
}
.mainnav .navbar-collapse {
    width: 100%;
    display: block;
}
/* Bootstrap 5 defaults .navbar-nav to a vertical column. Override that
   explicitly so the public navigation is horizontal on desktop/tablet. */
.mainnav .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mainnav .nav-item {
    flex: 0 0 auto;
}
.mainnav .nav-link {
    color: var(--blue-deep);
    font-weight: 750;
    padding: .72rem .9rem;
    border-radius: 10px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mainnav .nav-link:hover,
.mainnav .nav-link:focus,
.mainnav .nav-link.active {
    color: var(--blue-deep);
    background: rgba(255,255,255,.62);
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-color: #10384F;
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #0D344A;
    --bs-btn-hover-bg: #74C6F5;
    --bs-btn-hover-border-color: #74C6F5;
    --bs-btn-active-bg: #64B8E8;
    --bs-btn-active-border-color: #64B8E8;
}
.btn-outline-primary {
    --bs-btn-color: var(--blue-dark);
    --bs-btn-border-color: var(--blue-mid);
    --bs-btn-hover-color: #10384F;
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
}
.text-primary { color: var(--blue-dark) !important; }
.bg-primary { background-color: var(--blue) !important; color: var(--blue-deep) !important; }
.border-primary { border-color: var(--blue) !important; }
.progress-bar { background-color: var(--blue-mid); }

.hero-slide { position: relative; }
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13,52,74,.70), rgba(23,75,104,.30), rgba(144,212,255,.05));
    pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; color: #fff; }
.hero-copy .eyebrow,
.hero-copy .section-kicker { color: var(--blue); }

.eyebrow, .section-kicker { color: var(--blue-dark); }
.page-hero {
    background: linear-gradient(135deg, var(--blue) 0%, #BFE7FC 55%, #EAF7FF 100%);
    color: var(--blue-deep);
    border-bottom: 1px solid var(--border-blue);
}
.page-hero h1 { color: var(--blue-deep); }
.page-hero p { color: #31566B; }

.soft-bg { background: var(--soft); }
.quick-strip { background: transparent; }
.quick-strip .container {
    border: 1px solid var(--border-blue);
    box-shadow: 0 18px 50px var(--shadow-blue);
}
.quick-strip a { color: var(--ink); }
.quick-strip i { color: var(--blue-dark); }
.quick-strip small { color: var(--muted); }

.about-card {
    background: linear-gradient(135deg, #6CC2F2 0%, var(--blue) 55%, #BFE9FF 100%);
    color: var(--blue-deep);
    border: 1px solid rgba(255,255,255,.75);
}
.about-card p, .about-stat span { color: #234B62; }
.about-stat { border-bottom-color: rgba(13,52,74,.14); }

.feature-card, .news-card, .event-card, .gallery-card, .form-card {
    border: 1px solid var(--border-blue);
    box-shadow: 0 12px 35px var(--shadow-blue);
}
.feature-card:hover, .news-card:hover, .event-card:hover, .gallery-card:hover {
    border-color: #90D4FF;
    box-shadow: 0 18px 42px rgba(23,75,104,.16);
}
.icon-circle { background: var(--blue-soft); color: var(--blue-dark); }
.news-card small, .news-card a { color: var(--blue-dark); }
.news-img { background-color: var(--blue-soft); }

.cta-section {
    background: linear-gradient(105deg, #5BB7E9 0%, var(--blue) 55%, #C6ECFF 100%);
    color: var(--blue-deep);
}
.cta-section p { color: #234B62; }
.event-date { background: var(--gold); color: #5D4215; }

.footer {
    background: var(--blue-deep);
    color: #D6ECF8;
    border-top: 5px solid var(--blue);
}
.footer h4 { color: var(--blue); }
.footer a { color: #D6ECF8; }
.footer a:hover { color: #fff; }
.brand-light span { color: #B9D9EA; }

/* Forms, tables and interactive controls inherit the identity */
.form-control, .form-select {
    border-color: #C8E6F6;
}
.form-control:focus, .form-select:focus {
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 .2rem rgba(144,212,255,.28);
}
.form-check-input:checked { background-color: var(--blue-mid); border-color: var(--blue-mid); }
.table thead th { background: var(--blue-soft); color: var(--blue-deep); border-bottom-color: var(--blue); }
.badge.text-bg-primary { background-color: var(--blue) !important; color: var(--blue-deep) !important; }

/* Admin identity */
.admin-body { background: #F4FAFE; }
.admin-sidebar {
    background: linear-gradient(180deg, var(--blue-deep), #174B68);
    color: #DDF3FF;
    border-right: 3px solid var(--blue);
}
.admin-sidebar a { color: #DDF3FF; }
.admin-sidebar a:hover, .admin-sidebar a.active {
    background: var(--blue);
    color: var(--blue-deep);
}
.stat-card { border: 1px solid var(--border-blue); }
.login-page { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); }
.login-card { border-top: 6px solid var(--blue); }

/* Application pages */
.application-page { background: linear-gradient(180deg, var(--blue-pale) 0, #fff 55%); }
.progress-card, .application-card { border-color: var(--border-blue); }
.app-avatar { background: linear-gradient(135deg, var(--blue-soft), #FFF7E5); color: var(--blue-dark); }
.section-number { background: var(--blue-soft); color: var(--blue-dark); }

/* The site loader is only a short, non-blocking top line. */
#siteLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--blue);
    box-shadow: 0 0 10px rgba(144,212,255,.75);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
}
#siteLoader.is-active { opacity: 1; width: 78%; transition: width .32s ease, opacity .1s ease; }
#siteLoader.is-hidden { opacity: 0; width: 100%; transition: width .18s ease, opacity .2s ease .08s; }

/* =========================================================
   MOBILE PUBLIC NAVIGATION — NO TOGGLE/HAMBURGER
   Nine links wrap naturally into two compact rows.
   ========================================================= */
@media (max-width: 991.98px) {
    .mainnav { padding: .45rem .25rem; }
    .mainnav .container { padding-left: .5rem; padding-right: .5rem; }
    .mainnav .navbar-collapse {
        display: block !important;
        flex-basis: auto;
    }
    .mainnav .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        gap: .18rem .15rem;
    }
    .mainnav .nav-item { flex: 0 0 auto; }
    .mainnav .nav-link {
        font-size: .73rem;
        line-height: 1.15;
        padding: .48rem .48rem;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        border-radius: 8px;
    }
}

@media (max-width: 575.98px) {
    .mainnav { padding: .38rem .2rem; }
    .mainnav .navbar-nav { gap: .12rem .08rem; }
    .mainnav .nav-link {
        font-size: .67rem;
        padding: .43rem .34rem;
        letter-spacing: -.01em;
    }
    .brandbar .container { gap: .5rem; }
    .header-actions .btn { font-size: .72rem; padding: .45rem .55rem; }
    .brand strong { font-size: .82rem; }
    .brand span { font-size: .68rem; }
    .brand img { width: 48px; height: 48px; }
}

/* Exact two-row mobile arrangement: 5 links on row one + 4 on row two. */
@media (max-width: 991.98px) {
    .mainnav .navbar-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .16rem;
    }
    .mainnav .nav-item { min-width: 0; }
    .mainnav .nav-link {
        width: 100%;
        min-width: 0;
        font-size: .59rem;
        padding: .44rem .15rem;
        overflow: hidden;
        text-overflow: clip;
    }
}

/* Latest-news ticker above the main navigation */
.news-ticker{background:#fff;border-bottom:1px solid #c5e8fa;box-shadow:0 4px 14px rgba(23,75,104,.06);position:relative;z-index:1025}
.news-ticker-inner{display:flex;align-items:center;gap:.75rem;min-height:44px;overflow:hidden}
.news-new{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--blue-deep)}
.news-new img{width:52px;height:22px;object-fit:contain}
.ticker-track{overflow:hidden;flex:1;min-width:0}
.ticker-items{display:flex;gap:2.5rem;white-space:nowrap;animation:tickerMove 24s linear infinite;width:max-content}
.ticker-items:hover{animation-play-state:paused}
.ticker-items a{color:var(--blue-deep);text-decoration:none;font-size:.86rem;font-weight:650}
.ticker-items a:hover{color:#0b4f71}
.ticker-number{display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;margin-right:.5rem;border-radius:50%;background:#90d4ff;color:#0d344a;font-size:.72rem;font-weight:900;box-shadow:0 2px 7px rgba(23,75,104,.12)}
.ticker-more{flex:0 0 auto;text-decoration:none;color:#0b4f71;font-size:.78rem;font-weight:800;white-space:nowrap;padding:.35rem .6rem;border-radius:999px;background:#eaf7ff}
.ticker-more:hover{background:#90d4ff;color:#0d344a}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-45%)}}

/* Modern top contact/social bar */
.topbar{background:#0b4f71!important;padding:.38rem 0!important}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.top-contact{display:flex;align-items:center;gap:.5rem;min-width:0}
.contact-pill{display:inline-flex;align-items:center;gap:.42rem;color:#fff!important;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .65rem;font-size:.76rem;transition:.2s ease}
.contact-pill:hover{background:#90d4ff;color:#0d344a!important;transform:translateY(-1px)}
.contact-pill i{color:#90d4ff}.contact-pill:hover i{color:#0d344a}
.modern-socials{display:flex;align-items:center;gap:.35rem}
.modern-socials a{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;margin:0!important;color:#fff!important;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.17);transition:.2s ease}
.modern-socials a:hover{background:#90d4ff;color:#0d344a!important;transform:translateY(-2px);border-color:#90d4ff}

/* Compact page-introduction hero */
.page-hero{padding:2rem 0!important;min-height:0}
.page-hero h1{font-size:clamp(1.7rem,3vw,2.35rem)!important;font-weight:700!important;line-height:1.12;margin-bottom:.35rem}
.page-hero p{font-size:.92rem;margin-bottom:0;max-width:760px}
.page-hero .section-kicker{font-size:.68rem;letter-spacing:.1em;margin-bottom:.3rem;display:inline-block}

/* Homepage updates placed immediately after the welcome section */
.home-updates{padding-top:3.6rem;padding-bottom:3.6rem}
.home-updates .news-card{overflow:hidden}
.home-updates .news-img{height:150px}
.home-updates .news-card .p-3{padding:1rem!important}
.update-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.update-meta small{font-size:.7rem;color:#64748b}
.update-badge{border-radius:999px;padding:.18rem .48rem;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.update-badge.news{background:#eaf7ff;color:#0b4f71}.update-badge.event{background:#fff4dc;color:#76551c}
.home-updates .news-card h3{font-size:1.05rem;line-height:1.25;margin-bottom:.45rem}
.home-updates .news-card p{font-size:.82rem;color:#64748b;margin-bottom:.6rem}
.events-panel{height:100%;background:#f4fbff;border:1px solid #c5e8fa;border-radius:18px;padding:1.15rem;box-shadow:0 12px 35px rgba(23,75,104,.10)}
.events-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem}.events-panel-head h3{margin:.1rem 0 0;color:#173042;font-size:1.35rem}.events-panel-head>i{font-size:1.65rem;color:#0b4f71}
.mini-event{display:flex;align-items:center;gap:.7rem;padding:.75rem .2rem;border-top:1px solid #cfe9f7;text-decoration:none;color:#173042;transition:.18s ease}.mini-event:hover{transform:translateX(3px);color:#0b4f71}.mini-date{width:44px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:#90d4ff;color:#0d344a;flex:0 0 auto}.mini-date b{font-size:1rem;line-height:1}.mini-date small{font-size:.63rem;text-transform:uppercase;font-weight:800}.mini-event>span:nth-child(2){min-width:0;flex:1}.mini-event strong{display:block;font-size:.83rem;line-height:1.25}.mini-event span small{display:block;color:#64748b;font-size:.7rem;margin-top:.2rem}.mini-event>i{font-size:.75rem;color:#0b4f71}

@media(max-width:767.98px){
 .topbar-inner{gap:.4rem}.top-contact{flex:1}.contact-pill{font-size:.66rem;padding:.27rem .5rem}.phone-pill{display:none}.modern-socials{gap:.2rem}.modern-socials a{width:27px;height:27px}
 .news-ticker-inner{min-height:40px}.news-new img{width:46px;height:20px}.ticker-items{animation-duration:20s}.ticker-items a{font-size:.75rem}.ticker-more{font-size:.68rem;padding:.3rem .45rem}
 .page-hero{padding:1.45rem 0!important}.page-hero h1{font-size:1.55rem!important}.page-hero p{font-size:.82rem}
 .home-updates{padding-top:2.7rem;padding-bottom:2.7rem}.home-updates .news-img{height:165px}
}

/* Application payment instructions - V7 */
.payment-instruction-card {
    background: linear-gradient(135deg, #EAF7FF, #ffffff);
    border: 1px solid #b9def3;
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(13, 52, 74, .06);
}
.payment-instruction-card p { color: #38586b; }
.payment-number-display {
    display: inline-block;
    background: #90D4FF;
    color: #0D344A;
    border: 1px solid #6fc4f5;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .04em;
}
/* Developer Link */
.developer-link {
    color: inherit;
    text-decoration: none;
    transition: all .2s ease;
}

.developer-link:hover {
    color: #d9b65d;
    text-decoration: underline;
}

/* Developer Card */
.developer-card {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

/* Developer Photo */
.developer-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}

/* Developer Information */
.developer-info {
    max-width: 380px;
    margin: 0 auto;
}

.developer-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

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

.developer-info-item > i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 80, 150, .08);
    color: #005b96;
    font-size: 18px;
}

.developer-info-item small {
    display: block;
    color: #888;
    margin-bottom: 2px;
}

.developer-info-item strong {
    display: block;
    color: #222;
    font-size: 15px;
}