/* ---- Generic CSS Setup ---- */
body, h1, h2, h3, h4, h5, h6, p {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --hlb-blue: #002147;
    --hlb-red: #FF0000;
    --hk-gold: #ffe2b0;
    --hk-darkgold: #E4A669;
    --hk-darkred: #aa0614;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
}

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

.jom-pay h2 {
    font-family: "noto_sanssemibold",Arial,sans-serif;
    font-weight: 700;
    line-height: 1.5;
}

.jom-pay .display-1 {
    font-size: clamp(1.2rem, 1.425rem + 2.1vw, 3rem);
    line-height: 1.2;
}

.jom-pay .display-2 {
    font-size: clamp(1rem, 1.375rem + 1.5vw, 2.5rem);
    line-height: 1.2;
}

.jom-pay .display-3 {
    font-size: clamp(0.8rem, 1.325rem + 0.9vw, 2rem);
    line-height: 1.2;
}

.jom-pay .display-4 {
    font-size: clamp(0.6rem, 1.275rem + 0.5vw, 1.5rem);
    line-height: 1.2;
}

.jom-pay .display-5 {
    font-size: clamp(0.4rem, 1.225rem + 0.2vw, 1rem);
    line-height: 1.2;
}

.jom-pay img {
    width: 100%;
    object-fit: cover;
}

.jom-pay .row .col {
    width: 70%;
    padding-left: 15px;
    padding-right: 15px;
}

.jom-pay .text-white {
    color: var(--bs-white);
}

.jom-pay .pt-80 {
    padding-top: 80px;
}

.jom-pay .pt-100 {
    padding-top: 100px;
}

.jom-pay .pb-80 {
    padding-bottom: 80px;
}

.jom-pay .pb-100 {
    padding-bottom: 100px;
}

.jom-pay .intro-wrapper h6 {
    font-family: "noto_sanssemibold",Arial,sans-serif,Arial,sans-serif;
    font-weight: 700;
}

.jom-pay h1,
.jom-pay .info-sec .info-holder h5,
.jom-pay .why-sec .box-item .content-holder h4,
.jom-pay .register-sec h5,
.jom-pay .register-sec h6 span {
    font-family: "noto_sansbold",Arial,sans-serif;
    font-weight: 700;
}


/* ---- Info Sec ---- */
.jom-pay .main-container {
    overflow-x: hidden;
    position: relative;
    width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw - 0px);
    margin-right: calc(-50vw - 0px);
    color: var(--hlb-blue);
}

.jom-pay .info-sec {
    background-color: #dfeaf8;
}

.jom-pay .info-sec .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.jom-pay .info-sec .row .col {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.jom-pay .info-sec .info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.jom-pay .info-sec .info-holder {
    margin-top: 20px;
}

.jom-pay h1 span {
    display: block;
}

.jom-pay .info-sec .info-holder img {
    width: 50%;
}

.jom-pay .info-sec .info-holder h5 span {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.jom-pay .info-sec .img-holder img {
    width: 90%;
}


/* ---- Why Sec ---- */
.jom-pay .why-sec .row {
    gap: 30px;
}

.jom-pay .why-sec .row .col:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.jom-pay .why-sec .box-item {
    width: calc(40% - 15px);
    position: relative;
    overflow: hidden;
}

.jom-pay .why-sec .box-item .img-holder img {
    border-radius: 33px;
}

.jom-pay .why-sec .box-item .content-holder {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    width: 90%;
    color: var(--bs-white);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- How Sec ---- */
.jom-pay .how-sec .row .col {
    width: 100%;
}

.jom-pay .how-sec li.accordion {
    list-style: none;
    border-bottom: 1px solid rgba(16, 35, 70, 0.5);
}

.jom-pay .how-sec li.accordion ul {
    margin: 0;
    padding: 0;
    margin: 0 !important;
    display: none;
}

.jom-pay .how-sec li.accordion ul .txt {
    padding: 20px 0 20px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.jom-pay .how-sec li.accordion h4 {
    display: block;
    background: transparent;
    font-weight: 500;
    font-family: "noto_sansmedium",Arial,sans-serif;
    padding: 20px 0 20px;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.jom-pay .how-sec li.accordion h4 img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    color: #fff;
    transition: .3s;
    width: 20px;
}

.jom-pay .how-sec li.accordion.open h4 img {
    transform: rotate(540deg);
    transition: .3s;
}

.jom-pay .how-sec .box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jom-pay .how-sec .box-item img {
    width: 70%;
}

.jom-pay .how-sec .box-content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 15px;
    width: 80%;
    justify-content: center;
    margin: 0 auto;
    margin-top: 20px;
}

.jom-pay .how-sec .box-content h6 {
    width: calc(20% - 7.5px);
    background: var(--hlb-blue);
    color: var(--bs-white);
    font-family: "noto_sansbold",Arial,sans-serif;
    font-weight: 700;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    line-height: normal;
}

.jom-pay .how-sec .box-content .box-desc {
    width: calc(70% - 7.5px);
}

.jom-pay .how-sec .box-content .box-desc .remark-txt {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

/* ---- Register Sec ---- */
.jom-pay .register-sec .row .col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.jom-pay .register-sec .qr-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.jom-pay .register-sec .qr-holder img {
    width: calc(30% - 15px);
    object-fit: contain;
}

.jom-pay .register-sec .expiry-date {
    margin-top: 60px;
}

/* ---- Responsive start here ---- */
@media (max-width: 1024px) {
    .jom-pay .info-sec .row .col {
        width: 100%;
        gap: 30px;
    }

    .jom-pay .why-sec .row .col:last-child {
        width: 90%;
    }

    .jom-pay .why-sec .box-item .content-holder {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .jom-pay .info-sec .row {
        gap: 30px;
    }

    .jom-pay .info-sec .info-holder img {
        width: 80%;
    }

    .jom-pay .info-sec .img-holder img {
        width: 80%;
    }

    .jom-pay .row .col {
        width: 100%;
    }

    .jom-pay .how-sec .box-content {
        gap: 10px;
        width: 100%;
    }

    .jom-pay .how-sec .box-content h6 {
        width: calc(20% - 5px);
    }

    .jom-pay .how-sec .box-content .box-desc {
        width: calc(70% - 5px);
    }
}

@media (max-width: 600px) {
    .jom-pay .row .col {
        padding-left: 20px;
        padding-right: 20px;
    }

    .jom-pay .pt-80 {
        padding-top: 40px;
    }

    .jom-pay .pt-100 {
        padding-top: 60px;
    }

    .jom-pay .pb-80 {
        padding-bottom: 40px;
    }

    .jom-pay .pb-100 {
        padding-bottom: 60px;
    }

    .jom-pay .info-sec .row .col {
        flex-wrap: wrap;
    }

    .jom-pay .why-sec .box-item {
        overflow: hidden;
        border-radius: 33px;
        width: 80%;
    }

    .jom-pay .why-sec .box-item .content-holder {
        width: 100%;
        gap: 10px;
        padding: 20px 20px 30px;
    }

    .jom-pay h1 span {
        display: inline-block;
    }

    .jom-pay .info-sec .info-holder img {
        width: 230px;
    }

    .jom-pay .how-sec li.accordion ul .txt {
        grid-template-columns: 1fr;
    }

    .jom-pay .how-sec .box-content h6 {
        width: 50px;
    }

    .jom-pay .register-sec .qr-holder {
        gap: 10px;
    }

    .jom-pay .register-sec .qr-holder img {
        width: calc(40% - 5px);
    }

    .jom-pay .register-sec .expiry-date {
        margin-top: 20px;
    }
}