.custom-development-page .header img {
    max-width: 593px;
}

.custom-development-page .header h1 {
    font-size: 36px;
}

.custom-development-page .header .description-box p:first-child {
    font-weight: 700;
    font-family: Montserrat, sans-serif;
}

.custom-development-page .header .left-header .description-box {
    margin-top: 20px;
    width: 515px;
}

.key-competencies {
    margin-top: 65px;
    position: relative;
}

.key-competencies h2 {
    position: absolute;
    top: 127px;
    left: 348px;
    color: #FFF;
    text-align: center;
    font-family: Montserrat, system-ui;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    padding: 7px 30px;
    border-radius: 7px;
    background: linear-gradient(0deg, #FF4C4C 0%, #FF7F48 100%), #FFF;
    box-shadow: 2.326px 2.326px 11.63px 0 rgba(206, 206, 221, 0.50);
    margin: 0;
    z-index: 1;
}

.key-competencies:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: #FF4C4C;
    left: 50%;
}

.key-competencies:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    transform: rotate(180deg);
    background: linear-gradient(0deg, #FF4C4C 0%, #FF7F48 100%);
    left: 0;
    top: 50%;
}

.key-competencies .competencies-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 230px;
    grid-row-gap: 121px;
}

.key-competencies .competencies-item {
    border-radius: 7px;
    border: 1px solid #FF4C4C;
    box-shadow: 2.326px 2.326px 11.63px 0 rgba(206, 206, 221, 0.50);
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
}

.key-competencies .competencies-item span {
    color: #323232;
    font-family: Roboto, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-left: 79px;
    max-width: 345px;
}

.key-competencies .competencies-item img {
    position: absolute;
    top: 15px;
    left: 0;
}

.custom-tasks {
    margin-top: 72px;
}

.custom-tasks h2,
.development-directions h2 {
    margin: 0;
}

.custom-tasks-content {
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.tasks-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 30px;
}

.tasks-items div {
    display: flex;
    align-items: center;
    height: 64px;
    position: relative;
}

.tasks-items div img {
    position: absolute;
    top: 0;
    left: -11px;
}

.tasks-items div span {
    color: #323232;
    font-family: Roboto, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-left: 83px;
}

.tasks-items div:nth-child(1) span {
    max-width: 256px;
}

.tasks-items div:nth-child(2) span,
.tasks-items div:nth-child(3) span {
    max-width: 250px;
}

.custom-tasks-content .custom-tasks-main-img {
    max-width: 400px;
    margin-left: 39px;
}

.development-directions {
    margin-top: 52px;
}

.directions-content {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.directions-content .directions-item {
    border-radius: 20px;
    box-shadow: 4px 4px 20px 0 rgba(206, 206, 221, 0.50);
    display: flex;
    align-items: flex-start;
    padding: 30px;
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.directions-content .directions-item:before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border: 2px #D4D4D4 solid;
    border-radius: 50%;
    right: 30px;
    top: 30px;
}

.directions-content .directions-item h3,
.directions-content .directions-item span,
.directions-content .directions-item img {
  transition: all 0.3s ease;
}

.directions-content .directions-item:hover {
    background: #24335B;
}

.directions-content .directions-item:hover h3,
.directions-content .directions-item:hover span {
    color: #FFF;
}

.directions-content .directions-item:hover img {
    filter: brightness(0) invert(1);
}

.directions-content .directions-item:hover:before {
    border: unset;
    background: linear-gradient(38.78deg, #FF4D4D 9.28%, #FF7F48 85.91%);
    width: 19px;
    height: 19px;
}

.directions-content .directions-item:hover:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: #FFF;
    width: 11px;
    height: 11px;
    right: 34px;
    top: 34px;
}

.directions-content .directions-item h3 {
    color: #323232;
    font-family: Montserrat, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 10px;
}

.directions-content .directions-item span {
    color: #323232;
    font-family: Roboto, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.directions-content .directions-item div {
    margin-left: 30px;
    max-width: 395px;
}

.development-directions .contact-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}

.development-directions .contact-btn span {
    color: #323232;
    font-family: Roboto, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.development-directions .contact-btn .btn-container {
    width: 370px;
}

.development-directions .contact-btn .btn-container:hover {
    width: 370px;
    height: 48px;
}

.agora-choice {
    margin-top: 72px;
    position: relative;
}

.agora-choice h2 {
    position: absolute;
    font-size: 28px;
    margin: 0;
    max-width: 170px;
    text-align: center;
    top: 42%;
    left: 43%;
}

.agora-choice .agora-choice-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 384px;
    grid-row-gap: 48px;
}

.agora-choice .agora-choice-content:before {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: 2px solid #FF7F48;
    width: 300px;
    height: 300px;
    top: 137px;
    left: 433px;
}


.agora-choice .agora-choice-content:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: 2px solid #FF7F48;
    width: 370px;
    height: 370px;
    top: 103px;
    left: 399px;
    opacity: 0.5;
}

