<?php
/*
Template Name: Cost Calculator
*/
get_header('new');
?>


<section class="cost-calculator cost-calculator-new">
    <div class="container">
        <div class="row">
            <div class="col-xl-8">
                <div class="wizard-form">
                    <form id="example-advanced-form" action="#" style="display: none;">

                        <h3><img loading="lazy"
                                src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/briefcase.webp"
                                alt="Business">Business</h3>
                        <fieldset class="form-input">
                            <div class="text-cont">
                                <h2>CHOOSE YOUR <span>BUSINESS</span></h2>
                                <p>Choose any (1) one.</p>
                            </div>
                            <div class="radio-buttons">
                                <input type="checkbox" id="radio-1" name="radio-group" value="Shopping" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-1">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/shopping.webp"
                                            alt="Shopping">
                                        <p>Shopping</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-2" name="radio-group" value="Finance" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-2">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/finance.webp"
                                            alt="Finance">
                                        <p>Finance</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-3" name="radio-group" value="Health" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-3">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/health.webp"
                                            alt="health">
                                        <p>Health</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-4" name="radio-group" value="Events" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-4">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/event.webp"
                                            alt="Events">
                                        <p>Events</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-5" name="radio-group" value="Social Media"
                                    data-money="1000" data-timesaved="1" data-projecttimeline="1"
                                    class="business_selection required">
                                <label for="radio-5">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/social-media.webp"
                                            alt="Social Media">
                                        <p>Social Media</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-6" name="radio-group" value="Real Estate"
                                    data-money="1000" data-timesaved="1" data-projecttimeline="1"
                                    class="business_selection required">
                                <label for="radio-6">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/real-estate.webp"
                                            alt="Real Estate">
                                        <p>Real Estate</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-7" name="radio-group" value="On Demand Services"
                                    data-money="1000" data-timesaved="1" data-projecttimeline="1"
                                    class="business_selection required">
                                <label for="radio-7">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/on-demand-services.webp"
                                            alt="On Demand Services">
                                        <p>On Demand Services</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-8" name="radio-group" value="Food Delivery"
                                    data-money="1000" data-timesaved="1" data-projecttimeline="1"
                                    class="business_selection required">
                                <label for="radio-8">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/food-delivery.webp"
                                            alt="Food Delivery">
                                        <p>Food Delivery</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-9" name="radio-group" value="Game" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-9">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/console.webp"
                                            alt="Food Delivery">
                                        <p>Game</p>
                                    </div>
                                </label>

                                <input type="checkbox" id="radio-10" name="radio-group" value="Other" data-money="1000"
                                    data-timesaved="1" data-projecttimeline="1" class="business_selection required">
                                <label for="radio-10">
                                    <div class="v-center">
                                        <img loading="lazy"
                                            src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/other.webp"
                                            alt="Other">
                                        <p>Other</p>
                                    </div>
                                </label>
                            </div>
                        </fieldset>

                       

                        
                    </form>
                    <!-- Modal -->
                    <div class="modal fade cost-calculator-modal" id="cost-calculator-modal" tabindex="-1"
                        aria-labelledby="cost-calculator-modal-label" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M24.7782 21.42L19.2762 15.917L24.7762 10.415L21.9492 7.58502L16.4462 13.087L10.9442 7.58502L8.11621 10.415L13.6162 15.917L8.11621 21.419L10.9462 24.247L16.4462 18.745L21.9462 24.247L24.7782 21.42Z"
                                                fill="white" />
                                        </svg>
                                    </button>
                                    <h2>Enter Data To Get a <span>Detailed Breakdown of Your App Cost</span></h2>
