/* ============================== [ ROI Calculator CSS Start ] ============================== */
.roi-calculator-wrapper {
    position: relative;
    max-width: 1620px;
    margin-inline: auto;

    --roi-radius-20: 20px;

    --roi-font-disc: 18px;
    --roi-font-title: 20px;
}

.roi-calculator-wrapper .roi-calculator-left { display: flex; flex-direction: column; gap: 70px; padding: 48px; border-radius: var(--roi-radius-20); -webkit-border-radius: var(--roi-radius-20); -moz-border-radius: var(--roi-radius-20); -ms-border-radius: var(--roi-radius-20); -o-border-radius: var(--roi-radius-20); background-color: #1b1b1b; height: 100%; }

.roi-calculator-wrapper .roi-calculator-right { height: 100%; display: flex; flex-direction: column; gap: 30px; padding: 20px; border-radius: var(--radius-20); -webkit-border-radius: var(--radius-20); -moz-border-radius: var(--radius-20); -ms-border-radius: var(--radius-20); -o-border-radius: var(--radius-20); justify-content: space-between; }


.roi-calculator-wrapper .roi-title * { opacity: 0.80; font-family: inherit; font-style: normal; font-weight: 400; font-size: var(--roi-font-disc); line-height: 150%; letter-spacing: -0.2%; margin-bottom: 0; color: #FFFFFF; }
.roi-calculator-wrapper .roi-value * { font-family: inherit; font-style: normal; font-weight: 400; font-size: var(--roi-font-title); line-height: 150%; letter-spacing: -0.2%; margin-bottom: 0; color: #FFFFFF; margin-inline: auto 0; width: fit-content; }

.roi-calculator-wrapper .slider-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.roi-calculator-wrapper .slider-group { display: flex; flex-direction: column; gap: 20px; }

.roi-calculator-wrapper .slider-label * { font-size: var(--roi-font-disc); margin-bottom: 0; opacity: 0.80; font-family: inherit; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -.2%; color: #FFFFFF; }

.roi-calculator-wrapper .slider-value * { font-family: inherit; font-style: normal; font-weight: 500; font-size: var(--roi-font-title); line-height: 150%; letter-spacing: -0.2%; color: #FFFFFF; margin-bottom: 0; }

/* Custom Range Styling */
.roi-calculator-wrapper .range-container { position: relative; height: 3px; width: 100%; background: #555555; border-radius: 10px; }

.roi-calculator-wrapper .range-input { appearance: none; -webkit-appearance: none; width: 100%; height: 3px; background: transparent; position: absolute; top: 0; left: 0; margin: 0; cursor: pointer; z-index: 2; }

/* The visible progress bar */
.roi-calculator-wrapper .range-progress { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 200%; background: linear-gradient(to right, #BDD86C 0%, #4C00D4 100%); border-radius: 10px; z-index: 1; pointer-events: none; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }

/* Thumb Styling */
.roi-calculator-wrapper .range-input::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #4C00D4; border: 1px solid #BDD86C; cursor: pointer; margin-top: -5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

.roi-calculator-wrapper .range-input::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; margin-top: -5px; background: #4C00D4; border: 1px solid #BDD86C; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

/* Remove default track styling */
.roi-calculator-wrapper .range-input::-webkit-slider-runnable-track { width: 100%; height: 6px; background: transparent; }

.roi-calculator-wrapper .range-input:focus { outline: none; }


.roi-calculator-wrapper .border-gradient { position: relative; border-radius: var(--roi-radius-20); -webkit-border-radius: var(--roi-radius-20); -moz-border-radius: var(--roi-radius-20); -ms-border-radius: var(--roi-radius-20); -o-border-radius: var(--roi-radius-20); }

.roi-calculator-wrapper .border-gradient::after { content: ""; position: absolute; inset: -1px; padding: 1px; background: linear-gradient(to left, #4C00D4 0%, #BDD86C 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: var(--roi-radius-20); opacity: .5; pointer-events: none; -webkit-border-radius: var(--roi-radius-20); -moz-border-radius: var(--roi-radius-20); -ms-border-radius: var(--roi-radius-20); -o-border-radius: var(--roi-radius-20); }

.roi-calculator-wrapper .roi-calculator-block .row { margin-inline: -10px; align-items: center; }
.roi-calculator-wrapper .roi-calculator-block .row >* { padding-inline: 10px; }
.roi-calculator-wrapper .roi-calculator-block .row-parent { padding-block: 10px; border-bottom: 1px solid #272727; }
.roi-calculator-wrapper .roi-calculator-block .row-parent:first-child { padding-top: 0; }
.roi-calculator-wrapper .roi-calculator-block { display: flex; flex-direction: column; gap: 10px; }

.roi-calculator-wrapper  .white-text-center * { color: #FFFFFF; font-family: inherit; font-size: var(--roi-font-disc); text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: 0; }
.roi-calculator-wrapper  .roi-calculator-btn { font-family: inherit; font-weight: 500; font-size: var(--roi-font-disc); text-align: center; color: #000000; padding: 10px; text-decoration: unset; display: flex; align-items: center; justify-content: center; width: 100%; background-color: #BDD86C; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.roi-calculator-wrapper  .roi-calculator-btn:hover { background-color: #ffffff; }

.roi-calculator-wrapper > .row { row-gap: 30px; }

/* Responsive */
@media (max-width: 1399px) {
    .roi-calculator-wrapper {
        --roi-font-disc: 16px;
        --roi-font-title: 18px;
    }

    .roi-calculator-wrapper .roi-calculator-left { padding: 30px; gap: 50px; }
}

@media (max-width: 991px) {
    .roi-calculator-wrapper .roi-calculator-left { gap: 30px; }
    .roi-calculator-wrapper .roi-calculator-right { gap: 20px; }
}

@media (max-width: 767px) {
    .roi-calculator-wrapper {
        --roi-font-disc: 14px;
        --roi-font-title: 16px;
    }

    .roi-calculator-wrapper > .row { gap: 20px; }
    .roi-calculator-wrapper .roi-calculator-left { padding: 20px; }
}
/* ============================== [ ROI Calculator CSS End ] ============================== */