.services-wrapper .right-side {
    margin-right: calc((-100vw + 100%) / 2);
    height: 60rem;
    margin-top: -25rem;
    background-image: url(/wp-content/themes/oceanwp-child/assets/image/services-image.jpg);
}

.services-details {
    max-width: 46rem;
    margin-right: 8rem;
}

.services-brown-bg {
    position: relative;
}

.services-wrapper .text-on-img {
    padding-top: 36rem;
}

.services-brown-bg:before {
    content: "";
    width: 100vw;
    background-color: var(--primary);
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: calc((-100vw + 100%) / 2);
}

.services-brown-bg:after {
    content: "";
    background-image: url("/wp-content/themes/oceanwp-child/assets/image/lines-pattern2.svg");
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    margin-left: calc((-100vw + 100%) / 2);
}

.services-display {
    padding: 6rem 0 3rem;
    display: grid;
    grid-template-columns: auto auto auto;
    position: relative;
    z-index: 1;
    grid-row-gap: 2rem;
}

.services-display .service-box {
    height: 22rem;
}

.services-display .service-box:nth-child(3n+3) {
    margin-left: auto;
}

.services-display .service-box:nth-child(3n+2) {
    margin: 0 auto;
}

.services-dark-brown-bg {
    position: relative;
    z-index: 5;
    padding: 10rem 0;
}

.services-dark-brown-bg:before {
    content: "";
    width: 100vw;
    margin-left: calc((-100vw + 100%) / 2);
    top: 0;
    background-color: #551F00;
    bottom: 0;
    z-index: -1;
    position: absolute;
}

.services-mission {
    display: flex;
    height: 100%;
    align-items: center;
}

.services-mission .common-title-lg {
    color: var(--primary);
}

.services-mission-text {
    max-width: 46rem;
    margin-left: 7.25rem;
}

.services-mission h3,
.services-mission-text p {
    margin-bottom: 0;
}

.services-mission-text .common-text-lg p{
    color: #F4F2ED;
}

.services-mission .common-title-lg:after {
    content: url("/wp-content/themes/oceanwp-child/assets/image/star-brown.svg");
    height: 10rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
}

@media screen and (max-width: 991px) {
    .services-details {
        margin-right: 2rem;
    }

    .services-mission .common-title-lg:after {
        content: url("/wp-content/themes/oceanwp-child/assets/image/star-brown.svg");
        height: 10rem;
        display: block;
        position: unset;
        top: unset;
        left: unset;
        transform: unset;
        margin-left: 5.5rem;
        margin-top: -1rem;
    }

    .services-mission {
        justify-content: center;
    }

    .services-mission .common-title-lg {
        display: flex;
        margin-bottom: 6rem;
    }

    .services-dark-brown-bg {
        padding: 8rem 0;
    }
}

@media screen and (max-width: 767px){
    .services-wrapper .right-side {
        height: 22rem;
    }

    .services-details h3 {
        margin-bottom: 1rem;
    }

    .services-details .common-text {
        margin-bottom: 5rem;
    }

    .services-display .service-box .common-text-lg {
        max-width: 20rem;
    }

    .services-display {
        grid-template-columns: auto auto;
    }

    .services-display .service-box:nth-child(3n+2),
    .services-display .service-box:nth-child(3n+3) {
        margin: 0;
        margin-left: 3rem;
    }

    .services-mission .common-title-lg {
        font-size: 40px !important;
        line-height: 40px !important;
    }

    .services-mission .common-title-lg {
        align-items: center;
        margin-bottom: 1rem;
    }

    .services-mission .common-title-lg:after {
         margin-top: unset;
    }

    .services-mission-text {
        max-width: unset;
        margin-left: unset;
    }

    .services-dark-brown-bg {
        padding: 4rem 0 6rem;
    }

    .services-mission-text .common-text-lg {
        font-size: 16px;
        line-height: 24px;
    }

    .services-details {
        margin-right: 0rem;
    }
}

@media screen and (max-width: 575px){
    .services-display {
         grid-template-columns: unset;
    }

    .services-display .service-box {
         margin-left: 0;
    }

    .services-display .service-box:nth-child(3n+2),
    .services-display .service-box:nth-child(3n+3) {
        margin-left: 0rem;
    }
}