.cases--hero .hero__bg-gradient {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 0;
    width: clamp(25rem,14.183rem + 48.08vw,56.25rem);
    height: clamp(25rem,14.183rem + 48.08vw,56.25rem)
}

.cases--hero .hero__bg-gradient svg {
    display: block;
    z-index: 0;
    width: 100%;
    height: 100%
}

.cases--hero .hero__bg-gradient--green {
    top: -17%;
    left: -15%
}

@media (max-width: 767px) {
    .cases--hero .hero__bg-gradient--green {
        top:-4%;
        left: -17%
    }
}

.cases--hero .hero__bg-gradient--blue {
    top: -3%;
    left: 14%
}

.hero {
    position: relative;
    background: var(--color-white,#fff)
}

.cases--hero .hero__inner {
    padding-top: 150px;
    padding-bottom: 150px
}

.cases--hero .hero__title {
    z-index: 9;
    margin: 0;
    color: var(--color-deep-grey,currentColor);
    font-weight: 600;
    font-size: 64px;
    line-height: 1.3;
    font-family: var(--base-font),sans-serif
}

@media (min-width: 1280px) {
    .cases--hero .hero__inner {
        position:relative;
        height: 100%
    }

    .cases--hero .hero__title {
        margin-bottom: 24px;
        width: 100%;
        max-width: 868px
    }
}

@media (min-width: 768px) and (max-width:1279px) {
    .cases--hero .hero__inner {
        position:relative;
        height: 100%
    }

    .cases--hero .hero__title {
        margin: 0 0 16px;
        width: 100%;
        max-width: calc(100% - 90px);
        font-size: 42px;
        text-align: left
    }
}

@media (max-width: 767px) {
    .cases--hero .hero__bg-gradient--blue {
        top:7%;
        left: 26%
    }

    .cases--hero .hero__inner {
        position: relative;
        height: 100%
    }

    .cases--hero .hero__title {
        margin: 0 0 12px;
        width: 100%;
        max-width: calc(100% - 32px);
        max-width: none;
        font-size: 24px;
        text-align: center
    }
}

.cases--hero .hero__image-wrap {
    pointer-events: none
}

@media (min-width: 1280px) {
    .cases--hero .hero__image-wrap {
        position:absolute;
        top: -25px;
        right: -134px;
        width: 789px;
        height: 856px
    }
}

@media (max-width: 767px) {
    .cases--hero .hero__image-wrap {
        position:absolute;
        top: 44px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 617px;
        height: 510px
    }
}

@media (min-width: 768px) and (max-width:1279px) {
    .cases--hero .hero__image-wrap {
        position:absolute;
        top: 35px;
        left: 78%;
        width: 663px;
        height: 548px
    }
}

.hero__image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.cases--hero .hero__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 0
}

@media (max-width: 1279px) {
    .cases--hero .hero__inner {
        padding-top:105px;
        padding-bottom: 105px
    }

    .cases--hero .hero__content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 0
    }

    .cases--hero .hero__subtitle {
        margin-top: 0
    }
}

.cases--hero .hero__desc {
    z-index: 9
}

@media (min-width: 1280px) {
    .cases--hero .hero__desc {
        width:100%
    }
}

@media (max-width: 767px) {
    .cases--hero .hero__desc {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: calc(100% - 32px);
        text-align: center
    }
}

@media (min-width: 768px) and (max-width:1279px) {
    .cases--hero .hero__desc {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: calc(100% - 90px);
        text-align: left
    }
}

.cases--hero .hero__subtitle {
    margin: 0;
    width: 100%;
    max-width: 750px;
    color: var(--color-deep-grey,currentColor);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    font-family: var(--base-font),sans-serif
}

.cases--hero .hero__subtitle ul {
    /* margin-top: 20px; */
    padding-left: 22px
}

@media (min-width: 1280px) {
    .cases--hero .hero__subtitle {
        margin-bottom:82px
    }
}

@media (max-width: 1279px) {
    .cases--hero .hero__subtitle {
        margin-bottom:24px;
        font-size: 16px
    }
}

@media (min-width: 768px) and (max-width:1279px) {
    .cases--hero .hero__subtitle {
        margin-bottom:90px;
        font-size: 16px;
        text-align: left
    }
}

.hero__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

