/* CÓDIGO CSS ESPECÍFICO DO CLIENTE */
#servicos .title p, #treinamento .title p{
    margin: 0 auto 40px auto;
    max-width: 75%;
}

.qtotal-services {
    background: url('http://qtotal.com.br/site/wp-content/themes/ecliente/images/services/circles-bg.jpg') no-repeat;
    background-size: cover;
    min-height: 480px;
    display: flex;
    justify-content: center;
    padding: 50px;
    position: relative;
  }
  .services-logo {
    position: absolute;
    right: 10px;
    bottom: 10px;
    max-width: 120px;
  }
    .center-circle {
position: relative;
top: 100px;
width: 180px;
height: 180px;
border: 2px solid #38566a;
border-radius: 100%;
background-image: url('https://www.qtotal.com.br/site/wp-content/themes/ecliente/images/services/circulo-principal.png');
background-size: cover;
}
.qtotal-service {
position: absolute;
width: 120px;
height: 120px;
top: -92.5px;
left: -92.5px;
background: #38566a;
border-radius: 100%;
transform: rotate(-45deg);
/* animation: spin-back1 2s ease-in-out forwards; */
transform-origin: 182.5px 182.5px;
box-sizing: border-box;
padding: 10px;
}
.qtotal-service:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #38566a;
transform: translate(97px, -3px) rotate(-45deg);
}
.qtotal-service:before {
content: "";
position: absolute;
width: 2px;
height: 30px;
background: #38566a;
transform: translate(95px, 81px) rotate(-45deg);
}
.inner-circle {
background: #f1f1f1;
width: 100%;
height: 100%;
text-align: center;
vertical-align: c;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 6px 8px 10px 0px rgb(0 0 0 / 50%);
}
.qtotal-service a {
color: #3a3a3a;
text-decoration: none;
font-size: 14px;
}
.qtotal-service:nth-child(1) {
transform: rotate(45deg);
animation: spin-back1 2s ease-in-out forwards;
}
.qtotal-service:nth-child(2) {
transform: rotate(-90deg);
animation: spin-back2 2s ease-in-out forwards;
}
.qtotal-service:nth-child(3) {
transform: rotate(-135deg);
animation: spin-back3 2s ease-in-out forwards;
}
.qtotal-service:nth-child(4) {
transform: rotate(-180deg);
animation: spin-back4 2s ease-in-out forwards;
}
.qtotal-service:nth-child(5) {
transform: rotate(-225deg);
animation: spin-back5 2s ease-in-out forwards;
}
.qtotal-service:nth-child(6) {
transform: rotate(-270deg);
animation: spin-back6 2s ease-in-out forwards;
}
.qtotal-service:nth-child(7) {
transform: rotate(-315deg);
animation: spin-back7 2s ease-in-out forwards;
}
.qtotal-service:nth-child(8) {
transform: rotate(-360deg);
animation: spin-back8 2s ease-in-out forwards;
}

.qtotal-service:nth-child(1) .inner-circle {
transform: rotate(-45deg);
}
.qtotal-service:nth-child(2) .inner-circle {
transform: rotate(-90deg);
}
.qtotal-service:nth-child(3) .inner-circle {
transform: rotate(-135deg);
}
.qtotal-service:nth-child(4) .inner-circle {
transform: rotate(-180deg);
}
.qtotal-service:nth-child(5) .inner-circle {
transform: rotate(-225deg);
}
.qtotal-service:nth-child(6) .inner-circle {
transform: rotate(-270deg);
}
.qtotal-service:nth-child(7) .inner-circle {
transform: rotate(-315deg);
}
.qtotal-service:nth-child(8) .inner-circle {
transform: rotate(-360deg);
}

@keyframes spin-back1 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(45deg);
opacity: 1;
}
}

@keyframes spin-back2 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(90deg);
opacity: 1;
}
}
@keyframes spin-back3 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(135deg);
opacity: 1;
}
}
@keyframes spin-back4 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(180deg);
opacity: 1;
}
}
@keyframes spin-back5 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(225deg);
opacity: 1;
}
}
@keyframes spin-back6 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(270deg);
opacity: 1;
}
}
@keyframes spin-back7 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(315deg);
opacity: 1;
}
}
@keyframes spin-back8 {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}