.prices-start__holder {
    padding: 40px 0;
    background: var(--primary-color);
}

.prices-start {
    display: flex;
    gap: 20px;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    @media (width <= 768px) {
        flex-wrap: wrap;
        padding: 20px;
    }
}

.prices-start__text {
    max-width: 545px;
    flex-shrink: 0;
    & h1 {
        font: 700 40px/49px var(--primary-font);
    }
    & ul {
        font: 600 18px/27px var(--primary-font);
        margin: 15px 15px 15px 30px;
    }
    @media (width <= 768px) {
        flex-shrink: 1;
        & h1 {
            font-size: 24px;
            line-height: 30px;
        }
    }
}

.prices-start__btn {
    color: #fff;
    font: 700 13px/40px var(--primary-font);
    background: var(--primary-color);
    padding: 0 38px;
    margin-top: 15px;
    &:hover {
        background: var(--secondary-color);
    }
    @media (width <= 768px) {
        width: 100%;
    }
}

.prices-start__image {
    margin-left: auto;
}

.before-calc__holder {
    padding: 40px 0;
    @media (width <= 768px) {
        padding-bottom: 0;
    }
}

.before-calc__title {
    height: auto;
    @media (width <= 768px) {
        font-size: 18px;
        line-height: 25px;
        padding: 20px 70px 20px 20px;
        background-image: none !important;
        &.big {
            font-size: 24px;
            line-height: 30px;
            padding: 30px 20px;
        }
    }   
}

.before-calc__text {
    @media (width <= 768px) {
        padding: 20px 25px;
    }   
}


.before-calc__btn {
    font: 700 13px/40px var(--primary-font);
    padding: 0 38px;
    margin-top: 15px;
}

#fense_calc {
    padding-top: 0;
    padding-bottom: 0;
}

#fense_calc .before-calc__text {
    padding: 0;
    background: none;
    border-radius: 0;
    @media (width <= 768px) {
        padding: 0 20px;
    }   
}

.prices-why__holder {
    padding: 40px 0;
    background: #fff;
    @media (width <= 768px) {
        padding-top: 0;
        & h2 {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}

.prices-why {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
    @media (width <= 768px) {
        grid-template-columns: 100%;
    }
}

.prices-why__item {
    display: flex;
    gap: 30px;
    padding: 20px 30px 40px 30px;
    background: var(--bg-block);
    border-radius: 10px;
    & .icon {
        width: 50px;
        flex-shrink: 0;
    }
    & .title {
        font: 700 20px/24px var(--primary-font);
        margin-bottom: 15px;
        padding-top: 10px;
    }
    & .text {
        font: 400 16px/21px var(--primary-font);
    }
    @media (width <= 768px) {
        padding: 20px 20px 30px 20px;
        & .title {
            font-size: 18px;
            line-height: 21px;
            white-space: nowrap;
        }
        & .text {
            font-size: 14px;
            line-height: 20px;
        }
    }
}

.prices {
    @media (width <= 768px) {
        & .container {
            padding: 0;
        }
    }
}

.prices__holder {
    padding: 15px 60px 40px 60px;
    background: var(--bg-block);
    border-radius: 20px;
    & .ext-service {
        margin: 40px 0;
    }
    @media (width <= 768px) {
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 0;
        & .ext-service {
            width: 75%;
            margin: 15px 20px;
        }
    }
}

.prices__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    & h2 {
        margin-top: 25px;
    }
    @media (width <= 768px) {
        align-items: end;
    }
}

.price-legend {
    height: 114px;
    display: flex;
    align-items: end;
    margin-right: 50px;
    background-image: url(/zaboroff/images/title-man.webp);
    background-repeat: no-repeat;
    background-position: 30px;
    background-size: 120px;
    padding-bottom: 5px;
    & span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        font: 700 12px/32px var(--primary-font);
        color: #fff;
        background: var(--green-color);
        border-radius: 6px;
    }
    @media (width <= 768px) {
        margin-right: 0;
    }
}

.prices__table {
    padding: 40px 50px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    & .title-holder {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 10px 0;
        & h3 {
            margin: 0;
        }
    }
    & .fense-price tbody tr {
        border: none;
    }
    & .fense-price tbody tr.bg-gray {
        background: var(--bg-block);
    }
    @media (width <= 768px) {
        padding: 20px;
        & .title-holder {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}

.prices__table-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    @media (width <= 768px) {
        grid-template-columns: 100%;
    }
}
