/* main block */
section .overlay{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 55%);
}
.text-after-title{
    max-width: 800px
}
.main-block .container{
    justify-content: flex-end;
    padding-bottom: var(--size-3)
}
/* end of main block */

/* focus */

section.focus{
    background-color: var(--gold);
    padding: var(--section-distance) 0
}
section.focus{
    position: relative
}
/* section.focus .container{
    background: url('../img/focus-bg.svg') no-repeat center;
    background-size: contain;
    padding: 30px 0
} */

section.focus h2{
    color: var(--white);
    max-width: 800px;
    text-align: center;
    margin: 0 auto
}
section.focus ul.focus{
    margin-top: var(--size-3);
    row-gap: var(--size-2)
}
ul.focus{
    display: flex;
    flex-wrap: wrap
}
ul.focus li{
    width: 50%;
    padding-right: 30px;
    padding-left: 64px;
    color: var(--white);
    font-size: 3.2rem;
    margin-top: 0 !important
}
ul.focus li:before{
    content: '';
    width: 16px;
    height: 16px;
    background-color: var(--white);
    position: absolute;
    left: 0;
    top: 20px
}

/* end of focus */

section.dev-cycle{
    padding: var(--section-distance) 0
}
.dev-cycle h2{
    max-width: 586px;
    text-align: center;
    color: var(--gold);
    margin: 0 auto
}

.steps{
    display: flex;
    justify-content: center;
    margin: 108px auto 90px;
    position: relative;
    width: 757px
}
.steps-item{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    /* max-width: 320px; */
    text-align: center;
    position: absolute
}
.steps-item img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--gold);
    object-fit: cover;
    /* margin-bottom: var(--size-1) */
}
.steps-item >div{
    width: 320px;
    position: absolute
}
.steps-item h3{
    line-height: 1.2;
    font-weight: 600;
    font-family: var(--main-font);
    color: var(--gold)
}
.steps-item p{
    margin-top: 4px;
    color: var(--gray)
}
.step-1{
    left: 0;
    top: -60px
}
.step-1 >div{
    right: 144px
}
.step-2{
    left: 462px;
    top: 135px;
    flex-direction: column-reverse
}
.step-2 >div{
    bottom: 144px
}
.step-3{
    left: 574px;
    top: 410px
}
.step-3 >div{
    left: 144px
}
.step-4{
    left: 27px;
    top: 665px
}
.step-4 >div{
    right: 144px
}
.step-5{
    left: 315px;
    top: 1020px
}
.step-5 >div{
    left: 144px
}

.pale-title{
    position: absolute;
    font-size: 200px;
    font-family: var(--title-font);
    opacity: 0.12;
    color: var(--gold);
    text-transform: uppercase;
    line-height: 1
}
.pale-title-1{
    left: -344px;
    top: 255px
}
.pale-title-2{
    top: 630px;
    left: 200px
}
.pale-title-3{
    top: 982px;
    left: -344px
}

.management-focus{
    background-color: var(--gold);
    margin-bottom: var(--section-distance)
}
.management-focus .container{
    position: relative;
    padding: var(--section-distance) 0
}
.management-focus .decor-1, .management-focus .decor-2{
    width: 84px;
    height: 100%;
    background: url('../img/decor.svg');
    background-size: 100%;
    position: absolute;
    top: 0
}
.management-focus .decor-1{
    left: -108px
}
.management-focus .decor-2{
    right: -108px
}
.management-focus h2{
    color: var(--white);
    text-align: center;
    max-width: 854px;
    width: calc(100% - 48px);
    margin: 0 auto
}
.management-focus__items{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-3);
    margin-top: var(--size-3)
}
.management-focus__item{
    width: 30%
}
.management-focus__item .title{
    display: flex;
    justify-content: center
}
.management-focus__item h3{
    font-family: var(--main-font);
    font-weight: 500;
    color: var(--white);
    max-width: 270px;
    text-align: center;
    line-height: 1.4;
    margin-left: -107px;
    margin-top: 55px
}
.management-focus__item p{
    text-align: center;
    color: var(--white)
}

@media all and (max-width: 768px) {
    .steps{
        width: 184px
    }
    .steps-item img{
        width: 70px;
        height: 70px;
        border: 3px solid var(--gold)
    }
    .steps-item >div{
        width: 200px
    }
    .steps-item h3{
        font-size: 2rem
    }
    .steps-item p{
        font-size: 1.6rem;
        margin-top: 4px!important
    }
    .step-1 {
        left: -35px;
        top: -35px;
        flex-direction: row
    }
    .step-1 >div {
        left: 82px;
        right: auto
    }
    .step-2{
        left: 132px;
        flex-direction: row-reverse
    }
    .step-2 >div{
        bottom: auto;
        right: 82px
    }
    .step-3 {
        left: -19px;
        top: 327px
    }
    .step-3 >div{
        left: 82px
    }
    .step-4 {
        left: 138px;
        top: 520px
    }
    .step-4 >div{
        right: 82px
    }
    .step-5 {
        left: -32px;
        top: 750px
    }
    .step-5 >div{
        left: 82px
    }
    .pale-title{
        font-size: 65px
    }
    .pale-title-1 {
        left: -85px;
        top: 238px
    }
    .pale-title-2 {
        top: 428px;
        left: 100px
    }
    .pale-title-3 {
        top: 625px;
        left: -85px
    }
    .management-focus__items{
        flex-direction: column;
        align-items: center;
        gap: var(--size-2);
        margin-top: var(--size-2)
    }
    .management-focus__item {
        width: 100%
    }
     .management-focus__item img{
        height: 55px
     }
     .management-focus__item h3{
        max-width: 180px;
        margin-left: -104px;
        margin-top: 21px
     }
}