.case-heading-wrapper {
    padding: 30px;
}

.case-heading-wrapper h1 {
    font-size: 40px;
    line-height: 43px;
    margin: 0;
    font-family: 'SyneSemiBold', sans-serif;
    letter-spacing: -0.031em;
    opacity: 0;
}

.case-heading-wrapper h1 span {
    display: inline-block;
}

.case-heading-wrapper h1 span.space {
    display: inline;
}

.cta-wrapper .read-more-cta {
    font-family: 'SyneBold', sans-serif;
}

.cta-wrapper .read-more-cta-wrapper {
    justify-content: center;
    margin-top: 55px;
    margin-bottom: 55px;
}

.request-solution>div:last-child {
    padding: 50px 30px 0;
}

.request-solution h2 {
    font-size: 22px;
    line-height: 25px;
    font-family: 'SyneSemiBold', sans-serif;
    letter-spacing: -0.005em;
    text-decoration: underline;
    text-underline-offset: 9px;
}

.request-solution .cta-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.request-solution .cta-wrapper:hover {
    background-color: #151515;
}

.request-solution .cta-wrapper:hover .read-more-cta {
    color: #fdfdfd;
}

.solution {
    margin-top: 50px;
}

.bg-black-case {
    background-color: #000;
    padding: 50px 44px;
    color: #fdfdfd;
}

.bg-black-case p {
    font-size: 24px;
    line-height: 28px;
    font-family: 'SyneSemiBold', sans-serif;
    text-transform: uppercase;
}


.project-overview {
    padding: 50px 30px;
}

.project-overview h2 {
    font-size: 38px;
    line-height: 46px;
    font-family: 'SyneBold', sans-serif;
}

.project-overview .logo {
    width: auto;
    height: 115px;
    right: 6rem;
    top: 5rem;
}

.project-overview-paragraph h3 {
    font-size: 22px;
    line-height: 25px;
    text-decoration: underline;
    font-family: 'SyneSemiBold', sans-serif;
    letter-spacing: -0.005em;
}

.case-logo {
    max-width: 100px;
    max-height: 50px;
    right: 3rem;
    top: 3.5rem;
}

.project-overview-paragraph {
    margin-top: 50px;
}

.project-overview-img {
    margin-top: 50px;
}

#single-case-carousel-controls .next {
    order: 3;
}

.single-case-carousel {
    background-color: #000;
}

.single-case-carousel-wrapper {
    margin: 50px 30px;
    margin-bottom: 10px;
}

#single-case-carousel-controls {
    padding: 0 30px;
    gap: 10px;
}

.case-item-carousel {
    color: #fdfdfd;
    padding: 100px 30px;
}

.case-item-carousel h3 {
    font-size: 20px;
}

.web-footer-paragraph {
    padding: 50px 44px;
}

.web-footer-paragraph p {
    font-size: 24px;
    line-height: 28px;
    font-family: 'SyneSemiBold', sans-serif;
    text-transform: uppercase;
}


.design-wrapper h3 {
    font-size: 48px;
    line-height: 55px;
    font-family: 'SyneBold', sans-serif;
    letter-spacing: -0.015em;
    margin: 0;
}

.design-wrapper .design-logo {
    max-width: 60px;
}

.design-wrapper {
    padding: 50px 30px;
}

.design-first-img {
    padding: 30px 0;
    background-color: #000;
}

.design-text-wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.noise-texture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(/images/cases/axel/noise-texture.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 0;
}

.design-text-wrapper p {
    color: #fdfdfd;
    font-size: 24px;
    line-height: 28px;
    font-family: 'SyneSemiBold', sans-serif;
    padding: 0 30px;
    z-index: 2;
    text-transform: uppercase;
}

.grid-text {
    background-color: #000;
    color: #fdfdfd;
}

.grid-text p {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.004em;
    padding: 50px 30px;
    margin: 0;
}

.last-grid {
    background-color: #000;
}

.next-project-cta-wrapper {
    padding: 50px 29px;
}

