.calculator-form .steps:not(.active) {
    display: none;
}

.why-it-works {
    padding: 30px 0 80px;

}

.why-it-works .columns {
    display: flex;
    background: url(../images/why-it-work-background.png) no-repeat center 7px;
    background-size: contain;
}

.why-it-works h2 {
    margin-bottom: min(max(40px, calc(2.5rem + (67.97 - 40) * ((100vw - 390px) / (1440 - 390)))), 67.97px);
    text-align: center;
}

.why-it-works .container {
    max-width: 1488px;
}

.why-it-works .columns .content>*:not(:last-child) {
    margin-bottom: 22px;
}

.why-it-works .columns .content>h1,
.why-it-works .columns .content>h2,
.why-it-works .columns .content>h3,
.why-it-works .columns .content>h4,
.why-it-works .columns .content>h5,
.why-it-works .columns .content>h6 {
    margin-bottom: 40px;
}

.why-it-works .columns .content>h6,
.why-it-works .columns .content>h6 * {
    line-height: 28.32px;
}

.why-it-works .columns .content span {
    font-weight: 600;
}

.why-it-works .columns .content h1,
.why-it-works .columns .content h2,
.why-it-works .columns .content h3,
.why-it-works .columns .content h4,
.why-it-works .columns .content h5,
.why-it-works .columns .content h6 {
    margin-bottom: min(max(22px, calc(1.375rem + (40 - 22) * ((100vw - 390px) / (1440 - 390)))), 40px);
    text-transform: uppercase;
    font-family: var(--font-heading-primary);
}

.why-it-works .actions {
    margin-top: min(max(22px, calc(1.375rem + (40 - 22) * ((100vw - 390px) / (1440 - 390)))), 40px);
}

.why-it-works .vs {
    flex: 0 0 96px;
    height: 96px;
    text-align: center;
    align-content: center;
}

.why-it-works .column>h3 {
    text-align: center;
    margin-bottom: min(max(40px, calc(2.5rem + (69.32 - 40) * ((100vw - 390px) / (1440 - 390)))), 69.32px);
    align-content: center;
    padding: 0 min(max(0px, calc(0rem + (82 - 0) * ((100vw - 390px) / (1440 - 390)))), 82px);
}

.why-it-works .column>.image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

.why-it-works .column>.image {
    text-align: center;
    align-content: center;
}

.why-it-works .column {
    flex: 0 0 calc((100% - 96px) / 2);
}

.why-it-works .content-right,
.why-it-works .content-left {
    margin-top: min(max(40px, calc(2.5rem + (60.77 - 40) * ((100vw - 390px) / (1440 - 390)))), 60.77px);
}

.why-it-works .content-left {
    padding-right: min(max(0px, calc(0rem + (94 - 0) * ((100vw - 390px) / (1440 - 390)))), 94px);
    padding-left: min(max(0px, calc(0rem + (92 - 0) * ((100vw - 390px) / (1440 - 390)))), 92px);
}

.why-it-works .content-right {
    padding-right: min(max(0px, calc(0rem + (184 - 0) * ((100vw - 390px) / (1440 - 390)))), 184px);
}

.why-sos {
    padding: 96px 0 184px;
    position: relative;
    background: linear-gradient(290deg, rgba(93, 191, 140, 1) 0%, rgba(56, 133, 117, 1) 36%, rgba(19, 75, 95, 1) 100%);
}

.why-sos .container {
    position: relative;
    z-index: 1;
}

.why-sos:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url('../images/why-sos-background.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.why-sos h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 99px;
}

.list-reason {
    margin-top: 96px;
}

.list-reason .item {
    text-align: center;
}

.list-reason .item .image-border {
    content: '';
    background: #fff;
    display: block;
    width: 100%;
    height: 1px;
    margin: 32px 0;
}

.list-reason .item .image {
    background: #fff;
    padding: 26px;
    border-radius: 50%;
    height: 118px;
    width: 118px;
    display: inline-block;
}

.list-reason .item * {
    color: #fff;
}

.list-reason .item h6 {
    text-transform: uppercase;
    line-height: 28.32px;
    margin-bottom: 32px;
    font-weight: 600;
    font-family: var(--font-heading-primary);
}

.list-reason .item .content {
    padding: 0 41.5px;
    text-align: left;
}

.list-reason .item .content li {
    margin-bottom: 16px;
    line-height: 23px;
    letter-spacing: 0.01px;
}

.page-template-project-calculator ul li:before {
    display: none !important;
}

