/* Genral */

h1 {
    font-weight: 900;
}

h4 {
    font-weight: 600;
}

.blBack {
    background-color: #F4F7FF;
}

.ylFt {
    color: #FDB913;
}

.blFt {
    color: #016799;
}


/* Kickstart Journey */

.welcome-img {
    width: 45%;
}


/* Kickstart Products */

.prdLtBx {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0px;
}

    .prdLtBx .prdTit {
        background-color: #016799;
        border-radius: 8px 0px 0px 8px;
        color: #fff;
        padding: 10px;
        width: 20%;
        display: flex;
        align-items: center;
    }

    .prdLtBx .prdDesc {
        padding: 10px;
        width: 80%;
        border: 1px solid #016799;
        border-radius: 0px 8px 8px 0px;
        background-color: #fff;
    }

a.prdLk {
    color: #007bff;
}

    a.prdLk:hover {
        color: #007bff;
        text-decoration: underline;
    }


/* Excard Smart Tools */

.toolBxWrp {
    width: 32.49%;
    margin: 5px;
}

.toolBx {
    background-color: #E6F7FF;
    border: 1px solid #016799;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
}

.toolBx1::after, .toolBx2::after, .toolBx3::after, .toolBx6::after, .toolBx4::after, .toolBx5::after {
    content: " ";
    position: absolute;
    border-width: 16px;
    border-style: solid;
    z-index: 2;
}

.toolBx1::after, .toolBx2::after {
    top: 50%;
    left: 100%;
    margin-top: -16px;
    border-color: transparent transparent transparent #016799;
}

.toolBx3::after, .toolBx6::after {
    top: 100%;
    left: 50%;
    margin-left: -16px;
    border-color: #016799 transparent transparent transparent;
}

.toolBx4::after, .toolBx5::after {
    top: 50%;
    right: 100%;
    margin-top: -16px;
    border-color: transparent #016799 transparent transparent;
}

@media screen and (max-width: 1350px) {
    .toolBxWrp {
        width: 31.98%;
    }
}

@media screen and (max-width: 767px) {
    .prdLtBx .prdTit {
        border-radius: 8px 8px 0px 0px;
        width: 100%;
    }

    .prdLtBx .prdDesc {
        border-radius: 0px 0px 8px 8px;
        width: 100%;
    }

    .toolBxWrp {
        width: 100%;
    }

    .toolBx {
        text-align: center;
    }

    .toolBx1::after, .toolBx2::after, .toolBx3::after, .toolBx6::after, .toolBx4::after, .toolBx5::after {
        top: 100%;
        left: 50%;
        margin: 0px 0px 0px -16px;
        border-color: #016799 transparent transparent transparent;
    }
}

.toolBx img {
    width: 25%;
    margin-bottom: 10px;
}


/* Combine Shipment */

.enjoyLt ul {
    list-style: none;
}

    .enjoyLt ul li {
        position: relative;
        padding-bottom: 10px;
        margin-left: 40px;
    }

        .enjoyLt ul li::before {
            content: "\261E";
            color: #004b76;
            position: absolute;
            left: -40px;
            top: -20px;
            font-size: 40px;
			font-family:"font Awesome 5 Brand";
        }

.shipTbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}

    .shipTbl th {
        border: 1px solid #fff;
        border-top-width: 0px;
        border-bottom-width: 0px;
        background-color: #016799;
        color: #fff;
        padding: 10px;
    }

    .shipTbl td {
        border: 1px solid #016799;
        background-color: #fff;
        padding: 10px;
    }

    .shipTbl th:first-child {
        border-radius: 8px 0px 0px 0px;
    }

    .shipTbl th:last-child {
        border-radius: 0px 8px 0px 0px;
    }

    .shipTbl tr:nth-of-type(4) td:first-child {
        border-radius: 0px 0px 0px 8px;
    }

    .shipTbl tr:nth-of-type(4) td:last-child {
        border-radius: 0px 0px 8px 0px;
    }

    .shipTbl th:nth-of-type(2), .shipTbl td:nth-of-type(2) {
        text-align: center;
    }

    .shipTbl th:last-child, .shipTbl td:last-child {
        text-align: right;
    }

    .shipTbl tr:nth-of-type(5) td {
        background-color: #FFE6E9;
        border: 1px solid #DC3545;
        color: #DC3545;
    }

    .shipTbl tr:last-child td {
        border-color: #0f9500;
        background-color: #DBFFD8;
        color: #0f9500;
    }

    .shipTbl tr:nth-last-child(-n+2) td:first-child {
        border-radius: 8px 0px 0px 8px;
    }

    .shipTbl tr:nth-last-child(-n+2) td:last-child {
        border-radius: 0px 8px 8px 0px;
    }

.shipFt {
    font-size: 25px;
}


