:root {
    --jb-light-green: #efffe4;
    --jb-green: #5ea532;
    --jb-green-border: #bccdab;
    --jb-light-red: #ffe9e9;
    --jb-red: #d84c4c;
    --jb-red-border: #cdabab;
    --jb-light-yellow: #fce6d4;
    --jb-yellow-border: #cdabab;
    --jb-blue: #09365b;
    --jb-light-blue: #f1f5f9;
    --jb-golden: #ffd700;
}

.buttonContainer {
    display: flex;
    justify-content: center;
}

.button {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: white;
    background-color: var(--jb-blue);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.subTotal {
    width: 70%;
}

.small {
    font-size: 0.6rem;
}

.call {
    width: 80%;
}

.text-center {
    text-align: center;
}

.profiling {
    background-color: var(--jb-golden);
}

.grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.repayments1 {
    background-color: var(--jb-red);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: white;
}

.repayments2 {
    background-color: var(--jb-green);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: white;
}

.repayments p:nth-of-type(1) {
    grid-column: 1/3;
}

.bold {
    font-weight: 600;
}
/* RFS */
.text1 {
    font-size: 1.5rem;
    left: 37%;
    top: 50%;
    transform: translateX(-50%);
}

.text2 {
    font-size: 1.5rem;
    left: 30%;
    bottom: 5%;
    transform: translateX(-50%);
}

.text3 {
    font-size: 1.5rem;
    left: 34%;
    bottom: 5%;
    transform: translateX(-50%);
}

.b-l {
    font-size: 1.5rem;
}
/* dot point */
.dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: black;
}

.none {
    display: none;
}
/* lines */
.line-green {
    border: 0.5px solid var(--jb-green-border);
}

.line-red {
    border: 0.5px solid var(--jb-red-border);
}

.line-yellow {
    border: 0.5px solid var(--jb-yellow-border);
}
/* Pyramid column */
.pyramid {
    min-height: 300px;
}
    /* pyramid positioning */
    .pyramid > div:first-of-type {
        left: 50%;
        transform: translateX(-50%);
    }

    .pyramid > div:nth-of-type(2) {
        right: 50%;
    }

    .pyramid > div:nth-of-type(3) {
        left: 50%;
    }
/* Border right and border left max widhts defined for xxl breakpoint */
.triangle1 {
    width: 0;
    height: 0;
    border-left: 180px solid transparent;
}

.triangle2 {
    width: 0;
    height: 0;
    border-right: 180px solid transparent;
}

.triangle3 {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
}

.triangle4 {
    width: 0;
    height: 0;
    border-right: 150px solid transparent;
}

.triangle5 {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
}

.triangle6 {
    width: 0;
    height: 0;
    border-right: 150px solid transparent;
}

@media screen and (max-width: 1400px) {
    .text1, .text2, .text3 {
        font-size: 1.25rem;
    }

    .text3 {
        left: 33%;
        bottom: 5%;
        transform: translateX(-50%);
    }

    .pyramid {
        min-height: 300px;
    }

    .triangle1 {
        border-left: 150px solid transparent;
    }

    .triangle2 {
        border-right: 150px solid transparent;
    }

    .triangle3 {
        border-left: 130px solid transparent;
    }

    .triangle4 {
        border-right: 130px solid transparent;
    }

    .triangle5 {
        border-left: 130px solid transparent;
    }

    .triangle6 {
        border-right: 130px solid transparent;
    }
}

@media screen and (max-width: 1200px) {
    .pyramid {
        min-height: 250px;
    }

    .text1 {
        font-size: 1rem;
    }

    .text2 {
        font-size: 1rem;
    }

    .text3 {
        font-size: 1rem;
    }

    .b-l {
        font-size: 1rem;
    }

    .triangle1 {
        border-left: 130px solid transparent;
    }

    .triangle2 {
        border-right: 130px solid transparent;
    }

    .triangle3 {
        border-left: 110px solid transparent;
    }

    .triangle4 {
        border-right: 110px solid transparent;
    }

    .triangle5 {
        border-left: 110px solid transparent;
    }

    .triangle6 {
        border-right: 110px solid transparent;
    }
}

@media screen and (max-width: 992px) {
    .text1 {
        left: 38%;
        top: 50%;
        transform: translateX(-50%);
    }

    .pyramid {
        min-height: 250px;
    }

    .triangle1 {
        border-left: 150px solid transparent;
    }

    .triangle2 {
        border-right: 150px solid transparent;
    }

    .triangle3 {
        border-left: 110px solid transparent;
    }

    .triangle4 {
        border-right: 110px solid transparent;
    }

    .triangle5 {
        border-left: 110px solid transparent;
    }

    .triangle6 {
        border-right: 110px solid transparent;
    }
}

@media screen and (max-width: 576px) {
    .container {
        padding: 0;
    }

    .text1 {
        font-size: 1rem;
    }

    .text2 {
        font-size: 1rem;
    }

    .text3 {
        font-size: 1rem;
    }

    .b-l {
        font-size: 1rem;
    }
}

@media screen and (max-width: 496px) {
    .pyramid {
        min-height: 250px;
    }

    .triangle1 {
        border-left: 130px solid transparent;
    }

    .triangle2 {
        border-right: 130px solid transparent;
    }

    .triangle3 {
        border-left: 100px solid transparent;
    }

    .triangle4 {
        border-right: 100px solid transparent;
    }

    .triangle5 {
        border-left: 100px solid transparent;
        ;
    }

    .triangle6 {
        border-right: 100px solid transparent;
    }
}

@media screen and (max-width: 438px) {
    .pyramid {
        min-height: 250px;
    }

    .triangle1 {
        border-left: 130px solid transparent;
    }

    .triangle2 {
        border-right: 130px solid transparent;
    }

    .triangle3 {
        border-left: 100px solid transparent;
    }

    .triangle4 {
        border-right: 100px solid transparent;
    }

    .triangle5 {
        border-left: 90px solid transparent;
    }

    .triangle6 {
        border-right: 90px solid transparent;
    }
}

@media screen and (max-width: 400px) {
    .text1, .text2, .text3 {
        font-size: 0.7rem;
    }

    .pyramid {
        min-height: 200px;
    }

    .triangle1 {
        border-left: 110px solid transparent;
    }

    .triangle2 {
        border-right: 110px solid transparent;
    }

    .triangle3 {
        border-left: 90px solid transparent;
    }

    .triangle4 {
        border-right: 90px solid transparent;
    }

    .triangle5 {
        border-left: 90px solid transparent;
    }

    .triangle6 {
        border-right: 90px solid transparent;
    }

    .small {
        font-size: 0.5rem;
    }

    .subTotal {
        width: 100%;
    }
}