/*********************************************
 * Pricing Box
**********************************************/
.br-pricing-box {
    --grid-color:rgba(255, 255, 255, .04);
    --grid-size:50px;
    --pb-spacing-left:clamp(100px, calc(0.1812 * var(--br-container)), 212px);
    background:linear-gradient(344deg, #333 154.82%, #313131 -53.01%);
    padding-left:var(--pb-spacing-left);
}
.br-pricing-box:before {
    content:""; pointer-events:none;
    position:absolute; inset:0; z-index:1; border-radius:2px;
    background-image:linear-gradient(var(--grid-color) .1em, rgba(0, 0, 0, 0) .1em), linear-gradient(90deg, var(--grid-color) .1em, rgba(0, 0, 0, 0) .1em);
    background-size:var(--grid-size) var(--grid-size);
    background-position:left top;
}
.br-pricing-box:after {
    font-family:var(--br-font-icomoon); content:"\e902";
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:0; left:0; bottom:0; width:var(--pb-spacing-left); z-index:2;
    font-size:calc(0.83 * var(--pb-spacing-left)); line-height:1; color:var(--br-color-primary);
}

/* heading */
.br-pricing-box__heading {padding:40px 24px; width:62.5%;}

/* content */
.br-pricing-box__content {
    background:linear-gradient(344deg, #333 154.82%, #313131 -53.01%);
    padding:24px; width:37.5%;
}
.br-pricing-box__content-inner {max-width:296px;}
.br-pricing-box__content-inner p {--br-spacing-paragraph:8px;}
.br-pricing-box__content-inner p del {color:#fff;}
.br-pricing-box__content-inner p:has([class*="btn_primary"]) {margin-top:24px;}
.txt_color_white .br-pricing-box__content-inner [class*="btn_primary"] {
    --btn-bg-color:var(--br-color-red);
    --btn-color:var(--br-color-white);
    --btn-bg-color-hover:#0c0c0c;
    --btn-color-hover:var(--br-color-white);
    --btn-border-color:var(--br-color-red);
    --btn-border-color-hover:#0c0c0c;
}


/*********************************************
 * Pricing Box Responsive
**********************************************/
@media only screen and (max-width:768px) {
    .br-pricing-box {
        --pb-spacing-top:151px;
        padding-left:0; padding-top:var(--pb-spacing-top);
        flex-direction:column;
    }
    .br-pricing-box:after {
        bottom:auto; width:100%; height:var(--pb-spacing-top);
        font-size:100px;
    }
    .br-pricing-box__heading, .br-pricing-box__content {width:100%; padding:24px 20px;}
    .br-pricing-box__heading {
        background:linear-gradient(344deg, #333 154.82%, #313131 -53.01%);
        border-bottom:1px solid rgba(255, 255, 255, .1);
    }
    .br-pricing-box__content-inner {max-width:100%;}
}