.section--relative .row {
    z-index: 2;
    position: relative;
    width: 200px;
    height: calc(100vh - 58vh);
    padding: 0;
    margin: 0 auto;

    @media (min-width: 1200px) {
        width: auto;
        height: 310px;
        padding: 0 220px;
        margin: 0;
    }
}

.section--relative .service--desktop {
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section--relative .service__text {
    font-size: 18px;
    font-weight: 400;
    margin-left: 12px;
    position: absolute;
    top: 14px;
    left: 60px;
    width: 160px;

    @media (min-width: 1200px) {
        text-align: center;
        font-size: 14px;
        margin: 18px 0 0 0;
        position: static;
        top: unset;
        left: unset;
        width: auto;
    }
}

.section--relative .service__text.management {
    top: 2px;

    @media (min-width: 1200px) {
        top: unset;
    }
}

.section--relative .service--mobile {
    align-items: center;
    height: fit-content;
    margin-top: 60px;
    position: relative;
}

.section--relative .service-logo__container {
    width: 47px;
    height: 47px;
    border: 1px solid #fff;
    border-radius: 2px;
    padding: 8px 9px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    position: relative;
}

.section--relative .service-logo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 29px;
    height: 29px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}

@keyframes uxAnimation {
    0% { opacity: 0; }
    2.94% { opacity: 1; }
    5.88% { opacity: 1; }
    11.76% { opacity: 1; }
    17.64% { opacity: 0; }
    100% { opacity: 0; }
}
.ux {
    opacity: 0;
    animation: uxAnimation 8.5s ease 0s infinite normal none;
}

@keyframes cmsAnimation {
    0% { opacity: 0; }
    11.76% { opacity: 0; }
    17.64% { opacity: 1; }
    23.52% { opacity: 1; }
    29.4% { opacity: 1; }
    35.28% { opacity: 0; }
    100% { opacity: 0; }
}
.cms {
    opacity: 0;
    animation: cmsAnimation 8.5s ease 0s infinite normal none;
}

@keyframes managementAnimation {
    0% { opacity: 0; }
    29.4% { opacity: 0; }
    35.28% { opacity: 1; }
    41.16% { opacity: 1; }
    47.04% { opacity: 1; }
    49.98% { opacity: 1; }
    52.92% { opacity: 0; }
    100% { opacity: 0; }
}
.management {
    opacity: 0;
    animation: managementAnimation 8.5s ease 0s infinite normal none;
}

@keyframes management2Animation {
    0% { opacity: 0; }
    29.4% { opacity: 0; }
    35.28% { opacity: 1; }
    41.16% { opacity: 1; }
    47.04% { opacity: 1; transform: translateY(0); }
    49.98% { opacity: 1; transform: translateY(15px); }
    52.92% { opacity: 0; transform: translateY(15px); }
    58.8% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; }
}
.management--2 {
    opacity: 0;
    transform: translateY(0);
    animation: management2Animation 8.5s ease 0s infinite normal none;
}

@keyframes management3Animation {
    0% { opacity: 0; }
    29.4% { opacity: 0; }
    35.28% { opacity: 1; }
    41.16% { opacity: 1; }
    47.04% { opacity: 1; transform: translate(0, 0); }
    49.98% { opacity: 1; transform: translate(17px, -15px); }
    52.92% { opacity: 0; transform: translate(17px, -15px); }
    58.8% { opacity: 0; transform: translate(0, 0); }
    100% { opacity: 0; }
}
.management--3 {
    opacity: 0;
    transform: translate(0, 0);
    animation: management3Animation 8.5s ease 0s infinite normal none;
}

@keyframes management4Animation {
    0% { opacity: 0; }
    29.4% { opacity: 0; }
    35.28% { opacity: 1; }
    41.16% { opacity: 1; }
    47.04% { opacity: 1; transform: translateX(0); }
    49.98% { opacity: 1; transform: translateX(-17px); }
    52.92% { opacity: 0; transform: translateX(-17px); }
    58.8% { opacity: 0; transform: translateX(0); }
    100% { opacity: 0; }
}
.management--4 {
    opacity: 0;
    transform: translateX(0);
    animation: management4Animation 8.5s ease 0s infinite normal none;
}

@keyframes supportAnimation {
    0% { opacity: 0; }
    47.04% { opacity: 0; }
    52.92% { opacity: 1; }
    58.8% { opacity: 1; }
    64.68% { opacity: 1; }
    67.62% { opacity: 1; }
    70.56% { opacity: 0; }
    100% { opacity: 0; }
}
.support {
    opacity: 0;
    animation: supportAnimation 8.5s ease 0s infinite normal none;
}