/* MPP Plan */

table {
    max-width: 100% !important;
}

.mppTbl {
    border-collapse: separate;
    border-spacing: 10px 0px;
}

    .mppTbl th {
        background-color: #000;
        color: #fff;
        padding: 10px;
        border: 1px solid #dee2e6;
        padding: 10px;
        border-radius: 8px 8px 0px 0px;
    }

    .mppTbl .mpp-header {
        position: relative;
        border-bottom: 10px solid transparent;
    }

    .mppTbl td {
        background-color: #fff;
        border: 1px solid #dee2e6;
        padding: 8px 10px;
    }

        .mppTbl td:first-child {
            padding: 10px 15px;
        }

.mppImg {
    width: 30%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

@media screen and (max-width: 768px) {
    .mppImg {
        width: 100%;
    }
}

.mppTbl .tblnone {
    background-color: transparent;
    border: none
}

/* .mppTbl tr:nth-last-child(-n + 3){
		border-collapse: separate;
		border-spacing: 1px 0px;
	} */

.mppTbl .btn-topup {
    font-size: 14px;
    border-radius: 30px;
}

.mppTbl .trFirst {
    padding: 30px 15px 20px;
}


/* Top Up Bonus & Sales Rebate */

.bnsDash {
    position: relative;
    z-index: 3;
}

    .bnsDash::before {
        content: "";
        position: absolute;
        width: 2px;
        height: 100%;
        background-color: #016799;
        left: 25%;
        top: 0;
        z-index: -1;
    }

    .bnsDash::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 100%;
        background-color: #016799;
        right: 25%;
        top: 0;
        z-index: -1;
    }

    .bnsDash .bnsTit {
        background-color: #016799;
        color: #fff;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 30px;
        font-weight: 600;
        z-index: 2;
    }

    .bnsDash .subTit {
        background-color: #E6F7FF;
        border: 1px solid #016799;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        font-weight: 600;
        z-index: 2;
    }

    .bnsDash .bnsCtn {
        background-color: #fff;
        border: 1px solid #016799;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        z-index: 2;
    }

        .bnsDash .subTit div, .bnsDash .bnsCtn div {
            width: 50%;
            text-align: center;
        }


/* Total Bonus Example */

.bnspuzz {
    --s: calc(100% -0px); /* control the size */
    --g: 0px; /* control the gap */
    --r: 42px; /* control the circular shapes */

    display: grid;
    gap: var(--g);
    grid: auto-flow var(--s)/repeat(2,var(--s));
    height: 350px;
}

@media screen and (max-width: 767px) {
    .bnspuzz {
        --r: 27px;
    }

        .bnspuzz > .puzzle div {
            width: 70%;
        }
}

.bnspuzz > .puzzle:nth-child(1) div {
    padding-right: var(--r);
    padding-bottom: var(--r);
}

.bnspuzz > .puzzle:nth-child(2) div {
    padding-left: var(--r);
}

.bnspuzz > .puzzle:nth-child(3) div {
    padding-top: var(--r);
}

.bnspuzz > .puzzle {
    object-fit: cover;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

    .bnspuzz > .puzzle:nth-child(1) {
        width: 100%;
        height: calc(100% + var(--r));
        background: #aed4ff;
        --_m: radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%,#0000 95%,#000) top/100% calc(100% - var(--r)) no-repeat, radial-gradient(var(--r) at left 50% bottom var(--r),#000 95%,#0000);
    }

    .bnspuzz > .puzzle:nth-child(2) {
        height: 100%;
        width: calc(100% + var(--r));
        margin-left: calc(var(--r)* -1);
        background: #fff5a4;
        ;
        --_m: radial-gradient(calc(var(--r) + var(--g)) at 50% calc(100% + var(--g)),#0000 95%,#000) right/calc(100% - var(--r)) 100% no-repeat, radial-gradient(var(--r) at top 50% left var(--r),#000 95%,#0000);
    }

    .bnspuzz > .puzzle:nth-child(3) {
        height: calc(100% + var(--r));
        width: 100% + calc(100% + var(--r));
        grid-column: span 2;
        margin-top: calc(var(--r)* -1);
        background: #b2ffc7;
        --_m: radial-gradient(calc(var(--r) + var(--g)) at calc(50% - var(--r))/2 calc(0% - var(--g)),#0000 95%,#000) bottom left/50% calc(100% - var(--r)) no-repeat, radial-gradient(0px at calc(0% - var(--g)) 50%,#0000 95%,#000) bottom center/10% calc(100% - var(--r)) no-repeat, radial-gradient(var(--r) at left 50% top var(--r),#000 95%,#0000) right/50% 100% no-repeat, radial-gradient(0px at 50% 50%,#0000 95%,#000) bottom right/50% calc(100% - var(--r)) no-repeat;
    }