@font-face {
  font-family: "Stengazeta";
  src: url("../../fonts/koop/Stengazeta-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.page-cases {
    padding-top: 74px;
    margin-bottom: 60px;
    min-height: 60vh;
}

.page-cases .container, .footer .container {
    max-width: 1320px;
}

.footer .logo__img {
    height: 26px;
}

.footer__logo {
    margin-bottom: 4px;
}

.footer {
    padding-top: 32px;
}

.page-cases__content {
    margin-bottom: 48px;
}

.page-cases__title {
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    color: #16181E;
    margin-bottom: 20px;
}

.case-item {
    display: flex;
    flex-direction: column;
}

.case-item__image-wrapper {
    width: 100%;
    background-color: #F6F6F6;
    border-radius: 16px;
    overflow: hidden;
    padding: 20px 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.case-item__image {
    width: 100%;
    height: 240px;
    object-fit: contain;
}

.case-item__title {
    margin-bottom: 4px;
    font-family: Inter;
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #16181E;
}

.case-item__content {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    margin-bottom: 12px;
    color: #2F333F;
}

.case-item__link {
    display: flex;
    padding: 14px 42px 14px 20px;
    border-radius: 50px;
    border: 1px solid #1928F0;
    color: #1928F0;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.56164 2.16051L8.17863 2.54352C8.08244 2.63971 8.08245 2.79565 8.17863 2.89183L11.7699 6.48296H0.593943C0.457923 6.48296 0.347656 6.59322 0.347656 6.72924V7.27101C0.347656 7.40703 0.457923 7.5173 0.593943 7.5173H11.7699L8.17862 11.1086C8.08244 11.2047 8.08244 11.3607 8.17862 11.4569L8.56164 11.8399C8.65782 11.936 8.81376 11.936 8.90994 11.8399L13.5755 7.17428C13.6717 7.0781 13.6717 6.92216 13.5755 6.82598L8.90994 2.16051C8.81376 2.06433 8.65782 2.06433 8.56164 2.16051Z' fill='%231928F0'/%3E%3C/svg%3E%0A");
    background-size: 14px;
    background-position: right 20px center;
    background-repeat: no-repeat;
    width: fit-content;
    transition: all 0.3s ease;
}

.case-item__link:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0101 2.7778L10.5176 3.27025C10.3939 3.39391 10.3939 3.59441 10.5176 3.71807L15.1349 8.33523H0.765873C0.59099 8.33523 0.449219 8.477 0.449219 8.65188V9.34844C0.449219 9.52333 0.59099 9.6651 0.765873 9.6651H15.1349L10.5176 14.2824C10.3939 14.4061 10.3939 14.6066 10.5176 14.7302L11.01 15.2227C11.1337 15.3463 11.3342 15.3463 11.4579 15.2227L17.4565 9.22407C17.5801 9.10041 17.5801 8.89992 17.4565 8.77626L11.4579 2.7778C11.3342 2.65414 11.1337 2.65414 11.0101 2.7778Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: 14px;
    background-position: right 20px center;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #1928F0;
}

.cases-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-single {
    padding-top: 74px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.case-title {
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0%;
    color: #16181E;
    margin-bottom: 16px;
}

.case-image-wrapper {
    background-color: #F6F6F6;
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 12px 28px;
}

.case-image {
    width: 100%;
    height: 216px;
    object-fit: contain;
}

.case-content p {
    margin-bottom: 12px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F;
}

.case-content h2 {
    font-family: Inter;
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #16181E;
    margin-bottom: 4px;
}

.case-content ol {
    margin-bottom: 12px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F;
    margin-left: 20px;
}

.case-content ol ul {
    list-style: disc;
    margin-left: 0;
}

.case-content ul {
    margin-bottom: 12px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F;
    margin-left: 20px;
    list-style: disc;
}

.case-content li {
    margin-bottom: 4px;
}

.case-content .wp-block-gallery {
    margin-top: 12px;
    flex-direction: column;
    gap: 16px !important;
}

.case-content .wp-block-gallery + p {
    margin-top: 12px;
    margin-bottom: 16px;
}

.case-content .wp-block-gallery .wp-block-image {
    width: 100% !important;
}

.case-content .wp-block-gallery .wp-block-image:last-child {
    margin-bottom: 0 !important;
}

.case-content .wp-element-caption {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px !important;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F !important;
    margin-top: 12px !important;
    background: transparent !important;
    position: relative !important;
    text-shadow: none !important;
    padding: 0 !important;
    text-align: left !important;
    scrollbar-gutter: auto !important;
}

.case-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    display: none;
}

.case-review {
    margin-top: 40px;
    padding: 20px 16px;
    border-radius: 16px;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-review__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-review__position {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-review__text {
    font-family: Inter;
    font-weight: 400;
    font-style: Italic;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #16181E;
}

.case-review__autor {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #16181E;
}

.case-review__company {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F;
}

.case-review__photo {
    width: 100%;
    border-radius: 16px;
}

.cases-reviews {
    margin-right: -16px;
}

.cases-reviews__container {
    padding-right: 16px;
}

.cases-reviews__title {
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    color: #16181E;
    margin-bottom: 20px;
}

.cases-reviews__arrows, .cases-related__arrows {
    display: none;
}

.cases-reviews__wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: fit-content;
}

.cases-reviews__container {
    width: 100%;
    overflow-x: auto;
}

.cases-reviews__item {
    width: 284px;
    min-width: 284px;
    background-color: #F6F6F6;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 16px 24px 16px;
    position: relative;
    overflow: hidden;
    gap: 35px;
}

.cases-reviews__icon {
    width: 66px;
    height: 66px;
    position: absolute;
    top: -18px;
    left: 10px;
    background: url('../img/icon_review.svg') 50% 50% no-repeat;
    background-size: contain;
}

.cases-reviews__text {
    font-family: Inter;
    font-weight: 400;
    font-style: Italic;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #16181E;
}

.cases-reviews__name {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0%;
    color: #16181E; 
    margin-bottom: 4px;
}

.cases-reviews__position {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    color: #2F333F;
}

.case-pagination-wrapper {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    position: relative;
}

.case-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.case-pagination__prev, .case-pagination__next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.case-pagination__prev--disabled, .case-pagination__next--disabled {
    cursor: default;
    opacity: .38;
}

.case-pagination__prev:hover svg path, .case-pagination__next:hover svg path {
    fill: #1928F0;
}

.case-pagination__prev.case-pagination__prev--disabled:hover svg path, .case-pagination__next.case-pagination__next--disabled:hover svg path {
    fill: #16181E;
}

.case-pagination__current {
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #1928F0;
    border-radius: 50%;
    display: flex;
    cursor: default;
    align-items: center;
    justify-content: center;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0px;
    text-align: center;

}

.case-pagination__page {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0px;
    text-align: center;
    color: #222222;
}

.case-pagination__page:hover {
    color: #1928F0;
}

.case-pagination-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-pagination-select span {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    font-variant-numeric-figure: lining-nums;
    font-variant-numeric-spacing: proportional-nums;
    color: #222222;
}

.case-pagination__select {
    padding: 10px 8px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    height: 40px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #222222;
}

.case-single {
    margin-bottom: 60px;
}

.page-cases__banner {
    background-color: #273C4F;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.page-cases__banner-image {
    width: 268px;
    margin-bottom: 24px;
    height: auto;
}

.page-cases__banner-title {
    font-family: Stengazeta;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.page-cases__banner-link {
    font-family: Stengazeta;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #273C4F;
    background-color: #fff;
    width: 100%;
    display: block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.case-article {
    margin-bottom: 40px;
}

.page-cases__sidebar .case-image-wrapper {
    display: none;
}

.related-cases > h2 {
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0%;
    color: #16181E;
    margin-bottom: 24px;
}

.related-cases__wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    width: fit-content;
}

.related-cases__container {
    overflow: auto;
    position: relative;
    margin-right: -16px;
}

.related-cases__item {
    width: 270px;
    min-width: 270px;
    position: relative;
    padding-bottom: 44px;
}

.related-cases {
    margin-bottom: 40px;
}

.related-cases__link {
    position: absolute;
    bottom: 0;
}


.header--blog .header__logo {
    height: 24px;
    position: relative;
    z-index: 2;
}

.header--blog .logo__img {
    height: 24px;
    width: auto;
}

.header--blog {
    top: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #C0C8D2;
    max-width: 1320px;
    margin: 0 auto;
}

.header--blog .menu-toggle {
    width: 49px;
    z-index: 2;
}

.header--blog .menu-toggle div {
    width: 21px;
    left: 14px;
}

.header-fixed .header--blog {
    padding: 14px 16px;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    background-color: #F6F6F6;
    border-radius: 16px;
}

@media (min-width: 768px) {
    .header--blog .menu-toggle {
        width: 32px;
    }

    .header--blog .menu-toggle div {
        left: 0;
        width: 28px;
    }

    .header--blog {
        left: 32px;
        right: 32px;
        width: calc(100% - 64px);
    }

    .footer {
        padding-top: 40px;
    }

    .page-cases__title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .case-pagination-select {
        position: absolute;
        right: 0;
    }

    .page-cases__content {
        margin-bottom: 60px;
    }

    .page-cases {
        margin-bottom: 80px;
        padding-top: 84px;
    }

    .case-item__image-wrapper {
        padding: 20px 11px;
    }

    .case-item__image {
        height: 280px;
    }

    .case-item__title {
        font-size: 20px;
    }

    .case-item__content {
        font-size: 16px;
    }

    .case-item__link {
        font-size: 16px;
        padding: 16px 54px 16px 24px;
        background-size: 18px;
    }

    .case-item__link:hover {
        background-size: 18px;
    }

    .case-item {
        width: calc(50% - 8px);
    }

    .cases-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px 16px;
    }

    .case-single {
        padding-top: 85px;
        margin-bottom: 80px;
    }

    .case-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .case-image-wrapper {
        padding: 12px;
    }

    .case-image {
        height: 336px;
    }

    .case-content h2, .case-content p {
        font-size: 18px;
    }

    .wp-block-gallery.has-nested-images figure.wp-block-image {
        width: calc(50% - 8px) !important;
    }

    .case-content .wp-block-gallery {
        flex-direction: row;
        gap: 16px !important;
    }

    .case-content .wp-element-caption {
        font-size: 18px !important;
    }

    .case-review__icon {
        width: 72px;
        height: 72px;
    }

    .case-review__icon svg {
        width: 100%;
        height: 100%;
    }

    .case-review {
        padding: 28px 40px;
    }

    .case-review__content {
        gap: 30px;
    }

    .case-review__text {
        font-size: 20px;
    }

    .case-review__autor, .case-review__company {
        font-size: 18px;
    }

    .case-review__photo {
        height: 420px;
        object-fit: cover;
        object-position: top;
    }

    .cases-reviews__title {
        margin-bottom: 24px;
        font-size: 28px;
    }

    .cases-reviews__item {
        width: 480px;
        min-width: 480px;
        padding: 72px 30px 32px 30px;
        gap: 28px;
    }

    .cases-reviews__icon {
        width: 90px;
        height: 90px;
        top: -26px;
        left: 12px;
    }

    .cases-reviews__text {
        font-size: 20px;
    }

    .cases-reviews__name, .cases-reviews__position {
        font-size: 16px;
    }

    .cases-reviews {
        margin-right: -32px;
    }

    .cases-reviews__container {
        padding-right: 32px;
    }

    .case-review {
        margin-top: 60px;
    }

    .page-cases__banner-image {
        width: 313px;
    }

    .page-cases__banner-title {
        font-size: 30px;
    }

    .related-cases > h2 {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .related-cases {
        margin-bottom: 60px;
    }

    .related-cases__container {
        margin-right: -32px;
    }

    .related-cases__wrapper {
        gap: 20px;
    }

    .related-cases__item {
        width: 416px;
        padding-bottom: 50px;
    }

    figure.wp-block-gallery.has-nested-images {
        flex-wrap: nowrap;
        position: relative;
    }

    .wp-block-gallery.has-nested-images figure.wp-block-image {
        position: static !important;
    }

    .case-content .wp-element-caption {
        bottom: 0;
        left: 0;
        min-height: 60px;
        height: 30px;
        max-height: 60px !important;
    }
}

@media (min-width: 1280px){
    .cases-container {
        gap: 30px 20px;
    }

    .case-item {
        width: calc((100% / 3) - (40px / 3));
    }
    
    .cases-reviews {
        margin-right: 0;
    }

    .page-cases {
        padding-top: 100px;
        margin-bottom: 100px;
    }

    .page-cases__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .page-cases__content {
        margin-bottom: 80px;
    }

    .cases-reviews__title {
        font-size: 32px;
        margin-bottom: 40px;
        height: 42px;
    }

    .cases-reviews__wrapper {
        gap: 20px;
        transition: all 0.3s ease;
    }

    .cases-reviews__item {
        width: calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    .cases-reviews__container {
        padding-right: 0;
        overflow: hidden;
        position: relative;
    }

    .cases-reviews {
        position: relative;
    }

    .cases-reviews__text {
        font-size: 18px;
    }

    .cases-reviews__arrows, .cases-related__arrows {
        display: block;
        position: absolute;
        top: calc(50% - 24px + 41px);
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .cases-related__arrows {
        top: 179px;
    }

    .cases-related__arrows-hidden, .cases-reviews__arrows-hidden {
        display: none !important;
        visibility: hidden !important;
    }

    .cases-reviews__arrow, .cases-related__arrow {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #F6F6F6;
        position: absolute;
        cursor: pointer;
    }

    .cases-reviews__arrow-left, .cases-related__arrow-left {
        left: -20px;
    }

    .cases-reviews__arrow-right, .cases-related__arrow-right {
        right: -20px;
    }

    .cases-reviews__container:hover .cases-reviews__arrows, .related-cases:hover .cases-related__arrows {
        opacity: 1;
    }

    .case-single {
        display: flex;
        gap: 20px;
        margin-bottom: 82px;
        padding-top: 100px;
    }

    .case-single__main-content {
        width: 870px;
        position: relative;
        z-index: 2;
    }

    .page-cases__sidebar {
        width: calc(100% - 890px);
        position: relative;
        z-index: 1;
    }

    .case-image-wrapper {
        display: none;
        padding: 20px 28px;
        margin-bottom: 24px;
    }

    .page-cases__sidebar .case-image-wrapper {
        display: block;
    }

    .case-review {
        margin-top: 80px;
        width: calc(100vw - 64px);
        max-width: 1320px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .related-cases {
        width: calc(100vw - 64px);
        max-width: 1320px;
    }

    .case-review--no-photo {
        width: 100%;
    }

    .case-article {
        margin-bottom: 80px;
    }

    .case-review__content {
        width: 810px;
        flex-shrink: 0;
    }

    .case-review__photo {
        width: calc(100% - 830px);
    }

    .case-review__text {
        font-size: 24px;
    }

    .related-cases__container {
        margin-right: 0;
        overflow: hidden;
    }

    .related-cases {
        position: relative;
    }

    .related-cases__wrapper {
        width: 100%;
        transition: all 0.3s ease;
    }

    .related-cases__item {
        flex-shrink: 0;
    }

    .related-cases > h2 {
        height: 39px;
    }

    .case-item__image {
        height: 240px;
    }

    .case-item__image-wrapper {
        padding: 20px;
    }

    .case-review__position {
        padding-bottom: 24px;
    }
    
}

@media (min-width: 1440px){

    .cases-reviews__arrow-left, .cases-related__arrow-left {
        left: -56px;
    }

    .cases-reviews__arrow-right, .cases-related__arrow-right {
        right: -56px;
    }

    .cases-reviews__arrows, .cases-related__arrows {
        opacity: 1;
    }

}