@media (max-width: 767px) {
    .cases--hero .hero__subtitle {
        display:-ms-grid;
        display: grid;
        -ms-grid-columns: 1fr auto 1fr;
        grid-template-columns: 1fr auto 1fr;
        margin-bottom: 78px;
        max-width: 100%;
        font-size: 14px;
        text-align: left
    }

    .cases--hero .hero__subtitle p {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1/4
    }

    .cases--hero .hero__subtitle ul {
        -ms-grid-column: 2;
        grid-column: 2
    }

    .hero__actions {
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content
    }

    .projects__filters .btn--primary {
        padding-block:15px}

    .projects__filters .btn--filter {
        padding-block:12px}
}

@media (min-width: 768px) and (max-width:1279px) {
    .hero__actions {
        position:relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 16px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content
    }
}

/* select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    --minwidth-select: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--color-ivory);
    border-radius: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A") right 5px center/20px no-repeat;
    padding-inline:20px;padding-block:13px;min-width: var(--minwidth-select);
    color: var(--color-deep-grey)
}

@supports ((-webkit-appearance: base-select) or (-moz-appearance:base-select) or (appearance:base-select)) {
    select,select::picker(select) {
        -webkit-appearance:base-select;
        -moz-appearance: base-select;
        appearance: base-select;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
        interpolate-size: allow-keywords
    }

    select:open {
        -webkit-animation-play-state: running;
        animation-play-state: running;
        background: var(--color-light-blue)
    }

    @media (prefers-reduced-motion) {
        select:open {
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }
    }

    select {
        background-image: none;
        padding-inline:20px}

    select img {
        width: 30px;
        line-height: 1
    }

    select::picker-icon {
        rotate: -90deg;
        -webkit-transition: rotate .2s ease-out;
        transition: rotate .2s ease-out;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
        width: 20px;
        height: 20px;
        content: ""
    }

    select:open::picker-icon {
        rotate: 0deg
    }

    select::picker(select) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        row-gap: 8px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        opacity: 0;
        -webkit-transition: height .4s ease-out,opacity .4s ease-out,overlay .4s,display .4s;
        transition: height .4s ease-out,opacity .4s ease-out,overlay .4s,display .4s;
        transition-behavior: allow-discrete;
        margin-top: 16px;
        -webkit-box-shadow: 0 4px 25px 0 rgba(1,8,3,.08);
        box-shadow: 0 4px 25px 0 rgba(1,8,3,.08);
        border: 1px solid var(--color-ivory,#e0e0e0);
        border-radius: 16px;
        background: var(--color-white,#fff);
        padding: 16px;
        max-width: 250px;
        height: 0;
        overflow: clip;
        font-weight: 400
    }

    select:open::picker(select) {
        opacity: 1;
        height: auto
    }

    select option {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-property: color,background;
        transition-property: color,background;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        cursor: pointer;
        padding: 4px;
        color: var(--color-deep-grey,currentColor);
        font-size: 16px;
        text-wrap: auto
    }

    select option:where(:hover,:focus,:active) {
        background: var(--color-light-blue,#eef2fa)
    }

    select option:checked {
        background: var(--color-light-blue,#eef2fa)
    }

    select option::checkmark {
        display: none
    }

    select option:first-child {
        border: 0
    }

    select selectedcontent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px
    }
} */

.projects {
    position: relative;
    z-index: 1;
    padding-top: 20px
}

@media screen and (min-width: 768px) {
    /* select {
        --minwidth-select:clamp(10.938rem, -3.125rem + 29.3vw, 15.625rem)
    } */

    /* .projects {
        padding-top: 45px
    } */
}

@media screen and (min-width: 1280px) {
    /* .projects {
        padding-top:85px
    } */
}

.projects__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(1.875rem,1.659rem + .96vw,2.5rem)
}

.projects__filters {
    display: -ms-grid;
    display: grid;
    position: sticky;
    top: 0;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: clamp(.75rem,1.56vw,1rem);
    z-index: 3;
    background-color: var(--color-white);
    padding-top: 15px;
    padding-bottom: 5px
}

.projects__filters .filters-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(.75rem,1.56vw,1rem);
    visibility: hidden;
    -webkit-transition: all var(--transition);
    transition: all var(--transition);
    width: 100%;
    height: 0;
    overflow: hidden
}

/* @media (max-width: 767px) {
    @supports ((-webkit-appearance:base-select) or (-moz-appearance:base-select) or (appearance:base-select)) {
        .projects__filters .filters-block select {
            -webkit-transition:all var(--transition);
            transition: all var(--transition);
            border: 0;
            border-bottom: 1px solid var(--color-ivory);
            border-radius: 0;
            padding-inline:10px;padding-block:5px}

        .projects__filters .filters-block select::picker-icon {
            rotate: 0
        }

        .projects__filters .filters-block select::picker(select) {
            margin-top: 0;
            border: 0;
            border-radius: 0;
            padding: 8px 0 0
        }

        .projects__filters .filters-block select option {
            padding: 4px
        }
    }
} */

