section#services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}

.services-preface {
    margin-top: 9vw;
    text-align: center;
    color: #fff;
    font-size: 1.4vw;
}

.services-arrows {
    opacity: 0;
}

.services-arrows.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.services-arrows-top {
    position: absolute;
    top: 20vw;
    width: 60vw;
    left: 50%;
    translate: -50%;
}

.services-content {
    display: flex;
    margin-top: 8vw;
    text-align: center;
    color: #fff;
    font-size: 1.5vw;
    width: 80vw;
}

.service-title {
    padding: 1.5vw;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    font-size: 1.5vw;
}

.service-title-1 {
    background-image: url(/img/service-title-1.png?v=9);
    background-size: 80%;
}

.service-title-2 {
    background-image: url(/img/service-title-2.png?v=9);
    background-size: 65%;
}

.service-title-3 {
    background-image: url(/img/service-title-3.png?v=9);
    background-size: 50%;
}

.service-title-4 {
    background-image: url(/img/service-title-4.png?v=9);
    background-size: 50%;
}

.service-text {
    padding: 0 4vw;
    font-size: 1.2vw;
}

.services-arrows-bottom {
    position: absolute;
    top: 41vw;
    width: 57vw;
    left: calc(50% + 2vw);
    translate: -50%;
}

.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 6vw;
    margin-top: 4vw;
    position: relative;
    text-decoration: none;
    color: var(--livui-blue);
    font-size: 1vw;
}

.cta * {
    pointer-events: none;
}

.cta svg {
    position: absolute;
    object-fit: cover;
    width: 50%;
    left: 50%;
    translate: -50%;
    z-index: 101;
}

.cta svg.fade-in {
    width: 100%;
    transition: width 0.5s linear;
}

.cta.fade-in {
    font-size: 2vw;
    transition: font-size 0.5s linear;
}

.cta span {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 102;
}

.cta:hover {
    animation: buttonScale 0.75s ease-in-out;
    color: #fff;
}

.cta:hover svg * {
    fill: var(--livui-pink) !important;
}

.services-head-left,
.services-head-right {
    position: absolute;
    mix-blend-mode: multiply;
    width: 30vw;
    z-index: 20;
}

.services-head-left {
    left: -20vw;
    top: 16vw;
}

.services-head-right {
    right: -20vw;
    top: 9vw;
}

@media only screen and (max-width: 1440px) {   
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #services .section-divider {
        translate: 0%;
    }

    .services-preface {
        margin-top: 25vw;
        font-size: 3.5vw;
    }

    .services-arrows-top,
    .services-arrows-bottom {
        display: none;
    }

    .services-content {
        flex-direction: column;
    }

    .service-title {
        padding: 6vw 0;
        font-size: 4vw;
        font-family: OpenSansHebrew-Bold, sans-serif;
    }

    .service-title-1 {
        background-size: 60%;
    }
    
    .service-title-2 {
        background-size: 45%;
    }
    
    .service-title-3 {
        background-size: 45%;
    }
    
    .service-title-4 {
        background-size: 40%;
    }

    .service-text {
        font-size: 3.5vw;
        padding: 0 14vw 7vw;
    }

    .cta {
        width: 40vw;
        height: 15vw;
    }

    .cta.fade-in {
        font-size: 4vw;
    }

    .services-head-left,
    .services-head-right {
        width: 45vw;
    }

    .services-head-left {
        left: -24vw;
        top: 120vw;
    }

    .services-head-right {
        right: -24vw;
        top: 70vw;
    }
}

@media only screen and (max-width: 768px) {
    #services .section-divider {
        translate: 0%;
    }

    .services-preface {
        margin-top: 25vw;
        font-size: 3.5vw;
    }

    .services-arrows-top,
    .services-arrows-bottom {
        display: none;
    }

    .services-content {
        flex-direction: column;
    }

    .service-title {
        padding: 6vw 0;
        font-size: 4vw;
        font-family: OpenSansHebrew-Bold, sans-serif;
    }

    .service-title-1 {
        background-size: 60%;
    }
    
    .service-title-2 {
        background-size: 45%;
    }
    
    .service-title-3 {
        background-size: 45%;
    }
    
    .service-title-4 {
        background-size: 40%;
    }

    .service-text {
        font-size: 3.5vw;
        padding: 0 14vw 7vw;
    }

    .cta {
        width: 40vw;
        height: 15vw;
    }

    .cta.fade-in {
        font-size: 4vw;
    }

    .services-head-left,
    .services-head-right {
        width: 45vw;
    }

    .services-head-left {
        left: -24vw;
        top: 120vw;
    }

    .services-head-right {
        right: -24vw;
        top: 70vw;
    }
}

@media only screen and (max-width: 600px) {
    #services .section-divider {
        translate: 0%;
    }

    .services-preface {
        margin-top: 20vw;
        font-size: 4vw;
    }

    .services-arrows-top,
    .services-arrows-bottom {
        display: none;
    }

    .services-content {
        flex-direction: column;
    }

    .service-title {
        padding: 8vw 0;
        font-size: 5vw;
        font-family: OpenSansHebrew-Bold, sans-serif;
    }

    .service-title-1 {
        background-size: 70%;
    }
    
    .service-title-2 {
        background-size: 55%;
    }
    
    .service-title-3 {
        background-size: 55%;
    }
    
    .service-title-4 {
        background-size: 50%;
    }

    .service-text {
        font-size: 4vw;
        padding: 0 14vw 5vw;
    }

    .cta {
        width: 50vw;
        height: 25vw;
    }

    .cta.fade-in {
        font-size: 5vw;
    }

    .services-head-left,
    .services-head-right {
        width: 45vw;
    }

    .services-head-left {
        left: -24vw;
        top: 120vw;
    }

    .services-head-right {
        right: -24vw;
        top: 70vw;
    }
}

@media only screen and (max-width: 430px) {
    #services .section-divider {
        translate: 0%;
    }

    .services-preface {
        margin-top: 20vw;
        font-size: 4vw;
    }

    .services-arrows-top,
    .services-arrows-bottom {
        display: none;
    }

    .services-content {
        flex-direction: column;
    }

    .service-title {
        padding: 8vw 0;
        font-size: 5vw;
        font-family: OpenSansHebrew-Bold, sans-serif;
    }

    .service-title-1 {
        background-size: 70%;
    }
    
    .service-title-2 {
        background-size: 55%;
    }
    
    .service-title-3 {
        background-size: 55%;
    }
    
    .service-title-4 {
        background-size: 50%;
    }

    .service-text {
        font-size: 4vw;
        padding: 0 14vw 5vw;
    }

    .cta {
        width: 50vw;
        height: 25vw;
    }

    .cta.fade-in {
        font-size: 5vw;
    }

    .services-head-left,
    .services-head-right {
        width: 45vw;
    }

    .services-head-left {
        left: -24vw;
        top: 120vw;
    }

    .services-head-right {
        right: -24vw;
        top: 70vw;
    }
}

@media (hover: none) {
    .cta:hover {
        animation: none;
        color: var(--livui-blue);
    }

    .cta:hover svg * {
        fill: #fff !important;
    }
}