.list-reason .item ul {
    margin: 0;
}

.list-reason-container {
    position: relative;
}

.list-reason-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 42px;
    pointer-events: none;
    z-index: 2;
    left: 0;
}

.list-reason-navigation>div {
    pointer-events: auto !important;
    background: #fff;
    border-color: #fff;
}

.list-reason-navigation>div:hover {
    background: #65BAAB;
    border-color: #65BAAB;
}

.list-reason-navigation>div:hover svg path {
    stroke: #fff
}

.list-reason-navigation>div:before {
    display: none;
}

.list-reason-navigation svg {
    height: 15.98px;
}

.list-reason-navigation>.swiper-button-prev {
    left: 0;
}

.list-reason-navigation>.swiper-button-next {
    right: 0;
}

.list-reason .item .content li:last-child {
    margin-bottom: 0;
}

.project-calculator-form {
    padding: 80px 0 30px;
}

.project-calculator-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.project-calculator-form .container>.content {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.project-calculator-form .form-container {
    background-color: #428B8B;
    border-radius: 30px;
    padding: 64px 78px;
    overflow: hidden;
}

.project-calculator-form .form-container *:not(input, .wpcf7-not-valid-tip) {
    color: #fff;
}

.project-calculator-form .form-container .heading h5 {
    font-size: 30px;
    line-height: 35.4px;
    font-weight: 600;
    letter-spacing: normal;
    font-family: var(--font-heading-primary);
}

.project-calculator-form .form-container .heading>* {
    margin-bottom: 25px;
    display: block;
}

.project-calculator-form .form-container .heading {
    display: block;
    /* overflow: hidden; */
    border-bottom: 1px solid #fff;
    margin-bottom: 36px;
}

.project-calculator-form .form-top h4 {
    line-height: 28.32px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
    width: 100%;
    font-family: var(--font-heading-primary);
}

.project-calculator-form .form-fields {
    display: flex;
    column-gap: 40px;
    row-gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.project-calculator-form .form-fields>div {
    flex: 0 0 calc(((100% - 120px) / 4) - 3.4px);
    overflow: hidden;
}

.project-calculator-form .form-fields>div.bigger {
    flex: 0 0 calc(((100% - 120px) / 4) + 10px);
}

.project-calculator-form .form-fields .field {
    margin-bottom: 0;
}

.project-calculator-form .form-container label {
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0.01px;
    font-family: var(--font-body-text);
    font-weight: 400;
    margin-bottom: 6px;
}

.project-calculator-form .form-fields .icon {
    padding: 10.83px;
    border: 1.4px solid #fff;
    text-align: center;
    flex: 0 0 77px;
    height: 77px;
    border-radius: 50%;
}

.project-calculator-form .form-fields .item {
    display: flex;
    gap: 24px;
}

.project-calculator-form .form-bottom h6 {
    text-transform: uppercase;
    margin-bottom: 30px;
    line-height: 28.32px;
    font-family: var(--font-heading-primary);
    font-weight: 600;
}

.project-calculator-form .form-bottom .fields {
    display: flex;
    gap: 40px;
}

.project-calculator-form .form-bottom .field {
    margin-bottom: 0;
}

.project-calculator-form .form-bottom .field:last-child {
    flex: 0 0 46.53%;
}

.project-calculator-form .form-bottom {
    padding-bottom: 36px;
    border-bottom: 1.4px solid #fff;
}

.project-calculator-form .step-1 .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
}

.project-calculator-form .clear-form {
    text-decoration: underline;
    font-weight: 500;
}

.project-calculator-form .notices {
    margin-bottom: 30px;
}

.project-calculator-form .notices * {
    line-height: 23px;
    letter-spacing: 0.01px;
    font-size: 15px;
}

.project-calculator-form .notices *:last-child {
    margin-bottom: 0;
}

.project-calculator-form input {
    color: #282828 !important;
    border: none;
    padding: 12.5px 15px !important;
}

.project-calculator-form input::placeholder {
    color: #ababab
}

.project-calculator-form .form-container .heading.hide {
    display: none;
}

.project-calculator-form .form-container.step-2 {
    padding: 0;
}

.project-calculator-form .step-2 {
    display: flex;
}

.project-calculator-form .step-2 .col-left {
    flex: 0 0 48.006379585326953748006379585327%;
    padding: 66px 74px 65.95px 78px;
}

.project-calculator-form .step-2 .col-left h3 {
    letter-spacing: 0.05px;
    font-weight: 600;
    margin-bottom: 40px;
}

.project-calculator-form .result-top .number,
.project-calculator-form .result-bottom .number {
    font-size: 32px;
    font-weight: 600;
    line-height: 37.76px;
    letter-spacing: 0.05px;
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

.project-calculator-form .result-top .number .unit-sub {
    font-size: 26px;
    transform: translateY(-13px);
    display: inline-block;
    line-height: 26px;
}

.project-calculator-form .result-top>div {
    text-align: center;
}

.project-calculator-form .result-top {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    justify-content: center;
}

.project-calculator-form .result-top .text {
    letter-spacing: 0.01px;
}

.project-calculator-form .result-bottom {
    display: flex;
    flex-wrap: wrap;
    column-gap: 48px;
    row-gap: 40px;
    text-align: center;
}

.project-calculator-form .result-bottom>div {
    flex: 0 0 calc((100% - 96px) / 3);
    overflow: hidden;
}

.project-calculator-form .result-bottom .image {
    width: 117px;
    height: 117px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    padding: 16.59px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.project-calculator-form .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.project-calculator-form .col-right {
    position: relative;
    padding: 66px 48px;
}

.project-calculator-form .col-right>div:not(.background) {
    position: relative;
    z-index: 2;
}

.project-calculator-form .col-right .background img {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
}

.project-calculator-form .col-right .background:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(290deg, rgba(93, 191, 140, 1) 0%, rgba(54, 130, 116, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.project-calculator-form .col-right h3 {
    letter-spacing: 0.05px;
    margin-bottom: 40px;
}

.project-calculator-form .col-right .cost,
.project-calculator-form .col-right .carbon {
    margin-bottom: 40px;
    /* padding-bottom: 40px; */
}

.project-calculator-form .col-right .cost {
    border-bottom: 1px solid #fff;
    padding-bottom: 40px;
    display: none;
}

.project-calculator-form .col-right .number {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.project-calculator-form .col-right .label {
    margin-bottom: 5px;
    display: block;
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0.01px;
}

.project-calculator-form .col-right h3.label {
    margin-bottom: 40px;
}

.project-calculator-form .col-right .actions {
    display: flex;
    justify-content: space-between;
    margin-top: 57px;
    gap: 37px;
    flex-wrap: wrap;
}

.project-calculator-form .col-right .t-c {
    margin-top: 20px;
}

.project-calculator-form .col-right a.button.btn-primary.get-quote {
    background: #fff;
    color: #037580;
    border-color: #fff;
    width: auto;
    flex: 0 0 calc(100% - 37px - 175px);
}

.project-calculator-form .col-right a.button.btn-primary.get-quote:hover {
    background: #037580;
    color: #fff;
    border-color: #037580;
}

.project-calculator-form .col-right .equal {
    flex: 0 0 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.project-calculator-form .col-right .number .icon {
    width: 118px;
    height: 118px;
}

.project-calculator-form .col-right .number .icon svg {
    width: 100%;
    height: 100%;
}

.project-calculator-form .col-right .number h3 {
    margin-bottom: 5px;
}

.project-calculator-form .col-right .equal * {
    margin: 0 !important;
    fill: #fff;
}

.project-calculator-form .col-right .equal svg {
    width: 46px;
    height: 46px;
}

#project-calculator-modal {
    padding: min(max(40px, calc(2.5rem + (80 - 40) * ((100vw - 390px) / (1440 - 390)))), 80px) min(max(20px, calc(1.25rem + (80 - 20) * ((100vw - 390px) / (1440 - 390)))), 80px);
    background: #fff;
    border-radius: 30px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 741px;
    display: flex;
    flex-flow: column;
    text-align: center;
    gap: 25px;
}

#project-calculator-modal h6 {
    font-size: 26px;
    line-height: 33.5px;
    letter-spacing: normal;
    font-weight: 500;
    text-transform: capitalize;
    color: #037580;
}

#project-calculator-modal .actions {
    justify-items: center;
}

.calculator-form .wpcf7 form.sent .wpcf7-response-output {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}

.project-calculator-form .form-fields .field {
    flex: 1;
}

@media (min-width: 1280px) {
    .why-it-works .container {
        padding: 0;
    }

    .project-calculator-form .form-fields .square {
        order: 5;
    }

    .project-calculator-form .form-fields .monitor {
        order: 6;
    }

    .project-calculator-form .form-fields .cabinet {
        order: 7;
    }

    .project-calculator-form .form-fields .table {
        order: 8;
    }
}

@media (max-width: 1279px) {
    .project-calculator-form .form-bottom .field {
        flex: 0 0 calc((100% - 40px) / 2);
    }

    .project-calculator-form .form-bottom .field:last-child {
        flex: 0 0 100%;
    }

    .project-calculator-form .form-bottom .fields {
        flex-wrap: wrap;
    }

    .project-calculator-form .form-fields>div.bigger,
    .project-calculator-form .form-fields>div {
        flex: 0 0 calc((100% - 40px) / 2);
    }
}

@media (min-width: 768px) {
    .project-calculator-form .close-form-mobile {
        display: none;
    }
}

@media (max-width: 1223px) {
    .list-reason-container {
        padding: 0 62px;
    }
}

@media (max-width: 767px) {
    .why-sos {
        padding: 50px 0;
    }

    .list-reason .item .image-border {
        margin: 16px 0;
    }

    .list-reason .item h6 {
        margin-bottom: 16px;
    }

    .list-reason {
        margin-top: 40px;
    }

    .why-sos .container {
        padding: 0 12px;
    }

    .list-reason .item .content {
        padding: 0 15px;
    }

    .list-reason-navigation {
        top: 124.59px;
        transform: translateY(0);
    }

    .list-reason .item .image {
        width: 101.59px;
        height: 101.59px;
        padding: 23.25px
    }

    .why-it-works .vs {
        display: none;
    }

    .why-it-works .columns {
        flex-flow: column;
    }

    .why-it-works .column {
        flex: 0 0 100%;
    }

    .why-it-works .column:not(.active) {
        display: none;
    }

    .why-it-works {
        padding: 42px 0;
    }

    .why-it-works .columns {
        background: none;
    }

    .why-it-works .content-right,
    .why-it-works .content-left {
        margin-top: 40px;
    }

    .why-it-works .column>h3,
    .why-it-works h2 {
        margin-bottom: 40px;
    }

    .why-it-works .columns .content>h6,
    .why-it-works .columns .content>h6 * {
        line-height: 20.06px;
    }

    .why-it-works .content-right,
    .why-it-works .content-left {
        padding: 0;
    }

    .list-title-mobile {
        font-size: 17px;
        font-weight: 500;
        color: #037580;
        line-height: 35px;
        text-align: center;
        gap: 47px;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }

    .list-title-mobile span {
        padding: 6px 5px;
        cursor: pointer;
    }

    .list-title-mobile span:not(.active) {
        color: #7FB7BB;
    }

    #project-calculator-modal h6 {
        font-size: 18px;
    }

    .popup-modal-dismiss {
        width: 30;
        height: 30px;
        top: -34.22px;
        right: 0;
    }

    .project-calculator-form .form-container:not(.content-mobile) {
        position: fixed;
        top: 100vh;
        transition: top 0.4s ease-in-out;
        left: 0;
        z-index: 9999;
        height: calc(100vh - 93px);
        overflow: auto;
    }

    .project-calculator-form .form-container.show:not(.content-mobile) {
        top: 93px;
    }

    .project-calculator-form .form-container-overlay {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        width: 100vw;
        height: 100vh;
        z-index: 9998;
        opacity: 0;
        transition-duration: 0.4s;
    }

    .project-calculator-form .form-container-overlay.show {
        opacity: 1;
        pointer-events: none;
    }

    .project-calculator-form .form-container .heading>*,
    .project-calculator-form .form-container .heading {
        margin-bottom: 15px;
    }

    .project-calculator-form .form-container .heading h5 {
        font-size: 17px;
        line-height: 20.06px;
        letter-spacing: 0.05px;
    }

    .project-calculator-form .container>.content {
        margin-bottom: 40px;
    }

    .project-calculator-form {
        padding: 42px 0 43.05px;
    }

    .project-calculator-form .close-form-mobile {
        position: absolute;
        right: -39px;
        top: 0;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .project-calculator-form .heading-inner {
        position: relative;
    }

    .project-calculator-form .form-container:not(.content-mobile) .heading .content {
        display: none;
    }

    .project-calculator-form .form-container .heading {
        width: calc(100% - 28px);
    }

    .project-calculator-form .form-container.content-mobile .heading {
        width: 100%;
    }

    .project-calculator-form .form-container:not(.content-mobile) .heading {
        margin-bottom: 40px;
    }

    .project-calculator-form .form-container:not(.content-mobile) .heading>* {
        margin-bottom: 23.28px;
    }

    .project-calculator-form .form-fields {
        row-gap: 20px;
        column-gap: 20px;
        margin-bottom: 20px;
    }

    .project-calculator-form .form-fields>div.bigger,
    .project-calculator-form .form-fields>div {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .project-calculator-form .form-fields .field {
        flex: 0 0 100%;
    }

    .project-calculator-form .form-fields .icon {
        position: absolute;
        width: 39px;
        height: 39px;
        padding: 5.4px;
        top: 1px;
    }

    .project-calculator-form .form-container .form-fields>div:not(.bigger) label {
        font-size: 15px;
        line-height: 20.03px;
        padding: 9.485px 0;
        padding-left: 49px;
        align-content: center;
    }

    .project-calculator-form .form-fields .item {
        position: relative;
    }

    .project-calculator-form .form-container input {
        padding: 14.63px 20px;
    }

    .project-calculator-form .form-bottom .fields {
        gap: 20px;
    }

    .project-calculator-form .form-container label {
        font-size: 15px;
        line-height: 20.03px;
        letter-spacing: 0.01px;
    }

    .project-calculator-form .form-bottom {
        padding-bottom: 40px;
    }

    .project-calculator-form .notices * {
        font-size: 14px;
        line-height: 20px;
    }

    .project-calculator-form .form-bottom h6 {
        margin-bottom: 20px;
    }

    .project-calculator-form .form-top h4 {
        margin-bottom: 20px;
    }

    .project-calculator-form .form-top h4,
    .project-calculator-form .form-bottom h6 {
        font-size: 17px;
        line-height: 20.06px;
    }

    .project-calculator-form .step-2 .col-left {
        padding: 0 24px 20px;
    }

    .project-calculator-form .step-2 {
        flex-flow: column;
    }

    .project-calculator-form .result-bottom .image {
        height: 59px;
        width: 59px;
        border-width: 1px;
        justify-self: center;
        margin-bottom: 10px;
        padding: 8.3px;
    }

    .project-calculator-form .result-top .number,
    .project-calculator-form .result-bottom .number {
        font-size: 25px;
        line-height: 29.5px;
    }

    .project-calculator-form .result-bottom {
        column-gap: 31px;
    }

    .project-calculator-form .result-bottom>div {
        flex: 0 0 calc((100% - 62px) / 3);
    }

    .project-calculator-form .form-bottom .field {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .project-calculator-form .result-top {
        gap: 20px;
    }

    .project-calculator-form .result-top>div {
        flex: 0 0 50%;
    }

    .project-calculator-form .step-2 .col-left h3 {
        font-size: 17px;
        line-height: 20.06px;
    }

    .project-calculator-form .form-container.step-2 .heading {
        display: block;
        width: calc(100% - 48px - 28px);
        margin-left: 24px;
        margin-right: auto;
        padding-top: 28px;
    }

    .project-calculator-form .result-top .number .unit-sub {
        font-size: 20px;
        transform: translateY(-10px);
        line-height: 20px;
    }

    .project-calculator-form .col-right {
        padding: 20px 24px;
    }

    .project-calculator-form .col-right h3.label {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .project-calculator-form .col-right .number .icon {
        width: 58.5px;
        height: 59px;
    }

    .project-calculator-form .col-right .equal svg {
        width: 28.94px;
        height: 28.94px;
    }

    .project-calculator-form .col-right .equal h3 {
        font-size: 18px;
        line-height: 130%;
    }

    .project-calculator-form .col-right .equal .label {
        font-size: 14px;
        line-height: 23px;
        letter-spacing: 0.01px;
    }

    #project-calculator-modal .popup-modal-dismiss {
        top: -34px;
        right: -14px;
    }

    .project-calculator-form .form-container.content-mobile .button-spiral.right:not(.samedsk) .arrow {
        width: 84px;
        height: 42px;
        transform: translateX(-42px);
    }

    .project-calculator-form .form-container.content-mobile .button-spiral.right:not(.samedsk):hover .arrow {
        transform: translateX(0);
    }

    .project-calculator-form .form-container.content-mobile .arrow-link:not(.samedsk) .icon,
    .project-calculator-form .form-container.content-mobile .button-spiral:not(.samedsk) .arrow svg,
    .project-calculator-form .form-container.content-mobile .button-spiral svg {
        width: 42px;
        height: 42px;
    }

    .project-calculator-form .form-container {
        padding: 28px 24px;
    }
}

@media (max-width: 575px) {
    .why-it-works .column>h3 {
        text-align: left;
    }

    .project-calculator-form .col-right a.button.btn-primary.get-quote {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .project-calculator-form .col-right .actions {
        margin-top: 40px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
}