<!--                                     <form>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <input type="hidden" id="completeformdata" value="">
                                                <p>Full Name*</p>
                                                <input type="text" class="form-control" id="inlineFormInputGroupD"
                                                    placeholder="Enter your name">
                                            </div>
                                            <div class="col-md-4">
                                                <p>Telephone*</p>
                                                <input type="text" class="form-control" id="inlineFormInputGroupE"
                                                    placeholder="000-000-000">
                                            </div>
                                            <div class="col-md-4">
                                                <p>Email*</p>
                                                <input type="text" class="form-control" id="inlineFormInputGroupF"
                                                    placeholder="abc@example.com">
                                            </div>
                                            <div class="col-md-12">
                                                <p>Message (optional)</p>
                                                <div class="input-group">
                                                    <textarea name="" id=""
                                                        placeholder="Write your message here..."></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <button>SEND NOW</button>
                                            </div>
                                        </div>
                                    </form> -->
									<?php echo do_shortcode('[contact-form-7 id="2bf22f4" title="Cost Page Form"]')?>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-4">
                <div class="rough-estimate">
                    <h2>ROUGH <span>ESTIMATE</span></h2>
                    <form>
                        <input type="hidden" placeholder="Business" id="businessselect_cst">
                        <input type="hidden" placeholder="Platform" id="platformselect_cst">
                        <input type="hidden" placeholder="Audience" id="audienceselect_cst">
                        <input type="hidden" placeholder="Features" id="featuresselect_cst">
                        <input type="hidden" placeholder="Integration" id="integrationselect_cst">
                        <input type="hidden" placeholder="Revenue" id="revenueselect_cst">
                        <input type="hidden" placeholder="Security" id="securityselect_cst">

                        <div class="form-row">
                            <div class="col-auto">
                                <p>Money saved with Trango Tech</p>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="inlineFormInputGroupA"
                                        placeholder="0.00" value="0" readonly>
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">$</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <p>Time saved with Trango Tech</p>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="inlineFormInputGroupB" placeholder="0"
                                        value="0" readonly>
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">hrs</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <p>Project Timeline</p>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="inlineFormInputGroupC" placeholder="0"
                                        value="0" readonly>
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">Weeks</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="business-analyst">
                        <ul>
                            <li>
                                <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/analyst.webp"
                                    alt="analyst" class="img-fluid">
                            </li>
                            <li>
                                <h3>Joannes Gabriel</h3>
                                <h4>Business Analyst</h4>
                                <h5>Let's Discuss Your Tech Solutions</h5>
                            </li>
                            <li>
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#next-project-modal">Book Now</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<div id="selected-business" style="margin-top: 1em;"></div>

<div id="selected-platforms" style="margin-top: 1em;"></div>

<?php get_footer(); ?>

<script src='<?php echo get_template_directory_uri();?>/assets/js/validate.js'></script>
<script src="<?php echo get_template_directory_uri();?>/assets/js/jquery.steps.js"></script>

<script>
    function getAllValsCCSS() {
        var getAllVals1 = 'Business: ' + $('#businessselect_cst').val();
        var getAllVals2 = 'Platform: ' + $('#platformselect_cst').val();
        var getAllVals3 = 'Audience: ' + $('#audienceselect_cst').val();
        var getAllVals4 = 'Features: ' + $('#featuresselect_cst').val();
        var getAllVals5 = 'Integrations: ' + $('#integrationselect_cst').val();
        var getAllVals6 = 'Revenue: ' + $('#revenueselect_cst').val();
        var getAllVals7 = 'Security: ' + $('#securityselect_cst').val();

        var getAllVals8 = 'Money saved with Trango Tech: ' + $('#inlineFormInputGroupA').val();
        var getAllVals9 = 'Time saved with Trango Tech: ' + $('#inlineFormInputGroupB').val();
        var getAllVals10 = 'Project Timeline: ' + $('#inlineFormInputGroupC').val();

        $('#completeformdata').val(getAllVals1 + ' , ' + getAllVals2 + ' , ' + getAllVals3 + ' , ' + getAllVals4 +
            ' , ' + getAllVals5 +
            ' , ' + getAllVals6 + ' , ' + getAllVals7 + ' , ' + getAllVals8 + ' , ' + getAllVals9 + ' , ' +
            getAllVals10);
    }

    function sumValuesFirst(moneysaved, timesaved, projecttimeline) {

        $('#inlineFormInputGroupA').val(moneysaved);

        $('#inlineFormInputGroupB').val(timesaved);

        $('#inlineFormInputGroupC').val(projecttimeline);

    }

    
    

    var businessSelectedArr = [];

