@media (max-width: 768px) {

        html,
        body {
            overflow-x: hidden !important;
        }

        .mx {
            display: block;
        }

        .metric {
            margin-bottom: 10px !important;
        }

        .step-grid {
            display: block !important;
        }

        .calc-wrap {
            display: block !important;
        }

        .calc-grid {
            display: block !important;
        }

        .kpi {
            display: block !important;
        }

        .footer .cols {
            display: block !important;
        }

        .cards {
            gap: 8px !important;
        }

        .kpi .item {
            margin-bottom: 10px;
        }

        .hero-head {
            padding: 10px;
        }

        .img-bignumber {
            max-width: 100px;
        }


    }

    .calc-input {
        margin: 0px 0px !important;
    }
    #months{
        height: 40px;
    }

    .slider-wrap input[type="range"] {
        padding: 0px !important;
    }