.portfolio-header-bottom{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

}

.page-header.portfolio{
    position: relative;
    padding-bottom: 80rem;
    overflow: hidden;
}
.portfolio-body__block{
    background: #F6F5FA;
    border-top: 2rem solid #E0DFE8;
    display: flex;
    flex-direction: column;
    gap: 52rem;
    padding-block: 32rem 80rem;
}
.portfolio-body__block-container,
.portfolio-body__block-cases-container{
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.portfolio-body__block-container{
    padding-inline: 40rem;
}

.portfolio-body__block-filters{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap:12rem;
}

.portfolio-body__block-filters-active{
    border-radius: 12rem;
    display: flex;
    background: #EAE9F0;
    white-space: nowrap;
}

.portfolio-body__block-filters-active a,
.dropdown-content a{
    backdrop-filter: blur(13rem);
    display: flex;
    padding: 16rem 20rem;
    border-radius: 12rem;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 20rem;
    line-height: 120%;
    letter-spacing: 0rem;
    color: #282533;
    display: flex;
    cursor: pointer;
}

.portfolio-body__block-filters-active a:hover,
.dropdown-content a:hover{
    background: #F4F4F6;

}

.portfolio-body__block-filters-active a.active{
    color:#F6F5FA;
    background: #282533;
    border-radius: 12rem;
}

.portfolio-body__block-filters-others{
    width: 100%;
    position: relative;
}

.portfolio-body__block-filters-others a.active{
    color:#F6F5FA;
    background: #282533;
    border-radius: 12rem;
}

.dropdown-btn{
    background: #EAE9F0;
    border-radius: 12rem;
    display: flex;
    justify-content: space-between;
    padding: 16rem 16rem 16rem 20rem;
    border: none;
    width: 100%;
}
.dropdown-btn p{
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 20rem;
    line-height: 120%;
    letter-spacing: 0rem;
    margin: 0;
}

.dropdown-btn svg{
    width: 20rem;
    aspect-ratio: 1/1;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.portfolio-body__block-filters-others.active .dropdown-btn svg{
    transform: rotate(90deg);
    transition: transform 0.3s;
}

.dropdown-content{
    background: #EAE9F0;
    display: flex;
    flex-direction: column;
    border-radius: 12rem;
    display: none;
}

.portfolio-body__block-filters-others.active .dropdown-content{
    display: flex;
    position: absolute;
    margin-top: 20rem;
    width: 100%;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400rem;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-body__block-filters-others.active .dropdown-content::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.load-more-btn{
    align-self: center;
}

.load-more-btn.red-button{
    width: 100%;
    display: flex;
    justify-content: center;
}

.portfolio-hero__block{
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
.case-page__body{
    display: flex;
    flex-direction: column;
    gap: 80rem;
    padding: 20rem 40rem 0rem 40rem;
    position: relative;
}

.portfolio-text__block-item h2{
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 80rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0rem;
    color: #282533;
    margin: 0;
    text-transform: uppercase;
}

.portfolio-text__block-item p{
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20rem;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0rem;
    color: #282533;
}

.portfolio-text__block-item{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.portfolio-text__block .portfolio-text__block-item-line{
    width: 100%;
    padding-block: 40rem;
}


.portfolio-photo__block{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rem;
}

.portfolio-photo__block.three > :first-child{
    grid-column: span 2;
    aspect-ratio: 19 / 12;
}

.portfolio-photo__block img{
    width: 100%;
    border-radius: 32rem;
    object-fit: cover;
}

.portfolio-text__block-item-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portfolio-results__block{
    border-radius: 80rem;
    background: #18181A;
    padding: 100rem 40rem 40rem 40rem;
    display: flex;
    flex-direction: column;
    gap: 40rem;
    margin-inline: -40rem;
    position: relative;
    z-index: 2;
}

.portfolio-results__block-header-text h2{
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 80rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0rem;
    text-transform: uppercase;
    color: #F6F5FA;
}

.portfolio-results__block-header-text p{
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-style: Light;
    font-size: 20rem;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0rem;
    color: #F6F5FA;

}
.portfolio-results__block-header-links-text p{
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16rem;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0rem;
    color: #F6F5FA;
}

.portfolio-results__block-header-links-buttons-networks img{
    background: #2C2C2E;
    width: 58rem;
    aspect-ratio: 1/1;
    border-radius: 10rem;
    padding: 14rem;
    cursor: pointer;
}
.portfolio-results__block-header-links-buttons-networks{
    display: flex;
    gap: 10rem;
}
.portfolio-results__block-header-links-buttons{
    display: flex;
    gap: 20rem;
}

.portfolio-results__block-header-links-text{
    position: relative;
    width: fit-content;
}


.portfolio-results__block-header-links-text-line{
    position: absolute;
    right:40rem;
    width: 27rem;
}

.portfolio-results__block-header{
    display: grid;
    gap: 40rem;
    grid-template-columns: 3fr 1fr;
}

.portfolio-results__block-header-text{
    display: flex;
    flex-direction: column;
    gap:  32rem;
}
.portfolio-results__block-header-links{
    display: flex;
    flex-direction: column;
    gap: 24rem;
    justify-content: flex-end;
}

.number-card-item.dark{
    background: #1D1D1E;
    border: 1rem solid #F6F5FA14;
}

.number-card-item.dark .number-card-number{
    color: #F6F5FA;
}

.number-card-item.dark .number-card-number-desc{
    color: #FFFFFF;

}

.number-card-item.dark .number-card-number-text{
    color: #F6F5FA;
}

.portfolio-results__block
.about-us-numbers__containter{
    padding-bottom: 40rem;
}
.case-page__body-next-case{
    position: relative;
}

.case-page__body-next-case{
    padding: 200rem 40rem 120rem 40rem;
    margin-top: -80rem;
    background-color: #F6F5FA;
    position: relative;
}
.case-page__body-next-case-container{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40rem;
    position: relative;
    z-index: 2;
}
.next-case-preview{
    width: 100%;
    border-radius: 32rem;
    height: 100%;
    object-fit: cover;
}

.case-page__body-next-case-container-body h2{
    margin: 0;
    text-transform: uppercase;
    color: #282533;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 80rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0rem;
    vertical-align: bottom;
}

.case-page__body-next-case-container-body-subjects{
    display: flex;
    gap: 8rem;
    padding-block: 12rem 40rem;
}
.case-page__body-next-case-container-body-subjects p{
    margin: 0;
    text-transform: uppercase;
    color: #282533;
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 16rem;
    leading-trim: NONE;
    line-height: 126%;
    letter-spacing: 0rem;
    padding: 12rem 18rem;
    border-radius: 8rem;
    border: 1.5rem solid #282533CC;

}

.case-page__body-next-case-container-body-desc{
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-style: Light;
    font-size: 18rem;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0rem;
    color: #282533;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin:0;
    overflow-wrap: anywhere;
}

.case-page__body-next-case-container-body-links{
    display: flex;
    gap: 16rem;
}

.case-page__body-next-case-container-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.case-page__body-next-case-container-body-links .case-site-link{
    background:#EAE9F0;
}

@media(max-width: 760px){
    .page-header.portfolio {
        padding-bottom: 38rem;
    }
    .portfolio-body__block {
        gap: 24rem;
        padding-block: 16rem 80rem;
    }
    .portfolio-body__block-container {
        padding-inline: 24rem;
    }
    .portfolio-body__block-container,
    .portfolio-body__block-cases-container{
        gap: 20rem;
    }
    .portfolio-body__block-filters-active a, .dropdown-content a,
    .dropdown-btn{
        padding: 8rem 10rem;
        font-size: 12rem;
        border-radius: 6rem;
    }
    .portfolio-body__block-filters-others a.active,
    .dropdown-content {
        border-radius: 6rem;
    }
    .dropdown-btn p{
        font-size: 12rem;
    }
    .dropdown-btn svg{
        width: 10rem;
    }
    .portfolio-body__block-filters-others.active .dropdown-content{
        margin-top: 10rem;
    }
    .portfolio-hero__block {
        gap: 20rem;
    }
    .case-page__body {
        gap: 27rem;
        padding: 10rem 24rem 0rem 24rem;
    }
    .portfolio-text__block-item h2{
        font-size: 38rem;
    }
    .portfolio-text__block-item p{
        font-size: 12rem;
    }
    .portfolio-text__block .portfolio-text__block-item-line {
        padding-block: 20rem;
    }
    .portfolio-photo__block img{
        border-radius: 16rem;
    }
    .portfolio-results__block-header-text h2{
        font-size: 38rem;
    }
    .portfolio-results__block-header-text{
        gap: 16rem;
    }
    .portfolio-results__block-header-text p{
        font-size: 12rem;
    }
    .portfolio-results__block-header-links-text p{
        font-size: 8rem;
    }
    .portfolio-results__block-header-links-buttons-networks img{
        border-radius: 4rem;
        width: 28rem;
        padding: 8rem;
    }
    .portfolio-results__block-header-links-text-line {
        position: absolute;
        right: 25rem;
        width: 12rem;
    }
    .portfolio-results__block-header-links {
        gap: 12rem;
    }
    .about-us-numbers__containter .number-card-number-desc{
        font-size: 6rem;
    }
    .about-us-numbers__containter .number-card-number{
        font-size: 76rem;
    }
    .portfolio-results__block .about-us-numbers__containter{
        padding-bottom: 20rem;
    }
    .case-page__body-next-case-container-body h2{
        font-size: 38rem;
    }
    .case-page__body-next-case-container-body-subjects p{
        padding: 6rem 8rem;
        border-radius: 4rem;
        font-size: 12rem;
    }
    .case-page__body-next-case-container-body-desc{
        font-size: 12rem;
    }
    .case-page__body-next-case-container-body-subjects {
        gap: 4rem;
        padding-block: 6rem 16rem;
    }
    .next-case-preview {
        border-radius: 16rem;
    }
    .case-page__body-next-case-container {
        gap: 16rem;
        grid-template-columns: 1fr 1fr;
    }
    .case-page__body-next-case-container-body-links {
        gap: 12rem;
    }
    .case-page__body-next-case-container-body{
        gap: 16rem;
    }
    .case-page__body-next-case {
        padding: 94rem 24rem 80rem 24rem;
        margin-top: -32rem;
        background-color: #F6F5FA;
        position: relative;
    }
    .portfolio-results__block {
        border-radius: 38rem;
        padding: 48rem 24rem;
        gap: 20rem;
        margin-inline: -24rem;
    }
}

@media(max-width: 480px){
    .portfolio-header-bottom {
        flex-direction: column-reverse;
        gap: 9rem;
    }
    .portfolio-header-bottom span{
        width: 50%;
        text-align: end;
    }
    .portfolio-header-bottom p{
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    .page-header.portfolio {
        padding-bottom: 40rem;
    }
    .portfolio-body__block {
        gap: 40rem;
        padding-block: 24rem 60rem;
    }
    .portfolio-body__block-filters {
        display: flex;
        flex-direction: column;
        gap: 13rem;
    }
    .portfolio-body__block-filters-active a, .dropdown-content a, .dropdown-btn {
        padding: 14rem 16rem;
        font-size: 16rem;
        border-radius: 12rem;
    }
    .dropdown-btn p {
        font-size: 16rem;
    }
    .portfolio-body__block-container, .portfolio-body__block-cases-container {
        gap: 24rem;
    }
    .case-card.case-page{
        background-image: none !important;
    }

    .case-card.case-page .case-title,
    .case-card.case-page .case-card-company-title{
    color: #282533;
    }

    .case-card.case-page .case-sub{
    color: #282533;
    border: 1.5rem solid #282533;
    }
    .case-card-logo{
        display: none;
    }
    .case-card.case-page .case-title{
        padding-block: 40rem 12rem;
    }
    .case-card.case-page {
        padding: 0;
        border-radius: 0;
        gap: 20rem;
    }
    .case-card.case-page .case-card-top img{
        width: 100%;
        aspect-ratio: 328 / 200;
        border-radius: 12rem;
        object-fit: cover;
        object-position: 90% 50%;
    }
    .portfolio-text__block-item {
        display: flex;
        flex-direction: column;
        gap: 20rem;
    }
    .portfolio-text__block-item h2 {
        font-size: 52rem;
    }
    .portfolio-text__block-item p {
        font-size: 16rem;
    }
    .case-page__body {
        gap: 40rem;
        padding: 12rem 16rem 0rem 16rem;
    }
    .portfolio-photo__block {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        margin-inline: -16rem;
    }
    .portfolio-photo__block img {
        border-radius: 12rem;
    }
    .portfolio-text__block .portfolio-text__block-item-line {
        padding-block: 28rem;
    }
    .portfolio-results__block {
        border-radius: 40rem;
        padding: 60rem 16rem;
        gap: 32rem;
        margin-inline: -16rem;
    }
    .portfolio-results__block .about-us-numbers__containter {
        padding-bottom: 8rem;
    }
    .portfolio-results__block-header-text {
        gap: 12rem;
    }
    .portfolio-results__block-header-text h2 {
        font-size: 52rem;
    }
    .portfolio-results__block-header-text p {
        font-size: 16rem;
    }
    .portfolio-results__block-header{
        display: flex;
        gap: 0;
    }
    .about-us-numbers__containter{
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }
    .about-us-numbers__containter .number-card-number-desc {
        font-size: 14rem;
    }
    .about-us-numbers__containter .number-card-number {
        font-size: 100rem;
    }
    .portfolio-results__block-header-links-text p {
        font-size: 14rem;
    }
    .portfolio-results__block-header-links-buttons {
        display: flex;
        gap: 16rem;
        flex-direction: column-reverse;
        align-items: center;
    }
    .portfolio-results__block-header-links {
        gap: 32rem;
    }
    .portfolio-results__block-header-links-text-line {
        position: absolute;
        right: 25rem;
        width: 32rem;
    }
    .portfolio-results__block-header-links-buttons .red-button{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .portfolio-results__block-header-links-buttons-networks img {
        border-radius: 8rem;
        width: 56rem;
        padding: 12rem;
    }
    .portfolio-results__block-header-links-buttons-networks {
        display: flex;
        gap: 6rem;
    }
    .case-page__body-next-case-container {
        gap: 24rem;
        display: flex;
        flex-direction: column;
    }
    .case-page__body-next-case-container-body h2 {
        font-size: 52rem;
    }
    .case-page__body-next-case-container-body-subjects {
        gap: 8rem;
        padding-block: 6rem 16rem;
    }
    .case-page__body-next-case-container-body-desc {
        font-size: 14rem;
    }
    .case-page__body-next-case-container-body {
        gap: 32rem;
    }
    .case-page__body-next-case {
        padding: 100rem 16rem 60rem 16rem;
        margin-top: -40rem;
    }
    .case-page__body-next-case-container-body-subjects p {
        padding: 8rem 12rem;
        border-radius: 8rem;
        font-size: 12rem;
    }
    .case-page__body-next-case-container-body-links {
        gap: 12rem;
        flex-direction: column;
    }
}