{"id":17529,"date":"2024-07-22T13:07:25","date_gmt":"2024-07-22T11:07:25","guid":{"rendered":"https:\/\/lemonpro.com\/calculator\/"},"modified":"2025-04-03T19:08:18","modified_gmt":"2025-04-03T17:08:18","slug":"calculator","status":"publish","type":"page","link":"https:\/\/lemonpro.com\/en\/it-care\/calculator\/","title":{"rendered":"Calculator"},"content":{"rendered":"<div class=\"container\">\n            <\/div>\n\n<section class=\"b-hero o-uniwersal  default b-hero--lower-height2\" id=\"block_422cb0a79bb7f0a306dc9f552936b946\" style=\"\">\n\n    \n        <div class=\"b-hero__popup-slide\">\n            <div class=\"c-popup-slide-form primary\">\n    <div class=\"c-popup-slide-form__header js-switchers-custom\">\n        <div class=\"c-popup-slide-form__icon\">\n           <svg enable-background=\"new 0 0 50 50\" height=\"20px\" version=\"1.1\" viewBox=\"0 0 50 50\" width=\"20px\" xml:space=\"preserve\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"><rect fill=\"none\" height=\"50\" width=\"50\"\/><line fill=\"none\" stroke=\"#ffffff\" stroke-miterlimit=\"10\" stroke-width=\"4\" x1=\"9\" x2=\"41\" y1=\"25\" y2=\"25\"\/><line class=\"second\" fill=\"none\" stroke=\"#ffffff\" stroke-miterlimit=\"10\" stroke-width=\"4\" x1=\"25\" x2=\"25\" y1=\"9\" y2=\"41\"\/><\/svg>        <\/div>\n        <div class=\"c-popup-slide-form__text\">\n            Contact\n        <\/div>\n    <\/div>\n    <div class=\"c-popup-slide-form__body\">\n        \n        <div class=\"c-form-basic\">\n            <div class=\"c-form-basic__form\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f17591-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"17591\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/17529#wpcf7-f17591-o1\" method=\"post\" class=\"wpcf7-form init wpcf7-acceptance-as-validation\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"17591\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f17591-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div class=\"c-form-field \">\n<label for=\"your-name-inp\" class=\"c-form-field__label\">Name:*<\/label>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required c-form-field__input\" id=\"your-name-inp\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> \n<\/div>\n<div class=\"c-form-field\">\n    <label for=\"your-email-inp\" class=\"c-form-field__label\">E-mail:*<\/label>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email c-form-field__input\" id=\"your-email-inp\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n<\/div>\n<div class=\"c-form-field\">\n    <label for=\"tel-946-inp\" class=\"c-form-field__label\">Phone number:<\/label>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"tel-946\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel c-form-field__input\" id=\"tel-946-inp\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"tel-946\" \/><\/span>\n<\/div>\n<div class=\"c-form-field\">\n<label for=\"your-message-inp\" class=\"c-form-field__label\">Inquiry<\/label>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea c-form-field__input c-form-field__input--textarea\" id=\"your-message-inp\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span>\n<\/div>\n<div class=\"c-form-field c-form-field--acceptance-wrapper\">\n<span class=\"wpcf7-form-control-wrap\" data-name=\"acceptance-636\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acceptance-636\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">I accept the terms of <a href=\"\/polityka-prywatnosci\/\">the Privacy Policy<\/a><\/span><\/label><\/span><\/span><\/span>\n<\/div>\n\n<div class=\"c-form-field c-form-field--submit\">\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner c-btn\" type=\"submit\" value=\"Send\" \/>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n        <\/div>\n\n    \n    <div class=\"b-hero__wrapper\">\n\n        \n            <div class=\"b-hero__img-wrapper\" style=\"--bg_image_color: #ffd400; --bg_image_bg_color: #ffff21;\">\n                <img decoding=\"async\" width=\"2560\" height=\"859\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-scaled.jpeg\" class=\"b-hero__img\" alt=\"\" loading=\"lazy\" style=\"--opacity: 0.5\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-scaled.jpeg 2560w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-300x101.jpeg 300w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-1024x343.jpeg 1024w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-768x258.jpeg 768w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-1536x515.jpeg 1536w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/07\/PNG-image-2048x687.jpeg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/>\n            <\/div>\n\n        \t\t\n\n        \t\t\n\n        <div class=\"container b-hero__container\">\n            <div class=\"row b-hero__row\">\n                <div class=\"col-lg-6 offset-lg-0 b-hero__col b-hero__col--desc\">\n                    <div class=\"b-hero__header\">\n\n                        \n                            <h1 class=\"c-heading b-hero__title c-heading--size-h2 c-heading--color-default\" style=\"\"><b>Check how little it can cost<\/b>\n<\/h1>\n\n                        \n                        \n                            <div class=\"c-text b-hero__desc c-text--weight-400 c-text--color-default\" style=\"\">IT Management of your company<\/div>\n\n\n                                                \n                                            <\/div>\n                <\/div>\n            <\/div>\n\n            \n        <\/div>\n    <\/div>\n<\/section>\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>IT Services Cost Calculator<\/title>\n    <style>\n        :root {\n            --primary-color: #fede0f;\n            --secondary-color: #3d4852;\n            --accent-color: #426b1f;\n            --light-bg: #f8f9fa;\n            --dark-bg: #3d4852;\n            --yellow-bg: #fede0f;\n            --gradient-bg: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);\n            --box-shadow: 0 10px 20px rgba(0,0,0,0.08);\n            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n        }\n        \n        \n        \n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 30px 20px;\n        }\n        \n        h1, h2, h3 {\n            color: #2c3e50;\n            font-weight: 600;\n        }\n        \n        \n        \n        \n        \n        .calculator-section {\n            background-color: white;\n            border-radius: 12px;\n            box-shadow: var(--box-shadow);\n            padding: 40px;\n            margin-bottom: 40px;\n            transition: var(--transition);\nwidth:60%\n        }\n        \n        .calculator-section:hover {\n            box-shadow: 0 15px 30px rgba(0,0,0,0.12);\n        }\n\n.calculator-holder{\n    display: flex;\n    flex-direction: row;\n}\n\n\n  \n}\n        \n        .form-group {\n            margin-bottom: 35px;\n        }\n        \n        .form-label {\n            display: block;\n            font-weight: 600;\n            margin-bottom: 15px;\n            font-size: 18px;\n            color: #2c3e50;\n            position: relative;\n            padding-left: 15px;\n        }\n        \n        .form-label1:before {\n            content: '';\n            position: absolute;\n            width: 5px;\n            height: 100%;\n            background: var(--primary-color);\n            left: 0;\n            border-radius: 3px;\n        }\n\n.form-label2:before {\n            content: '';\n            position: absolute;\n            width: 5px;\n            height: 40%;\n            background: var(--primary-color);\n            left: 0;\n            border-radius: 3px;\n        }\n        \n        .slider-container {\n            margin: 20px 0 35px 0;\n        }\n        \n        .slider-field {\n            margin-bottom: 30px;\n            background: white;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n        }\n        \n        .slider-label {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 10px;\n        }\n        \n        .slider-label span {\n            font-weight: 600;\n            color: #2c3e50;\n            padding-right: 15px; \/* Added padding-right *\/\n        }\n        \n        .slider-value {\n            font-weight: bold;\n            color: var(--accent-color);\n            background: rgba(255, 221, 69, 0.2);\n            padding: 4px 8px;\n            border-radius: 4px;\n            min-width: 40px;\n            text-align: center;\n        }\n        \n        .range-slider {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 100%;\n            height: 8px;\n            background: #e0e0e0;\n            outline: none;\n            border-radius: 5px;\n        }\n        \n        .range-slider::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 22px;\n            height: 22px;\n            background: var(--primary-color);\n            border-radius: 50%;\n            cursor: pointer;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n            transition: all 0.2s ease-in-out;\n        }\n        \n        .range-slider::-webkit-slider-thumb:hover {\n            transform: scale(1.1);\n            box-shadow: 0 3px 8px rgba(0,0,0,0.3);\n        }\n        \n        .range-slider::-moz-range-thumb {\n            width: 22px;\n            height: 22px;\n            background: var(--primary-color);\n            border-radius: 50%;\n            cursor: pointer;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n            border: none;\n            transition: all 0.2s ease-in-out;\n        }\n        \n        .range-slider::-moz-range-thumb:hover {\n            transform: scale(1.1);\n            box-shadow: 0 3px 8px rgba(0,0,0,0.3);\n        }\n        \n        .range-slider::-webkit-slider-runnable-track,\n        .range-slider::-moz-range-track {\n            background: linear-gradient(to right, #ccc, #e0e0e0);\n            border-radius: 5px;\n        }\n        \n        .slider-min-max {\n            display: flex;\n            justify-content: space-between;\n            font-size: 12px;\n            color: #666;\n            margin-top: 5px;\n        }\n        \n        .slider-price {\n            text-align: right;\n            font-weight: 600;\n            color: #2c3e50;\n            margin-top: 10px;\n        }\n        \n        .slider-price span {\n            color: var(--accent-color);\n            background: rgba(255, 221, 69, 0.2);\n            padding: 4px 8px;\n            border-radius: 4px;\n        }\n        \n        .price-section {\n            background: #fede0f;\n            border-radius: 12px;\n            padding: 25px;\n            text-align: center;\n            box-shadow: var(--box-shadow);\n            position: relative;\n            overflow: hidden;\n            margin-bottom: 20px;\n        }\n        \n       \n        \n        .price-section h2 {\n            margin-top: 0;\n            font-size: 20px!important;\n            color: #fff!important;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n        \n        .price-amount {\n            font-size: 46px;\n            font-weight: 700;\n            \n            color: #2c3e50;\n            text-shadow: 1px 1px 1px rgba(255,255,255,0.5);\n        }\n        \n        .info-note {\n            font-size: 14px;\n            color: rgba(0,0,0,0.6);\n            margin-top: 20px;\n            font-style: italic;\n        }\n        \n        \/* Contact form styles *\/\n        .contact-section {\n            background-color: var(--dark-bg);\n            color: white;\n            border-radius: 12px;\n            padding: 40px;\n            margin-bottom: 40px;\n            box-shadow: var(--box-shadow);\nwidth:40%;\n        }\n        \n        .contact-section h2 {\n            color: var(--primary-color);\n            margin-top: 0;\n            font-size: 28px;\n            margin-bottom: 10px;\n        }\n        \n        .contact-section h3 {\n            color: white;\n            font-size: 22px;\n            margin-top: 0;\n            margin-bottom: 20px;\n        }\n        \n        .contact-section p {\n            margin-bottom: 25px;\n            font-size: 16px;\n            line-height: 1.6;\n        }\n        \n        .form-row {\n            margin-bottom: 20px;\n        }\n        \n        .form-row input {\n            width: 100%;\n            padding: 15px;\n            padding-right: 25px; \/* Added extra padding-right *\/\n            border: none;\n            border-radius: 8px;\n            font-size: 16px;\n            color: #333;\n            background-color: white;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n            box-sizing: border-box; \/* Ensure padding is included in width *\/\n        }\n        \n        .form-row input:focus {\n            outline: none;\n            box-shadow: 0 0 0 3px rgba(255, 221, 69, 0.3);\n        }\n        \n        .submit-btn {\n            width: 100%;\n            padding: 16px;\n            background-color: var(--primary-color);\n            color: #333;\n            border: none;\n            border-radius: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: var(--transition);\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n        \n        .submit-btn:hover {\n            background-color: #000;\n            color:#fff;\n            transform: translateY(-2px);\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n        }\n        \n        .contact-footer {\n            margin-top: 30px;\n            font-size: 15px;\n            color: #ddd;\n        }\n\n.form-label2 {\npadding-top: 20px;\n    padding-bottom: 20px;\n}\n        \n        .loading {\n            display: none;\n            text-align: center;\n            margin: 20px 0;\n        }\n        \n        .loading-dots {\n            display: inline-block;\n            position: relative;\n            width: 80px;\n            height: 20px;\n        }\n        \n        .loading-dots div {\n            position: absolute;\n            top: 8px;\n            width: 12px;\n            height: 12px;\n            border-radius: 50%;\n            background: var(--primary-color);\n            animation-timing-function: cubic-bezier(0, 1, 1, 0);\n        }\n        \n        .loading-dots div:nth-child(1) {\n            left: 8px;\n            animation: loading1 0.6s infinite;\n        }\n        \n        .loading-dots div:nth-child(2) {\n            left: 8px;\n            animation: loading2 0.6s infinite;\n        }\n        \n        .loading-dots div:nth-child(3) {\n            left: 32px;\n            animation: loading2 0.6s infinite;\n        }\n        \n        .loading-dots div:nth-child(4) {\n            left: 56px;\n            animation: loading3 0.6s infinite;\n        }\n        \n        @keyframes loading1 {\n            0% { transform: scale(0); }\n            100% { transform: scale(1); }\n        }\n        \n        @keyframes loading2 {\n            0% { transform: translate(0, 0); }\n            100% { transform: translate(24px, 0); }\n        }\n        \n        @keyframes loading3 {\n            0% { transform: scale(1); }\n            100% { transform: scale(0); }\n        }\n        \n        .success-message {\n            display: none;\n            background-color: #4cd964;\n            color: white;\n            padding: 20px;\n            border-radius: 8px;\n            text-align: center;\n            margin-top: 20px;\n            animation: fadeIn 0.5s;\n        }\n        \n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(-10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        \n        @media (max-width: 992px) {\n            .calculator-section, .price-section, .contact-section {\n                padding: 30px;\n            }\n        }\n        \n        @media (max-width: 576px) {\n            .calculator-section, .price-section, .contact-section {\n                padding: 25px;\n            }\n            \n            h1 {\n                font-size: 26px;\n            }\n            \n            .price-amount {\n                font-size: 36px;\n            }\n        }\n\n@media (min-width: 320px) and (max-width: 480px) {\n  \n  .calculator-holder{\n    display: flex;\n    flex-direction: column;\n}\n\n.calculator-section {\nwidth:100%;\n}\n\n.contact-section {\nwidth:100%;\n}\n}\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1 style=\"font-size:48px;\">Monthly IT Support and Additional IT Services Cost Calculator.<\/h1>\n        <div class=\"calculator-holder\">\n        <div class=\"calculator-section\">\n            <div class=\"form-group\">\n                <div class=\"form-label form-label1\">Define your company parameters:<\/div>\n                \n                <div class=\"slider-container\">\n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>Number of users (requiring IT support)<\/span>\n                            <div class=\"slider-value\" id=\"users-value\">50<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"110\" value=\"0\" class=\"range-slider\" id=\"users-slider\" data-category=\"users\">\n                        <div class=\"slider-min-max\">\n                            <div>0<\/div>\n                            <div>100+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Cost: <span id=\"users-price\">7 920 z\u0142<\/span><\/div>\n                    <\/div>\n                    \n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>How many servers \/ production systems does your company have?<\/span>\n                            <div class=\"slider-value\" id=\"servers-value\">5<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"11\" value=\"0\" step=\"1\" class=\"range-slider\" id=\"servers-slider\" data-category=\"servers\">\n                        <div class=\"slider-min-max\">\n                            <div>0<\/div>\n                            <div>10+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Support cost: <span id=\"servers-price\">500 z\u0142<\/span><\/div>\n                    <\/div>\n\n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>How many offices or branches does your company have?<\/span>\n                            <div class=\"slider-value\" id=\"locations-value\">5<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"1\" max=\"11\" value=\"1\" step=\"1\" class=\"range-slider\" id=\"locations-slider\" data-category=\"locations\">\n                        <div class=\"slider-min-max\">\n                            <div>1<\/div>\n                            <div>10+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Cost: <span id=\"locations-price\">800 z\u0142<\/span><\/div>\n                    <\/div>\n\n                    <div class=\"form-label form-label2\">Additional IT services you need<\/div>\n\n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>How many employees need a company email address?<\/span>\n                            <div class=\"slider-value\" id=\"email-value\">50<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"110\" value=\"0\" class=\"range-slider\" id=\"email-slider\" data-category=\"email\">\n                        <div class=\"slider-min-max\">\n                            <div>0<\/div>\n                            <div>100+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Cost: <span id=\"email-price\">987 z\u0142<\/span><\/div>\n                    <\/div>\n                    \n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>How many employees need office applications (Word, Excel, Outlook, Teams) with data protection and security package?<\/span>\n                            <div class=\"slider-value\" id=\"office-value\">50<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"110\" value=\"0\" class=\"range-slider\" id=\"office-slider\" data-category=\"office\">\n                        <div class=\"slider-min-max\">\n                            <div>0<\/div>\n                            <div>100+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Cost: <span id=\"office-price\">4 400 z\u0142<\/span><\/div>\n                    <\/div>\n                    \n\n                    \n                    <div class=\"slider-field\">\n                        <div class=\"slider-label\">\n                            <span>Cloud data backup (Azure \/ AWS \/ Druva) How many TB do you need?<\/span>\n                            <div class=\"slider-value\" id=\"backup-value\">10<\/div>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"110\" value=\"0\" class=\"range-slider\" id=\"backup-slider\" data-category=\"backup\">\n                        <div class=\"slider-min-max\">\n                            <div>0<\/div>\n                            <div>100+<\/div>\n                        <\/div>\n                        <div class=\"slider-price\">Cost: <span id=\"backup-price\">2 689 z\u0142<\/span><\/div>\n                    <\/div>\n                    \n\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        \n        \n        <!-- Contact Form Section -->\n        <div class=\"contact-section\">\n<div class=\"sticky-elements\">\n<div class=\"price-section\">\n            <h2>Net cost\/month from*:<\/h2>\n            <div class=\"price-amount\" id=\"final-price\">17 296 z\u0142<\/div>\n            <div class=\"info-note\">* Pricing includes a monthly limit of engineer working hours.<\/div>\n        <\/div>\n            <h2>HAVE QUESTIONS?<\/h2>\n            <h3>Want to discuss the cost estimate?<\/h3>\n            <p>Need more detailed information?<\/p>\n            \n            <form id=\"contact-form\" method=\"post\">\n                <!-- Hidden inputs for calculator data -->\n                <input type=\"hidden\" id=\"calculator-price-hidden\" name=\"calculator_price\">\n                <input type=\"hidden\" id=\"calculator-config-hidden\" name=\"calculator_config\">\n                \n                <div class=\"form-row\">\n                    <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Full name\" required>\n                <\/div>\n                <div class=\"form-row\">\n                    <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Business email address\" required>\n                <\/div>\n                <div class=\"form-row\">\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"Phone\" required>\n                <\/div>\n                <div class=\"form-row\">\n                    <button type=\"submit\" class=\"submit-btn\">SEND<\/button>\n                <\/div>\n                \n                <div class=\"loading\">\n                    <div class=\"loading-dots\">\n                        <div><\/div>\n                        <div><\/div>\n                        <div><\/div>\n                        <div><\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"success-message\">\n                    Thank you! Your request has been sent. Our consultant will contact you soon.\n                <\/div>\n            <\/form>\n            \n            <div class=\"contact-footer\">\n                <p>Our consultant will call within 24 hours and prepare a dedicated offer tailored to the needs of your business.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/div>\n    \n    <script>\n\/\/ Updated calculation logic for IT services calculator\n\n\/\/ Ensuring the script runs when DOM is fully loaded\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log(\"DOM fully loaded, initializing calculator\");\n    \n    \/\/ Get all slider elements\n    const sliders = {\n        users: document.getElementById('users-slider'),\n        email: document.getElementById('email-slider'),\n        office: document.getElementById('office-slider'),\n        servers: document.getElementById('servers-slider'),\n        backup: document.getElementById('backup-slider'),\n        locations: document.getElementById('locations-slider')\n    };\n    \n    \/\/ Get all value display elements\n    const valueDisplays = {\n        users: document.getElementById('users-value'),\n        email: document.getElementById('email-value'),\n        office: document.getElementById('office-value'),\n        servers: document.getElementById('servers-value'),\n        backup: document.getElementById('backup-value'),\n        locations: document.getElementById('locations-value')\n    };\n    \n    \/\/ Get all price display elements\n    const priceDisplays = {\n        users: document.getElementById('users-price'),\n        email: document.getElementById('email-price'),\n        office: document.getElementById('office-price'),\n        servers: document.getElementById('servers-price'),\n        backup: document.getElementById('backup-price'),\n        locations: document.getElementById('locations-price')\n    };\n    \n    \/\/ Final price element\n    const finalPriceElement = document.getElementById('final-price');\n    \n    \/\/ Hidden form inputs for calculator data\n    const priceHiddenInput = document.getElementById('calculator-price-hidden');\n    const configHiddenInput = document.getElementById('calculator-config-hidden');\n    \n    \/\/ Define discrete steps for users, email and office sliders\n    const discreteSteps = {\n        users: [0, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 110],\n        email: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 110],\n        office: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 110],\n        backup: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110]\n    };\n    \n    \/\/ Price tables based on the spreadsheet data\n    const priceTables = {\n        users: [\n            { value: 0, price: 0 },\n            { value: 10, price: 1490 },\n            { value: 15, price: 2050 },\n            { value: 20, price: 2600 },\n            { value: 25, price: 3300 },\n            { value: 30, price: 3990 },\n            { value: 35, price: 4750 },\n            { value: 40, price: 5500 },\n            { value: 45, price: 6250 },\n            { value: 50, price: 7000 },\n            { value: 60, price: 8200 },\n            { value: 70, price: 9600 },\n            { value: 80, price: 10990 },\n            { value: 90, price: 12900 },\n            { value: 100, price: 15000 },\n            { value: 110, price: \"Custom pricing\" }\n        ],\n        email: [\n            { value: 0, price: 0 },\n            { value: 5, price: 101 },\n            { value: 10, price: 199 },\n            { value: 15, price: 298 },\n            { value: 20, price: 396 },\n            { value: 25, price: 495 },\n            { value: 30, price: 593 },\n            { value: 35, price: 691 },\n            { value: 40, price: 790 },\n            { value: 45, price: 888 },\n            { value: 50, price: 987 },\n            { value: 60, price: 1218 },\n            { value: 70, price: 1421 },\n            { value: 80, price: 1624 },\n            { value: 90, price: 1827 },\n            { value: 100, price: 2030 },\n            { value: 110, price: \"Custom pricing\" }\n        ],\n        office: [\n            { value: 0, price: 0 },\n            { value: 5, price: 440 },\n            { value: 10, price: 880 },\n            { value: 15, price: 1320 },\n            { value: 20, price: 1760 },\n            { value: 25, price: 2200 },\n            { value: 30, price: 2640 },\n            { value: 35, price: 3080 },\n            { value: 40, price: 3520 },\n            { value: 45, price: 3960 },\n            { value: 50, price: 4400 },\n            { value: 60, price: 5280 },\n            { value: 70, price: 6160 },\n            { value: 80, price: 7040 },\n            { value: 90, price: 7920 },\n            { value: 100, price: 8800 },\n            { value: 110, price: \"Custom pricing\" }\n        ],\n        servers: [\n            { value: 0, price: 0 },\n            { value: 1, price: 100 },\n            { value: 2, price: 200 },\n            { value: 3, price: 300 },\n            { value: 4, price: 400 },\n            { value: 5, price: 500 },\n            { value: 6, price: 600 },\n            { value: 7, price: 700 },\n            { value: 8, price: 800 },\n            { value: 9, price: 900 },\n            { value: 10, price: 1000 },\n            { value: 11, price: \"Custom pricing\" }\n        ],\n        backup: [\n            { value: 0, price: 0 },\n            { value: 1, price: 268 },\n            { value: 2, price: 537 },\n            { value: 3, price: 806 },\n            { value: 4, price: 1075 },\n            { value: 5, price: 1344 },\n            { value: 6, price: 1613 },\n            { value: 7, price: 1882 },\n            { value: 8, price: 2151 },\n            { value: 9, price: 2420 },\n            { value: 10, price: 2689 },\n            { value: 20, price: 5379 },\n            { value: 30, price: 8069 },\n            { value: 40, price: 10759 },\n            { value: 50, price: 13449 },\n            { value: 60, price: 16139 },\n            { value: 70, price: 18829 },\n            { value: 80, price: 21519 },\n            { value: 90, price: 24209 },\n            { value: 100, price: 26899 },\n            { value: 110, price: \"Custom pricing\" }\n        ],\n        locations: [\n            { value: 1, price: 0 },\n            { value: 2, price: 200 },\n            { value: 3, price: 400 },\n            { value: 4, price: 600 },\n            { value: 5, price: 800 },\n            { value: 6, price: 1000 },\n            { value: 7, price: 1200 },\n            { value: 8, price: 1400 },\n            { value: 9, price: 1600 },\n            { value: 10, price: 1800 },\n            { value: 11, price: \"Custom pricing\" }\n        ]\n    };\n    \n    \/\/ Find closest step in discrete steps\n    function findClosestStep(value, steps) {\n        if (value >= steps[steps.length - 1]) {\n            return steps[steps.length - 1];\n        }\n        \n        \/\/ Make sure we have a valid set of steps to compare with\n        if (!steps || steps.length === 0) {\n            console.error(\"Invalid steps array provided to findClosestStep\");\n            return value;\n        }\n        \n        return steps.reduce((prev, curr) => {\n            return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);\n        });\n    }\n    \n    \/\/ Find price for a specific value in the price table\n    function findPrice(table, value) {\n        \/\/ Make sure we have a valid table\n        if (!table || !Array.isArray(table) || table.length === 0) {\n            console.error(\"Invalid price table provided to findPrice\");\n            return 0;\n        }\n        \n        \/\/ Handle special case for values at or above the last discrete value\n        const lastEntry = table[table.length - 1];\n        if (value >= lastEntry.value) {\n            return lastEntry.price;\n        }\n        \n        \/\/ Find exact match\n        const exactMatch = table.find(entry => entry.value === value);\n        if (exactMatch) {\n            return exactMatch.price;\n        }\n        \n        \/\/ Find the closest lower value\n        const lowerEntry = [...table].reverse().find(entry => entry.value < value);\n        \n        \/\/ Find the closest higher value\n        const higherEntry = table.find(entry => entry.value > value);\n        \n        \/\/ If no lower value, use the lowest in the table\n        if (!lowerEntry) {\n            return higherEntry.price;\n        }\n        \n        \/\/ If no higher value, use the highest in the table\n        if (!higherEntry) {\n            return lowerEntry.price;\n        }\n        \n        \/\/ Return exact price without interpolation\n        const diffLower = value - lowerEntry.value;\n        const diffHigher = higherEntry.value - value;\n        return diffLower <= diffHigher ? lowerEntry.price : higherEntry.price;\n    }\n    \n    \/\/ Format price to Polish currency format\n    function formatPrice(price) {\n        if (typeof price === 'string') {\n            return price;\n        }\n        return Math.round(price) + ' z\u0142';\n    }\n    \n    \/\/ Function to update the footnote text based on selected additional services\n    function updateFootnoteText() {\n        const emailValue = parseInt(document.getElementById('email-slider').value) || 0;\n        const officeValue = parseInt(document.getElementById('office-slider').value) || 0;\n        const backupValue = parseInt(document.getElementById('backup-slider').value) || 0;\n        \n        const infoNote = document.querySelector('.info-note');\n        \n        if (infoNote) {\n            \/\/ Check if any additional service is selected\n            if (emailValue > 0 || officeValue > 0 || backupValue > 0) {\n                infoNote.textContent = '* Pricing includes a monthly limit of engineer working hours and costs for additional services.';\n            } else {\n                infoNote.textContent = '* Pricing includes a monthly limit of engineer working hours.';\n            }\n        }\n    }\n    \n    \/\/ Update slider value display and price\n    function updateSlider(slider) {\n        console.log(`Updating slider: ${slider.id}`);\n        \n        if (!slider || !slider.dataset || !slider.dataset.category) {\n            console.error(\"Invalid slider provided to updateSlider\");\n            return;\n        }\n        \n        const category = slider.dataset.category;\n        const valueDisplay = valueDisplays[category];\n        const priceDisplay = priceDisplays[category];\n        \n        if (!valueDisplay || !priceDisplay) {\n            console.error(`Missing display elements for category: ${category}`);\n            return;\n        }\n        \n        let value = parseInt(slider.value);\n        if (isNaN(value)) {\n            console.error(`Invalid slider value: ${slider.value}`);\n            return;\n        }\n        \n        console.log(`Original value: ${value}`);\n        \n        \/\/ For sliders with discrete steps, snap to closest step\n        if (discreteSteps[category]) {\n            const snappedValue = snapToDiscreteSteps(slider, value);\n            console.log(`Snapped from ${value} to ${snappedValue}`);\n            \n            \/\/ Only update the slider value if it actually changed\n            if (value !== snappedValue) {\n                value = snappedValue;\n                \/\/ Update slider position - this is critical!\n                slider.value = value;\n            }\n        }\n        \n        \/\/ Handle special case for displaying values over threshold\n        if (value >= 101 && (category === 'users' || category === 'email' || category === 'office' || category === 'backup')) {\n            valueDisplay.textContent = '100+';\n            console.log(`Displaying as 100+`);\n        } else if ((category === 'servers' || category === 'locations') && value >= 11) {\n            valueDisplay.textContent = '10+';\n            console.log(`Displaying as 10+`);\n        } else {\n            valueDisplay.textContent = value;\n            console.log(`Displaying as ${value}`);\n        }\n        \n        \/\/ We don't update individual price displays here anymore, as they depend on other sliders\n        \/\/ This will be handled in calculateTotalPrice\n        \n        \/\/ Update total price\n        calculateTotalPrice();\n        \n        \/\/ Update the footnote text\n        updateFootnoteText();\n    }\n    \n    \/\/ Snap value to discrete step for sliders\n    function snapToDiscreteSteps(slider, value) {\n        if (!slider || !slider.dataset || !slider.dataset.category) {\n            console.error(\"Invalid slider provided to snapToDiscreteSteps\");\n            return value;\n        }\n        \n        const category = slider.dataset.category;\n        \n        if (discreteSteps[category] && Array.isArray(discreteSteps[category])) {\n            return findClosestStep(value, discreteSteps[category]);\n        }\n        \n        return value;\n    }\n    \n    \/\/ Calculate total price from all sliders\n    function calculateTotalPrice() {\n        console.log(\"Calculating total price\");\n        \n        let total = 0;\n        let individualPricing = false;\n        let sliderConfig = {};\n        \n        \/\/ Get values from all sliders\n        const values = {};\n        for (const key in sliders) {\n            if (sliders.hasOwnProperty(key) && sliders[key]) {\n                values[key] = parseInt(sliders[key].value);\n                if (isNaN(values[key])) {\n                    console.error(`Invalid value for ${key} slider: ${sliders[key].value}`);\n                    values[key] = 0;\n                }\n                \n                \/\/ Store slider values in config\n                sliderConfig[key] = values[key];\n            }\n        }\n        \n        \/\/ Calculate price for each component with special rules\n        \n        \/\/ 1. Users cost\n        const usersPrice = findPrice(priceTables.users, values.users);\n        if (typeof usersPrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += usersPrice;\n            console.log(`Adding price for users: ${usersPrice} z\u0142`);\n        }\n        priceDisplays.users.textContent = typeof usersPrice === 'string' ? usersPrice : formatPrice(usersPrice);\n        \n        \/\/ 2. Email accounts - special rules:\n        \/\/ - If number of office packages > email accounts, email cost = 0\n        \/\/ - Otherwise, charge only for (email accounts - office packages)\n        let emailPrice = 0;\n        if (values.office >= values.email) {\n            \/\/ If office packages >= email accounts, email cost is 0\n            emailPrice = 0;\n            console.log('Email cost is 0 because office packages >= email accounts');\n        } else {\n            \/\/ Otherwise, calculate cost for (email accounts - office packages)\n            const chargeableEmailAccounts = values.email - values.office;\n            emailPrice = findPrice(priceTables.email, chargeableEmailAccounts);\n            console.log(`Charging for ${chargeableEmailAccounts} email accounts (email ${values.email} - office ${values.office})`);\n        }\n        \n        if (typeof emailPrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += emailPrice;\n            console.log(`Adding price for email: ${emailPrice} z\u0142`);\n        }\n        priceDisplays.email.textContent = typeof emailPrice === 'string' ? emailPrice : formatPrice(emailPrice);\n        \n        \/\/ 3. Office packages\n        const officePrice = findPrice(priceTables.office, values.office);\n        if (typeof officePrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += officePrice;\n            console.log(`Adding price for office: ${officePrice} z\u0142`);\n        }\n        priceDisplays.office.textContent = typeof officePrice === 'string' ? officePrice : formatPrice(officePrice);\n        \n        \/\/ 4. Servers\n        const serversPrice = findPrice(priceTables.servers, values.servers);\n        if (typeof serversPrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += serversPrice;\n            console.log(`Adding price for servers: ${serversPrice} z\u0142`);\n        }\n        priceDisplays.servers.textContent = typeof serversPrice === 'string' ? serversPrice : formatPrice(serversPrice);\n        \n        \/\/ 5. Backup\n        const backupPrice = findPrice(priceTables.backup, values.backup);\n        if (typeof backupPrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += backupPrice;\n            console.log(`Adding price for backup: ${backupPrice} z\u0142`);\n        }\n        priceDisplays.backup.textContent = typeof backupPrice === 'string' ? backupPrice : formatPrice(backupPrice);\n        \n        \/\/ 6. Locations\n        const locationsPrice = findPrice(priceTables.locations, values.locations);\n        if (typeof locationsPrice === 'string') {\n            individualPricing = true;\n        } else {\n            total += locationsPrice;\n            console.log(`Adding price for locations: ${locationsPrice} z\u0142`);\n        }\n        priceDisplays.locations.textContent = typeof locationsPrice === 'string' ? locationsPrice : formatPrice(locationsPrice);\n        \n        \/\/ Update hidden form inputs with calculator data\n        if (configHiddenInput) {\n            configHiddenInput.value = JSON.stringify(sliderConfig);\n        }\n        \n        if (individualPricing) {\n            console.log(\"Using individual pricing\");\n            finalPriceElement.textContent = 'Custom pricing';\n            if (priceHiddenInput) priceHiddenInput.value = 'Custom pricing';\n        } else {\n            const formattedPrice = formatPrice(total);\n            console.log(`Final price: ${formattedPrice}`);\n            finalPriceElement.textContent = formattedPrice;\n            if (priceHiddenInput) priceHiddenInput.value = formattedPrice;\n        }\n    }\n    \n    \/\/ Check if all elements exist before initializing\n    let allElementsExist = true;\n    \n    for (const key in sliders) {\n        if (!sliders[key]) {\n            console.error(`Missing slider element: ${key}-slider`);\n            allElementsExist = false;\n        }\n        if (!valueDisplays[key]) {\n            console.error(`Missing value display element: ${key}-value`);\n            allElementsExist = false;\n        }\n        if (!priceDisplays[key]) {\n            console.error(`Missing price display element: ${key}-price`);\n            allElementsExist = false;\n        }\n    }\n    \n    if (!finalPriceElement) {\n        console.error(\"Missing final price element: final-price\");\n        allElementsExist = false;\n    }\n    \n    if (!allElementsExist) {\n        console.error(\"Some elements are missing, calculator initialization aborted\");\n        return;\n    }\n    \n    console.log(\"All elements exist, initializing sliders\");\n    \n    \/\/ Initialize sliders\n    for (const key in sliders) {\n        if (sliders.hasOwnProperty(key) && sliders[key]) {\n            const slider = sliders[key];\n            \n            \/\/ IMPORTANT: Set input type event handlers\n            \/\/ Input event for continuous updates while dragging\n            slider.addEventListener('input', function() {\n                console.log(`Slider ${this.id} input event: ${this.value}`);\n                updateSlider(this);\n            });\n            \n            \/\/ Change event for final value when slider is released\n            slider.addEventListener('change', function() {\n                console.log(`Slider ${this.id} change event: ${this.value}`);\n                updateSlider(this);\n            });\n            \n            \/\/ Set initial values and update the DOM\n            updateSlider(slider);\n        }\n    }\n    \n    \/\/ Form submission for WordPress\n    const contactForm = document.getElementById('contact-form');\n    \n    if (contactForm) {\n        contactForm.addEventListener('submit', function(e) {\n            e.preventDefault();\n            \n            \/\/ Show loading indicator\n            const loadingIndicator = document.querySelector('.loading');\n            if (loadingIndicator) loadingIndicator.style.display = 'block';\n            \n            \/\/ Collect form data\n            const formData = new FormData(this);\n            \n            \/\/ WordPress AJAX setup\n            const ajaxurl = (typeof wp !== 'undefined' && wp.ajax) ? wp.ajax.settings.url : '\/wp-admin\/admin-ajax.php';\n            \n            \/\/ Add action for WordPress\n            formData.append('action', 'submit_it_calculator_form');\n            \n            console.log(\"Form data prepared for submission\");\n            \n            \/\/ Send form data using Fetch API\n            fetch(ajaxurl, {\n                method: 'POST',\n                body: formData,\n                credentials: 'same-origin'\n            })\n            .then(response => response.json())\n            .then(data => {\n                console.log(\"Form submitted successfully\", data);\n                \n                \/\/ Hide loading indicator\n                if (loadingIndicator) loadingIndicator.style.display = 'none';\n                \n                \/\/ Show success message\n                const successMessage = document.querySelector('.success-message');\n                if (successMessage) {\n                    successMessage.style.display = 'block';\n                    \n                    \/\/ Clear form\n                    contactForm.reset();\n                    \n                    \/\/ Hide success message after 5 seconds\n                    setTimeout(() => {\n                        successMessage.style.display = 'none';\n                    }, 5000);\n                }\n            })\n            .catch(error => {\n                console.error('Error submitting form:', error);\n                \n                \/\/ Hide loading indicator\n                if (loadingIndicator) loadingIndicator.style.display = 'none';\n                \n                \/\/ Show error message\n                alert('An error occurred while submitting the form. Please try again later.');\n            });\n        });\n    }\n    \n    \/\/ Initial calculation\n    console.log(\"Performing initial calculation\");\n    calculateTotalPrice();\n    \n    \/\/ Initial update of footnote text\n    updateFootnoteText();\n    \n    console.log(\"Calculator initialization complete\");\n});\n    <\/script>\n<\/body>\n<\/html>\n\n\n<section class=\"b-desc-image o-wrapper o-uniwersal  default b-desc-image--none\" id=\"block_9a924f106b392a295001fc2531610cb4\" style=\"\">\n\n    \n    <div class=\"container o-uniwersal__container\">\n        <div class=\"row b-desc-image__row\">\n            <div class=\"col-lg b-desc-image__col b-desc-image__col--desc\">\n                <div class=\"b-desc-image__header\">\n\n                    \n                        <h2 class=\"c-heading b-desc-image__title c-heading--size-h3 c-heading--color-default c-heading--type- c-heading--type-line-default\" style=\"\">Need effective IT Management,<br> but not sure what the cost will be?  <\/h2>\n\n                    \n                    \n                        <div class=\"c-text b-desc-image__desc c-text--weight-400 c-text--color-default\" style=\"\"><strong>Use our intuitive calculator<\/strong>, which will quickly and accurately calculate the value of a service tailored to your company&#8217;s needs. It will give you full control over your budget and let you know exactly how much professional IT support costs. This simple tool will allow you to understand what you can count on, while matching services to the specifics of your business.    <strong>Don&#8217;t waste time guessing &#8211; try our calculator and make informed decisions now!<\/strong><\/div>\n\n\n                                    <\/div>\n\n                \n                \n                <div class=\"b-desc-image__footer\">\n\n                    \n                <\/div>\n            <\/div>\n\n            <div class=\"col-lg-4 b-desc-image__col b-desc-image__col--image\">\n\n                \n                    <div class=\"b-desc-image__img-wrapper\" style=\"\">\n                                                    <img decoding=\"async\" width=\"1192\" height=\"1170\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/11\/Consultant-Lemon-Pro-yellow.png\" class=\"b-desc-image__img\" alt=\"\" style=\"\" loading=\"lazy\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/11\/Consultant-Lemon-Pro-yellow.png 1192w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/11\/Consultant-Lemon-Pro-yellow-300x294.png 300w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/11\/Consultant-Lemon-Pro-yellow-1024x1005.png 1024w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/11\/Consultant-Lemon-Pro-yellow-768x754.png 768w\" sizes=\"auto, (max-width: 1192px) 100vw, 1192px\" \/>\n                                            <\/div>\n\n                \n                \n                \n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"b-logo-slider o-wrapper o-uniwersal  third\" id=\"block_990801d8254ee580ed66659914416d90\" style=\"\">\n\n    \n    <div class=\"container o-uniwersal__container b-logo-slider__container\">\n        <div class=\"row b-logo-slider__row\">\n            <div class=\"col-12\">\n                <div class=\"b-logo-slider__header\">\n\n                    \n                        <h2 class=\"c-heading b-logo-slider__title c-heading--size-h2 c-heading--type-line\" style=\"--color: #293241;\">We are partners<\/h2>\n\n                    \n                                    <\/div>\n\n                \n                    \n                    <div class=\"b-logo-slider__wrap-slider\">\n\n                        <div\n        class=\"c-default-slider  c-default-slider--logos \">\n        <div class=\"js-custom-slider\">\n            <div class=\"c-default-slider__outside\">\n\n                \n                <div class=\"c-default-slider__swiper swiper js-slider\" data-cs-perview=\"2\" data-cs-arrows=\"false\" data-cs-loop=\"false\" data-cs-centerslides=\"false\" data-cs-gap=\"20\" data-cs-autoplay=\"false\" data-cs-pagination=\"false\" data-cs-autoplaydelay=\"2000\" data-cs-inverse=\"false\"\n                    data-cs-breakpoints=\"{&quot;992&quot;:{&quot;spaceBetween&quot;:50,&quot;slidesPerView&quot;:4,&quot;centeredSlides&quot;:false,&quot;loop&quot;:false},&quot;568&quot;:{&quot;spaceBetween&quot;:20,&quot;slidesPerView&quot;:3,&quot;centeredSlides&quot;:false,&quot;loop&quot;:false},&quot;260&quot;:{&quot;spaceBetween&quot;:10,&quot;slidesPerView&quot;:2,&quot;centeredSlides&quot;:false,&quot;loop&quot;:false,&quot;autoplay&quot;:{&quot;delay&quot;:3000}}}\">\n                    <div\n                        class=\"swiper-wrapper c-default-slider__swiper-wrapper c-default-slider__swiper-wrapper--logos\">\n\n                                                                                                                        <div class=\"swiper-slide c-default-slider__slide  swiper-first-slide-init\">\n                                        <a class=\"c-logo-box c-logo-box--link \" href=\"https:\/\/lemonpro.com\/en\/technologies\/microsoft\/\">\n    \n        <img decoding=\"async\" width=\"580\" height=\"236\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-microsoft-x2.png\" class=\"c-logo-box__img\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-microsoft-x2.png 580w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-microsoft-x2-300x122.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/>\n\n            <\/a>\n    \n\n                                    <\/div>\n                                                                                                                                                                                    <div class=\"swiper-slide c-default-slider__slide \">\n                                        <a class=\"c-logo-box c-logo-box--link \" href=\"https:\/\/lemonpro.com\/en\/technologies\/palo-alto-networks\">\n    \n        <img decoding=\"async\" width=\"580\" height=\"236\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/paloalto-x2.png\" class=\"c-logo-box__img\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/paloalto-x2.png 580w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/paloalto-x2-300x122.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/>\n\n            <\/a>\n    \n\n                                    <\/div>\n                                                                                                                                                                                    <div class=\"swiper-slide c-default-slider__slide \">\n                                        <a class=\"c-logo-box c-logo-box--link \" href=\"https:\/\/lemonpro.com\/en\/technologies\/druva\">\n    \n        <img decoding=\"async\" width=\"580\" height=\"236\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-druva-x2.png\" class=\"c-logo-box__img\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-druva-x2.png 580w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/09\/logo-druva-x2-300x122.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/>\n\n            <\/a>\n    \n\n                                    <\/div>\n                                                                                                                                                                                    <div class=\"swiper-slide c-default-slider__slide \">\n                                        <a class=\"c-logo-box c-logo-box--link \" href=\"https:\/\/lemonpro.com\/en\/technologies\/nfon\">\n    \n        <img decoding=\"async\" width=\"582\" height=\"238\" src=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/12\/NFONE.png\" class=\"c-logo-box__img\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/12\/NFONE.png 582w, https:\/\/lemonpro-cmffdgb6cqctgyhx.z03.azurefd.net\/wp-content\/uploads\/2024\/12\/NFONE-300x123.png 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/>\n\n            <\/a>\n    \n\n                                    <\/div>\n                                                                                    \n                    <\/div>\n                <\/div>\n\n                \n                <div class=\"js-pagination c-default-slider__pagination\"><\/div>\n\n                                \n            <\/div>\n        <\/div>\n    <\/div>\n\n                    \n                    <\/div>\n\n                    \n                                \n                \n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<script>\n\/\/ Wait for the DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Get elements\n    const contactSection = document.querySelector('.contact-section');\n    const stickyElements = document.querySelector('.sticky-elements');\n    \n    \/\/ Check if elements exist\n    if (!contactSection || !stickyElements) {\n        console.error('Required elements not found');\n        return;\n    }\n    \n    \/\/ Add initial CSS to elements\n    contactSection.style.position = 'relative';\n    stickyElements.style.position = 'relative';\n    \n    \/\/ Set initial width explicitly\n    stickyElements.style.width = '100%';\n    \n    \/\/ Bottom spacing (in pixels)\n    const bottomSpacing = 20;\n    \n    \/\/ Variables to track positioning\n    let contactSectionTop = contactSection.getBoundingClientRect().top + window.scrollY;\n    let contactSectionHeight = contactSection.offsetHeight;\n    let stickyElementsHeight = stickyElements.offsetHeight;\n    \/\/ Adjust maxScrollPosition to account for bottom spacing\n    let maxScrollPosition = contactSectionTop + contactSectionHeight - stickyElementsHeight - bottomSpacing;\n    \n    \/\/ Function to update position values\n    function updatePositions() {\n        contactSectionTop = contactSection.getBoundingClientRect().top + window.scrollY;\n        contactSectionHeight = contactSection.offsetHeight;\n        stickyElementsHeight = stickyElements.offsetHeight;\n        \/\/ Update maxScrollPosition with bottom spacing\n        maxScrollPosition = contactSectionTop + contactSectionHeight - stickyElementsHeight - bottomSpacing;\n    }\n    \n    \/\/ Handle scroll event\n    function handleScroll() {\n        \/\/ Skip sticky behavior on mobile\n        if (window.innerWidth <= 480) {\n            stickyElements.style.position = 'relative';\n            stickyElements.style.top = '0';\n            stickyElements.style.width = '100%';\n            return;\n        }\n        \n        const currentScrollY = window.scrollY;\n        \n        \/\/ Calculate the centered position\n        const parentRect = contactSection.getBoundingClientRect();\n        const centerOffset = (parentRect.width - 384) \/ 2;\n        \n        \/\/ If scroll position is within the sticky range\n        if (currentScrollY > contactSectionTop && currentScrollY < maxScrollPosition) {\n            stickyElements.style.position = 'fixed';\n            stickyElements.style.top = '120px';\n            stickyElements.style.width = '384px'; \/\/ Fixed width of 384px\n            stickyElements.style.left = (parentRect.left + centerOffset) + 'px';\n        } \n        \/\/ If scrolled past the bottom boundary\n        else if (currentScrollY >= maxScrollPosition) {\n            stickyElements.style.position = 'absolute';\n            \/\/ Position it with the bottom spacing in mind\n            stickyElements.style.top = (contactSectionHeight - stickyElementsHeight - bottomSpacing) + 'px';\n            \/\/ Keep the width at 384px when at bottom\n            stickyElements.style.width = '384px';\n            \/\/ Center it horizontally\n            stickyElements.style.left = centerOffset + 'px';\n        } \n        \/\/ If scrolled above the top boundary\n        else {\n            stickyElements.style.position = 'relative';\n            stickyElements.style.top = '0';\n            stickyElements.style.width = '100%';\n            stickyElements.style.left = '0';\n        }\n    }\n    \n    \/\/ Update positions on resize\n    window.addEventListener('resize', function() {\n        updatePositions();\n        handleScroll();\n    });\n    \n    \/\/ Initial position setup\n    updatePositions();\n    \n    \/\/ Add scroll event listener\n    window.addEventListener('scroll', handleScroll);\n    \n    \/\/ Initial call to set positions\n    handleScroll();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>IT Services Cost Calculator Monthly IT Support and Additional IT Services Cost Calculator. Define your company parameters: Number of users (requiring IT support) 50 0 100+ Cost: 7 920 z\u0142 How many servers \/ production systems does your company have? 5 0 10+ Support cost: 500 z\u0142 How many offices or branches does your company [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":17549,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17529","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/pages\/17529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/comments?post=17529"}],"version-history":[{"count":7,"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/pages\/17529\/revisions"}],"predecessor-version":[{"id":19578,"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/pages\/17529\/revisions\/19578"}],"up":[{"embeddable":true,"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/pages\/17549"}],"wp:attachment":[{"href":"https:\/\/lemonpro.com\/en\/wp-json\/wp\/v2\/media?parent=17529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}