@media screen and (min-width: 768px) {
    .projects__filters {
        -ms-grid-columns:auto 1fr;
        grid-template-columns: auto 1fr
    }

    .projects__filters .filters-block {
        position: relative;
        -ms-grid-column: 2;
        grid-column: 2;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        visibility: visible;
        height: auto;
        overflow: initial
    }

    .projects__filters .btn--filter {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .projects__filters:has(.open--filters) .btn--primary {
        border:1px solid var(--color-ivory,#e0e0e0);
        background: var(--color-white,#fff);
        color: var(--color-grey,#666)
    }

    .projects__filters:has(.open--filters) .filters-block {
        position: relative;
        visibility: visible;
        height: auto;
        overflow: initial
    }
}

.projects__filters .filter-index {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.projects__filters .filter-index__title {
    color: var(--color-deep-grey);
    font-weight: 400;
    font-size: 12px;
    line-height: 130%
}

.projects .projects__grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(290px,100%),1fr));
    gap: 16px
}

@media screen and (min-width: 768px) {
    .projects .projects__grid {
        grid-template-columns:repeat(auto-fill,minmax(min(323px,100%),1fr))
    }
}

.projects .project-item {
    position: relative;
    -webkit-box-shadow: 0 4px 25px 0 rgba(1,8,3,.08);
    box-shadow: 0 4px 25px 0 rgba(1,8,3,.08);
    border-radius: 10px;
    background: var(--color-white);
    padding: clamp(1rem,-2.722rem + 7.75vw,4.063rem) clamp(1rem,.804rem + .87vw,1.5rem);
    min-height: 225px;
    overflow: hidden
}

@media screen and (min-width: 1024px) {
    .projects .project-item {
        min-height:292px
    }
}

.projects .project-item__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    z-index: 2;
    height: 100%
}

.projects .project-item__content>* {
    margin-top: 12px
}

.projects .project-item__tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    row-gap: 4px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 300px;
    list-style: none
}

.projects .project-item__tag,.projects .project-item__tag a {
    color: var(--color-green);
    font-weight: 400;
    font-size: 14px;
    line-height: 130%
}

.projects .project-item__tag a:hover {
    color: var(--color-blue)
}

.projects .project-item__title {
    margin: 0;
    color: var(--color-deep-grey);
    font-weight: 600;
    font-size: 16px;
    line-height: 130%
}

@media screen and (min-width: 768px) {
    .projects .project-item__title {
        font-size:18px
    }
}

@media screen and (min-width: 1280px) {
    .projects .projects__grid {
        grid-template-columns:repeat(auto-fill,minmax(min(370px,100%),1fr));
        gap: 24px
    }

    .projects .project-item {
        border-radius: 30px
    }

    .projects .project-item__title {
        font-size: 24px
    }
}

.projects .project-item__text {
    color: var(--color-deep-grey);
    font-weight: 400;
    font-size: 14px;
    line-height: 130%
}

@media screen and (min-width: 1280px) {
    .projects .project-item__text {
        font-size:16px
    }
}

.projects .project-item__link {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    color: var(--color-grey);
    font-weight: 600;
    font-size: 16px;
    line-height: 130%
}

@media screen and (min-width: 768px) {
    .projects .project-item__link {
        bottom:24px;
        left: 24px;
        font-size: 18px
    }
}

.projects .project-item__link:hover {
    color: var(--color-green)
}

.projects .project-item__decor {
    position: absolute;
    top: -5%;
    right: -7%;
    width: clamp(18.75rem,14.193rem + 9.49vw,22.5rem);
    height: clamp(18.75rem,14.193rem + 9.49vw,22.5rem);
    pointer-events: none
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 4px
}

.pagination a,.pagination span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
    border-radius: 44px;
    width: 44px;
    height: 44px;
    color: var(--color-grey);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    text-decoration: none
}

@media (max-width: 767px) {
    .pagination a,.pagination span {
        width:35px;
        height: 35px
    }
}

.pagination a:hover {
    background-color: var(--color-white-30);
    color: var(--color-green,#34ae6b)
}

.pagination .active {
    background-color: var(--color-green,#34ae6b);
    color: var(--color-white,#fff)
}

.pagination .next,.pagination .prev {
    background-color: #f8f9fa
}

.pagination .next:hover,.pagination .prev:hover {
    color: var(--color-green,#34ae6b)
}

.pagination .dots {
    border: none;
    padding: 8px 10px
}