.calculator-wrapper {
    padding-top: 53px;
    padding-bottom: 0;
}

.calculator-main {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    background-image: url(../svg/home-about-bg.svg);
    padding: 47px 0 100px;
}

.calculator-heading {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    margin-bottom: 60px;
}

.calculator-block {
    display: flex;
    align-items: center;
    gap: 56px;
}

.calculator-block .text {
    position: relative;
}

.calculator-block .text:before {
    content: '';
    width: 59px;
    height: 98px;
    display: block;
    background-color: var(--sky);
    box-shadow: 0px 3px 0px 0px #7b9fbf, 0px 3px 0px 0px #eaf5ff inset, 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
    position: absolute;
    top: 0;
    right: -86px;
}

.calculator-block .title {
    text-align: left;
    margin-bottom: 48px;
    position: relative;
}

.calculator-block .title:after {
    content: '';
    width: 100px;
    height: 1px;
    background-color: #002240;
    position: absolute;
    bottom: -23px;
    left: 0;
}

.calculator-block img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    max-width: 580px;
    max-height: 380px;
    box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    border: 1px solid #B5BBBF;
}

.calculator {
    background-color: #EFF4F8;
    padding: 60px 0;
    width: 100%;
}

.calculator .title {
    text-align: left;
}

.calculation-breakdown {
    width: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-image: url('../svg/services-bg.svg');
    padding: 100px 0 0;
}

.calculation-breakdown .content {
    max-width: 727px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.calculation-breakdown .title {
    text-align: left;
}

.calculation-breakdown .description {
    font-size: 14px;
    font-weight: 300;
    line-height: 16.8px;
}

.calculation-breakdown .text {
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
}

.calculation-breakdown .list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calculation-breakdown .list {
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
}

.calculation-breakdown .list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 380px;
    width: 100%;
}

.calculation-breakdown .list .item:nth-child(2) {
    font-weight: 500;
}

.calculator-item {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 960px;
    width: 100%;
    margin: 38px 0;
}

.calculator-item .left,
.calculator-item .right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
}

.calculator-item .group {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #FFFFFF;
    border-radius: 10px;
}

.calculator-item .group label {
    position: absolute;
    top: 7px;
    left: 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #D99E63;
}

.calculator-item input, .calculator-item select, .calculator-item button {
    padding: 24px 30px 10px 30px;
    border-radius: 10px;
    color: #373737;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    width: 100%;
}

.calculator-item input:disabled {
    -webkit-text-fill-color: #373737;
    opacity: 1; /* required on iOS */
}

.calculator-item select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.calculator-item input::placeholder {
    color: rgba(0, 0, 0, .2);
}

.calculator-item span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
    display: block;
    font-size: 24px;
    font-weight: 300;
    height: fit-content;
}

.add_question {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media screen and (max-width: 992px) {
    .calculator-block img {
        max-width: 400px;
        max-height: 280px;
    }
}

@media screen and (max-width: 768px) {
    .calculator-main {
        padding: 47px 0 50px;
        background-size: cover;
    }

    .calculator-heading {
        margin-bottom: 30px;
    }

    .calculator-wrapper .title {
        font-size: 20px;
    }

    .calculator-block {
        flex-direction: column-reverse;
    }

    .calculator-block img {
        max-width: 100%;
    }

    .calculator-block .text:before {
        width: 33px;
        height: 50px;
        top: -79px;
        left: 0;
    }

    .calculator-item {
        flex-direction: column;
        gap: 28px;
    }

    .calculator-item .left, .calculator-item .right {
        width: 100%;
        gap: 28px;
    }

    .calculator-item input, .calculator-item select, .calculator-item button {
        padding: 22px 30px 2px 30px;
        border-radius: 10px;
        color: #373737;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        width: 100%;
    }

    .calculator-item span {
        font-size: 16px;
    }

    .calculator-item .description {
        font-size: 12px;
        font-weight: 300;
    }

    .calculator {
        padding: 30px 0;
    }

    .calculation-breakdown {
        padding: 50px 0 0;
    }

    .calculation-breakdown .list,
    .calculation-breakdown .text {
        font-size: 14px;
    }

    .add_question {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}