.first-background {
    background-repeat: no-repeat;
    background-image: url(/images/case-studies-background.png);
    background-position: center center;
    background-size: 1440px auto;
    width: 100%;
    height: 440px;
    overflow: hidden;
}

.top-text {
    width: 50%;
}

.top-text-section {
    margin-top: -190px;
    position: relative;
    width: 100%;
    padding-bottom: 3rem;
}

.top-text-title {
    max-width: 75%;
}

.top-text {
    max-width: 75%;
}

.top-section {
    width: 100%;
    position: relative;
}

.case-image,
.case-image-bottom {
    width: 513px;
}

.case-study {
    position: relative;
    display: flex;
    gap: 11%;
}

.image-box {
    margin-top: 40px;
}

.image {
    position: relative;
}

.case-image-corner-icon-left,
.case-image-corner-icon-right {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 16px;
}

.case-image-corner-icon-left {
    left: 24px;
}

.case-image-corner-icon-right {
    right: 24px;
}

.case-study:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 1440px;
    height: 100%;
    background-color: #1B1B1B;
    z-index: -1;
}

.case-study:nth-child(odd) {
    display: flex;
    flex-direction: row-reverse;
}

.cases-see-more-div {
    text-align: center;
}

.cases-see-more {
    padding-left: 110px;
    padding-right: 110px;
}

.contact-element-container {
    padding: 100px;
}

@media (min-width: 1440px) {
    .first-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 1px);
        height: 100%;
        background: linear-gradient(to right, rgba(0,0,0, 1) 0px, rgba(0,0,0,0) 70px, rgba(0,0,0,0) calc(100% - 70px), rgba(0,0,0, 1) 100%);
        pointer-events: none;
    }
}

@media (max-width: 1199px) {
    .case-study {
        gap: 5%;
    }
    .case-image,
    .case-image-bottom {
        width: 400px;
    }
    .image-box {
        margin-top: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .case-studies-section.container {
        max-width: unset;
    }
}

@media (max-width: 768px) {
    .top-text {
        width: 100%;
    }

    .top-text-section {
        margin-top: -160px;
    }

    .image-box {
        margin-top: 0;
    }

    .case-study.second-type,
    .case-study {
        flex-direction: column;
    }

    .case-text-box {
        padding-top: 50px;
    }

    .case-image,
    .case-image-bottom {
        width: 100%;
        max-width: 100%;
    }

    .cases-see-more-div {
        width: 100%;
        text-align: center;
    }

    .cases-see-more {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .contact-element-container {
        padding: 80px 12px 40px 12px;
    }
}