/* ============================================================
   HKUX HOME SECTION
============================================================ */

.hkux-home-section {
    width: 100%;
    padding: 15px 0;
    background: #fff;
}


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

.hkux-home-section a {
    text-decoration: none;
}


/* ============================================================
   NEWSROOM CARD
============================================================ */

.hkux-newsroom-card {
    display: flex;
    flex-direction: column;

    min-height: 570px;

    padding: 20px;

    border: 1px solid #e1e6ef;

    border-radius: 13px;

    background: #fff;

    box-shadow: 0 7px 16px rgba(18, 36, 83, .08);
}


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

.hkux-newsroom-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.hkux-newsroom-heading {
    min-width: 0;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-eyebrow {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #214AAB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    line-height: 1;

    text-transform: uppercase;
}


.hkux-india-line {
    display: inline-block;

    width: 36px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 35%, #5279D7 35% 65%, #A3BBF3 65% 100%);
}


/* ============================================================
   HEADINGS
============================================================ */

.hkux-newsroom-heading h2,
.hkux-services-header h2 {
    margin: 0;

    color: #162F6A;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.6px;
}


/* ============================================================
   TABS
============================================================ */

.hkux-news-tabs {
    display: inline-flex;

    align-items: center;

    gap: 2px;

    padding: 4px;

    border: 1px solid #e0e5ee;

    border-radius: 30px;

    background: #f4f6fa;

    flex-shrink: 0;
}


.hkux-news-tab {
    min-height: 34px;

    padding: 0 20px;

    border: 0;

    border-radius: 20px;

    background: transparent;

    color: #7b849a;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition: all .25s ease;
}


.hkux-news-tab:hover {
    color: #162F6A;

    background: #e9edf5;
}


.hkux-news-tab-active {
    color: #fff !important;

    background: #162F6A !important;

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


.hkux-news-tab:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 2px;
}


/* ============================================================
   NEWS CONTENT
============================================================ */

.hkux-news-content {
    flex: 1;

    min-height: 0;

    overflow: hidden;
}


.hkux-news-panel {
    display: none;

    height: 100%;
}


.hkux-news-panel-active {
    display: block;

    animation: hkuxFadeIn .3s ease;
}


@keyframes hkuxFadeIn {

    from {
        opacity: 0;

        transform: translateY(5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* ============================================================
   NEWS LIST
============================================================ */

.hkux-news-list {
    position: relative;

    height: 400px;

    overflow-y: auto;

    padding-right: 5px;
}

.row.g-3.hkux-news-lists {
    margin-bottom: 0;
}

.hkux-news-list::-webkit-scrollbar {
    width: 4px;
}


.hkux-news-list::-webkit-scrollbar-track {
    background: transparent;
}


.hkux-news-list::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background: #d9dfeb;
}


/* ============================================================
   NEWS ITEM
============================================================ */

.hkux-news-item {
    display: grid;

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

    min-height: 64px;
}


.hkux-news-info {
    min-width: 0;

    padding-bottom: 12px;
}


/* ============================================================
   DATE CIRCLE
============================================================ */

.hkux-date {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    margin-top: 2px;

    border: 1px solid #214AAB;

    border-radius: 50%;

    background: #fff;
}


.hkux-date span {
    color: #214AAB;

    font-size: 13px;

    font-weight: 800;

    line-height: 1;
}


.hkux-date small {
    margin-top: 2px;

    color: #214AAB;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;
}


.hkux-date-green {
    border-color: #162F6A;
}


.hkux-date-green span,
.hkux-date-green small {
    color: #162F6A;
}


/* ============================================================
   TIMELINE
============================================================ */

.hkux-timeline {
    position: relative;

    width: 20px;
}


.hkux-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 0;

    width: 1px;

    background: #dce2ea;
}


/* ============================================================
   NEWS TITLE
============================================================ */

.hkux-news-title {
    display: block;

    color: #4b4e55;

    font-size: 15px;

    line-height: 1.35;

    transition: color .2s ease;
}


.hkux-news-title:hover {
    color: #172f68;
}


/* ============================================================
   META
============================================================ */

.hkux-news-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 3px;

    color: #9aa1af;

    font-size: 11px;
}


.hkux-category-new {
    color: #214AAB;

    font-weight: 700;
}


.hkux-category-press {
    color: #162F6A;

    font-weight: 700;
}


/* ============================================================
   NEW BADGE
============================================================ */

.hkux-new-badge {
    display: inline-flex;

    align-items: center;

    margin-left: 5px;

    padding: 3px 6px;

    border-radius: 7px;

    background: #214AAB;

    color: #15264e;

    font-size: 7px;

    font-weight: 900;

    vertical-align: middle;
}


/* ============================================================
   LINK ICON
============================================================ */

.hkux-link-icon {
    margin-left: 5px;

    color: #214AAB;

    font-size: 14px;
}


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

.hkux-newsroom-footer {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 10px;
}


.hkux-showing {
    flex-shrink: 0;

    color: #8d96a8;

    font-size: 9px;
}


.hkux-footer-line {
    flex: 1;

    height: 1px;

    background: #e5e8ee;
}


.hkux-view-all {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 32px;

    padding: 0 15px;

    border-radius: 20px;

    background: #162F6A;

    color: #fff !important;

    font-size: 12px;

    white-space: nowrap;

    transition: all .25s ease;
}


.hkux-view-all:hover {
    background: #214AAB;

    transform: translateX(2px);
}


/* ============================================================
   RIGHT COLUMN
============================================================ */

.hkux-right-column {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

a.hkux-service-box {
    margin-bottom: 20px;
}

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

.hkux-services-card {
    flex: 1;

    padding: 20px 20px 20px 20px;

    border: 1px solid #e1e6ef;

    border-radius: 13px;

    background: #fff;

    box-shadow: 0 7px 16px rgba(18, 36, 83, .08);
}


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

.hkux-services-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;
}


/* ============================================================
   SERVICES VIEW ALL
============================================================ */

.hkux-services-view-all {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 9px 14px;

    border: 1px solid #e2e7ef;

    border-radius: 20px;

    background: #f7f9fc;

    color: #162F6A;

    font-size: 12px;

    white-space: nowrap;

    transition: all .25s ease;
}


.hkux-services-view-all:hover {
    color: #fff;

    background: #162F6A;

    border-color: #162F6A;
}


/* ============================================================
   SERVICE BOX
============================================================ */

.hkux-service-box {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    min-height: 110px;

    padding: 10px;

    border-radius: 11px;

    background: #f4f7fb;

    color: #162F6A;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}


.hkux-service-box:hover {
    background: #edf2f9;

    color: #162F6A;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(17, 38, 82, .07);
}


/* ============================================================
   SERVICE ICON
============================================================ */

.hkux-service-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 45px;

    flex-shrink: 0;

    color: #172f68;

    font-size: 30px;
}


/* ============================================================
   SERVICE CONTENT
============================================================ */

.hkux-service-content {
    min-width: 0;
}


.hkux-service-content h3 {
    margin: 0 0 5px;

    color: #162F6A;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.25;
}


.hkux-service-content p {
    margin: 0;

    color: #656d7b;

    font-size: 11px;

    line-height: 1.45;
}


.hkux-service-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 8px;

    color: #214AAB;

    font-size: 11px;

    /* font-weight: 600; */
}


/* ============================================================
   EMERGENCY CARD
============================================================ */

.hkux-emergency-card {
    position: relative;

    min-height: 180px;

    padding: 18px 22px;

    overflow: hidden;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #162F6A 0%,
            #214AAB 100%);

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* decorative circle */

.hkux-emergency-card::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -80px;

    bottom: -100px;

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

    border-radius: 50%;
}


/* ============================================================
   EMERGENCY HEADING
============================================================ */

.hkux-emergency-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    color: #bfc9e5;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .5px;
}


.hkux-emergency-dot {
    width: 11px;

    height: 11px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ff4545;

    box-shadow:
        0 0 0 5px rgba(255, 69, 69, .06);
}


/* ============================================================
   PHONE
============================================================ */

.hkux-emergency-phone {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin: 15px 0;

    padding: 7px 15px 7px 8px;

    border-radius: 11px;

    background: rgba(255, 255, 255, .13);
}


.hkux-phone-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #214AAB;

    color: #fff;

    font-size: 18px;
}


.hkux-emergency-phone strong {
    display: block;

    color: #fff;

    font-size: 23px;

    font-weight: 800;

    line-height: 1;
}


.hkux-emergency-phone span {
    display: block;

    margin-top: 3px;

    color: #adb8d4;

    font-size: 10px;
}


/* ============================================================
   EMERGENCY TEXT
============================================================ */

.hkux-emergency-text {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #bdc7df;

    font-size: 11px;

    line-height: 1.5;

    text-align: center;
}



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

@media (max-width: 1199.98px) {

    .hkux-newsroom-card {
        min-height: auto;
    }


    .hkux-news-list {
        height: 360px;
    }

}


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