$(document).on('click', '.business_selection', function () {

    var val = $(this).val();
    var idx = businessSelectedArr.indexOf(val);

    // hidden input update karein
    if ($(this).is(':checked')) {
        businessSelectedArr.push(val);
    } else if (idx > -1) {
        businessSelectedArr.splice(idx, 1);
    }
    $('#businessselect_cst').val(businessSelectedArr.join(','));

    // visible list update karte hain
    var $container = $('#selected-business');

    if ($(this).is(':checked')) {
        // append naya <p> item
        $container.append('<p class="sel-item" data-val="'+val+'">'+val+'</p>');
    } else {
        // remove usi value ka <p>
        $container
          .find('p.sel-item')
          .filter(function(){ return $(this).data('val') === val; })
          .remove();
    }

    var id = $(this).val();
    var index = businessSelectedArr.indexOf(id);

    var thismoneyval = parseInt($(this).attr('data-money'));
    var thistimeval = parseInt($(this).attr('data-timesaved'));
    var thisprojecttimlineval = parseInt($(this).attr('data-projecttimeline'));

    if ($(this).is(':checked')) {
        businessSelectedArr.push(id);
        sumValues(thismoneyval, thistimeval, thisprojecttimlineval);
    } else {
        if (index > -1) {
            businessSelectedArr.splice(index, 1);
        }
        subtractValues(thismoneyval, thistimeval, thisprojecttimlineval);
    }

    $('#businessselect_cst').val(businessSelectedArr.join(","));

    // Toggle feature/integration sections
    toggleFeatureIntegrationSections();
});




    var form = $("#example-advanced-form").show();
    form.steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {
            if (currentIndex > newIndex) {
                return true;
            }
            // Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex) {
                // To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },
        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        }
    });

   

    
</script>