.agora-choice:before {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: 2px solid #FF7F48;
    width: 441px;
    height: 441px;
    top: 67px;
    left: 364px;
    opacity: 0.2;
}

.agora-choice-content .choice-item {
    border-radius: 20px;
    background: #F8F8F8;
    display: flex;
    padding: 20px;
    z-index: 1;
    position: relative;
}

.agora-choice-content .choice-item p {
    color: #323232;
    font-family: Montserrat, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin: 0 0 5px;
}

.agora-choice-content .choice-item span {
    color: #323232;
    font-family: Roboto, system-ui;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.agora-choice-content .choice-item div {
    max-width: 276px;
}

.agora-choice-content .choice-item img {
    max-width: 74px;
    position: absolute;
    right: 11px;
    top: 20px;
}

.technology-link-block {
    margin-top: 72px;
    border-radius: 10px;
    background: #24335B;
    display: flex;
    align-items: center;
    padding: 15px 52px;
}

.technology-link-block img {
    margin-right: 42px;
}

.technology-link-block p {
    color: #FFF;
    font-family: Montserrat, system-ui;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.technology-link-block a {
    color: #FF7C1F;
    text-decoration: underline;
}

.custom-development-page .main-reviews {
    margin-top: 70px;
}

.case-example-block {
    margin: 72px auto 0;
}

.case-example-block h2 {
    font-size: 25px;
    margin: 0;
}

.case-example-block .case-example-slider {
    margin-top: 31px;
}

.custom-development-page .vk-style-btn {
    position: absolute;
}

.agora-choice-image {
    display: none;
}

@media screen and (max-width: 1230px) {
    .custom-development-page .header {
        margin-top: 65px;
    }
    .custom-development-page .header h1 {
        font-size: 28px;
    }
    .custom-development-page .header .left-header {
        margin-top: 54px;
    }
    .custom-development-page .header .left-header .description-box {
        width: 100%;
    }
    .custom-development-page .header .description-box p {
        margin: 0;
    }
    .custom-development-page .header .description-box p:first-child {
        margin-bottom: 20px;
    }
    .key-competencies .competencies-content {
        grid-column-gap: 22px;
        grid-row-gap: 132px;
    }
    .key-competencies h2 {
        top: 154px;
        left: 87px;
        padding: 7px 102px;
        font-size: 22px;
    }
    .custom-tasks {
        margin-top: 68px;
    }
    .custom-tasks h2,
    .development-directions h2 {
        font-size: 22px!important;
    }
    .custom-tasks-content {
        margin-top: 28px;
        flex-direction: column-reverse;
    }
    .custom-tasks-content .custom-tasks-main-img {
        margin: 0 0 32px;
    }
    .tasks-items div span {
        max-width: 259px;
    }
    .tasks-items {
        grid-column-gap: 52px;
    }
    .development-directions {
        margin-top: 71px;
    }
    .directions-content {
        grid-template-columns: 1fr;
    }
    .directions-content .directions-item div {
        margin-left: 34px;
        max-width: 77%;
    }
    .development-directions .contact-btn {
        margin-top: 54px;
    }
    .development-directions .contact-btn span {
        max-width: 361px;
    }
    .agora-choice {
        margin-top: 188px;
    }
    .agora-choice .agora-choice-content {
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 22px;
        grid-row-gap: 150px;
    }
    .agora-choice-content .choice-item {
        max-height: 278px;
    }
    .agora-choice-content .choice-item div {
        max-width: 192px;
        margin-top: 73px;
    }
    .agora-choice-content .choice-item img {
        right: unset;
        left: 11px;
    }
    .agora-choice-content .choice-item:nth-child(3) {
        margin-top: -110px;
    }
    .agora-choice-content .choice-item:nth-child(4) {
        margin-top: 110px;
    }
    .agora-choice:before {
        top: 172px;
        left: 149px;
    }
    .agora-choice .agora-choice-content:after {
        top: 207px;
        left: 184px;
    }
    .agora-choice .agora-choice-content:before {
        top: 241px;
        left: 218px;
    }
    .agora-choice h2 {
        font-size: 25px;
        top: 42%;
        left: 39%;
    }
    .case-example-block {
        margin: 68px auto 0;
    }
    .case-example-block h2 {
        font-size: 22px!important;
        line-height: 150%!important;
        max-width: 677px;
    }
    .directions-content .directions-item:nth-child(3) {
        grid-row: 2;
    }
    .directions-content .directions-item:nth-child(5) {
        grid-row: 3;
    }
    .directions-content .directions-item:nth-child(7) {
        grid-row: 4;
    }
    .agora-choice-content .choice-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }
    .agora-choice-content .choice-item:nth-child(5) {
        grid-column: 3;
        grid-row: 1;
    }
}

@media screen and (max-width: 767px) {
    .container.custom-development-page {
        max-width: 100%;
        padding: 0;
    }
    .custom-development-page .header img {
        max-width: 100%;
    }
    .custom-development-page .header .right-header {
        margin: 0;
    }
    .custom-development-page .header {
        margin-top: 47px;
    }
    .custom-development-page .header .left-header {
        margin-top: 27px;
    }
    .key-competencies {
        max-width: 325px;
        margin: 65px auto 0;
    }
    .custom-tasks {
        max-width: 325px;
        margin: 56px auto 0;
    }
    .development-directions {
        max-width: 325px;
        margin: 48px auto 0;
    }
    .key-competencies h2 {
        font-size: 22px!important;
        position: relative;
        top: unset;
        left: unset;
        padding: 24px 35px;
        line-height: 150% !important;
    }
    .key-competencies:after {
        content: unset;
    }
    .key-competencies .competencies-content {
        grid-template-columns: 1fr;
        grid-row-gap: 23px;
        margin-top: 23px;
    }
    .key-competencies .competencies-item {
        background: #FFF;
    }
    .custom-tasks {
        margin-top: 56px;
    }
    .custom-tasks-content {
        margin-top: 26px;
    }
    .custom-tasks-content .custom-tasks-main-img {
        margin: 0 0 18px;
        max-width: 100%;
    }
    .tasks-items {
        grid-template-columns: 1fr;
    }
    .tasks-items div span {
        max-width: 100%;
        grid-column-gap: 20px;
    }
    .tasks-items div:nth-child(3) {
        grid-row: 2;
    }
    .development-directions {
        margin-top: 48px;
    }
    .development-directions h2  {
        max-width: 275px;
        line-height: 150%;
    }
    .directions-content {
        margin-top: 20px;
        grid-row-gap: 20px;
    }
    .directions-content .directions-item {
        flex-direction: column;
        align-items: center;
    }
    .directions-content .directions-item div {
        max-width: 100%;
        margin: 30px 0 0;
        text-align: center;
    }
    .development-directions .contact-btn {
        margin-top: 36px;
        flex-direction: column;
    }
    .development-directions .contact-btn .btn-container,
    .development-directions .contact-btn .btn-container:hover,
    .development-directions .contact-btn span {
        width: 100%;
    }
    .development-directions .contact-btn span {
        margin-bottom: 15px;
        text-align: center;
    }
    .agora-choice {
        margin-top: 67px;
    }
    .agora-choice .agora-choice-content {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .agora-choice-content .choice-item {
        max-height: 100%;
    }
    .agora-choice-content .choice-item:nth-child(3),
    .agora-choice-content .choice-item:nth-child(4) {
        margin-top: 0;
    }
    .agora-choice-content .choice-item div {
        max-width: 100%;
        margin: 0 0 0 74px;
    }
    .agora-choice:before {
        content: unset;
    }
    .agora-choice .agora-choice-content:before {
        content: unset;
    }
    .agora-choice .agora-choice-content:after {
        content: unset;
    }
    .agora-choice h2 {
        font-size: 28px !important;
        line-height: 150% !important;
        top: unset;
        left: unset;
        margin: 0 auto 0;
        position: relative;
        opacity: 0;
        height: 0;
    }
    .agora-choice .agora-choice-content {
        max-width: 325px;
        margin: -126px auto 0;
    }
    .agora-choice-image {
        display: block;
        width: 100%;
    }

    .custom-development-page .contact-form {
        margin-top: 68px;
    }
    .technology-link-block {
        max-width: 265px;
        margin: 68px auto 0;
        flex-direction: column;
        align-items: center;
        padding: 30px;
    }
    .technology-link-block img {
        max-width: 106px;
        margin: 0 0 30px;
    }
    .technology-link-block p {
        margin: 0;
        line-height: 150%;
    }
    .custom-development-page .case-example-slider {
        margin-top: 32px;
    }
    .case-example-block h2 {
        margin: auto;
        max-width: 325px;
    }
    .custom-development-page .agora-articles {
        margin-bottom: 70px;
    }
    .agora-choice-content .choice-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }
    .agora-choice-content .choice-item:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
    }
    .custom-development-page .main-reviews .slick-prev,
    .custom-development-page .main-reviews .slick-next {
        top: -107px;
    }
    .custom-development-page .main-reviews-title h2 {
        font-size: 22px !important;
    }
    .directions-content .directions-item:nth-child(1) h3 {
        max-width: 195px;
        margin: 0 auto 10px;
    }
}