@media (max-width: 991.98px) {

    .hkux-home-section {
        padding: 45px 0;
    }


    .hkux-newsroom-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .hkux-news-tabs {
        width: 100%;
    }


    .hkux-news-tab {
        flex: 1;
    }


    .hkux-right-column {
        gap: 18px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-home-section {
        padding: 35px 0;
    }


    .hkux-newsroom-card,
    .hkux-services-card {
        padding: 16px;
    }


    .hkux-news-tab {
        min-height: 34px;

        padding: 0 7px;

        font-size: 9px;
    }


    .hkux-news-list {
        height: 400px;
    }

    .hkux-service-box {
        min-height: 115px;
    }


    .hkux-emergency-card {
        min-height: 175px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-newsroom-card,
    .hkux-services-card {
        padding: 14px;
    }


    .hkux-newsroom-heading h2,
    .hkux-services-header h2 {
        font-size: 22px;
    }


    .hkux-news-tabs {
        width: 100%;
    }


    .hkux-news-tab {
        min-height: 32px;

        padding: 0 5px;

        font-size: 8px;
    }


    .hkux-news-title {
        font-size: 11px;
    }


    .hkux-news-meta {
        font-size: 8px;
    }


    .hkux-newsroom-footer {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .hkux-footer-line {
        display: none;
    }


    .hkux-view-all {
        margin-left: auto;
    }


    .hkux-services-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .hkux-services-view-all {
        align-self: flex-start;
    }

}


/* ============================================================
   EXTRA SMALL
============================================================ */

@media (max-width: 399.98px) {

    .hkux-news-tab {
        padding: 0 3px;

        font-size: 7.5px;
    }


    .hkux-news-title {
        font-size: 10.5px;
    }


    .hkux-service-box {
        padding: 11px;

        gap: 8px;
    }


    .hkux-service-content h3 {
        font-size: 12px;
    }


    .hkux-emergency-heading {
        font-size: 11px;
    }

}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
}

/* ============================================================
   REDUCED MOTION - ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-news-tab,
    .hkux-news-panel,
    .hkux-service-box,
    .hkux-view-all,
    .hkux-services-view-all {
        animation: none !important;

        transition: none !important;
    }

}


/* ============================================================
   CONSUL GENERAL'S DESK
============================================================ */

.hkux-desk-section {
    width: 100%;

    padding: 60px 0;

    background: #fff;
}


/* ============================================================
   MAIN CARD
============================================================ */

.hkux-desk-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(110deg,
            #162F6A 0%,
            #162F6A 45%,
            #214AAB 100%);

    box-shadow:
        0 15px 40px rgba(16, 31, 75, .12);
}


/* Decorative background circle */

.hkux-desk-card::before {
    content: "";

    position: absolute;

    width: 390px;

    height: 390px;

    right: -40px;

    top: -130px;

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

    border-radius: 50%;
}


.hkux-desk-card::after {
    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: 90px;

    bottom: -190px;

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

    border-radius: 50%;
}


/* ============================================================
   PHOTO COLUMN
============================================================ */

.hkux-desk-photo-wrap {
    position: relative;

    z-index: 2;
}


/* ============================================================
   PHOTO FRAME
============================================================ */

.hkux-desk-photo {
    position: relative;

    width: 100%;

    max-width: 300px;

    margin: 30px auto;

    padding: 9px;

    border: 2px solid rgba(227, 126, 36, .7);

    border-radius: 16px;

    background: rgba(255, 255, 255, .02);
}


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

.hkux-desk-photo img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 4.7;

    object-fit: cover;

    border-radius: 10px;
}


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

.hkux-desk-content {
    position: relative;

    z-index: 3;

    padding: 35px 10px 35px 20px;

    color: #fff;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-desk-eyebrow {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color: #214AAB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.hkux-desk-india-line {
    position: relative;

    display: inline-block;

    width: 38px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 35%, #5279D7 35% 65%, #A3BBF3 65% 100%);
}


/* ============================================================
   QUOTE
============================================================ */

.hkux-desk-quote {
    position: relative;

    margin: 0 0 20px;

    padding-left: 10px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    font-style: italic;

    line-height: 1.5;
}


.hkux-quote-mark {
    position: absolute;

    left: -2px;

    top: -17px;

    color: #214AAB;

    font-family: Georgia, serif;

    font-size: 36px;

    font-weight: 700;

    line-height: 1;
}


/* ============================================================
   NAME
============================================================ */

.hkux-desk-name {
    margin-bottom: 20px;
}


.hkux-desk-name h3 {
    margin: 0 0 3px;

    color: #fff;

    font-size: 15px;

    font-weight: 700;
}


.hkux-desk-name p {
    margin: 0;

    color: #9eadd0;

    font-size: 11px;

    line-height: 1.4;
}


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

.hkux-desk-description {
    color: #b9c5df;

    font-size: 13px;

    line-height: 1.55;
}


.hkux-desk-description p {
    margin: 0 0 2px;
}


.hkux-desk-description p:last-child {
    margin-bottom: 0;
}


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

.hkux-desk-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 27px;

    min-height: 32px;

    padding: 0 15px;

    border-radius: 20px;

    background: #214AAB;

    color: #162F6A !important;

    font-size: 11px;

    font-weight: 500;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.hkux-desk-btn:hover {
    background: #ffad2e;

    color: #162F6A !important;

    transform: translateX(3px);

    box-shadow:
        0 7px 20px rgba(255, 149, 0, .25);
}


.hkux-desk-btn i {
    font-size: 9px;

    transition:
        transform .2s ease;
}


.hkux-desk-btn:hover i {
    transform: translateX(3px);
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {


    .hkux-desk-photo {
        max-width: 290px;
    }

}


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

@media (max-width: 991.98px) {

    .hkux-desk-section {
        padding: 45px 0;
    }

    .hkux-desk-photo {
        max-width: 260px;
    }


    .hkux-desk-photo img {
        aspect-ratio: 4 / 4.5;
    }


    .hkux-desk-content {
        padding: 30px 30px 35px;
    }


    .hkux-desk-quote {
        font-size: 16px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-desk-section {
        padding: 35px 0;
    }


    .hkux-desk-card {
        border-radius: 0;
    }



    .hkux-desk-photo {
        max-width: 220px;

        padding: 7px;

        border-radius: 13px;
    }


    .hkux-desk-photo img {
        aspect-ratio: 4 / 4.5;

        border-radius: 8px;
    }


    .hkux-desk-content {
        padding: 25px 22px 30px;
    }


    .hkux-desk-eyebrow {
        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }


    .hkux-desk-india-line {
        width: 30px;
    }


    .hkux-desk-quote {
        padding-left: 6px;

        font-size: 15px;

        line-height: 1.45;
    }


    .hkux-quote-mark {
        top: -14px;

        font-size: 30px;
    }


    .hkux-desk-name h3 {
        font-size: 14px;
    }


    .hkux-desk-name p {
        font-size: 10px;
    }


    .hkux-desk-description {
        font-size: 10px;

        line-height: 1.5;
    }


    .hkux-desk-btn {
        margin-top: 22px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-desk-photo {
        max-width: 200px;
    }


    .hkux-desk-content {
        padding: 22px 18px 28px;
    }


    .hkux-desk-quote {
        font-size: 14px;
    }


    .hkux-desk-description {
        font-size: 9.5px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-desk-btn,
    .hkux-desk-btn i {
        transition: none;
    }

}

/* ============================================================
   HKUX EVENTS / GALLERY SECTION
============================================================ */

.hkux-media-section {
    position: relative;
    margin-bottom: 60px;
    width: 100%;

    padding: 55px 0 48px;
    border-radius: 10px;
    overflow: hidden;

    background:
        linear-gradient(115deg,
            #162F6A 0%,
            #162F6A 48%,
            #214AAB 100%);

    color: #fff;
}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.hkux-media-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -150px;
    top: -210px;

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

    border-radius: 50%;

    pointer-events: none;
}


.hkux-media-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -190px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

.hkux-media-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-media-eyebrow {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: #214AAB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    line-height: 1;

    text-transform: uppercase;
}


.hkux-media-india-line {
    display: inline-block;

    width: 37px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 35%, #5279D7 35% 65%, #A3BBF3 65% 100%);
}


/* ============================================================
   TITLE
============================================================ */

.hkux-media-heading h2 {
    margin: 0;

    color: #fff;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.6px;
}


/* ============================================================
   TABS
============================================================ */

.hkux-media-tabs {
    display: inline-flex;

    align-items: center;

    gap: 2px;

    padding: 4px;

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

    border-radius: 25px;

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

    backdrop-filter: blur(8px);

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

    flex-shrink: 0;
}


.hkux-media-tab {
    min-width: 60px;

    min-height: 32px;

    padding: 0 15px;

    border: 0;

    border-radius: 20px;

    background: transparent;

    color: #aeb9d5;

    font-family: inherit;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.hkux-media-tab:hover {
    color: #fff;

    background: rgba(255, 255, 255, .08);
}


.hkux-media-tab-active {
    color: #fff !important;

    background: #162F6A !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .2);
}


.hkux-media-tab:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 2px;
}


/* ============================================================
   PANELS
============================================================ */

.hkux-media-panel {
    position: relative;

    z-index: 2;

    display: none;
}


.hkux-media-panel-active {
    display: block;

    animation:
        hkuxMediaFade .4s ease;
}


@keyframes hkuxMediaFade {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* ============================================================
   FEATURED CARD
============================================================ */

.hkux-featured-media-card {
    position: relative;

    display: block;

    width: 100%;

    height: 370px;

    overflow: hidden;

    border-radius: 10px;

    background: #111f47;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .12);
}


/* ============================================================
   FEATURED IMAGE
============================================================ */

.hkux-featured-image {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .7, .2, 1);
}


.hkux-featured-media-card:hover .hkux-featured-image {
    transform: scale(1.05);
}


/* ============================================================
   FEATURED GRADIENT
============================================================ */

.hkux-featured-gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(10, 25, 62, 0) 30%,
            rgba(10, 25, 62, .18) 48%,
            rgba(10, 25, 62, .95) 100%);
}


/* ============================================================
   FEATURED BADGE
============================================================ */

.hkux-media-new-badge {
    position: absolute;

    left: 18px;

    top: 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 9px;

    background: #214AAB;

    color: #162F6A;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .3px;
}


/* ============================================================
   FEATURED CONTENT
============================================================ */

.hkux-featured-content {
    position: absolute;

    left: 19px;
    right: 20px;
    bottom: 17px;

    z-index: 3;
}


.hkux-featured-content h3 {
    max-width: 95%;

    margin: 0 0 5px;

    color: #fff;

    font-size: 17px;

    font-weight: 750;

    line-height: 1.35;
}


.hkux-featured-date {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #bac5dd;

    font-size: 13px;

    line-height: 1;
}


.hkux-featured-date i {
    color: #214AAB;
}


/* ============================================================
   FEATURED ARROW
============================================================ */

.hkux-featured-arrow {
    position: absolute;

    right: 18px;

    top: 18px;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 33px;
    height: 33px;

    border-radius: 50%;

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

    color: #fff;

    font-size: 11px;

    opacity: 0;

    transform: translateY(-5px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.hkux-featured-media-card:hover .hkux-featured-arrow {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   SIDE LIST
============================================================ */

.hkux-media-side-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    height: 370px;
}


/* ============================================================
   SMALL CARD
============================================================ */

.hkux-small-media-card {
    position: relative;

    display: flex;

    align-items: stretch;

    min-height: 85px;

    flex: 1;

    overflow: hidden;

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

    border-radius: 9px;

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

    color: #fff;

    transition:
        background-color .3s ease,
        transform .3s ease,
        border-color .3s ease;
}


.hkux-small-media-card:hover {
    color: #fff;

    border-color: rgba(255, 255, 255, .16);

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

    transform: translateX(4px);
}


/* ============================================================
   SMALL IMAGE
============================================================ */

.hkux-small-media-image {
    width: 125px;

    min-width: 125px;

    overflow: hidden;
}


.hkux-small-media-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.hkux-small-media-card:hover .hkux-small-media-image img {
    transform: scale(1.06);
}


/* ============================================================
   SMALL CONTENT
============================================================ */

.hkux-small-media-content {
    min-width: 0;

    padding: 11px 34px 10px 12px;
}


.hkux-small-media-content h3 {
    display: -webkit-box;

    overflow: hidden;

    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;
}


.hkux-small-media-date {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #aeb9d4;

    font-size: 13px;
}


.hkux-small-media-date i {
    color: #214AAB;
}


/* ============================================================
   SMALL NEW
============================================================ */

.hkux-small-new {
    display: inline-flex;

    margin-bottom: 5px;

    padding: 3px 6px;

    border-radius: 6px;

    background: #214AAB;

    color: #162F6A;

    font-size: 6px;

    font-weight: 900;
}


/* ============================================================
   SMALL ARROW
============================================================ */

.hkux-small-media-arrow {
    position: absolute;

    right: 13px;

    top: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    color: #9eacd0;

    font-size: 8px;

    transform:
        translateY(-50%);

    transition:
        color .25s ease,
        transform .25s ease;
}


.hkux-small-media-card:hover .hkux-small-media-arrow {
    color: #214AAB;

    transform:
        translate(3px, -50%);
}


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

.hkux-media-footer {
    display: flex;

    justify-content: flex-end;

    margin-top: 14px;
}


/* ============================================================
   VIEW ALL
============================================================ */

.hkux-media-view-all {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 31px;

    padding: 0 16px;

    border-radius: 20px;

    background: #214AAB;

    color: #162F6A !important;

    font-size: 12px;

    font-weight: 500;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.hkux-media-view-all:hover {
    background: #ffab2d;

    color: #162F6A !important;

    transform: translateX(3px);

    box-shadow:
        0 7px 18px rgba(255, 149, 0, .2);
}


.hkux-media-view-all i {
    font-size: 8px;

    transition:
        transform .2s ease;
}


.hkux-media-view-all:hover i {
    transform: translateX(3px);
}


/* ============================================================
   EVENTS PLACEHOLDER
============================================================ */

.hkux-events-placeholder {
    min-height: 285px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

    border-radius: 10px;

    background: rgba(255, 255, 255, .04);
}


.hkux-events-placeholder-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 15px;

    border-radius: 50%;

    background: rgba(33, 74, 171, .1);

    color: #214AAB;

    font-size: 22px;
}


.hkux-events-placeholder h3 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 18px;
}


.hkux-events-placeholder p {
    max-width: 420px;

    margin: 0;

    color: #aeb9d4;

    font-size: 11px;

    line-height: 1.5;
}


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

@media (max-width: 991.98px) {

    .hkux-media-section {
        padding: 45px 0;
    }


    .hkux-media-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .hkux-media-tabs {
        width: auto;
    }


    .hkux-featured-media-card {
        height: 300px;
    }


    .hkux-media-side-list {
        height: auto;

        margin-top: 0;
    }


    .hkux-small-media-card {
        min-height: 100px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-media-section {
        padding: 38px 0;
    }


    .hkux-media-heading h2 {
        font-size: 24px;
    }


    .hkux-media-eyebrow {
        font-size: 8px;
    }


    .hkux-media-tabs {
        width: 100%;
    }


    .hkux-media-tab {
        flex: 1;

        min-height: 34px;

        font-size: 9px;
    }


    .hkux-featured-media-card {
        height: 260px;
    }


    .hkux-featured-content {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }


    .hkux-media-side-list {
        gap: 10px;
    }


    .hkux-small-media-card {
        min-height: 95px;

        flex: none;
    }


    .hkux-small-media-image {
        width: 105px;

        min-width: 105px;
    }


    .hkux-small-media-content h3 {
        font-size: 10px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-media-heading h2 {
        font-size: 22px;
    }


    .hkux-media-tab {
        min-height: 32px;

        padding: 0 8px;

        font-size: 8px;
    }


    .hkux-featured-media-card {
        height: 235px;
    }


    .hkux-small-media-image {
        width: 90px;

        min-width: 90px;
    }


    .hkux-small-media-content {
        padding-left: 10px;
    }


    .hkux-small-media-content h3 {
        font-size: 9.5px;
    }


    .hkux-small-media-date {
        font-size: 7px;
    }

}


/* ============================================================
   EXTRA SMALL
============================================================ */

@media (max-width: 399.98px) {

    .hkux-featured-media-card {
        height: 215px;
    }


    .hkux-small-media-image {
        width: 80px;

        min-width: 80px;
    }


    .hkux-small-media-content h3 {
        font-size: 9px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-featured-image,
    .hkux-featured-arrow,
    .hkux-small-media-card,
    .hkux-small-media-image img,
    .hkux-small-media-arrow,
    .hkux-media-view-all {
        transition: none !important;
    }


    .hkux-media-panel-active {
        animation: none !important;
    }

}


/* ============================================================
   RESOURCE SECTION
============================================================ */

.hkux-resources-section {
    width: 100%;
    padding: 0 0 45px 0;
    /* background: #f5f7fc; */
}


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

.hkux-resource-column {
    min-width: 0;
}


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

.hkux-resource-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    min-height: 78px;

    margin-bottom: 30px;
}


/* ============================================================
   TITLE WRAPPER
============================================================ */

.hkux-resource-title-wrap {
    min-width: 0;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-resource-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;

    color: #214AAB;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
    line-height: 1;

    text-transform: uppercase;
}


.hkux-resource-flag {
    display: inline-block;

    width: 37px;
    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 34%, #5279D7 34% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   TITLE
============================================================ */

.hkux-resource-title {
    margin: 0;

    color: #162F6A;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.5px;
}


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

.hkux-resource-description {
    margin: 5px 0 0;

    color: #7b86a3;

    font-size: 12px;

    line-height: 1.4;
}


/* ============================================================
   VIEW ALL
============================================================ */

.hkux-resource-view-all {
    display: inline-flex;

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

    gap: 7px;

    flex-shrink: 0;

    min-height: 32px;

    padding: 0 15px;

    border-radius: 20px;

    background: #162F6A;

    color: #fff !important;

    font-size: 12px;
    /* font-weight: 700; */

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.hkux-resource-view-all:hover {
    background: #1e3978;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 15px rgba(18, 36, 83, .18);
}


.hkux-resource-view-all i {
    font-size: 8px;

    transition: transform .2s ease;
}


.hkux-resource-view-all:hover i {
    transform: translateX(3px);
}


/* ============================================================
   MAIN CARD
============================================================ */

.hkux-links-card {
    width: 100%;

    overflow: hidden;

    border: 1px solid #e2e7f0;

    border-top: 2px solid #214AAB;

    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 7px 16px rgba(18, 36, 83, .08);

    display: flex;
    flex-direction: column;
}


.hkux-publication-card {
    border-top-color: #162F6A;
}


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

.hkux-links-card-header {
    padding: 17px 18px 8px;
}


.hkux-links-card-header h3 {
    margin: 0;

    color: #182953;

    font-size: 20px;
    font-weight: 750;

    line-height: 1.3;
}


.hkux-links-card-header p {
    margin: 3px 0 0;

    color: #8992aa;

    font-size: 12px;
}


/* ============================================================
   LIST
============================================================ */

.hkux-links-list {
    width: 100%;

    padding: 0 18px 9px;

    flex: 1;

    display: flex;
    flex-direction: column;
}


/* ============================================================
   LINK ROW
============================================================ */

.hkux-link-row {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 50px;

    border-bottom: 1px solid #e5e8ef;

    color: #565b68;

    font-size: 15px;

    line-height: 1.35;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


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


.hkux-link-row:hover {
    color: #162F6A;

    padding-left: 4px;
}


/* ============================================================
   NAME
============================================================ */

.hkux-link-name {
    min-width: 0;

    flex: 1;
}


/* ============================================================
   ARROW
============================================================ */

.hkux-link-arrow {
    width: 18px;

    flex-shrink: 0;

    display: flex;

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

    color: #214AAB;

    font-size: 10px;

    transition: transform .2s ease;
}


.hkux-link-row:hover .hkux-link-arrow {
    transform:
        translate(2px, -2px);
}


/* ============================================================
   EMPTY
============================================================ */

.hkux-empty-state {
    display: flex;

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

    min-height: 180px;

    color: #8b94aa;

    font-size: 11px;

    text-align: center;
}


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

.hkux-link-row:focus-visible,
.hkux-resource-view-all:focus-visible {

    outline: 3px solid #214AAB;

    outline-offset: 3px;
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 992px) {

    /*
     * Bootstrap row stretches both columns.
     * Both .hkux-resource-column elements become
     * the same height.
     */

    .hkux-resources-section .row.align-items-stretch {

        align-items: stretch !important;
    }


    .hkux-resource-column {

        height: 100%;
    }


    .hkux-links-card {

        min-height: 205px;
    }

}


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

@media (max-width: 991.98px) {

    .hkux-resource-header {

        min-height: auto;

    }


    .hkux-links-card {

        min-height: auto;

    }

}


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

@media (max-width: 767.98px) {

    .hkux-resources-section {

        padding: 35px 0;

    }


    .hkux-resource-header {

        align-items: flex-start;

        min-height: auto;

    }


    .hkux-resource-title {

        font-size: 22px;

    }


    .hkux-resource-description {

        font-size: 9px;

    }


    .hkux-link-row {

        min-height: 40px;

        font-size: 10px;

    }

}


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

@media (max-width: 575.98px) {

    .hkux-resource-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .hkux-resource-title {

        font-size: 21px;

    }


    .hkux-resource-view-all {

        min-height: 30px;

        padding: 0 13px;

        font-size: 8px;

    }


    .hkux-links-card-header {

        padding: 15px;

    }


    .hkux-links-list {

        padding-left: 15px;
        padding-right: 15px;

    }

}

/* ============================================================
   SOCIAL MEDIA SECTION
============================================================ */

.hkux-social-section {
    position: relative;

    width: 100%;

    padding: 55px 0 65px;

    overflow: hidden;

    background: #f5f7fc;
}


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

.hkux-social-header {
    max-width: 800px;

    margin: 0 auto 35px;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-social-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #214AAB;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.hkux-social-flag {
    display: inline-block;

    width: 37px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 34%, #5279D7 34% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   TITLE
============================================================ */

.hkux-social-title {
    margin: 0;

    color: #162F6A;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.6px;
}


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

.hkux-social-description {
    max-width: 650px;

    margin: 7px auto 0;

    color: #6e7892;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   TOGGLE
============================================================ */

.hkux-social-toggle-wrap {
    margin-top: 27px;
}


.hkux-social-toggle {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    cursor: pointer;

    user-select: none;
}


/* Hide native checkbox */

.hkux-social-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* ============================================================
   TOGGLE SLIDER
============================================================ */

.hkux-toggle-slider {
    position: relative;

    display: inline-block;

    width: 39px;

    height: 21px;

    border-radius: 20px;

    background: #dfe5f2;

    box-shadow:
        inset 0 0 0 1px rgba(18, 36, 83, .04);

    transition:
        background-color .25s ease;
}


.hkux-toggle-slider::before {
    content: "";

    position: absolute;

    left: 3px;

    top: 3px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 5px rgba(18, 36, 83, .18);

    transition:
        transform .25s ease;
}


/* Checked */

.hkux-social-toggle input:checked+.hkux-toggle-slider {
    background: #162F6A;
}


.hkux-social-toggle input:checked+.hkux-toggle-slider::before {
    transform: translateX(18px);
}


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

.hkux-toggle-label {
    color: #162F6A;

    font-size: 14px;

    font-weight: 700;
}


/* ============================================================
   KEYBOARD FOCUS
============================================================ */

.hkux-social-toggle input:focus-visible+.hkux-toggle-slider {
    outline: 3px solid #214AAB;

    outline-offset: 3px;
}


/* ============================================================
   HELPER
============================================================ */

.hkux-social-helper {
    margin: 8px 0 0;

    color: #747e97;

    font-size: 12px;

    line-height: 1.4;
}


/* ============================================================
   SOCIAL FEED
============================================================ */

.hkux-social-feed {
    display: none;

    /* max-width: 1200px; */

    margin: 0 auto;
}


.hkux-social-feed.hkux-social-feed-visible {
    display: block;

    animation:
        hkuxSocialReveal .45s ease;
}


@keyframes hkuxSocialReveal {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* ============================================================
   SOCIAL CARD
============================================================ */

.hkux-social-card {
    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    border: 1px solid #e0e6f0;

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 8px 22px rgba(18, 36, 83, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hkux-social-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(18, 36, 83, .11);
}


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

.hkux-social-card-header {
    padding: 15px 16px 11px;

    border-bottom: 1px solid #edf0f5;
}


.hkux-social-platform {
    display: flex;

    align-items: center;

    gap: 10px;
}


.hkux-social-platform-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 9px;

    color: #fff;

    font-size: 15px;
}


.hkux-facebook-icon {
    background: #1877f2;
}


.hkux-instagram-icon {
    background:
        linear-gradient(135deg,
            #833ab4,
            #fd1d1d,
            #fcb045);
}


.hkux-youtube-icon {
    background: #ff0000;
}


.hkux-social-platform h3 {
    margin: 0;

    color: #162653;

    font-size: 15px;

    font-weight: 800;
}


.hkux-social-platform p {
    margin: 2px 0 0;

    color: #8992aa;

    font-size: 12px;
}


/* ============================================================
   TABS
============================================================ */

.hkux-social-tabs {
    display: flex;

    gap: 4px;

    padding: 9px 12px;

    background: #f7f8fc;
}


.hkux-social-tab {
    flex: 1;

    min-height: 29px;

    padding: 0 8px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: #7b85a0;

    font-family: inherit;

    font-size: 11px;

    /* font-weight: 700; */

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.hkux-social-tab:hover {
    color: #162F6A;

    background: #edf1f8;
}


.hkux-social-tab.active {
    color: #fff;

    background: #162F6A;

    box-shadow:
        0 3px 8px rgba(23, 45, 104, .18);
}


.hkux-social-tab:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 2px;
}


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

.hkux-social-card-body {
    position: relative;

    min-height: 430px;

    flex: 1;

    overflow: hidden;

    background: #fff;
}


/* ============================================================
   SOCIAL PANEL
============================================================ */

.hkux-social-panel {
    display: none;

    width: 100%;

    height: 100%;
}


.hkux-social-panel.active {
    display: block;
}


/* ============================================================
   IFRAMES
============================================================ */

.hkux-social-panel iframe {
    display: block;

    width: 100%;

    height: 430px;

    max-width: 100%;

    border: 0;
}


/* ============================================================
   YOUTUBE
============================================================ */

.hkux-video-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    margin-top: 20px;

    background: #111;
}


.hkux-video-wrapper iframe {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


/* ============================================================
   VIEW BUTTON
============================================================ */

.hkux-social-view {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 39px;

    margin: 10px 12px 12px;

    border-radius: 8px;

    background: #f4f6fb;

    color: #162F6A !important;

    font-size: 9px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.hkux-social-view:hover {
    background: #162F6A;

    color: #fff !important;
}


.hkux-social-view i {
    font-size: 8px;
}


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

@media (max-width: 991.98px) {

    .hkux-social-section {
        padding: 45px 0 50px;
    }


    .hkux-social-header {
        margin-bottom: 28px;
    }


    .hkux-social-title {
        font-size: 25px;
    }


    .hkux-social-card-body {
        min-height: 400px;
    }


    .hkux-social-panel iframe {
        height: 400px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-social-section {
        padding: 38px 0 45px;
    }


    .hkux-social-title {
        font-size: 23px;
    }


    .hkux-social-description {
        padding: 0 15px;

        font-size: 10px;
    }


    .hkux-social-helper {
        padding: 0 15px;

        font-size: 9px;
    }


    .hkux-social-card-body {
        min-height: 400px;
    }


    .hkux-social-panel iframe {
        height: 400px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-social-eyebrow {
        font-size: 8px;
    }


    .hkux-social-title {
        font-size: 21px;
    }


    .hkux-social-toggle-wrap {
        margin-top: 22px;
    }


    .hkux-social-feed {
        padding: 0 5px;
    }


    .hkux-social-card-body {
        min-height: 380px;
    }


    .hkux-social-panel iframe {
        height: 380px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-social-feed-visible,
    .hkux-social-card,
    .hkux-toggle-slider,
    .hkux-toggle-slider::before {
        animation: none !important;

        transition: none !important;
    }

}

/* ============================================================
   CONTACT SECTION
============================================================ */

.hkux-contact-section {
    position: relative;

    width: 100%;

    padding: 55px 0 65px;

    background: #f5f7fc;

    overflow: hidden;
}


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

.hkux-contact-header {
    margin-bottom: 25px;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-contact-eyebrow {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #214AAB;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    line-height: 1;

    text-transform: uppercase;
}


/* ============================================================
   INDIAN FLAG ACCENT
============================================================ */

.hkux-contact-flag {
    display: inline-block;

    width: 38px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 33%, #5279D7 33% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   TITLE
============================================================ */

.hkux-contact-title {
    margin: 0;

    color: #162F6A;

    font-size: 26px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.5px;
}


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

.hkux-contact-description {
    margin: 7px 0 0;

    color: #626d87;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   CONTACT LIST
============================================================ */

.hkux-contact-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* ============================================================
   CONTACT CARD
============================================================ */

.hkux-contact-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 55px;

    padding: 10px 12px;

    border: 1px solid #e1e6ef;

    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 3px 10px rgba(18, 36, 83, .045);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.hkux-contact-card:hover {
    transform: translateY(-2px);

    border-color: #d5ddeb;

    box-shadow:
        0 8px 18px rgba(18, 36, 83, .09);
}


/* ============================================================
   CONTACT ICON
============================================================ */

.hkux-contact-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #142d68;

    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 3px 8px rgba(20, 45, 104, .15);
}


/* ============================================================
   CONTACT INFORMATION
============================================================ */

.hkux-contact-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


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

.hkux-contact-label {
    display: block;

    margin-bottom: 3px;

    color: #214AAB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

    line-height: 1.1;

    text-transform: uppercase;
}


/* ============================================================
   VALUE
============================================================ */

.hkux-contact-value {
    display: block;

    margin: 0;

    color: #505665;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.45;

    text-decoration: none;

    word-break: break-word;
}


a.hkux-contact-value:hover {
    color: #162F6A;

    text-decoration: underline;
}


/* ============================================================
   ADDRESS
============================================================ */

.hkux-address {
    font-style: normal;
}


/* ============================================================
   MAP WRAPPER
============================================================ */

.hkux-contact-map-wrap {
    min-height: 100%;
}


/* ============================================================
   MAP
============================================================ */

.hkux-contact-map {
    position: relative;

    width: 100%;

    height: 100%;

    min-height: 295px;

    overflow: hidden;

    border: 1px solid #dfe5ef;

    border-radius: 10px;

    background: #e9edf5;

    box-shadow:
        0 6px 18px rgba(18, 36, 83, .07);
}


/* ============================================================
   MAP IFRAME
============================================================ */

.hkux-contact-map iframe {
    display: block;

    width: 100%;

    height: 100%;

    min-height: 295px;

    border: 0;
}


/* ============================================================
   MAP LOCATION CARD
============================================================ */

.hkux-map-location-card {
    position: absolute;

    left: 16px;

    bottom: 16px;

    display: flex;

    align-items: center;

    gap: 9px;

    max-width: 280px;

    padding: 9px 12px;

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

    border-radius: 9px;

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

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .13);

    backdrop-filter: blur(8px);

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


.hkux-map-location-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #214AAB;

    color: #ffffff;

    font-size: 10px;
}


.hkux-map-location-card strong {
    display: block;

    color: #162653;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.3;
}


.hkux-map-location-card span {
    display: block;

    margin-top: 2px;

    color: #747e97;

    font-size: 10px;

    line-height: 1.3;
}


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

.hkux-contact-card a:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 3px;

    border-radius: 3px;
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .hkux-contact-map {
        min-height: 295px;
    }

}


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

@media (max-width: 991.98px) {

    .hkux-contact-section {
        padding: 45px 0 55px;
    }


    .hkux-contact-header {
        margin-bottom: 22px;
    }


    .hkux-contact-title {
        font-size: 24px;
    }


    .hkux-contact-list {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .hkux-contact-card {
        min-height: 65px;
    }


    .hkux-contact-map {
        min-height: 350px;
    }


    .hkux-contact-map iframe {
        min-height: 350px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-contact-section {
        padding: 38px 0 45px;
    }


    .hkux-contact-title {
        font-size: 22px;
    }


    .hkux-contact-list {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .hkux-contact-card {
        min-height: 58px;
    }


    .hkux-contact-map {
        min-height: 320px;

        border-radius: 9px;
    }


    .hkux-contact-map iframe {
        min-height: 320px;
    }


    .hkux-map-location-card {
        left: 10px;

        right: 10px;

        bottom: 10px;

        max-width: none;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-contact-section {
        padding: 32px 0 40px;
    }


    .hkux-contact-eyebrow {
        font-size: 8px;
    }


    .hkux-contact-title {
        font-size: 21px;
    }


    .hkux-contact-description {
        font-size: 9px;
    }


    .hkux-contact-card {
        padding: 10px;

        min-height: 56px;
    }

    .hkux-contact-value {
        font-size: 9px;
    }


    .hkux-contact-map {
        min-height: 280px;
    }


    .hkux-contact-map iframe {
        min-height: 280px;
    }


    .hkux-map-location-card {
        padding: 8px 10px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-contact-card {
        transition: none !important;
    }

}


/* ============================================================
   INNER PAGE
============================================================ */

.hkux-inner-page {
    width: 100%;
    background: #f5f7fc;
}


/* ============================================================
   INNER BANNER
============================================================ */

.hkux-inner-banner {
    position: relative;

    width: 100%;

    min-height: 145px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(120deg,
            #162F6A 0%,
            #172f6d 60%,
            #213e82 100%);
}


/* Decorative background */

.hkux-inner-banner::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -100px;
    top: -180px;

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

    border-radius: 50%;
}


.hkux-inner-banner::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: 100px;
    bottom: -170px;

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

    border-radius: 50%;
}


/* ============================================================
   BANNER CONTENT
============================================================ */

.hkux-inner-banner-content {
    position: relative;

    z-index: 2;

    padding: 30px 0;
}


/* ============================================================
   BANNER EYEBROW
============================================================ */

.hkux-inner-eyebrow {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #214AAB;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.hkux-inner-flag {
    width: 38px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 33%, #5279D7 33% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   BANNER TITLE
============================================================ */

.hkux-inner-banner-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0;

    color: #ffffff;

    font-size: 30px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.5px;
}


.hkux-inner-banner-title img {
    width: 35px;

    height: 35px;

    object-fit: contain;

    flex-shrink: 0;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.hkux-breadcrumb-wrap {
    margin-bottom: 18px;

    padding-bottom: 12px;

    border-bottom: 1px solid #e3e7ef;
}


/*
|--------------------------------------------------------------------------
| Existing {!! $breadcrump !!}
|--------------------------------------------------------------------------
*/

.hkux-breadcrumb-wrap ul {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.hkux-breadcrumb-wrap li {
    list-style: none;

    color: #78839b;

    font-size: 13px;

    line-height: 1.5;
}


.hkux-breadcrumb-wrap a {
    color: #68748f;

    text-decoration: none;

    transition: color .2s ease;
}


.hkux-breadcrumb-wrap a:hover {
    color: #162F6A;
}


/* ============================================================
   MAIN CONTENT SECTION
============================================================ */

.hkux-inner-content-section {
    padding: 45px 0 65px;
}


/* ============================================================
   MAIN CONTENT CARD
============================================================ */

.hkux-inner-main-card {
    width: 100%;
    margin: 20px;

    padding: 25px 28px;

    border: 1px solid #e2e7f0;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(18, 36, 83, .055);
}


/* ============================================================
   CONTENT TITLE
============================================================ */

.hkux-inner-content-title {
    position: relative;

    margin: 0 0 20px;

    padding-bottom: 13px;

    color: #162F6A;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -.4px;
}


.hkux-inner-content-title::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 45px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 33%, #5279D7 33% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   DYNAMIC PAGE CONTENT
============================================================ */

.hkux-page-content {
    color: #4f586b;

    font-size: 13px;

    line-height: 1.8;

    overflow-wrap: break-word;
}


/* Scope list styling only inside dynamic content */

.hkux-page-content ul {
    margin: 15px 0;

    padding-left: 22px;
}


.hkux-page-content ol {
    margin: 15px 0;

    padding-left: 22px;
}


.hkux-page-content li {
    margin-bottom: 7px;

    list-style: revert;
}


.hkux-page-content p {
    margin-bottom: 15px;
}


.hkux-page-content h1,
.hkux-page-content h2,
.hkux-page-content h3,
.hkux-page-content h4,
.hkux-page-content h5,
.hkux-page-content h6 {
    color: #162F6A;

    font-weight: 700;

    line-height: 1.4;

    margin-top: 22px;

    margin-bottom: 12px;
}


.hkux-page-content img {
    max-width: 100%;

    height: auto;

    border-radius: 6px;
}


.hkux-page-content table {
    width: 100%;

    max-width: 100%;

    margin: 20px 0;

    border-collapse: collapse;

    overflow: hidden;
}


.hkux-page-content th,
.hkux-page-content td {
    padding: 10px 12px;

    border: 1px solid #dfe4ed;

    text-align: left;

    vertical-align: top;
}


.hkux-page-content th {
    background: #f3f6fb;

    color: #162F6A;

    font-weight: 700;
}


.hkux-page-content a {
    color: #17377d;

    text-decoration: underline;

    text-underline-offset: 2px;
}


.hkux-page-content a:hover {
    color: #214AAB;
}


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

.hkux-inner-sidebar {
    width: 100%;

    height: 100%;
}


/*
|--------------------------------------------------------------------------
| Existing rightContent may contain its own HTML.
| This wrapper gives it a modern card appearance.
|--------------------------------------------------------------------------
*/

.hkux-sidebar-card {
    width: 100%;

    min-height: 100%;

    padding: 20px;

}


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

.hkux-sidebar-card img {
    max-width: 100%;

    height: auto;
}


.hkux-sidebar-card ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.hkux-sidebar-card li {
    list-style: none;

    margin-bottom: 8px;
}


.hkux-sidebar-card a {
    color: #162F6A;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.hkux-sidebar-card a:hover {
    color: #214AAB;
}


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

.hkux-inner-page a:focus-visible,
.hkux-inner-page button:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 3px;

    border-radius: 3px;
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .hkux-inner-content-section {
        padding-top: 45px;
    }


    .hkux-inner-main-card {
        padding: 28px 32px;
    }

}


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

@media (max-width: 991.98px) {

    .hkux-inner-banner {
        min-height: 125px;
    }


    .hkux-inner-banner-title {
        font-size: 26px;
    }


    .hkux-inner-content-section {
        padding: 35px 0 50px;
    }


    .hkux-inner-main-card {
        padding: 23px;
    }


    .hkux-sidebar-card {
        min-height: auto;

        padding: 18px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-inner-banner {
        min-height: 110px;
    }


    .hkux-inner-banner-content {
        padding: 25px 0;
    }


    .hkux-inner-banner-title {
        font-size: 22px;

        gap: 9px;
    }


    .hkux-inner-banner-title img {
        width: 28px;

        height: 28px;
    }


    .hkux-inner-content-section {
        padding: 30px 0 40px;
    }


    .hkux-inner-main-card {
        padding: 20px;

        border-radius: 10px;
    }


    .hkux-inner-content-title {
        font-size: 21px;

        margin-bottom: 18px;
    }


    .hkux-page-content {
        font-size: 12px;

        line-height: 1.7;
    }


    .hkux-sidebar-card {
        padding: 18px;

        border-radius: 10px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-inner-banner {
        min-height: 100px;
    }


    .hkux-inner-eyebrow {
        font-size: 8px;

        letter-spacing: 1.2px;
    }


    .hkux-inner-banner-title {
        font-size: 20px;
    }


    .hkux-inner-banner-title img {
        width: 25px;

        height: 25px;
    }


    .hkux-inner-content-section {
        padding: 25px 0 35px;
    }


    .hkux-inner-main-card {
        padding: 17px;

        border-radius: 9px;
    }


    .hkux-inner-content-title {
        font-size: 20px;
    }


    .hkux-page-content {
        font-size: 11px;
    }


    .hkux-page-content table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }

}

/* ============================================================
   HKUX RIGHT SIDEBAR NAVIGATION
============================================================ */

.hkux-sidebar-nav {
    width: 100%;

    overflow: hidden;

    border: 1px solid #e1e6ef;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(18, 36, 83, .055);
}


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

.hkux-sidebar-header {
    padding: 20px 20px 16px;

    border-bottom: 1px solid #e7ebf2;

    background: #ffffff;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-sidebar-eyebrow {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #214AAB;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;

    line-height: 1;

    text-transform: uppercase;
}


/* ============================================================
   INDIAN FLAG
============================================================ */

.hkux-sidebar-flag {
    display: inline-block;

    width: 35px;

    height: 3px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 33%, #5279D7 33% 66%, #A3BBF3 66% 100%);
}


/* ============================================================
   TITLE
============================================================ */

.hkux-sidebar-title {
    margin: 0;

    color: #162F6A;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -.3px;
}


/* ============================================================
   MENU
============================================================ */

.hkux-sidebar-menu {
    width: 100%;
}


/* ============================================================
   LIST
============================================================ */

.hkux-sidebar-list {
    margin: 0;

    padding: 5px 12px 10px;

    list-style: none;
}


.hkux-sidebar-item {
    margin: 0;

    padding: 0;

    list-style: none;
}

.commonListing a {
    color: #162F6A !important;
    text-decoration: none;
    font-size: 1em;
}

/* ============================================================
   LINK
============================================================ */

.hkux-sidebar-link {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    width: 100%;

    min-height: 47px;

    padding: 9px 8px 9px 20px;

    border-bottom: 1px solid #edf0f5;

    color: #4e576b;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        padding-left .2s ease;
}


.hkux-sidebar-item:last-child .hkux-sidebar-link {
    border-bottom: 0;
}


/* ============================================================
   LINK TEXT
============================================================ */

.hkux-sidebar-link-text {
    min-width: 0;

    flex: 1;

    overflow-wrap: break-word;
}


/* ============================================================
   ICON WRAPPER
============================================================ */

.hkux-sidebar-link-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    border-radius: 50%;

    color: #9ba4b7;

    font-size: 8px;

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}


/* ============================================================
   HOVER
============================================================ */

.hkux-sidebar-link:hover {
    color: #162F6A;

    background: #f5f7fb;

    padding-left: 14px;
}


.hkux-sidebar-link:hover .hkux-sidebar-link-icon {
    color: #214AAB;

    background: #fff4e8;

    transform: translateX(2px);
}


/* ============================================================
   ACTIVE
============================================================ */

.hkux-sidebar-item.active .hkux-sidebar-link {
    color: #ffffff;

    background: #162F6A;

    font-weight: 700;

    border-radius: 7px;

    border-bottom-color: transparent;

    padding-left: 14px;

    margin: 3px 0;
}


.hkux-sidebar-item.active .hkux-sidebar-link-icon {
    color: #ffffff;

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


/* ============================================================
   ACTIVE LEFT INDICATOR
============================================================ */

.hkux-sidebar-item.active .hkux-sidebar-link::before {
    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 3px;

    height: 20px;

    border-radius: 0 4px 4px 0;

    background: #214AAB;

    transform: translateY(-50%);
}


/* ============================================================
   ARROW
============================================================ */

.hkux-sidebar-arrow {
    font-size: 7px;
}


/* ============================================================
   EXTERNAL
============================================================ */

.hkux-sidebar-external {
    font-size: 8px;
}


/* ============================================================
   PDF
============================================================ */

.hkux-sidebar-pdf {
    color: #DC3545;

    font-size: 10px;
}


.hkux-sidebar-link:hover .hkux-sidebar-pdf {
    color: #DC3545;

    background: #fff0f0;
}


/* ============================================================
   EMPTY
============================================================ */

.hkux-sidebar-empty {
    padding: 25px 20px;

    color: #7d879b;

    font-size: 10px;

    text-align: center;
}


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

.hkux-sidebar-link:focus-visible {
    position: relative;

    z-index: 2;

    outline: 3px solid #214AAB;

    outline-offset: 2px;

    border-radius: 6px;
}


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

@media (max-width: 991.98px) {

    .hkux-sidebar-nav {
        margin-top: 0;
    }


    .hkux-sidebar-title {
        font-size: 18px;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-sidebar-header {
        padding: 17px 18px 14px;
    }


    .hkux-sidebar-title {
        font-size: 17px;
    }


    .hkux-sidebar-list {
        padding: 5px 10px 8px;
    }


    .hkux-sidebar-link {
        min-height: 44px;

        font-size: 10px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-sidebar-header {
        padding: 15px;
    }


    .hkux-sidebar-title {
        font-size: 16px;
    }


    .hkux-sidebar-link {
        font-size: 10px;

        padding: 9px 7px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-sidebar-link,
    .hkux-sidebar-link-icon {
        transition: none !important;
    }

}

/* ============================================================
   HKUX LISTING PAGE
============================================================ */

.hkux-listing-page {
    width: 100%;
    background: #f5f7fc;
}


/* ============================================================
   INNER BANNER
============================================================ */

.hkux-listing-banner {
    position: relative;
    overflow: hidden;

    min-height: 145px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(120deg,
            #162F6A 0%,
            #172f6d 60%,
            #213f83 100%);
}


.hkux-listing-banner::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -120px;
    top: -190px;

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

    border-radius: 50%;
}


.hkux-listing-banner::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: 100px;
    bottom: -175px;

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

    border-radius: 50%;
}


/* ============================================================
   BANNER CONTENT
============================================================ */

.hkux-listing-banner-content {
    position: relative;

    z-index: 2;

    padding: 30px 0;
}


.hkux-listing-eyebrow {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #214AAB;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.hkux-listing-flag {
    display: inline-block;

    width: 38px;
    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(90deg, #162F6A 0 33%, #5279D7 33% 66%, #A3BBF3 66% 100%);
}


.hkux-listing-banner-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0;

    color: #ffffff;

    font-size: 30px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.5px;
}


.hkux-listing-banner-title img {
    width: 36px;
    height: 36px;

    object-fit: contain;

    flex-shrink: 0;
}


/* ============================================================
   MAIN SECTION
============================================================ */

.hkux-listing-content {
    padding: 45px 0 65px;
}


/* ============================================================
   BOOTSTRAP MAIN ROW
============================================================ */

.hkux-listing-row {
    align-items: stretch;
    padding: 20px;
}


/* ============================================================
   MAIN LIST CARD
============================================================ */

.hkux-list-card {
    width: 100%;

    padding: 25px 28px;

    border: 1px solid #e1e6ef;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 7px 22px rgba(18, 36, 83, .055);
}


/* ============================================================
   BREADCRUMB
============================================================ */

.hkux-list-breadcrumb {
    margin-bottom: 20px;

    padding-bottom: 13px;

    border-bottom: 1px solid #e7ebf2;
}


.hkux-list-breadcrumb ul {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.hkux-list-breadcrumb li {
    margin: 0;
    padding: 0;

    list-style: none;

    color: #7a849a;

    font-size: 13px;
}


.hkux-list-breadcrumb a {
    color: #66728d;

    text-decoration: none;
}


.hkux-list-breadcrumb a:hover {
    color: #214AAB;

    text-decoration: underline;
}


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

.hkux-listing-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.hkux-listing-heading-wrap {
    min-width: 0;
}


.hkux-listing-eyebrow-small {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color: #214AAB;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.hkux-listing-heading {
    position: relative;

    margin: 0;

    padding-bottom: 12px;

    color: #162F6A;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.5px;
}


.hkux-listing-heading::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 44px;

    height: 3px;

    border-radius: 10px;
}


/* ============================================================
   DYNAMIC LIST
============================================================ */

.hkux-common-list {
    margin: 0;

    padding: 0;

    list-style: none;
}


.hkux-common-list-item {
    list-style: none;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid #edf0f5;
}


.hkux-common-list-item:last-child {
    border-bottom: 0;
}


/* ============================================================
   LIST ITEM
============================================================ */

.hkux-common-list-content {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 15px 8px;

    transition:
        background-color .2s ease,
        padding-left .2s ease;
}


.hkux-common-list-content:hover {
    background: #f8f9fc;

    padding-left: 13px;
}


/* ============================================================
   LIST ICON
============================================================ */

.hkux-list-item-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 9px;

    background: #eef2fa;

    color: #162F6A;

    font-size: 16px;
}


/* ============================================================
   LIST TEXT
============================================================ */

.hkux-list-item-body {
    min-width: 0;

    flex: 1;
}


.hkux-list-item-link {
    display: inline;
    v color: #424a5b;

    font-size: 14px;

    font-weight: 650;

    line-height: 1.55;

    text-decoration: none;
}


.hkux-list-item-link:hover {
    color: #162F6A;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ============================================================
   LINK ICON
============================================================ */

.hkux-list-link-icon {
    margin-left: 5px;

    color: #214AAB;

    font-size: 15px;
}


/* ============================================================
   NEW BADGE
============================================================ */

.hkux-new-badge {
    display: inline-block;

    width: auto !important;

    height: 17px !important;

    margin-left: 7px;

    vertical-align: middle;

    object-fit: contain;
}


/* ============================================================
   DATE
============================================================ */

.hkux-list-date {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 5px;

    color: #8a93a6;

    font-size: 12px;

    line-height: 1.4;
}


.hkux-list-date i {
    color: #214AAB;

    font-size: 9px;
}


/* ============================================================
   ARCHIVE / PAGINATION AREA
============================================================ */

.hkux-list-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;

    padding-top: 17px;

    border-top: 1px solid #e7ebf2;
}


/* ============================================================
   ARCHIVES BUTTON
============================================================ */

.hkux-archives-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 36px;

    padding: 0 15px;

    border-radius: 8px;

    background: #162F6A;

    color: #ffffff !important;

    font-size: 12px;

    /* font-weight: 700; */

    text-decoration: none;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.hkux-archives-btn:hover {
    background: #0e1f4d;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* ============================================================
   PAGINATION
============================================================ */

.hkux-list-pagination {
    display: flex;

    justify-content: flex-end;

    flex: 1;

    min-width: 0;
}


.hkux-list-pagination nav {
    margin: 0;
}


.hkux-list-pagination .pagination {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 4px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.hkux-list-pagination .pagination>li {
    display: block;

    margin: 0;

    padding: 0;

    list-style: none;
}


.hkux-list-pagination .pagination>li>a,
.hkux-list-pagination .pagination>li>span {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 31px;

    height: 31px;

    padding: 0 8px;

    border: 1px solid #dfe4ed;

    border-radius: 7px;

    background: #ffffff;

    color: #162F6A;

    font-size: 12px;

    line-height: 1;

    text-decoration: none;
}


.hkux-list-pagination .pagination>li>a:hover {
    border-color: #162F6A;

    background: #f1f4fa;

    color: #162F6A;
}


.hkux-list-pagination .pagination>.active>a,
.hkux-list-pagination .pagination>.active>span {
    border-color: #162F6A;

    background: #162F6A;

    color: #ffffff;
}


.hkux-list-pagination .pagination>.disabled>span,
.hkux-list-pagination .pagination>.disabled>a {
    opacity: .45;

    cursor: not-allowed;
}


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

.hkux-list-sidebar {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| getRightContent() generates .hkux-sidebar-nav
|--------------------------------------------------------------------------
*/

.hkux-list-sidebar .hkux-sidebar-nav {
    width: 100%;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.hkux-list-empty {
    padding: 45px 20px;

    text-align: center;

    color: #7c879c;

    font-size: 11px;
}


.hkux-list-empty i {
    display: block;

    margin-bottom: 10px;

    color: #c5ccda;

    font-size: 30px;
}


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

.hkux-listing-page a:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 3px;

    border-radius: 4px;
}


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

@media (max-width: 991.98px) {

    .hkux-listing-banner {
        min-height: 125px;
    }


    .hkux-listing-banner-title {
        font-size: 26px;
    }


    .hkux-listing-content {
        padding: 35px 0 50px;
    }


    .hkux-list-card {
        padding: 22px;
    }


    .hkux-list-sidebar {
        margin-top: 0;
    }


    .hkux-list-footer {
        align-items: flex-start;

        flex-direction: column;
    }


    .hkux-list-pagination {
        width: 100%;

        justify-content: flex-start;
    }


    .hkux-list-pagination .pagination {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767.98px) {

    .hkux-listing-banner {
        min-height: 110px;
    }


    .hkux-listing-banner-content {
        padding: 25px 0;
    }


    .hkux-listing-banner-title {
        font-size: 22px;

        gap: 9px;
    }


    .hkux-listing-banner-title img {
        width: 29px;

        height: 29px;
    }


    .hkux-listing-content {
        padding: 30px 0 40px;
    }


    .hkux-list-card {
        padding: 18px;

        border-radius: 10px;
    }


    .hkux-listing-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 15px;
    }


    .hkux-listing-heading {
        font-size: 21px;
    }


    .hkux-common-list-content {
        gap: 10px;

        padding: 13px 5px;
    }


    .hkux-list-item-icon {
        width: 30px;
        height: 30px;

        border-radius: 7px;

        font-size: 10px;
    }


    .hkux-list-item-link {
        font-size: 11px;
    }


    .hkux-list-date {
        font-size: 8px;
    }


    .hkux-list-footer {
        margin-top: 17px;

        padding-top: 14px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-listing-banner {
        min-height: 100px;
    }


    .hkux-listing-eyebrow {
        font-size: 8px;

        letter-spacing: 1.2px;
    }


    .hkux-listing-banner-title {
        font-size: 20px;
    }


    .hkux-listing-banner-title img {
        width: 25px;

        height: 25px;
    }


    .hkux-list-card {
        padding: 15px;
    }


    .hkux-common-list-content {
        padding: 12px 3px;
    }


    .hkux-list-item-icon {
        width: 27px;
        height: 27px;

        font-size: 9px;
    }


    .hkux-list-item-link {
        font-size: 10px;
    }


    .hkux-list-date {
        font-size: 8px;
    }


    .hkux-list-pagination .pagination>li>a,
    .hkux-list-pagination .pagination>li>span {
        min-width: 28px;

        height: 28px;

        font-size: 8px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-common-list-content,
    .hkux-archives-btn {
        transition: none !important;
    }

}

.hkux-hero-video-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.hkux-hero-video {
    width: 75%;
    height: 100%;
    display: block;
    object-fit: cover;
    padding: 40px 0 0px 0;
    border-radius: 10px;
    margin: auto;
}

.slider-cbps-img {
    height: 283px;
    border-radius: 10px;
}

/* ============================================================
   RESOURCES TOGGLE
============================================================ */

.hkux-resources-toggle-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 15px 60px;
}


.hkux-resources-toggle-box {
    width: 100%;
    max-width: 720px;
    text-align: center;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-resources-toggle-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin-bottom: 10px;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #214AAB;
    text-transform: uppercase;
}


.hkux-resources-toggle-line {
    display: inline-block;
    width: 13px;
    height: 3px;
    border-radius: 20px;
}


.hkux-resources-toggle-line--orange {
    background: #f28c28;
}


.hkux-resources-toggle-line--green {
    background: #16853a;
}


/* ============================================================
   TOGGLE
============================================================ */

.hkux-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: calc(14px * var(--hkux-font-scale)) !important;
    cursor: pointer;
    user-select: none;

    margin: 10px 0;
    padding: 7px 13px 7px 7px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .72);
    border: 1px solid #dce3ef;

    box-shadow:
        0 4px 14px rgba(22, 47, 106, .06);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.hkux-section-toggle:hover {
    border-color: #c7d2e5;

    box-shadow:
        0 6px 20px rgba(22, 47, 106, .10);

    transform: translateY(-1px);
}


/* ============================================================
   HIDDEN NATIVE CHECKBOX
============================================================ */

.hkux-section-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   SWITCH
============================================================ */

.hkux-section-toggle__switch {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: 40px;
    height: 23px;

    flex: 0 0 40px;

    border-radius: 999px;

    background: #dce3ef;

    border: 1px solid #d2dae8;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .04);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* ============================================================
   KNOB
============================================================ */

.hkux-section-toggle__knob {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #ffffff;

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

    transition:
        transform .28s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   TEXT
============================================================ */

.hkux-section-toggle__text {
    font-size: 14px;
    line-height: 1;

    font-weight: 700;

    color: #162f6a;

    letter-spacing: -.1px;

    transition: color .25s ease;
}


/* ============================================================
   ON STATE
============================================================ */

.hkux-section-toggle input:checked+.hkux-section-toggle__switch {

    background: #162f6a;
    border-color: #162f6a;

    box-shadow:
        0 3px 8px rgba(22, 47, 106, .22);
}


.hkux-section-toggle input:checked+.hkux-section-toggle__switch .hkux-section-toggle__knob {

    transform: translateX(17px);
}


.hkux-section-toggle input:checked~.hkux-section-toggle__text {

    color: #162f6a;
}


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

.hkux-section-toggle input:focus-visible+.hkux-section-toggle__switch {

    outline: 3px solid #214AAB;
    outline-offset: 3px;
}


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

.hkux-resources-toggle-description {
    margin: 9px 0 0;

    font-size: 12px;
    line-height: 1.5;

    color: #7b879d;

    letter-spacing: .05px;
}


/* ============================================================
   SECTION SHOW ANIMATION
============================================================ */

.hkux-resources-section:not([hidden]) {

    animation:
        hkuxResourcesReveal .35s ease both;
}


@keyframes hkuxResourcesReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   HIDDEN
============================================================ */

.hkux-resources-section[hidden] {
    display: none !important;
}


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

@media (max-width: 575.98px) {

    .hkux-resources-toggle-wrap {
        padding:
            5px 10px 18px;
    }


    .hkux-resources-toggle-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
        margin-bottom: 9px;
    }


    .hkux-section-toggle {
        padding: 6px 11px 6px 6px;
    }


    .hkux-section-toggle__text {
        font-size: 13px;
    }


    .hkux-resources-toggle-description {
        font-size: 11px;
        padding: 0 10px;
    }

}


/* ============================================================
   DARK MODE
============================================================ */

html.hkux-dark-mode .hkux-section-toggle {

    background: #000000;
    border-color: #ffffff;
}


html.hkux-dark-mode .hkux-section-toggle__switch {

    background: #000000;
    border-color: #ffffff;
}


html.hkux-dark-mode .hkux-section-toggle input:checked+.hkux-section-toggle__switch {

    background: #ffffff;
    border-color: #ffffff;
}


html.hkux-dark-mode .hkux-section-toggle input:checked+.hkux-section-toggle__switch .hkux-section-toggle__knob {

    background: #000000;
}


html.hkux-dark-mode .hkux-section-toggle__text {

    color: #ffffff;
}


html.hkux-dark-mode .hkux-resources-toggle-description {

    color: #ffffff;
}


html.hkux-dark-mode .hkux-resources-toggle-eyebrow {

    color: #ffffff;
}


/* ============================================================
   INDIA 360 / INCREDIBLE INDIA HEADER
============================================================ */

.hkux-india-header {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 60px 15px 0 15px;

    text-align: center;
}


/* ============================================================
   EYEBROW
============================================================ */

.hkux-india-eyebrow {
    margin-bottom: 15px;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.6px;

    color: #214AAB;

    text-transform: uppercase;
}


/* ============================================================
   INDIA ACCENT
============================================================ */

.hkux-india-accent {
    display: inline-block;

    width: 13px;
    height: 3px;

    border-radius: 10px;
}


.hkux-india-accent--orange {
    background: #214AAB;
}


.hkux-india-accent--green {
    background: #16853a;
}


/* ============================================================
   TITLE
============================================================ */

.hkux-india-title {
    margin: 0;

    color: #162f6a;

    font-size: 25px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.7px;
}


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

.hkux-india-description {
    margin: 12px 0 0;

    color: #687795;

    font-size: 12px;
    line-height: 1.5;

    font-weight: 400;

    letter-spacing: 0.05px;
}


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

@media (max-width: 767.98px) {

    .hkux-india-title {
        font-size: 22px;
    }

    .hkux-india-description {
        font-size: 11px;
    }

}


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

@media (max-width: 575.98px) {

    .hkux-india-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hkux-india-eyebrow {
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .hkux-india-title {
        font-size: 20px;
    }

    .hkux-india-description {
        font-size: 10.5px;
    }

}


/* ============================================================
   DARK MODE
============================================================ */

html.hkux-dark-mode .hkux-india-title {
    color: #ffffff;
}

html.hkux-dark-mode .hkux-india-description {
    color: #ffffff;
}

html.hkux-dark-mode .hkux-india-eyebrow {
    color: #ffffff;
}

.indialink {
    color: #687795;
}

.indialink:hover {
    color: #214AAB;
}