@keyframes support2Animation {
    0% { opacity: 0; }
    47.04% { opacity: 0; }
    52.92% { opacity: 1; }
    58.8% { opacity: 1; }
    64.68% { opacity: 1; transform: translateY(0); }
    67.62% { opacity: 1; transform: translateY(15px); }
    70.56% { opacity: 0; transform: translateY(15px); }
    76.44% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; }
}
.support--2 {
    opacity: 0;
    transform: translateY(0);
    animation: support2Animation 8.5s ease 0s infinite normal none;
}

@keyframes support4Animation {
    0% { opacity: 0; }
    47.04% { opacity: 0; }
    52.92% { opacity: 1; }
    58.8% { opacity: 1; }
    64.68% { opacity: 1; transform: translateY(0); }
    67.62% { opacity: 1; transform: translateY(-15px); }
    70.56% { opacity: 0; transform: translateY(-15px); }
    76.44% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; }
}
.support--4 {
    opacity: 0;
    transform: translateY(0);
    animation: support4Animation 8.5s ease 0s infinite normal none;
}

@keyframes be1Animation {
    0% { opacity: 0; }
    64.68% { opacity: 0; }
    70.56% { opacity: 1; }
    76.44% { opacity: 1; }
    82.32% { opacity: 1; transform: translateX(0); }
    88.2% { opacity: 0; transform: translateX(17px); }
    94.08% { opacity: 0; transform: translateX(0); }
    100% { opacity: 0; }
}
.be--1 {
    opacity: 0;
    transform: translateX(0);
    animation: be1Animation 8.5s ease 0s infinite normal none;
}

@keyframes be2Animation {
    0% { opacity: 0; }
    64.68% { opacity: 0; }
    70.56% { opacity: 1; }
    76.44% { opacity: 1; }
    82.32% { opacity: 1; transform: translateY(0); }
    88.2% { opacity: 0; transform: translateY(15px); }
    94.08% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; }
}
.be--2 {
    opacity: 0;
    transform: translateY(0);
    animation: be2Animation 8.5s ease 0s infinite normal none;
}

@keyframes beAnimation {
    0% { opacity: 0; }
    64.68% { opacity: 0; }
    70.56% { opacity: 1; }
    76.44% { opacity: 1; }
    82.32% { opacity: 1; }
    88.2% { opacity: 0; }
    100% { opacity: 0; }
}
.be {
    opacity: 0;
    animation: beAnimation 8.5s ease 0s infinite normal none;
}

@keyframes be4Animation {
    0% { opacity: 0; }
    64.68% { opacity: 0; }
    70.56% { opacity: 1; }
    76.44% { opacity: 1; }
    82.32% { opacity: 1; transform: translate(0, 0); }
    88.2% { opacity: 0; transform: translate(-17px, -15px); }
    94.08% { opacity: 0; transform: translate(0, 0); }
    100% { opacity: 0; }
}
.be--4 {
    opacity: 0;
    transform: translate(0, 0);
    animation: be4Animation 8.5s ease 0s infinite normal none;
}

@keyframes fe1Animation {
    0% { opacity: 0; }
    76.44% { opacity: 0; }
    82.32% { opacity: 0; transform: translateX(0); }
    88.2% { opacity: 1; transform: translateX(17px); }
    94.08% { opacity: 1; transform: translateX(17px); }
    100% { opacity: 1; transform: translateX(17px); }
    102.94% { opacity: 0; transform: translateX(0); }
}
.fe--1 {
    opacity: 0;
    transform: translateX(17px);
    animation: fe1Animation 8.5s ease 0s infinite normal none;
}

@keyframes fe2Animation {
    0% { opacity: 0; }
    76.44% { opacity: 0; }
    82.32% { opacity: 0; transform: translateY(0); }
    88.2% { opacity: 1; transform: translateY(16px); }
    94.08% { opacity: 1; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(16px); }
    102.94% { opacity: 0; transform: translateY(0); }
}
.fe--2 {
    opacity: 0;
    transform: translateY(16px);
    animation: fe2Animation 8.5s ease 0s infinite normal none;
}

@keyframes feAnimation {
    0% { opacity: 0; }
    82.32% { opacity: 0; }
    88.2% { opacity: 1; }
    94.08% { opacity: 1; }
    100% { opacity: 1; }
    102.94% { opacity: 0; }
}
.fe {
    opacity: 0;
    animation: feAnimation 8.5s ease 0s infinite normal none;
}

@keyframes fe4Animation {
    0% { opacity: 0; }
    76.44% { opacity: 0; }
    82.32% { opacity: 0; transform: translate(0, 0); }
    88.2% { opacity: 1; transform: translate(-17px, -16px); }
    94.08% { opacity: 1; transform: translate(-17px, -16px); }
    100% { opacity: 1; transform: translate(-17px, -16px); }
    102.94% { opacity: 0; transform: translate(0, 0); }
}
.fe--4 {
    opacity: 0;
    transform: translate(-17px, -16px);
    animation: fe4Animation 8.5s ease 0s infinite normal none;
}