<style>
.cost-calculator-new{margin-top:100px;margin-bottom:0}.cost-calculator-new .wizard-form{margin-top:40px}@media(max-width: 991px){.cost-calculator-new .wizard-form{margin-top:20px}}@media(max-width: 767px){.cost-calculator-new .wizard-form{margin-top:0}}.cost-calculator-new .wizard-form .book-a-consultant-now{position:relative;border-radius:10px;padding:40px 0;background:var(--vertical-gradient, linear-gradient(75deg, #DE253A 0.15%, #000 100%));z-index:2;bottom:5%}@media(max-width: 1920px){.cost-calculator-new .wizard-form .book-a-consultant-now{bottom:-30px}}.cost-calculator-new .wizard-form .book-a-consultant-now img{position:absolute;left:-11.5%;bottom:15%}@media(max-width: 1399px){.cost-calculator-new .wizard-form .book-a-consultant-now img{left:-13%}}@media(max-width: 1199px){.cost-calculator-new .wizard-form .book-a-consultant-now img{left:-10%}}@media(max-width: 991px){.cost-calculator-new .wizard-form .book-a-consultant-now img{left:-4%}}@media(max-width: 767px){.cost-calculator-new .wizard-form .book-a-consultant-now img{left:-5.5%}}@media(max-width: 575px){.cost-calculator-new .wizard-form .book-a-consultant-now img{left:0}}.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont{margin-left:45%}@media(max-width: 991px){.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont{margin-left:20%}}@media(max-width: 767px){.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont{margin-left:35%}}.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont h2{font-size:16px;color:#fff;font-weight:600;margin-bottom:0}.cost-calculator-new .wizard-form .book-a-consultant-now .text-cont p{margin-bottom:15px;color:#fff;font-size:12px;font-weight:400}.cost-calculator-new .wizard-form .book-a-consultant-now a{border-radius:10px;background:#de253a;color:#fff;font-size:12px;font-weight:500;line-height:15px;text-decoration:none;text-align:center;padding:10px 0;position:absolute;bottom:0;width:100%}.cost-calculator-new .wizard-form .wizard{display:block;width:100%}.cost-calculator-new .wizard-form .wizard .steps{position:relative;display:block;width:30%;z-index:1;background:#fff}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .steps{width:100%}}.cost-calculator-new .wizard-form .wizard .steps .current-info{position:absolute;left:-999em}.cost-calculator-new .wizard-form .wizard .steps a{display:block;width:auto;font-size:14px;padding:5px 15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.cost-calculator-new .wizard-form .wizard .steps .done a{color:#000}.cost-calculator-new .wizard-form .wizard .steps .done a img{filter:brightness(0)}.cost-calculator-new .wizard-form .wizard .steps .current a,.cost-calculator-new .wizard-form .wizard .steps .done a{background:rgba(0,0,0,0);color:#de253a;cursor:default}.cost-calculator-new .wizard-form .wizard .steps .current a .number,.cost-calculator-new .wizard-form .wizard .steps .done a .number{background:#de253a;color:#fff;font-weight:500;display:flex;justify-content:center;align-items:center}.cost-calculator-new .wizard-form .wizard .steps .current:after,.cost-calculator-new .wizard-form .wizard .steps .done:after{background:#de253a}.cost-calculator-new .wizard-form .wizard .steps>ul{display:flex !important;border:0;padding-right:25px;list-style:none}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .steps>ul{flex-wrap:wrap;display:flex !important;border-right:0;padding-right:0}}.cost-calculator-new .wizard-form .wizard .steps>ul li{margin:0 20px;position:relative}@media(max-width: 1399px){.cost-calculator-new .wizard-form .wizard .steps>ul li{margin:0 13px}}@media(max-width: 1199px){.cost-calculator-new .wizard-form .wizard .steps>ul li{margin:0 25px}}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .steps>ul li{margin:0 10px}}@media(max-width: 767px){.cost-calculator-new .wizard-form .wizard .steps>ul li{margin:0}}.cost-calculator-new .wizard-form .wizard .steps>ul li:after{content:"";width:120px;height:2px;background:#d9d9d9;position:absolute;top:23px;left:45px;z-index:-1}@media(max-width: 1399px){.cost-calculator-new .wizard-form .wizard .steps>ul li:after{width:100px}}@media(max-width: 1199px){.cost-calculator-new .wizard-form .wizard .steps>ul li:after{width:130px}}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .steps>ul li:after{width:90px}}@media(max-width: 767px){.cost-calculator-new .wizard-form .wizard .steps>ul li:after{width:70px}}.cost-calculator-new .wizard-form .wizard .steps>ul li a{width:100%;border:0;border-radius:0;text-align:left;color:#000;font-size:12px;font-weight:500;padding:13px 15px;display:block;align-items:center;cursor:auto;margin-bottom:15px;background:rgba(0,0,0,0);text-decoration:none}@media(max-width: 767px){.cost-calculator-new .wizard-form .wizard .steps>ul li a{padding:13px 12px}}.cost-calculator-new .wizard-form .wizard .steps>ul li a img{display:none}.cost-calculator-new .wizard-form .wizard .steps>ul li a span.number{display:flex;justify-content:center;align-items:center;width:20px;height:20px;margin:auto;border-radius:100%;background:#d9d9d9;color:#202020;font-size:12px;font-weight:500;line-height:normal;margin-bottom:10px}.cost-calculator-new .wizard-form .wizard .steps>ul li .active img{filter:brightness(9)}.cost-calculator-new .wizard-form .wizard .steps>ul li .active span.number{background:#de253a;color:#fff}.cost-calculator-new .wizard-form .wizard .steps>ul li:nth-last-child(1):after{display:none}.cost-calculator-new .wizard-form .wizard .content{display:block;position:relative;width:100%;margin-top:8px;min-height:515px}@media(max-width: 1199px){.cost-calculator-new .wizard-form .wizard .content{min-height:auto;margin-bottom:20px}}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .content{width:100%;margin-top:10px}}.cost-calculator-new .wizard-form .wizard .content .title{position:absolute;left:-999em}.cost-calculator-new .wizard-form .wizard .content .text-cont{margin-left:15px;margin-bottom:10px}.cost-calculator-new .wizard-form .wizard .content .text-cont h1{color:#000;font-weight:600;font-size:24px;letter-spacing:1.2px;text-transform:uppercase}.cost-calculator-new .wizard-form .wizard .content .text-cont h1 span{color:#de253a}.cost-calculator-new .wizard-form .wizard .content .text-cont p{color:#000;font-size:12px;font-weight:500;margin-bottom:0}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label{width:16%}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label{width:29%}}@media(max-width: 767px){.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label{width:27%}}@media(max-width: 465px){.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label{width:42%}}@media(max-width: 375px){.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label{width:40%}}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover{border:1px solid #de253a;background:#de253a}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover img{filter:brightness(10)}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label:hover p{color:#fff}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center{text-align:-webkit-center}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center img{display:block}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label .v-center p{font-weight:600;font-size:14px;margin-top:12px;margin-bottom:0;line-height:20px}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label.error{position:absolute;bottom:-100px;color:red;font-weight:600;font-size:14px;border:0;cursor:default}.cost-calculator-new .wizard-form .wizard .content fieldset.more-than-6-labels .radio-buttons label.error:hover{background:none}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(max-width: 575px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons{justify-content:center}}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio],.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]{position:absolute;opacity:0}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label,.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label{border:1px solid #de253a;background:#de253a}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label img,.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label img{filter:brightness(10)}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=radio]:checked+label p,.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons input[type=checkbox]:checked+label p{color:#fff}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:46%;padding:25px 0;display:flex;margin:12px 2%;align-items:center;justify-content:center;border-radius:5px;border:1px solid #dbdbdb;transition:.3s;cursor:pointer}@media(max-width: 1399px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:27%}}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:29%}}@media(max-width: 767px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:27%}}@media(max-width: 465px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:42%}}@media(max-width: 375px){.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label{width:40%}}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover{border:1px solid #de253a;background:#de253a}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover img{filter:brightness(10)}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label:hover p{color:#fff}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center{text-align:-webkit-center}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center img{display:block}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label .v-center p{font-weight:600;font-size:14px;margin-top:12px;margin-bottom:0;line-height:20px}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label.error{position:absolute;bottom:-100px;color:red;font-weight:600;border:0;cursor:default}.cost-calculator-new .wizard-form .wizard .content fieldset .radio-buttons label.error:hover{background:none}.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body{display:none}.cost-calculator-new .wizard-form .wizard .content fieldset.form-input.body.current{display:block}.cost-calculator-new .wizard-form .wizard .actions{width:100%;max-width:100%;margin-left:auto}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .actions{max-width:100%}}.cost-calculator-new .wizard-form .wizard .actions ul{list-style:none;display:flex;justify-content:space-between;margin:0 25px;position:relative;z-index:999}@media(max-width: 991px){.cost-calculator-new .wizard-form .wizard .actions ul{margin:50px 25px 30px}}@media(max-width: 575px){.cost-calculator-new .wizard-form .wizard .actions ul{display:block}.cost-calculator-new .wizard-form .wizard .actions ul li{margin-bottom:15px}}.cost-calculator-new .wizard-form .wizard .actions ul li a{border-radius:16px;border:1px solid #de253a;color:#de253a;font-size:16px;font-weight:600;text-decoration:none;padding:13px 0;min-width:154px;display:block;text-align:center}.cost-calculator-new .wizard-form .wizard .actions ul .disabled{opacity:0}.cost-calculator-new .wizard-form .wizard .actions ul .disabled a{cursor:default}.cost-calculator-new .rough-estimate{background:#f6f6f6;height:100%;padding:80px 30px 50px}@media(max-width: 1199px){.cost-calculator-new .rough-estimate{margin-top:50px}}@media(max-width: 991px){.cost-calculator-new .rough-estimate{margin-top:0}}.cost-calculator-new .rough-estimate h2{color:#000;font-size:24px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:65px}.cost-calculator-new .rough-estimate h2 span{color:#de253a}.cost-calculator-new .rough-estimate form p{color:#000;font-size:14px;font-weight:600}.cost-calculator-new .rough-estimate form .input-group{border-radius:16px;background:#fff;box-shadow:0 7px 25px 0 rgba(0,0,0,.07);margin-bottom:55px;padding:6px 10px}.cost-calculator-new .rough-estimate form .input-group input{border:0;box-shadow:none;outline:0;font-size:14px;font-weight:600;color:rgba(0,0,0,0);text-shadow:0 0 8px #000}.cost-calculator-new .rough-estimate form .input-group input::placeholder{color:#000}.cost-calculator-new .rough-estimate form .input-group .input-group-prepend .input-group-text{border:0;background:#fff;color:#de253a;font-size:14px;font-weight:600}.cost-calculator-new .cost-calculator-modal .modal-dialog{max-width:875px}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content{border-radius:20px;position:relative}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body{padding:55px 45px}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body .btn-close{position:absolute;right:-15px;top:-15px;height:32px;width:32px;background:#de253a;border-radius:100%;color:#fff;opacity:1}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2{color:#000;text-align:center;font-size:41px;font-weight:600;margin-bottom:35px}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body h2 span{color:#de253a}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form p{color:#de253a;font-size:14px;font-weight:500;margin-bottom:0}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form input{border-radius:0;border:0;border-bottom:1px solid #bfbfbf;margin-bottom:35px;padding:4px 0 8px 0;color:#7c7c7c;font-size:14px;font-weight:400;box-shadow:none;outline:0}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form textarea{border:0;border-bottom:1px solid #bfbfbf;width:100%;resize:none;outline:0;padding:0 0 8px 0;color:#7c7c7c;font-size:14px;font-weight:400;box-shadow:none}.cost-calculator-new .cost-calculator-modal .modal-dialog .modal-content .modal-body form button{border-radius:16px;background:#de253a;padding:15px 58px;color:#fff;font-size:16px;font-weight:600;letter-spacing:3.2px;border:0;margin-top:43px}.cost-calculator-new .business-analyst{background-image:url("../img/cost-calculator/analyst-bg.webp");background-repeat:no-repeat;background-size:100%;padding:20px 0;margin-top:5rem}@media(max-width: 1399px){.cost-calculator-new .business-analyst{background-repeat:no-repeat;background-size:cover;padding:20px 0;margin-top:5rem;background-position:right;border-radius:15px}}@media(max-width: 575px){.cost-calculator-new .business-analyst{background-image:none;background:linear-gradient(270deg, #DE253A 0.15%, #000 99.75%);border-radius:12px;margin-top:0}}.cost-calculator-new .business-analyst ul{display:flex;list-style:none;padding:0;position:relative;justify-content:space-between}@media(max-width: 575px){.cost-calculator-new .business-analyst ul{display:block}}.cost-calculator-new .business-analyst ul li{width:33.333%}@media(max-width: 575px){.cost-calculator-new .business-analyst ul li{width:100%;text-align:center}}.cost-calculator-new .business-analyst ul li:nth-child(1){position:absolute;bottom:-13px;left:0}@media(max-width: 1399px){.cost-calculator-new .business-analyst ul li:nth-child(1){bottom:-20px}}@media(max-width: 575px){.cost-calculator-new .business-analyst ul li:nth-child(1){position:static}}.cost-calculator-new .business-analyst ul li:nth-child(2){margin-left:5rem}@media(max-width: 575px){.cost-calculator-new .business-analyst ul li:nth-child(2){margin-left:0}}.cost-calculator-new .business-analyst ul li:nth-child(3){position:absolute;right:0;bottom:6px}@media(max-width: 575px){.cost-calculator-new .business-analyst ul li:nth-child(3){position:static}}.cost-calculator-new .business-analyst ul li h3{color:#fff;font-size:14px;font-weight:500;line-height:normal;margin-bottom:0}.cost-calculator-new .business-analyst ul li h4,.cost-calculator-new .business-analyst ul li h5{color:#fff;font-size:12px;font-weight:400;line-height:normal}.cost-calculator-new .business-analyst ul li h5{margin-top:20px}@media(max-width: 575px){.cost-calculator-new .business-analyst ul li h5{margin-bottom:10px}}.cost-calculator-new .business-analyst ul li a{color:#fff;font-size:12px;font-weight:normal;line-height:15px;text-decoration:none;border-radius:10px;background:#de253a;padding:10px 20px}
    </style>