.svg-container {
    position: relative;
    width: 244px;
    height: 244px;
    top: -80px;
    left: 50px;
}

.ind-sec {
    top: 30px !important;
}

.svg-first,
.svg-second {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

@keyframes rotateClockwise {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.3);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes rotateCounterClockwise {
    0% {
        transform: rotate(0deg) scale(1);
        filter: brightness(0) saturate(100%) invert(21%) sepia(86%) saturate(4561%) hue-rotate(243deg) brightness(91%) contrast(101%);
    }

    50% {
        transform: rotate(-180deg) scale(1.3);
        filter: brightness(0) saturate(100%) invert(62%) sepia(93%) saturate(618%) hue-rotate(344deg) brightness(98%) contrast(98%);
    }

    100% {
        transform: rotate(-360deg) scale(1);
        filter: brightness(0) saturate(100%) invert(21%) sepia(86%) saturate(4561%) hue-rotate(243deg) brightness(91%) contrast(101%);
    }
}

.svg-first {
    animation: rotateClockwise 10s linear infinite;
}

.svg-second {
    animation: rotateCounterClockwise 10s linear infinite;
}

.offer__container-image3--services {
    position: absolute;
    left: 80px;
    bottom: -20px;
    width: 246px;
    height: 246px;
    transform-origin: center;
    animation: rotateAndPulse 5s ease-in-out infinite;
}

.position {
    height: 190px !important;
}

@keyframes rotateAndPulse {
    0% {
        transform: rotate(0deg) scale(1);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
        filter: hue-rotate(45deg);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: hue-rotate(0deg);
    }
}

@media (max-width: 1270px) {
    .offer__container-image3--services {
        left: 70px;
        bottom: -20px;
        width: 200px;
        height: 200px;
    }

    .svg-container {
        width: 200px;
        height: 200px;
    }

    .position {
        height: 140px !important;
    }
}

@media (max-width: 1120px) {
    .svg-container {
        width: 260px;
        height: 260px;
    }

    .offer__container-image3--services {
        left: 70px;
        bottom: -20px;
        width: 260px;
        height: 260px;
    }

    .position {
        height: 160px !important;
    }
}

@media (max-width: 475px) {
    .offer__container-image3--services {
        width: 150px;
        height: 150px;
        left: 150px;
    }

    .svg-container {
        width: 150px;
        height: 150px;
        left: 150px;
    }

    .position {
        height: 80px !important;
    }
}