/*==========================*/
/*      SERVICES - PAGE     */
/*==========================*/
.page-services__services-list {
    padding: 40px 0;
}

.page-services__column {
    display: flex;
    flex-direction: column;
    row-gap: 55px;
}

.page-services__row {
    display: flex;
}

.about-service__service-picture {
    flex: 0 0 440px;
    height: 270px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.about-service__service-picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-service__text {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.about-service__tags {
    /* display: flex; */
    display: block;
    display: none;
}

.about-service__tag-title {
    font-weight: 600;
    padding-right: 10px;
    align-self: center;
}

.about-service__tag-items {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.about-service__tag-items span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 130%;
    color: #f1a3b8;
    padding: 6px 12px;
    border-radius: 15px;
    border: 1px solid #e77a97;
}

.about-service__title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: 0.5px;
}

.about-service__discription {
    font-size: 1.25rem;
    line-height: 130%;
}

.about-service__btns {
    display: flex;
    column-gap: 30px;
}

.about-service__btns .btn {
    width: 170px;
}


@media (max-width: 967px) {
    .about-service__service-picture {
        flex: 0 0 300px;
        height: 180px;
    }

    .about-service__text {
        padding-left: 20px;
        row-gap: 10px;
    }

    .about-service__btns {
        padding-top: 20px;
    }

    .about-service__tags {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .about-service__tag-title {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    .page-services__row {
        flex-direction: column;
        row-gap: 20px;
    }

    .about-service__text {
        padding-left: 0px;
    }

    .about-service__tag-title {
        flex-basis: auto;
        flex-wrap: nowrap;
    }
}

@media (max-width: 440px) {
    .about-service__service-picture {
        flex: 1 1 200px;
        width: 100%;
    }

    .about-service__btns {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .about-service__btns .btn {
        width: 100%;
    }

    .about-service__tag-title {
        font-weight: 600;
        font-size: 0.75rem;
        padding-right: 10px;
        align-self: center;
    }

    .about-service__tag-items span {
        padding: 4px 8px;
        column-gap: 10px;
        font-size: 0.75rem;
    }
}




/*==========================*/
/*      SERVICE - PAGE      */
/*==========================*/

/*=======title-block========*/
.main__post-korustuv {
    padding-top: 100px;
}

.title-block__container {
    padding-bottom: 40px;
}

.title-block {
    padding-top: 100px;
    padding-bottom: 40px;
}

.title-block__body {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    padding: 100px 60px;
    position: relative;
}

.title-block__img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.title-block__img img {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.title-block__img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(66deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.title-block__content {
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    max-width: 600px;
    row-gap: 30px;
    position: relative;
    z-index: 5;
}

.title-block__title {
    font-family: "Merriweather", serif;
    color: #eff3f8;
    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    font-size: 3rem;
    letter-spacing: 2px;
    font-weight: 600;
    line-height: 110%;
    position: relative;
}

.title-block__discript {
    color: #eff3f8;
    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.25px;
    padding-bottom: 30px;
    position: relative;
}

.title-block__discript:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 1px;
    border-radius: 1px;
    background-color: #eff3f8;
}

@media (max-width: 667px) {
    .title-block__content {
        row-gap: 20px;
    }

    .title-block__body {
        padding: 80px 40px;
        padding-bottom: 60px;
    }

    .title-block__title {
        font-size: 2.5rem;
    }

    .title-block__discript {
        font-size: 1rem;
        padding-bottom: 20px;
    }
}

@media (max-width: 400px) {
    .title-block__body {
        padding: 80px 20px;
        padding-bottom: 60px;
    }

    .title-block__title {
        font-size: 2rem;
    }

    .title-block__btn {
        width: 100%;
    }

    .title-block__btn .btn {
        width: 100%;
    }
}

/*=====================
problem-block
=====================*/
.problem-block {
    padding-top: 40px;
    padding-bottom: 40px;
}

.problem__row {
    display: flex;
    border-radius: 20px;
    background: linear-gradient(90deg, #ca0538 0%, #21367f 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    padding: 50px 70px;
}

.problem__header {
    flex: 1 0 50%;
    padding-right: 40px;
}

.problem__title {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

.problem__title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 50%;
    border-radius: 1px;
    background-color: #fafcff;
}

.problem__title span {
    flex: 0 0 90px;
    height: 90px;
    background-image: url("/img/services/icon-problem.svg");
    background-position: center;
    background-repeat: no-repeat;
}

.problem__title p {
    padding-left: 20px;
    color: #fafcff;
    text-shadow: 1px 1px 2px 0px #f5f5f5;
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 110%;
}

.problem__subtitle {
    color: #fafcff;
    font-size: 1rem;
    line-height: 140%;
}

.problem__text {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    row-gap: 30px;
    column-gap: 30px;
}

.problem__text p {
    flex: 0 0 100%;
    padding-left: 10px;
    padding-right: 10px;
    color: #fafcff;
    line-height: 140%;
}

@media (max-width: 967px) {
    .problem__row {
        flex-direction: column;
        row-gap: 40px;
    }

    .problem__text p:not(:last-child) {
        margin-bottom: 10px;
    }
}

@media (max-width: 667px) {
    .problem-block {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .problem__row {
        padding: 30px 20px;
    }

    .problem__header {
        flex: 1 0 50%;
        padding-right: 0px;
    }
}

@media (max-width: 460px) {
    .problem__title span {
        flex: 0 0 60px;
        height: 60px;
        background-size: 100%;
    }

    .problem__title p {
        padding-left: 15px;
        font-size: 1.5rem;
    }

    .problem__text p {
        flex: 0 0 100%;
        row-gap: 20px;
    }
}

/*=====================
solution-block
=====================*/
.solution-block {
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (max-width: 667px) {
    .solution-block {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

.solution__row {
    display: flex;
    border-radius: 20px;
    background: linear-gradient(88deg, #06172d 0%, #068bc0 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    padding: 50px 70px;
}

.solution__header {
    flex: 1 0 50%;
    padding-right: 40px;
}

.solution__title {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

.solution__title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 50%;
    border-radius: 1px;
    background-color: #fafcff;
}

.solution__title span {
    flex: 0 0 90px;
    height: 90px;
    background-image: url("/img/services/icon-solution.svg");
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.solution__title p {
    padding-left: 10px;
    color: #fafcff;
    text-shadow: 1px 1px 2px 0px #f5f5f5;
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 110%;
}

.solution__subtitle {
    color: #fafcff;
    font-size: 1rem;
    line-height: 140%;
    margin-bottom: 40px;
}

.solution__btn {
    display: flex;
    justify-content: start;
}

.solution__text p {
    color: #fafcff;
    line-height: 140%;
    margin-bottom: 20px;
}

.solution__text-title {
    font-size: 1.25rem;
    letter-spacing: 0.2px;
    font-weight: 700;
    padding: 10px 0;
}


.solution__text p:not(:last-child) {
    margin-bottom: 20px;
}

@media (max-width: 967px) {
    .solution__row {
        flex-direction: column;
        row-gap: 40px;
    }

    .solution__text p:not(:last-child) {
        margin-bottom: 10px;
    }

    .solution__btn {
        display: flex;
        justify-content: end;
    }
}

@media (max-width: 667px) {
    .solution__row {
        padding: 30px 20px;
    }

    .solution__header {
        flex: 1 0 50%;
        padding-right: 0px;
    }
}

@media (max-width: 460px) {
    .solution__title span {
        flex: 0 0 60px;
        height: 60px;
        background-size: 100%;
    }

    .solution__title p {
        padding-left: 15px;
        font-size: 1.5rem;
    }
}