.my-project-cta-wrapper.my-200{
    margin: 80px auto;
}

.next-project-cta-wrapper h4 {
    font-size: 24px;
    line-height: 28px;
    font-family: 'SyneBold', sans-serif;
    font-weight: 700;
    text-align: center;
    margin: 0;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

.next-project-cta-wrapper .read-more-cta-wrapper {
    justify-content: center;
}

.img-container {
    position: relative;
}

.slide {
    display: block;
    position: absolute;
    height: 200px !important;
    width: 200px !important;
}

.grid-wrapper {
    height: 1500px;
}


/* down left */
.grid-item.img-1{
    transform: translate(0, 133%); 
} 

/* upper right */
.grid-item.img-2{
    transform: translate(225%, 10%); 
} 

/* upper left */
.grid-item.img-3{
    transform: translate(0, -20%);
} 

/* down right */
.grid-item.img-4{
    transform: translate(300%, 270%); 
}
/* center */
.grid-item.img-5{
    transform: translate(50%, 50%);
}  

.img-container.grid-wrapper img {
    max-width: 100%;
}

.prev-arrow, .next-arrow {
    width: 25px;
    height: 25px;
}

.request-solution p {
    color: #686868;
}

@media (min-width: 768px) {
    .case-heading-wrapper {
        padding: 50px;
    }

    .case-heading-wrapper h1 {
        font-size: 96px;
        line-height: 110px;
        letter-spacing: -0.015em;
    }

    .service-img img {
        aspect-ratio: 64/29;
        object-fit: cover;
    }
    
    .request-solution>div:last-child {
        padding: 90px 50px;
    }

    .request-solution h2 {
        font-size: 34px;
        line-height: 36px;
    }

    .request-solution p {
        font-size: 22px;
        line-height: 25px;
    }

    .cta-wrapper .read-more-cta-wrapper {
        margin-top: 95px;
        margin-bottom: 95px;
    }

    .bg-black-case {
        padding: 100px;
    }

    .bg-black-case p {
        font-size: 40px;
        line-height: 46px;
    }

    .project-overview {
        padding: 90px 50px;
    }

    .project-overview h2 {
        font-size: 47px;
        line-height: 56px;
    }

    .project-overview-paragraph h3 {
        font-size: 48px;
        line-height: 53px;
    }

    .project-overview-paragraph {
        margin-top: 55px;
    }

    .project-overview-paragraph p {
        font-size: 24px;
        line-height: 27px;
        max-width: 555px;
    }

    .project-overview-img {
        margin-top: 90px;
    }

    .case-item-carousel h3 {
        font-size: 36px;
    }

    .case-item-carousel p {
        font-size: 20px;
    }

    .single-case-carousel-wrapper {
        margin: 90px 50px 30px;
    }

    .case-item-carousel {
        padding: 190px 90px;
    }

    #single-case-carousel-controls {
        padding: 0 50px;
    }

    .web-footer-paragraph {
        padding: 90px 50px;
    }

    .web-footer-paragraph p {
        font-size: 40px;
        line-height: 46px;
    }

    .design-wrapper h3 {
        font-size: 40px;
        line-height: 49px;
    }

    .design-wrapper .design-logo {
        max-width: 72px;
    }

    .design-first-img {
        padding: 50px 0;
    }

    .design-text-wrapper p {
        font-size: 40px;
        line-height: 46px;
        padding: 0 50px;
    }

    .grid-text p {
        font-size: 21px;
        line-height: 25px;
        padding: 90px 100px;
    }

    .next-project-cta-wrapper.my-200{
        margin: 80px auto;
    }

    .next-project-cta-wrapper h4 {
        font-size: 40px;
        line-height: 46px;
    }

    .next-project-cta-wrapper h4 {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (min-width: 1280px) {
    .next-project-cta-wrapper h4 {
        max-width: 10ch;
    }
    
    .border-line-vertical {
        height: 100%;
        width: 2px;
        position: absolute;
        left: 33vw;
        top: 0;
        background-color: #000;
    }

    .case-heading-wrapper {
        padding: 55px;
    }

    .case-heading-wrapper h1 {
        font-size: 130px;
        line-height: 149px;
        letter-spacing: -0.015em;
    }

    .cta-wrapper .read-more-cta {
        font-size: 42px;
    }

    .request-solution>div:last-child {
        padding: 50px 30px;
    }

    .solution {
        margin-top: 0px;
    }

    .request-solution p {
        font-size: 20px;
        line-height: 23px;
        margin-top: 30px;
    }

    .bg-black-case-case {
        padding: 125px 100px;
    }

    .bg-black-case p {
        font-size: 46px;
        line-height: 55px;
    }

    .project-overview {
        padding: 125px 100px;
    }

    .grid-wrapper {
        margin-top: 80px;
    }

    .project-overview-img {
        margin-top: -200px;
    }

    .case-logo {
        max-width: 124px;
        max-height: 95px;
        right: 5rem;
        top: 7.5rem;
    }

    .web-footer-paragraph {
        padding: 100px;
    }

    .web-footer-paragraph p {
        font-size: 46px;
        line-height: 55px;
    }

    .single-case-wrapper {
        background-color: #000;
        color: #fdfdfd;
        padding: 85px 100px;
    }

    .single-case-wrapper .text-wrapper h3 {
        font-size: 52px;
        line-height: 59px;
        text-decoration: underline;
        text-underline-offset: 13px;
        font-family: 'SyneSemiBold', sans-serif;
        text-decoration-thickness: 3px;
        margin-bottom: 2rem;
    }

    .single-case-wrapper .text-wrapper p {
        font-size: 20px;
        line-height: 26px;
        letter-spacing: 0.004em;
        max-width: 875px;
    }

    .number-container {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .single-case-wrapper .number {
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        overflow: hidden;
    }

    .single-case-wrapper .number.number-1 {
        background: url(/images/cases/1.svg) center/100% 100% no-repeat;
        mask-image: url(/images/cases/1.svg);
        -webkit-mask-image: url(/images/cases/1.svg);
    }

    .single-case-wrapper .number.number-2 {
        background: url(/images/cases/2.svg) center/100% 100% no-repeat;
        mask-image: url(/images/cases/2.svg);
        -webkit-mask-image: url(/images/cases/2.svg);
    }

    .single-case-wrapper .number.number-3 {
        background: url(/images/cases/3.svg) center/100% 100% no-repeat;
        mask-image: url(/images/cases/3.svg);
        -webkit-mask-image: url(/images/cases/3.svg);
    }

    .single-case-wrapper .number.number-4 {
        background: url(/images/cases/4.svg) center/100% 100% no-repeat;
        mask-image: url(/images/cases/4.svg);
        -webkit-mask-image: url(/images/cases/4.svg);

    }

    .single-case-wrapper .number.number-1::before {
        transform: translateY(var(--numberValue1)) translateX(-50%);
    }

    .single-case-wrapper .number.number-2::before {
        transform: translateY(var(--numberValue2)) translateX(-50%);
    }

    .single-case-wrapper .number.number-3::before {
        transform: translateY(var(--numberValue3)) translateX(-50%);
    }

    .single-case-wrapper .number.number-4::before {
        transform: translateY(var(--numberValue4)) translateX(-50%);
    }

    :root {
        --numberValue1: 100%;
        --numberValue2: 100%;
        --numberValue3: 100%;
        --numberValue4: 100%;
    }

    .number-container .number::before {
        position: absolute;
        top: 0;
        left: 50%;
        content: '\A0';
        width: 99%;
        height: 100%;
        /* transform: translateY(var(--numberValue)) translateX(-50%); */
        background: #fdfdfd;
        transition: 0.4s ease-out;
    }

    .case-text-item::after {
        content: '';
        position: absolute;
        bottom: -25%;
        left: 50%;
        width: 95%;
        background-color: #fdfdfd;
        height: 1px;
        translate: -50% 0;
    }

    .case-text-item:nth-child(4)::after {
        display: none;
    }

    .case-text-item {
        gap: 15px;
        margin: 148px 0;
    }

    .design-wrapper {
        padding: 100px;
    }

    .design-wrapper .design-logo {
        max-width: 196px;
    }

    .design-first-img {
        padding: 125px 0;
    }

    .design-wrapper h3 {
        font-size: 47px;
        line-height: 55px;
    }

    .design-text-wrapper p {
        font-size: 46px;
        line-height: 55px;
        padding: 0 100px;
    }

    .grid-text p {
        font-size: 18px;
        line-height: 26px;
        padding: 0 85px;
    }

    .next-project-cta-wrapper {
        padding: 50px 60px;
    }

    .next-project-cta-wrapper h4 {
        font-size: 88px;
        line-height: 108px;
        text-align: left;
    }

    .next-project-cta-wrapper.my-200{
        margin: 120px auto;
    }

    .next-project-cta-wrapper .read-more-cta-wrapper:hover {
        background: #151515;
    }

    .next-project-cta-wrapper .read-more-cta-wrapper:hover a {
        color: #fdfdfd;
    }
    
}

@media (min-width: 1500px) {
    .request-solution p {
        font-size: 22px;
        line-height: 28px;
        margin-top: 50px;
    }

    .project-overview-paragraph {
        margin-top: 80px;
    }

    .case-heading-wrapper {
        padding: 60px 100px;
    }

    .next-project-cta-wrapper.my-200{
        margin: 120px auto;
    }

    .grid-text p {
        font-size: 22px;
    }
}

@media (min-width: 1250px) and (max-width: 1550px){
    .img-container.grid-wrapper img {
        max-height: 670px;
    }
}

@media (min-width:1680px) {
    .bg-black-case p {
        font-size: 60px;
        line-height: 69px;
    }

    .project-overview h2 {
        font-size: 60px;
        line-height: 69px;
    }

    .case-heading-wrapper h1 {
        font-size: 202px;
        line-height: 235px;
        letter-spacing: -0.02em;
    }

    .request-solution h2 {
        font-size: 42px;
        line-height: 48px;
    }

    .project-overview-paragraph {
        margin-top: 100px;
    }

    .project-overview-paragraph p {
        max-width: 742px;
    }

    .grid-wrapper {
        margin-top: 200px;
    }

    .web-footer-paragraph p {
        font-size: 60px;
        line-height: 69px;
    }

    .single-case-wrapper {
        padding: 200px;
    }

    .single-case-wrapper .text-wrapper h3 {
        font-size: 60px;
        line-height: 69px;
    }

    .design-wrapper h3 {
        font-size: 60px;
        line-height: 69px;
    }

    .design-text-wrapper p {
        font-size: 60px;
        line-height: 69px;
    }
    
    .next-project-cta-wrapper h4 {
        font-size: 106px;
        line-height: 122px;
    }

    .next-project-cta-wrapper.my-200{
        margin: 200px auto;
    }

    .img-container.grid-wrapper img {
        max-height: 776px;
    }

    .next-project-cta-wrapper {
        padding: 100px 200px;
    }
}

@media (min-width: 1950px){
    .service-img img {
        max-height: 1022px;
    }

    .grid-item.img-1{
        transform: translate(35%, 50%);
        
    }
    .grid-item.img-2{
        transform: translate(305%, 10%);
        
    }
    .grid-item.img-3{
        transform: translate(0, -40%);
        
    }
    .grid-item.img-4{
        transform: translate(320%, 260%);
        
    }
    .grid-item.img-5{
        transform: translate(20%, 175%);
       
    }
}

.next-project-cta-wrapper .read-more-cta-wrapper .read-more-cta {
    justify-content: center;
    width: 100%;

    @media (width >= 1250px) {
        padding: 100px;
    }
}